@kenyaemr/esm-patient-registration-app 4.5.2 → 4.5.4

package/src/index.ts

@@ -57,3 +57,6 @@ export const deleteIdentifierConfirmationModal = getAsyncLifecycle(
   () => import('./widgets/delete-identifier-confirmation-modal'),
   options,
 );
+
+export const emptyVerificationModal = getAsyncLifecycle(() => import('./patient-verification/verification-modal/empty-prompt.component'), options);
+export const confirmationVerificationModal = getAsyncLifecycle(() => import('./patient-verification/verification-modal/confirm-prompt.component'), options);

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

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

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

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

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

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

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

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

@@ -25,6 +25,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 { martialStatus, education, occupation, educationLoad, loadingStatus } = useConcepts();
@@ -39,7 +40,6 @@ export function useInitialFormValues(patientUuid: string): [FormValues, Dispatch
     givenName: '',
     middleName: '',
     familyName: '',
-    unidentifiedPatient: false,
     additionalGivenName: '',
     additionalMiddleName: '',
     additionalFamilyName: '',
@@ -61,11 +61,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);
@@ -120,6 +131,7 @@ export function useInitialFormValues(patientUuid: string): [FormValues, Dispatch
             ? attribute.value?.uuid
             : attribute.value;
       });
+
       setInitialFormValues((initialFormValues) => ({
         ...initialFormValues,
         attributes: personAttributes,

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

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

package/src/routes.json

@@ -42,5 +42,15 @@
     "name": "delete-identifier-confirmation-modal",
     "online": true,
     "offline": true
+  }, {
+    "component": "emptyVerificationModal",
+    "name":"empty-client-registry-modal",
+    "online": true,
+    "offline": false
+  },{
+    "component": "confirmationVerificationModal",
+    "name": "confirm-client-registry-modal",
+    "online": true,
+    "offline": false
   }]
 }

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { screen, render, fireEvent } from '@testing-library/react';
+import CancelPatientEdit from './cancel-patient-edit.component';
+
+describe('CancelPatientEdit component', () => {
+  const mockClose = jest.fn();
+  const mockOnConfirm = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the modal and triggers close and onConfirm functions', () => {
+    render(<CancelPatientEdit close={mockClose} onConfirm={mockOnConfirm} />);
+
+    const cancelButton = screen.getByRole('button', { name: /Cancel/i });
+    fireEvent.click(cancelButton);
+    expect(mockClose).toHaveBeenCalledTimes(1);
+
+    const discardButton = screen.getByRole('button', { name: /discard/i });
+    fireEvent.click(discardButton);
+    expect(mockOnConfirm).toHaveBeenCalledTimes(1);
+  });
+});

package/src/widgets/delete-identifier-confirmation-modal.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import DeleteIdentifierConfirmationModal from './delete-identifier-confirmation-modal';
+
+describe('DeleteIdentifierConfirmationModal component', () => {
+  const mockDeleteIdentifier = jest.fn();
+  const mockIdentifierName = 'Identifier Name';
+  const mockIdentifierValue = 'Identifier Value';
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the modal and triggers deleteIdentifier function', () => {
+    render(
+      <DeleteIdentifierConfirmationModal
+        deleteIdentifier={mockDeleteIdentifier}
+        identifierName={mockIdentifierName}
+        identifierValue={mockIdentifierValue}
+      />,
+    );
+
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    fireEvent.click(cancelButton);
+    expect(mockDeleteIdentifier).toHaveBeenCalledWith(false);
+
+    const removeButton = screen.getByRole('button', { name: /remove identifier/i });
+    fireEvent.click(removeButton);
+    expect(mockDeleteIdentifier).toHaveBeenCalledWith(true);
+  });
+});