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

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.24.0"},"pages":[{"component":"root","route":"patient-registration","online":true,"offline":true},{"component":"editPatient","routeRegex":"patient\\/([a-zA-Z0-9\\-]+)\\/edit","online":true,"offline":true}],"extensions":[{"component":"addPatientLink","name":"add-patient-action","slot":"top-nav-actions-slot","online":true,"offline":true},{"component":"cancelPatientEditModal","name":"cancel-patient-edit-modal","online":true,"offline":true},{"component":"patientPhotoExtension","name":"patient-photo-widget","slot":"patient-photo-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-actions-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-search-actions-slot","online":true,"offline":true},{"component":"deleteIdentifierConfirmationModal","name":"delete-identifier-confirmation-modal","online":true,"offline":true},{"component":"emptyClientRegistryModal","name":"empty-client-registry-modal","online":true,"offline":true},{"component":"confirmClientRegistryModal","name":"confirm-client-registry-modal","online":true,"offline":true}],"modals":[{"component":"hieConfirmationModal","name":"hie-confirmation-modal"}],"version":"8.1.1-pre.114"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.24.0"},"pages":[{"component":"root","route":"patient-registration","online":true,"offline":true},{"component":"editPatient","routeRegex":"patient\\/([a-zA-Z0-9\\-]+)\\/edit","online":true,"offline":true}],"extensions":[{"component":"addPatientLink","name":"add-patient-action","slot":"top-nav-actions-slot","online":true,"offline":true},{"component":"patientPhotoExtension","name":"patient-photo-widget","slot":"patient-photo-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-actions-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-search-actions-slot","online":true,"offline":true}],"modals":[{"name":"cancel-patient-edit-modal","component":"cancelPatientEditModal"},{"name":"delete-identifier-confirmation-modal","component":"deleteIdentifierConfirmationModal"},{"component":"emptyClientRegistryModal","name":"empty-client-registry-modal"},{"component":"confirmClientRegistryModal","name":"confirm-client-registry-modal"},{"component":"hieConfirmationModal","name":"hie-confirmation-modal"}],"version":"8.1.1-pre.118"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-patient-registration-app",
-  "version": "8.1.1-pre.114",
+  "version": "8.1.1-pre.118",
   "description": "Patient registration microfrontend for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-patient-registration-app.js",
   "main": "src/index.ts",
@@ -18,7 +18,7 @@
     "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
     "coverage": "yarn test --coverage",
     "typescript": "tsc",
-    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.extension.tsx' 'src/**/*modal.tsx' 'src/**/*.workspace.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.extension.tsx' 'src/**/*modal.tsx' 'src/**/*.workspace.tsx' 'src/index.ts' 'src/patient-registration/validation/patient-registration-validation.ts' --config ../../tools/i18next-parser.config.js"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"

package/src/config-schema.ts

@@ -42,6 +42,10 @@ export interface RegistrationConfig {
   sectionDefinitions: Array<SectionDefinition>;
   fieldDefinitions: Array<FieldDefinition>;
   fieldConfigurations: {
+    causeOfDeath: {
+      conceptUuid: string;
+      required?: boolean;
+    };
     name: {
       displayMiddleName: boolean;
       allowUnidentifiedPatients: boolean;
@@ -83,6 +87,7 @@ export interface RegistrationConfig {
     encounterProviderRoleUuid: string;
     registrationFormUuid: string | null;
   };
+  freeTextFieldConceptUuid: string;
   hieClientRegistry: {
     identifierTypes: Array<{ identifierType: string; identifierValue: string }>;
     baseUrl: string;
@@ -97,12 +102,21 @@ export const builtInSections: Array<SectionDefinition> = [
     fields: ['name', 'gender', 'dob', 'id'],
   },
   { id: 'contact', name: 'Contact Details', fields: ['address', 'phone'] },
-  { id: 'death', name: 'Death Info', fields: [] },
+  { id: 'death', name: 'Death Info', fields: ['dateAndTimeOfDeath', 'causeOfDeath'] },
   { id: 'relationships', name: 'Relationships', fields: [] },
 ];
 
 // These fields are handled specially in field.component.tsx
-export const builtInFields = ['name', 'gender', 'dob', 'id', 'address', 'phone'] as const;
+export const builtInFields = [
+  'name',
+  'gender',
+  'dob',
+  'id',
+  'address',
+  'phone',
+  'causeOfDeath',
+  'dateAndTimeOfDeath',
+] as const;
 
 export const esmPatientRegistrationSchema = {
   sections: {
@@ -209,6 +223,14 @@ export const esmPatientRegistrationSchema = {
       'Definitions for custom fields that can be used in sectionDefinitions. Can also be used to override built-in fields.',
   },
   fieldConfigurations: {
+    causeOfDeath: {
+      conceptUuid: {
+        _type: Type.ConceptUuid,
+        _description: 'The concept UUID to get cause of death answers',
+        _default: '9272a14b-7260-4353-9e5b-5787b5dead9d',
+      },
+      required: { _type: Type.Boolean, _default: false },
+    },
     name: {
       displayMiddleName: { _type: Type.Boolean, _default: true },
       allowUnidentifiedPatients: {
@@ -369,6 +391,10 @@ export const esmPatientRegistrationSchema = {
         'The form UUID to associate with the registration encounter. By default no form will be associated.',
     },
   },
+  freeTextFieldConceptUuid: {
+    _default: '5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    _type: Type.ConceptUuid,
+  },
   hieClientRegistry: {
     identifierTypes: {
       _type: Type.Array,

package/src/index.ts

@@ -51,10 +51,7 @@ export const editPatient = getSyncLifecycle(rootComponent, {
 
 export const addPatientLink = getSyncLifecycle(addPatientLinkComponent, options);
 
-export const cancelPatientEditModal = getAsyncLifecycle(
-  () => import('./widgets/cancel-patient-edit.component'),
-  options,
-);
+export const cancelPatientEditModal = getAsyncLifecycle(() => import('./widgets/cancel-patient-edit.modal'), options);
 
 export const patientPhotoExtension = getSyncLifecycle(PatientPhotoExtension, options);
 

package/src/patient-registration/field/cause-of-death/cause-of-death.component.tsx

@@ -0,0 +1,98 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { Field, useField } from 'formik';
+import { useTranslation } from 'react-i18next';
+import { InlineNotification, Layer, Select, SelectItem, SelectSkeleton, TextInput } from '@carbon/react';
+import { useConfig } from '@openmrs/esm-framework';
+import { type RegistrationConfig } from '../../../config-schema';
+import { useConceptAnswers } from '../field.resource';
+import styles from '../field.scss';
+
+export const CauseOfDeathField: React.FC = () => {
+  const { t } = useTranslation();
+  const { fieldConfigurations, freeTextFieldConceptUuid } = useConfig<RegistrationConfig>();
+  const [deathCause, deathCauseMeta] = useField('deathCause');
+
+  const conceptUuid = fieldConfigurations?.causeOfDeath?.conceptUuid;
+  const required = fieldConfigurations?.causeOfDeath?.required;
+
+  const {
+    data: conceptAnswers,
+    isLoading: isLoadingConceptAnswers,
+    error: errorLoadingConceptAnswers,
+  } = useConceptAnswers(conceptUuid);
+
+  const answers = useMemo(() => {
+    if (!isLoadingConceptAnswers && conceptAnswers) {
+      return conceptAnswers.map((answer) => ({ ...answer, label: answer.display }));
+    }
+    return [];
+  }, [conceptAnswers, isLoadingConceptAnswers]);
+
+  if (isLoadingConceptAnswers) {
+    return (
+      <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
+        <h4 className={styles.productiveHeading02Light}>{t('causeOfDeathInputLabel', 'Cause of death')}</h4>
+        <SelectSkeleton />
+      </div>
+    );
+  }
+
+  return (
+    <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
+      <h4 className={styles.productiveHeading02Light}>{t('causeOfDeathInputLabel', 'Cause of death')}</h4>
+      {errorLoadingConceptAnswers || !conceptUuid ? (
+        <InlineNotification
+          hideCloseButton
+          kind="error"
+          title={t('errorFetchingCodedCausesOfDeath', 'Error fetching coded causes of death')}
+          subtitle={t('refreshOrContactAdmin', 'Try refreshing the page or contact your system administrator')}
+        />
+      ) : (
+        <>
+          <Field name="deathCause">
+            {({ field, form: { touched, errors }, meta }) => {
+              return (
+                <Layer>
+                  <Select
+                    {...field}
+                    id="deathCause"
+                    invalid={errors.deathCause && touched.deathCause}
+                    invalidText={errors.deathCause?.message}
+                    labelText={t('causeOfDeathInputLabel', 'Cause of Death')}
+                    name="deathCause"
+                    required={required}>
+                    <SelectItem id="empty-default-option" value={null} text={t('selectAnOption', 'Select an option')} />
+                    {answers.map((answer) => (
+                      <SelectItem id={answer.uuid} key={answer.uuid} text={answer.label} value={answer.uuid} />
+                    ))}
+                  </Select>
+                </Layer>
+              );
+            }}
+          </Field>
+          {deathCause.value === freeTextFieldConceptUuid && (
+            <div className={styles.nonCodedCauseOfDeath}>
+              <Field name="nonCodedCauseOfDeath">
+                {({ field, form: { touched, errors }, meta }) => {
+                  return (
+                    <Layer>
+                      <TextInput
+                        {...field}
+                        id="nonCodedCauseOfDeath"
+                        invalid={errors?.nonCodedCauseOfDeath && touched.nonCodedCauseOfDeath}
+                        invalidText={errors?.nonCodedCauseOfDeath?.message}
+                        labelText={t('nonCodedCauseOfDeath', 'Non-coded cause of death')}
+                        placeholder={t('enterNonCodedCauseOfDeath', 'Enter non-coded cause of death')}
+                      />
+                    </Layer>
+                  );
+                }}
+              </Field>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};

package/src/patient-registration/field/date-and-time-of-death/date-and-time-of-death.component.tsx

@@ -0,0 +1,84 @@
+import React, { useCallback, useContext } from 'react';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+import { Layer, SelectItem, TimePicker, TimePickerSelect } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { useField } from 'formik';
+import { OpenmrsDatePicker } from '@openmrs/esm-framework';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import type { FormValues } from '../../patient-registration.types';
+import styles from '../field.scss';
+
+export const DateAndTimeOfDeathField: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={classNames(styles.dodField, styles.halfWidthInDesktopView)}>
+      <h4 className={styles.productiveHeading02Light}>{t('deathDateInputLabel', 'Date of Death')}</h4>
+      <span>
+        <DeathDateField />
+        <DeathTimeField />
+      </span>
+    </div>
+  );
+};
+
+function DeathDateField() {
+  const { values, setFieldValue } = useContext(PatientRegistrationContext);
+  const [deathDate, deathDateMeta] = useField<keyof FormValues>('deathDate');
+  const { t } = useTranslation();
+  const today = dayjs().hour(23).minute(59).second(59).toDate();
+  const onDateChange = useCallback(
+    (selectedDate: Date) => {
+      setFieldValue(
+        'deathDate',
+        selectedDate ? dayjs(selectedDate).hour(0).minute(0).second(0).millisecond(0).toDate() : undefined,
+      );
+    },
+    [deathDate],
+  );
+
+  return (
+    <Layer>
+      <OpenmrsDatePicker
+        {...deathDate}
+        id="deathDate"
+        invalidText={t(deathDateMeta.error)}
+        invalid={!!(deathDateMeta.touched && deathDateMeta.error)}
+        isRequired={values.isDead}
+        labelText={t('deathDateInputLabel', 'Date of death')}
+        maxDate={today}
+        onChange={onDateChange}
+      />
+    </Layer>
+  );
+}
+
+function DeathTimeField() {
+  const { t } = useTranslation();
+  const [deathTimeField, deathTimeMeta] = useField<keyof FormValues>('deathTime');
+  const [deathTimeFormatField, deathTimeFormatMeta] = useField<keyof FormValues>('deathTimeFormat');
+
+  return (
+    <Layer>
+      <TimePicker
+        {...deathTimeField}
+        id="time-picker"
+        labelText={t('timeOfDeathInputLabel', 'Time of death (hh:mm)')}
+        className={styles.timeOfDeathField}
+        pattern="^(1[0-2]|0?[1-9]):([0-5]?[0-9])$"
+        invalid={!!(deathTimeMeta.touched && deathTimeMeta.error)}
+        invalidText={t(deathTimeMeta.error)}>
+        <TimePickerSelect
+          {...deathTimeFormatField}
+          id="time-format-picker"
+          aria-label={t('timeFormat', 'Time Format')}
+          invalid={!!deathTimeFormatMeta.touched && deathTimeFormatMeta.error}
+          invalidText={t(deathTimeFormatMeta.error)}>
+          <SelectItem value="AM" text="AM" />
+          <SelectItem value="PM" text="PM" />
+        </TimePickerSelect>
+      </TimePicker>
+    </Layer>
+  );
+}

package/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,6 +39,7 @@ export const DobField: React.FC = () => {
       setFieldValue('birthdate', '');
       setFieldValue('yearsEstimated', 0);
       setFieldValue('monthsEstimated', '');
+      setFieldTouched('birthdateEstimated', true, false);
     },
     [setFieldValue],
   );
@@ -46,8 +47,9 @@ export const DobField: React.FC = () => {
   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}>
@@ -88,7 +93,7 @@ export const DobField: React.FC = () => {
       {(allowEstimatedBirthDate || dobUnknown) && (
         <div className={styles.dobField}>
           <div className={styles.dobContentSwitcherLabel}>
-            <span className={styles.label01}>{t('dobToggleLabelText', 'Date of Birth Known?')}</span>
+            <span className={styles.label01}>{t('dobToggleLabelText', 'Date of birth known?')}</span>
           </div>
           <ContentSwitcher onChange={onToggle} selectedIndex={dobUnknown ? 1 : 0}>
             <Switch name="known" text={t('yes', 'Yes')} />
@@ -103,8 +108,9 @@ export const DobField: React.FC = () => {
               id="birthdate"
               {...birthdate}
               onChange={onDateChange}
+              onBlur={() => setFieldTouched('birthdate', true, false)}
               maxDate={today}
-              labelText={t('dateOfBirthLabelText', 'Date of Birth')}
+              labelText={t('dateOfBirthLabelText', 'Date of birth')}
               isInvalid={!!(birthdateMeta.touched && birthdateMeta.error)}
               invalidText={t(birthdateMeta.error)}
               value={birthdate.value}
@@ -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>

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

@@ -1,12 +1,14 @@
 import React from 'react';
-import { NameField } from './name/name-field.component';
-import { GenderField } from './gender/gender-field.component';
-import { Identifiers } from './id/id-field.component';
-import { DobField } from './dob/dob.component';
 import { reportError, useConfig } from '@openmrs/esm-framework';
 import { builtInFields, type RegistrationConfig } from '../../config-schema';
-import { CustomField } from './custom-field.component';
 import { AddressComponent } from './address/address-field.component';
+import { CauseOfDeathField } from './cause-of-death/cause-of-death.component';
+import { CustomField } from './custom-field.component';
+import { DateAndTimeOfDeathField } from './date-and-time-of-death/date-and-time-of-death.component';
+import { DobField } from './dob/dob.component';
+import { GenderField } from './gender/gender-field.component';
+import { Identifiers } from './id/id-field.component';
+import { NameField } from './name/name-field.component';
 import { PhoneField } from './phone/phone-field.component';
 
 export interface FieldProps {
@@ -35,6 +37,10 @@ export function Field({ name }: FieldProps) {
       return <GenderField />;
     case 'dob':
       return <DobField />;
+    case 'dateAndTimeOfDeath':
+      return <DateAndTimeOfDeathField />;
+    case 'causeOfDeath':
+      return <CauseOfDeathField />;
     case 'address':
       return <AddressComponent />;
     case 'id':

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

@@ -1,6 +1,7 @@
-import { type FetchResponse, openmrsFetch, showSnackbar, restBaseUrl } from '@openmrs/esm-framework';
+import { type FetchResponse, openmrsFetch, restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
 import useSWRImmutable from 'swr/immutable';
 import { type ConceptAnswers, type ConceptResponse } from '../patient-registration.types';
+import { useMemo } from 'react';
 
 export function useConcept(conceptUuid: string): { data: ConceptResponse; isLoading: boolean } {
   const shouldFetch = typeof conceptUuid === 'string' && conceptUuid !== '';
@@ -15,10 +16,15 @@ export function useConcept(conceptUuid: string): { data: ConceptResponse; isLoad
       kind: 'error',
     });
   }
-  return { data: data?.data, isLoading };
+  const results = useMemo(() => ({ data: data?.data, isLoading }), [data, isLoading]);
+  return results;
 }
 
-export function useConceptAnswers(conceptUuid: string): { data: Array<ConceptAnswers>; isLoading: boolean } {
+export function useConceptAnswers(conceptUuid: string): {
+  data: Array<ConceptAnswers>;
+  isLoading: boolean;
+  error: Error;
+} {
   const shouldFetch = typeof conceptUuid === 'string' && conceptUuid !== '';
   const { data, error, isLoading } = useSWRImmutable<FetchResponse<ConceptResponse>, Error>(
     shouldFetch ? `${restBaseUrl}/concept/${conceptUuid}` : null,
@@ -31,5 +37,6 @@ export function useConceptAnswers(conceptUuid: string): { data: Array<ConceptAns
       kind: 'error',
     });
   }
-  return { data: data?.data?.answers, isLoading };
+  const results = useMemo(() => ({ data: data?.data?.answers, isLoading, error }), [isLoading, error, data]);
+  return results;
 }

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

@@ -64,8 +64,30 @@
 }
 
 .sexField,
-.dobField {
+.dobField,
+.dodField {
   margin-bottom: layout.$spacing-05;
+
+  span {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: start;
+  }
+}
+
+.nonCodedCauseOfDeath {
+  margin-top: layout.$spacing-04;
+}
+
+.timeOfDeathContainer {
+  display: flex;
+  align-items: center;
+}
+
+.timeOfDeathField {
+  flex: none;
+  margin-left: layout.$spacing-02;
 }
 
 .dobContentSwitcherLabel {

package/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

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

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

package/src/patient-registration/form-manager.test.ts

@@ -20,7 +20,10 @@ const formValues: FormValues = {
   telephoneNumber: '',
   isDead: false,
   deathDate: 'string',
+  deathTime: '',
+  deathTimeFormat: 'AM',
   deathCause: 'string',
+  nonCodedCauseOfDeath: '',
   relationships: [],
   address: {
     address1: '',

package/src/patient-registration/form-manager.ts

@@ -1,23 +1,24 @@
 import {
   type FetchResponse,
-  type Session,
-  type StyleguideConfigObject,
   getConfig,
   openmrsFetch,
   queueSynchronizationItem,
   restBaseUrl,
+  type Session,
+  type StyleguideConfigObject,
+  toOmrsIsoString,
 } from '@openmrs/esm-framework';
 import { patientRegistration } from '../constants';
 import {
-  type FormValues,
   type AttributeValue,
-  type PatientUuidMapType,
-  type Patient,
   type CapturePhotoProps,
+  type Encounter,
+  type FormValues,
+  type Patient,
   type PatientIdentifier,
   type PatientRegistration,
+  type PatientUuidMapType,
   type RelationshipValue,
-  type Encounter,
 } from './patient-registration.types';
 import {
   addPatientIdentifier,
@@ -25,14 +26,16 @@ import {
   deletePersonName,
   deleteRelationship,
   generateIdentifier,
+  getDatetime,
+  saveEncounter,
   savePatient,
   savePatientPhoto,
   saveRelationship,
-  updateRelationship,
   updatePatientIdentifier,
-  saveEncounter,
+  updateRelationship,
 } from './patient-registration.resource';
 import { type RegistrationConfig } from '../config-schema';
+import dayjs from 'dayjs';
 
 export type SavePatientForm = (
   isNewPatient: boolean,
@@ -62,7 +65,7 @@ export class FormManager {
   ) => {
     const syncItem: PatientRegistration = {
       fhirPatient: FormManager.mapPatientToFhirPatient(
-        FormManager.getPatientToCreate(isNewPatient, values, patientUuidMap, initialAddressFieldValues, []),
+        FormManager.getPatientToCreate(isNewPatient, values, patientUuidMap, initialAddressFieldValues, [], config),
       ),
       _patientRegistrationData: {
         isNewPatient,
@@ -115,6 +118,7 @@ export class FormManager {
       patientUuidMap,
       initialAddressFieldValues,
       patientIdentifiers,
+      config,
     );
 
     FormManager.getDeletedNames(values.patientUuid, patientUuidMap).forEach(async (name) => {
@@ -296,6 +300,7 @@ export class FormManager {
     patientUuidMap: PatientUuidMapType,
     initialAddressFieldValues: Record<string, any>,
     identifiers: Array<PatientIdentifier>,
+    config?: RegistrationConfig,
   ): Patient {
     let birthdate;
     if (values.birthdate instanceof Date) {
@@ -316,7 +321,7 @@ export class FormManager {
         birthdateEstimated: values.birthdateEstimated,
         attributes: FormManager.getPatientAttributes(isNewPatient, values, patientUuidMap),
         addresses: [values.address],
-        ...FormManager.getPatientDeathInfo(values),
+        ...FormManager.getPatientDeathInfo(values, config),
       },
       identifiers,
     };
@@ -375,12 +380,22 @@ export class FormManager {
     return attributes;
   }
 
-  static getPatientDeathInfo(values: FormValues) {
-    const { isDead, deathDate, deathCause } = values;
+  static getPatientDeathInfo(values: FormValues, config?: RegistrationConfig) {
+    const { isDead, deathDate, deathTime, deathTimeFormat, deathCause, nonCodedCauseOfDeath } = values;
+
+    if (!isDead) {
+      return {
+        dead: false,
+      };
+    }
+    const dateTimeOfDeath = toOmrsIsoString(getDatetime(deathDate, deathTime, deathTimeFormat));
+
     return {
-      dead: isDead,
-      deathDate: isDead ? deathDate : undefined,
-      causeOfDeath: isDead ? deathCause : undefined,
+      dead: true,
+      deathDate: dateTimeOfDeath,
+      ...(deathCause === config?.freeTextFieldConceptUuid
+        ? { causeOfDeathNonCoded: nonCodedCauseOfDeath, causeOfDeath: null }
+        : { causeOfDeath: deathCause, causeOfDeathNonCoded: null }),
     };
   }
 

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

@@ -66,7 +66,7 @@ export interface TextInputProps
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
    * 'The `light` prop for `TextInput` has ' +
-      'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'
+   'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'
    */
   light?: boolean;
 
@@ -145,6 +145,10 @@ export const Input: React.FC<InputProps> = ({ checkWarning, ...props }) => {
     t('invalidEmail')
     t('numberInNameDubious')
     t('yearsEstimateRequired')
+    t('deathdayIsRequired', 'Death date is required when the patient is marked as deceased.')
+    t('deathdayInvalidDate', 'Date of death is invalid')
+    t('deathCauseRequired', 'Cause of death is required')
+    t('nonCodedCauseOfDeathRequired', 'Non-coded cause of death is required')
   */
 
   const value = field.value || '';