Merge pull request #1181 from topcoder-platform/dev

PROD: Copilot portal CRs & Bugs V3

Author: jmgasper

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

@@ -20,4 +20,5 @@ export interface CopilotApplication {
     opportunityStatus: string,
     existingMembership?: ExistingMembership,
     projectName: string,
+    onApplied: () => void,
 }

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

@@ -296,6 +296,7 @@ const CopilotOpportunityDetails: FC<{}> = () => {
                         copilotApplications={copilotApplications}
                         opportunity={opportunity}
                         members={members}
+                        onApplied={onApplied}
                     />
                 )}
 

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

@@ -0,0 +1,35 @@
+/* eslint-disable react/jsx-no-bind */
+import { FC } from 'react'
+
+import { BaseModal, Button } from '~/libs/ui'
+
+import styles from './styles.module.scss'
+
+interface ConfirmModalProps {
+    onClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+    onApply: () => void
+}
+
+const ConfirmModal: FC<ConfirmModalProps> = props => (
+    <BaseModal
+        onClose={props.onClose as () => void}
+        open
+        size='lg'
+        title='Confirm to accept as copilot'
+        buttons={(
+            <>
+                <Button primary onClick={props.onApply} label='Confirm' />
+                <Button secondary onClick={props.onClose} label='Cancel' />
+            </>
+        )}
+    >
+        <div className={styles.applyCopilotModal}>
+            <div className={styles.info}>
+                Click &apos;Confirm&apos; to accept by updating project role to &apos;Copilot&apos;
+                and complete this opportunity
+            </div>
+        </div>
+    </BaseModal>
+)
+
+export default ConfirmModal

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

@@ -1,13 +1,13 @@
 import { useParams } from 'react-router-dom'
 import { toast } from 'react-toastify'
-import { mutate } from 'swr'
 import { useCallback, useMemo, useState } from 'react'
 
-import { assignCopilotOpportunity, copilotBaseUrl } from '~/apps/copilots/src/services/copilot-opportunities'
+import { assignCopilotOpportunity } 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 ConfirmModal from './ConfirmModal'
 import styles from './styles.module.scss'
 
 const CopilotApplicationAction = (
@@ -16,6 +16,7 @@ const CopilotApplicationAction = (
 ): JSX.Element => {
     const { opportunityId }: {opportunityId?: string} = useParams<{ opportunityId?: string }>()
     const [showAlreadyMemberModal, setShowAlreadyMemberModal] = useState(false)
+    const [showConfirmModal, setShowConfirmModal] = useState(false)
     const isInvited = useMemo(
         () => allCopilotApplications
             && allCopilotApplications.findIndex(item => item.status === CopilotApplicationStatus.INVITED) > -1,
@@ -32,19 +33,8 @@ const CopilotApplicationAction = (
 
         if (copilotApplication.existingMembership) {
             setShowAlreadyMemberModal(true)
-            return
-        }
-
-        if (opportunityId) {
-            try {
-                await assignCopilotOpportunity(opportunityId, copilotApplication.id)
-                toast.success('Invited a copilot')
-                mutate(`${copilotBaseUrl}/copilots/opportunity/${opportunityId}/applications`)
-            } catch (e) {
-                const error = e as Error
-                toast.error(error.message)
-            }
-
+        } else {
+            setShowConfirmModal(true)
         }
     }, [opportunityId, copilotApplication])
 
@@ -56,8 +46,9 @@ const CopilotApplicationAction = (
 
             await assignCopilotOpportunity(opportunityId, copilotApplication.id)
             toast.success('Accepted as copilot')
-            mutate(`${copilotBaseUrl}/copilots/opportunity/${opportunityId}/applications`)
+            copilotApplication.onApplied()
             setShowAlreadyMemberModal(false)
+            setShowConfirmModal(false)
         } catch (e) {
             const error = e as Error
             toast.error(error.message)
@@ -68,6 +59,7 @@ const CopilotApplicationAction = (
         e.preventDefault()
         e.stopPropagation()
         setShowAlreadyMemberModal(false)
+        setShowConfirmModal(false)
     }, [showAlreadyMemberModal])
 
     return (
@@ -84,7 +76,7 @@ const CopilotApplicationAction = (
                 !isInvited
                 && copilotApplication.status === CopilotApplicationStatus.PENDING
                 && copilotApplication.opportunityStatus === 'active' && (
-                    <Tooltip content='Send Invitation'>
+                    <Tooltip content='Accept'>
                         <IconSolid.UserAddIcon />
                     </Tooltip>
                 )
@@ -107,6 +99,13 @@ const CopilotApplicationAction = (
                     copilotApplication={copilotApplication}
                 />
             )}
+
+            {showConfirmModal && (
+                <ConfirmModal
+                    onClose={onCloseModal}
+                    onApply={onApply}
+                />
+            )}
         </div>
     )
 }

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

@@ -77,6 +77,7 @@ const CopilotApplications: FC<{
     copilotApplications?: CopilotApplication[]
     members?: FormattedMembers[]
     opportunity: CopilotOpportunity
+    onApplied: () => void
 }> = props => {
     const getData = (): CopilotApplication[] => (props.copilotApplications ? props.copilotApplications.map(item => {
         const member = props.members && props.members.find(each => each.userId === item.userId)
@@ -85,6 +86,7 @@ const CopilotApplications: FC<{
             activeProjects: member?.activeProjects || 0,
             fulfilment: member?.copilotFulfillment || 0,
             handle: member?.handle,
+            onApplied: props.onApplied,
             opportunityStatus: props.opportunity.status,
             pastProjects: member?.pastProjects || 0,
             projectName: props.opportunity.projectName,

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

@@ -14,9 +14,12 @@ const OpportunityDetails: FC<{
                 {props.opportunity?.skills.map(item => (<span className={styles.skillPill}>{item.name}</span>))}
             </div>
             <h2 className={styles.subHeading}> Description </h2>
-            <p>
-                {props.opportunity?.overview}
-            </p>
+            {props.opportunity?.overview && (
+                <div dangerouslySetInnerHTML={{
+                    __html: props.opportunity.overview.replace(/\n/g, '<br />'),
+                }}
+                />
+            )}
         </div>
         <div>
             <h2 className={styles.subHeading}> Complexity </h2>

src/apps/copilots/src/pages/copilot-request-form/index.tsx

@@ -45,6 +45,7 @@ const CopilotRequestForm: FC<{}> = () => {
     const [formErrors, setFormErrors] = useState<any>({})
     const [paymentType, setPaymentType] = useState<string>('')
     const [projectFromQuery, setProjectFromQuery] = useState<Project>()
+    const activeProjectStatuses = ['active', 'approved', 'draft', 'new']
 
     const { data: copilotRequestData }: CopilotRequestResponse = useCopilotRequest(routeParams.requestId)
 
@@ -114,7 +115,13 @@ const CopilotRequestForm: FC<{}> = () => {
         label: string;
         value: string;
     }>> {
-        const response = await getProjects(inputValue)
+        const response = await getProjects(inputValue, {
+            filter: {
+                status: {
+                    $in: [activeProjectStatuses],
+                },
+            },
+        })
         return response.map(project => ({ label: project.name, value: project.id }))
     }
 
@@ -494,6 +501,7 @@ const CopilotRequestForm: FC<{}> = () => {
                             .setFullYear(new Date()
                                 .getFullYear() + 2))}
                         minYear={new Date()}
+                        className={styles.datepicker}
                     />
                     <p className={styles.formRow}>How many weeks will you need the copilot for?</p>
                     <InputText

src/apps/copilots/src/pages/copilot-request-form/styles.module.scss

@@ -97,4 +97,8 @@ $gradient: linear-gradient(
             margin-right: $sp-1;
         }
     }
+
+    .datepicker input{
+        color: black;
+    }
 }

src/apps/copilots/src/pages/copilot-requests/index.tsx

@@ -200,7 +200,10 @@ const CopilotRequestsPage: FC = () => {
             className: styles.opportunityTitle,
             label: 'Title',
             propertyName: 'opportunityTitle',
-            type: 'text',
+            renderer: (copilotRequest: CopilotRequest) => (
+                <div className={styles.title}>{copilotRequest.opportunityTitle}</div>
+            ),
+            type: 'element',
         },
         {
             label: 'Type',

src/apps/copilots/src/services/projects.ts

@@ -63,8 +63,8 @@ export const getProject = (projectId: string): Promise<Project> => {
     return xhrGetAsync<Project>(url)
 }
 
-export const getProjects = (search?: string, filter?: any): Promise<Project[]> => {
-    const params = { name: `"${search}"`, ...filter }
+export const getProjects = (search?: string, config?: {filter: any}): Promise<Project[]> => {
+    const params = { name: search, ...config?.filter }
     const url = buildUrl(baseUrl, params)
     return xhrGetAsync<Project[]>(url)
 }