@olaboot/esm-patient-registration-app 9.2.0

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

@@ -0,0 +1,157 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { useField } from 'formik';
+import useSWRImmutable from 'swr/immutable';
+import { type FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
+import { usePatientRegistrationContext } from '../../patient-registration-context';
+
+interface AddressFields {
+  addressField: string;
+}
+
+export function useOrderedAddressHierarchyLevels() {
+  const url = '/module/addresshierarchy/ajax/getOrderedAddressHierarchyLevels.form';
+  const { data, isLoading, error } = useSWRImmutable<FetchResponse<Array<AddressFields>>, Error>(url, openmrsFetch);
+
+  const results = useMemo(
+    () => ({
+      orderedFields: data?.data?.map((field) => field.addressField),
+      isLoadingFieldOrder: isLoading,
+      errorFetchingFieldOrder: error,
+    }),
+    [data, isLoading, error],
+  );
+
+  return results;
+}
+
+export function useAddressEntries(fetchResults, searchString) {
+  const encodedSearchString = encodeURIComponent(searchString);
+  const { data, isLoading, error } = useSWRImmutable<FetchResponse<Array<{ name: string }>>>(
+    fetchResults
+      ? `module/addresshierarchy/ajax/getChildAddressHierarchyEntries.form?searchString=${encodedSearchString}`
+      : null,
+    openmrsFetch,
+  );
+
+  useEffect(() => {
+    if (error) {
+      console.error(error);
+    }
+  }, [error]);
+
+  const results = useMemo(
+    () => ({
+      entries: data?.data?.map((item) => item.name),
+      isLoadingAddressEntries: isLoading,
+      errorFetchingAddressEntries: error,
+    }),
+    [data, isLoading, error],
+  );
+  return results;
+}
+
+/**
+ * This hook is being used to fetch ordered address fields as configured in the address hierarchy
+ * This hook returns the valid search term for valid fields to get suitable entries for the field
+ * 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 } = useOrderedAddressHierarchyLevels();
+  const { setFieldValue } = usePatientRegistrationContext();
+  const [, { value: addressValues }] = useField('address');
+
+  const index = useMemo(
+    () => (!isLoadingFieldOrder ? orderedFields.findIndex((field) => field === addressField) : -1),
+    [orderedFields, addressField, isLoadingFieldOrder],
+  );
+
+  const addressFieldSearchConfig = useMemo(() => {
+    let fetchEntriesForField = true;
+    const previousSelectedFields = orderedFields?.slice(0, index) ?? [];
+    let previousSelectedValues = [];
+    for (const fieldName of previousSelectedFields) {
+      if (!addressValues[fieldName]) {
+        fetchEntriesForField = false;
+        break;
+      }
+      previousSelectedValues.push(addressValues[fieldName]);
+    }
+    return {
+      fetchEntriesForField,
+      searchString: previousSelectedValues.join('|'),
+    };
+  }, [orderedFields, index, addressValues]);
+
+  const updateChildElements = useCallback(() => {
+    if (isLoadingFieldOrder) {
+      return;
+    }
+    orderedFields.slice(index + 1).map((fieldName) => {
+      setFieldValue(`address.${fieldName}`, '');
+    });
+  }, [index, isLoadingFieldOrder, orderedFields, setFieldValue]);
+
+  const results = useMemo(
+    () => ({
+      ...addressFieldSearchConfig,
+      updateChildElements,
+    }),
+    [addressFieldSearchConfig, updateChildElements],
+  );
+
+  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-hierarchy.test.tsx

@@ -0,0 +1,296 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { Formik, Form } from 'formik';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { mockedAddressTemplate, mockedOrderedFields, mockOpenmrsId, mockPatient, mockSession } from '__mocks__';
+import { renderWithContext } from 'tools';
+import { type AddressTemplate } from '../../patient-registration.types';
+import { type RegistrationConfig, esmPatientRegistrationSchema } from '../../../config-schema';
+import { type Resources } from '../../../offline.resources';
+import {
+  PatientRegistrationContextProvider,
+  type PatientRegistrationContextProps,
+} from '../../patient-registration-context';
+import { useOrderedAddressHierarchyLevels } from './address-hierarchy.resource';
+import { ResourcesContextProvider } from '../../../resources-context';
+import { AddressComponent } from './address-field.component';
+
+const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
+const mockUseOrderedAddressHierarchyLevels = jest.mocked(useOrderedAddressHierarchyLevels);
+
+const mockResourcesContextValue = {
+  addressTemplate: {} as AddressTemplate,
+  currentSession: mockSession.data,
+  identifierTypes: [],
+  relationshipTypes: [],
+} as Resources;
+
+const mockInitialFormValues = {
+  additionalFamilyName: '',
+  additionalGivenName: '',
+  additionalMiddleName: '',
+  addNameInLocalLanguage: false,
+  address: {},
+  birthdate: '',
+  birthdateEstimated: false,
+  deathCause: '',
+  deathDate: '',
+  deathTime: '',
+  deathTimeFormat: 'AM' as 'AM' | 'PM',
+  nonCodedCauseOfDeath: '',
+  familyName: 'Doe',
+  gender: 'male',
+  givenName: 'John',
+  identifiers: mockOpenmrsId,
+  isDead: false,
+  middleName: 'Test',
+  monthsEstimated: 0,
+  patientUuid: mockPatient.uuid,
+  relationships: [],
+  telephoneNumber: '',
+  yearsEstimated: 0,
+};
+
+const initialContextValues: PatientRegistrationContextProps = {
+  currentPhoto: '',
+  inEditMode: false,
+  identifierTypes: [],
+  initialFormValues: mockInitialFormValues,
+  isOffline: false,
+  setCapturePhotoProps: jest.fn(),
+  setFieldValue: jest.fn(),
+  setFieldTouched: jest.fn(),
+  setInitialFormValues: jest.fn(),
+  validationSchema: null,
+  values: mockInitialFormValues,
+};
+
+jest.mock('./address-hierarchy.resource', () => ({
+  ...jest.requireActual('./address-hierarchy.resource'),
+  useOrderedAddressHierarchyLevels: jest.fn(),
+}));
+
+async function renderAddressHierarchy(contextValues: PatientRegistrationContextProps) {
+  await renderWithContext(
+    <PatientRegistrationContextProvider value={contextValues}>
+      <Formik initialValues={mockInitialFormValues} onSubmit={null}>
+        <Form>
+          <AddressComponent />
+        </Form>
+      </Formik>
+    </PatientRegistrationContextProvider>,
+    ResourcesContextProvider,
+    mockResourcesContextValue,
+  );
+}
+
+describe('Address hierarchy', () => {
+  it('renders a loading skeleton when the address template is loading', () => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: false,
+            useQuickSearch: false,
+            searchAddressByLevel: false,
+          },
+          requiredAddressFields: [],
+        },
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+
+    mockUseOrderedAddressHierarchyLevels.mockReturnValue({
+      orderedFields: [],
+      isLoadingFieldOrder: false,
+      errorFetchingFieldOrder: undefined,
+    });
+
+    renderAddressHierarchy(initialContextValues);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('renders a loading skeleton when the address hierarchy feature is enabled and address hierarchy order levels are loading', () => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: true,
+            useQuickSearch: false,
+            searchAddressByLevel: false,
+          },
+        },
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+
+    mockUseOrderedAddressHierarchyLevels.mockReturnValue({
+      orderedFields: [],
+      isLoadingFieldOrder: true,
+      errorFetchingFieldOrder: undefined,
+    });
+
+    renderAddressHierarchy(initialContextValues);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('renders a loading skeleton when the address hierarchy feature is enabled and address hierarchy order levels are loading', () => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: true,
+            useQuickSearch: false,
+            searchAddressByLevel: false,
+          },
+          requiredAddressFields: [],
+        },
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+
+    mockUseOrderedAddressHierarchyLevels.mockReturnValue({
+      orderedFields: [],
+      isLoadingFieldOrder: false,
+      errorFetchingFieldOrder: undefined,
+    });
+
+    renderAddressHierarchy(initialContextValues);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('renders the address component with address hierarchy disabled', () => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: false,
+            useQuickSearch: false,
+            searchAddressByLevel: false,
+          },
+          requiredAddressFields: [],
+        },
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+
+    mockUseOrderedAddressHierarchyLevels.mockReturnValue({
+      orderedFields: [],
+      isLoadingFieldOrder: false,
+      errorFetchingFieldOrder: undefined,
+    });
+
+    mockResourcesContextValue.addressTemplate = mockedAddressTemplate;
+
+    renderAddressHierarchy(initialContextValues);
+
+    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 the address hierarchy fields in order if the address hierarchy feature is enabled', () => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: true,
+            useQuickSearch: false,
+            searchAddressByLevel: false,
+          },
+          requiredAddressFields: [],
+        },
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+
+    mockUseOrderedAddressHierarchyLevels.mockReturnValue({
+      orderedFields: [],
+      isLoadingFieldOrder: false,
+      errorFetchingFieldOrder: undefined,
+    });
+
+    mockResourcesContextValue.addressTemplate = mockedAddressTemplate;
+
+    renderAddressHierarchy(initialContextValues);
+
+    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();
+    });
+  });
+
+  it('renders the quick search bar above the address hierarchy fields when the address hierarchy feature is enabled and useQuickSearch is set to true', () => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: true,
+            useQuickSearch: true,
+            searchAddressByLevel: false,
+          },
+          requiredAddressFields: [],
+        },
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+
+    mockUseOrderedAddressHierarchyLevels.mockReturnValue({
+      orderedFields: [],
+      isLoadingFieldOrder: false,
+      errorFetchingFieldOrder: undefined,
+    });
+
+    mockResourcesContextValue.addressTemplate = mockedAddressTemplate;
+
+    renderAddressHierarchy(initialContextValues);
+
+    const searchbox = screen.getByRole('searchbox', { name: /search address/i });
+    expect(searchbox).toBeInTheDocument();
+  });
+
+  it('renders combobox fields when address hierarchy is enabled and searchAddressByLevel is set to true', () => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: true,
+            useQuickSearch: false,
+            searchAddressByLevel: true,
+          },
+          requiredAddressFields: [],
+        },
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+
+    mockUseOrderedAddressHierarchyLevels.mockReturnValue({
+      orderedFields: [],
+      isLoadingFieldOrder: false,
+      errorFetchingFieldOrder: undefined,
+    });
+
+    mockResourcesContextValue.addressTemplate = mockedAddressTemplate;
+
+    renderAddressHierarchy(initialContextValues);
+
+    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();
+    });
+  });
+});

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

@@ -0,0 +1,87 @@
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+import { useFormikContext } from 'formik';
+import { useTranslation } from 'react-i18next';
+import { Search } from '@carbon/react';
+import { useAddressHierarchy } from './address-hierarchy.resource';
+import styles from './address-search.scss';
+
+interface AddressSearchComponentProps {
+  addressLayout: Array<any>;
+}
+
+const AddressSearchComponent: React.FC<AddressSearchComponentProps> = ({ addressLayout }) => {
+  const { t } = useTranslation();
+  const separator = ' > ';
+  const searchBox = useRef(null);
+  const wrapper = useRef(null);
+  const [searchString, setSearchString] = useState('');
+
+  const { addresses } = useAddressHierarchy(searchString, separator);
+
+  const addressOptions: Array<string> = useMemo(() => {
+    const options: Set<string> = new Set();
+    addresses.forEach((address) => {
+      const values = address.split(separator);
+      values.forEach((val, index) => {
+        if (val.toLowerCase().includes(searchString.toLowerCase())) {
+          options.add(values.slice(0, index + 1).join(separator));
+        }
+      });
+    });
+    return [...options];
+  }, [addresses, searchString]);
+
+  const { setFieldValue } = useFormikContext();
+
+  const handleInputChange = (e) => {
+    setSearchString(e.target.value);
+  };
+
+  const handleChange = (address) => {
+    if (address) {
+      const values = address.split(separator);
+      addressLayout.map(({ name }, index) => {
+        setFieldValue(`address.${name}`, values?.[index] ?? '');
+      });
+      setSearchString('');
+    }
+  };
+
+  const handleClickOutsideComponent = (e) => {
+    if (wrapper.current && !wrapper.current.contains(e.target)) {
+      setSearchString('');
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutsideComponent);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutsideComponent);
+    };
+  }, [wrapper]);
+
+  return (
+    <div className={styles.autocomplete} ref={wrapper} style={{ marginBottom: '1rem' }}>
+      <Search
+        onChange={handleInputChange}
+        labelText={t('searchAddress', 'Search address')}
+        placeholder={t('searchAddress', 'Search address')}
+        ref={searchBox}
+        value={searchString}
+      />
+      {addressOptions.length > 0 && (
+        /* Since the input has a marginBottom of 1rem */
+        <ul className={styles.suggestions}>
+          {addressOptions.map((address, index) => (
+            <li key={index} onClick={(e) => handleChange(address)}>
+              {address}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default AddressSearchComponent;

package/src/patient-registration/field/address/address-search.scss

@@ -0,0 +1,53 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.label01 {
+  @include type.type-style('label-01');
+}
+
+.suggestions {
+  border-top-width: 0;
+  list-style: none;
+  margin-top: 0;
+  max-height: 20rem;
+  overflow-y: auto;
+  padding-left: 0;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  background-color: #fff;
+  margin-bottom: 1.25rem;
+  z-index: 99;
+  border: 1px solid $ui-03;
+}
+
+.suggestions li {
+  padding: layout.$spacing-05;
+  line-height: 1.29;
+  color: #525252;
+  border-bottom: 1px solid #8d8d8d;
+}
+
+.suggestions li:hover {
+  background-color: #e5e5e5;
+  color: #161616;
+  cursor: pointer;
+}
+
+.suggestions li:not(:last-of-type) {
+  border-bottom: 1px solid #999;
+}
+
+.autocomplete {
+  position: relative;
+}
+
+.autocompleteSearch {
+  width: 100%;
+}
+
+.suggestions a {
+  color: inherit;
+  text-decoration: none;
+}