Merge pull request #1117 from topcoder-platform/dev

[PROD RELEASE] - Copilot Portal

Author: kkartunov

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

@@ -22,5 +22,5 @@ export interface CopilotOpportunity {
     startDate: Date,
     tzRestrictions: 'yes' | 'no',
     createdAt: Date,
-    members: Array<number>,
+    canApplyAsCopilot: boolean,
 }

src/apps/copilots/src/pages/copilot-opportunity-details/apply-opportunity-modal/ApplyOpportunityModal.tsx

@@ -44,8 +44,8 @@ const ApplyOpportunityModal: FC<ApplyOpportunityModalProps> = props => {
             size='lg'
             title={
                 success
-                    ? `Your Application for ${props.projectName} Has Been Received!`
-                    : `Confirm Your Copilot Application for ${props.projectName}`
+                    ? 'Your Application Has Been Received!'
+                    : 'Confirm Your Copilot Application'
             }
             buttons={
                 !success ? (
@@ -62,21 +62,21 @@ const ApplyOpportunityModal: FC<ApplyOpportunityModalProps> = props => {
                 <div className={styles.info}>
                     {
                         success
-                            ? `We appreciate the time and effort you've taken to apply 
-                            for this exciting opportunity. Our team is committed 
-                            to providing a seamless and efficient process to ensure a 
-                            great experience for all copilots. We will review your application 
-                            within short time.`
+                            ? `Thank you for taking the time to apply for this exciting opportunity. 
+                                We truly value your interest and effort. 
+                                Your application will be reviewed promptly.`
                             : `We're excited to see your interest in joining our team as a copilot 
-                            for the ${props.projectName} project! Before we proceed, we want to 
+                            for the "${props.projectName}" project! Before we proceed, we want to 
                             ensure that you have carefully reviewed the project requirements and 
-                            are committed to meeting them.`
+                            are committed to meeting them. Please write below the reason(s) 
+                            why you believe you're a good fit for this project 
+                            (e.g., previous experience, availability, etc.).`
                     }
                 </div>
                 {
                     !success && (
                         <InputTextarea
-                            name='Notes'
+                            name='Reason'
                             onChange={onChange}
                             value={notes}
                             error={error}

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

@@ -12,6 +12,7 @@ import {
 } from 'react'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import { mutate } from 'swr'
+import { toast } from 'react-toastify'
 import moment from 'moment'
 
 import {
@@ -28,13 +29,15 @@ import { textFormatDateLocaleShortString } from '~/libs/shared'
 
 import { CopilotApplication } from '../../models/CopilotApplication'
 import {
+    cancelCopilotOpportunity,
     copilotBaseUrl,
     CopilotOpportunityResponse,
     useCopilotApplications,
     useCopilotOpportunity,
 } from '../../services/copilot-opportunities'
 import { FormattedMembers, useMembers } from '../../services/members'
 import { copilotRoutesMap } from '../../copilots.routes'
+import { ProjectType } from '../../constants'
 
 import { ApplyOpportunityModal } from './apply-opportunity-modal'
 import {
@@ -103,7 +106,7 @@ const CopilotOpportunityDetails: FC<{}> = () => {
 
     const onApplied: () => void = useCallback(() => {
         mutate(`${copilotBaseUrl}/copilots/opportunity/${opportunityId}/applications`)
-        mutate(`${copilotBaseUrl}/copilots/opportunity/${opportunityId}`)
+        mutate(`${copilotBaseUrl}/copilot/opportunity/${opportunityId}`)
     }, [])
 
     const onCloseApplyModal: () => void = useCallback(() => {
@@ -119,13 +122,42 @@ const CopilotOpportunityDetails: FC<{}> = () => {
         )
     }
 
+    async function cancelCopilotOpportunityHandler(): Promise<void> {
+        if (opportunityId) {
+            await cancelCopilotOpportunity(opportunityId)
+            mutate(`${copilotBaseUrl}/copilots/opportunity/${opportunityId}/applications`)
+            mutate(`${copilotBaseUrl}/copilot/opportunity/${opportunityId}`)
+            toast.success('Canceled copilot opportunity successfully')
+        }
+
+    }
+
     const applyCopilotOpportunityButton: ButtonProps = {
         label: 'Apply as Copilot',
         onClick: () => setShowApplyOpportunityModal(true),
     }
 
+    const cancelCopilotOpportunityButton: ButtonProps = {
+        label: 'Cancel opportunity',
+        onClick: cancelCopilotOpportunityHandler,
+    }
+
     const application = copilotApplications && copilotApplications[0]
-    const isAlreadyMemberOfTheProject = profile && opportunity?.members?.includes(profile.userId)
+
+    const getOpportunityType = (type: string): ProjectType => {
+        switch (type) {
+            case 'ai':
+                return ProjectType.ai
+            case 'datascience':
+                return ProjectType.datascience
+            case 'dev':
+                return ProjectType.developement
+            case 'design':
+                return ProjectType.design
+            default:
+                return ProjectType.qa
+        }
+    }
 
     return (
         <ContentLayout
@@ -135,7 +167,11 @@ const CopilotOpportunityDetails: FC<{}> = () => {
                 && copilotApplications
                 && copilotApplications.length === 0
                 && opportunity?.status === 'active'
-                && !isAlreadyMemberOfTheProject ? applyCopilotOpportunityButton : undefined
+                && opportunity?.canApplyAsCopilot ? applyCopilotOpportunityButton : undefined
+            }
+            secondaryButtonConfig={
+                opportunity?.status === 'active'
+                && isAdminOrPM ? cancelCopilotOpportunityButton : undefined
             }
             infoComponent={(isCopilot && !(copilotApplications
                 && copilotApplications.length === 0
@@ -156,94 +192,101 @@ const CopilotOpportunityDetails: FC<{}> = () => {
             {isValidating && !showNotFound && (
                 <LoadingSpinner />
             ) }
-            <h1 className={styles.header}>
-                {opportunity?.projectName}
-            </h1>
-            <div className={styles.infoRow}>
-                <div className={styles.infoColumn}>
-                    <IconOutline.ClipboardCheckIcon className={styles.icon} />
-                    <div className={styles.infoText}>
-                        <span className={styles.infoHeading}>Status</span>
-                        <span className={styles.infoValue}>{opportunity?.status}</span>
+            <div className={styles.wrapper}>
+                <h1 className={styles.header}>
+                    {opportunity?.projectName}
+                </h1>
+                <div className={styles.infoRow}>
+                    <div className={styles.infoColumn}>
+                        <IconOutline.ClipboardCheckIcon className={styles.icon} />
+                        <div className={styles.infoText}>
+                            <span className={styles.infoHeading}>Status</span>
+                            <span className={styles.infoValue}>{opportunity?.status}</span>
+                        </div>
                     </div>
-                </div>
-                <div className={styles.infoColumn}>
-                    <IconOutline.PlayIcon className={styles.icon} />
-                    <div className={styles.infoText}>
-                        <span className={styles.infoHeading}>Start Date</span>
-                        <span className={styles.infoValue}>
-                            {moment(opportunity?.startDate)
-                                .format('MMM D, YYYY')}
-
-                        </span>
+                    <div className={styles.infoColumn}>
+                        <IconOutline.PlayIcon className={styles.icon} />
+                        <div className={styles.infoText}>
+                            <span className={styles.infoHeading}>Start Date</span>
+                            <span className={styles.infoValue}>
+                                {moment(opportunity?.startDate)
+                                    .format('MMM D, YYYY')}
+
+                            </span>
+                        </div>
                     </div>
-                </div>
-                <div className={styles.infoColumn}>
-                    <IconOutline.CalendarIcon className={styles.icon} />
-                    <div className={styles.infoText}>
-                        <span className={styles.infoHeading}>Duration</span>
-                        <span className={styles.infoValue}>
-                            {opportunity?.numWeeks}
-                            {' '}
-                            weeks
-                        </span>
+                    <div className={styles.infoColumn}>
+                        <IconOutline.CalendarIcon className={styles.icon} />
+                        <div className={styles.infoText}>
+                            <span className={styles.infoHeading}>Duration</span>
+                            <span className={styles.infoValue}>
+                                {opportunity?.numWeeks}
+                                {' '}
+                                weeks
+                            </span>
+                        </div>
                     </div>
-                </div>
-                <div className={styles.infoColumn}>
-                    <IconOutline.ClockIcon className={styles.icon} />
-                    <div className={styles.infoText}>
-                        <span className={styles.infoHeading}>Hours</span>
-                        <span className={styles.infoValue}>
-                            {opportunity?.numHoursPerWeek}
-                            {' '}
-                            hours/week
-                        </span>
+                    <div className={styles.infoColumn}>
+                        <IconOutline.ClockIcon className={styles.icon} />
+                        <div className={styles.infoText}>
+                            <span className={styles.infoHeading}>Hours</span>
+                            <span className={styles.infoValue}>
+                                {opportunity?.numHoursPerWeek}
+                                {' '}
+                                hours/week
+                            </span>
+                        </div>
                     </div>
-                </div>
-                <div className={styles.infoColumn}>
-                    <IconOutline.CogIcon className={styles.icon} />
-                    <div className={styles.infoText}>
-                        <span className={styles.infoHeading}>Type</span>
-                        <span className={styles.infoValue}>{opportunity?.type}</span>
+                    <div className={styles.infoColumn}>
+                        <IconOutline.CogIcon className={styles.icon} />
+                        <div className={styles.infoText}>
+                            <span className={styles.infoHeading}>Type</span>
+                            <span
+                                className={styles.infoValue}
+                            >
+                                {opportunity?.type && getOpportunityType(opportunity?.type)}
+                            </span>
+                        </div>
                     </div>
-                </div>
-                <div className={styles.infoColumn}>
-                    <IconOutline.GlobeAltIcon className={styles.icon} />
-                    <div className={styles.infoText}>
-                        <span className={styles.infoHeading}>Working Hours</span>
-                        <span className={styles.infoValue}>{opportunity?.tzRestrictions}</span>
+                    <div className={styles.infoColumn}>
+                        <IconOutline.GlobeAltIcon className={styles.icon} />
+                        <div className={styles.infoText}>
+                            <span className={styles.infoHeading}>Working Hours</span>
+                            <span className={styles.infoValue}>{opportunity?.tzRestrictions}</span>
+                        </div>
                     </div>
                 </div>
-            </div>
-            {
-                initialized && (
-                    <TabsNavbar
-                        defaultActive={activeTab}
-                        onChange={handleTabChange}
-                        tabs={getCopilotDetailsTabsConfig(isAdminOrPM)}
+                {
+                    initialized && (
+                        <TabsNavbar
+                            defaultActive={activeTab}
+                            onChange={handleTabChange}
+                            tabs={getCopilotDetailsTabsConfig(isAdminOrPM)}
+                        />
+                    )
+                }
+                {activeTab === CopilotDetailsTabViews.details && <OpportunityDetails opportunity={opportunity} />}
+                {activeTab === CopilotDetailsTabViews.applications && isAdminOrPM && opportunity && (
+                    <CopilotApplications
+                        copilotApplications={copilotApplications}
+                        opportunity={opportunity}
+                        members={members}
                     />
-                )
-            }
-            {activeTab === CopilotDetailsTabViews.details && <OpportunityDetails opportunity={opportunity} />}
-            {activeTab === CopilotDetailsTabViews.applications && isAdminOrPM && opportunity && (
-                <CopilotApplications
-                    copilotApplications={copilotApplications}
-                    opportunity={opportunity}
-                    members={members}
-                />
-            )}
+                )}
+
+                {
+                    showApplyOpportunityModal
+                    && opportunity && (
+                        <ApplyOpportunityModal
+                            copilotOpportunityId={opportunity?.id}
+                            onClose={onCloseApplyModal}
+                            projectName={opportunity?.projectName}
+                            onApplied={onApplied}
+                        />
+                    )
+                }
+            </div>
 
-            {
-                showApplyOpportunityModal
-                && opportunity && (
-                    <ApplyOpportunityModal
-                        copilotOpportunityId={opportunity?.id}
-                        onClose={onCloseApplyModal}
-                        projectName={opportunity?.projectName}
-                        onApplied={onApplied}
-                    />
-                )
-            }
         </ContentLayout>
     )
 }

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

@@ -1,5 +1,9 @@
 @import '@libs/ui/styles/includes';
 
+.wrapper {
+    min-height: 800px;
+}
+
 .header {
     display: flex;
     align-items: center;

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

@@ -15,7 +15,8 @@ const CopilotApplicationAction = (
 ): JSX.Element => {
     const { opportunityId }: {opportunityId?: string} = useParams<{ opportunityId?: string }>()
     const isInvited = useMemo(
-        () => allCopilotApplications.findIndex(item => item.status === CopilotApplicationStatus.INVITED) > -1,
+        () => allCopilotApplications
+            && allCopilotApplications.findIndex(item => item.status === CopilotApplicationStatus.INVITED) > -1,
         [allCopilotApplications],
     )
     const onClick = useCallback(async () => {

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

@@ -11,11 +11,8 @@ const OpportunityDetails: FC<{
         <div>
             <h2 className={styles.subHeading}> Required skills </h2>
             <div className={styles.skillsContainer}>
-                {props.opportunity?.skills.map((skill: any) => (
-                    <div key={skill.id} className={styles.skillPill}>
-                        {skill.name}
-                    </div>
-                ))}
+                {props.opportunity?.skills.map(item => item.name)
+                    .join(',')}
             </div>
             <h2 className={styles.subHeading}> Description </h2>
             <p>

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

@@ -84,6 +84,11 @@ const tableColumns: TableColumn<CopilotOpportunity>[] = [
         propertyName: 'startDate',
         type: 'date',
     },
+    {
+        label: 'Duration(Weeks)',
+        propertyName: 'numWeeks',
+        type: 'number',
+    },
     {
         label: 'Complexity',
         propertyName: 'complexity',