Merge pull request #1072 from topcoder-platform/pm-578_1

fix(PM-578): QA feedbacks on apply copilot opportunity functionality

Author: hentrymartin

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

@@ -17,17 +17,19 @@ interface ApplyOpportunityModalProps {
 const ApplyOpportunityModal: FC<ApplyOpportunityModalProps> = props => {
     const [notes, setNotes] = useState('')
     const [success, setSuccess] = useState(false)
+    const [error, setError] = useState('')
 
     const onApply = useCallback(async () => {
         try {
-            await applyCopilotOpportunity(props.copilotOpportunityId, {
+            await applyCopilotOpportunity(props.copilotOpportunityId, notes ? {
                 notes,
-            })
+            } : undefined)
 
             props.onApplied()
             setSuccess(true)
-        } catch (e) {
-            setSuccess(true)
+        } catch (e: any) {
+            setSuccess(false)
+            setError(e.message)
         }
     }, [props.copilotOpportunityId, notes])
 
@@ -77,6 +79,8 @@ const ApplyOpportunityModal: FC<ApplyOpportunityModalProps> = props => {
                             name='Notes'
                             onChange={onChange}
                             value={notes}
+                            error={error}
+                            dirty={!!error}
                         />
                     )
                 }

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

@@ -18,11 +18,13 @@ import {
     ButtonProps,
     ContentLayout,
     IconOutline,
+    IconSolid,
     LoadingSpinner,
     PageTitle,
     TabsNavbar,
 } from '~/libs/ui'
 import { profileContext, ProfileContextData, UserRole } from '~/libs/core'
+import { textFormatDateLocaleShortString } from '~/libs/shared'
 
 import { CopilotApplication } from '../../models/CopilotApplication'
 import {
@@ -77,8 +79,12 @@ const CopilotOpportunityDetails: FC<{}> = () => {
     const [activeTab, setActiveTab]: [string, Dispatch<SetStateAction<string>>] = useState<string>(activeTabHash)
 
     useEffect(() => {
-        setActiveTab(activeTabHash)
-    }, [activeTabHash])
+        if (isAdminOrPM) {
+            setActiveTab(activeTabHash)
+        } else {
+            setActiveTab('0')
+        }
+    }, [activeTabHash, isAdminOrPM])
 
     const handleTabChange = useCallback((tabId: string): void => {
         setActiveTab(tabId)
@@ -97,6 +103,7 @@ const CopilotOpportunityDetails: FC<{}> = () => {
 
     const onApplied: () => void = useCallback(() => {
         mutate(`${copilotBaseUrl}/copilots/opportunity/${opportunityId}/applications`)
+        mutate(`${copilotBaseUrl}/copilots/opportunity/${opportunityId}`)
     }, [])
 
     const onCloseApplyModal: () => void = useCallback(() => {
@@ -117,16 +124,34 @@ const CopilotOpportunityDetails: FC<{}> = () => {
         onClick: () => setShowApplyOpportunityModal(true),
     }
 
+    const application = copilotApplications && copilotApplications[0]
+
     return (
         <ContentLayout
             title='Copilot Opportunity'
             buttonConfig={
                 isCopilot
                 && copilotApplications
-                && copilotApplications.length === 0 ? applyCopilotOpportunityButton : undefined
+                && copilotApplications.length === 0
+                && opportunity?.status === 'active' ? applyCopilotOpportunityButton : undefined
             }
+            infoComponent={(isCopilot && !(copilotApplications
+                && copilotApplications.length === 0
+                && opportunity?.status === 'active'
+            ) && !!application) && (
+                <div className={styles.applied}>
+                    <IconSolid.CheckCircleIcon className={styles.appliedIcon} />
+                    <span
+                        className={styles.appliedText}
+                    >
+                        {`Applied on ${textFormatDateLocaleShortString(new Date(application.createdAt))}`}
+                    </span>
+                </div>
+            )}
         >
-            <PageTitle>Copilot Opportunity</PageTitle>
+            <PageTitle>
+                Copilot Opportunity
+            </PageTitle>
             {isValidating && !showNotFound && (
                 <LoadingSpinner />
             ) }

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

@@ -54,6 +54,22 @@
     color: $teal-100;
 }
 
+.applied {
+    display: flex;
+    align-items: center;
+    .appliedIcon {
+        width: 30px;
+        height: 30px;
+        color: $green-1;
+    }
+
+    .appliedText {
+        font-size: 14px;
+        font-weight: 600;
+        color: #333;
+    }
+}
+
 .textCaps {
     text-transform: capitalize;
 }

src/apps/copilots/src/services/copilot-opportunities.ts

@@ -97,7 +97,7 @@ export const useCopilotOpportunity = (opportunityId?: string): CopilotOpportunit
  * @param request
  * @returns
  */
-export const applyCopilotOpportunity = async (opportunityId: number, request: {
+export const applyCopilotOpportunity = async (opportunityId: number, request?: {
     notes?: string;
 }): Promise<CopilotApplication> => {
     const url = `${copilotBaseUrl}/copilots/opportunity/${opportunityId}/apply`

src/libs/ui/lib/components/content-layout/ContentLayout.tsx

@@ -14,6 +14,7 @@ export interface ContentLayoutProps {
     outerClass?: string
     title?: string
     titleClass?: string
+    infoComponent?: ReactNode
 }
 
 const ContentLayout: FC<ContentLayoutProps> = (props: ContentLayoutProps) => (
@@ -50,6 +51,12 @@ const ContentLayout: FC<ContentLayoutProps> = (props: ContentLayoutProps) => (
                             </div>
                         )}
 
+                        {!!props.infoComponent && (
+                            <div>
+                                {props.infoComponent}
+                            </div>
+                        )}
+
                     </div>
                 )}
 

src/libs/ui/lib/styles/_modals.scss

@@ -54,7 +54,6 @@
 
         .react-responsive-modal-closeButton {
             top: $sp-5;
-            padding: $sp-1;
             border-radius: 50%;
 
             svg {