(feat) O3-2100: Unknown patient name and estimated D.O.B config

packages/esm-patient-registration-app/src/config-schema.ts

@@ -37,7 +37,7 @@ export interface RegistrationConfig {
   fieldConfigurations: {
     name: {
       displayMiddleName: boolean;
-      unidentifiedPatient: boolean;
+      allowUnidentifiedPatients: boolean;
       defaultUnknownGivenName: string;
       defaultUnknownFamilyName: string;
       displayCapturePhoto: boolean;
@@ -52,6 +52,7 @@ export interface RegistrationConfig {
       };
     };
     dateOfBirth: {
+      allowEstimatedDateOfBirth: boolean;
       useEstimatedDateOfBirth: {
         enabled: boolean;
         dayOfMonth: number;
@@ -201,10 +202,10 @@ export const esmPatientRegistrationSchema = {
   fieldConfigurations: {
     name: {
       displayMiddleName: { _type: Type.Boolean, _default: true },
-      unidentifiedPatient: {
+      allowUnidentifiedPatients: {
         _type: Type.Boolean,
         _default: true,
-        _description: 'Whether to allow patients to be registered without names.',
+        _description: 'Whether to allow registering unidentified patients.',
       },
       defaultUnknownGivenName: {
         _type: Type.String,
@@ -296,10 +297,15 @@ export const esmPatientRegistrationSchema = {
       },
     },
     dateOfBirth: {
+      allowEstimatedDateOfBirth: {
+        _type: Type.Boolean,
+        _description: 'Whether to allow estimated date of birth for a patient during registration',
+        _default: true,
+      },
       useEstimatedDateOfBirth: {
         enabled: {
           _type: Type.Boolean,
-          _description: 'Whether to use custom day and month for estimated date of birth',
+          _description: 'Whether to use a fixed day and month for estimated date of birth',
           _default: false,
         },
         dayOfMonth: {
@@ -309,7 +315,7 @@ export const esmPatientRegistrationSchema = {
         },
         month: {
           _type: Type.Number,
-          _description: 'The custom month to use on the estimated date of birth i.e 0 = Jan 11 = Dec',
+          _description: 'The custom month to use on the estimated date of birth i.e 0 = Jan & 11 = Dec',
           _default: 0,
         },
       },

packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx

@@ -25,9 +25,9 @@ export const DobField: React.FC = () => {
   const { t } = useTranslation();
   const {
     fieldConfigurations: { dateOfBirth },
-  } = useConfig() as RegistrationConfig;
-  const [dobUnknown] = useField('birthdateEstimated');
-  const dobKnown = !dobUnknown.value;
+  } = useConfig<RegistrationConfig>();
+  const allowEstimatedBirthDate = dateOfBirth?.allowEstimatedDateOfBirth;
+  const [{ value: dobUnknown }] = useField('birthdateEstimated');
   const [birthdate, birthdateMeta] = useField('birthdate');
   const [yearsEstimated, yearsEstimateMeta] = useField('yearsEstimated');
   const [monthsEstimated, monthsEstimateMeta] = useField('monthsEstimated');
@@ -75,17 +75,19 @@ export const DobField: React.FC = () => {
   return (
     <div className={styles.halfWidthInDesktopView}>
       <h4 className={styles.productiveHeading02Light}>{t('birthFieldLabelText', 'Birth')}</h4>
-      <div className={styles.dobField}>
-        <div className={styles.dobContentSwitcherLabel}>
-          <span className={styles.label01}>{t('dobToggleLabelText', 'Date of Birth Known?')}</span>
+      {(allowEstimatedBirthDate || dobUnknown) && (
+        <div className={styles.dobField}>
+          <div className={styles.dobContentSwitcherLabel}>
+            <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')} />
+            <Switch name="unknown" text={t('no', 'No')} />
+          </ContentSwitcher>
         </div>
-        <ContentSwitcher onChange={onToggle}>
-          <Switch name="known" text={t('yes', 'Yes')} />
-          <Switch name="unknown" text={t('no', 'No')} />
-        </ContentSwitcher>
-      </div>
+      )}
       <Layer>
-        {dobKnown ? (
+        {!dobUnknown ? (
           <div className={styles.dobField}>
             <DatePicker dateFormat={dateFormat} datePickerType="single" onChange={onDateChange} maxDate={format(today)}>
               <DatePickerInput

packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.test.tsx

@@ -14,7 +14,12 @@ jest.mock('@openmrs/esm-framework', () => {
   return {
     ...originalModule,
     useConfig: jest.fn().mockImplementation(() => ({
-      fieldConfigurations: { dateOfBirth: { useEstimatedDateOfBirth: { enabled: true, dayOfMonth: 0, month: 0 } } },
+      fieldConfigurations: {
+        dateOfBirth: {
+          allowEstimatedDateOfBirth: true,
+          useEstimatedDateOfBirth: { enabled: true, dayOfMonth: 0, month: 0 },
+        },
+      },
     })),
   };
 });

packages/esm-patient-registration-app/src/patient-registration/field/name/name-field.component.tsx

@@ -8,6 +8,7 @@ import { PatientRegistrationContext } from '../../patient-registration-context';
 import styles from '../field.scss';
 import { RegistrationConfig } from '../../../config-schema';
 
+export const unidentifiedPatientAttributeTypeUuid = '8b56eac7-5c76-4b9c-8c6f-1deab8d3fc47';
 const containsNoNumbers = /^([^0-9]*)$/;
 
 function checkNumber(value: string) {
@@ -19,17 +20,26 @@ function checkNumber(value: string) {
 }
 
 export const NameField = () => {
+  const { t } = useTranslation();
+  const { setCapturePhotoProps, currentPhoto, setFieldValue } = useContext(PatientRegistrationContext);
   const {
     fieldConfigurations: {
-      name: { displayCapturePhoto, displayReverseFieldOrder },
+      name: {
+        displayCapturePhoto,
+        allowUnidentifiedPatients,
+        defaultUnknownGivenName,
+        defaultUnknownFamilyName,
+        displayMiddleName,
+        displayReverseFieldOrder,
+      },
     },
-  } = useConfig() as RegistrationConfig;
-  const { t } = useTranslation();
-  const { setCapturePhotoProps, currentPhoto, setFieldValue } = useContext(PatientRegistrationContext);
-  const { fieldConfigurations } = useConfig();
-  const fieldConfigs = fieldConfigurations?.name;
-  const [{ value: unidentified }] = useField('unidentifiedPatient');
-  const nameKnown = !unidentified;
+  } = useConfig<RegistrationConfig>();
+
+  const [{ value: isPatientUnknownValue }, , { setValue: setUnknownPatient }] = useField<string>(
+    `attributes.${unidentifiedPatientAttributeTypeUuid}`,
+  );
+
+  const isPatientUnknown = isPatientUnknownValue === 'true';
 
   const onCapturePhoto = useCallback(
     (dataUri: string, photoDateTime: string) => {
@@ -47,11 +57,11 @@ export const NameField = () => {
     if (e.name === 'known') {
       setFieldValue('givenName', '');
       setFieldValue('familyName', '');
-      setFieldValue('unidentifiedPatient', false);
+      setUnknownPatient('false');
     } else {
-      setFieldValue('givenName', fieldConfigs.defaultUnknownGivenName);
-      setFieldValue('familyName', fieldConfigs.defaultUnknownFamilyName);
-      setFieldValue('unidentifiedPatient', true);
+      setFieldValue('givenName', defaultUnknownGivenName);
+      setFieldValue('familyName', defaultUnknownFamilyName);
+      setUnknownPatient('true');
     }
   };
 
@@ -65,7 +75,7 @@ export const NameField = () => {
     />
   );
 
-  const middleNameField = fieldConfigs.displayMiddleName && (
+  const middleNameField = displayMiddleName && (
     <Input
       id="middleName"
       name="middleName"
@@ -98,14 +108,21 @@ export const NameField = () => {
         )}
 
         <div className={styles.nameField}>
-          <div className={styles.dobContentSwitcherLabel}>
-            <span className={styles.label01}>{t('patientNameKnown', "Patient's Name is Known?")}</span>
-          </div>
-          <ContentSwitcher className={styles.contentSwitcher} onChange={toggleNameKnown}>
-            <Switch name="known" text={t('yes', 'Yes')} />
-            <Switch name="unknown" text={t('no', 'No')} />
-          </ContentSwitcher>
-          {nameKnown &&
+          {(allowUnidentifiedPatients || isPatientUnknown) && (
+            <>
+              <div className={styles.dobContentSwitcherLabel}>
+                <span className={styles.label01}>{t('patientNameKnown', "Patient's Name is Known?")}</span>
+              </div>
+              <ContentSwitcher
+                className={styles.contentSwitcher}
+                selectedIndex={isPatientUnknown ? 1 : 0}
+                onChange={toggleNameKnown}>
+                <Switch name="known" text={t('yes', 'Yes')} />
+                <Switch name="unknown" text={t('no', 'No')} />
+              </ContentSwitcher>
+            </>
+          )}
+          {!isPatientUnknown &&
             (!displayReverseFieldOrder ? (
               <>
                 {firstNameField}

packages/esm-patient-registration-app/src/patient-registration/form-manager.test.ts

@@ -8,7 +8,6 @@ const formValues: FormValues = {
   givenName: '',
   middleName: '',
   familyName: '',
-  unidentifiedPatient: false,
   additionalGivenName: '',
   additionalMiddleName: '',
   additionalFamilyName: '',

packages/esm-patient-registration-app/src/patient-registration/form-manager.ts

@@ -364,14 +364,6 @@ export class FormManager {
       }
     }
 
-    if (values.unidentifiedPatient) {
-      attributes.push({
-        // The UUID of the 'Unknown Patient' attribute-type will always be static across all implementations of OpenMRS
-        attributeType: '8b56eac7-5c76-4b9c-8c6f-1deab8d3fc47',
-        value: 'true',
-      });
-    }
-
     return attributes;
   }
 

packages/esm-patient-registration-app/src/patient-registration/input/dummy-data/dummy-data-input.component.tsx

@@ -12,7 +12,6 @@ export const dummyFormValues: FormValues = {
   givenName: 'John',
   middleName: '',
   familyName: 'Smith',
-  unidentifiedPatient: false,
   additionalGivenName: 'Joey',
   additionalMiddleName: '',
   additionalFamilyName: 'Smitty',

packages/esm-patient-registration-app/src/patient-registration/patient-registration-hooks.ts

@@ -21,6 +21,7 @@ import {
   latestFirstEncounter,
 } from './patient-registration-utils';
 import { useInitialPatientRelationships } from './section/patient-relationships/relationships.resource';
+import dayjs from 'dayjs';
 
 export function useInitialFormValues(patientUuid: string): [FormValues, Dispatch<FormValues>] {
   const { isLoading: isLoadingPatientToEdit, patient: patientToEdit } = usePatient(patientUuid);
@@ -34,7 +35,6 @@ export function useInitialFormValues(patientUuid: string): [FormValues, Dispatch
     givenName: '',
     middleName: '',
     familyName: '',
-    unidentifiedPatient: false,
     additionalGivenName: '',
     additionalMiddleName: '',
     additionalFamilyName: '',
@@ -56,11 +56,22 @@ export function useInitialFormValues(patientUuid: string): [FormValues, Dispatch
   useEffect(() => {
     (async () => {
       if (patientToEdit) {
+        const birthdateEstimated = !/^\d{4}-\d{2}-\d{2}$/.test(patientToEdit.birthDate);
+        const [years = 0, months = 0] = patientToEdit.birthDate.split('-').map((val) => parseInt(val));
+        // Please refer: https://github.com/openmrs/openmrs-esm-patient-management/pull/697#issuecomment-1562706118
+        const estimatedMonthsAvailable = patientToEdit.birthDate.split('-').length > 1;
+        const yearsEstimated = birthdateEstimated ? Math.floor(dayjs().diff(patientToEdit.birthDate, 'month') / 12) : 0;
+        const monthsEstimated =
+          birthdateEstimated && estimatedMonthsAvailable ? dayjs().diff(patientToEdit.birthDate, 'month') % 12 : 0;
+
         setInitialFormValues({
           ...initialFormValues,
           ...getFormValuesFromFhirPatient(patientToEdit),
           address: getAddressFieldValuesFromFhirPatient(patientToEdit),
           ...getPhonePersonAttributeValueFromFhirPatient(patientToEdit),
+          birthdateEstimated: !/^\d{4}-\d{2}-\d{2}$/.test(patientToEdit.birthDate),
+          yearsEstimated,
+          monthsEstimated,
         });
       } else if (!isLoadingPatientToEdit && patientUuid) {
         const registration = await getPatientRegistration(patientUuid);
@@ -107,6 +118,7 @@ export function useInitialFormValues(patientUuid: string): [FormValues, Dispatch
             ? attribute.value?.uuid
             : attribute.value;
       });
+
       setInitialFormValues((initialFormValues) => ({
         ...initialFormValues,
         attributes: personAttributes,

packages/esm-patient-registration-app/src/patient-registration/patient-registration-types.tsx

@@ -158,7 +158,6 @@ export interface FormValues {
   givenName: string;
   middleName: string;
   familyName: string;
-  unidentifiedPatient: boolean;
   additionalGivenName: string;
   additionalMiddleName: string;
   additionalFamilyName: string;

packages/esm-patient-registration-app/src/patient-registration/patient-registration-utils.ts

@@ -115,9 +115,6 @@ export function getFormValuesFromFhirPatient(patient: fhir.Patient) {
   result.givenName = patientName?.given[0];
   result.middleName = patientName?.given[1];
   result.familyName = patientName?.family;
-  result.unidentifiedPatient =
-    patientName.given[0] === 'UNKNOWN' && patientName.family === 'unknown' ? true : undefined;
-
   result.addNameInLocalLanguage = !!additionalPatientName ? true : undefined;
   result.additionalGivenName = additionalPatientName?.given[0];
   result.additionalMiddleName = additionalPatientName?.given[1];