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

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>

packages/esm-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

packages/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(),
   })),
 }));
 

packages/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 = (

packages/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}>

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"
     }
   ]
 }

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

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}

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",