(fix) Show discard changes confirmation modal when fields get touched

This PR tweaks the logic for showing the discard changes confirmation modal in the patient registration form. Previously, the modal was being shown in cases where the user had not made any changes. Now, the modal will only be shown when the user has made changes and attempts to navigate away from the form. This is done by checking whether any of the form fields have been [touched](https://formik.org/docs/api/formik#touched--field-string-boolean-). This aligns with the expected behavior of the form and provides a better user experience. Also, this PR refactors the `DeleteIdentifierConfirmationModal` to leverage Carbon's ModalHeader, ModalBody, and ModalFooter components. It also refactors its registration in the `routes.json` file so it leverages the `modal` property of the route definition. This aligns with our best practices for registering modals.
openmrs · Sep 23, 2024 · 1efe5e2 · 1efe5e2
1 parent 17dc81b
commit 1efe5e2
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 65 deletions.
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx
@@ -30,7 +30,7 @@ export const DobField: React.FC = () => {
   const [birthdate, birthdateMeta] = useField('birthdate');
   const [yearsEstimated, yearsEstimateMeta] = useField('yearsEstimated');
   const [monthsEstimated, monthsEstimateMeta] = useField('monthsEstimated');
-  const { setFieldValue } = useContext(PatientRegistrationContext);
+  const { setFieldValue, setFieldTouched } = useContext(PatientRegistrationContext);
   const today = new Date();
 
   const onToggle = useCallback(
@@ -39,15 +39,17 @@ export const DobField: React.FC = () => {
       setFieldValue('birthdate', '');
       setFieldValue('yearsEstimated', 0);
       setFieldValue('monthsEstimated', '');
+      setFieldTouched('birthdateEstimated', true, false);
     },
     [setFieldValue],
   );
 
   const onDateChange = useCallback(
     (birthdate: Date) => {
       setFieldValue('birthdate', birthdate);
+      setFieldTouched('birthdate', true, false);
     },
-    [setFieldValue],
+    [setFieldValue, setFieldTouched],
   );
 
   const onEstimatedYearsChange = useCallback(
@@ -80,7 +82,10 @@ export const DobField: React.FC = () => {
     setFieldValue('yearsEstimated', years);
     setFieldValue('monthsEstimated', months > 0 ? months : '');
     setFieldValue('birthdate', calcBirthdate(years, months, dateOfBirth));
-  }, [setFieldValue, monthsEstimateMeta, yearsEstimateMeta, dateOfBirth]);
+    setFieldTouched('yearsEstimated', true, false);
+    setFieldTouched('monthsEstimated', true, false);
+    setFieldTouched('birthdate', true, false);
+  }, [setFieldValue, setFieldTouched, monthsEstimateMeta, yearsEstimateMeta, dateOfBirth]);
 
   return (
     <div className={styles.halfWidthInDesktopView}>
@@ -103,6 +108,7 @@ export const DobField: React.FC = () => {
               id="birthdate"
               {...birthdate}
               onChange={onDateChange}
+              onBlur={() => setFieldTouched('birthdate', true, false)}
               maxDate={today}
               labelText={t('dateOfBirthLabelText', 'Date of birth')}
               isInvalid={!!(birthdateMeta.touched && birthdateMeta.error)}
@@ -125,7 +131,11 @@ export const DobField: React.FC = () => {
                 min={0}
                 required
                 {...yearsEstimated}
-                onBlur={updateBirthdate}
+                onBlur={(e) => {
+                  yearsEstimated.onBlur(e);
+                  setFieldTouched('yearsEstimated', true, false);
+                  updateBirthdate();
+                }}
               />
             </div>
             <div className={styles.dobField}>
@@ -141,7 +151,11 @@ export const DobField: React.FC = () => {
                 min={0}
                 {...monthsEstimated}
                 required={!yearsEstimateMeta.value}
-                onBlur={updateBirthdate}
+                onBlur={(e) => {
+                  monthsEstimated.onBlur(e);
+                  setFieldTouched('monthsEstimated', true, false);
+                  updateBirthdate();
+                }}
               />
             </div>
           </div>

diff --git a/...patient-registration-app/src/patient-registration/field/gender/gender-field.component.tsx b/...patient-registration-app/src/patient-registration/field/gender/gender-field.component.tsx
@@ -11,11 +11,12 @@ export const GenderField: React.FC = () => {
   const { fieldConfigurations } = useConfig<RegistrationConfig>();
   const { t } = useTranslation();
   const [field, meta] = useField('gender');
-  const { setFieldValue } = useContext(PatientRegistrationContext);
+  const { setFieldValue, setFieldTouched } = useContext(PatientRegistrationContext);
   const fieldConfigs = fieldConfigurations?.gender;
 
   const setGender = (gender: string) => {
     setFieldValue('gender', gender);
+    setFieldTouched('gender', true, false);
   };
   /**
    * DO NOT REMOVE THIS COMMENT HERE, ADDS TRANSLATION FOR SEX OPTIONS

diff --git a/.../esm-patient-registration-app/src/patient-registration/field/gender/gender-field.test.tsx b/.../esm-patient-registration-app/src/patient-registration/field/gender/gender-field.test.tsx
@@ -12,6 +12,7 @@ jest.mock('react', () => ({
   ...(jest.requireActual('react') as any),
   useContext: jest.fn(() => ({
     setFieldValue: jest.fn(),
+    setFieldTouched: jest.fn(),
   })),
 }));
 

diff --git a/...esm-patient-registration-app/src/patient-registration/field/name/name-field.component.tsx b/...esm-patient-registration-app/src/patient-registration/field/name/name-field.component.tsx
@@ -21,7 +21,7 @@ function checkNumber(value: string) {
 
 export const NameField = () => {
   const { t } = useTranslation();
-  const { setCapturePhotoProps, currentPhoto, setFieldValue } = useContext(PatientRegistrationContext);
+  const { setCapturePhotoProps, currentPhoto, setFieldValue, setFieldTouched } = useContext(PatientRegistrationContext);
   const {
     fieldConfigurations: {
       name: {
@@ -48,6 +48,7 @@ export const NameField = () => {
           imageData: dataUri,
           dateTime: photoDateTime,
         });
+        setFieldTouched('photo', true, false);
       }
     },
     [setCapturePhotoProps],
@@ -63,6 +64,9 @@ export const NameField = () => {
       setFieldValue('familyName', defaultUnknownFamilyName);
       setUnknownPatient('true');
     }
+    setFieldTouched('givenName', true);
+    setFieldTouched('familyName', true);
+    setFieldTouched(`attributes.${unidentifiedPatientAttributeTypeUuid}`, true, false);
   };
 
   const firstNameField = (

diff --git a/.../esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx b/.../esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx
@@ -161,7 +161,7 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
       onSubmit={onFormSubmit}>
       {(props) => (
         <Form className={styles.form}>
-          <BeforeSavePrompt when={props.dirty} redirect={target} />
+          <BeforeSavePrompt when={Object.keys(props.touched).length > 0} redirect={target} />
           <div className={styles.formContainer}>
             <div>
               <div className={styles.stickyColumn}>

diff --git a/packages/esm-patient-registration-app/src/routes.json b/packages/esm-patient-registration-app/src/routes.json
@@ -45,18 +45,16 @@
       "slot": "patient-search-actions-slot",
       "online": true,
       "offline": true
-    },
-    {
-      "component": "deleteIdentifierConfirmationModal",
-      "name": "delete-identifier-confirmation-modal",
-      "online": true,
-      "offline": true
     }
   ],
   "modals": [
     {
       "name": "cancel-patient-edit-modal",
       "component": "cancelPatientEditModal"
+    },
+    {
+      "name": "delete-identifier-confirmation-modal",
+      "component": "deleteIdentifierConfirmationModal"
     }
   ]
 }
diff --git a/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.modal.tsx b/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.modal.tsx
@@ -1,40 +1,47 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@carbon/react';
-import styles from './delete-identifier-confirmation.scss';
+import { Button, ModalBody, ModalHeader, ModalFooter } from '@carbon/react';
 
 interface DeleteIdentifierConfirmationModalProps {
+  closeModal: () => void;
   deleteIdentifier: (x: boolean) => void;
   identifierName: string;
   identifierValue: string;
 }
 
 const DeleteIdentifierConfirmationModal: React.FC<DeleteIdentifierConfirmationModalProps> = ({
+  closeModal,
   deleteIdentifier,
   identifierName,
   identifierValue,
 }) => {
   const { t } = useTranslation();
 
   return (
-    <div className={styles.modalContent}>
-      <h1 className={styles.productiveHeading}>{t('deleteIdentifierModalHeading', 'Remove identifier?')}</h1>
-      <h3 className={styles.modalSubtitle}>
-        {identifierName}
-        {t('deleteIdentifierModalText', ' has a value of ')} {identifierValue}
-      </h3>
-      <p className={styles.modalBody}>
-        {t('confirmIdentifierDeletionText', 'Are you sure you want to remove this identifier?')}
-      </p>
-      <div className={styles.buttonSet}>
+    <>
+      <ModalHeader
+        closeModal={closeModal}
+        title={t('deleteIdentifierModalHeading', 'Delete identifier?')}></ModalHeader>
+      <ModalBody>
+        <p>
+          {identifierName && identifierValue && (
+            <span>
+              <strong>{identifierName}</strong>
+              {t('deleteIdentifierModalText', ' has a value of ')} <strong>{identifierValue}</strong>.{' '}
+            </span>
+          )}
+          {t('confirmIdentifierDeletionText', 'Are you sure you want to delete this identifier?')}
+        </p>
+      </ModalBody>
+      <ModalFooter>
         <Button kind="secondary" size="lg" onClick={() => deleteIdentifier(false)}>
           {t('cancel', 'Cancel')}
         </Button>
         <Button kind="danger" size="lg" onClick={() => deleteIdentifier(true)}>
-          {t('removeIdentifierButton', 'Remove Identifier')}
+          {t('removeIdentifierButton', 'Remove identifier')}
         </Button>
-      </div>
-    </div>
+      </ModalFooter>
+    </>
   );
 };
 

diff --git a/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.scss b/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.scss
diff --git a/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.test.tsx b/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.test.tsx
@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
 import DeleteIdentifierConfirmationModal from './delete-identifier-confirmation.modal';
 
-describe('DeleteIdentifierConfirmationModal component', () => {
+describe('DeleteIdentifierConfirmationModal', () => {
   const mockDeleteIdentifier = jest.fn();
   const mockIdentifierName = 'Identifier Name';
   const mockIdentifierValue = 'Identifier Value';
@@ -13,6 +13,7 @@ describe('DeleteIdentifierConfirmationModal component', () => {
 
     render(
       <DeleteIdentifierConfirmationModal
+        closeModal={jest.fn()}
         deleteIdentifier={mockDeleteIdentifier}
         identifierName={mockIdentifierName}
         identifierValue={mockIdentifierValue}

diff --git a/packages/esm-patient-registration-app/translations/en.json b/packages/esm-patient-registration-app/translations/en.json
@@ -93,7 +93,7 @@
   "relationshipToPatient": "Relationship to patient",
   "relativeFullNameLabelText": "Full name",
   "relativeNamePlaceholder": "Firstname Familyname",
-  "removeIdentifierButton": "Remove Identifier",
+  "removeIdentifierButton": "Remove identifier",
   "resetIdentifierTooltip": "Reset",
   "restoreRelationshipActionButton": "Undo",
   "searchAddress": "Search address",