Merge pull request #1180 from topcoder-platform/pm-1610_1

fix(PM-1610): Show confirm modal while accepting application

Author: hentrymartin

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

@@ -7,6 +7,7 @@ import { CopilotApplication, CopilotApplicationStatus } from '~/apps/copilots/sr
 import { IconSolid, Tooltip } from '~/libs/ui'
 
 import AlreadyMemberModal from './AlreadyMemberModal'
+import ConfirmModal from './ConfirmModal'
 import styles from './styles.module.scss'
 
 const CopilotApplicationAction = (
@@ -15,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,
@@ -31,19 +33,8 @@ const CopilotApplicationAction = (
 
         if (copilotApplication.existingMembership) {
             setShowAlreadyMemberModal(true)
-            return
-        }
-
-        if (opportunityId) {
-            try {
-                await assignCopilotOpportunity(opportunityId, copilotApplication.id)
-                toast.success('Accepted as copilot')
-                copilotApplication.onApplied()
-            } catch (e) {
-                const error = e as Error
-                toast.error(error.message)
-            }
-
+        } else {
+            setShowConfirmModal(true)
         }
     }, [opportunityId, copilotApplication])
 
@@ -57,6 +48,7 @@ const CopilotApplicationAction = (
             toast.success('Accepted as copilot')
             copilotApplication.onApplied()
             setShowAlreadyMemberModal(false)
+            setShowConfirmModal(false)
         } catch (e) {
             const error = e as Error
             toast.error(error.message)
@@ -67,6 +59,7 @@ const CopilotApplicationAction = (
         e.preventDefault()
         e.stopPropagation()
         setShowAlreadyMemberModal(false)
+        setShowConfirmModal(false)
     }, [showAlreadyMemberModal])
 
     return (
@@ -83,7 +76,7 @@ const CopilotApplicationAction = (
                 !isInvited
                 && copilotApplication.status === CopilotApplicationStatus.PENDING
                 && copilotApplication.opportunityStatus === 'active' && (
-                    <Tooltip content='Accept Application'>
+                    <Tooltip content='Accept'>
                         <IconSolid.UserAddIcon />
                     </Tooltip>
                 )
@@ -106,6 +99,13 @@ const CopilotApplicationAction = (
                     copilotApplication={copilotApplication}
                 />
             )}
+
+            {showConfirmModal && (
+                <ConfirmModal
+                    onClose={onCloseModal}
+                    onApply={onApply}
+                />
+            )}
         </div>
     )
 }