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

package/src/offline.resources.ts

@@ -2,12 +2,16 @@ import React from 'react';
 import find from 'lodash-es/find';
 import camelCase from 'lodash-es/camelCase';
 import escapeRegExp from 'lodash-es/escapeRegExp';
-import { FetchResponse, messageOmrsServiceWorker, openmrsFetch, Session } from '@openmrs/esm-framework';
-import { PatientIdentifierType, FetchedPatientIdentifierType } from './patient-registration/patient-registration-types';
+import { messageOmrsServiceWorker, openmrsFetch, Session } from '@openmrs/esm-framework';
+import type {
+  PatientIdentifierType,
+  FetchedPatientIdentifierType,
+  AddressTemplate,
+} from './patient-registration/patient-registration.types';
 import { cacheForOfflineHeaders } from './constants';
 
 export interface Resources {
-  addressTemplate: any;
+  addressTemplate: AddressTemplate;
   currentSession: Session;
   relationshipTypes: any;
   identifierTypes: Array<PatientIdentifierType>;
@@ -21,7 +25,7 @@ export async function fetchCurrentSession(): Promise<Session> {
 }
 
 export async function fetchAddressTemplate() {
-  const { data } = await cacheAndFetch('/ws/rest/v1/systemsetting?q=layout.address.format&v=custom:(value)');
+  const { data } = await cacheAndFetch<AddressTemplate>('/ws/rest/v1/addresstemplate');
   return data;
 }
 

package/src/offline.ts

@@ -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 { PatientRegistration } from './patient-registration/patient-registration.types';
 
 export function setupOffline() {
   setupOfflineSync(patientRegistration, [], syncPatientRegistration, {

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

@@ -1,4 +1,4 @@
-import { ConceptResponse } from '../../patient-registration-types';
+import { 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

@@ -14,87 +14,44 @@ function parseString(xmlDockAsString: string) {
   const parser = new DOMParser();
   return parser.parseFromString(xmlDockAsString, 'text/xml');
 }
-function getTagAsDocument(tagName: string, template: XMLDocument) {
-  const tmp = template.getElementsByTagName(tagName)[0];
-  return tmp ? parseString(tmp.outerHTML) : parseString('');
-}
 
 export const AddressComponent: React.FC = () => {
   const [selected, setSelected] = useState('');
-  const [addressLayout, setAddressLayout] = useState<
-    Array<{
-      id: string;
-      name: string;
-      value: string;
-      label: string;
-    }>
-  >([]);
-  const { t } = useTranslation();
   const { addressTemplate } = useContext(ResourcesContext);
-  const addressTemplateXml = addressTemplate?.results[0].value;
-  const setSelectedValue = (value: string) => {
-    setSelected(value);
-  };
+  const addressLayout = useMemo(() => {
+    if (!addressTemplate?.lines) {
+      return [];
+    }
+    const allFields = addressTemplate?.lines?.flat();
+    const fields = allFields?.filter(({ isToken }) => isToken === 'IS_ADDR_TOKEN');
+
+    return fields.map(({ displayText, codeName }) => ({
+      id: codeName,
+      name: codeName,
+      label: displayText,
+    }));
+  }, [addressTemplate]);
+
+  const { t } = useTranslation();
   const config = useConfig();
   const {
     fieldConfigurations: {
       address: {
-        useAddressHierarchy: { enabled, useQuickSearch, searchAddressByLevel },
+        useAddressHierarchy: { enabled: addressHierarchyEnabled, useQuickSearch, searchAddressByLevel },
       },
     },
   } = config;
 
-  const { setFieldValue, values, setInitialFormValues } = useContext(PatientRegistrationContext);
+  const { setFieldValue } = useContext(PatientRegistrationContext);
   const { orderedFields, isLoadingFieldOrder, errorFetchingFieldOrder } = useOrderedAddressHierarchyLevels();
 
   useEffect(() => {
-    const templateXmlDoc = parseString(addressTemplateXml);
-    const elementDefaults = getTagAsDocument('elementDefaults', templateXmlDoc);
-    const defaultValuesEntries = elementDefaults.getElementsByTagName('entry');
-    const defaultValues = Object.fromEntries(
-      Array.prototype.map.call(defaultValuesEntries, (entry: Element) => {
-        const [name, value] = Array.from(entry.getElementsByTagName('string'));
-        return [name.innerHTML, value.innerHTML];
-      }),
-    );
-    const nameMappings = getTagAsDocument('nameMappings', templateXmlDoc);
-    const properties =
-      Array.from(nameMappings.getElementsByTagName('property')).length > 0
-        ? nameMappings.getElementsByTagName('property')
-        : nameMappings.getElementsByTagName('entry');
-
-    const propertiesObj = Array.prototype.map.call(properties, (property: Element) => {
-      const name = property.getAttribute('name') ?? property.getElementsByTagName('string')[0].innerHTML;
-      const label = property.getAttribute('value') ?? property.getElementsByTagName('string')[1].innerHTML;
-      /*
-        DO NOT REMOVE THIS COMMENT UNLESS YOU UNDERSTAND WHY IT IS HERE
-
-        t('postalCode', 'Postal code')
-        t('address1', 'Address line 1')
-        t('address2', 'Address line 2')
-        t('countyDistrict', 'District')
-        t('stateProvince', 'State')
-        t('cityVillage', 'city')
-        t('country', 'Country')
-        t('countyDistrict', 'District')
-      */
-      const value = defaultValues[name];
-      setInitialFormValues((initialFormValues) => ({
-        ...initialFormValues,
-        address: {
-          ...(initialFormValues.address ?? {}),
-          [name]: value,
-        },
-      }));
-      return {
-        id: name,
-        name,
-        value,
-        label,
-      };
-    });
-    setAddressLayout(propertiesObj);
-  }, [t, addressTemplateXml, setFieldValue, values, setInitialFormValues]);
+    if (addressTemplate?.elementDefaults) {
+      Object.entries(addressTemplate.elementDefaults).forEach(([name, defaultValue]) => {
+        setFieldValue(`address.${name}`, defaultValue);
+      });
+    }
+  }, [addressTemplate, setFieldValue]);
 
   const orderedAddressFields = useMemo(() => {
     if (isLoadingFieldOrder || errorFetchingFieldOrder) {
@@ -116,7 +73,7 @@ export const AddressComponent: React.FC = () => {
     );
   }
 
-  if (!enabled) {
+  if (!addressHierarchyEnabled) {
     return (
       <AddressComponentContainer>
         {addressLayout.map((attributes, index) => (
@@ -125,7 +82,6 @@ export const AddressComponent: React.FC = () => {
             name={`address.${attributes.name}`}
             labelText={t(attributes.label)}
             id={attributes.name}
-            setSelectedValue={setSelectedValue}
             selected={selected}
           />
         ))}
@@ -166,7 +122,6 @@ export const AddressComponent: React.FC = () => {
             name={`address.${attributes.name}`}
             labelText={t(attributes.label)}
             id={attributes.name}
-            setSelectedValue={setSelectedValue}
             selected={selected}
           />
         ))
@@ -188,4 +143,4 @@ const AddressComponentContainer = ({ children }) => {
       </div>
     </div>
   );
-};
+};

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

@@ -1,9 +1,8 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAddressEntries, useAddressEntryFetchConfig } from './address-hierarchy.resource';
 import { useField } from 'formik';
 import ComboInput from '../../input/combo-input/combo-input.component';
-import { InlineNotification } from '@carbon/react';
 
 interface AddressHierarchyLevelsProps {
   orderedAddressFields: Array<any>;
@@ -34,22 +33,25 @@ interface AddressComboBoxProps {
 
 const AddressComboBox: React.FC<AddressComboBoxProps> = ({ attribute }) => {
   const { t } = useTranslation();
-  const [field, meta, helpers] = useField(`address.${attribute.name}`);
+  const [field, meta, { setValue }] = useField(`address.${attribute.name}`);
   const { fetchEntriesForField, searchString, updateChildElements } = useAddressEntryFetchConfig(attribute.name);
   const { entries } = useAddressEntries(fetchEntriesForField, searchString);
 
-  const handleInputChange = useCallback((newValue) => {
-    helpers.setValue(newValue);
-  }, []);
+  const handleInputChange = useCallback(
+    (newValue) => {
+      setValue(newValue);
+    },
+    [setValue],
+  );
 
   const handleSelection = useCallback(
     (selectedItem) => {
       if (meta.value !== selectedItem) {
-        helpers.setValue(selectedItem);
+        setValue(selectedItem);
         updateChildElements();
       }
     },
-    [updateChildElements, helpers.setValue],
+    [updateChildElements, meta.value, setValue],
   );
 
   return (
@@ -60,7 +62,7 @@ const AddressComboBox: React.FC<AddressComboBoxProps> = ({ attribute }) => {
       fieldProps={{
         ...field,
         id: attribute.name,
-        labelText: `${attribute.label} (${t('optional', 'optional')})`,
+        labelText: `${t(attribute.label)} (${t('optional', 'optional')})`,
       }}
       handleInputChange={handleInputChange}
     />

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

@@ -1,4 +1,4 @@
-import { FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
+import { type FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
 import { useField } from 'formik';
 import { useCallback, useContext, useEffect, useMemo } from 'react';
 import useSWRImmutable from 'swr/immutable';
@@ -10,7 +10,7 @@ interface AddressFields {
 
 export function useOrderedAddressHierarchyLevels() {
   const url = '/module/addresshierarchy/ajax/getOrderedAddressHierarchyLevels.form';
-  const { data, isLoading, error } = useSWRImmutable<FetchResponse<Array<AddressFields>>>(url, openmrsFetch);
+  const { data, isLoading, error } = useSWRImmutable<FetchResponse<Array<AddressFields>>, Error>(url, openmrsFetch);
 
   const results = useMemo(
     () => ({
@@ -56,7 +56,7 @@ export function useAddressEntries(fetchResults, searchString) {
  * This also returns the function to reset the lower ordered fields if the value of a field is changed.
  */
 export function useAddressEntryFetchConfig(addressField: string) {
-  const { orderedFields, isLoadingFieldOrder, errorFetchingFieldOrder } = useOrderedAddressHierarchyLevels();
+  const { orderedFields, isLoadingFieldOrder } = useOrderedAddressHierarchyLevels();
   const { setFieldValue } = useContext(PatientRegistrationContext);
   const [, { value: addressValues }] = useField('address');
 
@@ -101,3 +101,57 @@ export function useAddressEntryFetchConfig(addressField: string) {
 
   return results;
 }
+
+export function useAddressHierarchy(searchString: string, separator: string) {
+  const { data, error, isLoading } = useSWRImmutable<
+    FetchResponse<
+      Array<{
+        address: string;
+      }>
+    >,
+    Error
+  >(
+    searchString
+      ? `/module/addresshierarchy/ajax/getPossibleFullAddresses.form?separator=${separator}&searchString=${searchString}`
+      : null,
+    openmrsFetch,
+  );
+
+  const results = useMemo(
+    () => ({
+      addresses: data?.data?.map((address) => address.address) ?? [],
+      error,
+      isLoading,
+    }),
+    [data?.data, error, isLoading],
+  );
+  return results;
+}
+
+export function useAddressHierarchyWithParentSearch(addressField: string, parentid: string, query: string) {
+  const { data, error, isLoading } = useSWRImmutable<
+    FetchResponse<
+      Array<{
+        uuid: string;
+        name: string;
+      }>
+    >,
+    Error
+  >(
+    query
+      ? `/module/addresshierarchy/ajax/getPossibleAddressHierarchyEntriesWithParents.form?addressField=${addressField}&limit=20&searchString=${query}&parentUuid=${parentid}`
+      : null,
+    openmrsFetch,
+  );
+
+  const results = useMemo(
+    () => ({
+      error: error,
+      isLoading,
+      addresses: data?.data ?? [],
+    }),
+    [data?.data, error, isLoading],
+  );
+
+  return results;
+}

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

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useMemo } from 'react';
-import { useAddressHierarchy } from '../../patient-registration.resource';
+import { useAddressHierarchy } from './address-hierarchy.resource';
 import { Search } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { useFormikContext } from 'formik';

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

@@ -6,8 +6,18 @@ import { Resources, ResourcesContext } from '../../../../offline.resources';
 import { PatientRegistrationContext } from '../../../patient-registration-context';
 import { useConfig } from '@openmrs/esm-framework';
 import { useOrderedAddressHierarchyLevels } from '../address-hierarchy.resource';
-import { mockResponse1, mockResponse2, mockedOrderedFields } from './mocks';
-import AddressHierarchyLevels from '../address-hierarchy-levels.component';
+import { mockedAddressTemplate, mockedOrderedFields } from './mocks';
+
+// Mocking the AddressSearchComponent
+jest.mock('../address-search.component', () => jest.fn(() => <div data-testid="address-search-bar" />));
+// Mocking the AddressHierarchyLevels
+jest.mock('../address-hierarchy-levels.component', () => jest.fn(() => <div data-testid="address-hierarchy-levels" />));
+// Mocking the SkeletonText
+jest.mock('@carbon/react', () => ({
+  ...jest.requireActual('@carbon/react'),
+  SkeletonText: jest.fn(() => <div data-testid="skeleton-text" />),
+  InlineNotification: jest.fn(() => <div data-testid="inline-notification" />),
+}));
 
 jest.mock('@openmrs/esm-framework', () => ({
   ...jest.requireActual('@openmrs/esm-framework'),
@@ -19,63 +29,91 @@ jest.mock('../address-hierarchy.resource', () => ({
   useOrderedAddressHierarchyLevels: jest.fn(),
 }));
 
-async function testAddressHierarchy(mockResponse) {
+async function renderAddressHierarchy(addressTemplate = mockedAddressTemplate) {
   await render(
-    <ResourcesContext.Provider value={{ addressTemplate: mockResponse } as Resources}>
+    <ResourcesContext.Provider value={{ addressTemplate } as Resources}>
       <Formik initialValues={{}} onSubmit={null}>
         <Form>
-          <PatientRegistrationContext.Provider
-            value={{ setFieldValue: jest.fn(), setInitialFormValues: jest.fn(), values: { address: {} } }}>
+          <PatientRegistrationContext.Provider value={{ setFieldValue: jest.fn() } as any}>
             <AddressComponent />
           </PatientRegistrationContext.Provider>
         </Form>
       </Formik>
     </ResourcesContext.Provider>,
   );
-
-  const countryInput = screen.getByLabelText('Country (optional)');
-  expect(countryInput).toBeInTheDocument();
-  expect(countryInput).toHaveAttribute('name', 'address.country');
-  const stateInput = screen.getByLabelText('State (optional)');
-  expect(stateInput).toBeInTheDocument();
-  expect(stateInput).toHaveAttribute('name', 'address.stateProvince');
-  const cityInput = screen.getByLabelText('City (optional)');
-  expect(cityInput).toBeInTheDocument();
-  expect(cityInput).toHaveAttribute('name', 'address.cityVillage');
-  const address1Input = screen.getByLabelText('Address line 1 (optional)');
-  expect(address1Input).toBeInTheDocument();
-  expect(address1Input).toHaveAttribute('name', 'address.address1');
-  const address2Input = screen.getByLabelText('Address line 2 (optional)');
-  expect(address2Input).toBeInTheDocument();
-  expect(address2Input).toHaveAttribute('name', 'address.address2');
-  const postalCodeInput = screen.getByLabelText('Postcode (optional)');
-  expect(postalCodeInput).toBeInTheDocument();
-  expect(postalCodeInput).toHaveAttribute('name', 'address.postalCode');
 }
 
-function testInputFieldOrder() {
-  // Fields must be in the order of the orderedFields
-  const inputs = screen.getAllByRole('textbox');
-  inputs.forEach((input, indx) => {
-    const inputName = input.getAttribute('name');
-    // Names are in the format of address.${name}
-    const fieldName = inputName.split('.')?.[1];
-    expect(fieldName).toBe(mockedOrderedFields[indx]);
-  });
-}
+describe('Testing address hierarchy', () => {
+  beforeEach(cleanup);
 
-describe('address hierarchy', () => {
-  beforeAll(() => {
+  it('should render skeleton when address template is loading', () => {
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: false,
+            useQuickSearch: false,
+            searchAddressByLevel: false,
+          },
+        },
+      },
+    }));
     (useOrderedAddressHierarchyLevels as jest.Mock).mockImplementation(() => ({
-      orderedFields: mockedOrderedFields,
+      orderedFields: [],
       isLoadingFieldOrder: false,
       errorFetchingFieldOrder: null,
     }));
+    // @ts-ignore
+    renderAddressHierarchy(null);
+    const skeletonText = screen.getByTestId('skeleton-text');
+    expect(skeletonText).toBeInTheDocument();
   });
 
-  beforeEach(cleanup);
+  it('should render skeleton when address hierarchy is enabled and addresshierarchy order is loading', () => {
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: true,
+            useQuickSearch: false,
+            searchAddressByLevel: false,
+          },
+        },
+      },
+    }));
+    (useOrderedAddressHierarchyLevels as jest.Mock).mockImplementation(() => ({
+      orderedFields: [],
+      isLoadingFieldOrder: true,
+      errorFetchingFieldOrder: null,
+    }));
+    renderAddressHierarchy();
+    const skeletonText = screen.getByTestId('skeleton-text');
+    expect(skeletonText).toBeInTheDocument();
+  });
+
+  it('should render skeleton when address hierarchy is enabled and addresshierarchy order is loading', () => {
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: true,
+            useQuickSearch: false,
+            searchAddressByLevel: false,
+          },
+        },
+      },
+    }));
+    (useOrderedAddressHierarchyLevels as jest.Mock).mockImplementation(() => ({
+      orderedFields: [],
+      isLoadingFieldOrder: false,
+      errorFetchingFieldOrder: true,
+    }));
+    renderAddressHierarchy();
+    const inlineNotification = screen.getByTestId('inline-notification');
+    expect(inlineNotification).toBeInTheDocument();
+  });
 
-  it('renders text input fields matching addressTemplate config', async () => {
+  it('should render the address component with address hierarchy disabled', () => {
     (useConfig as jest.Mock).mockImplementation(() => ({
       fieldConfigurations: {
         address: {
@@ -87,37 +125,72 @@ describe('address hierarchy', () => {
         },
       },
     }));
-    testAddressHierarchy(mockResponse1);
-    // For cleaning up the input fields generated in first render
-    cleanup();
-    testAddressHierarchy(mockResponse2);
+    (useOrderedAddressHierarchyLevels as jest.Mock).mockImplementation(() => ({
+      orderedFields: [],
+      isLoadingFieldOrder: false,
+      errorFetchingFieldOrder: null,
+    }));
+    renderAddressHierarchy();
+    const allFields = mockedAddressTemplate.lines.flat().filter(({ isToken }) => isToken === 'IS_ADDR_TOKEN');
+    allFields.forEach((field) => {
+      const textFieldInput = screen.getByLabelText(`${field.displayText} (optional)`);
+      expect(textFieldInput).toBeInTheDocument();
+    });
   });
 
-  it('renders combo input fields matching addressTemplate config', async () => {
+  it('should render the fields in order if the address hierarcy is enabled', () => {
     (useConfig as jest.Mock).mockImplementation(() => ({
       fieldConfigurations: {
         address: {
           useAddressHierarchy: {
             enabled: true,
-            useQuickSearch: true,
+            useQuickSearch: false,
             searchAddressByLevel: false,
           },
         },
       },
     }));
+    (useOrderedAddressHierarchyLevels as jest.Mock).mockImplementation(() => ({
+      orderedFields: [],
+      isLoadingFieldOrder: false,
+      errorFetchingFieldOrder: null,
+    }));
+    renderAddressHierarchy();
+    const allFields = mockedAddressTemplate.lines.flat().filter(({ isToken }) => isToken === 'IS_ADDR_TOKEN');
+    const orderMap = Object.fromEntries(mockedOrderedFields.map((field, indx) => [field, indx]));
+    allFields.sort(
+      (existingField1, existingField2) =>
+        orderMap[existingField1.codeName ?? 0] - orderMap[existingField2.codeName ?? 0],
+    );
+    allFields.forEach((field) => {
+      const textFieldInput = screen.getByLabelText(`${field.displayText} (optional)`);
+      expect(textFieldInput).toBeInTheDocument();
+    });
+  });
 
-    testAddressHierarchy(mockResponse1);
-    const searchBox = screen.getByRole('searchbox');
-    expect(searchBox).toBeInTheDocument();
-    expect(searchBox.getAttribute('placeholder')).toBe('Search address');
-    testInputFieldOrder();
-    // For cleaning up the input fields generated in first render
-    cleanup();
-    testAddressHierarchy(mockResponse2);
-    testInputFieldOrder();
+  it('should render quick search bar on above the fields when address hierarchy is enabled and quicksearch is set to true', () => {
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: true,
+            useQuickSearch: true,
+            searchAddressByLevel: false,
+          },
+        },
+      },
+    }));
+    (useOrderedAddressHierarchyLevels as jest.Mock).mockImplementation(() => ({
+      orderedFields: [],
+      isLoadingFieldOrder: false,
+      errorFetchingFieldOrder: null,
+    }));
+    renderAddressHierarchy();
+    const addressSearchBar = screen.getByTestId('address-search-bar');
+    expect(addressSearchBar).toBeInTheDocument();
   });
 
-  it('renders combo input fields matching addressTemplate config and ordered fields', async () => {
+  it('should render combo boxes fields when address hierarchy is enabled and searchAddressByLevel is set to true', () => {
     (useConfig as jest.Mock).mockImplementation(() => ({
       fieldConfigurations: {
         address: {
@@ -129,12 +202,13 @@ describe('address hierarchy', () => {
         },
       },
     }));
-
-    testAddressHierarchy(mockResponse1);
-    testInputFieldOrder();
-    // For cleaning up the input fields generated in first render
-    cleanup();
-    testAddressHierarchy(mockResponse2);
-    testInputFieldOrder();
+    (useOrderedAddressHierarchyLevels as jest.Mock).mockImplementation(() => ({
+      orderedFields: [],
+      isLoadingFieldOrder: false,
+      errorFetchingFieldOrder: null,
+    }));
+    renderAddressHierarchy();
+    const addressHierarchyLevels = screen.getByTestId('address-hierarchy-levels');
+    expect(addressHierarchyLevels).toBeInTheDocument();
   });
 });