[PROD] - Copilot Portal Fixes & Updates

.circleci/config.yml

@@ -222,7 +222,7 @@ workflows:
                               - LVT-256
                               - CORE-635
                               - feat/system-admin
-                              - pm-1448_1
+                              - pm-1365_1
 
             - deployQa:
                   context: org-global

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "craco start --mode ${LOGICAL_ENV:-dev}",
     "start": "bash start.sh",
-    "build": "export CI=false && craco build --mode ${LOGICAL_ENV:-prod}",
+    "build": "rimraf ./build && export CI=false && craco build --mode ${LOGICAL_ENV:-prod}",
     "build:dev": "craco build --mode ${LOGICAL_ENV:-dev}",
     "demo": "npx http-server --port 443 -a 0.0.0.0 -S -C ./ssl/rootCA.crt -K ./ssl/rootCA.key -P https://local.topcoder-dev.com? --proxy-options.secure false ./build",
     "lint": "eslint -c ./src/.eslintrc.js 'src/**/*.{ts,tsx,js,jsx}'",
@@ -189,6 +189,7 @@
     "react-docgen-typescript": "^2.2.2",
     "react-hot-loader": "^4.3.3",
     "resolve-url-loader": "^5.0.0",
+    "rimraf": "^6.0.1",
     "sass-loader": "^13.3.3",
     "serve": "^14.0.1",
     "start-server-and-test": "^1.14.0",

src/apps/copilots/src/copilots.routes.tsx

@@ -35,6 +35,13 @@ export const childRoutes = [
         rolesRequired: [UserRole.administrator, UserRole.projectManager] as UserRole[],
         route: '/requests/new',
     },
+    {
+        authRequired: true,
+        element: <CopilotsRequestForm />,
+        id: 'CopilotRequestEditForm',
+        rolesRequired: [UserRole.administrator, UserRole.projectManager] as UserRole[],
+        route: '/requests/edit/:requestId',
+    },
     {
         authRequired: true,
         element: <CopilotsRequests />,

src/apps/copilots/src/models/CopilotApplication.ts

@@ -4,6 +4,11 @@ export enum CopilotApplicationStatus {
     PENDING = 'pending',
 }
 
+export interface ExistingMembership {
+    role: string,
+    id: number,
+}
+
 export interface CopilotApplication {
     id: number,
     notes?: string,
@@ -13,4 +18,6 @@ export interface CopilotApplication {
     userId: number,
     status: CopilotApplicationStatus,
     opportunityStatus: string,
+    existingMembership?: ExistingMembership,
+    projectName: string,
 }

src/apps/copilots/src/models/CopilotOpportunity.ts

@@ -15,12 +15,12 @@ export interface CopilotOpportunity {
     numHoursPerWeek: number,
     numWeeks: number,
     overview: string,
+    opportunityTitle: string,
     paymentType: string,
     otherPaymentType: string,
     requiresCommunication: 'yes' | 'no',
     skills: UserSkill[],
     startDate: Date,
     tzRestrictions: 'yes' | 'no',
     createdAt: Date,
-    canApplyAsCopilot: boolean,
 }

src/apps/copilots/src/models/CopilotRequest.ts

@@ -13,6 +13,7 @@ export interface CopilotRequest {
     numHoursPerWeek: number,
     numWeeks: number,
     overview: string,
+    opportunityTitle: string,
     paymentType: string,
     otherPaymentType: string,
     requiresCommunication: 'yes' | 'no',

src/apps/copilots/src/pages/copilot-opportunity-details/apply-opportunity-modal/styles.module.scss

@@ -4,4 +4,13 @@
   .info {
     margin-bottom: 12px;
   }
+
+  &:global(.react-responsive-modal-modal) {
+
+    :global(.modal-body) {
+        @include ltemd {
+            height: 100%;
+        }
+    }
+  }
 }

src/apps/copilots/src/pages/copilot-opportunity-details/index.tsx

@@ -65,6 +65,10 @@ const CopilotOpportunityDetails: FC<{}> = () => {
         [profile],
     )
     const { data: copilotApplications }: { data?: CopilotApplication[] } = useCopilotApplications(opportunityId)
+    const appliedCopilotApplications = useMemo(
+        () => copilotApplications?.filter(item => item.userId === profile?.userId),
+        [copilotApplications, profile],
+    )
     const { data: members }: { data?: FormattedMembers[]} = useMembers(
         copilotApplications ? copilotApplications?.map(item => item.userId) : [],
     )
@@ -95,13 +99,16 @@ const CopilotOpportunityDetails: FC<{}> = () => {
     }, [getHashFromTabId, setActiveTab])
 
     useEffect(() => {
+        if (opportunity) {
+            setShowNotFound(false)
+            return undefined
+        }
+
         const timer = setTimeout(() => {
-            if (!opportunity) {
-                setShowNotFound(true)
-            }
-        }, 2000)
+            setShowNotFound(true)
+        }, 1000)
 
-        return () => clearTimeout(timer) // Cleanup on unmount
+        return () => clearTimeout(timer)
     }, [opportunity])
 
     const onApplied: () => void = useCallback(() => {
@@ -113,6 +120,14 @@ const CopilotOpportunityDetails: FC<{}> = () => {
         setShowApplyOpportunityModal(false)
     }, [setShowApplyOpportunityModal])
 
+    if (isValidating && !opportunity) {
+        return (
+            <ContentLayout title='Copilot Opportunity Details'>
+                <LoadingSpinner />
+            </ContentLayout>
+        )
+    }
+
     if (!opportunity && showNotFound) {
         return (
             <ContentLayout title='Copilot Opportunity Details'>
@@ -164,17 +179,17 @@ const CopilotOpportunityDetails: FC<{}> = () => {
             title='Copilot Opportunity'
             buttonConfig={
                 isCopilot
-                && copilotApplications
-                && copilotApplications.length === 0
+                && appliedCopilotApplications
+                && appliedCopilotApplications.length === 0
                 && opportunity?.status === 'active'
-                && opportunity?.canApplyAsCopilot ? applyCopilotOpportunityButton : undefined
+                    ? applyCopilotOpportunityButton : undefined
             }
             secondaryButtonConfig={
                 opportunity?.status === 'active'
                 && isAdminOrPM ? cancelCopilotOpportunityButton : undefined
             }
-            infoComponent={(isCopilot && !(copilotApplications
-                && copilotApplications.length === 0
+            infoComponent={(isCopilot && !(appliedCopilotApplications
+                && appliedCopilotApplications.length === 0
             ) && opportunity?.status === 'active' && !!application) && (
                 <div className={styles.applied}>
                     <IconSolid.CheckCircleIcon className={styles.appliedIcon} />
@@ -194,7 +209,7 @@ const CopilotOpportunityDetails: FC<{}> = () => {
             ) }
             <div className={styles.wrapper}>
                 <h1 className={styles.header}>
-                    {opportunity?.projectName}
+                    {opportunity?.opportunityTitle ?? opportunity?.projectName}
                 </h1>
                 <div className={styles.infoRow}>
                     <div className={styles.infoColumn}>
@@ -255,6 +270,16 @@ const CopilotOpportunityDetails: FC<{}> = () => {
                             <span className={styles.infoValue}>{opportunity?.tzRestrictions}</span>
                         </div>
                     </div>
+                    <div className={styles.infoColumn}>
+                        <IconOutline.CashIcon className={styles.icon} />
+                        <div className={styles.infoText}>
+                            <span className={styles.infoHeading}>Payment</span>
+                            <span className={styles.infoValue}>
+                                {opportunity?.paymentType === 'standard'
+                                    ? opportunity.paymentType : opportunity?.otherPaymentType}
+                            </span>
+                        </div>
+                    </div>
                 </div>
                 {
                     initialized && (

src/apps/copilots/src/pages/copilot-opportunity-details/styles.module.scss

@@ -17,6 +17,12 @@
     color: $teal-100;
 }
 
+@media (max-width: 767px) {
+    .header {
+        line-height: 48px;
+    }
+}
+
 
 .infoRow {
     display: flex;
@@ -27,6 +33,13 @@
     padding: 12px 0;
 }
 
+@media (max-width: 767px) {
+    .infoRow {
+        flex-wrap: wrap;
+        margin: 0;
+    }
+}
+
 .infoText {
     display: flex;
     flex-direction: column;

src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/AlreadyMemberModal.tsx

@@ -0,0 +1,56 @@
+/* eslint-disable react/jsx-no-bind */
+import { FC } from 'react'
+
+import { BaseModal, Button } from '~/libs/ui'
+import { CopilotApplication } from '~/apps/copilots/src/models/CopilotApplication'
+
+import styles from './styles.module.scss'
+
+interface AlreadyMemberModalProps {
+    onClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+    copilotApplication: CopilotApplication
+    handle?: string
+    onApply: () => void
+    projectName: string
+}
+
+const AlreadyMemberModal: FC<AlreadyMemberModalProps> = props => (
+    <BaseModal
+        onClose={props.onClose as () => void}
+        open
+        size='lg'
+        title='User already member of the project'
+        buttons={(
+            <>
+                <Button primary onClick={props.onApply} label='Confirm' />
+                <Button secondary onClick={props.onClose} label='Cancel' />
+            </>
+        )}
+    >
+        <div className={styles.applyCopilotModal}>
+            <div className={styles.info}>
+                {`The copilot ${props.handle} is part of ${props.projectName} 
+                  project with ${props.copilotApplication.existingMembership?.role} role.`}
+
+                {
+                    props.copilotApplication.existingMembership
+                  && ['copilot', 'manager'].includes(props.copilotApplication.existingMembership.role)
+                  && <div>Click &apos;Confirm&apos; to accept and complete this opportunity.</div>
+                }
+
+                {
+                    props.copilotApplication.existingMembership
+                  && ['observer', 'customer'].includes(props.copilotApplication.existingMembership.role)
+                  && (
+                      <div>
+                          Click &apos;Confirm&apos; to accept by updating project role to &apos;Copilot&apos;
+                          and complete this opportunity
+                      </div>
+                  )
+                }
+            </div>
+        </div>
+    </BaseModal>
+)
+
+export default AlreadyMemberModal

src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/CopilotApplicationAction.tsx

@@ -1,19 +1,21 @@
 import { useParams } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { mutate } from 'swr'
-import { useCallback, useMemo } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 
 import { assignCopilotOpportunity, copilotBaseUrl } from '~/apps/copilots/src/services/copilot-opportunities'
 import { CopilotApplication, CopilotApplicationStatus } from '~/apps/copilots/src/models/CopilotApplication'
 import { IconSolid, Tooltip } from '~/libs/ui'
 
+import AlreadyMemberModal from './AlreadyMemberModal'
 import styles from './styles.module.scss'
 
 const CopilotApplicationAction = (
     copilotApplication: CopilotApplication,
     allCopilotApplications: CopilotApplication[],
 ): JSX.Element => {
     const { opportunityId }: {opportunityId?: string} = useParams<{ opportunityId?: string }>()
+    const [showAlreadyMemberModal, setShowAlreadyMemberModal] = useState(false)
     const isInvited = useMemo(
         () => allCopilotApplications
             && allCopilotApplications.findIndex(item => item.status === CopilotApplicationStatus.INVITED) > -1,
@@ -28,6 +30,11 @@ const CopilotApplicationAction = (
             return
         }
 
+        if (copilotApplication.existingMembership) {
+            setShowAlreadyMemberModal(true)
+            return
+        }
+
         if (opportunityId) {
             try {
                 await assignCopilotOpportunity(opportunityId, copilotApplication.id)
@@ -40,6 +47,29 @@ const CopilotApplicationAction = (
 
         }
     }, [opportunityId, copilotApplication])
+
+    const onApply = useCallback(async () => {
+        try {
+            if (!opportunityId) {
+                return
+            }
+
+            await assignCopilotOpportunity(opportunityId, copilotApplication.id)
+            toast.success('Accepted as copilot')
+            mutate(`${copilotBaseUrl}/copilots/opportunity/${opportunityId}/applications`)
+            setShowAlreadyMemberModal(false)
+        } catch (e) {
+            const error = e as Error
+            toast.error(error.message)
+        }
+    }, [opportunityId, copilotApplication])
+
+    const onCloseModal = useCallback((e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        e.preventDefault()
+        e.stopPropagation()
+        setShowAlreadyMemberModal(false)
+    }, [showAlreadyMemberModal])
+
     return (
         <div onClick={onClick} className={styles.actionWrapper}>
             {
@@ -67,6 +97,16 @@ const CopilotApplicationAction = (
                     </Tooltip>
                 )
             }
+
+            {showAlreadyMemberModal && (
+                <AlreadyMemberModal
+                    projectName={copilotApplication.projectName}
+                    handle={copilotApplication.handle}
+                    onClose={onCloseModal}
+                    onApply={onApply}
+                    copilotApplication={copilotApplication}
+                />
+            )}
         </div>
     )
 }