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

package/src/patient-registration/field/obs/obs-field.test.tsx

@@ -1,17 +1,21 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { useConfig } from '@openmrs/esm-framework';
-import { type FieldDefinition } from '../../../config-schema';
+import { render, screen } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { esmPatientRegistrationSchema, type FieldDefinition, type RegistrationConfig } from '../../../config-schema';
 import { useConcept, useConceptAnswers } from '../field.resource';
 import { ObsField } from './obs-field.component';
+import {
+  PatientRegistrationContextProvider,
+  type PatientRegistrationContextProps,
+} from '../../patient-registration-context';
+import { mockOpenmrsId, mockPatient } from '__mocks__';
 
-const mockUseConfig = useConfig as jest.Mock;
-
-jest.mock('../field.resource'); // Mock the useConceptAnswers hook
+const mockUseConcept = jest.mocked(useConcept);
+const mockUseConceptAnswers = jest.mocked(useConceptAnswers);
+const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
 
-const mockedUseConcept = useConcept as jest.Mock;
-const mockedUseConceptAnswers = useConceptAnswers as jest.Mock;
+jest.mock('../field.resource');
 
 const useConceptMockImpl = (uuid: string) => {
   let data;
@@ -42,6 +46,14 @@ const useConceptMockImpl = (uuid: string) => {
       ],
       setMembers: [],
     };
+  } else if (uuid == 'vaccination-date-uuid') {
+    data = {
+      uuid: 'vaccination-date-uuid',
+      display: 'Vaccination Date',
+      datatype: { display: 'Date', uuid: 'date' },
+      answers: [],
+      setMembers: [],
+    };
   } else {
     throw Error(`Programming error, you probably didn't mean to do this: unknown concept uuid '${uuid}'`);
   }
@@ -59,6 +71,7 @@ const useConceptAnswersMockImpl = (uuid: string) => {
         { display: 'Mexico', uuid: 'mex' },
       ],
       isLoading: false,
+      error: null,
     };
   } else if (uuid == 'other-countries-uuid') {
     return {
@@ -67,11 +80,13 @@ const useConceptAnswersMockImpl = (uuid: string) => {
         { display: 'Uganda', uuid: 'ug' },
       ],
       isLoading: false,
+      error: null,
     };
   } else if (uuid == '') {
     return {
       data: [],
       isLoading: false,
+      error: null,
     };
   } else {
     throw Error(`Programming error, you probably didn't mean to do this: unknown concept answer set uuid '${uuid}'`);
@@ -79,19 +94,21 @@ const useConceptAnswersMockImpl = (uuid: string) => {
 };
 
 type FieldProps = {
-  children: ({ field, form: { touched, errors } }) => React.ReactNode;
+  children: ({ field, form: { touched, errors }, meta }) => React.ReactNode;
 };
 
 jest.mock('formik', () => ({
   ...(jest.requireActual('formik') as object),
-  Field: jest.fn(({ children }: FieldProps) => <>{children({ field: {}, form: { touched: {}, errors: {} } })}</>),
+  Field: jest.fn(({ children }: FieldProps) => (
+    <>{children({ field: {}, form: { touched: {}, errors: {} }, meta: { error: undefined } })}</>
+  )),
   useField: jest.fn(() => [{ value: null }, {}]),
 }));
 
 const textFieldDef: FieldDefinition = {
   id: 'chief-complaint',
   type: 'obs',
-  label: '',
+  label: 'Chief complaint',
   placeholder: '',
   showHeading: false,
   uuid: 'chief-complaint-uuid',
@@ -106,7 +123,7 @@ const textFieldDef: FieldDefinition = {
 const numberFieldDef: FieldDefinition = {
   id: 'weight',
   type: 'obs',
-  label: '',
+  label: 'Weight',
   placeholder: '',
   showHeading: false,
   uuid: 'weight-uuid',
@@ -118,10 +135,25 @@ const numberFieldDef: FieldDefinition = {
   customConceptAnswers: [],
 };
 
+const dateFieldDef: FieldDefinition = {
+  id: 'vac_date',
+  type: 'obs',
+  label: 'Vaccination date',
+  placeholder: '',
+  showHeading: false,
+  uuid: 'vaccination-date-uuid',
+  validation: {
+    required: false,
+    matches: null,
+  },
+  answerConceptSetUuid: null,
+  customConceptAnswers: [],
+};
+
 const codedFieldDef: FieldDefinition = {
   id: 'nationality',
   type: 'obs',
-  label: '',
+  label: 'Nationality',
   placeholder: '',
   showHeading: false,
   uuid: 'nationality-uuid',
@@ -133,57 +165,119 @@ const codedFieldDef: FieldDefinition = {
   customConceptAnswers: [],
 };
 
+const mockInitialFormValues = {
+  additionalFamilyName: '',
+  additionalGivenName: '',
+  additionalMiddleName: '',
+  addNameInLocalLanguage: false,
+  address: {},
+  birthdate: null,
+  birthdateEstimated: false,
+  deathCause: '',
+  deathDate: '',
+  familyName: 'Doe',
+  gender: 'male',
+  givenName: 'John',
+  identifiers: mockOpenmrsId,
+  isDead: false,
+  middleName: 'Test',
+  monthsEstimated: 0,
+  patientUuid: mockPatient.uuid,
+  relationships: [],
+  telephoneNumber: '',
+  yearsEstimated: 0,
+  deathTime: '',
+  deathTimeFormat: 'AM' as const,
+  nonCodedCauseOfDeath: '',
+};
+
+const initialContextValues: PatientRegistrationContextProps = {
+  currentPhoto: null,
+  inEditMode: false,
+  identifierTypes: [],
+  initialFormValues: mockInitialFormValues,
+  isOffline: false,
+  setCapturePhotoProps: jest.fn(),
+  setFieldValue: jest.fn(),
+  setInitialFormValues: jest.fn(),
+  validationSchema: null,
+  values: mockInitialFormValues,
+  setFieldTouched: jest.fn(),
+};
+
 describe('ObsField', () => {
   beforeEach(() => {
-    mockUseConfig.mockReturnValue({ registrationObs: { encounterTypeUuid: 'reg-enc-uuid' } });
-    mockedUseConcept.mockImplementation(useConceptMockImpl);
-    mockedUseConceptAnswers.mockImplementation(useConceptAnswersMockImpl);
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      registrationObs: { encounterTypeUuid: 'reg-enc-uuid' },
+    } as RegistrationConfig);
+    mockUseConcept.mockImplementation(useConceptMockImpl);
+    mockUseConceptAnswers.mockImplementation(useConceptAnswersMockImpl);
   });
 
   it("logs an error and doesn't render if no registration encounter type is provided", () => {
-    mockUseConfig.mockReturnValue({ registrationObs: { encounterTypeUuid: null } });
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      registrationObs: { encounterTypeUuid: null },
+    } as RegistrationConfig);
+
     console.error = jest.fn();
     render(<ObsField fieldDefinition={textFieldDef} />);
     expect(console.error).toHaveBeenCalledWith(
       expect.stringMatching(/no registration encounter type has been configured/i),
     );
-    expect(screen.queryByRole('textbox')).toBeNull();
+    expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
   });
 
   it('renders a text box for text concept', () => {
     render(<ObsField fieldDefinition={textFieldDef} />);
-    // I don't know why the labels aren't in the DOM, but they aren't
-    // expect(screen.getByLabelText("Chief Complaint")).toBeInTheDocument();
-    expect(screen.getByRole('textbox')).toBeInTheDocument();
+
+    expect(screen.getByRole('textbox', { name: 'Chief complaint (optional)' })).toBeInTheDocument();
   });
 
   it('renders a number box for number concept', () => {
     render(<ObsField fieldDefinition={numberFieldDef} />);
-    // expect(screen.getByLabelText("Weight (kg)")).toBeInTheDocument();
-    expect(screen.getByRole('spinbutton')).toBeInTheDocument();
+
+    expect(screen.getByRole('spinbutton', { name: 'Weight (optional)' })).toBeInTheDocument();
+  });
+
+  it('renders a datepicker for date concept', async () => {
+    const user = userEvent.setup();
+    render(
+      <PatientRegistrationContextProvider value={initialContextValues}>
+        <ObsField fieldDefinition={dateFieldDef} />
+      </PatientRegistrationContextProvider>,
+    );
+
+    expect(screen.getByText(/vaccination date/i)).toBeInTheDocument();
+
+    const dateInput = screen.getByLabelText(/vaccination date/i);
+    expect(dateInput).toBeInTheDocument();
+    await user.clear(dateInput);
+    await user.type(dateInput, '28/05/2024');
+    // FIXME: Make the date input work
+    // expect(dateInput).toHaveValue('28/05/2024');
   });
 
   it('renders a select for a coded concept', () => {
     render(<ObsField fieldDefinition={codedFieldDef} />);
-    // expect(screen.getByLabelText("Nationality")).toBeInTheDocument();
-    const select = screen.getByRole('combobox');
-    expect(select).toBeInTheDocument();
-    expect(select).toHaveDisplayValue('Select an option');
+
+    expect(screen.getByRole('combobox', { name: 'Nationality' })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'USA' })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Mexico' })).toBeInTheDocument();
   });
 
   it('select uses answerConcept for answers when it is provided', async () => {
-    const user = userEvent.setup();
-
     render(<ObsField fieldDefinition={{ ...codedFieldDef, answerConceptSetUuid: 'other-countries-uuid' }} />);
-    // expect(screen.getByLabelText("Nationality")).toBeInTheDocument();
-    const select = screen.getByRole('combobox');
-    expect(select).toBeInTheDocument();
-    await user.selectOptions(select, 'Kenya');
+
+    expect(screen.getByRole('combobox', { name: 'Nationality' })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Kenya' })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Uganda' })).toBeInTheDocument();
+    expect(screen.queryByRole('option', { name: 'USA' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('option', { name: 'Mexico' })).not.toBeInTheDocument();
   });
 
   it('select uses customConceptAnswers for answers when provided', async () => {
-    const user = userEvent.setup();
-
     render(
       <ObsField
         fieldDefinition={{
@@ -197,9 +291,9 @@ describe('ObsField', () => {
         }}
       />,
     );
-    // expect(screen.getByLabelText("Nationality")).toBeInTheDocument();
-    const select = screen.getByRole('combobox');
-    expect(select).toBeInTheDocument();
-    await user.selectOptions(select, 'Mozambique');
+
+    expect(screen.getByRole('combobox', { name: 'Nationality' })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Mozambique' })).toBeInTheDocument();
+    expect(screen.queryByRole('option', { name: 'Uganda' })).not.toBeInTheDocument();
   });
 });

package/src/patient-registration/field/person-attributes/coded-person-attribute-field.component.tsx

@@ -3,10 +3,10 @@ import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Field } from 'formik';
 import { Layer, Select, SelectItem } from '@carbon/react';
+import { reportError } from '@openmrs/esm-framework';
 import { type PersonAttributeTypeResponse } from '../../patient-registration.types';
 import { useConceptAnswers } from '../field.resource';
 import styles from './../field.scss';
-import { reportError } from '@openmrs/esm-framework';
 
 export interface CodedPersonAttributeFieldProps {
   id: string;
@@ -44,7 +44,7 @@ export function CodedPersonAttributeField({
       );
       setError(true);
     }
-  }, [answerConceptSetUuid, customConceptAnswers]);
+  }, [answerConceptSetUuid, customConceptAnswers, id, t]);
 
   useEffect(() => {
     if (!isLoadingConceptAnswers && !customConceptAnswers.length) {
@@ -72,7 +72,7 @@ export function CodedPersonAttributeField({
         setError(true);
       }
     }
-  }, [isLoadingConceptAnswers, conceptAnswers, customConceptAnswers]);
+  }, [isLoadingConceptAnswers, conceptAnswers, customConceptAnswers, t, id, answerConceptSetUuid]);
 
   const answers = useMemo(() => {
     if (customConceptAnswers.length) {

package/src/patient-registration/field/person-attributes/coded-person-attribute-field.test.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import { Form, Formik } from 'formik';
+import { render, screen } from '@testing-library/react';
+import { useConceptAnswers } from '../field.resource';
+import { CodedPersonAttributeField } from './coded-person-attribute-field.component';
+
+const mockUseConceptAnswers = jest.mocked(useConceptAnswers);
+
+jest.mock('../field.resource', () => ({
+  ...jest.requireActual('../field.resource'),
+  useConceptAnswers: jest.fn(),
+}));
+
+describe('CodedPersonAttributeField', () => {
+  const conceptAnswers = [
+    { uuid: '1', display: 'Option 1' },
+    { uuid: '2', display: 'Option 2' },
+  ];
+
+  const personAttributeType = {
+    format: 'org.openmrs.Concept',
+    display: 'Referred by',
+    uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
+    name: '',
+    description: '',
+  };
+
+  const answerConceptSetUuid = '6682d17f-0777-45e4-a39b-93f77eb3531c';
+  let consoleSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    mockUseConceptAnswers.mockReturnValue({
+      data: conceptAnswers,
+      isLoading: false,
+      error: null,
+    });
+
+    consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    consoleSpy.mockRestore();
+  });
+
+  it('renders an error if there is no concept answer set provided', () => {
+    expect(() => {
+      render(
+        <Formik initialValues={{}} onSubmit={() => {}}>
+          <Form>
+            <CodedPersonAttributeField
+              answerConceptSetUuid={null}
+              customConceptAnswers={[]}
+              id="attributeId"
+              label={personAttributeType.display}
+              personAttributeType={personAttributeType}
+              required={false}
+            />
+          </Form>
+        </Formik>,
+      );
+    }).toThrow(expect.stringMatching(/has been defined without an answer concept set UUID/i));
+  });
+
+  it('renders an error if the concept answer set does not have any concept answers', () => {
+    mockUseConceptAnswers.mockReturnValue({
+      data: [],
+      isLoading: false,
+      error: null,
+    });
+
+    expect(() => {
+      render(
+        <Formik initialValues={{}} onSubmit={() => {}}>
+          <Form>
+            <CodedPersonAttributeField
+              id="attributeId"
+              personAttributeType={personAttributeType}
+              answerConceptSetUuid={answerConceptSetUuid}
+              label={personAttributeType.display}
+              customConceptAnswers={[]}
+              required={false}
+            />
+          </Form>
+        </Formik>,
+      );
+    }).toThrow(expect.stringMatching(/does not have any concept answers/i));
+  });
+
+  it('renders the conceptAnswers as select options', () => {
+    render(
+      <Formik initialValues={{}} onSubmit={() => {}}>
+        <Form>
+          <CodedPersonAttributeField
+            id="attributeId"
+            personAttributeType={personAttributeType}
+            answerConceptSetUuid={answerConceptSetUuid}
+            label={personAttributeType.display}
+            customConceptAnswers={[]}
+            required={false}
+          />
+        </Form>
+      </Formik>,
+    );
+
+    expect(screen.getByLabelText(/Referred by/i)).toBeInTheDocument();
+    expect(screen.getByText(/Option 1/i)).toBeInTheDocument();
+    expect(screen.getByText(/Option 2/i)).toBeInTheDocument();
+  });
+
+  it('renders customConceptAnswers as select options when they are provided', () => {
+    render(
+      <Formik initialValues={{}} onSubmit={() => {}}>
+        <Form>
+          <CodedPersonAttributeField
+            id="attributeId"
+            personAttributeType={personAttributeType}
+            answerConceptSetUuid={answerConceptSetUuid}
+            label={personAttributeType.display}
+            customConceptAnswers={[
+              {
+                uuid: 'A',
+                label: 'Special Option A',
+              },
+              {
+                uuid: 'B',
+                label: 'Special Option B',
+              },
+            ]}
+            required={false}
+          />
+        </Form>
+      </Formik>,
+    );
+
+    expect(screen.getByLabelText(/Referred by/i)).toBeInTheDocument();
+    expect(screen.getByText(/Special Option A/i)).toBeInTheDocument();
+    expect(screen.getByText(/Special Option B/i)).toBeInTheDocument();
+    expect(screen.queryByText(/Option 1/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Option 2/i)).not.toBeInTheDocument();
+  });
+});

package/src/patient-registration/field/person-attributes/location-person-attribute-field.component.tsx

@@ -0,0 +1,105 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { Field, useField } from 'formik';
+import { type PersonAttributeTypeResponse } from '../../patient-registration.types';
+import styles from './../field.scss';
+import { useLocations } from './location-person-attribute-field.resource';
+import { ComboBox, InlineLoading, Layer } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+
+export interface LocationPersonAttributeFieldProps {
+  id: string;
+  personAttributeType: PersonAttributeTypeResponse;
+  label?: string;
+  locationTag: string;
+  required?: boolean;
+}
+
+export function LocationPersonAttributeField({
+  personAttributeType,
+  id,
+  label,
+  locationTag,
+  required,
+}: LocationPersonAttributeFieldProps) {
+  const { t } = useTranslation();
+  const fieldName = `attributes.${personAttributeType.uuid}`;
+  const [field, meta, { setValue }] = useField(`attributes.${personAttributeType.uuid}`);
+  const [searchQuery, setSearchQuery] = useState('');
+  const { locations, isLoading, loadingNewData } = useLocations(locationTag || null, searchQuery);
+  const prevLocationOptions = useRef([]);
+
+  const locationOptions = useMemo(() => {
+    if (!(isLoading && loadingNewData)) {
+      const newOptions = locations.map(({ resource: { id, name } }) => ({ value: id, label: name }));
+      prevLocationOptions.current = newOptions;
+      return newOptions;
+    }
+    return prevLocationOptions.current;
+  }, [locations, isLoading, loadingNewData]);
+
+  const selectedItem = useMemo(() => {
+    if (typeof meta.value === 'string') {
+      return locationOptions.find(({ value }) => value === meta.value) || null;
+    }
+    if (typeof meta.value === 'object' && meta.value) {
+      return locationOptions.find(({ value }) => value === meta.value.uuid) || null;
+    }
+    return null;
+  }, [locationOptions, meta.value]);
+
+  // Callback for when updating the combobox input
+  const handleInputChange = useCallback(
+    (value: string | null) => {
+      if (value) {
+        // If the value exists in the locationOptions (i.e. a label matches the input), exit the function
+        if (locationOptions.find(({ label }) => label === value)) return;
+        // If the input is a new value, set the search query
+        setSearchQuery(value);
+        // Clear the current selected value since the input doesn't match any existing options
+        setValue(null);
+      }
+    },
+    [locationOptions, setValue],
+  );
+  const handleSelect = useCallback(
+    ({ selectedItem }) => {
+      if (selectedItem) {
+        setValue(selectedItem.value);
+      }
+    },
+    [setValue],
+  );
+
+  return (
+    <div
+      className={classNames(styles.customField, styles.halfWidthInDesktopView, styles.locationAttributeFieldContainer)}>
+      <Layer>
+        <Field name={fieldName}>
+          {({ field, form: { touched, errors } }) => {
+            return (
+              <ComboBox
+                id={id}
+                name={`person-attribute-${personAttributeType.uuid}`}
+                titleText={label}
+                items={locationOptions}
+                placeholder={t('searchLocationPersonAttribute', 'Search location')}
+                onInputChange={handleInputChange}
+                required={required}
+                onChange={handleSelect}
+                selectedItem={selectedItem}
+                invalid={errors[fieldName] && touched[fieldName]}
+                typeahead
+              />
+            );
+          }}
+        </Field>
+      </Layer>
+      {loadingNewData && (
+        <div className={styles.loadingContainer}>
+          <InlineLoading />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/patient-registration/field/person-attributes/location-person-attribute-field.resource.tsx

@@ -0,0 +1,48 @@
+import { useMemo } from 'react';
+import { type FetchResponse, fhirBaseUrl, openmrsFetch, useDebounce } from '@openmrs/esm-framework';
+import { type LocationEntry, type LocationResponse } from '@openmrs/esm-service-queues-app/src/types';
+import useSWR from 'swr';
+
+interface UseLocationsResult {
+  locations: Array<LocationEntry>;
+  isLoading: boolean;
+  loadingNewData: boolean;
+}
+
+export function useLocations(locationTag: string | null, searchQuery: string = ''): UseLocationsResult {
+  const debouncedSearchQuery = useDebounce(searchQuery);
+
+  const constructUrl = useMemo(() => {
+    let url = `${fhirBaseUrl}/Location?`;
+    let urlSearchParameters = new URLSearchParams();
+    urlSearchParameters.append('_summary', 'data');
+
+    if (!debouncedSearchQuery) {
+      urlSearchParameters.append('_count', '10');
+    }
+
+    if (locationTag) {
+      urlSearchParameters.append('_tag', locationTag);
+    }
+
+    if (typeof debouncedSearchQuery === 'string' && debouncedSearchQuery != '') {
+      urlSearchParameters.append('name:contains', debouncedSearchQuery);
+    }
+
+    return url + urlSearchParameters.toString();
+  }, [locationTag, debouncedSearchQuery]);
+
+  const { data, error, isLoading, isValidating } = useSWR<FetchResponse<LocationResponse>, Error>(
+    constructUrl,
+    openmrsFetch,
+  );
+
+  return useMemo(
+    () => ({
+      locations: data?.data?.entry || [],
+      isLoading,
+      loadingNewData: isValidating,
+    }),
+    [data, isLoading, isValidating],
+  );
+}

package/src/patient-registration/field/person-attributes/person-attribute-field.component.tsx

@@ -1,12 +1,12 @@
 import React, { useMemo } from 'react';
-import { InlineNotification, TextInputSkeleton, SkeletonText } from '@carbon/react';
+import { InlineNotification, TextInputSkeleton } from '@carbon/react';
 import { type FieldDefinition } from '../../../config-schema';
 import { CodedPersonAttributeField } from './coded-person-attribute-field.component';
 import { usePersonAttributeType } from './person-attributes.resource';
 import { TextPersonAttributeField } from './text-person-attribute-field.component';
 import { useTranslation } from 'react-i18next';
 import styles from '../field.scss';
-import CustomPersonAttributeField from './custom-person-attribute-field.component';
+import { LocationPersonAttributeField } from './location-person-attribute-field.component';
 
 export interface PersonAttributeFieldProps {
   fieldDefinition: FieldDefinition;
@@ -23,26 +23,13 @@ export function PersonAttributeField({ fieldDefinition }: PersonAttributeFieldPr
     switch (personAttributeType.format) {
       case 'java.lang.String':
         return (
-          <>
-            {fieldDefinition.renderType === 'select' ? (
-              <CustomPersonAttributeField
-                personAttributeType={personAttributeType}
-                answerConceptSetUuid={fieldDefinition.answerConceptSetUuid}
-                label={fieldDefinition.label}
-                id={fieldDefinition?.id}
-                customConceptAnswers={fieldDefinition.customConceptAnswers ?? []}
-                required={fieldDefinition.validation?.required ?? false}
-              />
-            ) : (
-              <TextPersonAttributeField
-                personAttributeType={personAttributeType}
-                validationRegex={fieldDefinition.validation?.matches ?? ''}
-                label={fieldDefinition.label}
-                required={fieldDefinition.validation?.required ?? false}
-                id={fieldDefinition?.id}
-              />
-            )}
-          </>
+          <TextPersonAttributeField
+            personAttributeType={personAttributeType}
+            validationRegex={fieldDefinition.validation?.matches ?? ''}
+            label={fieldDefinition.label}
+            required={fieldDefinition.validation?.required ?? false}
+            id={fieldDefinition?.id}
+          />
         );
       case 'org.openmrs.Concept':
         return (
@@ -55,6 +42,16 @@ export function PersonAttributeField({ fieldDefinition }: PersonAttributeFieldPr
             required={fieldDefinition.validation?.required ?? false}
           />
         );
+      case 'org.openmrs.Location':
+        return (
+          <LocationPersonAttributeField
+            personAttributeType={personAttributeType}
+            locationTag={fieldDefinition.locationTag}
+            label={fieldDefinition.label}
+            id={fieldDefinition?.id}
+            required={fieldDefinition.validation?.required ?? false}
+          />
+        );
       default:
         return (
           <InlineNotification kind="error" title="Error">