Add a confirmation popup before creating ops. update from imminent dref

Author: frozenhelium

app/src/views/AccountMyFormsDref/ActiveDrefTable/index.tsx

@@ -219,11 +219,11 @@ function ActiveDrefTable(props: Props) {
                             applicationType,
                             canAddOpsUpdate: false,
                             canCreateFinalReport: false,
+                            unpublishedOpsUpdateCount: 0,
                         };
                     }
 
                     const {
-                        // unpublished_final_report_count,
                         unpublished_op_update_count,
                         is_published,
                         has_ops_update,
@@ -260,6 +260,7 @@ function ActiveDrefTable(props: Props) {
                         hasPermissionToApprove: isRegionCoordinator || userMe?.is_superuser,
                         onPublishSuccess: refetchActiveDref,
                         drefType: item.type_of_dref,
+                        unpublishedOpsUpdateCount: unpublished_op_update_count,
                     };
                 },
                 { columnClassName: styles.actions },

app/src/views/AccountMyFormsDref/DrefTableActions/i18n.json

@@ -13,6 +13,8 @@
         "drefApprovalInProgressTitle": "Approval in progress...",
         "drefAccountCouldNotCreate": "Could not create new operational update",
         "drefAccountCouldNotCreateFinalReport": "Could not create final report",
-        "drefAccountConfirmMessage": "You're about to Approve this DREF. Once approved, it can no longer be edited. Are you sure, you want to Approve?"
+        "drefAccountConfirmMessage": "You're about to Approve this DREF. Once approved, it can no longer be edited. Are you sure, you want to Approve?",
+        "dropdownActionImminentNewOpsUpdateConfirmationHeading": "Confirm addition of Operational Update",
+        "dropdownActionImminentNewOpsUpdateConfirmationMessage": "The DREF type will be changed to Response (from Imminent) for the Operational Update. Once created, you'll be able to change it to other types except Imminent. Are you sure you want to add an Operational Update?"
     }
 }

app/src/views/AccountMyFormsDref/DrefTableActions/index.tsx

@@ -53,6 +53,8 @@ export interface Props {
     canCreateFinalReport: boolean;
     hasPermissionToApprove?: boolean;
 
+    unpublishedOpsUpdateCount: number;
+
     onPublishSuccess?: () => void;
     drefType?: TypeOfDrefEnum | null | undefined;
 }
@@ -68,6 +70,7 @@ function DrefTableActions(props: Props) {
         hasPermissionToApprove,
         onPublishSuccess,
         drefType,
+        unpublishedOpsUpdateCount,
     } = props;
 
     const { navigate } = useRouting();
@@ -128,15 +131,15 @@ function DrefTableActions(props: Props) {
         ),
         onSuccess: (response) => {
             const exportData = {
-                allocationFor: response?.type_of_dref_display === 'Loan' ? 'Emergency Appeal' : 'DREF Operation',
+                allocationFor: response?.type_of_dref === DREF_TYPE_LOAN ? 'Emergency Appeal' : 'DREF Operation',
                 appealManager: response?.ifrc_appeal_manager_name,
                 projectManager: response?.ifrc_project_manager_name,
                 affectedCountry: response?.country_details?.name,
                 name: response?.title,
                 disasterType: response?.disaster_type_details?.name,
                 responseType:
-                    response?.type_of_dref_display === 'Imminent'
-                    // FIXME: can't compare imminent with Imminent Crisis directly
+                    response?.type_of_dref === DREF_TYPE_IMMINENT
+                        // FIXME: add translations
                         ? 'Imminent Crisis'
                         : response?.type_of_onset_display,
                 noOfPeopleTargeted: response?.number_of_people_targeted,
@@ -147,8 +150,8 @@ function DrefTableActions(props: Props) {
                 previousAllocation: response?.dref_allocated_so_far ?? 0,
                 totalDREFAllocation: response?.total_dref_allocation,
                 toBeAllocatedFrom:
-                    response?.type_of_dref_display === 'Imminent'
-                    // FIXME: can't compare imminent with Anticipatory Pillar
+                    response?.type_of_dref === DREF_TYPE_IMMINENT
+                        // FIXME: add translations
                         ? 'Anticipatory Pillar'
                         : 'Response Pillar',
                 focalPointName: response?.regional_focal_point_name,
@@ -380,6 +383,9 @@ function DrefTableActions(props: Props) {
 
     const canApprove = status === DREF_STATUS_IN_PROGRESS && hasPermissionToApprove;
 
+    const shouldConfirmImminentAddOpsUpdate = drefType === DREF_TYPE_IMMINENT
+        && unpublishedOpsUpdateCount === 0;
+
     const disabled = fetchingDref
         || fetchingOpsUpdate
         || publishDrefPending
@@ -418,7 +424,25 @@ function DrefTableActions(props: Props) {
                             {strings.dropdownActionAllocationFormLabel}
                         </DropdownMenuItem>
                     )}
-                    {canAddOpsUpdate && (
+                    {canAddOpsUpdate && shouldConfirmImminentAddOpsUpdate && (
+                        <DropdownMenuItem
+                            name={undefined}
+                            type="confirm-button"
+                            icons={<AddLineIcon className={styles.icon} />}
+                            confirmHeading={
+                                strings.dropdownActionImminentNewOpsUpdateConfirmationHeading
+                            }
+                            confirmMessage={
+                                strings.dropdownActionImminentNewOpsUpdateConfirmationMessage
+                            }
+                            onConfirm={handleAddOpsUpdate}
+                            disabled={disabled}
+                            persist
+                        >
+                            {strings.dropdownActionAddOpsUpdateLabel}
+                        </DropdownMenuItem>
+                    )}
+                    {canAddOpsUpdate && !shouldConfirmImminentAddOpsUpdate && (
                         <DropdownMenuItem
                             name={undefined}
                             type="button"

app/src/views/DrefFinalReportForm/Overview/index.tsx

@@ -2,6 +2,7 @@ import {
     type Dispatch,
     type SetStateAction,
     useCallback,
+    useMemo,
 } from 'react';
 import { WikiHelpSectionLineIcon } from '@ifrc-go/icons';
 import {
@@ -34,6 +35,7 @@ import Link from '#components/Link';
 import useCountry from '#hooks/domain/useCountry';
 import useDisasterType from '#hooks/domain/useDisasterType';
 import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+import { DREF_TYPE_IMMINENT } from '#utils/constants';
 import { type GoApiResponse } from '#utils/restRequest';
 
 import {
@@ -133,9 +135,11 @@ function Overview(props: Props) {
         user,
     }), []);
 
-    const filteredTypeOfDrefOptions = (typeOfDrefOptions ?? []).filter(
-        (option) => option.key !== TYPE_LOAN,
-    );
+    const filteredTypeOfDrefOptions = useMemo(() => (
+        typeOfDrefOptions?.filter(
+            (option) => option.key !== TYPE_LOAN && option.key !== DREF_TYPE_IMMINENT,
+        )
+    ), [typeOfDrefOptions]);
 
     const error = getErrorObject(formError);
 

app/src/views/DrefOperationalUpdateForm/Overview/i18n.json

@@ -35,6 +35,9 @@
         "isDrefChangingToResponse": "Is this DREF changing to Response?",
         "yesLabel": "Yes, change it to Response",
         "noLabel": "No",
-        "changeToResponseHeading": "Change DREF Type"
+        "changeToResponseHeading": "Change DREF Type",
+        "overviewChangeTypeHeading": "Update type of DREF",
+        "overviewChangeTypeMessage": "Please note that the type of DREF needs to be changed from Imminent before you can edit it.",
+        "overviewChangeTypeButtonLabel": "Change to Response"
     }
 }

app/src/views/DrefOperationalUpdateForm/Overview/index.tsx

@@ -2,6 +2,7 @@ import {
     type Dispatch,
     type SetStateAction,
     useCallback,
+    useMemo,
 } from 'react';
 import { useLocation } from 'react-router-dom';
 import { WikiHelpSectionLineIcon } from '@ifrc-go/icons';
@@ -40,6 +41,7 @@ import Link from '#components/Link';
 import useCountry from '#hooks/domain/useCountry';
 import useDisasterType from '#hooks/domain/useDisasterType';
 import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+import { DREF_TYPE_IMMINENT } from '#utils/constants';
 import { type GoApiResponse } from '#utils/restRequest';
 
 import {
@@ -109,6 +111,10 @@ function Overview(props: Props) {
         dref_dref_onset_type: drefOnsetTypeOptions,
     } = useGlobalEnums();
 
+    const typeOfDrefOptionsWithoutImminent = useMemo(() => (
+        typeOfDrefOptions?.filter((option) => option.key !== DREF_TYPE_IMMINENT)
+    ), [typeOfDrefOptions]);
+
     const countryOptions = useCountry();
 
     const disasterTypes = useDisasterType();
@@ -184,8 +190,7 @@ function Overview(props: Props) {
         <div className={styles.operationOverview}>
             {state?.isNewOpsUpdate
                 && showChangeDrefTypeModal
-                && (value?.type_of_dref === TYPE_IMMINENT
-                || value?.type_of_dref === TYPE_ASSESSMENT) && (
+                && value?.type_of_dref === TYPE_ASSESSMENT && (
                 <Modal
                     size="sm"
                     heading={strings.changeToResponseHeading}
@@ -207,11 +212,26 @@ function Overview(props: Props) {
                             </Button>
                         </>
                     )}
-                    className={styles.flashUpdateShareModal}
                 >
                     {strings.isDrefChangingToResponse}
                 </Modal>
             )}
+            {value.type_of_dref === TYPE_IMMINENT && (
+                <Modal
+                    size="sm"
+                    heading={strings.overviewChangeTypeHeading}
+                    footerActions={(
+                        <Button
+                            name={undefined}
+                            onClick={handleChangeToResponse}
+                        >
+                            {strings.overviewChangeTypeButtonLabel}
+                        </Button>
+                    )}
+                >
+                    {strings.overviewChangeTypeMessage}
+                </Modal>
+            )}
             <Container
                 heading={strings.drefFormSharingHeading}
                 childrenContainerClassName={styles.content}
@@ -260,7 +280,7 @@ function Overview(props: Props) {
                     <SelectInput
                         name="type_of_dref"
                         label={strings.drefFormTypeOfDref}
-                        options={typeOfDrefOptions}
+                        options={typeOfDrefOptionsWithoutImminent}
                         keySelector={typeOfDrefKeySelector}
                         labelSelector={stringValueSelector}
                         onChange={setFieldValue}