@kenyaemr/esm-patient-registration-app 8.0.1-pre.95 → 8.0.2

package/src/patient-registration/patient-registration.component.tsx

@@ -1,32 +1,34 @@
-import React, { useState, useEffect, useContext, useMemo, useRef } from 'react';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { Button, Link, InlineLoading } from '@carbon/react';
 import { XAxis, ShareKnowledge } from '@carbon/react/icons';
 import { useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Formik, Form, type FormikHelpers } from 'formik';
+import { Form, Formik, type FormikHelpers } from 'formik';
 import {
   createErrorHandler,
+  interpolateUrl,
   showSnackbar,
   useConfig,
-  interpolateUrl,
   usePatient,
   usePatientPhoto,
+  useFeatureFlag,
 } from '@openmrs/esm-framework';
 import { getValidationSchema } from './validation/patient-registration-validation';
-import { type FormValues, type CapturePhotoProps } from './patient-registration.types';
+import { type CapturePhotoProps, type FormValues } from './patient-registration.types';
 import { PatientRegistrationContext } from './patient-registration-context';
 import { type SavePatientForm, SavePatientTransactionManager } from './form-manager';
 import { DummyDataInput } from './input/dummy-data/dummy-data-input.component';
 import { cancelRegistration, filterOutUndefinedPatientIdentifiers, scrollIntoView } from './patient-registration-utils';
-import { useInitialAddressFieldValues, useInitialFormValues, usePatientUuidMap,usePatientObs } from './patient-registration-hooks';
+import { useInitialAddressFieldValues, useInitialFormValues, usePatientUuidMap } from './patient-registration-hooks';
 import { ResourcesContext } from '../offline.resources';
 import { builtInSections, type RegistrationConfig, type SectionDefinition } from '../config-schema';
 import { SectionWrapper } from './section/section-wrapper.component';
 import BeforeSavePrompt from './before-save-prompt';
 import styles from './patient-registration.scss';
-import PatientVerification from '../patient-verification/patient-verification.component';
-import { handleSavePatientToClientRegistry } from '../patient-verification/patient-verification-hook';
+import PatientVerification from '../client-registry/patient-verification/patient-verification.component';
+import { handleSavePatientToClientRegistry } from '../client-registry/patient-verification/patient-verification-hook';
+import ClientRegistry from '../client-registry/client-registry.component';
 
 let exportedInitialFormValuesForTesting = {} as FormValues;
 
@@ -36,6 +38,7 @@ export interface PatientRegistrationProps {
 }
 
 export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePatientForm, isOffline }) => {
+  const healthInformationExchangeFlag = useFeatureFlag('healthInformationExchange');
   const { currentSession, identifierTypes } = useContext(ResourcesContext);
   const { search } = useLocation();
   const config = useConfig() as RegistrationConfig;
@@ -158,16 +161,24 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
     }
   };
 
+  const getDescription = (errors) => {
+    return (
+      <ul style={{ listStyle: 'inside' }}>
+        {Object.keys(errors).map((error, index) => {
+          return <li key={index}>{t(`${error}LabelText`, error)}</li>;
+        })}
+      </ul>
+    );
+  };
+  const enableRegistryButton = healthInformationExchangeFlag ? false : !enableClientRegistry;
+
   const displayErrors = (errors) => {
     if (errors && typeof errors === 'object' && !!Object.keys(errors).length) {
-      Object.keys(errors).forEach((error) => {
-        showSnackbar({
-          subtitle: t(`${error}LabelText`, error),
-          title: t('incompleteForm', 'The following field has errors:'),
-          kind: 'warning',
-          isLowContrast: true,
-          timeoutInMs: 5000,
-        });
+      showSnackbar({
+        isLowContrast: true,
+        kind: 'warning',
+        title: t('fieldsWithErrors', 'The following fields have errors:'),
+        subtitle: <>{getDescription(errors)}</>,
       });
     }
   };
@@ -180,7 +191,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}>
@@ -198,18 +209,20 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
                     </Link>
                   </div>
                 ))}
-                <Button
-                  renderIcon={ShareKnowledge}
-                  disabled={!currentSession || !identifierTypes}
-                  onClick={() => {
-                    setEnableClientRegistry(true);
-                    props.isValid
-                      ? handleSavePatientToClientRegistry(props.values, props.setValues, inEditMode)
-                      : props.validateForm().then((errors) => displayErrors(errors));
-                  }}
-                  className={styles.submitButton}>
-                  {t('postToRegistry', 'Post to registry')}
-                </Button>
+                {!healthInformationExchangeFlag && (
+                  <Button
+                    renderIcon={ShareKnowledge}
+                    disabled={!currentSession || !identifierTypes}
+                    onClick={() => {
+                      setEnableClientRegistry(true);
+                      props.isValid
+                        ? handleSavePatientToClientRegistry(props.values, props.setValues, inEditMode)
+                        : props.validateForm().then((errors) => displayErrors(errors));
+                    }}
+                    className={styles.submitButton}>
+                    {t('postToRegistry', 'Post to registry')}
+                  </Button>
+                )}
                 <Button
                   className={styles.submitButton}
                   type="submit"
@@ -217,7 +230,7 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
                   // Current session and identifiers are required for patient registration.
                   // If currentSession or identifierTypes are not available, then the
                   // user should be blocked to register the patient.
-                  disabled={!currentSession || !identifierTypes || props.isSubmitting || !enableClientRegistry}>
+                  disabled={!currentSession || !identifierTypes || props.isSubmitting || enableRegistryButton}>
                   {props.isSubmitting ? (
                     <InlineLoading
                       className={styles.spinner}
@@ -243,13 +256,14 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
                   values: props.values,
                   inEditMode,
                   setFieldValue: props.setFieldValue,
+                  setFieldTouched: props.setFieldTouched,
                   setCapturePhotoProps,
                   currentPhoto: photo?.imageSrc,
                   isOffline,
                   initialFormValues: props.initialValues,
                   setInitialFormValues,
                 }}>
-                <PatientVerification props={props} setInitialFormValues={setInitialFormValues} />
+                <ClientRegistry props={props} setInitialFormValues={setInitialFormValues} />
                 {sections.map((section, index) => (
                   <SectionWrapper
                     key={`registration-section-${section.id}`}

package/src/patient-registration/patient-registration.resource.ts

@@ -1,5 +1,6 @@
 import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import { type Patient, type Relationship, type PatientIdentifier, type Encounter } from './patient-registration.types';
+import dayjs from 'dayjs';
 
 export const uuidIdentifier = '05a29f94-c0ed-11e2-94be-8c13b969e334';
 export const uuidTelephoneNumber = '14d4f066-15f5-102d-96e4-000c29c2a5d7';
@@ -188,3 +189,10 @@ export async function deletePatientIdentifier(patientUuid: string, patientIdenti
     signal: abortController.signal,
   });
 }
+
+export function getDatetime(date: Date | string, time: string, timeFormat: 'AM' | 'PM') {
+  const datetime = new Date(date);
+  const [hours, minutes] = time.split(':').map(Number);
+  const fullHours = timeFormat === 'PM' ? (hours % 12) + 12 : hours % 12;
+  return dayjs(datetime).hour(fullHours).minute(minutes).second(0).millisecond(0).toDate();
+}

package/src/patient-registration/patient-registration.test.tsx

@@ -14,7 +14,7 @@ import {
 import { mockedAddressTemplate } from '__mocks__';
 import { mockPatient } from 'tools';
 import { saveEncounter, savePatient } from './patient-registration.resource';
-import { type RegistrationConfig, esmPatientRegistrationSchema } from '../config-schema';
+import { esmPatientRegistrationSchema, type RegistrationConfig } from '../config-schema';
 import type { AddressTemplate, Encounter } from './patient-registration.types';
 import { ResourcesContext } from '../offline.resources';
 import { FormManager } from './form-manager';
@@ -167,6 +167,9 @@ let mockOpenmrsConfig: RegistrationConfig = {
         searchAddressByLevel: true,
       },
     },
+    causeOfDeath: {
+      conceptUuid: 'cause-of-death-concept-uuid',
+    },
   },
   links: {
     submitButton: '#',
@@ -407,7 +410,7 @@ describe('Updating an existing patient record', () => {
     const givenNameInput: HTMLInputElement = screen.getByLabelText(/First Name/);
     const familyNameInput: HTMLInputElement = screen.getByLabelText(/Family Name/);
     const middleNameInput: HTMLInputElement = screen.getByLabelText(/Middle Name/);
-    const dateOfBirthInput: HTMLInputElement = screen.getByLabelText('Date of Birth');
+    const dateOfBirthInput: HTMLInputElement = screen.getByLabelText(/Date of Birth/i);
     const genderInput: HTMLInputElement = screen.getByLabelText(/Male/);
 
     // assert initial values
@@ -443,7 +446,10 @@ describe('Updating an existing patient record', () => {
         birthdate: new Date('1972-04-04T00:00:00.000Z'),
         birthdateEstimated: false,
         deathCause: '',
-        deathDate: '',
+        nonCodedCauseOfDeath: '',
+        deathDate: undefined,
+        deathTime: undefined,
+        deathTimeFormat: 'AM',
         familyName: 'Smith',
         gender: expect.stringMatching(/male/i),
         givenName: 'Eric',

package/src/patient-registration/patient-registration.types.ts

@@ -167,7 +167,9 @@ export interface FormValues {
   birthdate: Date | string;
   birthdateEstimated: boolean;
   deathCause: string;
-  deathDate: string;
+  deathDate: string | Date;
+  deathTime: string;
+  deathTimeFormat: 'AM' | 'PM';
   familyName: string;
   gender: string;
   givenName: string;
@@ -177,6 +179,7 @@ export interface FormValues {
   isDead: boolean;
   middleName: string;
   monthsEstimated: number;
+  nonCodedCauseOfDeath: string;
   obs?: {
     [conceptUuid: string]: string;
   };

package/src/patient-registration/section/death-info/death-info-section.component.tsx

@@ -1,30 +1,35 @@
-import React from 'react';
-import classNames from 'classnames';
+import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '../../input/basic-input/input/input.component';
-import { SelectInput } from '../../input/basic-input/select/select-input.component';
+import { Checkbox, Layer } from '@carbon/react';
+import { useField } from 'formik';
+import { Field } from '../../field/field.component';
 import { PatientRegistrationContext } from '../../patient-registration-context';
 import styles from './../section.scss';
 
-export const DeathInfoSection = () => {
-  const { values } = React.useContext(PatientRegistrationContext);
+export interface DeathInfoSectionProps {
+  fields: Array<string>;
+}
+
+export const DeathInfoSection: React.FC<DeathInfoSectionProps> = ({ fields }) => {
   const { t } = useTranslation();
+  const { values, setFieldValue } = useContext(PatientRegistrationContext);
+  const [deathDate, deathDateMeta] = useField('deathDate');
+  const today = new Date();
 
   return (
     <section className={styles.formSection} aria-label="Death Info Section">
-      <h5 className={classNames('omrs-type-title-5', styles.formSectionTitle)}>Death Info</h5>
       <section className={styles.fieldGroup}>
-        <Input labelText={t('isDeadInputLabel', 'Is Dead')} name="isDead" id="isDead" />
-        {values.isDead && (
-          <>
-            <Input labelText={t('deathDateInputLabel', 'Date of Death')} name="deathDate" id="deathDate" />
-            <SelectInput
-              options={[t('unknown', 'Unknown'), t('stroke', 'Stroke')]}
-              label={t('causeOfDeathInputLabel', 'Cause of Death')}
-              name="deathCause"
+        <Layer>
+          <div className={styles.isDeadFieldContainer}>
+            <Checkbox
+              checked={values.isDead}
+              id="isDead"
+              labelText={t('isDeadInputLabel', 'Is dead')}
+              onChange={(event, { checked, id }) => setFieldValue(id, checked)}
             />
-          </>
-        )}
+          </div>
+        </Layer>
+        {values.isDead ? fields.map((field) => <Field key={`death-info-${field}`} name={field} />) : null}
       </section>
     </section>
   );

package/src/patient-registration/section/death-info/death-info-section.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { Formik, Form } from 'formik';
+import { Form, Formik } from 'formik';
 import { initialFormValues } from '../../patient-registration.component';
-import { DeathInfoSection } from './death-info-section.component';
 import { type FormValues } from '../../patient-registration.types';
 import { PatientRegistrationContext } from '../../patient-registration-context';
+import { DeathInfoSection } from './death-info-section.component';
 
 const initialContextValues = {
   currentPhoto: 'data:image/png;base64,1234567890',
@@ -29,7 +29,7 @@ describe('Death info section', () => {
       <PatientRegistrationContext.Provider value={initialContextValues}>
         <Formik initialValues={initialFormValues} onSubmit={jest.fn()}>
           <Form>
-            <DeathInfoSection />
+            <DeathInfoSection fields={[]} />
           </Form>
         </Formik>
       </PatientRegistrationContext.Provider>,
@@ -40,16 +40,6 @@ describe('Death info section', () => {
     renderDeathInfoSection(true);
 
     expect(screen.getByRole('region', { name: /death info section/i })).toBeInTheDocument();
-    expect(screen.getByRole('heading', { name: /death info/i })).toBeInTheDocument();
-    expect(screen.getByRole('textbox', { name: /is dead \(optional\)/i })).toBeInTheDocument();
-    expect(screen.getByRole('textbox', { name: /date of death \(optional\)/i })).toBeInTheDocument();
-    expect(screen.getByRole('combobox', { name: /cause of death \(optional\)/i })).toBeInTheDocument();
-  });
-
-  it('has the correct number of inputs if is dead is not checked', async () => {
-    renderDeathInfoSection(false);
-
-    expect(screen.queryByRole('textbox', { name: /date of death \(optional\)/i })).not.toBeInTheDocument();
-    expect(screen.queryByRole('combobox', { name: /cause of death \(optional\)/i })).not.toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: /is dead/i })).toBeInTheDocument();
   });
 });

package/src/patient-registration/section/section.component.tsx

@@ -14,7 +14,7 @@ export function Section({ sectionDefinition }: SectionProps) {
     case 'demographics':
       return <DemographicsSection fields={sectionDefinition.fields} />;
     case 'death':
-      return <DeathInfoSection />;
+      return <DeathInfoSection fields={sectionDefinition.fields} />;
     case 'relationships':
       return <RelationshipsSection />;
     default: // includes 'contact'

package/src/patient-registration/section/section.scss

@@ -1,3 +1,4 @@
+@use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
@@ -14,3 +15,7 @@
   color: $ui-04;
   cursor: pointer;
 }
+
+.isDeadFieldContainer {
+  margin-bottom: layout.$spacing-05;
+}

package/src/patient-registration/validation/{patient-registration-validation.test.tsx → patient-registration-validation.test.ts}

@@ -1,6 +1,7 @@
 import { getConfig } from '@openmrs/esm-framework';
 import { type RegistrationConfig } from '../../config-schema';
 import { getValidationSchema } from './patient-registration-validation';
+import dayjs from 'dayjs';
 
 const mockGetConfig = jest.mocked(getConfig);
 
@@ -35,6 +36,8 @@ describe('Patient registration validation', () => {
     additionalGivenName: '',
     birthdate: new Date('1990-01-01'),
     birthdateEstimated: false,
+    isDead: false,
+    causeOfDeath: null,
     deathDate: null,
     email: 'john.doe@example.com',
     familyName: 'Doe',
@@ -142,7 +145,7 @@ describe('Patient registration validation', () => {
     expect(validationError).toBeFalsy();
   });
 
-  it('should throw error when date of birth is a future date', async () => {
+  it('should throw an error when date of birth is a future date', async () => {
     const invalidFormValues = {
       ...validFormValues,
       birthdate: new Date('2100-01-01'),
@@ -151,6 +154,15 @@ describe('Patient registration validation', () => {
     expect(validationError.errors).toContain('birthdayNotInTheFuture');
   });
 
+  it('should throw an error when date of birth is more than 140 years ago', async () => {
+    const invalidFormValues = {
+      ...validFormValues,
+      birthdate: dayjs().subtract(141, 'years').toDate(),
+    };
+    const validationError = await validateFormValues(invalidFormValues);
+    expect(validationError.errors).toContain('birthdayNotOver140YearsAgo');
+  });
+
   it('should require yearsEstimated when birthdateEstimated is true', async () => {
     const invalidFormValues = {
       ...validFormValues,
@@ -160,7 +172,7 @@ describe('Patient registration validation', () => {
     expect(validationError.errors).toContain('yearsEstimateRequired');
   });
 
-  it('should throw error when monthEstimated is negative', async () => {
+  it('should throw an error when monthEstimated is negative', async () => {
     const invalidFormValues = {
       ...validFormValues,
       birthdateEstimated: true,
@@ -171,12 +183,22 @@ describe('Patient registration validation', () => {
     expect(validationError.errors).toContain('negativeMonths');
   });
 
-  it('should throw error when deathDate is in future', async () => {
+  it('should throw an error when yearsEstimated is more than 140', async () => {
+    const invalidFormValues = {
+      ...validFormValues,
+      birthdateEstimated: true,
+      yearsEstimated: 141,
+    };
+    const validationError = await validateFormValues(invalidFormValues);
+    expect(validationError.errors).toContain('nonsensicalYears');
+  });
+
+  it('should throw an error when deathDate is in future', async () => {
     const invalidFormValues = {
       ...validFormValues,
       deathDate: new Date('2100-01-01'),
     };
     const validationError = await validateFormValues(invalidFormValues);
-    expect(validationError.errors).toContain('deathdayNotInTheFuture');
+    expect(validationError.errors).toContain('deathDateInFuture');
   });
 });

package/src/patient-registration/validation/patient-registration-validation.ts

@@ -0,0 +1,126 @@
+import dayjs from 'dayjs';
+import * as Yup from 'yup';
+import mapValues from 'lodash/mapValues';
+import { translateFrom } from '@openmrs/esm-framework';
+import { type RegistrationConfig } from '../../config-schema';
+import { type FormValues } from '../patient-registration.types';
+import { getDatetime } from '../patient-registration.resource';
+
+const t = (key: string, value: string) => translateFrom('@openmrs/esm-framework', key, value);
+
+export function getValidationSchema(config: RegistrationConfig) {
+  return Yup.object({
+    givenName: Yup.string().required(t('givenNameRequired', 'Given name is required')),
+    familyName: Yup.string().required(t('familyNameRequired', 'Family name is required')),
+    additionalGivenName: Yup.string().when('addNameInLocalLanguage', {
+      is: true,
+      then: Yup.string().required(t('givenNameRequired', 'Given name is required')),
+      otherwise: Yup.string().notRequired(),
+    }),
+    additionalFamilyName: Yup.string().when('addNameInLocalLanguage', {
+      is: true,
+      then: Yup.string().required(t('familyNameRequired', 'Family name is required')),
+      otherwise: Yup.string().notRequired(),
+    }),
+    gender: Yup.string()
+      .oneOf(
+        config.fieldConfigurations.gender.map((g) => g.value),
+        t('genderUnspecified', 'Gender unspecified'),
+      )
+      .required(t('genderRequired', 'Gender is required')),
+    birthdate: Yup.date().when('birthdateEstimated', {
+      is: false,
+      then: Yup.date()
+        .required(t('birthdayRequired', 'Birthday is required'))
+        .max(Date(), t('birthdayNotInTheFuture', 'Birthday cannot be in future'))
+        .min(
+          dayjs().subtract(140, 'years').toDate(),
+          t('birthdayNotOver140YearsAgo', 'Birthday cannot be more than 140 years ago'),
+        )
+        .nullable(),
+      otherwise: Yup.date().nullable(),
+    }),
+    yearsEstimated: Yup.number().when('birthdateEstimated', {
+      is: true,
+      then: Yup.number()
+        .required(t('yearsEstimateRequired', 'Estimated years required'))
+        .min(0, t('negativeYears', 'Estimated years cannot be negative'))
+        .max(140, t('nonsensicalYears', 'Estimated years cannot be more than 140')),
+      otherwise: Yup.number().nullable(),
+    }),
+    monthsEstimated: Yup.number().min(0, t('negativeMonths', 'Estimated months cannot be negative')),
+    isDead: Yup.boolean(),
+    deathDate: Yup.date()
+      .when('isDead', {
+        is: true,
+        then: Yup.date().required(t('deathDateRequired', 'Death date is required')),
+        otherwise: Yup.date().nullable(),
+      })
+      .max(new Date(), 'deathDateInFuture')
+      .test(
+        'deathDate-after-birthdate',
+        t('deathdayInvalidDate', 'Death date and time cannot be before the birthday'),
+        function (value) {
+          const { birthdate } = this.parent;
+          if (birthdate && value) {
+            return dayjs(value).isAfter(birthdate);
+          }
+          return true;
+        },
+      )
+      .test('deathDate-before-today', t('deathDateInFuture', 'Death date cannot be in future'), function (value) {
+        const { deathTime, deathTimeFormat } = this.parent;
+        if (value && deathTime && deathTimeFormat && /^(1[0-2]|0?[1-9]):([0-5]?[0-9])$/.test(deathTime)) {
+          return dayjs(getDatetime(value, deathTime, deathTimeFormat)).isBefore(dayjs());
+        }
+        return true;
+      }),
+    deathTime: Yup.string()
+      .when('isDead', {
+        is: true,
+        then: Yup.string().required(t('deathTimeRequired', 'Death time is required')),
+        otherwise: Yup.string().nullable(),
+      })
+      .matches(/^(1[0-2]|0?[1-9]):([0-5]?[0-9])$/, t('deathTimeInvalid', "Time doesn't match the format 'hh:mm'")),
+
+    deathTimeFormat: Yup.string()
+      .when('isDead', {
+        is: true,
+        then: Yup.string().required(t('deathTimeFormatRequired', 'Time format is required')),
+        otherwise: Yup.string().nullable(),
+      })
+      .oneOf(['AM', 'PM'], t('deathTimeFormatInvalid', 'Time format is invalid')),
+
+    deathCause: Yup.string().when('isDead', {
+      is: true,
+      then: Yup.string().required(t('deathCauseRequired', 'Cause of death is required')),
+      otherwise: Yup.string().nullable(),
+    }),
+    nonCodedCauseOfDeath: Yup.string().when(['isDead', 'deathCause'], {
+      is: (isDead, deathCause) => isDead && deathCause === config.freeTextFieldConceptUuid,
+      then: Yup.string().required(t('nonCodedCauseOfDeathRequired', 'Cause of death is required')),
+      otherwise: Yup.string().nullable(),
+    }),
+    email: Yup.string().optional().email(t('invalidEmail', 'Invalid email')),
+    identifiers: Yup.lazy((obj: FormValues['identifiers']) =>
+      Yup.object(
+        mapValues(obj, () =>
+          Yup.object({
+            required: Yup.bool(),
+            identifierValue: Yup.string().when('required', {
+              is: true,
+              then: Yup.string().required(t('identifierValueRequired', 'Identifier value is required')),
+              otherwise: Yup.string().notRequired(),
+            }),
+          }),
+        ),
+      ),
+    ),
+    relationships: Yup.array().of(
+      Yup.object().shape({
+        relatedPersonUuid: Yup.string().required(),
+        relationshipType: Yup.string().required(),
+      }),
+    ),
+  });
+}

package/src/routes.json

@@ -25,12 +25,6 @@
       "online": true,
       "offline": true
     },
-    {
-      "component": "cancelPatientEditModal",
-      "name": "cancel-patient-edit-modal",
-      "online": true,
-      "offline": true
-    },
     {
       "component": "patientPhotoExtension",
       "name": "patient-photo-widget",
@@ -51,25 +45,28 @@
       "slot": "patient-search-actions-slot",
       "online": true,
       "offline": true
+    }
+  ],
+  "modals": [
+    {
+      "name": "cancel-patient-edit-modal",
+      "component": "cancelPatientEditModal"
     },
     {
-      "component": "deleteIdentifierConfirmationModal",
       "name": "delete-identifier-confirmation-modal",
-      "online": true,
-      "offline": true
+      "component": "deleteIdentifierConfirmationModal"
     },
     {
       "component": "emptyClientRegistryModal",
-      "name": "empty-client-registry-modal",
-      "online": true,
-      "offline": true
+      "name": "empty-client-registry-modal"
     },
     {
       "component": "confirmClientRegistryModal",
-      "name": "confirm-client-registry-modal",
-      "online": true,
-      "offline": true
+      "name": "confirm-client-registry-modal"
+    },
+    {
+      "component": "hieConfirmationModal",
+      "name": "hie-confirmation-modal"
     }
   ]
-}
-    
+}

package/src/widgets/cancel-patient-edit.modal.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+
+interface CancelPatientEditPropsModal {
+  close(): void;
+  onConfirm(): void;
+}
+
+const CancelPatientEditModal: React.FC<CancelPatientEditPropsModal> = ({ close, onConfirm }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <ModalHeader
+        closeModal={close}
+        title={t('confirmDiscardChangesTitle', 'Are you sure you want to discard these changes?')}
+      />
+      <ModalBody>
+        <p>{t('confirmDiscardChangesBody', 'Your unsaved changes will be lost if you proceed to discard the form')}.</p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={close}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" onClick={onConfirm}>
+          {t('discard', 'Discard')}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default CancelPatientEditModal;

package/src/widgets/cancel-patient-edit.test.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { screen, render } from '@testing-library/react';
-import CancelPatientEdit from './cancel-patient-edit.component';
+import CancelPatientEdit from './cancel-patient-edit.modal';
 
-describe('CancelPatientEdit component', () => {
+describe('CancelPatientEdit modal', () => {
   const mockClose = jest.fn();
   const mockOnConfirm = jest.fn();
 
   it('renders the modal and triggers close and onConfirm functions', async () => {
     const user = userEvent.setup();
-
     render(<CancelPatientEdit close={mockClose} onConfirm={mockOnConfirm} />);
 
     const cancelButton = screen.getByRole('button', { name: /Cancel/i });