refactor(dref-export-modal): update pga state management logic

frozenhelium · AdityaKhatri · commit f8db4defb751 · 2025-08-01T16:56:23.000+05:45
diff --git a/app/src/components/domain/DrefExportModal/i18n.json b/app/src/components/domain/DrefExportModal/i18n.json
@@ -5,11 +5,14 @@
         "drefPreparingExport": "Preparing for export...",
         "drefWaitingExport": "Waiting for the export to complete...",
         "drefExportFailed": "Export failed",
-        "drefExportSuccessfully": "Export completed successfully",
+        "drefExportSuccessfully": "Export completed successfully!",
         "drefClickDownloadLink": "Click on the download link below!",
         "drefDownloadPDF": "Download PDF",
+        "includePgaLabel": "Include PGA",
+        "startExportLabel": "Start Export",
+        "configureExportLabel": "Configure export",
         "drefDownloadPDFWithPGA": "Download PDF with PGA",
         "drefDownloadPDFwithoutPGA": "Download PDF without PGA",
         "drefFailureToExportMessage":"Failed to export PDF."
     }
-}
+}
diff --git a/app/src/components/domain/DrefExportModal/index.tsx b/app/src/components/domain/DrefExportModal/index.tsx
@@ -1,9 +1,9 @@
 import {
-    useCallback,
     useEffect,
     useMemo,
     useState,
 } from 'react';
+import { DownloadLineIcon } from '@ifrc-go/icons';
 import {
     Button,
     Checkbox,
@@ -57,34 +57,7 @@ function DrefExportModal(props: Props) {
     const alert = useAlert();
 
     const [exportId, setExportId] = useState<number | undefined>();
-    const [isPga, setIsPga] = useState<boolean>(false);
-    const imminentFinalReport = applicationType === 'FINAL_REPORT' && drefType === DREF_TYPE_IMMINENT;
-    const [isPgaCheckboxVisible, setIsPgaCheckboxVisible] = useState(() => !imminentFinalReport);
-
-    const drefExportTriggerBody = useMemo(
-        () => {
-            let type: ExportTypeEnum;
-            if (applicationType === 'OPS_UPDATE') {
-                type = 'dref-operational-updates';
-            } else if (applicationType === 'FINAL_REPORT') {
-                type = 'dref-final-reports';
-            } else {
-                type = 'dref-applications';
-            }
-            return {
-                export_id: id,
-                export_type: type,
-                is_pga: isPga,
-                selector: '#pdf-preview-ready',
-                per_country: undefined,
-            };
-        },
-        [
-            id,
-            isPga,
-            applicationType,
-        ],
-    );
+    const [includePga, setIncludePga] = useState<boolean>(false);
 
     const exportTriggerBody = useMemo(
         () => {
@@ -100,51 +73,26 @@ function DrefExportModal(props: Props) {
             return {
                 export_id: id,
                 export_type: type,
-                is_pga: isPga,
+                is_pga: includePga,
                 selector: '#pdf-preview-ready',
                 per_country: undefined,
             };
         },
         [
             id,
-            isPga,
+            includePga,
             applicationType,
         ],
     );
 
     const {
-        pending: pendingDrefImminentExportTrigger,
-        error: drefImminentExportError,
-        trigger: drefImminentExportTrigger,
+        pending: exportPending,
+        error: exportError,
+        trigger: triggerExport,
     } = useLazyRequest({
         method: 'POST',
         useCurrentLanguageForMutation: true,
         url: '/api/v2/pdf-export/',
-        body: drefExportTriggerBody,
-        onSuccess: (response) => {
-            if (isDefined(response.id)) {
-                setExportId(response.id);
-            }
-        },
-        onFailure: () => {
-            alert.show(
-                strings.drefFailureToExportMessage,
-                { variant: 'danger' },
-            );
-        },
-    });
-
-    const {
-        pending: pendingExportTrigger,
-        error: exportTriggerError,
-    } = useRequest({
-        skip: isDefined(exportId)
-            || isNotDefined(id)
-            || drefType === DREF_TYPE_IMMINENT
-            || imminentFinalReport,
-        method: 'POST',
-        useCurrentLanguageForMutation: true,
-        url: '/api/v2/pdf-export/',
         body: exportTriggerBody,
         onSuccess: (response) => {
             if (isDefined(response.id)) {
@@ -159,8 +107,22 @@ function DrefExportModal(props: Props) {
         },
     });
 
+    useEffect(() => {
+        if (isDefined(exportId) || isNotDefined(id)) {
+            return;
+        }
+
+        // Don't automatically trigger the export for imminent DREFs (except for Final Reports)
+        // We need to allow users to configure PGA before the export
+        if (drefType === DREF_TYPE_IMMINENT && applicationType !== 'FINAL_REPORT') {
+            return;
+        }
+
+        triggerExport(null);
+    }, [exportId, id, drefType, applicationType, triggerExport]);
+
     const {
-        pending: pendingExportStatus,
+        pending: exportStatusPending,
         response: exportStatusResponse,
         error: exportStatusError,
     } = useRequest({
@@ -177,125 +139,101 @@ function DrefExportModal(props: Props) {
         },
     });
 
-    const handleDrefImminent = useCallback(() => {
-        setIsPgaCheckboxVisible(false);
-        drefImminentExportTrigger(drefExportTriggerBody);
-    }, [
-        drefExportTriggerBody,
-        drefImminentExportTrigger,
-    ]);
+    const exportStatus = useMemo(() => {
+        if (exportPending) {
+            return 'PREPARE';
+        }
 
-    useEffect(() => {
-        if (
-            imminentFinalReport
-            && !exportId
-            && !pendingDrefImminentExportTrigger
+        if (exportStatusPending || exportStatusResponse?.status === EXPORT_STATUS_PENDING) {
+            return 'WAITING';
+        }
+
+        if (isDefined(exportStatusError)
+            || isDefined(exportError)
+            || (isDefined(exportStatusResponse)
+                && exportStatusResponse.status === EXPORT_STATUS_ERRORED)
+        ) {
+            return 'FAILED';
+        }
+
+        if (isDefined(exportStatusResponse)
+            && isDefined(exportStatusResponse.status === EXPORT_STATUS_COMPLETED)
+            && isDefined(exportStatusResponse.pdf_file)
         ) {
-            drefImminentExportTrigger(drefExportTriggerBody);
+            return 'SUCCESS';
         }
+
+        return 'NOT_STARTED';
     }, [
-        imminentFinalReport,
-        exportId,
-        pendingDrefImminentExportTrigger,
-        drefImminentExportTrigger,
-        drefExportTriggerBody,
+        exportPending,
+        exportStatusError,
+        exportError,
+        exportStatusPending,
+        exportStatusResponse,
     ]);
 
     return (
         <Modal
             heading={strings.drefExportTitle}
             onClose={onCancel}
+            className={styles.drefExportModal}
         >
-            {drefType === DREF_TYPE_IMMINENT
-                && isPgaCheckboxVisible
-                && !(pendingExportTrigger
-                    || pendingExportStatus
-                    || exportStatusResponse?.status === EXPORT_STATUS_PENDING)
-                && (
-                    <Checkbox
-                        name={undefined}
-                        value={isPga}
-                        onChange={setIsPga}
-                        label={strings.drefDownloadPDFWithPGA}
-                    />
-                )}
-            {pendingExportTrigger && pendingDrefImminentExportTrigger && (
+            {exportStatus === 'PREPARE' && (
                 <Message
                     pending
                     title={strings.drefPreparingExport}
                 />
             )}
-            {(pendingExportStatus
-                || exportStatusResponse?.status === EXPORT_STATUS_PENDING) && (
+            {exportStatus === 'WAITING' && (
                 <Message
                     pending
                     title={strings.drefWaitingExport}
                 />
             )}
-            {(exportStatusResponse?.status === EXPORT_STATUS_ERRORED
-                || isDefined(exportTriggerError)
-                || isDefined(exportStatusError)
-                || isDefined(drefImminentExportError)
-            ) && (
+            {exportStatus === 'FAILED' && (
                 <Message
                     title={strings.drefExportFailed}
-                    description={exportTriggerError?.value.messageForNotification
-                            ?? exportStatusError?.value.messageForNotification
-                            ?? drefImminentExportError?.value.messageForNotification}
+                    description={exportError?.value.messageForNotification
+                            ?? exportStatusError?.value.messageForNotification}
                 />
             )}
-            {!imminentFinalReport
-                && !(pendingExportTrigger
-                    || pendingExportStatus
-                    || exportStatusResponse?.status === EXPORT_STATUS_PENDING)
-                && drefType === DREF_TYPE_IMMINENT
-                && !drefImminentExportError && (
-                exportStatusResponse?.pdf_file ? (
-                    <Message
-                        title={strings.drefExportSuccessfully}
-                        description={strings.drefClickDownloadLink}
-                        actions={(
-                            <Link
-                                variant="secondary"
-                                href={exportStatusResponse?.pdf_file}
-                                external
-                            >
-                                {strings.drefDownloadPDF}
-                            </Link>
-                        )}
-                    />
-                ) : (!exportStatusResponse && (
-                    <div className={styles.downloadButton}>
-                        <Button
-                            variant="secondary"
-                            name={undefined}
-                            onClick={handleDrefImminent}
-                        >
-                            {isPga
-                                ? strings.drefDownloadPDFWithPGA
-                                : strings.drefDownloadPDFwithoutPGA}
-                        </Button>
-                    </div>
-                ))
-            )}
-            {isDefined(exportStatusResponse)
-                && exportStatusResponse.status === EXPORT_STATUS_COMPLETED
-                && isDefined(exportStatusResponse.pdf_file)
-                && drefType !== DREF_TYPE_IMMINENT && (
+            {exportStatus === 'SUCCESS' && (
                 <Message
                     title={strings.drefExportSuccessfully}
                     description={strings.drefClickDownloadLink}
                     actions={(
                         <Link
                             variant="secondary"
                             href={exportStatusResponse?.pdf_file}
+                            icons={<DownloadLineIcon className={styles.icon} />}
                             external
                         >
                             {strings.drefDownloadPDF}
                         </Link>
                     )}
                 />
             )}
+            {exportStatus === 'NOT_STARTED' && (
+                <Message
+                    title={strings.configureExportLabel}
+                    description={drefType === DREF_TYPE_IMMINENT && applicationType !== 'FINAL_REPORT' && (
+                        <Checkbox
+                            name={undefined}
+                            value={includePga}
+                            onChange={setIncludePga}
+                            label={strings.includePgaLabel}
+                        />
+                    )}
+                    actions={(
+                        <Button
+                            name={null}
+                            onClick={triggerExport}
+                        >
+                            {strings.startExportLabel}
+                        </Button>
+                    )}
+                />
+            )}
         </Modal>
     );
 }
diff --git a/app/src/components/domain/DrefExportModal/styles.module.css b/app/src/components/domain/DrefExportModal/styles.module.css
@@ -1,6 +1,5 @@
-.download-button {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    padding: var(--go-ui-spacing-md);
-}
+.dref-export-modal {
+    .icon {
+        font-size: var(--go-ui-height-icon-multiplier);
+    }
+}
diff --git a/app/src/views/DrefApplicationForm/Overview/index.tsx b/app/src/views/DrefApplicationForm/Overview/index.tsx
@@ -421,10 +421,9 @@ function Overview(props: Props) {
                             />
                         )}
                     </InputSection>
-                    {(
-                        value?.disaster_category === DISASTER_CATEGORY_ORANGE
-                        || value?.disaster_category === DISASTER_CATEGORY_RED)
-                        && value?.type_of_dref !== TYPE_IMMINENT && (
+                    {(value?.disaster_category === DISASTER_CATEGORY_ORANGE
+                        || value?.disaster_category === DISASTER_CATEGORY_RED
+                    ) && value?.type_of_dref !== TYPE_IMMINENT && (
                         <InputSection title={strings.drefFormUploadCrisisDocument}>
                             <GoSingleFileInput
                                 name="disaster_category_analysis"
diff --git a/app/src/views/DrefFinalReportForm/index.tsx b/app/src/views/DrefFinalReportForm/index.tsx
@@ -258,14 +258,15 @@ export function Component() {
                     }),
                 ),
                 // Process proposed actions with injected client IDs, defaulting if missing
-                proposed_action: isDefined(proposed_action)
-                && proposed_action.length > 1 ? proposed_action?.map(
+                proposed_action: isDefined(proposed_action) && proposed_action.length > 1
+                    ? proposed_action?.map(
                         (action) => ({
                             ...injectClientId(action),
                             activities: action.activities?.map(injectClientId),
                         }),
                         // NOTE: Sort and display early actions before early response
-                    ).sort((a, b) => a.proposed_type - b.proposed_type) : [
+                    ).sort((a, b) => a.proposed_type - b.proposed_type)
+                    : [
                         {
                             client_id: randomString(),
                             proposed_type: EARLY_ACTION,
