Merge pull request #1942 from IFRCGo/project/dref-imminent-v2-final-report

DREF Imminent v2 Final Report

Author: AdityaKhatri

.changeset/sweet-gifts-cheer.md

@@ -0,0 +1,12 @@
+---
+"go-web-app": patch
+---
+
+Updated Final Report form and export for DREF imminent type
+
+- Added two versions for Final Report:
+    - v1 for existing final report forms
+    - v2 for newly created final report forms
+- Add new field and table in DREF Final Report for imminent type
+- Update `is_pga` option for DREF Final Report imminent type
+

app/src/App/routes/index.tsx

@@ -1018,6 +1018,37 @@ const drefFinalReportExport = customWrapRoute({
     },
 });
 
+// TODO: Remove me after implementation of DrefFinalReport for imminent
+const oldDrefFinalReportForm = customWrapRoute({
+    parent: rootLayout,
+    path: 'old-dref-final-reports/:finalReportId/edit',
+    component: {
+        render: () => import('#views/OldDrefFinalReportForm'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Edit DREF Final Report Form',
+        visibility: 'is-authenticated',
+        permissions: ({ isGuestUser }) => !isGuestUser,
+    },
+});
+
+const oldDrefFinalReportExport = customWrapRoute({
+    path: 'old-dref-final-reports/:finalReportId/export',
+    component: {
+        render: () => import('#views/OldDrefFinalReportExport'),
+        props: {},
+    },
+    parent: rootLayout,
+    wrapperComponent: Auth,
+    context: {
+        title: 'DREF Final Report Export',
+        visibility: 'is-authenticated',
+        permissions: ({ isGuestUser }) => !isGuestUser,
+    },
+});
+
 const fieldReportFormNew = customWrapRoute({
     parent: rootLayout,
     path: 'field-reports/new',
@@ -1325,6 +1356,9 @@ const wrappedRoutes = {
     ...countryRoutes,
     ...surgeRoutes,
 
+    // TODO: Remove me after implementation of DrefFinalReport for imminent
+    oldDrefFinalReportForm,
+    oldDrefFinalReportExport,
     // Redirects
     preparednessOperationalLearning,
     obsoleteFieldReportDetails,

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."
     }
-}
+}

app/src/components/domain/DrefExportModal/index.tsx

@@ -1,8 +1,9 @@
 import {
-    useCallback,
+    useEffect,
     useMemo,
     useState,
 } from 'react';
+import { DownloadLineIcon } from '@ifrc-go/icons';
 import {
     Button,
     Checkbox,
@@ -56,33 +57,7 @@ function DrefExportModal(props: Props) {
     const alert = useAlert();
 
     const [exportId, setExportId] = useState<number | undefined>();
-    const [isPga, setIsPga] = useState<boolean>(false);
-    const [isPgaCheckboxVisible, setIsPgaCheckboxVisible] = useState(true);
-
-    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(
         () => {
@@ -98,45 +73,23 @@ 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,
         method: 'POST',
         useCurrentLanguageForMutation: true,
         url: '/api/v2/pdf-export/',
@@ -154,8 +107,22 @@ function DrefExportModal(props: Props) {
         },
     });
 
+    useEffect(() => {
+        if (isDefined(exportId) || isNotDefined(id)) {
+            return;
+        }
+
+        // Don't automatically trigger the export for imminent DREF Applications
+        // We need to allow users to configure PGA before the export
+        if (drefType === DREF_TYPE_IMMINENT && applicationType === 'DREF') {
+            return;
+        }
+
+        triggerExport(null);
+    }, [exportId, id, drefType, applicationType, triggerExport]);
+
     const {
-        pending: pendingExportStatus,
+        pending: exportStatusPending,
         response: exportStatusResponse,
         error: exportStatusError,
     } = useRequest({
@@ -172,108 +139,101 @@ function DrefExportModal(props: Props) {
         },
     });
 
-    const handleDrefImminent = useCallback(() => {
-        setIsPgaCheckboxVisible(false);
-        drefImminentExportTrigger(drefExportTriggerBody);
+    const exportStatus = useMemo(() => {
+        if (exportPending) {
+            return 'PREPARE';
+        }
+
+        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)
+        ) {
+            return 'SUCCESS';
+        }
+
+        return 'NOT_STARTED';
     }, [
-        drefExportTriggerBody,
-        drefImminentExportTrigger,
+        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}
                 />
             )}
-            {!(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>
     );
 }

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);
+    }
+}