@kenyaemr/esm-patient-registration-app 5.2.1 → 5.2.3

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":"patientPhoto","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}],"version":"5.2.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":"patientPhoto","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}],"version":"5.2.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-patient-registration-app",
-  "version": "5.2.1",
+  "version": "5.2.3",
   "description": "Patient registration microfrontend for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-patient-registration-app.js",
   "main": "src/index.ts",
@@ -38,10 +38,11 @@
   },
   "dependencies": {
     "@carbon/react": "^1.12.0",
+    "core-js-pure": "^3.34.0",
     "formik": "^2.1.5",
     "geopattern": "^1.2.3",
     "lodash-es": "^4.17.15",
-    "react-avatar": "^4.0.0",
+    "react-avatar": "^5.0.3",
     "uuid": "^8.3.2",
     "yup": "^0.29.1"
   },

package/src/add-patient-link.test.tsx

@@ -1,18 +1,20 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import * as esmFramework from '@openmrs/esm-framework';
+import userEvent from '@testing-library/user-event';
+import { render } from '@testing-library/react';
+import { navigate } from '@openmrs/esm-framework';
 import Root from './add-patient-link';
 
+const mockedNavigate = navigate as jest.Mock;
+
 describe('Add patient link component', () => {
-  it('renders an "Add Patient" button and triggers navigation on click', () => {
-    const navigateMock = jest.fn();
-    jest.spyOn(esmFramework, 'navigate').mockImplementation(navigateMock);
+  it('renders an "Add Patient" button and triggers navigation on click', async () => {
+    const user = userEvent.setup();
 
     const { getByRole } = render(<Root />);
     const addButton = getByRole('button', { name: /add patient/i });
 
-    fireEvent.click(addButton);
+    await user.click(addButton);
 
-    expect(navigateMock).toHaveBeenCalledWith({ to: '${openmrsSpaBase}/patient-registration' });
+    expect(mockedNavigate).toHaveBeenCalledWith({ to: '${openmrsSpaBase}/patient-registration' });
   });
 });

package/src/config-schema.ts

@@ -11,14 +11,14 @@ export interface FieldDefinition {
   type: string;
   label?: string;
   uuid: string;
-  placeholder: string;
+  placeholder?: string;
   showHeading: boolean;
-  validation: {
+  validation?: {
     required: boolean;
     matches?: string;
   };
   answerConceptSetUuid?: string;
-  customConceptAnswers: Array<CustomConceptAnswer>;
+  customConceptAnswers?: Array<CustomConceptAnswer>;
 }
 export interface CustomConceptAnswer {
   uuid: string;
@@ -27,7 +27,6 @@ export interface CustomConceptAnswer {
 export interface Gender {
   label?: string;
   value: string;
-  id: string;
 }
 
 export interface RegistrationConfig {
@@ -59,6 +58,9 @@ export interface RegistrationConfig {
         month: number;
       };
     };
+    phone: {
+      personAttributeUuid: string;
+    };
   };
   links: {
     submitButton: string;
@@ -85,7 +87,8 @@ export const builtInSections: Array<SectionDefinition> = [
   { id: 'relationships', name: 'Relationships', fields: [] },
 ];
 
-export const builtInFields = ['name', 'gender', 'dob', 'address', 'id', 'phone & email'] as const;
+// These fields are handled specially in field.component.tsx
+export const builtInFields = ['name', 'gender', 'dob', 'id', 'address', 'phone'] as const;
 
 export const esmPatientRegistrationSchema = {
   sections: {
@@ -133,7 +136,7 @@ export const esmPatientRegistrationSchema = {
       type: {
         _type: Type.String,
         _description: "How this field's data will be stored—a person attribute or an obs.",
-        // _validators: [validators.oneOf(['person attribute', 'obs'])],
+        _validators: [validators.oneOf(['person attribute', 'obs'])],
       },
       uuid: {
         _type: Type.UUID,
@@ -182,20 +185,12 @@ export const esmPatientRegistrationSchema = {
           },
         },
         _default: [],
-        _description: 'For coded questions only. Provide ability to add custom concept answers.',
+        _description:
+          'For coded questions only (obs or person attrbute). A list of custom concept answers. Overrides answers that come from the obs concept or from `answerSetConceptUuid`.',
       },
     },
-    _default: [
-      {
-        id: 'phone',
-        type: 'person attribute',
-        uuid: '14d4f066-15f5-102d-96e4-000c29c2a5d7',
-        showHeading: false,
-        validation: {
-          matches: '',
-        },
-      },
-    ],
+    // Do not add fields here. If you want to add a field in code, add it to built-in fields above.
+    _default: [],
     _description:
       'Definitions for custom fields that can be used in sectionDefinitions. Can also be used to override built-in fields.',
   },
@@ -233,42 +228,33 @@ export const esmPatientRegistrationSchema = {
       _elements: {
         value: {
           _type: Type.String,
-          _description: 'The value for sex option',
+          _description:
+            'Value that will be sent to the server. Limited to FHIR-supported values for Administrative Gender',
+          _validators: [validators.oneOf(['male', 'female', 'other', 'unknown'])],
         },
         label: {
           _type: Type.String,
           _default: null,
-          _description: 'The label displayed for sex option.',
-        },
-        id: {
-          _type: Type.String,
-          _default: null,
-          _description: 'The id for sex option.',
+          _description:
+            'The label displayed for the sex option, if it should be different from the value (the value will be translated; the English "translation" is upper-case).',
         },
       },
       _default: [
         {
-          id: 'male',
-          value: 'Male',
-          label: 'Male',
+          value: 'male',
         },
         {
-          id: 'female',
-          value: 'Female',
-          label: 'Female',
+          value: 'female',
         },
         {
-          id: 'other',
-          value: 'Other',
-          label: 'Other',
+          value: 'other',
         },
         {
-          id: 'unknown',
-          value: 'Unknown',
-          label: 'Unknown',
+          value: 'unknown',
         },
       ],
-      _description: 'Provide ability to configure sex options.',
+      _description:
+        'The options for sex selection during patient registration. This is Administrative Gender as it is called by FHIR (Possible options are limited to those defined in FHIR Administrative Gender, see https://hl7.org/fhir/R4/valueset-administrative-gender.html).',
     },
     address: {
       useAddressHierarchy: {
@@ -320,6 +306,13 @@ export const esmPatientRegistrationSchema = {
         },
       },
     },
+    phone: {
+      personAttributeUuid: {
+        _type: Type.UUID,
+        _default: '14d4f066-15f5-102d-96e4-000c29c2a5d7',
+        _description: 'The UUID of the phone number person attribute type',
+      },
+    },
   },
   links: {
     submitButton: {

package/src/constants.ts

@@ -1,4 +1,4 @@
-import { omrsOfflineCachingStrategyHttpHeaderName, OmrsOfflineHttpHeaders } from '@openmrs/esm-framework';
+import { omrsOfflineCachingStrategyHttpHeaderName, type OmrsOfflineHttpHeaders } from '@openmrs/esm-framework';
 
 export const personRelationshipRepresentation =
   'custom:(display,uuid,' +

package/src/offline.resources.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import find from 'lodash-es/find';
 import camelCase from 'lodash-es/camelCase';
 import escapeRegExp from 'lodash-es/escapeRegExp';
-import { getConfig, messageOmrsServiceWorker, openmrsFetch, Session } from '@openmrs/esm-framework';
+import { getConfig, messageOmrsServiceWorker, openmrsFetch, type Session } from '@openmrs/esm-framework';
 import type {
   PatientIdentifierType,
   FetchedPatientIdentifierType,

package/src/offline.ts

@@ -4,7 +4,7 @@ import {
   navigate,
   setupDynamicOfflineDataHandler,
   setupOfflineSync,
-  SyncProcessOptions,
+  type SyncProcessOptions,
 } from '@openmrs/esm-framework';
 import { patientRegistration, personRelationshipRepresentation } from './constants';
 import {
@@ -15,7 +15,7 @@ import {
   fetchPatientIdentifierTypesWithSources,
 } from './offline.resources';
 import { FormManager } from './patient-registration/form-manager';
-import { PatientRegistration } from './patient-registration/patient-registration.types';
+import { type PatientRegistration } from './patient-registration/patient-registration.types';
 
 export function setupOffline() {
   setupOfflineSync(patientRegistration, [], syncPatientRegistration, {

package/src/patient-registration/before-save-prompt.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import type React from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { showModal, navigate } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 

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

@@ -1,4 +1,4 @@
-import { ConceptResponse } from '../../patient-registration.types';
+import { type ConceptResponse } from '../../patient-registration.types';
 
 export const useConcept = jest.fn(function mockUseConceptImplementation(uuid: string): {
   data: ConceptResponse;

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

@@ -2,13 +2,13 @@ import React, { useEffect, useState, useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ResourcesContext } from '../../../offline.resources';
 import { SkeletonText, InlineNotification } from '@carbon/react';
-import styles from '../field.scss';
 import { Input } from '../../input/basic-input/input/input.component';
-import { useConfig } from '@openmrs/esm-framework';
-import AddressSearchComponent from './address-search.component';
+import { useConfig, useConnectivity } from '@openmrs/esm-framework';
 import { PatientRegistrationContext } from '../../patient-registration-context';
 import { useOrderedAddressHierarchyLevels } from './address-hierarchy.resource';
 import AddressHierarchyLevels from './address-hierarchy-levels.component';
+import AddressSearchComponent from './address-search.component';
+import styles from '../field.scss';
 
 function parseString(xmlDockAsString: string) {
   const parser = new DOMParser();
@@ -38,6 +38,7 @@ export const AddressComponent: React.FC = () => {
 
   const { t } = useTranslation();
   const config = useConfig();
+  const isOnline = useConnectivity();
   const {
     fieldConfigurations: {
       address: {
@@ -77,7 +78,7 @@ export const AddressComponent: React.FC = () => {
     );
   }
 
-  if (!addressHierarchyEnabled) {
+  if (!addressHierarchyEnabled || !isOnline) {
     return (
       <AddressComponentContainer>
         {addressLayout.map((attributes, index) => (

package/src/patient-registration/field/address/address-hierarchy.resource.tsx

@@ -1,7 +1,7 @@
-import { type FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
-import { useField } from 'formik';
 import { useCallback, useContext, useEffect, useMemo } from 'react';
+import { useField } from 'formik';
 import useSWRImmutable from 'swr/immutable';
+import { type FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
 import { PatientRegistrationContext } from '../../patient-registration-context';
 
 interface AddressFields {

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

@@ -66,26 +66,13 @@ const AddressSearchComponent: React.FC<AddressSearchComponentProps> = ({ address
         labelText={t('searchAddress', 'Search address')}
         placeholder={t('searchAddress', 'Search address')}
         ref={searchBox}
-        helperText={
-          searchString
-            ? isLoading
-              ? t('loadingResults', 'Loading results')
-              : error
-              ? error.message
-              : addresses?.length === 0
-              ? t('noResultsFound', 'No results found')
-              : null
-            : null
-        }
         value={searchString}
       />
       {addressOptions.length > 0 && (
         /* Since the input has a marginBottom of 1rem */
         <ul className={styles.suggestions}>
           {addressOptions.map((address, index) => (
-            <li //eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
-              key={index}
-              onClick={(e) => handleChange(address)}>
+            <li key={index} onClick={(e) => handleChange(address)}>
               {address}
             </li>
           ))}

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

@@ -4,7 +4,7 @@ import { Field } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { Input } from '../../input/basic-input/input/input.component';
 import styles from '../field.scss';
-import { FieldDefinition } from '../../../config-schema';
+import { type FieldDefinition } from '../../../config-schema';
 
 export interface AddressFieldProps {
   fieldDefinition: FieldDefinition;

package/src/patient-registration/field/address/tests/address-hierarchy.test.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import { cleanup, render, screen } from '@testing-library/react';
 import { AddressComponent } from '../address-field.component';
 import { Formik, Form } from 'formik';
-import { Resources, ResourcesContext } from '../../../../offline.resources';
+import { type Resources, ResourcesContext } from '../../../../offline.resources';
 import { PatientRegistrationContext } from '../../../patient-registration-context';
 import { useConfig } from '@openmrs/esm-framework';
 import { useOrderedAddressHierarchyLevels } from '../address-hierarchy.resource';
-import { mockedAddressTemplate, mockedOrderedFields } from './mocks';
+import { mockedAddressTemplate, mockedOrderedFields } from '__mocks__';
 
 // Mocking the AddressSearchComponent
 jest.mock('../address-search.component', () => jest.fn(() => <div data-testid="address-search-bar" />));
@@ -31,7 +31,7 @@ jest.mock('../address-hierarchy.resource', () => ({
 
 async function renderAddressHierarchy(addressTemplate = mockedAddressTemplate) {
   await render(
-    <ResourcesContext.Provider value={{ addressTemplate } as Resources}>
+    <ResourcesContext.Provider value={{ addressTemplate } as unknown as Resources}>
       <Formik initialValues={{}} onSubmit={null}>
         <Form>
           <PatientRegistrationContext.Provider value={{ setFieldValue: jest.fn() } as any}>

package/src/patient-registration/field/address/tests/address-search-component.test.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 import { Formik, Form, useFormikContext } from 'formik';
-import { Resources, ResourcesContext } from '../../../../offline.resources';
+import { type Resources, ResourcesContext } from '../../../../offline.resources';
 import { PatientRegistrationContext } from '../../../patient-registration-context';
 import { useConfig } from '@openmrs/esm-framework';
 import { useAddressHierarchy, useOrderedAddressHierarchyLevels } from '../address-hierarchy.resource';
-import { mockedAddressTemplate, mockedAddressOptions, mockedOrderedFields } from './mocks';
+import { mockedAddressTemplate, mockedAddressOptions, mockedOrderedFields } from '__mocks__';
 import AddressSearchComponent from '../address-search.component';
-import userEvent from '@testing-library/user-event';
 
 useAddressHierarchy;
 jest.mock('@openmrs/esm-framework', () => ({
@@ -60,7 +60,6 @@ const setFieldValue = jest.fn();
 
 describe('Testing address search bar', () => {
   beforeEach(() => {
-    cleanup();
     (useConfig as jest.Mock).mockImplementation(() => ({
       fieldConfigurations: {
         address: {
@@ -88,23 +87,31 @@ describe('Testing address search bar', () => {
       error: null,
       isLoading: false,
     }));
+
     renderAddressHierarchy();
+
     const searchbox = screen.getByRole('searchbox');
     expect(searchbox).toBeInTheDocument();
+
     const ul = screen.queryByRole('list');
     expect(ul).not.toBeInTheDocument();
   });
 
   it("should render only the results for the search term matched address' parents", async () => {
+    const user = userEvent.setup();
+
     (useAddressHierarchy as jest.Mock).mockImplementation(() => ({
       addresses: mockedAddressOptions,
       error: null,
       isLoading: false,
     }));
+
     renderAddressHierarchy();
+
     const searchString = 'nea';
     const separator = ' > ';
     const options: Set<string> = new Set();
+
     mockedAddressOptions.forEach((address) => {
       const values = address.split(separator);
       values.forEach((val, index) => {
@@ -118,10 +125,10 @@ describe('Testing address search bar', () => {
     addressOptions.forEach(async (address) => {
       const optionElement = screen.getByText(address);
       expect(optionElement).toBeInTheDocument();
-      fireEvent.click(optionElement);
+      await user.click(optionElement);
       const values = address.split(separator);
       allFields.map(({ name }, index) => {
-        waitFor(() => expect(setFieldValue).toBeCalledWith(`address.${name}`, values?.[index]));
+        expect(setFieldValue).toHaveBeenCalledWith(`address.${name}`, values?.[index]);
       });
     });
   });

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

@@ -1,6 +1,6 @@
 import { useConfig } from '@openmrs/esm-framework';
 import React from 'react';
-import { RegistrationConfig } from '../../config-schema';
+import { type RegistrationConfig } from '../../config-schema';
 import { AddressField } from './address/custom-address-field.component';
 import { ObsField } from './obs/obs-field.component';
 import { PersonAttributeField } from './person-attributes/person-attribute-field.component';

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

@@ -1,11 +1,11 @@
-import React, { ChangeEvent, useCallback, useContext } from 'react';
+import React, { type ChangeEvent, useCallback, useContext } from 'react';
 import { ContentSwitcher, DatePicker, DatePickerInput, 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 { RegistrationConfig } from '../../../config-schema';
+import { type RegistrationConfig } from '../../../config-schema';
 import styles from '../field.scss';
 
 const calcBirthdate = (yearDelta, monthDelta, dateOfBirth) => {

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

@@ -2,8 +2,6 @@ import React from 'react';
 import { Formik, Form } from 'formik';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom/extend-expect';
-import '@testing-library/jest-dom';
 import { DobField } from './dob.component';
 import { PatientRegistrationContext } from '../../patient-registration-context';
 import { initialFormValues } from '../../patient-registration.component';
@@ -62,7 +60,6 @@ function renderDob() {
             identifierTypes: [],
             values: formValues,
             validationSchema: null,
-            setValidationSchema: (value) => {},
             inEditMode: false,
             setFieldValue: () => {},
             setCapturePhotoProps: (value) => {},

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

@@ -4,9 +4,10 @@ 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, RegistrationConfig } from '../../config-schema';
+import { builtInFields, type RegistrationConfig } from '../../config-schema';
 import { CustomField } from './custom-field.component';
 import { AddressComponent } from './address/address-field.component';
+import { PhoneField } from './phone/phone-field.component';
 
 export interface FieldProps {
   name: string;
@@ -38,6 +39,8 @@ export function Field({ name }: FieldProps) {
       return <AddressComponent />;
     case 'id':
       return <Identifiers />;
+    case 'phone':
+      return <PhoneField />;
     default:
       return <CustomField name={name} />;
   }

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

@@ -1,6 +1,6 @@
-import { FetchResponse, openmrsFetch, showSnackbar } from '@openmrs/esm-framework';
+import { type FetchResponse, openmrsFetch, showSnackbar } from '@openmrs/esm-framework';
 import useSWRImmutable from 'swr/immutable';
-import { ConceptAnswers, ConceptResponse } from '../patient-registration.types';
+import { type ConceptAnswers, type ConceptResponse } from '../patient-registration.types';
 
 export function useConcept(conceptUuid: string): { data: ConceptResponse; isLoading: boolean } {
   const shouldFetch = typeof conceptUuid === 'string' && conceptUuid !== '';