@ampath/esm-patient-registration-app 6.0.1-pre.96 → 9.2.0-next.12

package/src/patient-registration/field/gender/gender-field.test.tsx

@@ -1,35 +1,35 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { Formik, Form } from 'formik';
-import { render } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { renderWithContext } from 'tools';
+import { type RegistrationConfig, esmPatientRegistrationSchema } from '../../../config-schema';
+import { type FormValues } from '../../patient-registration.types';
+import {
+  type PatientRegistrationContextProps,
+  PatientRegistrationContextProvider,
+} from '../../patient-registration-context';
 import { GenderField } from './gender-field.component';
 
-jest.mock('@openmrs/esm-framework', () => ({
-  ...(jest.requireActual('@openmrs/esm-framework') as any),
-  useConfig: jest.fn(() => ({
-    fieldConfigurations: {
-      gender: [
-        {
-          value: 'male',
-          label: 'Male',
-        },
-      ],
-      name: {
-        displayMiddleName: false,
-        unidentifiedPatient: false,
-        defaultUnknownGivenName: '',
-        defaultUnknownFamilyName: '',
-      },
-    },
-  })),
-}));
+const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
 
-jest.mock('react', () => ({
-  ...(jest.requireActual('react') as any),
-  useContext: jest.fn(() => ({
-    setFieldValue: jest.fn(),
-  })),
-}));
+const mockContextValues: PatientRegistrationContextProps = {
+  currentPhoto: null,
+  identifierTypes: [],
+  inEditMode: false,
+  initialFormValues: {
+    gender: 'male',
+  } as FormValues,
+  isOffline: false,
+  setCapturePhotoProps: jest.fn(),
+  setFieldTouched: jest.fn(),
+  setFieldValue: jest.fn(),
+  validationSchema: esmPatientRegistrationSchema,
+  values: {
+    gender: 'male',
+  } as FormValues,
+};
 
 jest.mock('formik', () => ({
   ...(jest.requireActual('formik') as any),
@@ -37,23 +37,63 @@ jest.mock('formik', () => ({
 }));
 
 describe('GenderField', () => {
-  const renderComponent = () => {
-    return render(
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldConfigurations: {
+        gender: [
+          {
+            value: 'male',
+            label: 'Male',
+          },
+          {
+            value: 'female',
+            label: 'Female',
+          },
+        ],
+        name: {
+          displayMiddleName: false,
+          allowUnidentifiedPatients: false,
+          defaultUnknownGivenName: '',
+          defaultUnknownFamilyName: '',
+          displayCapturePhoto: false,
+          displayReverseFieldOrder: false,
+        },
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+  });
+
+  it('has a label', () => {
+    renderWithContext(
       <Formik initialValues={{}} onSubmit={null}>
         <Form>
           <GenderField />
         </Form>
       </Formik>,
+      PatientRegistrationContextProvider,
+      mockContextValues,
     );
-  };
 
-  it('has a label', () => {
-    expect(renderComponent().getAllByText('Sex')).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /sex/i })).toBeInTheDocument();
+    expect(screen.getByLabelText(/^male/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/female/i)).toBeInTheDocument();
   });
 
   it('checks an option', async () => {
     const user = userEvent.setup();
-    const component = renderComponent();
-    expect(component.getByLabelText('Male').getAttribute('value')).toBe('male');
+
+    renderWithContext(
+      <Formik initialValues={{}} onSubmit={null}>
+        <Form>
+          <GenderField />
+        </Form>
+      </Formik>,
+      PatientRegistrationContextProvider,
+      mockContextValues,
+    );
+
+    await user.click(screen.getByText(/female/i));
+    expect(screen.getByLabelText(/female/i)).toBeChecked();
+    expect(screen.getByLabelText(/^male/i)).not.toBeChecked();
   });
 });

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

@@ -1,18 +1,18 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, SkeletonText } from '@carbon/react';
 import { ArrowRight } from '@carbon/react/icons';
 import { useLayoutType, useConfig, isDesktop, UserHasAccess } from '@openmrs/esm-framework';
-import IdentifierSelectionOverlay from './identifier-selection-overlay.component';
-import { IdentifierInput } from '../../input/custom-input/identifier/identifier-input.component';
-import { PatientRegistrationContext } from '../../patient-registration-context';
-import {
-  type FormValues,
-  type IdentifierSource,
-  type PatientIdentifierType,
-  type PatientIdentifierValue,
+import { usePatientRegistrationContext } from '../../patient-registration-context';
+import { useResourcesContext } from '../../../resources-context';
+import type {
+  FormValues,
+  IdentifierSource,
+  PatientIdentifierType,
+  PatientIdentifierValue,
 } from '../../patient-registration.types';
-import { ResourcesContext } from '../../../offline.resources';
+import IdentifierInput from '../../input/custom-input/identifier/identifier-input.component';
+import IdentifierSelectionOverlay from './identifier-selection-overlay.component';
 import styles from '../field.scss';
 
 export function setIdentifierSource(
@@ -25,14 +25,16 @@ export function setIdentifierSource(
   selectedSource: IdentifierSource;
 } {
   const autoGeneration = identifierSource?.autoGenerationOption?.automaticGenerationEnabled;
+  const manualEntryEnabled = identifierSource?.autoGenerationOption?.manualEntryEnabled;
   return {
     selectedSource: identifierSource,
     autoGeneration,
-    identifierValue: autoGeneration
-      ? 'auto-generated'
-      : identifierValue !== 'auto-generated'
-        ? identifierValue
-        : initialValue,
+    identifierValue:
+      (autoGeneration && !manualEntryEnabled) || (!autoGeneration && !manualEntryEnabled)
+        ? 'auto-generated'
+        : identifierValue !== 'auto-generated'
+          ? identifierValue
+          : initialValue,
   };
 }
 
@@ -57,9 +59,9 @@ export function deleteIdentifierType(identifiers: FormValues['identifiers'], ide
 }
 
 export const Identifiers: React.FC = () => {
-  const { identifierTypes } = useContext(ResourcesContext);
-  const isLoading = !identifierTypes;
-  const { values, setFieldValue, initialFormValues, isOffline } = useContext(PatientRegistrationContext);
+  const { identifierTypes } = useResourcesContext();
+  const isLoading = !identifierTypes?.length;
+  const { values, setFieldValue, initialFormValues, isOffline } = usePatientRegistrationContext();
   const { t } = useTranslation();
   const layout = useLayoutType();
   const [showIdentifierOverlay, setShowIdentifierOverlay] = useState(false);
@@ -67,7 +69,6 @@ export const Identifiers: React.FC = () => {
   const { defaultPatientIdentifierTypes } = config;
 
   useEffect(() => {
-    // Initialization
     if (identifierTypes) {
       const identifiers = {};
       identifierTypes
@@ -108,11 +109,11 @@ export const Identifiers: React.FC = () => {
 
   if (isLoading && !isOffline) {
     return (
-      <div data-testid="loading-skeleton" className={styles.halfWidthInDesktopView}>
+      <div className={styles.halfWidthInDesktopView}>
         <div className={styles.identifierLabelText}>
           <h4 className={styles.productiveHeading02Light}>{t('idFieldLabelText', 'Identifiers')}</h4>
         </div>
-        <SkeletonText />
+        <SkeletonText role="progressbar" />
       </div>
     );
   }
@@ -124,10 +125,10 @@ export const Identifiers: React.FC = () => {
           <h4 className={styles.productiveHeading02Light}>{t('idFieldLabelText', 'Identifiers')}</h4>
           <Button
             kind="ghost"
-            className={styles.setIDNumberButton}
+            className={styles.configureIdentifiersButton}
             onClick={() => setShowIdentifierOverlay(true)}
             size={isDesktop(layout) ? 'sm' : 'md'}>
-            {t('configure', 'Configure')} <ArrowRight size={16} />
+            {t('configure', 'Configure')} <ArrowRight className={styles.arrowRightIcon} size={16} />
           </Button>
         </div>
       </UserHasAccess>

package/src/patient-registration/field/id/id-field.test.tsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import { Form, Formik } from 'formik';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { type AddressTemplate, type IdentifierSource } from '../../patient-registration.types';
+import { mockIdentifierTypes, mockOpenmrsId, mockPatient, mockSession } from '__mocks__';
+import { renderWithContext } from 'tools';
+import { esmPatientRegistrationSchema, type RegistrationConfig } from '../../../config-schema';
+import { type Resources } from '../../../offline.resources';
+import {
+  PatientRegistrationContextProvider,
+  type PatientRegistrationContextProps,
+} from '../../patient-registration-context';
+import { Identifiers, setIdentifierSource } from './id-field.component';
+import { ResourcesContextProvider } from '../../../resources-context';
+
+const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
+
+const mockResourcesContextValue = {
+  addressTemplate: null as unknown as AddressTemplate,
+  currentSession: mockSession.data,
+  identifierTypes: [],
+  relationshipTypes: [],
+} as Resources;
+
+const mockInitialFormValues = {
+  additionalFamilyName: '',
+  additionalGivenName: '',
+  additionalMiddleName: '',
+  addNameInLocalLanguage: false,
+  address: {},
+  birthdate: null,
+  birthdateEstimated: false,
+  deathCause: '',
+  deathDate: '',
+  familyName: 'Doe',
+  gender: 'male',
+  givenName: 'John',
+  identifiers: mockOpenmrsId,
+  isDead: false,
+  middleName: 'Test',
+  monthsEstimated: 0,
+  patientUuid: mockPatient.uuid,
+  relationships: [],
+  telephoneNumber: '',
+  yearsEstimated: 0,
+};
+
+const mockContextValues: PatientRegistrationContextProps = {
+  currentPhoto: null,
+  inEditMode: false,
+  identifierTypes: [],
+  initialFormValues: mockInitialFormValues,
+  isOffline: false,
+  setCapturePhotoProps: jest.fn(),
+  setFieldValue: jest.fn(),
+  setInitialFormValues: jest.fn(),
+  validationSchema: null,
+  values: mockInitialFormValues,
+} as unknown as PatientRegistrationContextProps;
+
+describe('Identifiers', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      defaultPatientIdentifierTypes: ['OpenMRS ID'],
+    });
+  });
+
+  it('should render loading skeleton when identifier types are loading', () => {
+    renderWithContext(
+      <Formik initialValues={{}} onSubmit={null}>
+        <Form>
+          <PatientRegistrationContextProvider value={mockContextValues}>
+            <Identifiers />
+          </PatientRegistrationContextProvider>
+        </Form>
+      </Formik>,
+      ResourcesContextProvider,
+      mockResourcesContextValue,
+    );
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('should render identifier inputs when identifier types are loaded', () => {
+    mockResourcesContextValue.identifierTypes = mockIdentifierTypes;
+
+    renderWithContext(
+      <Formik initialValues={{}} onSubmit={null}>
+        <Form>
+          <PatientRegistrationContextProvider value={mockContextValues}>
+            <Identifiers />
+          </PatientRegistrationContextProvider>
+        </Form>
+      </Formik>,
+      ResourcesContextProvider,
+      mockResourcesContextValue,
+    );
+
+    expect(screen.getByText('Identifiers')).toBeInTheDocument();
+    const configureButton = screen.getByRole('button', { name: 'Configure' });
+    expect(configureButton).toBeInTheDocument();
+    expect(configureButton).toBeEnabled();
+  });
+
+  it('should open identifier selection overlay when "Configure" button is clicked', async () => {
+    const user = userEvent.setup();
+    mockResourcesContextValue.identifierTypes = mockIdentifierTypes;
+
+    renderWithContext(
+      <Formik initialValues={{}} onSubmit={null}>
+        <Form>
+          <PatientRegistrationContextProvider value={mockContextValues}>
+            <Identifiers />
+          </PatientRegistrationContextProvider>
+        </Form>
+      </Formik>,
+      ResourcesContextProvider,
+      mockResourcesContextValue,
+    );
+
+    const configureButton = screen.getByRole('button', { name: 'Configure' });
+    await user.click(configureButton);
+
+    expect(screen.getByRole('button', { name: 'Close overlay' })).toBeInTheDocument();
+  });
+});
+
+describe('setIdentifierSource', () => {
+  describe('auto-generation', () => {
+    it('should return auto-generated as the identifier value', () => {
+      const identifierSource = { autoGenerationOption: { automaticGenerationEnabled: true } } as IdentifierSource;
+      const { identifierValue } = setIdentifierSource(identifierSource, '', '');
+      expect(identifierValue).toBe('auto-generated');
+    });
+
+    it('should return the identifier value when manual entry enabled', () => {
+      const identifierSource = {
+        autoGenerationOption: { automaticGenerationEnabled: true, manualEntryEnabled: true },
+      } as IdentifierSource;
+      const { identifierValue } = setIdentifierSource(identifierSource, '10001V', '');
+      expect(identifierValue).toBe('10001V');
+    });
+  });
+});

package/src/patient-registration/field/id/identifier-selection-overlay.component.tsx

@@ -1,16 +1,16 @@
-import React, { useMemo, useCallback, useEffect, useState, useContext } from 'react';
+import React, { useMemo, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, ButtonSet, Checkbox, Search, RadioButtonGroup, RadioButton } from '@carbon/react';
 import { isDesktop, useConfig, useLayoutType } from '@openmrs/esm-framework';
 import { type FormValues, type PatientIdentifierType, PatientIdentifierValue } from '../../patient-registration.types';
-import Overlay from '../../ui-components/overlay/overlay.component';
-import { ResourcesContext } from '../../../offline.resources';
-import { PatientRegistrationContext } from '../../patient-registration-context';
+import { usePatientRegistrationContext } from '../../patient-registration-context';
 import {
   isUniqueIdentifierTypeForOffline,
   shouldBlockPatientIdentifierInOfflineMode,
 } from '../../input/custom-input/identifier/utils';
 import { initializeIdentifier, setIdentifierSource } from './id-field.component';
+import { useResourcesContext } from '../../../resources-context';
+import Overlay from '../../ui-components/overlay/overlay.component';
 import styles from './identifier-selection.scss';
 
 interface PatientIdentifierOverlayProps {
@@ -20,12 +20,13 @@ interface PatientIdentifierOverlayProps {
 
 const PatientIdentifierOverlay: React.FC<PatientIdentifierOverlayProps> = ({ closeOverlay, setFieldValue }) => {
   const layout = useLayoutType();
-  const { identifierTypes } = useContext(ResourcesContext);
-  const { isOffline, values, initialFormValues } = useContext(PatientRegistrationContext);
+  const { identifierTypes } = useResourcesContext();
+  const { isOffline, values, initialFormValues } = usePatientRegistrationContext();
   const [unsavedIdentifierTypes, setUnsavedIdentifierTypes] = useState<FormValues['identifiers']>(values.identifiers);
-  const [searchString, setSearchString] = useState<string>('');
+  const [searchString, setSearchString] = useState('');
   const { t } = useTranslation();
   const { defaultPatientIdentifierTypes } = useConfig();
+
   const defaultPatientIdentifierTypesMap = useMemo(() => {
     const map = {};
     defaultPatientIdentifierTypes?.forEach((typeUuid) => {
@@ -69,7 +70,7 @@ const PatientIdentifierOverlay: React.FC<PatientIdentifierOverlayProps> = ({ clo
     [initialFormValues.identifiers, values.identifiers],
   );
 
-  const handleSelectingIdentifierSource = (identifierType: PatientIdentifierType, sourceUuid) =>
+  const handleSelectingIdentifierSource = (identifierType: PatientIdentifierType, sourceUuid) => {
     setUnsavedIdentifierTypes((unsavedIdentifierTypes) => ({
       ...unsavedIdentifierTypes,
       [identifierType.fieldName]: {
@@ -81,6 +82,7 @@ const PatientIdentifierOverlay: React.FC<PatientIdentifierOverlayProps> = ({ clo
         ),
       },
     }));
+  };
 
   const identifierTypeFields = useMemo(
     () =>
@@ -107,11 +109,11 @@ const PatientIdentifierOverlay: React.FC<PatientIdentifierOverlayProps> = ({ clo
             />
             {patientIdentifier &&
               identifierType?.identifierSources?.length > 0 &&
-              /* 
+              /*
                 This check are for the cases when there's an initialValue identifier is assigned
                 to the patient
                 The corresponding flow is like:
-                1. If there's no change to the actual initial identifier, then the source remains null, 
+                1. If there's no change to the actual initial identifier, then the source remains null,
                 hence the list of the identifier sources shouldn't be displayed.
                 2. If user wants to edit the patient identifier's value, hence there will be an initialValue,
                 along with a source assigned to itself(only if the identifierType has sources, else there's nothing to worry about), which by

package/src/patient-registration/field/id/identifier-selection.scss

@@ -1,8 +1,8 @@
-@use '@carbon/styles/scss/spacing';
-@import '../../patient-registration.scss';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .button {
-  height: 4rem;
+  height: layout.$spacing-10;
   display: flex;
   align-content: flex-start;
   align-items: baseline;
@@ -10,28 +10,32 @@
 }
 
 .tablet {
-  padding: 1.5rem 1rem;
+  padding: layout.$spacing-06 layout.$spacing-05;
   background-color: $ui-02;
 }
 
 .desktop {
-  padding: 0rem;
+  padding: 0;
 }
 
 .radioGroup {
   background-color: $ui-01;
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
 }
 
 .radioButton {
   margin: 0 !important;
   label {
-    height: spacing.$spacing-07;
+    height: layout.$spacing-07;
   }
 }
 
+.space05 {
+  margin: layout.$spacing-05 0;
+}
+
 :global(.omrs-breakpoint-lt-desktop) {
   .radioButton label {
-    height: spacing.$spacing-09 !important;
+    height: layout.$spacing-09 !important;
   }
 }

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

@@ -1,12 +1,12 @@
-import React, { useCallback, useContext } from 'react';
+import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ContentSwitcher, Switch } from '@carbon/react';
 import { useField } from 'formik';
 import { ExtensionSlot, useConfig } from '@openmrs/esm-framework';
+import { type RegistrationConfig } from '../../../config-schema';
+import { usePatientRegistrationContext } from '../../patient-registration-context';
 import { Input } from '../../input/basic-input/input/input.component';
-import { PatientRegistrationContext } from '../../patient-registration-context';
 import styles from '../field.scss';
-import { type RegistrationConfig } from '../../../config-schema';
 
 export const unidentifiedPatientAttributeTypeUuid = '8b56eac7-5c76-4b9c-8c6f-1deab8d3fc47';
 const containsNoNumbers = /^([^0-9]*)$/;
@@ -21,7 +21,8 @@ function checkNumber(value: string) {
 
 export const NameField = () => {
   const { t } = useTranslation();
-  const { setCapturePhotoProps, currentPhoto, setFieldValue } = useContext(PatientRegistrationContext);
+  const { setCapturePhotoProps, currentPhoto, setFieldValue, setFieldTouched } = usePatientRegistrationContext();
+
   const {
     fieldConfigurations: {
       name: {
@@ -48,9 +49,10 @@ export const NameField = () => {
           imageData: dataUri,
           dateTime: photoDateTime,
         });
+        setFieldTouched('photo', true, false);
       }
     },
-    [setCapturePhotoProps],
+    [setCapturePhotoProps, setFieldTouched],
   );
 
   const toggleNameKnown = (e) => {
@@ -63,6 +65,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/field/obs/obs-field.component.tsx

@@ -3,11 +3,12 @@ import classNames from 'classnames';
 import { Field } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { InlineNotification, Layer, Select, SelectItem } from '@carbon/react';
-import { useConfig } from '@openmrs/esm-framework';
+import { OpenmrsDatePicker, useConfig } from '@openmrs/esm-framework';
 import { type ConceptResponse } from '../../patient-registration.types';
 import { type FieldDefinition, type RegistrationConfig } from '../../../config-schema';
 import { Input } from '../../input/basic-input/input/input.component';
 import { useConcept, useConceptAnswers } from '../field.resource';
+import { usePatientRegistrationContext } from '../../patient-registration-context';
 import styles from './../field.scss';
 
 export interface ObsFieldProps {
@@ -17,7 +18,6 @@ export interface ObsFieldProps {
 export function ObsField({ fieldDefinition }: ObsFieldProps) {
   const { t } = useTranslation();
   const { data: concept, isLoading } = useConcept(fieldDefinition.uuid);
-
   const config = useConfig<RegistrationConfig>();
 
   if (!config.registrationObs.encounterTypeUuid) {
@@ -51,6 +51,16 @@ export function ObsField({ fieldDefinition }: ObsFieldProps) {
           required={fieldDefinition.validation.required}
         />
       );
+    case 'Date':
+      return (
+        <DateObsField
+          concept={concept}
+          label={fieldDefinition.label}
+          required={fieldDefinition.validation.required}
+          allowPastDates={fieldDefinition.allowPastDates}
+          allowFutureDates={fieldDefinition.allowFutureDates}
+        />
+      );
     case 'Coded':
       return (
         <CodedObsField
@@ -145,6 +155,53 @@ function NumericObsField({ concept, label, required }: NumericObsFieldProps) {
   );
 }
 
+interface DateObsFieldProps {
+  concept: ConceptResponse;
+  label: string;
+  required?: boolean;
+  allowPastDates?: boolean;
+  allowFutureDates?: boolean;
+}
+
+function DateObsField({ concept, label, required, allowPastDates, allowFutureDates }: DateObsFieldProps) {
+  const { t } = useTranslation();
+  const fieldName = `obs.${concept.uuid}`;
+  const { setFieldValue } = usePatientRegistrationContext();
+  const futureDatesAllowed = allowFutureDates ?? true;
+  const pastDatesAllowed = allowPastDates ?? true;
+
+  const onDateChange = (date: Date) => {
+    setFieldValue(fieldName, date);
+  };
+
+  return (
+    <Layer>
+      <div className={styles.dobField}>
+        <Field name={fieldName}>
+          {({ field, form: { touched, errors }, meta }) => {
+            return (
+              <>
+                <OpenmrsDatePicker
+                  id={fieldName}
+                  {...field}
+                  isRequired={required}
+                  onChange={onDateChange}
+                  labelText={label ?? concept.display}
+                  isInvalid={errors[fieldName] && touched[fieldName]}
+                  invalidText={t(meta.error)}
+                  value={field.value}
+                  minDate={!pastDatesAllowed ? new Date() : undefined}
+                  maxDate={!futureDatesAllowed ? new Date() : undefined}
+                />
+              </>
+            );
+          }}
+        </Field>
+      </div>
+    </Layer>
+  );
+}
+
 interface CodedObsFieldProps {
   concept: ConceptResponse;
   answerConceptSetUuid?: string;