@kenyaemr/esm-patient-registration-app 4.4.4 → 4.5.1

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

@@ -1,31 +1,191 @@
-import React from 'react';
+import React, { useEffect, useState, useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '../../input/basic-input/input/input.component';
+import { ResourcesContext } from '../../../offline.resources';
+import { SkeletonText, InlineNotification } from '@carbon/react';
 import styles from '../field.scss';
-import { FieldDefinition } from '../../../config-schema';
-import { Field } from 'formik';
+import { Input } from '../../input/basic-input/input/input.component';
+import { useConfig } from '@openmrs/esm-framework';
+import AddressSearchComponent from './address-search.component';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import { useOrderedAddressHierarchyLevels } from './address-hierarchy.resource';
+import AddressHierarchyLevels from './address-hierarchy-levels.component';
 
-export interface AddressFieldProps {
-  fieldDefinition: FieldDefinition;
+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 AddressField: React.FC<AddressFieldProps> = ({ fieldDefinition }) => {
+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 config = useConfig();
+  const {
+    fieldConfigurations: {
+      address: {
+        useAddressHierarchy: { enabled, useQuickSearch, searchAddressByLevel },
+      },
+    },
+  } = config;
+
+  const { setFieldValue, values, setInitialFormValues } = 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]);
+
+  const orderedAddressFields = useMemo(() => {
+    if (isLoadingFieldOrder || errorFetchingFieldOrder) {
+      return [];
+    }
+
+    const orderMap = Object.fromEntries(orderedFields.map((field, indx) => [field, indx]));
+
+    return [...addressLayout].sort(
+      (existingField1, existingField2) => orderMap[existingField1.name] - orderMap[existingField2.name],
+    );
+  }, [isLoadingFieldOrder, errorFetchingFieldOrder, orderedFields, addressLayout]);
 
+  if (!addressTemplate) {
+    return (
+      <AddressComponentContainer>
+        <SkeletonText />
+      </AddressComponentContainer>
+    );
+  }
+
+  if (!enabled) {
+    return (
+      <AddressComponentContainer>
+        {addressLayout.map((attributes, index) => (
+          <Input
+            key={`combo_input_${index}`}
+            name={`address.${attributes.name}`}
+            labelText={t(attributes.label)}
+            id={attributes.name}
+            setSelectedValue={setSelectedValue}
+            selected={selected}
+          />
+        ))}
+      </AddressComponentContainer>
+    );
+  }
+
+  if (isLoadingFieldOrder) {
+    return (
+      <AddressComponentContainer>
+        <SkeletonText />
+      </AddressComponentContainer>
+    );
+  }
+
+  if (errorFetchingFieldOrder) {
+    return (
+      <AddressComponentContainer>
+        <InlineNotification
+          style={{ margin: '0', minWidth: '100%' }}
+          kind="error"
+          lowContrast={true}
+          title={t('errorFetchingOrderedFields', 'Error occured fetching ordered fields for address hierarchy')}
+        />
+      </AddressComponentContainer>
+    );
+  }
+
+  return (
+    <AddressComponentContainer>
+      {useQuickSearch && <AddressSearchComponent addressLayout={orderedAddressFields} />}
+      {searchAddressByLevel ? (
+        <AddressHierarchyLevels orderedAddressFields={orderedAddressFields} />
+      ) : (
+        orderedAddressFields.map((attributes, index) => (
+          <Input
+            key={`combo_input_${index}`}
+            name={`address.${attributes.name}`}
+            labelText={t(attributes.label)}
+            id={attributes.name}
+            setSelectedValue={setSelectedValue}
+            selected={selected}
+          />
+        ))
+      )}
+    </AddressComponentContainer>
+  );
+};
+
+const AddressComponentContainer = ({ children }) => {
+  const { t } = useTranslation();
   return (
-    <div className={`${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}
-              required={fieldDefinition.validation.required}
-            />
-          );
-        }}
-      </Field>
+    <div>
+      <h4 className={styles.productiveHeading02Light}>{t('addressHeader', 'Address')}</h4>
+      <div
+        style={{
+          paddingBottom: '5%',
+        }}>
+        {children}
+      </div>
     </div>
   );
 };

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

@@ -0,0 +1,68 @@
+import React, { useCallback, useMemo } 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>;
+}
+
+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;
+    name: string;
+    value: string;
+    label: string;
+  };
+}
+
+const AddressComboBox: React.FC<AddressComboBoxProps> = ({ attribute }) => {
+  const { t } = useTranslation();
+  const [field, meta, helpers] = useField(`address.${attribute.name}`);
+  const { fetchEntriesForField, searchString, updateChildElements } = useAddressEntryFetchConfig(attribute.name);
+  const { entries } = useAddressEntries(fetchEntriesForField, searchString);
+  console.log(searchString);
+  const handleInputChange = useCallback((newValue) => {
+    helpers.setValue(newValue);
+  }, []);
+
+  const handleSelection = useCallback(
+    (selectedItem) => {
+      if (meta.value !== selectedItem) {
+        helpers.setValue(selectedItem);
+        updateChildElements();
+      }
+    },
+    [updateChildElements, helpers.setValue],
+  );
+
+  return (
+    <ComboInput
+      entries={entries}
+      handleSelection={handleSelection}
+      name={`address.${attribute.name}`}
+      fieldProps={{
+        ...field,
+        id: attribute.name,
+        labelText: `${attribute.label} (${t('optional', 'optional')})`,
+      }}
+      handleInputChange={handleInputChange}
+    />
+  );
+};

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

@@ -0,0 +1,103 @@
+import { FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
+import { useField } from 'formik';
+import { useCallback, useContext, useEffect, useMemo } from 'react';
+import useSWRImmutable from 'swr/immutable';
+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>>>(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, errorFetchingFieldOrder } = 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;
+}

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

@@ -0,0 +1,30 @@
+import React from 'react';
+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 { Field } from 'formik';
+
+export interface AddressFieldProps {
+  fieldDefinition: FieldDefinition;
+}
+
+export const AddressField: React.FC<AddressFieldProps> = ({ fieldDefinition }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={`${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,140 @@
+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 { 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';
+
+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 testAddressHierarchy(mockResponse) {
+  await render(
+    <ResourcesContext.Provider value={{ addressTemplate: mockResponse } as Resources}>
+      <Formik initialValues={{}} onSubmit={null}>
+        <Form>
+          <PatientRegistrationContext.Provider
+            value={{ setFieldValue: jest.fn(), setInitialFormValues: jest.fn(), values: { address: {} } }}>
+            <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('address hierarchy', () => {
+  beforeAll(() => {
+    (useOrderedAddressHierarchyLevels as jest.Mock).mockImplementation(() => ({
+      orderedFields: mockedOrderedFields,
+      isLoadingFieldOrder: false,
+      errorFetchingFieldOrder: null,
+    }));
+  });
+
+  beforeEach(cleanup);
+
+  it('renders text input fields matching addressTemplate config', async () => {
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: false,
+            useQuickSearch: false,
+            searchAddressByLevel: false,
+          },
+        },
+      },
+    }));
+    testAddressHierarchy(mockResponse1);
+    // For cleaning up the input fields generated in first render
+    cleanup();
+    testAddressHierarchy(mockResponse2);
+  });
+
+  it('renders combo input fields matching addressTemplate config', async () => {
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: true,
+            useQuickSearch: true,
+            searchAddressByLevel: false,
+          },
+        },
+      },
+    }));
+
+    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('renders combo input fields matching addressTemplate config and ordered fields', async () => {
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: true,
+            useQuickSearch: false,
+            searchAddressByLevel: true,
+          },
+        },
+      },
+    }));
+
+    testAddressHierarchy(mockResponse1);
+    testInputFieldOrder();
+    // For cleaning up the input fields generated in first render
+    cleanup();
+    testAddressHierarchy(mockResponse2);
+    testInputFieldOrder();
+  });
+});

package/src/patient-registration/field/address/{address-hierarchy.test.tsx → tests/mocks.ts}

@@ -1,17 +1,4 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { AddressHierarchy } from './address-hierarchy.component';
-import { Formik, Form } from 'formik';
-import { Resources, ResourcesContext } from '../../../offline.resources';
-import { PatientRegistrationContext } from '../../patient-registration-context';
-import { useConfig } from '@openmrs/esm-framework';
-
-jest.mock('@openmrs/esm-framework', () => ({
-  ...jest.requireActual('@openmrs/esm-framework'),
-  useConfig: jest.fn(),
-}));
-
-const mockResponse1 = {
+export const mockResponse1 = {
   results: [
     {
       value:
@@ -44,7 +31,7 @@ const mockResponse1 = {
   ],
 };
 
-const mockResponse2 = {
+export const mockResponse2 = {
   results: [
     {
       value:
@@ -114,68 +101,4 @@ const mockResponse2 = {
   ],
 };
 
-async function testAddressHierarchy(mockResponse) {
-  await render(
-    <ResourcesContext.Provider value={{ addressTemplate: mockResponse } as Resources}>
-      <Formik initialValues={{}} onSubmit={null}>
-        <Form>
-          <PatientRegistrationContext.Provider value={{ setFieldValue: jest.fn() }}>
-            <AddressHierarchy />
-          </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');
-}
-
-describe('address hierarchy', () => {
-  it('renders text input fields matching addressTemplate config', async () => {
-    (useConfig as jest.Mock).mockImplementation(() => ({
-      fieldConfigurations: {
-        address: {
-          useAddressHierarchy: {
-            enabled: false,
-            useQuickSearch: false,
-            searchAddressByLevel: false,
-          },
-        },
-      },
-    }));
-    testAddressHierarchy(mockResponse1);
-    testAddressHierarchy(mockResponse2);
-  });
-
-  it('renders combo input fields matching addressTemplate config', async () => {
-    (useConfig as jest.Mock).mockImplementation(() => ({
-      fieldConfigurations: {
-        address: {
-          useAddressHierarchy: {
-            enabled: true,
-            useQuickSearch: false,
-            searchAddressByLevel: true,
-          },
-        },
-      },
-    }));
-    testAddressHierarchy(mockResponse1);
-    testAddressHierarchy(mockResponse2);
-  });
-});
+export const mockedOrderedFields = ['country', 'stateProvince', 'cityVillage', 'postalCode', 'address1', 'address2'];

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

@@ -1,7 +1,7 @@
 import { useConfig } from '@openmrs/esm-framework';
 import React from 'react';
 import { RegistrationConfig } from '../../config-schema';
-import { AddressField } from './address/address-field.component';
+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/field.component.tsx

@@ -6,7 +6,7 @@ import { DobField } from './dob/dob.component';
 import { reportError, useConfig } from '@openmrs/esm-framework';
 import { builtInFields, RegistrationConfig } from '../../config-schema';
 import { CustomField } from './custom-field.component';
-import { AddressHierarchy } from './address/address-hierarchy.component';
+import { AddressComponent } from './address/address-field.component';
 
 export interface FieldProps {
   name: string;
@@ -35,7 +35,7 @@ export function Field({ name }: FieldProps) {
     case 'dob':
       return <DobField />;
     case 'address':
-      return <AddressHierarchy />;
+      return <AddressComponent />;
     case 'id':
       return <Identifiers />;
     default:

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

@@ -62,7 +62,7 @@ export const NameField = () => {
         {displayCapturePhoto && (
           <ExtensionSlot
             className={styles.photoExtension}
-            extensionSlotName="capture-patient-photo-slot"
+            name="capture-patient-photo-slot"
             state={{ onCapturePhoto, initialState: currentPhoto }}
           />
         )}