@kenyaemr/esm-patient-registration-app 8.1.1-pre.114 → 8.1.1-pre.116

package/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx

@@ -100,10 +100,10 @@ const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fi
       ) : (
         <div className={styles.textID}>
           <p className={styles.label}>{identifierName}</p>
-          <p className={styles.bodyShort02}>
+          <p data-testid="identifier-label" className={styles.bodyShort02}>
             {autoGeneration ? t('autoGeneratedPlaceholderText', 'Auto-generated') : identifierValue}
           </p>
-          <input type="hidden" {...identifierField} disabled />
+          <input data-testid="identifier-input" type="hidden" {...identifierField} disabled />
           {/* This is added for any error descriptions */}
           {!!(identifierFieldMeta.touched && identifierFieldMeta.error) && (
             <span className={styles.dangerLabel01}>{identifierFieldMeta.error && t(identifierFieldMeta.error)}</span>

package/src/patient-registration/input/custom-input/identifier/identifier-input.test.tsx

@@ -1,29 +1,31 @@
 /* eslint-disable testing-library/no-node-access */
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { Formik, Form } from 'formik';
-import { type PatientIdentifierType } from '../../../patient-registration.types';
-import { initialFormValues } from '../../../patient-registration.component';
+import { Form, Formik } from 'formik';
+import { ResourcesContext, type Resources } from '../../../../offline.resources';
+import {
+  PatientRegistrationContext,
+  type PatientRegistrationContextProps,
+} from '../../../patient-registration-context';
+import type { AddressTemplate, FormValues, PatientIdentifierValue } from '../../../patient-registration.types';
 import IdentifierInput from './identifier-input.component';
+import userEvent from '@testing-library/user-event';
 
-// TODO: Fix this test
-xdescribe('identifier input', () => {
-  const openmrsID = {
-    name: 'OpenMRS ID',
+const predefinedAddressTemplate = {
+  uuid: 'test-address-template-uuid',
+  property: 'layout.address.format',
+  description: 'Test Address Template',
+  display:
+    'Layout - Address Format = <org.openmrs.layout.address.AddressTemplate>\n     <nameMappings class="properties">\n       <property name="postalCode" value="Location.postalCode"/>\n       <property name="address2" value="Location.address2"/>\n       <property name="address1" value="Location.address1"/>\n       <property name="country" value="Location.country"/>\n       <property name="stateProvince" value="Location.stateProvince"/>\n       <property name="cityVillage" value="Location.cityVillage"/>\n     </nameMappings>\n     <sizeMappings class="properties">\n       <property name="postalCode" value="10"/>\n       <property name="address2" value="40"/>\n       <property name="address1" value="40"/>\n       <property name="country" value="10"/>\n       <property name="stateProvince" value="10"/>\n       <property name="cityVillage" value="10"/>\n     </sizeMappings>\n     <lineByLineFormat>\n       <string>address1</string>\n       <string>address2</string>\n       <string>cityVillage stateProvince country postalCode</string>\n     </lineByLineFormat>\n   </org.openmrs.layout.address.AddressTemplate>',
+  value:
+    '<org.openmrs.layout.address.AddressTemplate>\r\n     <nameMappings class="properties">\r\n       <property name="postalCode" value="Location.postalCode"/>\r\n       <property name="address2" value="Location.address2"/>\r\n       <property name="address1" value="Location.address1"/>\r\n       <property name="country" value="Location.country"/>\r\n       <property name="stateProvince" value="Location.stateProvince"/>\r\n       <property name="cityVillage" value="Location.cityVillage"/>\r\n     </nameMappings>\r\n     <sizeMappings class="properties">\r\n       <property name="postalCode" value="4"/>\r\n       <property name="address1" value="40"/>\r\n       <property name="address2" value="40"/>\r\n       <property name="country" value="10"/>\r\n       <property name="stateProvince" value="10"/>\r\n       <property name="cityVillage" value="10"/>\r\n       <asset name="cityVillage" value="10"/>\r\n     </sizeMappings>\r\n     <lineByLineFormat>\r\n       <string>address1 address2</string>\r\n       <string>cityVillage stateProvince postalCode</string>\r\n       <string>country</string>\r\n     </lineByLineFormat>\r\n     <elementDefaults class="properties">\r\n            <property name="country" value=""/>\r\n     </elementDefaults>\r\n     <elementRegex class="properties">\r\n            <property name="address1" value="[a-zA-Z]+$"/>\r\n     </elementRegex>\r\n     <elementRegexFormats class="properties">\r\n            <property name="address1" value="Countries can only be letters"/>\r\n     </elementRegexFormats>\r\n   </org.openmrs.layout.address.AddressTemplate>',
+};
+
+const mockIdentifierTypes = [
+  {
     fieldName: 'openMrsId',
-    required: true,
-    uuid: '05a29f94-c0ed-11e2-94be-8c13b969e334',
-    format: null,
-    isPrimary: true,
+    format: '',
     identifierSources: [
-      {
-        uuid: '691eed12-c0f1-11e2-94be-8c13b969e334',
-        name: 'Generator 1 for OpenMRS ID',
-        autoGenerationOption: {
-          manualEntryEnabled: false,
-          automaticGenerationEnabled: true,
-        },
-      },
       {
         uuid: '01af8526-cea4-4175-aa90-340acb411771',
         name: 'Generator 2 for OpenMRS ID',
@@ -33,72 +35,121 @@ xdescribe('identifier input', () => {
         },
       },
     ],
-    autoGenerationSource: null,
-  };
+    isPrimary: true,
+    name: 'OpenMRS ID',
+    required: true,
+    uniquenessBehavior: 'UNIQUE' as const,
+    uuid: '05a29f94-c0ed-11e2-94be-8c13b969e334',
+  },
+];
 
-  const setupIdentifierInput = async (identifierType: PatientIdentifierType) => {
-    initialFormValues['source-for-' + identifierType.fieldName] = identifierType.identifierSources[0].name;
+const mockResourcesContextValue: Resources = {
+  addressTemplate: predefinedAddressTemplate as unknown as AddressTemplate,
+  currentSession: {
+    authenticated: true,
+    sessionId: 'JSESSION',
+    currentProvider: { uuid: 'provider-uuid', identifier: 'PRO-123' },
+  },
+  relationshipTypes: [],
+  identifierTypes: [...mockIdentifierTypes],
+};
 
+const mockContextValues: PatientRegistrationContextProps = {
+  currentPhoto: '',
+  inEditMode: false,
+  identifierTypes: [],
+  initialFormValues: {} as FormValues,
+  isOffline: false,
+  setCapturePhotoProps: jest.fn(),
+  setFieldValue: jest.fn(),
+  setInitialFormValues: jest.fn(),
+  setFieldTouched: jest.fn(),
+  validationSchema: null,
+  values: {} as FormValues,
+};
+
+describe('identifier input', () => {
+  const fieldName = 'openMrsId';
+  const openmrsID = {
+    identifierTypeUuid: '05a29f94-c0ed-11e2-94be-8c13b969e334',
+    initialValue: '',
+    identifierValue: '',
+    identifierName: 'OpenMRS ID',
+    selectedSource: {
+      uuid: '01af8526-cea4-4175-aa90-340acb411771',
+      name: 'Generator 2 for OpenMRS ID',
+      autoGenerationOption: {
+        manualEntryEnabled: true,
+        automaticGenerationEnabled: true,
+      },
+    },
+    autoGeneration: false,
+    preferred: true,
+    required: true,
+  };
+
+  const setupIdentifierInput = async (patientIdentifier: PatientIdentifierValue) => {
     render(
-      <Formik initialValues={initialFormValues} onSubmit={null}>
-        <Form>
-          <IdentifierInput identifierType={identifierType} />
-        </Form>
-      </Formik>,
+      <ResourcesContext.Provider value={mockResourcesContextValue}>
+        <Formik initialValues={{}} onSubmit={jest.fn()}>
+          <Form>
+            <PatientRegistrationContext.Provider value={mockContextValues}>
+              <IdentifierInput patientIdentifier={patientIdentifier} fieldName={fieldName} />
+            </PatientRegistrationContext.Provider>
+          </Form>
+        </Formik>
+      </ResourcesContext.Provider>,
     );
-    const identifierInput = screen.getByLabelText(identifierType.fieldName) as HTMLInputElement;
-    let identifierSourceSelectInput = screen.getByLabelText('source-for-' + identifierType.fieldName);
+
+    let identifierLabel: HTMLParagraphElement;
+    let identifierInput: HTMLInputElement;
+    if (patientIdentifier.autoGeneration) {
+      identifierLabel = screen.getByTestId('identifier-label');
+      identifierInput = screen.getByTestId('identifier-input');
+    } else {
+      identifierLabel = screen.getByText(patientIdentifier.identifierName);
+      identifierInput = screen.getByLabelText(patientIdentifier.identifierName);
+    }
     return {
+      identifierLabel,
       identifierInput,
-      identifierSourceSelectInput,
     };
   };
 
-  it('exists', async () => {
-    const { identifierInput, identifierSourceSelectInput } = await setupIdentifierInput(openmrsID);
-
-    expect(identifierInput.type).toBe('text');
-    expect(identifierSourceSelectInput.type).toBe('select-one');
+  it('shows the identifier input', async () => {
+    const { identifierInput } = await setupIdentifierInput(openmrsID);
+    expect(identifierInput).toBeInTheDocument();
   });
 
-  it('has correct props for identifier source select input', async () => {
-    const { identifierSourceSelectInput } = await setupIdentifierInput(openmrsID);
+  describe('Auto-generated identifier', () => {
+    openmrsID.autoGeneration = true;
 
-    expect(identifierSourceSelectInput.childElementCount).toBe(3);
-    expect(identifierSourceSelectInput.value).toBe('Generator 1 for OpenMRS ID');
-  });
+    it('hides the input when the identifier is auto-generated', async () => {
+      const { identifierInput } = await setupIdentifierInput(openmrsID);
+      expect(identifierInput.type).toBe('hidden');
+    });
 
-  it('has correct props for identifier input', async () => {
-    const { identifierInput } = await setupIdentifierInput(openmrsID);
-    expect(identifierInput.placeholder).toBe('Auto-generated');
-    expect(identifierInput.disabled).toBe(true);
-  });
+    it("displays 'Auto-Generated' when the indentifier has auto generation", async () => {
+      const { identifierLabel, identifierInput } = await setupIdentifierInput(openmrsID);
+      expect(identifierLabel.innerHTML).toBe('Auto-generated');
+      expect(identifierInput.disabled).toBe(true);
+    });
 
-  it('text input should not be disabled if manual entry is enabled', async () => {
-    // setup
-    openmrsID.identifierSources[0].autoGenerationOption.manualEntryEnabled = true;
-    // replay
-    const { identifierInput } = await setupIdentifierInput(openmrsID);
-    expect(identifierInput.placeholder).toBe('Auto-generated');
-    expect(identifierInput.disabled).toBe(false);
-  });
+    it('displays an edit button when there is an initial value', async () => {
+      // setup
+      openmrsID.required = false;
+      openmrsID.initialValue = '1002UU9';
+      // replay
+      await setupIdentifierInput(openmrsID);
+      expect(screen.getByText('Edit')).toBeInTheDocument();
+    });
 
-  it('should not render select widget if auto-entry is false', async () => {
-    // setup
-    openmrsID.identifierSources = [
-      {
-        uuid: '691eed12-c0f1-11e2-94be-8c13b969e334',
-        name: 'Generator 1 for OpenMRS ID',
-        autoGenerationOption: {
-          manualEntryEnabled: true,
-          automaticGenerationEnabled: false,
-        },
-      },
-    ];
-    // replay
-    const { identifierInput, identifierSourceSelectInput } = await setupIdentifierInput(openmrsID);
-    expect(identifierInput.placeholder).toBe('Enter identifier');
-    expect(identifierInput.disabled).toBe(false);
-    expect(identifierSourceSelectInput).toBe(undefined);
+    it('displays a delete button when the identifier is not a default type', async () => {
+      // setup
+      openmrsID.required = false;
+      // replay
+      await setupIdentifierInput(openmrsID);
+      expect(screen.getByText('Delete')).toBeInTheDocument();
+    });
   });
 });

package/src/patient-registration/input/dummy-data/dummy-data-input.component.tsx

@@ -25,7 +25,10 @@ export const dummyFormValues: FormValues = {
   telephoneNumber: '0800001066',
   isDead: false,
   deathDate: '',
+  deathTime: '',
+  deathTimeFormat: 'AM',
   deathCause: '',
+  nonCodedCauseOfDeath: '',
   relationships: [],
   address: {
     address1: 'Bom Jesus Street',

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

@@ -1,7 +1,7 @@
 import { useConfig } from '@openmrs/esm-framework';
 import { createContext, type SetStateAction } from 'react';
 import { type RegistrationConfig } from '../config-schema';
-import { type FormValues, type CapturePhotoProps } from './patient-registration.types';
+import { type CapturePhotoProps, type FormValues } from './patient-registration.types';
 
 export interface PatientRegistrationContextProps {
   currentPhoto: string;
@@ -9,11 +9,12 @@ export interface PatientRegistrationContextProps {
   inEditMode: boolean;
   initialFormValues: FormValues;
   isOffline: boolean;
-  setCapturePhotoProps(value: SetStateAction<CapturePhotoProps>): void;
-  setFieldValue(field: string, value: any, shouldValidate?: boolean): void;
   setInitialFormValues?: React.Dispatch<SetStateAction<FormValues>>;
   validationSchema: any;
   values: FormValues;
+  setCapturePhotoProps(value: SetStateAction<CapturePhotoProps>): void;
+  setFieldValue(field: string, value: any, shouldValidate?: boolean): void;
+  setFieldTouched(field: string, isTouched?: any, shouldValidate?: boolean): void;
 }
 
 export const PatientRegistrationContext = createContext<PatientRegistrationContextProps | undefined>(undefined);

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

@@ -1,11 +1,11 @@
 import {
   type FetchResponse,
-  type OpenmrsResource,
   getSynchronizationItems,
   openmrsFetch,
+  type OpenmrsResource,
+  restBaseUrl,
   useConfig,
   usePatient,
-  restBaseUrl,
 } from '@openmrs/esm-framework';
 import last from 'lodash-es/last';
 import camelCase from 'lodash-es/camelCase';
@@ -19,12 +19,12 @@ import {
   useGlobalProperties,
 } from '../client-registry/patient-verification/patient-verification-hook';
 import {
+  type Encounter,
   type FormValues,
+  type PatientIdentifierResponse,
   type PatientRegistration,
   type PatientUuidMapType,
   type PersonAttributeResponse,
-  type PatientIdentifierResponse,
-  type Encounter,
   type ConceptAnswers,
   type ObsResponse,
 } from './patient-registration.types';
@@ -39,8 +39,10 @@ import { useInitialPatientRelationships } from './section/patient-relationships/
 import dayjs from 'dayjs';
 
 export function useInitialFormValues(patientUuid: string): [FormValues, Dispatch<FormValues>] {
+  const { freeTextFieldConceptUuid } = useConfig<RegistrationConfig>();
   const { martialStatus, education, occupation, educationLoad } = useConcepts();
   const { isLoading: isLoadingPatientToEdit, patient: patientToEdit } = usePatient(patientUuid);
+  const { data: deathInfo, isLoading: isLoadingDeathInfo } = useInitialPersonDeathInfo(patientUuid);
   const { data: attributes, isLoading: isLoadingAttributes } = useInitialPersonAttributes(patientUuid);
   const { data: identifiers, isLoading: isLoadingIdentifiers } = useInitialPatientIdentifiers(patientUuid);
   const { data: relationships, isLoading: isLoadingRelationships } = useInitialPatientRelationships(patientUuid);
@@ -62,8 +64,11 @@ export function useInitialFormValues(patientUuid: string): [FormValues, Dispatch
     birthdateEstimated: false,
     telephoneNumber: '',
     isDead: false,
-    deathDate: '',
+    deathDate: undefined,
+    deathTime: undefined,
+    deathTimeFormat: 'AM',
     deathCause: '',
+    nonCodedCauseOfDeath: '',
     relationships: [],
     identifiers: {},
     address: {},
@@ -104,6 +109,24 @@ export function useInitialFormValues(patientUuid: string): [FormValues, Dispatch
     })();
   }, [isLoadingPatientToEdit, patientToEdit, patientUuid]);
 
+  // Set initial patient death info
+  useEffect(() => {
+    if (!isLoadingDeathInfo && deathInfo?.dead) {
+      const deathDatetime = deathInfo.deathDate || null;
+      const deathDate = deathDatetime ? new Date(deathDatetime) : undefined;
+      const time = deathDate ? dayjs(deathDate).format('hh:mm') : undefined;
+      const timeFormat = deathDate ? (dayjs(deathDate).hour() >= 12 ? 'PM' : 'AM') : 'AM';
+      setInitialFormValues((initialFormValues) => ({
+        ...initialFormValues,
+        isDead: deathInfo.dead || false,
+        deathDate: deathDate,
+        deathTime: time,
+        deathTimeFormat: timeFormat,
+        deathCause: deathInfo.causeOfDeathNonCoded ? freeTextFieldConceptUuid : deathInfo.causeOfDeath?.uuid,
+        nonCodedCauseOfDeath: deathInfo.causeOfDeathNonCoded,
+      }));
+    }
+  }, [isLoadingDeathInfo, deathInfo, setInitialFormValues]);
   // Setting authentication token
 
   useEffect(() => {
@@ -304,6 +327,32 @@ function useInitialPersonAttributes(personUuid: string) {
   return result;
 }
 
+interface DeathInfoResults {
+  uuid: string;
+  display: string;
+  causeOfDeath: OpenmrsResource | null;
+  dead: boolean;
+  deathDate: string;
+  causeOfDeathNonCoded: string | null;
+}
+
+function useInitialPersonDeathInfo(personUuid: string) {
+  const { data, error, isLoading } = useSWR<FetchResponse<DeathInfoResults>, Error>(
+    !!personUuid
+      ? `${restBaseUrl}/person/${personUuid}?v=custom:(uuid,display,causeOfDeath,dead,deathDate,causeOfDeathNonCoded)`
+      : null,
+    openmrsFetch,
+  );
+
+  const result = useMemo(() => {
+    return {
+      data: data?.data,
+      isLoading,
+    };
+  }, [data, error]);
+  return result;
+}
+
 function getPatientAttributeUuidMapForPatient(attributes: Array<PersonAttributeResponse>) {
   const attributeUuidMap = {};
   attributes.forEach((attribute) => {

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

@@ -3,11 +3,11 @@ import camelCase from 'lodash-es/camelCase';
 import { parseDate } from '@openmrs/esm-framework';
 import {
   type AddressValidationSchemaType,
+  type Encounter,
   type FormValues,
   type PatientIdentifier,
-  type PatientUuidMapType,
   type PatientIdentifierValue,
-  type Encounter,
+  type PatientUuidMapType,
 } from './patient-registration.types';
 
 export function parseAddressTemplateXml(addressTemplate: string) {
@@ -47,6 +47,7 @@ export function parseAddressTemplateXml(addressTemplate: string) {
     addressValidationSchema,
   };
 }
+
 export function parseAddressTemplateXmlOld(addressTemplate: string) {
   const templateXmlDoc = new DOMParser().parseFromString(addressTemplate, 'text/xml');
   const nameMappings = templateXmlDoc.querySelector('nameMappings').querySelectorAll('property');
@@ -123,11 +124,6 @@ export function getFormValuesFromFhirPatient(patient: fhir.Patient) {
   result.birthdate = patient.birthDate ? parseDate(patient.birthDate) : undefined;
   result.telephoneNumber = patient.telecom ? patient.telecom[0].value : '';
 
-  if (patient.deceasedBoolean || patient.deceasedDateTime) {
-    result.isDead = true;
-    result.deathDate = patient.deceasedDateTime ? patient.deceasedDateTime.split('T')[0] : '';
-  }
-
   return {
     ...result,
     ...patient.identifier.map((identifier) => {

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

@@ -1,21 +1,21 @@
-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';
@@ -161,18 +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)}</>,
       });
     }
   };
@@ -185,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}>
@@ -250,6 +256,7 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
                   values: props.values,
                   inEditMode,
                   setFieldValue: props.setFieldValue,
+                  setFieldTouched: props.setFieldTouched,
                   setCapturePhotoProps,
                   currentPhoto: photo?.imageSrc,
                   isOffline,

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>
   );