@kenyaemr/esm-patient-registration-app 4.5.6 → 4.5.8

package/src/offline.ts

@@ -4,12 +4,12 @@ import {
   navigate,
   setupDynamicOfflineDataHandler,
   setupOfflineSync,
-  subscribePrecacheStaticDependencies,
   SyncProcessOptions,
 } from '@openmrs/esm-framework';
 import { patientRegistration, personRelationshipRepresentation } from './constants';
 import {
   fetchAddressTemplate,
+  fetchAllFieldDefinitionTypes,
   fetchAllRelationshipTypes,
   fetchCurrentSession,
   fetchPatientIdentifierTypesWithSources,
@@ -24,7 +24,7 @@ export function setupOffline() {
     },
   });
 
-  subscribePrecacheStaticDependencies(precacheStaticAssets);
+  precacheStaticAssets();
 
   setupDynamicOfflineDataHandler({
     id: 'esm-patient-registration-app:patient',
@@ -66,6 +66,7 @@ async function precacheStaticAssets() {
     fetchCurrentSession(),
     fetchAddressTemplate(),
     fetchAllRelationshipTypes(),
+    fetchAllFieldDefinitionTypes(),
     fetchPatientIdentifierTypesWithSources(),
   ]);
 }

package/src/patient-registration/field/__mocks__/identifier-types.mock.ts

@@ -0,0 +1,76 @@
+export const mockedIdentifierTypes = [
+  {
+    fieldName: 'openMrsId',
+    format: null,
+    identifierSources: [
+      {
+        uuid: '8549f706-7e85-4c1d-9424-217d50a2988b',
+        name: 'Generator for OpenMRS ID',
+        description: 'Generator for OpenMRS ID',
+        baseCharacterSet: '0123456789ACDEFGHJKLMNPRTUVWXY',
+        prefix: '',
+        autoGenerationOption: {
+          manualEntryEnabled: false,
+          automaticGenerationEnabled: true,
+        },
+      },
+      {
+        uuid: '01af8526-cea4-4175-aa90-340acb411771',
+        name: 'Generator 2 for OpenMRS ID',
+        description: 'Generator 2 for OpenMRS ID',
+        baseCharacterSet: '0123456789ACDEFGHJKLMNPRTUVWXY',
+        prefix: '',
+        autoGenerationOption: {
+          manualEntryEnabled: true,
+          automaticGenerationEnabled: true,
+        },
+      },
+    ],
+    isPrimary: true,
+    name: 'OpenMRS ID',
+    required: true,
+    uniquenessBehavior: 'UNIQUE',
+    uuid: '05a29f94-c0ed-11e2-94be-8c13b969e334',
+    autoGenerationSource: null,
+  },
+  {
+    fieldName: 'idCard',
+    format: null,
+    identifierSources: [],
+    isPrimary: false,
+    name: 'ID Card',
+    required: false,
+    uniquenessBehavior: 'UNIQUE',
+    uuid: 'b4143563-16cd-4439-b288-f83d61670fc8',
+  },
+  {
+    fieldName: 'legacyId',
+    format: null,
+    identifierSources: [],
+    isPrimary: false,
+    name: 'Legacy ID',
+    required: false,
+    uniquenessBehavior: null,
+    uuid: '22348099-3873-459e-a32e-d93b17eda533',
+  },
+  {
+    fieldName: 'oldIdentificationNumber',
+    format: '',
+    identifierSources: [],
+    isPrimary: false,
+    name: 'Old Identification Number',
+    required: false,
+    uniquenessBehavior: null,
+    uuid: '8d79403a-c2cc-11de-8d13-0010c6dffd0f',
+  },
+  {
+    fieldName: 'openMrsIdentificationNumber',
+    format: '',
+    identifierSources: [],
+    isPrimary: false,
+    name: 'OpenMRS Identification Number',
+    required: false,
+    uniquenessBehavior: null,
+    uuid: '8d793bee-c2cc-11de-8d13-0010c6dffd0f',
+  },
+];

package/src/patient-registration/field/__mocks__/identifiers.mock.ts

@@ -0,0 +1,27 @@
+export const openmrsID = {
+  name: 'OpenMRS ID',
+  fieldName: 'openMrsId',
+  required: true,
+  uuid: '05a29f94-c0ed-11e2-94be-8c13b969e334',
+  format: null,
+  isPrimary: true,
+  identifierSources: [
+    {
+      uuid: '691eed12-c0f1-11e2-94be-8c13b969e334',
+      name: 'Generator 1 for OpenMRS ID',
+      autoGenerationOption: {
+        manualEntryEnabled: false,
+        automaticGenerationEnabled: true,
+      },
+    },
+    {
+      uuid: '01af8526-cea4-4175-aa90-340acb411771',
+      name: 'Generator 2 for OpenMRS ID',
+      autoGenerationOption: {
+        manualEntryEnabled: true,
+        automaticGenerationEnabled: true,
+      },
+    },
+  ],
+  autoGenerationSource: null,
+};

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

@@ -22,14 +22,18 @@ export const AddressComponent: React.FC = () => {
     if (!addressTemplate?.lines) {
       return [];
     }
+
     const allFields = addressTemplate?.lines?.flat();
     const fields = allFields?.filter(({ isToken }) => isToken === 'IS_ADDR_TOKEN');
-
-    return fields.map(({ displayText, codeName }) => ({
-      id: codeName,
-      name: codeName,
-      label: displayText,
-    }));
+    const allRequiredFields = Object.fromEntries(addressTemplate?.requiredElements?.map((curr) => [curr, curr]) || []);
+    return fields.map(({ displayText, codeName }) => {
+      return {
+        id: codeName,
+        name: codeName,
+        label: displayText,
+        required: Boolean(allRequiredFields[codeName]),
+      };
+    });
   }, [addressTemplate]);
 
   const { t } = useTranslation();
@@ -83,6 +87,7 @@ export const AddressComponent: React.FC = () => {
             labelText={t(attributes.label)}
             id={attributes.name}
             selected={selected}
+            required={attributes.required}
           />
         ))}
       </AddressComponentContainer>
@@ -123,6 +128,7 @@ export const AddressComponent: React.FC = () => {
             labelText={t(attributes.label)}
             id={attributes.name}
             selected={selected}
+            required={attributes.required}
           />
         ))
       )}

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

@@ -28,6 +28,7 @@ interface AddressComboBoxProps {
     name: string;
     value: string;
     label: string;
+    required?: boolean;
   };
 }
 
@@ -36,6 +37,7 @@ const AddressComboBox: React.FC<AddressComboBoxProps> = ({ attribute }) => {
   const [field, meta, { setValue }] = useField(`address.${attribute.name}`);
   const { fetchEntriesForField, searchString, updateChildElements } = useAddressEntryFetchConfig(attribute.name);
   const { entries } = useAddressEntries(fetchEntriesForField, searchString);
+  const label = t(attribute.label) + (attribute?.required ? '' : ` (${t('optional', 'optional')})`);
 
   const handleInputChange = useCallback(
     (newValue) => {
@@ -62,7 +64,8 @@ const AddressComboBox: React.FC<AddressComboBoxProps> = ({ attribute }) => {
       fieldProps={{
         ...field,
         id: attribute.name,
-        labelText: `${t(attribute.label)} (${t('optional', 'optional')})`,
+        labelText: label,
+        required: attribute?.required,
       }}
       handleInputChange={handleInputChange}
     />

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

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
-import { ContentSwitcher, DatePicker, DatePickerInput, Layer, Switch, TextInput } from '@carbon/react';
+import { ContentSwitcher, Layer, Switch, TextInput } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { useField } from 'formik';
 import { generateFormatting } from '../../date-util';
 import { PatientRegistrationContext } from '../../patient-registration-context';
-import { useConfig } from '@openmrs/esm-framework';
+import { OpenmrsDatePicker, useConfig } from '@openmrs/esm-framework';
 import { RegistrationConfig } from '../../../config-schema';
 import styles from '../field.scss';
 
@@ -42,7 +42,7 @@ export const DobField: React.FC = () => {
     setFieldValue('monthsEstimated', '');
   };
 
-  const onDateChange = ([birthdate]) => {
+  const onDateChange = (birthdate) => {
     setFieldValue('birthdate', birthdate);
   };
 
@@ -89,17 +89,20 @@ export const DobField: React.FC = () => {
       <Layer>
         {!dobUnknown ? (
           <div className={styles.dobField}>
-            <DatePicker dateFormat={dateFormat} datePickerType="single" onChange={onDateChange} maxDate={format(today)}>
-              <DatePickerInput
-                id="birthdate"
-                {...birthdate}
-                placeholder={placeHolder}
-                labelText={t('dateOfBirthLabelText', 'Date of Birth')}
-                invalid={!!(birthdateMeta.touched && birthdateMeta.error)}
-                invalidText={birthdateMeta.error && t(birthdateMeta.error)}
-                value={format(birthdate.value)}
-              />
-            </DatePicker>
+            <OpenmrsDatePicker
+              id="birthdate"
+              {...birthdate}
+              dateFormat={dateFormat}
+              onChange={onDateChange}
+              maxDate={format(today)}
+              labelText={t('dateOfBirthLabelText', 'Date of Birth')}
+              invalid={!!(birthdateMeta.touched && birthdateMeta.error)}
+              invalidText={birthdateMeta.error && t(birthdateMeta.error)}
+              value={format(birthdate.value)}
+              carbonOptions={{
+                placeholder: placeHolder,
+              }}
+            />
           </div>
         ) : (
           <div className={styles.grid}>

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

@@ -8,6 +8,7 @@ import { DobField } from './dob.component';
 import { PatientRegistrationContext } from '../../patient-registration-context';
 import { initialFormValues } from '../../patient-registration.component';
 import { FormValues } from '../../patient-registration-types';
+import { OpenmrsDatePicker } from '@openmrs/esm-styleguide/src/public';
 
 jest.mock('@openmrs/esm-framework', () => {
   const originalModule = jest.requireActual('@openmrs/esm-framework');
@@ -21,6 +22,18 @@ jest.mock('@openmrs/esm-framework', () => {
         },
       },
     })),
+    getLocale: jest.fn().mockReturnValue('en'),
+    OpenmrsDatePicker: (datePickerProps) => (
+      <OpenmrsDatePicker
+        id={datePickerProps.id}
+        dateFormat={datePickerProps.dateFormat}
+        onChange={datePickerProps.onChange}
+        maxDate={datePickerProps.maxDate}
+        labelText={datePickerProps.labelText}
+        value={datePickerProps.value}
+        carbonOptions={datePickerProps.carbonOptions}
+      />
+    ),
   };
 });
 

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

@@ -59,7 +59,7 @@ export function deleteIdentifierType(identifiers: FormValues['identifiers'], ide
 export const Identifiers: React.FC = () => {
   const { identifierTypes } = useContext(ResourcesContext);
   const isLoading = !identifierTypes;
-  const { values, setFieldValue, initialFormValues } = useContext(PatientRegistrationContext);
+  const { values, setFieldValue, initialFormValues, isOffline } = useContext(PatientRegistrationContext);
   const { t } = useTranslation();
   const layout = useLayoutType();
   const [showIdentifierOverlay, setShowIdentifierOverlay] = useState(false);
@@ -101,9 +101,9 @@ export const Identifiers: React.FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [identifierTypes, setFieldValue, defaultPatientIdentifierTypes, values.identifiers, initializeIdentifier]);
 
-  if (isLoading) {
+  if (isLoading && !isOffline) {
     return (
-      <div className={styles.halfWidthInDesktopView}>
+      <div data-testid="loading-skeleton" className={styles.halfWidthInDesktopView}>
         <div className={styles.identifierLabelText}>
           <h4 className={styles.productiveHeading02Light}>{t('idFieldLabelText', 'Identifiers')}</h4>
         </div>

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

@@ -0,0 +1,105 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Identifiers } from './id-field.component';
+import { Resources, ResourcesContext } from '../../../offline.resources';
+import { Form, Formik } from 'formik';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import { openmrsID } from '../__mocks__/identifiers.mock';
+import { mockedIdentifierTypes } from '../__mocks__/identifier-types.mock';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  useConfig: jest.fn().mockImplementation(() => ({
+    defaultPatientIdentifierTypes: ['OpenMRS ID'],
+  })),
+}));
+
+describe('Identifiers', () => {
+  const mockResourcesContextValue = {
+    addressTemplate: [],
+    currentSession: {
+      authenticated: true,
+      sessionId: 'JSESSION',
+      currentProvider: { uuid: 'provider-uuid', identifier: 'PRO-123' },
+    },
+    relationshipTypes: [],
+    identifierTypes: [...mockedIdentifierTypes],
+  } as Resources;
+
+  it('should render loading skeleton when identifier types are loading', () => {
+    render(
+      <ResourcesContext.Provider value={[]}>
+        <Formik initialValues={{}} onSubmit={null}>
+          <Form>
+            <PatientRegistrationContext.Provider
+              value={{
+                setFieldValue: jest.fn(),
+                initialFormValues: { identifiers: { ...mockedIdentifierTypes[0] } },
+                setInitialFormValues: jest.fn(),
+                values: {
+                  identifiers: { openmrsID },
+                },
+              }}>
+              <Identifiers />
+            </PatientRegistrationContext.Provider>
+          </Form>
+        </Formik>
+      </ResourcesContext.Provider>,
+    );
+    expect(screen.getByTestId('loading-skeleton')).toBeInTheDocument();
+  });
+
+  it('should render identifier inputs when identifier types are loaded', () => {
+    render(
+      <ResourcesContext.Provider value={mockResourcesContextValue}>
+        <Formik initialValues={{}} onSubmit={null}>
+          <Form>
+            <PatientRegistrationContext.Provider
+              value={{
+                setFieldValue: jest.fn(),
+                initialFormValues: { identifiers: { ...mockedIdentifierTypes[0] } },
+                setInitialFormValues: jest.fn(),
+                values: {
+                  identifiers: { openmrsID },
+                },
+              }}>
+              <Identifiers />
+            </PatientRegistrationContext.Provider>
+          </Form>
+        </Formik>
+      </ResourcesContext.Provider>,
+    );
+
+    expect(screen.getByText('Identifiers')).toBeInTheDocument();
+    const configureButton = screen.getByRole('button', { name: 'Configure' });
+    expect(configureButton).toBeInTheDocument();
+    expect(configureButton).toBeEnabled();
+  });
+
+  it('should open identifier selection overlay when "Configure" button is clicked', () => {
+    render(
+      <ResourcesContext.Provider value={mockResourcesContextValue}>
+        <Formik initialValues={{}} onSubmit={null}>
+          <Form>
+            <PatientRegistrationContext.Provider
+              value={{
+                setFieldValue: jest.fn(),
+                initialFormValues: { identifiers: { ...mockedIdentifierTypes[0] } },
+                setInitialFormValues: jest.fn(),
+                values: {
+                  identifiers: { openmrsID },
+                },
+              }}>
+              <Identifiers />
+            </PatientRegistrationContext.Provider>
+          </Form>
+        </Formik>
+      </ResourcesContext.Provider>,
+    );
+
+    const configureButton = screen.getByRole('button', { name: 'Configure' });
+    fireEvent.click(configureButton);
+
+    expect(screen.getByRole('button', { name: 'Close overlay' })).toBeInTheDocument();
+  });
+});

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

@@ -36,16 +36,24 @@ export function ObsField({ fieldDefinition }: ObsFieldProps) {
           concept={concept}
           validationRegex={fieldDefinition.validation.matches}
           label={fieldDefinition.label}
+          required={fieldDefinition.validation.required}
         />
       );
     case 'Numeric':
-      return <NumericObsField concept={concept} label={fieldDefinition.label} />;
+      return (
+        <NumericObsField
+          concept={concept}
+          label={fieldDefinition.label}
+          required={fieldDefinition.validation.required}
+        />
+      );
     case 'Coded':
       return (
         <CodedObsField
           concept={concept}
           answerConceptSetUuid={fieldDefinition.answerConceptSetUuid}
           label={fieldDefinition.label}
+          required={fieldDefinition.validation.required}
         />
       );
     default:
@@ -61,9 +69,10 @@ interface TextObsFieldProps {
   concept: ConceptResponse;
   validationRegex: string;
   label: string;
+  required?: boolean;
 }
 
-function TextObsField({ concept, validationRegex, label }: TextObsFieldProps) {
+function TextObsField({ concept, validationRegex, label, required }: TextObsFieldProps) {
   const { t } = useTranslation();
 
   const validateInput = (value: string) => {
@@ -87,6 +96,7 @@ function TextObsField({ concept, validationRegex, label }: TextObsFieldProps) {
             <Input
               id={fieldName}
               labelText={label ?? concept.display}
+              required={required}
               invalid={errors[fieldName] && touched[fieldName]}
               {...field}
             />
@@ -100,9 +110,10 @@ function TextObsField({ concept, validationRegex, label }: TextObsFieldProps) {
 interface NumericObsFieldProps {
   concept: ConceptResponse;
   label: string;
+  required?: boolean;
 }
 
-function NumericObsField({ concept, label }: NumericObsFieldProps) {
+function NumericObsField({ concept, label, required }: NumericObsFieldProps) {
   const { t } = useTranslation();
 
   const fieldName = `obs.${concept.uuid}`;
@@ -115,6 +126,7 @@ function NumericObsField({ concept, label }: NumericObsFieldProps) {
             <Input
               id={fieldName}
               labelText={label ?? concept.display}
+              required={required}
               invalid={errors[fieldName] && touched[fieldName]}
               type="number"
               {...field}
@@ -130,9 +142,10 @@ interface CodedObsFieldProps {
   concept: ConceptResponse;
   answerConceptSetUuid?: string;
   label?: string;
+  required?: boolean;
 }
 
-function CodedObsField({ concept, answerConceptSetUuid, label }: CodedObsFieldProps) {
+function CodedObsField({ concept, answerConceptSetUuid, label, required }: CodedObsFieldProps) {
   const config = useConfig() as RegistrationConfig;
   const { data: conceptAnswers, isLoading: isLoadingConceptAnswers } = useConceptAnswers(
     answerConceptSetUuid ?? concept.uuid,
@@ -152,6 +165,7 @@ function CodedObsField({ concept, answerConceptSetUuid, label }: CodedObsFieldPr
                   <Select
                     id={fieldName}
                     name={fieldName}
+                    required={required}
                     labelText={label ?? concept?.display}
                     invalid={errors[fieldName] && touched[fieldName]}
                     {...field}>
@@ -169,6 +183,7 @@ function CodedObsField({ concept, answerConceptSetUuid, label }: CodedObsFieldPr
                   id={fieldName}
                   name={fieldName}
                   labelText={label ?? concept?.display}
+                  required={required}
                   invalid={errors[fieldName] && touched[fieldName]}
                   {...field}>
                   <SelectItem key={`no-answer-select-item-${fieldName}`} value={''} text="" />

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

@@ -192,10 +192,9 @@ export class FormManager {
             },
           ],
           form: config.registrationObs.registrationFormUuid,
-          obs: Object.keys(obss).map((conceptUuid) => ({
-            concept: conceptUuid,
-            value: obss[conceptUuid],
-          })),
+          obs: Object.entries(obss)
+            .filter(([, value]) => value !== '')
+            .map(([conceptUuid, value]) => ({ concept: conceptUuid, value })),
         };
         return saveEncounter(encounterToSave);
       }

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

@@ -1,4 +1,4 @@
-import { FetchResponse, getSynchronizationItems, openmrsFetch, useConfig, usePatient } from '@openmrs/esm-framework';
+import { FetchResponse, OpenmrsResource, getSynchronizationItems, openmrsFetch, useConfig, usePatient } from '@openmrs/esm-framework';
 import last from 'lodash-es/last';
 import camelCase from 'lodash-es/camelCase';
 import { Dispatch, useEffect, useMemo, useState } from 'react';
@@ -261,14 +261,16 @@ export function useInitialPatientIdentifiers(patientUuid: string): {
 function useInitialEncounters(patientUuid: string, patientToEdit: fhir.Patient) {
   const { registrationObs } = useConfig() as RegistrationConfig;
   const { data, error, isLoading } = useSWR<FetchResponse<{ results: Array<Encounter> }>>(
-    patientToEdit
-      ? `/ws/rest/v1/encounter?patient=${patientUuid}&v=full&encounterType=${registrationObs.encounterTypeUuid}`
+    patientToEdit && registrationObs.encounterTypeUuid
+      ? `/ws/rest/v1/encounter?patient=${patientUuid}&v=custom:(encounterDatetime,obs:(concept:ref,value:ref))&encounterType=${registrationObs.encounterTypeUuid}`
       : null,
     openmrsFetch,
   );
   const obs = data?.data.results.sort(latestFirstEncounter)?.at(0)?.obs;
   const encounters = obs
-    ?.map(({ concept, value }) => ({ [concept['uuid']]: value['uuid'] }))
+    ?.map(({ concept, value }) => ({
+      [(concept as OpenmrsResource).uuid]: typeof value === 'object' ? value?.uuid : value,
+    }))
     .reduce((accu, curr) => Object.assign(accu, curr), {});
 
   return { data: encounters, isLoading, error };

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

@@ -5,12 +5,13 @@ import userEvent from '@testing-library/user-event';
 import { showToast, useConfig, usePatient } from '@openmrs/esm-framework';
 import { FormManager } from './form-manager';
 import { saveEncounter, savePatient } from './patient-registration.resource';
-import { Encounter } from './patient-registration-types';
+import type { Encounter } from './patient-registration.types';
 import { Resources, ResourcesContext } from '../offline.resources';
 import { PatientRegistration } from './patient-registration.component';
 import { RegistrationConfig } from '../config-schema';
 import { mockedAddressTemplate } from './field/address/tests/mocks';
 import { mockPatient } from '../../../../tools/test-helpers';
+import { OpenmrsDatePicker } from '@openmrs/esm-styleguide/src/public';
 
 const mockedUseConfig = useConfig as jest.Mock;
 const mockedUsePatient = usePatient as jest.Mock;
@@ -18,6 +19,8 @@ const mockedSaveEncounter = saveEncounter as jest.Mock;
 const mockedSavePatient = savePatient as jest.Mock;
 const mockedShowToast = showToast as jest.Mock;
 
+jest.setTimeout(10000);
+
 jest.mock('@openmrs/esm-framework', () => {
   const originalModule = jest.requireActual('@openmrs/esm-framework');
 
@@ -55,6 +58,18 @@ jest.mock('@openmrs/esm-framework', () => {
   return {
     ...originalModule,
     validator: jest.fn(),
+    getLocale: jest.fn().mockReturnValue('en'),
+    OpenmrsDatePicker: (datePickerProps) => (
+      <OpenmrsDatePicker
+        id={datePickerProps.id}
+        dateFormat={datePickerProps.dateFormat}
+        onChange={datePickerProps.onChange}
+        maxDate={datePickerProps.maxDate}
+        labelText={datePickerProps.labelText}
+        value={datePickerProps.value}
+        carbonOptions={datePickerProps.carbonOptions}
+      />
+    ),
   };
 });
 
@@ -345,7 +360,7 @@ describe('patient registration component', () => {
       jest.clearAllMocks();
     });
 
-    it('edits patient demographics', async () => {
+    fit('edits patient demographics', async () => {
       const user = userEvent.setup();
 
       mockedSavePatient.mockResolvedValue({});
@@ -379,7 +394,7 @@ describe('patient registration component', () => {
       expect(givenNameInput.value).toBe('John');
       expect(familyNameInput.value).toBe('Wilson');
       expect(middleNameInput.value).toBeFalsy();
-      expect(dateOfBirthInput.value).toBe('4/4/1972');
+      expect(dateOfBirthInput.value).toBe('04/04/1972');
       expect(genderInput.value).toBe('Male');
 
       // do some edits

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

@@ -128,8 +128,8 @@ export interface Encounter {
   }>;
   form: string;
   obs: Array<{
-    concept: string;
-    value: string | number;
+    concept: string | OpenmrsResource;
+    value: string | number | OpenmrsResource;
   }>;
 }
 

package/src/patient-registration/section/demographics/demographics-section.test.tsx

@@ -5,6 +5,7 @@ import { initialFormValues } from '../../patient-registration.component';
 import { DemographicsSection } from './demographics-section.component';
 import { PatientRegistrationContext } from '../../patient-registration-context';
 import { FormValues } from '../../patient-registration-types';
+import { OpenmrsDatePicker } from '@openmrs/esm-styleguide/src/public';
 
 jest.mock('@openmrs/esm-framework', () => {
   const originalModule = jest.requireActual('@openmrs/esm-framework');
@@ -15,6 +16,18 @@ jest.mock('@openmrs/esm-framework', () => {
     useConfig: jest.fn().mockImplementation(() => ({
       fieldConfigurations: { dateOfBirth: { useEstimatedDateOfBirth: { enabled: true, dayOfMonth: 0, month: 0 } } },
     })),
+    getLocale: jest.fn().mockReturnValue('en'),
+    OpenmrsDatePicker: (datePickerProps) => (
+      <OpenmrsDatePicker
+        id={datePickerProps.id}
+        dateFormat={datePickerProps.dateFormat}
+        onChange={datePickerProps.onChange}
+        maxDate={datePickerProps.maxDate}
+        labelText={datePickerProps.labelText}
+        value={datePickerProps.value}
+        carbonOptions={datePickerProps.carbonOptions}
+      />
+    ),
   };
 });
 

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

@@ -83,9 +83,7 @@ const RelationshipView: React.FC<RelationshipViewProps> = ({
     <div className={styles.relationship}>
       <div className={styles.searchBox}>
         <div className={styles.relationshipHeader}>
-          <h4 className={styles.productiveHeading}>
-            {relationship?.relation ?? t('relationshipPlaceholder', 'Relationship')}
-          </h4>
+          <h4 className={styles.productiveHeading}>{t('relationshipPlaceholder', 'Relationship')}</h4>
           <Button
             kind="ghost"
             iconDescription={t('deleteRelationshipTooltipText', 'Delete')}
@@ -163,12 +161,12 @@ export const RelationshipsSection = () => {
       const tmp: RelationshipType[] = [];
       relationshipTypes.results.forEach((type) => {
         const aIsToB = {
-          display: type.aIsToB,
+          display: type.displayAIsToB ? type.displayAIsToB : type.aIsToB,
           uuid: type.uuid,
           direction: 'aIsToB',
         };
         const bIsToA = {
-          display: type.bIsToA,
+          display: type.displayBIsToA ? type.displayBIsToA : type.bIsToA,
           uuid: type.uuid,
           direction: 'bIsToA',
         };