From 9a5d067dd15e87442aa2bbfd4aa84f1a028324c8 Mon Sep 17 00:00:00 2001
From: Yassin <yassin791@gmail.com>
Date: Tue, 22 Oct 2024 15:44:21 +0200
Subject: [PATCH 1/4] (feat) O3-4065 Allow manual entry of auto generated
 identifiers (#1338)

* (feat) O3-4065 Allow manual entry of auto generated identifiers

* Remove id field configuration
Interpolate optional identifier label

* Update packages/esm-patient-registration-app/src/patient-registration/form-manager.test.ts

Co-authored-by: Ian <52504170+ibacher@users.noreply.github.com>

* Restore line

* Update packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx

Co-authored-by: Ian <52504170+ibacher@users.noreply.github.com>

---------

Co-authored-by: Ian <52504170+ibacher@users.noreply.github.com>
---
 .../field/id/id-field.component.tsx           |  12 +-
 .../field/id/id-field.test.tsx                |  33 +++-
 .../patient-registration/form-manager.test.ts |  17 ++
 .../src/patient-registration/form-manager.ts  |  14 +-
 .../identifier/identifier-input.component.tsx |  24 ++-
 .../identifier/identifier-input.test.tsx      | 153 +++++++++++-------
 .../translations/en.json                      |   1 +
 7 files changed, 174 insertions(+), 80 deletions(-)

diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/id/id-field.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/id/id-field.component.tsx
index cfd27ba5e..9fb88e79e 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/id/id-field.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/id/id-field.component.tsx
@@ -25,14 +25,16 @@ export function setIdentifierSource(
   selectedSource: IdentifierSource;
 } {
   const autoGeneration = identifierSource?.autoGenerationOption?.automaticGenerationEnabled;
+  const manualEntryEnabled = identifierSource?.autoGenerationOption?.manualEntryEnabled;
   return {
     selectedSource: identifierSource,
     autoGeneration,
-    identifierValue: autoGeneration
-      ? 'auto-generated'
-      : identifierValue !== 'auto-generated'
-        ? identifierValue
-        : initialValue,
+    identifierValue:
+      autoGeneration && !manualEntryEnabled
+        ? 'auto-generated'
+        : identifierValue !== 'auto-generated'
+          ? identifierValue
+          : initialValue,
   };
 }
 
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/id/id-field.test.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/id/id-field.test.tsx
index 0b9e2ab20..49f28bc4b 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/id/id-field.test.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/id/id-field.test.tsx
@@ -1,13 +1,14 @@
-import React from 'react';
-import userEvent from '@testing-library/user-event';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Form, Formik } from 'formik';
-import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
-import { Identifiers } from './id-field.component';
-import { mockOpenmrsId, mockIdentifierTypes, mockPatient, mockSession } from '__mocks__';
-import { type RegistrationConfig, esmPatientRegistrationSchema } from '../../../config-schema';
-import { type Resources, ResourcesContext } from '../../../offline.resources';
+import React from 'react';
+import { mockIdentifierTypes, mockOpenmrsId, mockPatient, mockSession } from '__mocks__';
+import { esmPatientRegistrationSchema, type RegistrationConfig } from '../../../config-schema';
+import { ResourcesContext, type Resources } from '../../../offline.resources';
 import { PatientRegistrationContext, type PatientRegistrationContextProps } from '../../patient-registration-context';
+import { type IdentifierSource } from '../../patient-registration.types';
+import { Identifiers, setIdentifierSource } from './id-field.component';
 
 const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
 
@@ -120,3 +121,21 @@ describe('Identifiers', () => {
     expect(screen.getByRole('button', { name: 'Close overlay' })).toBeInTheDocument();
   });
 });
+
+describe('setIdentifierSource', () => {
+  describe('auto-generation', () => {
+    it('should return auto-generated as the identifier value', () => {
+      const identifierSource = { autoGenerationOption: { automaticGenerationEnabled: true } } as IdentifierSource;
+      const { identifierValue } = setIdentifierSource(identifierSource, '', '');
+      expect(identifierValue).toBe('auto-generated');
+    });
+
+    it('should return the identifier value when manual entry enabled', () => {
+      const identifierSource = {
+        autoGenerationOption: { automaticGenerationEnabled: true, manualEntryEnabled: true },
+      } as IdentifierSource;
+      const { identifierValue } = setIdentifierSource(identifierSource, '10001V', '');
+      expect(identifierValue).toBe('10001V');
+    });
+  });
+});
diff --git a/packages/esm-patient-registration-app/src/patient-registration/form-manager.test.ts b/packages/esm-patient-registration-app/src/patient-registration/form-manager.test.ts
index ae625319e..e2e6eea63 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/form-manager.test.ts
+++ b/packages/esm-patient-registration-app/src/patient-registration/form-manager.test.ts
@@ -1,8 +1,11 @@
 import { FormManager } from './form-manager';
 import { type FormValues } from './patient-registration.types';
+import { generateIdentifier } from './patient-registration.resource';
 
 jest.mock('./patient-registration.resource');
 
+const mockGenerateIdentifier = generateIdentifier as jest.Mock;
+
 const formValues: FormValues = {
   patientUuid: '',
   givenName: '',
@@ -66,5 +69,19 @@ describe('FormManager', () => {
         },
       ]);
     });
+    it('should generate identifier if it has autoGeneration and manual entry disabled', async () => {
+      formValues.identifiers.foo.autoGeneration = true;
+      formValues.identifiers.foo.selectedSource.autoGenerationOption.manualEntryEnabled = false;
+      mockGenerateIdentifier.mockResolvedValue({ data: { identifier: '10001V' } });
+      await FormManager.savePatientIdentifiers(true, undefined, formValues.identifiers, {}, 'Nyc');
+      expect(mockGenerateIdentifier.mock.calls).toHaveLength(1);
+    });
+
+    it('should not generate identifiers if manual entry enabled and identifier value given', async () => {
+      formValues.identifiers.foo.autoGeneration = true;
+      formValues.identifiers.foo.selectedSource.autoGenerationOption.manualEntryEnabled = true;
+      await FormManager.savePatientIdentifiers(true, undefined, formValues.identifiers, {}, 'Nyc');
+      expect(mockGenerateIdentifier.mock.calls).toHaveLength(0);
+    });
   });
 });
diff --git a/packages/esm-patient-registration-app/src/patient-registration/form-manager.ts b/packages/esm-patient-registration-app/src/patient-registration/form-manager.ts
index b682d038f..d1b9c9c05 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/form-manager.ts
+++ b/packages/esm-patient-registration-app/src/patient-registration/form-manager.ts
@@ -241,11 +241,15 @@ export class FormManager {
           initialValue,
         } = patientIdentifier;
 
-        const identifier = !autoGeneration
-          ? identifierValue
-          : await (
-              await generateIdentifier(selectedSource.uuid)
-            ).data.identifier;
+        const autoGenerationManualEntry =
+          autoGeneration && selectedSource?.autoGenerationOption?.manualEntryEnabled && !!identifierValue;
+
+        const identifier =
+          !autoGeneration || autoGenerationManualEntry
+            ? identifierValue
+            : await (
+                await generateIdentifier(selectedSource.uuid)
+              ).data.identifier;
         const identifierToCreate = {
           uuid: identifierUuid,
           identifier,
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx
index 3a3166ceb..3a8dd0490 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx
@@ -26,7 +26,8 @@ const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fi
     () => identifierTypes.find((identifierType) => identifierType.uuid === patientIdentifier.identifierTypeUuid),
     [patientIdentifier, identifierTypes],
   );
-  const { autoGeneration, initialValue, identifierValue, identifierName, required } = patientIdentifier;
+  const { autoGeneration, initialValue, identifierValue, identifierName, required, selectedSource } = patientIdentifier;
+  const manualEntryEnabled = selectedSource?.autoGenerationOption?.manualEntryEnabled;
   const [hideInputField, setHideInputField] = useState(autoGeneration || initialValue === identifierValue);
   const name = `identifiers.${fieldName}.identifierValue`;
   const [identifierField, identifierFieldMeta] = useField(name);
@@ -46,8 +47,8 @@ const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fi
     setFieldValue(`identifiers.${fieldName}`, {
       ...patientIdentifier,
       identifierValue: initialValue,
-      selectedSource: null,
-      autoGeneration: false,
+      selectedSource,
+      autoGeneration,
     } as PatientIdentifierValue);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialValue, setHideInputField]);
@@ -57,6 +58,7 @@ const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fi
     setFieldValue(`identifiers.${fieldName}`, {
       ...patientIdentifier,
       ...setIdentifierSource(identifierType?.identifierSources?.[0], initialValue, initialValue),
+      ...(autoGeneration && manualEntryEnabled && { identifierValue: initialValue ?? '' }),
     });
   };
 
@@ -83,9 +85,12 @@ const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fi
     }
   };
 
+  const showEditButton = !required && hideInputField && (!!initialValue || manualEntryEnabled);
+  const showResetButton =
+    (!!initialValue && initialValue !== identifierValue) || (!hideInputField && manualEntryEnabled);
   return (
     <div className={styles.IDInput}>
-      {!autoGeneration && !hideInputField ? (
+      {!hideInputField ? (
         <Input
           id={name}
           labelText={identifierName}
@@ -99,8 +104,10 @@ const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fi
         />
       ) : (
         <div className={styles.textID}>
-          <p className={styles.label}>{identifierName}</p>
-          <p data-testid="identifier-label" className={styles.bodyShort02}>
+          <p data-testid="identifier-label" className={styles.label}>
+            {required ? identifierName : `${t('optionalIdentifierLabel', { identifierName })}`}
+          </p>
+          <p data-testid="identifier-placeholder" className={styles.bodyShort02}>
             {autoGeneration ? t('autoGeneratedPlaceholderText', 'Auto-generated') : identifierValue}
           </p>
           <input data-testid="identifier-input" type="hidden" {...identifierField} disabled />
@@ -111,9 +118,10 @@ const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fi
         </div>
       )}
       <div style={{ marginBottom: '1rem' }}>
-        {!patientIdentifier.required && patientIdentifier.initialValue && hideInputField && (
+        {showEditButton && (
           <UserHasAccess privilege="Edit Patient Identifiers">
             <Button
+              data-testid="edit-button"
               size="md"
               kind="ghost"
               onClick={handleEdit}
@@ -124,7 +132,7 @@ const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fi
             </Button>
           </UserHasAccess>
         )}
-        {initialValue && initialValue !== identifierValue && (
+        {showResetButton && (
           <UserHasAccess privilege="Edit Patient Identifiers">
             <Button
               size="md"
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.test.tsx b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.test.tsx
index 2647c6ee3..78e1e9e68 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.test.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.test.tsx
@@ -2,6 +2,8 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Form, Formik } from 'formik';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { esmPatientRegistrationSchema, type RegistrationConfig } from '../../../../config-schema';
 import { ResourcesContext, type Resources } from '../../../../offline.resources';
 import {
   PatientRegistrationContext,
@@ -11,16 +13,6 @@ import type { AddressTemplate, FormValues, PatientIdentifierValue } from '../../
 import IdentifierInput from './identifier-input.component';
 import userEvent from '@testing-library/user-event';
 
-const predefinedAddressTemplate = {
-  uuid: 'test-address-template-uuid',
-  property: 'layout.address.format',
-  description: 'Test Address Template',
-  display:
-    'Layout - Address Format = <org.openmrs.layout.address.AddressTemplate>\n     <nameMappings class="properties">\n       <property name="postalCode" value="Location.postalCode"/>\n       <property name="address2" value="Location.address2"/>\n       <property name="address1" value="Location.address1"/>\n       <property name="country" value="Location.country"/>\n       <property name="stateProvince" value="Location.stateProvince"/>\n       <property name="cityVillage" value="Location.cityVillage"/>\n     </nameMappings>\n     <sizeMappings class="properties">\n       <property name="postalCode" value="10"/>\n       <property name="address2" value="40"/>\n       <property name="address1" value="40"/>\n       <property name="country" value="10"/>\n       <property name="stateProvince" value="10"/>\n       <property name="cityVillage" value="10"/>\n     </sizeMappings>\n     <lineByLineFormat>\n       <string>address1</string>\n       <string>address2</string>\n       <string>cityVillage stateProvince country postalCode</string>\n     </lineByLineFormat>\n   </org.openmrs.layout.address.AddressTemplate>',
-  value:
-    '<org.openmrs.layout.address.AddressTemplate>\r\n     <nameMappings class="properties">\r\n       <property name="postalCode" value="Location.postalCode"/>\r\n       <property name="address2" value="Location.address2"/>\r\n       <property name="address1" value="Location.address1"/>\r\n       <property name="country" value="Location.country"/>\r\n       <property name="stateProvince" value="Location.stateProvince"/>\r\n       <property name="cityVillage" value="Location.cityVillage"/>\r\n     </nameMappings>\r\n     <sizeMappings class="properties">\r\n       <property name="postalCode" value="4"/>\r\n       <property name="address1" value="40"/>\r\n       <property name="address2" value="40"/>\r\n       <property name="country" value="10"/>\r\n       <property name="stateProvince" value="10"/>\r\n       <property name="cityVillage" value="10"/>\r\n       <asset name="cityVillage" value="10"/>\r\n     </sizeMappings>\r\n     <lineByLineFormat>\r\n       <string>address1 address2</string>\r\n       <string>cityVillage stateProvince postalCode</string>\r\n       <string>country</string>\r\n     </lineByLineFormat>\r\n     <elementDefaults class="properties">\r\n            <property name="country" value=""/>\r\n     </elementDefaults>\r\n     <elementRegex class="properties">\r\n            <property name="address1" value="[a-zA-Z]+$"/>\r\n     </elementRegex>\r\n     <elementRegexFormats class="properties">\r\n            <property name="address1" value="Countries can only be letters"/>\r\n     </elementRegexFormats>\r\n   </org.openmrs.layout.address.AddressTemplate>',
-};
-
 const mockIdentifierTypes = [
   {
     fieldName: 'openMrsId',
@@ -44,7 +36,7 @@ const mockIdentifierTypes = [
 ];
 
 const mockResourcesContextValue: Resources = {
-  addressTemplate: predefinedAddressTemplate as unknown as AddressTemplate,
+  addressTemplate: {} as AddressTemplate,
   currentSession: {
     authenticated: true,
     sessionId: 'JSESSION',
@@ -68,18 +60,23 @@ const mockContextValues: PatientRegistrationContextProps = {
   values: {} as FormValues,
 };
 
+const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
+
 describe('identifier input', () => {
+  mockUseConfig.mockReturnValue({
+    ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+  });
+
   const fieldName = 'openMrsId';
   const openmrsID = {
     identifierTypeUuid: '05a29f94-c0ed-11e2-94be-8c13b969e334',
     initialValue: '',
-    identifierValue: '',
     identifierName: 'OpenMRS ID',
     selectedSource: {
       uuid: '01af8526-cea4-4175-aa90-340acb411771',
       name: 'Generator 2 for OpenMRS ID',
       autoGenerationOption: {
-        manualEntryEnabled: true,
+        manualEntryEnabled: false,
         automaticGenerationEnabled: true,
       },
     },
@@ -88,10 +85,10 @@ describe('identifier input', () => {
     required: true,
   };
 
-  const setupIdentifierInput = async (patientIdentifier: PatientIdentifierValue) => {
+  const setupIdentifierInput = (patientIdentifier: PatientIdentifierValue, initialValues = {}) => {
     render(
       <ResourcesContext.Provider value={mockResourcesContextValue}>
-        <Formik initialValues={{}} onSubmit={jest.fn()}>
+        <Formik initialValues={initialValues} onSubmit={jest.fn()}>
           <Form>
             <PatientRegistrationContext.Provider value={mockContextValues}>
               <IdentifierInput patientIdentifier={patientIdentifier} fieldName={fieldName} />
@@ -100,56 +97,102 @@ describe('identifier input', () => {
         </Formik>
       </ResourcesContext.Provider>,
     );
-
-    let identifierLabel: HTMLParagraphElement;
-    let identifierInput: HTMLInputElement;
-    if (patientIdentifier.autoGeneration) {
-      identifierLabel = screen.getByTestId('identifier-label');
-      identifierInput = screen.getByTestId('identifier-input');
-    } else {
-      identifierLabel = screen.getByText(patientIdentifier.identifierName);
-      identifierInput = screen.getByLabelText(patientIdentifier.identifierName);
-    }
-    return {
-      identifierLabel,
-      identifierInput,
-    };
   };
 
-  it('shows the identifier input', async () => {
-    const { identifierInput } = await setupIdentifierInput(openmrsID);
-    expect(identifierInput).toBeInTheDocument();
+  it('shows the identifier input', () => {
+    openmrsID.autoGeneration = false;
+    setupIdentifierInput(openmrsID);
+    expect(screen.getByLabelText(openmrsID.identifierName)).toBeInTheDocument();
   });
 
-  describe('Auto-generated identifier', () => {
-    openmrsID.autoGeneration = true;
+  it('displays an edit button when there is an initial value', async () => {
+    // setup
+    openmrsID.autoGeneration = false;
+    openmrsID.required = false;
+    openmrsID.initialValue = '1002UU9';
+    openmrsID.identifierValue = '1002UU9';
+    // replay
+    setupIdentifierInput(openmrsID);
+    expect(screen.getByText('Edit')).toBeInTheDocument();
+  });
 
-    it('hides the input when the identifier is auto-generated', async () => {
-      const { identifierInput } = await setupIdentifierInput(openmrsID);
-      expect(identifierInput.type).toBe('hidden');
-    });
+  it('hides the edit button when the identifier is required', async () => {
+    // setup
+    openmrsID.autoGeneration = false;
+    openmrsID.required = true;
+    openmrsID.initialValue = '1002UU9';
+    openmrsID.identifierValue = '1002UU9';
+    // replay
+    setupIdentifierInput(openmrsID);
+    expect(screen.queryByText('Edit')).not.toBeInTheDocument();
+  });
 
-    it("displays 'Auto-Generated' when the indentifier has auto generation", async () => {
-      const { identifierLabel, identifierInput } = await setupIdentifierInput(openmrsID);
-      expect(identifierLabel.innerHTML).toBe('Auto-generated');
-      expect(identifierInput.disabled).toBe(true);
+  it('displays a delete button when the identifier is not a default type', () => {
+    // setup
+    openmrsID.required = false;
+    // replay
+    setupIdentifierInput(openmrsID);
+    expect(screen.getByText('Delete')).toBeInTheDocument();
+  });
+
+  describe('auto-generated identifier', () => {
+    it('hides the input when the identifier is auto-generated', () => {
+      openmrsID.autoGeneration = true;
+      setupIdentifierInput(openmrsID);
+      expect(screen.getByTestId('identifier-input').type).toBe('hidden');
     });
 
-    it('displays an edit button when there is an initial value', async () => {
-      // setup
-      openmrsID.required = false;
-      openmrsID.initialValue = '1002UU9';
-      // replay
-      await setupIdentifierInput(openmrsID);
-      expect(screen.getByText('Edit')).toBeInTheDocument();
+    it("displays 'Auto-Generated' when the indentifier has auto generation", () => {
+      openmrsID.autoGeneration = true;
+      setupIdentifierInput(openmrsID);
+      expect(screen.getByTestId('identifier-placeholder').innerHTML).toBe('Auto-generated');
+      expect(screen.getByTestId('identifier-input')).toBeDisabled();
     });
 
-    it('displays a delete button when the identifier is not a default type', async () => {
-      // setup
-      openmrsID.required = false;
-      // replay
-      await setupIdentifierInput(openmrsID);
-      expect(screen.getByText('Delete')).toBeInTheDocument();
+    describe('manual entry allowed', () => {
+      openmrsID.selectedSource = {
+        autoGenerationOption: {
+          manualEntryEnabled: true,
+        },
+      };
+
+      it('shows the edit button', () => {
+        openmrsID.autoGeneration = true;
+        setupIdentifierInput(openmrsID);
+        expect(screen.getByText('Edit')).toBeInTheDocument();
+      });
+
+      describe('edit button clicked', () => {
+        it('displays an empty input field', async () => {
+          const user = userEvent.setup();
+          openmrsID.autoGeneration = true;
+          openmrsID.required = false;
+          openmrsID.selectedSource = {
+            autoGenerationOption: {
+              manualEntryEnabled: true,
+            },
+          };
+          setupIdentifierInput(openmrsID);
+          const editButton = screen.getByTestId('edit-button');
+          await user.click(editButton);
+          expect(screen.getByLabelText(new RegExp(`${openmrsID.identifierName}`)).value).toBe('');
+        });
+
+        it('displays an input field with the identifier value if it exists', async () => {
+          const user = userEvent.setup();
+          openmrsID.autoGeneration = true;
+          openmrsID.required = false;
+          openmrsID.selectedSource = {
+            autoGenerationOption: {
+              manualEntryEnabled: true,
+            },
+          };
+          setupIdentifierInput(openmrsID, { identifiers: { [fieldName]: { identifierValue: '10001V' } } });
+          const editButton = screen.getByTestId('edit-button');
+          await user.click(editButton);
+          expect(screen.getByLabelText(new RegExp(`${openmrsID.identifierName}`)).value).toBe('10001V');
+        });
+      });
     });
   });
 });
diff --git a/packages/esm-patient-registration-app/translations/en.json b/packages/esm-patient-registration-app/translations/en.json
index ff2890d24..ebc875ad9 100644
--- a/packages/esm-patient-registration-app/translations/en.json
+++ b/packages/esm-patient-registration-app/translations/en.json
@@ -77,6 +77,7 @@
   "numberInNameDubious": "Number in name is dubious",
   "obsFieldUnknownDatatype": "Concept for obs field '{{fieldDefinitionId}}' has unknown datatype '{{datatypeName}}'",
   "optional": "optional",
+  "optionalIdentifierLabel": "{{identifierName}} (optional)",
   "other": "Other",
   "patientNameKnown": "Patient's Name is Known?",
   "patientRegistrationBreadcrumb": "Patient Registration",

From 686e3b897fb5d9e4e364914ec17808b3bed1f81f Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Tue, 22 Oct 2024 21:24:36 +0300
Subject: [PATCH 2/4] (fix) Additional fixes supporting #1338

---
 .../src/patient-registration/field/field.scss |  6 +++++
 .../field/id/id-field.component.tsx           |  2 +-
 .../field/id/id-field.test.tsx                | 12 ++++-----
 .../patient-registration/form-manager.test.ts |  1 +
 .../src/patient-registration/form-manager.ts  |  1 +
 .../identifier/identifier-input.component.tsx |  2 +-
 .../identifier/identifier-input.test.tsx      | 27 +++++++++++--------
 .../src/patient-registration/input/input.scss |  5 ++++
 .../maternal-ward-patient-card.component.tsx  |  2 +-
 turbo.json                                    |  9 ++++++-
 10 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/field.scss b/packages/esm-patient-registration-app/src/patient-registration/field/field.scss
index 7f3595392..5cca51fc0 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/field.scss
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/field.scss
@@ -99,7 +99,13 @@
   align-items: center;
 }
 
+.arrowRightIcon {
+  fill: currentColor !important;
+}
+
 .configureIdentifiersButton {
+  display: flex;
+  align-items: center;
   margin: 0 0 layout.$spacing-05 layout.$spacing-05;
 
   svg {
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/id/id-field.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/id/id-field.component.tsx
index 9fb88e79e..44dbdca60 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/id/id-field.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/id/id-field.component.tsx
@@ -128,7 +128,7 @@ export const Identifiers: React.FC = () => {
             className={styles.configureIdentifiersButton}
             onClick={() => setShowIdentifierOverlay(true)}
             size={isDesktop(layout) ? 'sm' : 'md'}>
-            {t('configure', 'Configure')} <ArrowRight size={16} />
+            {t('configure', 'Configure')} <ArrowRight className={styles.arrowRightIcon} size={16} />
           </Button>
         </div>
       </UserHasAccess>
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/id/id-field.test.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/id/id-field.test.tsx
index 49f28bc4b..6865cc827 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/id/id-field.test.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/id/id-field.test.tsx
@@ -1,19 +1,19 @@
-import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import React from 'react';
+import { Form, Formik } from 'formik';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { Form, Formik } from 'formik';
-import React from 'react';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { type AddressTemplate, type IdentifierSource } from '../../patient-registration.types';
 import { mockIdentifierTypes, mockOpenmrsId, mockPatient, mockSession } from '__mocks__';
 import { esmPatientRegistrationSchema, type RegistrationConfig } from '../../../config-schema';
 import { ResourcesContext, type Resources } from '../../../offline.resources';
 import { PatientRegistrationContext, type PatientRegistrationContextProps } from '../../patient-registration-context';
-import { type IdentifierSource } from '../../patient-registration.types';
 import { Identifiers, setIdentifierSource } from './id-field.component';
 
 const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
 
 const mockResourcesContextValue = {
-  addressTemplate: null,
+  addressTemplate: null as unknown as AddressTemplate,
   currentSession: mockSession.data,
   identifierTypes: [],
   relationshipTypes: [],
@@ -53,7 +53,7 @@ const mockContextValues: PatientRegistrationContextProps = {
   setInitialFormValues: jest.fn(),
   validationSchema: null,
   values: mockInitialFormValues,
-};
+} as unknown as PatientRegistrationContextProps;
 
 describe('Identifiers', () => {
   beforeEach(() => {
diff --git a/packages/esm-patient-registration-app/src/patient-registration/form-manager.test.ts b/packages/esm-patient-registration-app/src/patient-registration/form-manager.test.ts
index e2e6eea63..b54a3ee48 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/form-manager.test.ts
+++ b/packages/esm-patient-registration-app/src/patient-registration/form-manager.test.ts
@@ -69,6 +69,7 @@ describe('FormManager', () => {
         },
       ]);
     });
+
     it('should generate identifier if it has autoGeneration and manual entry disabled', async () => {
       formValues.identifiers.foo.autoGeneration = true;
       formValues.identifiers.foo.selectedSource.autoGenerationOption.manualEntryEnabled = false;
diff --git a/packages/esm-patient-registration-app/src/patient-registration/form-manager.ts b/packages/esm-patient-registration-app/src/patient-registration/form-manager.ts
index d1b9c9c05..531e8dc44 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/form-manager.ts
+++ b/packages/esm-patient-registration-app/src/patient-registration/form-manager.ts
@@ -250,6 +250,7 @@ export class FormManager {
             : await (
                 await generateIdentifier(selectedSource.uuid)
               ).data.identifier;
+
         const identifierToCreate = {
           uuid: identifierUuid,
           identifier,
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx
index 3a8dd0490..a7053512c 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx
@@ -117,7 +117,7 @@ const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fi
           )}
         </div>
       )}
-      <div style={{ marginBottom: '1rem' }}>
+      <div className={styles.actionButtonContainer}>
         {showEditButton && (
           <UserHasAccess privilege="Edit Patient Identifiers">
             <Button
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.test.tsx b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.test.tsx
index 78e1e9e68..fc652ff5f 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.test.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.test.tsx
@@ -9,7 +9,12 @@ import {
   PatientRegistrationContext,
   type PatientRegistrationContextProps,
 } from '../../../patient-registration-context';
-import type { AddressTemplate, FormValues, PatientIdentifierValue } from '../../../patient-registration.types';
+import type {
+  AddressTemplate,
+  FormValues,
+  IdentifierSource,
+  PatientIdentifierValue,
+} from '../../../patient-registration.types';
 import IdentifierInput from './identifier-input.component';
 import userEvent from '@testing-library/user-event';
 
@@ -79,11 +84,11 @@ describe('identifier input', () => {
         manualEntryEnabled: false,
         automaticGenerationEnabled: true,
       },
-    },
+    } as IdentifierSource,
     autoGeneration: false,
     preferred: true,
     required: true,
-  };
+  } as PatientIdentifierValue;
 
   const setupIdentifierInput = (patientIdentifier: PatientIdentifierValue, initialValues = {}) => {
     render(
@@ -101,7 +106,7 @@ describe('identifier input', () => {
 
   it('shows the identifier input', () => {
     openmrsID.autoGeneration = false;
-    setupIdentifierInput(openmrsID);
+    setupIdentifierInput(openmrsID as PatientIdentifierValue);
     expect(screen.getByLabelText(openmrsID.identifierName)).toBeInTheDocument();
   });
 
@@ -112,7 +117,7 @@ describe('identifier input', () => {
     openmrsID.initialValue = '1002UU9';
     openmrsID.identifierValue = '1002UU9';
     // replay
-    setupIdentifierInput(openmrsID);
+    setupIdentifierInput(openmrsID as PatientIdentifierValue);
     expect(screen.getByText('Edit')).toBeInTheDocument();
   });
 
@@ -139,7 +144,7 @@ describe('identifier input', () => {
     it('hides the input when the identifier is auto-generated', () => {
       openmrsID.autoGeneration = true;
       setupIdentifierInput(openmrsID);
-      expect(screen.getByTestId('identifier-input').type).toBe('hidden');
+      expect(screen.getByTestId('identifier-input')).toHaveAttribute('type', 'hidden');
     });
 
     it("displays 'Auto-Generated' when the indentifier has auto generation", () => {
@@ -154,7 +159,7 @@ describe('identifier input', () => {
         autoGenerationOption: {
           manualEntryEnabled: true,
         },
-      };
+      } as IdentifierSource;
 
       it('shows the edit button', () => {
         openmrsID.autoGeneration = true;
@@ -171,11 +176,11 @@ describe('identifier input', () => {
             autoGenerationOption: {
               manualEntryEnabled: true,
             },
-          };
+          } as IdentifierSource;
           setupIdentifierInput(openmrsID);
           const editButton = screen.getByTestId('edit-button');
           await user.click(editButton);
-          expect(screen.getByLabelText(new RegExp(`${openmrsID.identifierName}`)).value).toBe('');
+          expect(screen.getByLabelText(new RegExp(`${openmrsID.identifierName}`))).toHaveValue('');
         });
 
         it('displays an input field with the identifier value if it exists', async () => {
@@ -186,11 +191,11 @@ describe('identifier input', () => {
             autoGenerationOption: {
               manualEntryEnabled: true,
             },
-          };
+          } as IdentifierSource;
           setupIdentifierInput(openmrsID, { identifiers: { [fieldName]: { identifierValue: '10001V' } } });
           const editButton = screen.getByTestId('edit-button');
           await user.click(editButton);
-          expect(screen.getByLabelText(new RegExp(`${openmrsID.identifierName}`)).value).toBe('10001V');
+          expect(screen.getByLabelText(new RegExp(`${openmrsID.identifierName}`))).toHaveValue('10001V');
         });
       });
     });
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/input.scss b/packages/esm-patient-registration-app/src/patient-registration/input/input.scss
index b9c271a55..ac6156ac9 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/input/input.scss
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/input.scss
@@ -116,3 +116,8 @@
   margin: 0;
   padding-left: layout.$spacing-05;
 }
+
+.actionButtonContainer {
+  margin-left: layout.$spacing-05;
+  margin-bottom: layout.$spacing-05;
+}
diff --git a/packages/esm-ward-app/src/ward-view/materal-ward/maternal-ward-patient-card.component.tsx b/packages/esm-ward-app/src/ward-view/materal-ward/maternal-ward-patient-card.component.tsx
index 7bb9ce54c..b14c82c68 100644
--- a/packages/esm-ward-app/src/ward-view/materal-ward/maternal-ward-patient-card.component.tsx
+++ b/packages/esm-ward-app/src/ward-view/materal-ward/maternal-ward-patient-card.component.tsx
@@ -84,7 +84,7 @@ const MotherChildBedShareDivider = () => {
   return (
     <div className={maternalWardPatientCardStyles.motherChildBedDivider}>
       <div className={maternalWardPatientCardStyles.motherChildBedDividerLine}></div>
-      <Tag type="purple">{t('motherChildbedShare', 'Mother / Child')}</Tag>
+      <Tag type="purple">{t('motherChildBedShare', 'Mother / Child')}</Tag>
       <div className={maternalWardPatientCardStyles.motherChildBedDividerLine}></div>
     </div>
   );
diff --git a/turbo.json b/turbo.json
index f3689d827..bc1396c59 100644
--- a/turbo.json
+++ b/turbo.json
@@ -18,8 +18,15 @@
         "^typescript"
       ]
     },
-    "test": {},
+    "test": {
+      "dependsOn": [
+        "^test"
+      ]
+    },
     "test:watch": {
+      "dependsOn": [
+        "^test:watch"
+      ],
       "cache": false,
       "persistent": true
     }

From 2d17ea081768391044b50e03d89d3bd0a2b0b26e Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Tue, 22 Oct 2024 22:52:08 +0300
Subject: [PATCH 3/4] (chore) Bump turbo

---
 package.json |  2 +-
 yarn.lock    | 60 ++++++++++++++++++++++++++--------------------------
 2 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/package.json b/package.json
index b4f900fb8..2c0565fe1 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
     "sass": "^1.29.0",
     "sass-loader": "^10.1.0",
     "swc-loader": "^0.2.3",
-    "turbo": "^2.0.6",
+    "turbo": "^2.2.3",
     "typedoc": "^0.22.15",
     "typescript": "^4.0.3",
     "webpack": "^5.74.0",
diff --git a/yarn.lock b/yarn.lock
index 6c3ef6597..a2a212d93 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3071,7 +3071,7 @@ __metadata:
     sass-loader: "npm:^10.1.0"
     swc-loader: "npm:^0.2.3"
     swr: "npm:^2.0.1"
-    turbo: "npm:^2.0.6"
+    turbo: "npm:^2.2.3"
     typedoc: "npm:^0.22.15"
     typescript: "npm:^4.0.3"
     webpack: "npm:^5.74.0"
@@ -16771,58 +16771,58 @@ __metadata:
   languageName: node
   linkType: hard
 
-"turbo-darwin-64@npm:2.0.6":
-  version: 2.0.6
-  resolution: "turbo-darwin-64@npm:2.0.6"
+"turbo-darwin-64@npm:2.2.3":
+  version: 2.2.3
+  resolution: "turbo-darwin-64@npm:2.2.3"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"turbo-darwin-arm64@npm:2.0.6":
-  version: 2.0.6
-  resolution: "turbo-darwin-arm64@npm:2.0.6"
+"turbo-darwin-arm64@npm:2.2.3":
+  version: 2.2.3
+  resolution: "turbo-darwin-arm64@npm:2.2.3"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"turbo-linux-64@npm:2.0.6":
-  version: 2.0.6
-  resolution: "turbo-linux-64@npm:2.0.6"
+"turbo-linux-64@npm:2.2.3":
+  version: 2.2.3
+  resolution: "turbo-linux-64@npm:2.2.3"
   conditions: os=linux & cpu=x64
   languageName: node
   linkType: hard
 
-"turbo-linux-arm64@npm:2.0.6":
-  version: 2.0.6
-  resolution: "turbo-linux-arm64@npm:2.0.6"
+"turbo-linux-arm64@npm:2.2.3":
+  version: 2.2.3
+  resolution: "turbo-linux-arm64@npm:2.2.3"
   conditions: os=linux & cpu=arm64
   languageName: node
   linkType: hard
 
-"turbo-windows-64@npm:2.0.6":
-  version: 2.0.6
-  resolution: "turbo-windows-64@npm:2.0.6"
+"turbo-windows-64@npm:2.2.3":
+  version: 2.2.3
+  resolution: "turbo-windows-64@npm:2.2.3"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
-"turbo-windows-arm64@npm:2.0.6":
-  version: 2.0.6
-  resolution: "turbo-windows-arm64@npm:2.0.6"
+"turbo-windows-arm64@npm:2.2.3":
+  version: 2.2.3
+  resolution: "turbo-windows-arm64@npm:2.2.3"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"turbo@npm:^2.0.6":
-  version: 2.0.6
-  resolution: "turbo@npm:2.0.6"
-  dependencies:
-    turbo-darwin-64: "npm:2.0.6"
-    turbo-darwin-arm64: "npm:2.0.6"
-    turbo-linux-64: "npm:2.0.6"
-    turbo-linux-arm64: "npm:2.0.6"
-    turbo-windows-64: "npm:2.0.6"
-    turbo-windows-arm64: "npm:2.0.6"
+"turbo@npm:^2.2.3":
+  version: 2.2.3
+  resolution: "turbo@npm:2.2.3"
+  dependencies:
+    turbo-darwin-64: "npm:2.2.3"
+    turbo-darwin-arm64: "npm:2.2.3"
+    turbo-linux-64: "npm:2.2.3"
+    turbo-linux-arm64: "npm:2.2.3"
+    turbo-windows-64: "npm:2.2.3"
+    turbo-windows-arm64: "npm:2.2.3"
   dependenciesMeta:
     turbo-darwin-64:
       optional: true
@@ -16838,7 +16838,7 @@ __metadata:
       optional: true
   bin:
     turbo: bin/turbo
-  checksum: 10/685b12a565c823d3392992d77619b860999861a53e046c196a09b03e3ba001db96f62192a0bf68c92b26e3629d91de40f2bd17ec67f83a1f694dfb34d5f480b9
+  checksum: 10/ce7dc0b45d11ba9d2a435daad3357ad45e51a81583134912d1ff5b4569c6d233f56b5fc2459ad5c4a8d41ddec566574e34e5c8649ef64b7546348014bd371ea5
   languageName: node
   linkType: hard
 

From fe14d6097c10bc48af58c4f175ba19363687da7e Mon Sep 17 00:00:00 2001
From: Usama Idriss Kakumba <53287480+usamaidrsk@users.noreply.github.com>
Date: Tue, 22 Oct 2024 23:48:31 +0300
Subject: [PATCH 4/4] (feat) O3-1831: Registration: Support person attribute of
 type Location (#1032)

* ft-create-location-attribute component

* feat: create person location attribute

* (fix) remove useSWR in useCallback

* (fix) update locationTag key description

* (fix) selectedItem logic

* (fix) fix interface naming

* add commonets on the onInputChange func

* (fix) add required param

* (fix) update location-tag description

* (fix) use handleInputChange function naming

* feat: add loading status for searching location

* feat: append loading on the location attribute combobox

* fix: increase number of locations loaded
---
 .../src/config-schema.ts                      |   7 ++
 .../src/patient-registration/field/field.scss |  11 ++
 ...ation-person-attribute-field.component.tsx | 105 ++++++++++++++++++
 ...cation-person-attribute-field.resource.tsx |  48 ++++++++
 .../person-attribute-field.component.tsx      |  13 ++-
 .../translations/en.json                      |   1 +
 6 files changed, 184 insertions(+), 1 deletion(-)
 create mode 100644 packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/location-person-attribute-field.component.tsx
 create mode 100644 packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/location-person-attribute-field.resource.tsx

diff --git a/packages/esm-patient-registration-app/src/config-schema.ts b/packages/esm-patient-registration-app/src/config-schema.ts
index 1e2cadd78..7dc42f171 100644
--- a/packages/esm-patient-registration-app/src/config-schema.ts
+++ b/packages/esm-patient-registration-app/src/config-schema.ts
@@ -18,6 +18,7 @@ export interface FieldDefinition {
     required: boolean;
     matches?: string;
   };
+  locationTag?: string;
   answerConceptSetUuid?: string;
   customConceptAnswers?: Array<CustomConceptAnswer>;
 }
@@ -183,6 +184,12 @@ export const esmPatientRegistrationSchema = {
           _description: 'Optional RegEx for testing the validity of the input.',
         },
       },
+      locationTag: {
+        _type: Type.String,
+        _default: null,
+        _description:
+          'Only for fields with "person attribute" type `org.openmrs.Location`. This filters the list of location options in the dropdown based on their location tag. By default, all locations are shown.',
+      },
       answerConceptSetUuid: {
         _type: Type.ConceptUuid,
         _default: null,
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/field.scss b/packages/esm-patient-registration-app/src/patient-registration/field/field.scss
index 5cca51fc0..887abea6b 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/field.scss
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/field.scss
@@ -121,6 +121,17 @@
   margin-bottom: layout.$spacing-05;
 }
 
+.locationAttributeFieldContainer {
+  position: relative;
+
+  .loadingContainer {
+    background-color: colors.$white;
+    position: absolute;
+    right: layout.$spacing-07;
+    bottom: layout.$spacing-02;
+  }
+}
+
 :global(.omrs-breakpoint-lt-desktop) {
   .grid {
     grid-template-columns: 1fr;
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/location-person-attribute-field.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/location-person-attribute-field.component.tsx
new file mode 100644
index 000000000..ba1156a23
--- /dev/null
+++ b/packages/esm-patient-registration-app/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<string>('');
+  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>
+  );
+}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/location-person-attribute-field.resource.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/location-person-attribute-field.resource.tsx
new file mode 100644
index 000000000..5ce5d8837
--- /dev/null
+++ b/packages/esm-patient-registration-app/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],
+  );
+}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/person-attribute-field.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/person-attribute-field.component.tsx
index fe16305a8..8dd8f4347 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/person-attribute-field.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/person-attribute-field.component.tsx
@@ -1,11 +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 { LocationPersonAttributeField } from './location-person-attribute-field.component';
 
 export interface PersonAttributeFieldProps {
   fieldDefinition: FieldDefinition;
@@ -41,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">
diff --git a/packages/esm-patient-registration-app/translations/en.json b/packages/esm-patient-registration-app/translations/en.json
index ebc875ad9..5c21d45fc 100644
--- a/packages/esm-patient-registration-app/translations/en.json
+++ b/packages/esm-patient-registration-app/translations/en.json
@@ -99,6 +99,7 @@
   "restoreRelationshipActionButton": "Undo",
   "searchAddress": "Search address",
   "searchIdentifierPlaceholder": "Search identifier",
+  "searchLocationPersonAttribute": "Search location",
   "selectAnOption": "Select an option",
   "sexFieldLabelText": "Sex",
   "source": "Source",