feat: add modal opening for new operational updates with DREF types m…

…arked as imminent or assessment
IFRCGo · Nov 30, 2023 · 3324fe9 · 3324fe9
1 parent 2b655bf
commit 3324fe9
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 8 deletions.
diff --git a/src/views/AccountMyFormsDref/DrefTableActions/index.tsx b/src/views/AccountMyFormsDref/DrefTableActions/index.tsx
@@ -246,6 +246,7 @@ function DrefTableActions(props: Props) {
             navigate(
                 'drefOperationalUpdateForm',
                 { params: { opsUpdateId: response.id } },
+                { state: { isNewOpsUpdate: true } },
             );
         },
         onFailure: ({

diff --git a/src/views/DrefOperationalUpdateForm/Overview/i18n.json b/src/views/DrefOperationalUpdateForm/Overview/i18n.json
@@ -1,7 +1,6 @@
 {
     "namespace": "drefOperationalUpdateForm",
     "strings": {
-
         "drefOperationalUpdateNumber": "Operational Update Number",
         "drefOperationalShareApplicationLabel": "The DREF Operational Update is shared with",
         "drefOperationalShareApplicationDescription": "The users will be able to view, edit and add other users.",
@@ -34,7 +33,11 @@
         "drefFormUploadCoverImage": "Cover image",
         "drefFormUploadCoverImageDescription": "Upload a image for the cover page of the publicly published DREF application.",
         "drefFormDrefTypeTitle": "DREF Type",
-        "drefFormClickEmergencyResponseFrameworkLabel": "Click to view Emergency Response Framework",
-        "userListEmptyMessage": "The DREF Operational Update is not shared with anyone."
+        "drefFormClickEmergencyResponseFramework": "Click to view Emergency Response Framework",
+        "userListEmptyMessage": "The DREF Operational Update is not shared with anyone.",
+        "numericDetails": "Numeric Details",
+        "isDrefChangingToResponse": "Is DREF changing to Response?",
+        "yesLabel": "Yes, change to Response",
+        "changeToResponseHeading": "Change DREF Type"
     }
 }
diff --git a/src/views/DrefOperationalUpdateForm/Overview/index.tsx b/src/views/DrefOperationalUpdateForm/Overview/index.tsx
@@ -3,6 +3,9 @@ import {
     type SetStateAction,
     type Dispatch,
 } from 'react';
+import {
+    useLocation,
+} from 'react-router-dom';
 import {
     type Error,
     getErrorObject,
@@ -14,20 +17,22 @@ import {
 } from '@togglecorp/fujs';
 import { WikiHelpSectionLineIcon } from '@ifrc-go/icons';
 
+import BooleanInput from '#components/BooleanInput';
+import Button from '#components/Button';
 import Container from '#components/Container';
 import InputSection from '#components/InputSection';
-import Button from '#components/Button';
-import TextInput from '#components/TextInput';
-import SelectInput from '#components/SelectInput';
-import NumberInput from '#components/NumberInput';
 import Link from '#components/Link';
-import BooleanInput from '#components/BooleanInput';
+import Modal from '#components/Modal';
+import NumberInput from '#components/NumberInput';
+import SelectInput from '#components/SelectInput';
+import TextInput from '#components/TextInput';
 import useTranslation from '#hooks/useTranslation';
 import { type GoApiResponse } from '#utils/restRequest';
 import {
     stringValueSelector,
 } from '#utils/selectors';
 import { sumSafe } from '#utils/common';
+import useBooleanState from '#hooks/useBooleanState';
 import useGlobalEnums from '#hooks/domain/useGlobalEnums';
 import useCountry from '#hooks/domain/useCountry';
 import NationalSocietySelectInput from '#components/domain/NationalSocietySelectInput';
@@ -97,6 +102,7 @@ function Overview(props: Props) {
         setDistrictOptions,
         drefUsers,
     } = props;
+    const { state } = useLocation();
 
     const strings = useTranslation(i18n);
     const {
@@ -109,6 +115,13 @@ function Overview(props: Props) {
 
     const disasterTypes = useDisasterType();
 
+    const [
+        showChangeDrefTypeModal,
+        {
+            setFalse: setShowChangeDrefTypeModalFalse,
+        },
+    ] = useBooleanState(true);
+
     const handleTypeOfOnsetChange = useCallback((
         typeOfOnset: OnsetTypeOption['key'] | undefined,
         name: 'type_of_onset',
@@ -149,6 +162,11 @@ function Overview(props: Props) {
         [setFieldValue],
     );
 
+    const handleChangeToResponse = useCallback(() => {
+        setFieldValue(2, 'type_of_dref');
+        setShowChangeDrefTypeModalFalse();
+    }, [setFieldValue, setShowChangeDrefTypeModalFalse]);
+
     const handleGenerateTitleButtonClick = useCallback(
         () => {
             const countryName = countryOptions?.find(
@@ -180,6 +198,26 @@ function Overview(props: Props) {
 
     return (
         <div className={styles.operationOverview}>
+            {state?.isNewOpsUpdate
+                && showChangeDrefTypeModal
+                && (value?.type_of_dref === 0 || value?.type_of_dref === 1) && (
+                <Modal
+                    size="sm"
+                    heading={strings.changeToResponseHeading}
+                    onClose={setShowChangeDrefTypeModalFalse}
+                    footerActions={(
+                        <Button
+                            name={undefined}
+                            onClick={handleChangeToResponse}
+                        >
+                            {strings.yesLabel}
+                        </Button>
+                    )}
+                    className={styles.flashUpdateShareModal}
+                >
+                    {strings.isDrefChangingToResponse}
+                </Modal>
+            )}
             <Container
                 heading={strings.drefFormSharingHeading}
                 childrenContainerClassName={styles.content}