@ampath/esm-patient-registration-app 6.0.1-pre.6

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

@@ -0,0 +1,157 @@
+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 {
+  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 } = useContext(PatientRegistrationContext);
+  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-search.component.tsx

@@ -0,0 +1,85 @@
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+import { useAddressHierarchy } from './address-hierarchy.resource';
+import { Search } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { useFormikContext } from 'formik';
+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<string>('');
+  const { addresses, isLoading, error } = 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/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.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: 20px;
+  z-index: 99;
+  border: 1px solid $ui-03;
+}
+
+.suggestions li {
+  padding: spacing.$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;
+}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Field } from 'formik';
+import { useTranslation } from 'react-i18next';
+import { Input } from '../../input/basic-input/input/input.component';
+import styles from '../field.scss';
+import { type FieldDefinition } from '../../../config-schema';
+
+export interface AddressFieldProps {
+  fieldDefinition: FieldDefinition;
+}
+
+export const AddressField: React.FC<AddressFieldProps> = ({ fieldDefinition }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
+      <Field name={fieldDefinition.id}>
+        {({ field, form: { touched, errors }, meta }) => {
+          return (
+            <Input
+              id={fieldDefinition.id}
+              labelText={t(`${fieldDefinition.label}`, `${fieldDefinition.label}`)}
+              {...field}
+            />
+          );
+        }}
+      </Field>
+    </div>
+  );
+};

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

@@ -0,0 +1,214 @@
+import React from 'react';
+import { cleanup, render, screen } from '@testing-library/react';
+import { AddressComponent } from '../address-field.component';
+import { Formik, Form } from 'formik';
+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__';
+
+// 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'),
+  useConfig: jest.fn(),
+}));
+
+jest.mock('../address-hierarchy.resource', () => ({
+  ...(jest.requireActual('../address-hierarchy.resource') as jest.Mock),
+  useOrderedAddressHierarchyLevels: jest.fn(),
+}));
+
+async function renderAddressHierarchy(addressTemplate = mockedAddressTemplate) {
+  await render(
+    <ResourcesContext.Provider value={{ addressTemplate } as unknown as Resources}>
+      <Formik initialValues={{}} onSubmit={null}>
+        <Form>
+          <PatientRegistrationContext.Provider value={{ setFieldValue: jest.fn() } as any}>
+            <AddressComponent />
+          </PatientRegistrationContext.Provider>
+        </Form>
+      </Formik>
+    </ResourcesContext.Provider>,
+  );
+}
+
+describe('Testing address hierarchy', () => {
+  beforeEach(cleanup);
+
+  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: [],
+      isLoadingFieldOrder: false,
+      errorFetchingFieldOrder: null,
+    }));
+    // @ts-ignore
+    renderAddressHierarchy(null);
+    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: 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('should render the address component with address hierarchy disabled', () => {
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: false,
+            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');
+    allFields.forEach((field) => {
+      const textFieldInput = screen.getByLabelText(`${field.displayText} (optional)`);
+      expect(textFieldInput).toBeInTheDocument();
+    });
+  });
+
+  it('should render the fields in order if the address hierarcy is enabled', () => {
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: 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();
+    });
+  });
+
+  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('should render combo boxes fields when address hierarchy is enabled and searchAddressByLevel is set to true', () => {
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: true,
+            useQuickSearch: false,
+            searchAddressByLevel: true,
+          },
+        },
+      },
+    }));
+    (useOrderedAddressHierarchyLevels as jest.Mock).mockImplementation(() => ({
+      orderedFields: [],
+      isLoadingFieldOrder: false,
+      errorFetchingFieldOrder: null,
+    }));
+    renderAddressHierarchy();
+    const addressHierarchyLevels = screen.getByTestId('address-hierarchy-levels');
+    expect(addressHierarchyLevels).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,135 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { Formik, Form, useFormikContext } from 'formik';
+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 AddressSearchComponent from '../address-search.component';
+
+useAddressHierarchy;
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  useConfig: jest.fn(),
+}));
+
+jest.mock('../address-hierarchy.resource', () => ({
+  ...(jest.requireActual('../address-hierarchy.resource') as jest.Mock),
+  useOrderedAddressHierarchyLevels: jest.fn(),
+  useAddressHierarchy: jest.fn(),
+}));
+
+jest.mock('../../../patient-registration.resource', () => ({
+  ...(jest.requireActual('../../../../patient-registration.resource') as jest.Mock),
+  useAddressHierarchy: jest.fn(),
+}));
+
+jest.mock('formik', () => ({
+  ...(jest.requireActual('formik') as jest.Mock),
+  useFormikContext: jest.fn(() => ({})),
+}));
+
+const allFields = mockedAddressTemplate.lines
+  .flat()
+  .filter((field) => field.isToken === 'IS_ADDR_TOKEN')
+  .map(({ codeName, displayText }) => ({
+    id: codeName,
+    name: codeName,
+    label: displayText,
+  }));
+const orderMap = Object.fromEntries(mockedOrderedFields.map((field, indx) => [field, indx]));
+allFields.sort((existingField1, existingField2) => orderMap[existingField1.name] - orderMap[existingField2.name]);
+
+async function renderAddressHierarchy(addressTemplate = mockedAddressTemplate) {
+  await render(
+    <ResourcesContext.Provider value={{ addressTemplate } as Resources}>
+      <Formik initialValues={{}} onSubmit={null}>
+        <Form>
+          <PatientRegistrationContext.Provider value={{ setFieldValue: jest.fn() } as any}>
+            <AddressSearchComponent addressLayout={allFields} />
+          </PatientRegistrationContext.Provider>
+        </Form>
+      </Formik>
+    </ResourcesContext.Provider>,
+  );
+}
+
+const setFieldValue = jest.fn();
+
+describe('Testing address search bar', () => {
+  beforeEach(() => {
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: true,
+            useQuickSearch: true,
+            searchAddressByLevel: false,
+          },
+        },
+      },
+    }));
+    (useOrderedAddressHierarchyLevels as jest.Mock).mockImplementation(() => ({
+      orderedFields: mockedOrderedFields,
+      isLoadingFieldOrder: false,
+      errorFetchingFieldOrder: null,
+    }));
+    (useFormikContext as jest.Mock).mockImplementation(() => ({
+      setFieldValue,
+    }));
+  });
+
+  it('should render the search bar', () => {
+    (useAddressHierarchy as jest.Mock).mockImplementation(() => ({
+      addresses: [],
+      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) => {
+        if (val.toLowerCase().includes(searchString.toLowerCase())) {
+          options.add(values.slice(0, index + 1).join(separator));
+        }
+      });
+    });
+
+    const addressOptions = [...options];
+    addressOptions.forEach(async (address) => {
+      const optionElement = screen.getByText(address);
+      expect(optionElement).toBeInTheDocument();
+      await user.click(optionElement);
+      const values = address.split(separator);
+      allFields.map(({ name }, index) => {
+        expect(setFieldValue).toHaveBeenCalledWith(`address.${name}`, values?.[index]);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,25 @@
+import { useConfig } from '@openmrs/esm-framework';
+import React from 'react';
+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';
+
+export interface CustomFieldProps {
+  name: string;
+}
+
+export function CustomField({ name }: CustomFieldProps) {
+  const config = useConfig() as RegistrationConfig;
+  const fieldDefinition = config.fieldDefinitions.filter((def) => def.id == name)[0];
+
+  if (fieldDefinition.type === 'person attribute') {
+    return <PersonAttributeField fieldDefinition={fieldDefinition} />;
+  } else if (fieldDefinition.type === 'obs') {
+    return <ObsField fieldDefinition={fieldDefinition} />;
+  } else if (fieldDefinition.type === 'address') {
+    return <AddressField fieldDefinition={fieldDefinition} />;
+  } else {
+    return <div>Error: Unknown field type {fieldDefinition.type}</div>;
+  }
+}