feat(eap-full): add submit for approval functionality for full eap

shreeyash07 · shreeyash07 · commit 90b2261e15ff · 2026-01-23T12:14:44.000+05:45
diff --git a/app/src/views/EapFullForm/Overview/index.tsx b/app/src/views/EapFullForm/Overview/index.tsx
@@ -265,7 +265,7 @@ function Overview(props: Props) {
                         error={error}
                         disabled={disabled}
                         readOnly={readOnly}
-                        withAsteriskOnTitle
+                        withRequiredNameAndEmail
                     />
                     <InputSection
                         title={strings.partnerNS}
@@ -309,7 +309,7 @@ function Overview(props: Props) {
                         error={error}
                         disabled={disabled}
                         readOnly={readOnly}
-                        withAsteriskOnTitle
+                        withRequiredNameAndEmail
                     />
                     <ContactInputsSection
                         title={strings.delegation}
@@ -319,7 +319,7 @@ function Overview(props: Props) {
                         error={error}
                         disabled={disabled}
                         readOnly={readOnly}
-                        withAsteriskOnTitle
+                        withRequiredNameAndEmail
                     />
                 </>
                 <>
diff --git a/app/src/views/EapFullForm/TriggerModel/index.tsx b/app/src/views/EapFullForm/TriggerModel/index.tsx
@@ -424,7 +424,6 @@ function TriggerModel(props: Props) {
             <InputSection
                 title={strings.attachRelevantFilesTitle}
                 description={strings.attachRelevantFilesDescription}
-                withAsteriskOnTitle
             >
                 <GoMultiFileInput
                     name="trigger_model_relevant_files"
diff --git a/app/src/views/EapFullForm/i18n.json b/app/src/views/EapFullForm/i18n.json
@@ -19,7 +19,16 @@
         "successMessage": "Successfully created a new Full EAP!",
         "updateFailure": "Sorry could not update Full EAP right now!",
         "updateSuccess": "Successfully updated a new Full EAP!",
+        "submitApprovalSuccess": "Successfully submitted EAP for approval!",
+        "submitFailedSuccess": "Failed to submit the EAP for approval!",
         "backToAccount": "Back",
-        "readOnlyWarningMessage": "You’re viewing this form in read-only mode. Editing is currently disabled."
+        "readOnlyWarningMessage": "You’re viewing this form in read-only mode. Editing is currently disabled.",
+        "validationErrorAlertMessage": "Please fix all the errors before continuing!",
+        "savingPendingMessage": "Saving data...",
+        "submitFormErrorMessage": "Please make sure you've filled in all the required details before proceeding!",
+        "submitButtonLabel": "Submit for approval",
+        "submitConfirmButtonLabel": "Confirm",
+        "submitConfirmHeading": "Submit EAP for approval",
+        "submitConfirmMessage": "Are you sure you want to submit the EAP? Reviewers will be notified and you'll no longer be able to edit the form!"
     }
 }
diff --git a/app/src/views/EapFullForm/index.tsx b/app/src/views/EapFullForm/index.tsx
@@ -11,8 +11,11 @@ import {
     useSearchParams,
 } from 'react-router-dom';
 import {
+    Alert,
     Button,
+    InlineLayout,
     ListView,
+    Modal,
     Tab,
     TabList,
     TabPanel,
@@ -28,6 +31,7 @@ import {
     listToMap,
 } from '@togglecorp/fujs';
 import {
+    analyzeErrors,
     createSubmitHandler,
     removeNull,
     useForm,
@@ -40,6 +44,7 @@ import useRouting from '#hooks/useRouting';
 import {
     EAP_STATUS_NS_ADDRESSING_COMMENTS,
     EAP_STATUS_UNDER_DEVELOPMENT,
+    EAP_STATUS_UNDER_REVIEW,
 } from '#utils/constants';
 import {
     type GoApiBody,
@@ -76,6 +81,8 @@ import i18n from './i18n.json';
 type EapFullRequestBody = GoApiBody<'/api/v2/full-eap/', 'POST'>;
 type GetFullEapResponse = GoApiResponse<'/api/v2/full-eap/{id}/'>;
 
+type EapStatusBody = GoApiBody<'/api/v2/eap-registration/{id}/status/', 'POST'>;
+
 function getNextStep(current: TabKeys, direction: 1 | -1) {
     const tabKeyList: TabKeys[] = [
         'overview',
@@ -99,11 +106,16 @@ export function Component() {
     const [fileIdToUrlMap, setFileIdToUrlMap] = useState<Record<number, string>>(
         {},
     );
+    const [shouldSubmit, setShouldSubmit] = useState(false);
+
     const { eapId } = useParams<{ eapId: string }>();
     const [searchParams] = useSearchParams();
+
     const version = searchParams.get('version') ?? undefined;
-    const formContentRef = useRef<ElementRef<'div'>>(null);
+    const tabListRef = useRef<ElementRef<'div'>>(null);
+
     const strings = useTranslation(i18n);
+
     const { navigate } = useRouting();
 
     const alert = useAlert();
@@ -556,14 +568,13 @@ export function Component() {
         }
     }, [fullEapResponse, loadResponseToFormValue]);
 
-    const { pending: eapFullPending, trigger: createFullEap } = useLazyRequest({
+    const { pending: createFullEapPending, trigger: triggerCreateFullEap } = useLazyRequest({
         method: 'POST',
         url: '/api/v2/full-eap/',
         body: (body: EapFullRequestBody) => body,
         onSuccess: () => {
             const message = strings.successMessage;
             alert.show(message, { variant: 'success' });
-            navigate('accountMyFormsEap');
         },
         onFailure: (err) => {
             const {
@@ -579,18 +590,15 @@ export function Component() {
         },
     });
 
-    const { pending: updateFullFormPending, trigger: updateFullEap } = useLazyRequest({
+    const { pending: updateFullFormPending, trigger: triggerUpdateFullEap } = useLazyRequest({
         url: '/api/v2/full-eap/{id}/',
         method: 'PATCH',
         pathVariables: {
             id: Number(latestFullEapId),
         },
         body: (formFields: EapFullRequestBody) => formFields,
-        onSuccess: (response) => {
+        onSuccess: () => {
             alert.show(strings.updateSuccess, { variant: 'success' });
-
-            // FIXME: only navigate to accounts page for the submit action
-            navigate('accountMyFormsEap', { params: { eapId: response.id } });
         },
         onFailure: (err) => {
             const {
@@ -606,6 +614,35 @@ export function Component() {
         },
     });
 
+    const { trigger: triggerStatusUpdate } = useLazyRequest({
+        method: 'POST',
+        url: '/api/v2/eap-registration/{id}/status/',
+        pathVariables: isTruthyString(eapId) ? {
+            id: Number(eapId),
+        } : undefined,
+        body: () => ({
+            status: EAP_STATUS_UNDER_REVIEW,
+        // FIXME: fix typings in the server
+        } as EapStatusBody),
+        onSuccess: () => {
+            alert.show(
+                strings.submitApprovalSuccess,
+                { variant: 'success' },
+            );
+
+            navigate('accountMyFormsEap');
+        },
+        onFailure: (error) => {
+            alert.show(
+                strings.submitFailedSuccess,
+                {
+                    variant: 'danger',
+                    description: error.value.messageForNotification,
+                },
+            );
+        },
+    });
+
     useEffect(() => {
         if (isNotDefined(eapDetailResponse)) {
             return;
@@ -660,36 +697,39 @@ export function Component() {
 
     const readOnly = !isEditable;
 
-    const disabled = eapFullPending || updateFullFormPending || fetchingEap;
+    const disabled = createFullEapPending || updateFullFormPending || fetchingEap;
 
     const nextStep = getNextStep(activeTab, 1);
     const prevStep = getNextStep(activeTab, -1);
 
     const handleValidationSuccess = useCallback(
         (validatedFormValue: PartialEapFullFormType) => {
             if (isNotDefined(latestFullEapId)) {
-                createFullEap({
+                triggerCreateFullEap({
                     ...(validatedFormValue as unknown as EapFullRequestBody),
                     eap_registration: Number(eapId),
                 });
             } else {
-                updateFullEap({
+                triggerUpdateFullEap({
                     ...validatedFormValue,
                     id: latestFullEapId,
                 } as unknown as EapFullRequestBody);
             }
         },
-        [eapId, createFullEap, latestFullEapId, updateFullEap],
+        [eapId, triggerCreateFullEap, latestFullEapId, triggerUpdateFullEap],
     );
 
     const handleTabChange = useCallback((newTab: TabKeys) => {
-        formContentRef.current?.scrollIntoView();
         setActiveTab(newTab);
+        tabListRef.current?.scrollIntoView({ behavior: 'smooth' });
     }, []);
 
     const handleFormError = useCallback(() => {
-        setTimeout(() => formContentRef.current?.scrollIntoView(), 200);
-    }, []);
+        alert.show(
+            strings.validationErrorAlertMessage,
+            { variant: 'warning' },
+        );
+    }, [alert, strings.validationErrorAlertMessage]);
 
     const handleSave = useMemo(
         () => createSubmitHandler(
@@ -701,6 +741,25 @@ export function Component() {
         [handleFormError, handleValidationSuccess, validate, setError],
     );
 
+    const handleRequestForApprovalButtonClick = useCallback(() => {
+        setShouldSubmit(true);
+        handleSave();
+    }, [handleSave]);
+
+    const handleRequestForApprovalCancel = useCallback(() => {
+        setShouldSubmit(false);
+    }, []);
+
+    const handleSubmitForApprovalConfirm = useCallback(() => {
+        triggerStatusUpdate(null);
+        setShouldSubmit(false);
+    }, [triggerStatusUpdate]);
+
+    const hasFormErrors = useMemo(
+        () => analyzeErrors(formError),
+        [formError],
+    );
+
     return (
         <Tabs value={activeTab} onChange={setActiveTab} styleVariant="step">
             <Page
@@ -740,7 +799,7 @@ export function Component() {
                     )
                 }
                 info={(
-                    <TabList>
+                    <TabList elementRef={tabListRef}>
                         <Tab
                             name="overview"
                             step={1}
@@ -891,29 +950,78 @@ export function Component() {
                         isRevision={isRevision}
                     />
                 </TabPanel>
-                <ListView withCenteredContents>
-                    <Button
-                        name={prevStep ?? activeTab}
-                        onClick={handleTabChange}
-                        disabled={isNotDefined(prevStep)}
-                    >
-                        {strings.backButton}
-                    </Button>
-                    {isDefined(nextStep) ? (
-                        <Button name={nextStep ?? activeTab} onClick={handleTabChange}>
-                            {strings.nextButton}
-                        </Button>
-                    ) : (
+                <InlineLayout
+                    after={(
                         <Button
                             name={undefined}
                             onClick={handleSave}
-                            disabled={readOnly}
                         >
                             {strings.saveButton}
                         </Button>
                     )}
-                </ListView>
+                >
+                    <ListView withCenteredContents>
+                        <Button
+                            name={prevStep ?? activeTab}
+                            onClick={handleTabChange}
+                            disabled={isNotDefined(prevStep)}
+                        >
+                            {strings.backButton}
+                        </Button>
+                        {isDefined(nextStep) ? (
+                            <Button
+                                name={nextStep ?? activeTab}
+                                onClick={handleTabChange}
+                            >
+                                {strings.nextButton}
+                            </Button>
+                        ) : (
+                            <Button
+                                name={undefined}
+                                onClick={handleRequestForApprovalButtonClick}
+                                disabled={readOnly}
+                            >
+                                {strings.submitButtonLabel}
+                            </Button>
+                        )}
+                    </ListView>
+                </InlineLayout>
             </Page>
+            {shouldSubmit && (
+                <Modal
+                    heading={strings.submitConfirmHeading}
+                    onClose={handleRequestForApprovalCancel}
+                    pending={createFullEapPending || updateFullFormPending}
+                    pendingMessage={strings.savingPendingMessage}
+                    footerActions={(
+                        <Button
+                            name={undefined}
+                            disabled={hasFormErrors}
+                            onClick={handleSubmitForApprovalConfirm}
+                        >
+                            {strings.submitConfirmButtonLabel}
+                        </Button>
+                    )}
+                >
+                    <ListView
+                        layout="block"
+                        spacing="sm"
+                    >
+                        <div>
+                            {strings.submitConfirmMessage}
+                        </div>
+                        {hasFormErrors && (
+                            <Alert
+                                name="form-error-warning"
+                                title={strings.submitFormErrorMessage}
+                                type="warning"
+                                withLightBackground
+                                withoutShadow
+                            />
+                        )}
+                    </ListView>
+                </Modal>
+            )}
         </Tabs>
     );
 }
diff --git a/app/src/views/EapSimplifiedForm/Overview/index.tsx b/app/src/views/EapSimplifiedForm/Overview/index.tsx
@@ -198,6 +198,7 @@ function Overview(props: Props) {
                                 error={error}
                                 disabled={disabled}
                                 readOnly={readOnly}
+                                withRequiredNameAndEmail
                             />
                             <InputSection
                                 title={strings.partnerNS}
diff --git a/app/src/views/EapSimplifiedForm/i18n.json b/app/src/views/EapSimplifiedForm/i18n.json
@@ -19,6 +19,8 @@
         "updateSuccessMessage": "Simplified EAP Form updated Successfully!",
         "backToAccountLinkLabel": "Back",
         "readOnlyWarningMessage": "You’re viewing this form in read-only mode. Editing is currently disabled.",
+        "submitApprovalSuccess": "Successfully submitted EAP for approval!",
+        "submitFailedSuccess": "Failed to submit the EAP for approval!",
         "validationErrorAlertMessage": "Please fix all the errors before continuing!",
         "savingPendingMessage": "Saving data...",
         "submitFormErrorMessage": "Please make sure you've filled in all the required details before proceeding!",
diff --git a/app/src/views/EapSimplifiedForm/index.tsx b/app/src/views/EapSimplifiedForm/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -424,7 +424,6 @@ function TriggerModel(props: Props) {`
`424`	`424`	`<InputSection`
`425`	`425`	`title={strings.attachRelevantFilesTitle}`
`426`	`426`	`description={strings.attachRelevantFilesDescription}`
`427`		`- withAsteriskOnTitle`
`428`	`427`	`>`
`429`	`428`	`<GoMultiFileInput`
`430`	`429`	`name="trigger_model_relevant_files"`