feat: apply for copilot opportunity

Author: hentrymartin

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

@@ -0,0 +1,6 @@
+export interface CopilotApplication {
+    id: number,
+    notes?: string,
+    createdAt: Date,
+    opportunityId: string,
+}

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

@@ -0,0 +1,63 @@
+import { FC, useCallback, useState } from 'react'
+
+import { BaseModal, Button, InputTextarea } from '~/libs/ui'
+
+import styles from './styles.module.scss'
+import { applyCopilotOpportunity } from '../../../services/copilot-opportunities'
+
+interface ApplyOpportunityModalProps {
+    onClose: () => void
+    copilotOpportunityId: number
+    projectName: string
+    onApplied: () => void
+}
+
+const ApplyOpportunityModal: FC<ApplyOpportunityModalProps> = props => {
+    const [notes, setNotes] = useState('')
+    const [success, setSuccess] = useState(false);
+
+    const onApply = useCallback(async () => {
+        await applyCopilotOpportunity(props.copilotOpportunityId, {
+            notes,
+        })
+
+        props.onApplied()
+        setSuccess(true)
+    }, [props.copilotOpportunityId, notes])
+
+    return (
+        <BaseModal
+            onClose={props.onClose}
+            open
+            size='lg'
+            title={success ? `Your Application for ${props.projectName} Has Been Received!` : `Confirm Your Copilot Application for ${props.projectName}`}
+            buttons={
+                !success ? (
+                    <>
+                        <Button primary onClick={onApply} label='Apply' />
+                        <Button secondary onClick={props.onClose} label='Cancel' />
+                    </>
+                ) : (
+                    <Button primary onClick={props.onClose} label='Close' />
+                )
+            }
+        >
+            
+            <div className={styles.applyCopilotModal}>
+                <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." : `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 ensure that you have carefully reviewed the project requirements and are committed to meeting them.`}
+                </div>
+                {
+                    !success && (
+                        <InputTextarea name="Notes" onChange={(e) => {
+                            setNotes(e.target.value)
+                        }} value={notes} />
+                    )
+                }
+            </div>
+        </BaseModal>
+    )
+}
+
+export default ApplyOpportunityModal

src/apps/copilots/src/pages/copilot-opportunity-details/apply-opportunity-modal/index.ts

@@ -0,0 +1 @@
+export { default as ApplyOpportunityModal } from './ApplyOpportunityModal'

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

@@ -0,0 +1,7 @@
+@import '@libs/ui/styles/includes';
+
+.applyCopilotModal {
+  .info {
+    margin-bottom: 12px;
+  }
+}

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

@@ -1,23 +1,34 @@
-import { FC, useEffect, useState } from 'react'
+import { FC, useContext, useEffect, useMemo, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import moment from 'moment'
+import { mutate } from 'swr'
 
 import {
+    ButtonProps,
     ContentLayout,
     IconOutline,
     LoadingSpinner,
     PageTitle,
 } from '~/libs/ui'
+import { profileContext, ProfileContextData, UserRole } from '~/libs/core'
 
-import { CopilotOpportunityResponse, useCopilotOpportunity } from '../../services/copilot-opportunities'
+import { copilotBaseUrl, CopilotOpportunityResponse, useCopilotApplications, useCopilotOpportunity } from '../../services/copilot-opportunities'
 import { copilotRoutesMap } from '../../copilots.routes'
 
 import styles from './styles.module.scss'
+import { ApplyOpportunityModal } from './apply-opportunity-modal'
 
 const CopilotOpportunityDetails: FC<{}> = () => {
     const { opportunityId }: {opportunityId?: string} = useParams<{ opportunityId?: string }>()
     const navigate = useNavigate()
     const [showNotFound, setShowNotFound] = useState(false)
+    const [showApplyOpportunityModal, setShowApplyOpportunityModal] = useState(false)
+    const { profile }: ProfileContextData = useContext(profileContext)
+    const isCopilot: boolean = useMemo(
+        () => !!profile?.roles?.some(role => role === UserRole.copilot),
+        [profile],
+    )
+    const { data: copilotApplications } = useCopilotApplications(opportunityId)
 
     if (!opportunityId) {
         navigate(copilotRoutesMap.CopilotOpportunityList)
@@ -44,8 +55,17 @@ const CopilotOpportunityDetails: FC<{}> = () => {
         )
     }
 
+    const applyCopilotOpportunityButton: ButtonProps = {
+        label: 'Apply as Copilot',
+        onClick: () => setShowApplyOpportunityModal(true),
+    }
+
+    const onApplied = () => {
+        mutate(`${copilotBaseUrl}/copilots/opportunity/${opportunityId}/applications`)
+    }
+
     return (
-        <ContentLayout title='Copilot Opportunity'>
+        <ContentLayout title='Copilot Opportunity' buttonConfig={isCopilot && copilotApplications && copilotApplications.length === 0 ? applyCopilotOpportunityButton : undefined}>
             <PageTitle>Copilot Opportunity</PageTitle>
             {isValidating && !showNotFound && (
                 <LoadingSpinner />
@@ -132,6 +152,9 @@ const CopilotOpportunityDetails: FC<{}> = () => {
                     <span className={styles.textCaps}>{opportunity?.requiresCommunication}</span>
                 </div>
             </div>
+            {
+                showApplyOpportunityModal && opportunity && <ApplyOpportunityModal copilotOpportunityId={opportunity?.id} onClose={() => setShowApplyOpportunityModal(false)} projectName={opportunity?.projectName} onApplied={onApplied} />
+            }
         </ContentLayout>
     )
 }

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

@@ -2,12 +2,13 @@ import useSWR, { SWRResponse } from 'swr'
 import useSWRInfinite, { SWRInfiniteResponse } from 'swr/infinite'
 
 import { EnvironmentConfig } from '~/config'
-import { xhrGetAsync } from '~/libs/core'
+import { xhrGetAsync, xhrPostAsync } from '~/libs/core'
 import { buildUrl } from '~/libs/shared/lib/utils/url'
 
 import { CopilotOpportunity } from '../models/CopilotOpportunity'
+import { CopilotApplication } from '../models/CopilotApplication'
 
-const baseUrl = `${EnvironmentConfig.API.V5}/projects`
+export const copilotBaseUrl = `${EnvironmentConfig.API.V5}/projects`
 
 const PAGE_SIZE = 20
 
@@ -26,6 +27,15 @@ function copilotOpportunityFactory(data: any): CopilotOpportunity {
     }
 }
 
+/**
+ * Creates a CopilotApplication object by merging the provided data and its nested data
+ * @param data 
+ * @returns 
+ */
+function opportunityApplicationFactory(data: any): CopilotApplication[] {
+    return data
+}
+
 export interface CopilotOpportunitiesResponse {
     isValidating: boolean;
     data: CopilotOpportunity[];
@@ -42,7 +52,7 @@ export interface CopilotOpportunitiesResponse {
 export const useCopilotOpportunities = (): CopilotOpportunitiesResponse => {
     const getKey = (pageIndex: number, previousPageData: CopilotOpportunity[]): string | undefined => {
         if (previousPageData && previousPageData.length < PAGE_SIZE) return undefined
-        return `${baseUrl}/copilots/opportunities?page=${pageIndex + 1}&pageSize=${PAGE_SIZE}&sort=createdAt desc`
+        return `${copilotBaseUrl}/copilots/opportunities?page=${pageIndex + 1}&pageSize=${PAGE_SIZE}&sort=createdAt desc`
     }
 
     const fetcher = (url: string): Promise<CopilotOpportunity[]> => xhrGetAsync<CopilotOpportunity[]>(url)
@@ -68,14 +78,16 @@ export const useCopilotOpportunities = (): CopilotOpportunitiesResponse => {
 
 export type CopilotOpportunityResponse = SWRResponse<CopilotOpportunity, CopilotOpportunity>
 
+export type CopilotApplicationResponse = SWRResponse<CopilotApplication[], CopilotApplication[]>
+
 /**
  * Custom hook to fetch copilot opportunity by id.
  *
  * @param {string} opportunityId - The unique identifier of the copilot request.
  * @returns {CopilotOpportunityResponse} - The response containing the copilot request data.
  */
 export const useCopilotOpportunity = (opportunityId?: string): CopilotOpportunityResponse => {
-    const url = opportunityId ? buildUrl(`${baseUrl}/copilot/opportunity/${opportunityId}`) : undefined
+    const url = opportunityId ? buildUrl(`${copilotBaseUrl}/copilot/opportunity/${opportunityId}`) : undefined
 
     const fetcher = (urlp: string): Promise<CopilotOpportunity> => xhrGetAsync<CopilotOpportunity>(urlp)
         .then(copilotOpportunityFactory)
@@ -85,3 +97,35 @@ export const useCopilotOpportunity = (opportunityId?: string): CopilotOpportunit
         revalidateOnFocus: false,
     })
 }
+
+/**
+ * apply copilot opportunity
+ * @param opportunityId 
+ * @param request 
+ * @returns 
+ */
+export const applyCopilotOpportunity = async (opportunityId: number, request: {
+    notes?: string;
+}) => {
+    const url = `${copilotBaseUrl}/copilots/opportunity/${opportunityId}/apply`
+    
+    return xhrPostAsync(url, request, {})
+}
+
+/**
+ * Custom hook to fetch copilot applications by opportunity id.
+ *
+ * @param {string} opportunityId - The unique identifier of the copilot request.
+ * @returns {CopilotApplicationResponse} - The response containing the copilot application data.
+ */
+export const useCopilotApplications = (opportunityId?: string): CopilotApplicationResponse => {
+    const url = opportunityId ? buildUrl(`${copilotBaseUrl}/copilots/opportunity/${opportunityId}/applications`) : undefined
+
+    const fetcher = (urlp: string): Promise<CopilotApplication[]> => xhrGetAsync<CopilotApplication[]>(urlp)
+        .then((data) => data).catch(() => [])
+
+    return useSWR(url, fetcher, {
+        refreshInterval: 0,
+        revalidateOnFocus: false,
+    })
+}

src/libs/core/lib/profile/profile-functions/profile-factory/user-role.enum.ts

@@ -11,5 +11,6 @@ export enum UserRole {
     paymentProviderViewer = 'PaymentProvider Viewer',
     projectManager = 'Project Manager',
     taxFormAdmin = 'TaxForm Admin',
-    taxFormViewer = 'TaxForm Viewer'
+    taxFormViewer = 'TaxForm Viewer',
+    copilot = 'copilot'
 }