@ampath/esm-patient-registration-app 6.0.1-pre.98 → 9.2.0-next.14

package/src/offline.resources.ts

@@ -1,7 +1,4 @@
-import React from 'react';
-import find from 'lodash-es/find';
-import camelCase from 'lodash-es/camelCase';
-import escapeRegExp from 'lodash-es/escapeRegExp';
+import { camelCase, escapeRegExp, find } from 'lodash-es';
 import { getConfig, messageOmrsServiceWorker, openmrsFetch, restBaseUrl, type Session } from '@openmrs/esm-framework';
 import type {
   PatientIdentifierType,
@@ -17,8 +14,6 @@ export interface Resources {
   identifierTypes: Array<PatientIdentifierType>;
 }
 
-export const ResourcesContext = React.createContext<Resources>(null);
-
 export async function fetchCurrentSession(): Promise<Session> {
   const { data } = await cacheAndFetch<Session>(`${restBaseUrl}/session`);
   return data;
@@ -75,17 +70,21 @@ export async function fetchPatientIdentifierTypesWithSources(): Promise<Array<Pa
   // @ts-ignore Reason: The required props of the type are generated below.
   const identifierTypes: Array<PatientIdentifierType> = patientIdentifierTypes.filter(Boolean);
 
-  const [autoGenOptions, ...allIdentifierSources] = await Promise.all([
+  const [autoGenOptions, identifierSourcesResponse] = await Promise.all([
     fetchAutoGenerationOptions(),
-    ...identifierTypes.map((identifierType) => fetchIdentifierSources(identifierType.uuid)),
+    fetchIdentifierSources(),
   ]);
 
+  const allIdentifierSources = identifierSourcesResponse.data.results;
+
   for (let i = 0; i < identifierTypes?.length; i++) {
-    identifierTypes[i].identifierSources = allIdentifierSources[i].data.results.map((source) => {
-      const option = find(autoGenOptions.data.results, { source: { uuid: source.uuid } });
-      source.autoGenerationOption = option;
-      return source;
-    });
+    identifierTypes[i].identifierSources = allIdentifierSources
+      .filter((source) => source.identifierType.uuid === identifierTypes[i].uuid)
+      .map((source) => {
+        const option = find(autoGenOptions.data.results, { source: { uuid: source.uuid } });
+        source.autoGenerationOption = option;
+        return source;
+      });
   }
 
   return identifierTypes;
@@ -94,7 +93,7 @@ export async function fetchPatientIdentifierTypesWithSources(): Promise<Array<Pa
 async function fetchPatientIdentifierTypes(): Promise<Array<FetchedPatientIdentifierType>> {
   const [patientIdentifierTypesResponse, primaryIdentifierTypeResponse] = await Promise.all([
     cacheAndFetch(
-      `${restBaseUrl}/patientidentifiertype?v=custom:(display,uuid,name,format,required,uniquenessBehavior)`,
+      `${restBaseUrl}/patientidentifiertype?v=custom:(display,uuid,name,format,formatDescription,required,uniquenessBehavior)`,
     ),
     cacheAndFetch(`${restBaseUrl}/metadatamapping/termmapping?v=full&code=emr.primaryIdentifierType`),
   ]);
@@ -103,9 +102,17 @@ async function fetchPatientIdentifierTypes(): Promise<Array<FetchedPatientIdenti
     // Primary identifier type is to be kept at the top of the list.
     const patientIdentifierTypes = patientIdentifierTypesResponse?.data?.results;
 
-    const primaryIdentifierTypeUuid = primaryIdentifierTypeResponse?.data?.results?.[0]?.metadataUuid;
+    // const primaryIdentifierTypeUuid = primaryIdentifierTypeResponse?.data?.results?.[0]?.metadataUuid;
+    const primaryIdentifierTypeUuid = '58a4732e-1359-11df-a1f1-0026b9348838';
 
-    let identifierTypes = [];
+    let identifierTypes = primaryIdentifierTypeResponse?.ok
+      ? [
+          mapPatientIdentifierType(
+            patientIdentifierTypes?.find((type) => type.uuid === primaryIdentifierTypeUuid),
+            true,
+          ),
+        ]
+      : [];
 
     patientIdentifierTypes.forEach((type) => {
       if (type.uuid !== primaryIdentifierTypeUuid) {
@@ -118,8 +125,8 @@ async function fetchPatientIdentifierTypes(): Promise<Array<FetchedPatientIdenti
   return [];
 }
 
-async function fetchIdentifierSources(identifierType: string) {
-  return await cacheAndFetch(`${restBaseUrl}/idgen/identifiersource?v=default&identifierType=${identifierType}`);
+async function fetchIdentifierSources() {
+  return await cacheAndFetch(`${restBaseUrl}/idgen/identifiersource?v=default`);
 }
 
 async function fetchAutoGenerationOptions(abortController?: AbortController) {
@@ -144,6 +151,7 @@ function mapPatientIdentifierType(patientIdentifierType, isPrimary) {
     required: patientIdentifierType.required,
     uuid: patientIdentifierType.uuid,
     format: patientIdentifierType.format,
+    formatDescription: patientIdentifierType.formatDescription,
     isPrimary,
     uniquenessBehavior: patientIdentifierType.uniquenessBehavior,
   };

package/src/patient-photo.extension.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import { PatientPhoto, type PatientPhotoProps } from '@openmrs/esm-framework';
 
-export function PatientPhotoExtension(props: PatientPhotoProps) {
+function PatientPhotoExtension(props: PatientPhotoProps) {
   console.warn(
     'Using the patient-photo extension (or patient-photo-slot slot) is deprecated. Please use the PatientPhoto component from @openmrs/esm-framework.',
   );
   return <PatientPhoto {...props} />;
 }
+
+export default PatientPhotoExtension;

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

@@ -1,23 +1,36 @@
-import React, { useEffect, useState, useContext, useMemo } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ResourcesContext } from '../../../offline.resources';
 import { SkeletonText, InlineNotification } from '@carbon/react';
-import { Input } from '../../input/basic-input/input/input.component';
-import { useConfig, useConnectivity } from '@openmrs/esm-framework';
-import { PatientRegistrationContext } from '../../patient-registration-context';
+import { type Session, useConfig, useConnectivity } from '@openmrs/esm-framework';
 import { useOrderedAddressHierarchyLevels } from './address-hierarchy.resource';
+import {
+  type PatientRegistrationContextProps,
+  PatientRegistrationContextProvider,
+  usePatientRegistrationContext,
+} from '../../patient-registration-context';
+import { ResourcesContextProvider, useResourcesContext } from '../../../resources-context';
+import { Input } from '../../input/basic-input/input/input.component';
 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();
-  return parser.parseFromString(xmlDockAsString, 'text/xml');
-}
+import { type AddressTemplate } from '../../patient-registration.types';
 
 export const AddressComponent: React.FC = () => {
-  const [selected, setSelected] = useState('');
-  const { addressTemplate } = useContext(ResourcesContext);
+  const config = useConfig();
+  const { t } = useTranslation();
+  const { setFieldValue } = usePatientRegistrationContext();
+  const { orderedFields, isLoadingFieldOrder, errorFetchingFieldOrder } = useOrderedAddressHierarchyLevels();
+
+  const isOnline = useConnectivity();
+  const {
+    fieldConfigurations: {
+      address: {
+        useAddressHierarchy: { enabled: addressHierarchyEnabled, useQuickSearch, searchAddressByLevel },
+      },
+    },
+  } = config;
+
+  const { addressTemplate } = useResourcesContext();
   const addressLayout = useMemo(() => {
     if (!addressTemplate?.lines) {
       return [];
@@ -36,19 +49,7 @@ export const AddressComponent: React.FC = () => {
     });
   }, [addressTemplate]);
 
-  const { t } = useTranslation();
-  const config = useConfig();
-  const isOnline = useConnectivity();
-  const {
-    fieldConfigurations: {
-      address: {
-        useAddressHierarchy: { enabled: addressHierarchyEnabled, useQuickSearch, searchAddressByLevel },
-      },
-    },
-  } = config;
-
-  const { setFieldValue } = useContext(PatientRegistrationContext);
-  const { orderedFields, isLoadingFieldOrder, errorFetchingFieldOrder } = useOrderedAddressHierarchyLevels();
+  const [selected, setSelected] = useState('');
 
   useEffect(() => {
     if (addressTemplate?.elementDefaults) {
@@ -70,10 +71,10 @@ export const AddressComponent: React.FC = () => {
     );
   }, [isLoadingFieldOrder, errorFetchingFieldOrder, orderedFields, addressLayout]);
 
-  if (!addressTemplate) {
+  if (addressTemplate && !Object.keys(addressTemplate)?.length) {
     return (
       <AddressComponentContainer>
-        <SkeletonText />
+        <SkeletonText role="progressbar" />
       </AddressComponentContainer>
     );
   }
@@ -110,7 +111,7 @@ export const AddressComponent: React.FC = () => {
           style={{ margin: '0', minWidth: '100%' }}
           kind="error"
           lowContrast={true}
-          title={t('errorFetchingOrderedFields', 'Error occured fetching ordered fields for address hierarchy')}
+          title={t('errorFetchingOrderedFields', 'Error occurred fetching ordered fields for address hierarchy')}
         />
       </AddressComponentContainer>
     );
@@ -139,15 +140,35 @@ export const AddressComponent: React.FC = () => {
 
 const AddressComponentContainer = ({ children }) => {
   const { t } = useTranslation();
+  const contextValue = useMemo(
+    () =>
+      ({
+        fieldConfigurations: {},
+        setFieldValue: () => {},
+        values: {},
+      }) as unknown as PatientRegistrationContextProps,
+    [],
+  );
+
   return (
-    <div>
-      <h4 className={styles.productiveHeading02Light}>{t('addressHeader', 'Address')}</h4>
-      <div
-        style={{
-          paddingBottom: '5%',
-        }}>
-        {children}
-      </div>
-    </div>
+    <ResourcesContextProvider
+      value={{
+        addressTemplate: {} as AddressTemplate,
+        currentSession: {} as Session,
+        identifierTypes: [],
+        relationshipTypes: [],
+      }}>
+      <PatientRegistrationContextProvider value={contextValue}>
+        <div>
+          <h4 className={styles.productiveHeading02Light}>{t('addressHeader', 'Address')}</h4>
+          <div
+            style={{
+              paddingBottom: '5%',
+            }}>
+            {children}
+          </div>
+        </div>
+      </PatientRegistrationContextProvider>
+    </ResourcesContextProvider>
   );
 };

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

@@ -4,24 +4,6 @@ import { useAddressEntries, useAddressEntryFetchConfig } from './address-hierarc
 import { useField } from 'formik';
 import ComboInput from '../../input/combo-input/combo-input.component';
 
-interface AddressHierarchyLevelsProps {
-  orderedAddressFields: Array<any>;
-}
-
-const AddressHierarchyLevels: React.FC<AddressHierarchyLevelsProps> = ({ orderedAddressFields }) => {
-  const { t } = useTranslation();
-
-  return (
-    <>
-      {orderedAddressFields.map((attribute) => (
-        <AddressComboBox key={attribute.id} attribute={attribute} />
-      ))}
-    </>
-  );
-};
-
-export default AddressHierarchyLevels;
-
 interface AddressComboBoxProps {
   attribute: {
     id: string;
@@ -32,6 +14,10 @@ interface AddressComboBoxProps {
   };
 }
 
+interface AddressHierarchyLevelsProps {
+  orderedAddressFields: Array<any>;
+}
+
 const AddressComboBox: React.FC<AddressComboBoxProps> = ({ attribute }) => {
   const { t } = useTranslation();
   const [field, meta, { setValue }] = useField(`address.${attribute.name}`);
@@ -71,3 +57,15 @@ const AddressComboBox: React.FC<AddressComboBoxProps> = ({ attribute }) => {
     />
   );
 };
+
+const AddressHierarchyLevels: React.FC<AddressHierarchyLevelsProps> = ({ orderedAddressFields }) => {
+  return (
+    <>
+      {orderedAddressFields.map((attribute) => (
+        <AddressComboBox key={attribute.id} attribute={attribute} />
+      ))}
+    </>
+  );
+};
+
+export default AddressHierarchyLevels;

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

@@ -1,8 +1,8 @@
-import { useCallback, useContext, useEffect, useMemo } from 'react';
+import { useCallback, 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';
+import { usePatientRegistrationContext } from '../../patient-registration-context';
 
 interface AddressFields {
   addressField: string;
@@ -57,7 +57,7 @@ export function useAddressEntries(fetchResults, searchString) {
  */
 export function useAddressEntryFetchConfig(addressField: string) {
   const { orderedFields, isLoadingFieldOrder } = useOrderedAddressHierarchyLevels();
-  const { setFieldValue } = useContext(PatientRegistrationContext);
+  const { setFieldValue } = usePatientRegistrationContext();
   const [, { value: addressValues }] = useField('address');
 
   const index = useMemo(

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

@@ -0,0 +1,290 @@
+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,
+          },
+        },
+      } 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,
+          },
+        },
+      } 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,
+          },
+        },
+      } 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,
+          },
+        },
+      } 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,
+          },
+        },
+      } 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,
+          },
+        },
+      } 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

@@ -1,8 +1,8 @@
 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 { useTranslation } from 'react-i18next';
+import { Search } from '@carbon/react';
+import { useAddressHierarchy } from './address-hierarchy.resource';
 import styles from './address-search.scss';
 
 interface AddressSearchComponentProps {
@@ -14,8 +14,10 @@ const AddressSearchComponent: React.FC<AddressSearchComponentProps> = ({ address
   const separator = ' > ';
   const searchBox = useRef(null);
   const wrapper = useRef(null);
-  const [searchString, setSearchString] = useState<string>('');
-  const { addresses, isLoading, error } = useAddressHierarchy(searchString, separator);
+  const [searchString, setSearchString] = useState('');
+
+  const { addresses } = useAddressHierarchy(searchString, separator);
+
   const addressOptions: Array<string> = useMemo(() => {
     const options: Set<string> = new Set();
     addresses.forEach((address) => {

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

@@ -1,6 +1,6 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .label01 {
   @include type.type-style('label-01');
@@ -17,13 +17,13 @@
   position: absolute;
   left: 0;
   background-color: #fff;
-  margin-bottom: 20px;
+  margin-bottom: 1.25rem;
   z-index: 99;
   border: 1px solid $ui-03;
 }
 
 .suggestions li {
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
   line-height: 1.29;
   color: #525252;
   border-bottom: 1px solid #8d8d8d;