Merge pull request #1165 from topcoder-platform/pm-1506_1

feat(PM-1506): show already member modal

Author: hentrymartin

.circleci/config.yml

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

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/pages/copilot-opportunity-details/tabs/copilot-applications/AlreadyMemberModal.tsx

@@ -0,0 +1,40 @@
+/* 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.`}
+                <div>Click &apos;Confirm&apos; to accept 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>
     )
 }

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

@@ -87,6 +87,7 @@ const CopilotApplications: FC<{
             handle: member?.handle,
             opportunityStatus: props.opportunity.status,
             pastProjects: member?.pastProjects || 0,
+            projectName: props.opportunity.projectName,
         }
     })
         .sort((a, b) => (b.fulfilment || 0) - (a.fulfilment || 0)) : [])