Move to OpenMRS' locale sensitive date-picker (#813)

Co-authored-by: Dennis Kigen <kigen.work@gmail.com>
openmrs · Sep 21, 2023 · 12b02ef · 12b02ef
1 parent a16e38c
commit 12b02ef
Show file tree

Hide file tree

Showing 5 changed files with 1,233 additions and 117 deletions.
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx
@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
-import { ContentSwitcher, DatePicker, DatePickerInput, Layer, Switch, TextInput } from '@carbon/react';
+import { ContentSwitcher, Layer, Switch, TextInput } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { useField } from 'formik';
 import { generateFormatting } from '../../date-util';
 import { PatientRegistrationContext } from '../../patient-registration-context';
-import { useConfig } from '@openmrs/esm-framework';
+import { OpenmrsDatePicker, useConfig } from '@openmrs/esm-framework';
 import { RegistrationConfig } from '../../../config-schema';
 import styles from '../field.scss';
 
@@ -42,7 +42,7 @@ export const DobField: React.FC = () => {
     setFieldValue('monthsEstimated', '');
   };
 
-  const onDateChange = ([birthdate]) => {
+  const onDateChange = (birthdate) => {
     setFieldValue('birthdate', birthdate);
   };
 
@@ -89,17 +89,20 @@ export const DobField: React.FC = () => {
       <Layer>
         {!dobUnknown ? (
           <div className={styles.dobField}>
-            <DatePicker dateFormat={dateFormat} datePickerType="single" onChange={onDateChange} maxDate={format(today)}>
-              <DatePickerInput
-                id="birthdate"
-                {...birthdate}
-                placeholder={placeHolder}
-                labelText={t('dateOfBirthLabelText', 'Date of Birth')}
-                invalid={!!(birthdateMeta.touched && birthdateMeta.error)}
-                invalidText={birthdateMeta.error && t(birthdateMeta.error)}
-                value={format(birthdate.value)}
-              />
-            </DatePicker>
+            <OpenmrsDatePicker
+              id="birthdate"
+              {...birthdate}
+              dateFormat={dateFormat}
+              onChange={onDateChange}
+              maxDate={format(today)}
+              labelText={t('dateOfBirthLabelText', 'Date of Birth')}
+              invalid={!!(birthdateMeta.touched && birthdateMeta.error)}
+              invalidText={birthdateMeta.error && t(birthdateMeta.error)}
+              value={format(birthdate.value)}
+              carbonOptions={{
+                placeholder: placeHolder,
+              }}
+            />
           </div>
         ) : (
           <div className={styles.grid}>

diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.test.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.test.tsx
@@ -8,6 +8,7 @@ import { DobField } from './dob.component';
 import { PatientRegistrationContext } from '../../patient-registration-context';
 import { initialFormValues } from '../../patient-registration.component';
 import { FormValues } from '../../patient-registration-types';
+import { OpenmrsDatePicker } from '@openmrs/esm-styleguide/src/public';
 
 jest.mock('@openmrs/esm-framework', () => {
   const originalModule = jest.requireActual('@openmrs/esm-framework');
@@ -21,6 +22,18 @@ jest.mock('@openmrs/esm-framework', () => {
         },
       },
     })),
+    getLocale: jest.fn().mockReturnValue('en'),
+    OpenmrsDatePicker: (datePickerProps) => (
+      <OpenmrsDatePicker
+        id={datePickerProps.id}
+        dateFormat={datePickerProps.dateFormat}
+        onChange={datePickerProps.onChange}
+        maxDate={datePickerProps.maxDate}
+        labelText={datePickerProps.labelText}
+        value={datePickerProps.value}
+        carbonOptions={datePickerProps.carbonOptions}
+      />
+    ),
   };
 });
 

diff --git a/packages/esm-patient-registration-app/src/patient-registration/patient-registration.test.tsx b/packages/esm-patient-registration-app/src/patient-registration/patient-registration.test.tsx
@@ -11,22 +11,14 @@ import { PatientRegistration } from './patient-registration.component';
 import { RegistrationConfig } from '../config-schema';
 import { mockedAddressTemplate } from './field/address/tests/mocks';
 import { mockPatient } from '../../../../tools/test-helpers';
+import { OpenmrsDatePicker } from '@openmrs/esm-styleguide/src/public';
 
 const mockedUseConfig = useConfig as jest.Mock;
 const mockedUsePatient = usePatient as jest.Mock;
 const mockedSaveEncounter = saveEncounter as jest.Mock;
 const mockedSavePatient = savePatient as jest.Mock;
 const mockedShowToast = showToast as jest.Mock;
 
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
-
-  return {
-    ...originalModule,
-    validator: jest.fn(),
-  };
-});
-
 // Mock field.resource using the manual mock (in __mocks__)
 jest.mock('./field/field.resource');
 
@@ -55,6 +47,18 @@ jest.mock('@openmrs/esm-framework', () => {
   return {
     ...originalModule,
     validator: jest.fn(),
+    getLocale: jest.fn().mockReturnValue('en'),
+    OpenmrsDatePicker: (datePickerProps) => (
+      <OpenmrsDatePicker
+        id={datePickerProps.id}
+        dateFormat={datePickerProps.dateFormat}
+        onChange={datePickerProps.onChange}
+        maxDate={datePickerProps.maxDate}
+        labelText={datePickerProps.labelText}
+        value={datePickerProps.value}
+        carbonOptions={datePickerProps.carbonOptions}
+      />
+    ),
   };
 });
 
@@ -345,7 +349,7 @@ describe('patient registration component', () => {
       jest.clearAllMocks();
     });
 
-    it('edits patient demographics', async () => {
+    fit('edits patient demographics', async () => {
       const user = userEvent.setup();
 
       mockedSavePatient.mockResolvedValue({});
@@ -379,7 +383,7 @@ describe('patient registration component', () => {
       expect(givenNameInput.value).toBe('John');
       expect(familyNameInput.value).toBe('Wilson');
       expect(middleNameInput.value).toBeFalsy();
-      expect(dateOfBirthInput.value).toBe('4/4/1972');
+      expect(dateOfBirthInput.value).toBe('04/04/1972');
       expect(genderInput.value).toBe('Male');
 
       // do some edits

diff --git a/...istration-app/src/patient-registration/section/demographics/demographics-section.test.tsx b/...istration-app/src/patient-registration/section/demographics/demographics-section.test.tsx
@@ -5,6 +5,7 @@ import { initialFormValues } from '../../patient-registration.component';
 import { DemographicsSection } from './demographics-section.component';
 import { PatientRegistrationContext } from '../../patient-registration-context';
 import { FormValues } from '../../patient-registration-types';
+import { OpenmrsDatePicker } from '@openmrs/esm-styleguide/src/public';
 
 jest.mock('@openmrs/esm-framework', () => {
   const originalModule = jest.requireActual('@openmrs/esm-framework');
@@ -15,6 +16,18 @@ jest.mock('@openmrs/esm-framework', () => {
     useConfig: jest.fn().mockImplementation(() => ({
       fieldConfigurations: { dateOfBirth: { useEstimatedDateOfBirth: { enabled: true, dayOfMonth: 0, month: 0 } } },
     })),
+    getLocale: jest.fn().mockReturnValue('en'),
+    OpenmrsDatePicker: (datePickerProps) => (
+      <OpenmrsDatePicker
+        id={datePickerProps.id}
+        dateFormat={datePickerProps.dateFormat}
+        onChange={datePickerProps.onChange}
+        maxDate={datePickerProps.maxDate}
+        labelText={datePickerProps.labelText}
+        value={datePickerProps.value}
+        carbonOptions={datePickerProps.carbonOptions}
+      />
+    ),
   };
 });