@kenyaemr/esm-patient-registration-app 5.2.2 → 6.0.0

package/src/patient-registration/form-manager.ts

@@ -1,15 +1,21 @@
-import { FetchResponse, openmrsFetch, queueSynchronizationItem, Session } from '@openmrs/esm-framework';
+import {
+  type FetchResponse,
+  openmrsFetch,
+  queueSynchronizationItem,
+  type Session,
+  restBaseUrl,
+} from '@openmrs/esm-framework';
 import { patientRegistration } from '../constants';
 import {
-  FormValues,
-  AttributeValue,
-  PatientUuidMapType,
-  Patient,
-  CapturePhotoProps,
-  PatientIdentifier,
-  PatientRegistration,
-  RelationshipValue,
-  Encounter,
+  type FormValues,
+  type AttributeValue,
+  type PatientUuidMapType,
+  type Patient,
+  type CapturePhotoProps,
+  type PatientIdentifier,
+  type PatientRegistration,
+  type RelationshipValue,
+  type Encounter,
 } from './patient-registration.types';
 import {
   addPatientIdentifier,
@@ -24,7 +30,7 @@ import {
   updatePatientIdentifier,
   saveEncounter,
 } from './patient-registration.resource';
-import { RegistrationConfig } from '../config-schema';
+import { type RegistrationConfig } from '../config-schema';
 
 export type SavePatientForm = (
   isNewPatient: boolean,
@@ -128,7 +134,7 @@ export class FormManager {
         await savePatientPhoto(
           savePatientResponse.data.uuid,
           capturePhotoProps.imageData,
-          '/ws/rest/v1/obs',
+          `${restBaseUrl}/obs`,
           capturePhotoProps.dateTime || new Date().toISOString(),
           config.concepts.patientPhotoUuid,
         );
@@ -252,7 +258,7 @@ export class FormManager {
       });
 
     /*
-      If there was initially an identifier assigned to the patient, 
+      If there was initially an identifier assigned to the patient,
       which is now not present in the patientIdentifiers(values.identifiers),
       this means that the identifier is meant to be deleted, hence we need
       to delete the respective identifiers.
@@ -302,7 +308,7 @@ export class FormManager {
       person: {
         uuid: values.patientUuid,
         names: FormManager.getNames(values, patientUuidMap),
-        gender: values.gender.charAt(0),
+        gender: values.gender.charAt(0).toUpperCase(),
         birthdate,
         birthdateEstimated: values.birthdateEstimated,
         attributes: FormManager.getPatientAttributes(isNewPatient, values, patientUuidMap),
@@ -354,7 +360,7 @@ export class FormManager {
           .filter(([, value]) => !value)
           .forEach(async ([key]) => {
             const attributeUuid = patientUuidMap[`attribute.${key}`];
-            await openmrsFetch(`/ws/rest/v1/person/${values.patientUuid}/attribute/${attributeUuid}`, {
+            await openmrsFetch(`${restBaseUrl}/person/${values.patientUuid}/attribute/${attributeUuid}`, {
               method: 'DELETE',
             }).catch((err) => {
               console.error(err);
@@ -383,21 +389,13 @@ export class FormManager {
     // provide a valid fhir.Patient object. The various patient chart modules should be able to handle
     // such missing props correctly (and should be updated if they don't).
 
-    // Gender in the original object only uses a single letter. fhir.Patient expects a full string.
-    const genderMap = {
-      M: 'male',
-      F: 'female',
-      O: 'other',
-      U: 'unknown',
-    };
-
     // Mapping inspired by:
     // https://github.com/openmrs/openmrs-module-fhir/blob/669b3c52220bb9abc622f815f4dc0d8523687a57/api/src/main/java/org/openmrs/module/fhir/api/util/FHIRPatientUtil.java#L36
     // https://github.com/openmrs/openmrs-esm-patient-management/blob/94e6f637fb37cf4984163c355c5981ea6b8ca38c/packages/esm-patient-search-app/src/patient-search-result/patient-search-result.component.tsx#L21
     // Update as required.
     return {
       id: patient.uuid,
-      gender: genderMap[patient.person?.gender],
+      gender: patient.person?.gender,
       birthDate: patient.person?.birthdate,
       deceasedBoolean: patient.person.dead,
       deceasedDateTime: patient.person.deathDate,

package/src/patient-registration/input/basic-input/select/select-input.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, waitFor, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Formik, Form } from 'formik';
 import { SelectInput } from './select-input.component';
@@ -28,7 +28,7 @@ describe('the select input', () => {
 
     await user.selectOptions(input, expected);
 
-    await waitFor(() => expect(input.value).toEqual(expected));
+    await expect(input.value).toEqual(expected);
   });
 
   it('should show optional label if the input is not required', async () => {
@@ -40,7 +40,7 @@ describe('the select input', () => {
       </Formik>,
     );
 
-    await waitFor(() => expect(screen.findByRole('combobox')));
+    await expect(screen.findByRole('combobox'));
 
     const selectInput = screen.getByRole('combobox', { name: 'Select (optional)' }) as HTMLSelectElement;
     expect(selectInput.labels).toHaveLength(1);

package/src/patient-registration/input/custom-input/autosuggest/autosuggest.component.tsx

@@ -1,10 +1,11 @@
-import React, { HTMLAttributes, useEffect, useRef, useState } from 'react';
-import { Layer, Search, SearchProps } from '@carbon/react';
+import React, { type HTMLAttributes, useEffect, useRef, useState } from 'react';
+import { Layer, Search, type SearchProps } from '@carbon/react';
 import classNames from 'classnames';
 import styles from './autosuggest.scss';
 
 // FIXME Temporarily included types from Carbon
 type InputPropsBase = Omit<HTMLAttributes<HTMLInputElement>, 'onChange'>;
+
 interface SearchProps extends InputPropsBase {
   /**
    * Specify an optional value for the `autocomplete` property on the underlying
@@ -136,6 +137,7 @@ export const Autosuggest: React.FC<AutosuggestProps> = ({
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const query = e.target.value;
     onSuggestionSelected(name, undefined);
+
     if (query) {
       getSearchResults(query).then((suggestions) => {
         setSuggestions(suggestions);
@@ -173,9 +175,7 @@ export const Autosuggest: React.FC<AutosuggestProps> = ({
       {suggestions.length > 0 && (
         <ul className={styles.suggestions}>
           {suggestions.map((suggestion, index) => (
-            <li //eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
-              key={index}
-              onClick={(e) => handleClick(index)}>
+            <li key={index} onClick={(e) => handleClick(index)}>
               {getDisplayValue(suggestion)}
             </li>
           ))}

package/src/patient-registration/input/custom-input/autosuggest/autosuggest.test.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { Autosuggest } from './autosuggest.component';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { BrowserRouter } from 'react-router-dom';
-import '@testing-library/jest-dom/extend-expect';
-import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 const mockPersons = [
   {
@@ -24,97 +23,110 @@ const mockPersons = [
   },
 ];
 
-const mockGetSearchResults = async (query: string) => {
+const mockedGetSearchResults = async (query: string) => {
   return mockPersons.filter((person) => {
     return person.display.toUpperCase().includes(query.toUpperCase());
   });
 };
 
-const handleSuggestionSelected = jest.fn((field, value) => [field, value]);
-
-describe('autosuggest', () => {
-  const setup = () => {
-    render(
-      <BrowserRouter>
-        <Autosuggest
-          labelText=""
-          id="person"
-          placeholder="Find Person"
-          onSuggestionSelected={handleSuggestionSelected}
-          getSearchResults={mockGetSearchResults}
-          getDisplayValue={(item) => item.display}
-          getFieldValue={(item) => item.uuid}
-        />
-      </BrowserRouter>,
-    );
-  };
-
-  it('should render a search box', () => {
-    setup();
+const mockedHandleSuggestionSelected = jest.fn((field, value) => [field, value]);
+
+describe('Autosuggest', () => {
+  afterEach(() => mockedHandleSuggestionSelected.mockClear());
+
+  it('renders a search box', () => {
+    renderAutosuggest();
+
     expect(screen.getByRole('searchbox')).toBeInTheDocument();
     expect(screen.queryByRole('list')).toBeNull();
   });
 
-  it('should show the search results in a list', async () => {
-    setup();
+  it('renders matching search results in a list when the user types a query', async () => {
+    const user = userEvent.setup();
+
+    renderAutosuggest();
+
     const searchbox = screen.getByRole('searchbox');
-    fireEvent.change(searchbox, { target: { value: 'john' } });
-    const list = await waitFor(() => screen.getByRole('list'));
+    await user.type(searchbox, 'john');
+
+    const list = screen.getByRole('list');
+
     expect(list).toBeInTheDocument();
     expect(list.children).toHaveLength(2);
+    expect(screen.getAllByRole('listitem')[0]).toHaveTextContent('John Doe');
+    expect(screen.getAllByRole('listitem')[1]).toHaveTextContent('John Smith');
   });
 
-  it('should creates the li items whose inner text is gotten through getDisplayValue', async () => {
-    setup();
-    const searchbox = screen.getByRole('searchbox');
-    fireEvent.change(searchbox, { target: { value: 'john' } });
-    const list = await waitFor(() => screen.getAllByRole('listitem'));
-    expect(list[0].textContent).toBe('John Doe');
-    expect(list[1].textContent).toBe('John Smith');
-  });
+  it('clears the list of suggestions when a suggestion is selected', async () => {
+    const user = userEvent.setup();
 
-  it('should trigger the onSuggestionSelected with correct values when li is clicked', async () => {
-    setup();
-    const searchbox = screen.getByRole('searchbox');
-    fireEvent.change(searchbox, { target: { value: 'john' } });
-    const listitems = await waitFor(() => screen.getAllByRole('listitem'));
-    fireEvent.click(listitems[0]);
-    expect(handleSuggestionSelected).toHaveBeenNthCalledWith(4, 'person', 'randomuuid1');
-  });
+    renderAutosuggest();
 
-  it('should clear the suggestions when a suggestion is selected', async () => {
-    setup();
     let list = screen.queryByRole('list');
     expect(list).toBeNull();
+
     const searchbox = screen.getByRole('searchbox');
-    fireEvent.change(searchbox, { target: { value: 'john' } });
-    list = await waitFor(() => screen.getByRole('list'));
+    await user.type(searchbox, 'john');
+
+    list = screen.getByRole('list');
     expect(list).toBeInTheDocument();
+
     const listitems = screen.getAllByRole('listitem');
-    fireEvent.click(listitems[0]);
+    await user.click(listitems[0]);
+
+    expect(mockedHandleSuggestionSelected).toHaveBeenLastCalledWith('person', 'randomuuid1');
+
     list = screen.queryByRole('list');
     expect(list).toBeNull();
   });
 
-  it('should change suggestions when a search input is changed', async () => {
-    setup();
+  it('changes suggestions when a search input is changed', async () => {
+    const user = userEvent.setup();
+
+    renderAutosuggest();
+
     let list = screen.queryByRole('list');
     expect(list).toBeNull();
+
     const searchbox = screen.getByRole('searchbox');
-    fireEvent.change(searchbox, { target: { value: 'john' } });
+    await user.type(searchbox, 'john');
+
     const suggestion = await screen.findByText('John Doe');
     expect(suggestion).toBeInTheDocument();
-    fireEvent.change(searchbox, { target: { value: '' } });
+
+    await user.clear(searchbox);
+
     list = screen.queryByRole('list');
     expect(list).toBeNull();
   });
 
-  it('should hide suggestions when clicked outside of component', async () => {
-    setup();
+  it('hides the list of suggestions when the user clicks outside of the component', async () => {
+    const user = userEvent.setup();
+
+    renderAutosuggest();
+
     const input = screen.getByRole('searchbox');
-    fireEvent.change(input, { target: { value: 'john' } });
+
+    await user.type(input, 'john');
     await screen.findByText('John Doe');
-    fireEvent.mouseDown(document.body);
+    await user.click(document.body);
+
     expect(screen.queryByText('John Doe')).not.toBeInTheDocument();
   });
 });
+
+function renderAutosuggest() {
+  render(
+    <BrowserRouter>
+      <Autosuggest
+        getSearchResults={mockedGetSearchResults}
+        getDisplayValue={(item) => item.display}
+        getFieldValue={(item) => item.uuid}
+        id="person"
+        labelText=""
+        onSuggestionSelected={mockedHandleSuggestionSelected}
+        placeholder="Find Person"
+      />
+    </BrowserRouter>,
+  );
+}

package/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx

@@ -7,7 +7,7 @@ import { ResourcesContext } from '../../../../offline.resources';
 import { showModal, useConfig, UserHasAccess } from '@openmrs/esm-framework';
 import { shouldBlockPatientIdentifierInOfflineMode } from './utils';
 import { deleteIdentifierType, setIdentifierSource } from '../../../field/id/id-field.component';
-import { PatientIdentifierValue } from '../../../patient-registration.types';
+import { type PatientIdentifierValue } from '../../../patient-registration.types';
 import { PatientRegistrationContext } from '../../../patient-registration-context';
 import { Input } from '../../basic-input/input/input.component';
 import styles from '../../input.scss';
@@ -141,7 +141,7 @@ export const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentif
           <UserHasAccess privilege="Delete Patient Identifiers">
             <Button
               size="md"
-              kind="danger--ghost"
+              kind="ghost"
               onClick={handleDelete}
               iconDescription={t('deleteIdentifierTooltip', 'Delete')}
               disabled={disabled}

package/src/patient-registration/input/custom-input/identifier/identifier-input.test.tsx

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import { Formik, Form } from 'formik';
 import { IdentifierInput } from './identifier-input.component';
 import { initialFormValues } from '../../../patient-registration.component';
-import { PatientIdentifierType } from '../../../patient-registration-types';
+import { type PatientIdentifierType } from '../../../patient-registration-types';
 
 jest.mock('@openmrs/esm-framework', () => {
   const originalModule = jest.requireActual('@openmrs/esm-framework');
@@ -52,10 +52,7 @@ describe.skip('identifier input', () => {
       </Formik>,
     );
     const identifierInput = screen.getByLabelText(identifierType.fieldName) as HTMLInputElement;
-    let identifierSourceSelectInput = undefined;
-    try {
-      identifierSourceSelectInput = screen.getByLabelText('source-for-' + identifierType.fieldName) as HTMLInputElement;
-    } catch (e) {}
+    let identifierSourceSelectInput = screen.getByLabelText('source-for-' + identifierType.fieldName);
     return {
       identifierInput,
       identifierSourceSelectInput,

package/src/patient-registration/input/custom-input/identifier/utils.ts

@@ -1,4 +1,4 @@
-import { FetchedPatientIdentifierType, PatientIdentifierType } from '../../../patient-registration.types';
+import { type FetchedPatientIdentifierType, type PatientIdentifierType } from '../../../patient-registration.types';
 
 export function shouldBlockPatientIdentifierInOfflineMode(identifierType: PatientIdentifierType) {
   // Patient Identifiers which are unique and can be manually entered are prohibited while offline because

package/src/patient-registration/input/dummy-data/dummy-data-input.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { v4 } from 'uuid';
-import { FormValues } from '../../patient-registration.types';
+import { type FormValues } from '../../patient-registration.types';
 import styles from './../input.scss';
 
 interface DummyDataInputProps {

package/src/patient-registration/input/dummy-data/dummy-data-input.test.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { DummyDataInput, dummyFormValues } from './dummy-data-input.component';
 import { initialFormValues } from '../../patient-registration.component';
-import { FormValues } from '../../patient-registration-types';
+import { type FormValues } from '../../patient-registration-types';
 
 jest.mock('@openmrs/esm-framework', () => {
   const originalModule = jest.requireActual('@openmrs/esm-framework');
@@ -33,11 +34,10 @@ describe('dummy data input', () => {
   });
 
   it('can input data on button click', async () => {
+    const user = userEvent.setup();
     const input = await setupInput();
 
-    fireEvent.click(input);
-    waitFor(() => {
-      expect(formValues).toEqual(dummyFormValues);
-    });
+    await user.click(input);
+    expect(formValues).toEqual(dummyFormValues);
   });
 });

package/src/patient-registration/patient-registration-context.ts

@@ -1,13 +1,12 @@
 import { useConfig } from '@openmrs/esm-framework';
-import { createContext, SetStateAction } from 'react';
-import { RegistrationConfig } from '../config-schema';
-import { FormValues, CapturePhotoProps } from './patient-registration.types';
+import { createContext, type SetStateAction } from 'react';
+import { type RegistrationConfig } from '../config-schema';
+import { type FormValues, type CapturePhotoProps } from './patient-registration.types';
 
 export interface PatientRegistrationContextProps {
   identifierTypes: Array<any>;
   values: FormValues;
   validationSchema: any;
-  setValidationSchema(value: any): void;
   inEditMode: boolean;
   setFieldValue(field: string, value: any, shouldValidate?: boolean): void;
   setCapturePhotoProps(value: SetStateAction<CapturePhotoProps>): void;

package/src/patient-registration/patient-registration-hooks.ts

@@ -1,28 +1,29 @@
 import {
-  FetchResponse,
-  OpenmrsResource,
+  type FetchResponse,
+  type OpenmrsResource,
   getSynchronizationItems,
   openmrsFetch,
   useConfig,
   usePatient,
+  restBaseUrl,
 } from '@openmrs/esm-framework';
 import last from 'lodash-es/last';
 import camelCase from 'lodash-es/camelCase';
-import { Dispatch, useEffect, useMemo, useState } from 'react';
+import { type Dispatch, useEffect, useMemo, useState } from 'react';
 import useSWR from 'swr';
 import { v4 } from 'uuid';
-import { RegistrationConfig } from '../config-schema';
+import { type RegistrationConfig } from '../config-schema';
 import { patientRegistration } from '../constants';
 import { useConceptAnswers, useGlobalProperties } from '../patient-verification/patient-verification-hook';
 import {
-  FormValues,
-  PatientRegistration,
-  PatientUuidMapType,
-  PersonAttributeResponse,
-  PatientIdentifierResponse,
-  ObsResponse,
-  ConceptAnswers,
-  Encounter,
+  type FormValues,
+  type PatientRegistration,
+  type PatientUuidMapType,
+  type PersonAttributeResponse,
+  type PatientIdentifierResponse,
+  type Encounter,
+  type ConceptAnswers,
+  type ObsResponse,
 } from './patient-registration.types';
 import {
   getAddressFieldValuesFromFhirPatient,
@@ -35,7 +36,7 @@ import { useInitialPatientRelationships } from './section/patient-relationships/
 import dayjs from 'dayjs';
 
 export function useInitialFormValues(patientUuid: string): [FormValues, Dispatch<FormValues>] {
-  const { martialStatus, education, occupation, educationLoad, loadingStatus } = useConcepts();
+  const { martialStatus, education, occupation, educationLoad } = useConcepts();
   const { isLoading: isLoadingPatientToEdit, patient: patientToEdit } = usePatient(patientUuid);
   const { data: attributes, isLoading: isLoadingAttributes } = useInitialPersonAttributes(patientUuid);
   const { data: identifiers, isLoading: isLoadingIdentifiers } = useInitialPatientIdentifiers(patientUuid);
@@ -157,13 +158,13 @@ export function useInitialFormValues(patientUuid: string): [FormValues, Dispatch
   // Set Initial encounter
 
   useEffect(() => {
-    if (!educationLoad || !loadingStatus) {
+    if (!educationLoad) {
       setInitialFormValues((initialFormValues) => ({
         ...initialFormValues,
         concepts: [...occupation, ...martialStatus, ...education],
       }));
     }
-  }, [educationLoad, loadingStatus]);
+  }, [educationLoad]);
 
   return [initialFormValues, setInitialFormValues];
 }
@@ -232,7 +233,7 @@ export function useInitialPatientIdentifiers(patientUuid: string): {
 
   const { data, error, isLoading } = useSWR<FetchResponse<{ results: Array<PatientIdentifierResponse> }>, Error>(
     shouldFetch
-      ? `/ws/rest/v1/patient/${patientUuid}/identifier?v=custom:(uuid,identifier,identifierType:(uuid,required,name),preferred)`
+      ? `${restBaseUrl}/patient/${patientUuid}/identifier?v=custom:(uuid,identifier,identifierType:(uuid,required,name),preferred)`
       : null,
     openmrsFetch,
   );
@@ -269,7 +270,7 @@ function useInitialEncounters(patientUuid: string, patientToEdit: fhir.Patient)
   const { registrationObs } = useConfig() as RegistrationConfig;
   const { data, error, isLoading } = useSWR<FetchResponse<{ results: Array<Encounter> }>>(
     patientToEdit && registrationObs.encounterTypeUuid
-      ? `/ws/rest/v1/encounter?patient=${patientUuid}&v=custom:(encounterDatetime,obs:(concept:ref,value:ref))&encounterType=${registrationObs.encounterTypeUuid}`
+      ? `${restBaseUrl}/encounter?patient=${patientUuid}&v=custom:(encounterDatetime,obs:(concept:ref,value:ref))&encounterType=${registrationObs.encounterTypeUuid}`
       : null,
     openmrsFetch,
   );
@@ -287,7 +288,7 @@ function useInitialPersonAttributes(personUuid: string) {
   const shouldFetch = !!personUuid;
   const { data, error, isLoading } = useSWR<FetchResponse<{ results: Array<PersonAttributeResponse> }>, Error>(
     shouldFetch
-      ? `/ws/rest/v1/person/${personUuid}/attribute?v=custom:(uuid,display,attributeType:(uuid,display,format),value)`
+      ? `${restBaseUrl}/person/${personUuid}/attribute?v=custom:(uuid,display,attributeType:(uuid,display,format),value)`
       : null,
     openmrsFetch,
   );
@@ -322,7 +323,7 @@ export function usePatientObs(patientUuid: string) {
 }
 
 function useConcepts() {
-  const { data: martialStatus, isLoading: loadingStatus } = useConceptAnswers('1054AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA');
+  const config = useConfig<RegistrationConfig>();
   const { data: education, isLoading: educationLoad } = useConceptAnswers('1712AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA');
   const occupation: Array<ConceptAnswers> = [
     {
@@ -355,5 +356,9 @@ function useConcepts() {
     },
   ];
 
-  return { martialStatus, education, occupation, loadingStatus, educationLoad };
+  const martialStatus: Array<ConceptAnswers> = config.fieldDefinitions
+    .find((fieldDefinition) => fieldDefinition.id === 'maritalStatus')
+    .customConceptAnswers.map((concept) => ({ uuid: concept.uuid, display: concept.label }));
+
+  return { martialStatus, education, occupation, educationLoad };
 }

package/src/patient-registration/patient-registration-utils.ts

@@ -1,11 +1,11 @@
 import * as Yup from 'yup';
 import {
-  AddressValidationSchemaType,
-  FormValues,
-  PatientIdentifier,
-  PatientUuidMapType,
-  PatientIdentifierValue,
-  Encounter,
+  type AddressValidationSchemaType,
+  type FormValues,
+  type PatientIdentifier,
+  type PatientUuidMapType,
+  type PatientIdentifierValue,
+  type Encounter,
 } from './patient-registration.types';
 import { parseDate } from '@openmrs/esm-framework';
 import camelCase from 'lodash-es/camelCase';
@@ -120,7 +120,7 @@ export function getFormValuesFromFhirPatient(patient: fhir.Patient) {
   result.additionalMiddleName = additionalPatientName?.given[1];
   result.additionalFamilyName = additionalPatientName?.family;
 
-  result.gender = capitalize(patient.gender);
+  result.gender = patient.gender;
   result.birthdate = patient.birthDate ? parseDate(patient.birthDate) : undefined;
   result.telephoneNumber = patient.telecom ? patient.telecom[0].value : '';
 

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

@@ -4,18 +4,28 @@ import { Button, Link, InlineLoading } from '@carbon/react';
 import { XAxis, ShareKnowledge } from '@carbon/react/icons';
 import { useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Formik, Form, FormikHelpers } from 'formik';
+import { Formik, Form, type FormikHelpers } from 'formik';
 import { createErrorHandler, showSnackbar, useConfig, interpolateUrl, usePatient } from '@openmrs/esm-framework';
-import { validationSchema as initialSchema } from './validation/patient-registration-validation';
-import { FormValues, CapturePhotoProps } from './patient-registration.types';
+import { getValidationSchema } from './validation/patient-registration-validation';
+import { type FormValues, type CapturePhotoProps } from './patient-registration.types';
 import { PatientRegistrationContext } from './patient-registration-context';
-import { SavePatientForm, SavePatientTransactionManager } from './form-manager';
+import { type SavePatientForm, SavePatientTransactionManager } from './form-manager';
 import { usePatientPhoto } from './patient-registration.resource';
 import { DummyDataInput } from './input/dummy-data/dummy-data-input.component';
-import { cancelRegistration, filterUndefinedPatientIdenfier, scrollIntoView } from './patient-registration-utils';
-import { useInitialAddressFieldValues, useInitialFormValues, usePatientUuidMap } from './patient-registration-hooks';
+import {
+  cancelRegistration,
+  filterUndefinedPatientIdenfier,
+  parseAddressTemplateXml,
+  scrollIntoView,
+} from './patient-registration-utils';
+import {
+  useInitialAddressFieldValues,
+  useInitialFormValues,
+  usePatientObs,
+  usePatientUuidMap,
+} from './patient-registration-hooks';
 import { ResourcesContext } from '../offline.resources';
-import { builtInSections, RegistrationConfig, SectionDefinition } from '../config-schema';
+import { builtInSections, type RegistrationConfig, type SectionDefinition } from '../config-schema';
 import { SectionWrapper } from './section/section-wrapper.component';
 import BeforeSavePrompt from './before-save-prompt';
 import styles from './patient-registration.scss';
@@ -34,7 +44,6 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
   const { search } = useLocation();
   const config = useConfig() as RegistrationConfig;
   const [target, setTarget] = useState<undefined | string>();
-  const [validationSchema, setValidationSchema] = useState(initialSchema);
   const { patientUuid: uuidOfPatientToEdit } = useParams();
   const { isLoading: isLoadingPatientToEdit, patient: patientToEdit } = usePatient(uuidOfPatientToEdit);
   const { t } = useTranslation();
@@ -48,6 +57,7 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
   const { data: photo } = usePatientPhoto(patientToEdit?.id);
   const savePatientTransactionManager = useRef(new SavePatientTransactionManager());
   const fieldDefinition = config?.fieldDefinitions?.filter((def) => def.type === 'address');
+  const validationSchema = getValidationSchema(config);
   const [enableClientRegistry, setEnableClientRegistry] = useState(
     inEditMode ? initialFormValues.identifiers['nationalUniquePatientIdentifier']?.identifierValue : false,
   );
@@ -139,6 +149,7 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
           title: t('incompleteForm', 'The following field has errors:'),
           kind: 'warning',
           isLowContrast: true,
+          timeoutInMs: 5000,
         });
       });
     }
@@ -211,7 +222,6 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
                 value={{
                   identifierTypes: identifierTypes,
                   validationSchema,
-                  setValidationSchema,
                   values: props.values,
                   inEditMode,
                   setFieldValue: props.setFieldValue,
@@ -221,7 +231,7 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
                   initialFormValues: props.initialValues,
                   setInitialFormValues,
                 }}>
-                <PatientVerification props={props} />
+                <PatientVerification props={props} setInitialFormValues={setInitialFormValues} />
                 {sections.map((section, index) => (
                   <SectionWrapper
                     key={`registration-section-${section.id}`}