= ({ personAttributeTypeUuid, conceptUuid }) => {
+ const { data: personAttributeType, isLoading } = usePersonAttributeType(personAttributeTypeUuid);
+ const { data: conceptAnswers, isLoading: isLoadingConceptAnswers } = useConceptAnswers(conceptUuid);
+
+ return !isLoading ? (
+
+ {!isLoadingConceptAnswers && conceptAnswers?.length ? (
+
+
+ {conceptAnswers.map((answer) => (
+
+
+ ) : (
+
+ ) : null;
+};
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/coded-person-attribute-field.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/coded-person-attribute-field.component.tsx
new file mode 100644
index 00000000..60e13632
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/coded-person-attribute-field.component.tsx
@@ -0,0 +1,116 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Field } from 'formik';
+import { Layer, Select, SelectItem } from '@carbon/react';
+import { type PersonAttributeTypeResponse } from '../../patient-registration.types';
+import { useConceptAnswers } from '../field.resource';
+import styles from './../field.scss';
+import { reportError } from '@openmrs/esm-framework';
+
+export interface CodedPersonAttributeFieldProps {
+ id: string;
+ personAttributeType: PersonAttributeTypeResponse;
+ answerConceptSetUuid: string;
+ label?: string;
+ customConceptAnswers: Array<{ uuid: string; label?: string }>;
+}
+
+export function CodedPersonAttributeField({
+ id,
+ personAttributeType,
+ answerConceptSetUuid,
+ label,
+ customConceptAnswers,
+}: CodedPersonAttributeFieldProps) {
+ const { data: conceptAnswers, isLoading: isLoadingConceptAnswers } = useConceptAnswers(
+ customConceptAnswers.length ? '' : answerConceptSetUuid,
+ );
+ const { t } = useTranslation();
+ const fieldName = `attributes.${personAttributeType.uuid}`;
+ const [error, setError] = useState(false);
+
+ useEffect(() => {
+ if (!answerConceptSetUuid && !customConceptAnswers.length) {
+ reportError(
+ t(
+ 'codedPersonAttributeNoAnswerSet',
+ `The person attribute field '{{codedPersonAttributeFieldId}}' is of type 'coded' but has been defined without an answer concept set UUID. The 'answerConceptSetUuid' key is required.`,
+ { codedPersonAttributeFieldId: id },
+ ),
+ );
+ setError(true);
+ }
+ }, [answerConceptSetUuid, customConceptAnswers]);
+
+ useEffect(() => {
+ if (!isLoadingConceptAnswers && !customConceptAnswers.length) {
+ if (!conceptAnswers) {
+ reportError(
+ t(
+ 'codedPersonAttributeAnswerSetInvalid',
+ `The coded person attribute field '{{codedPersonAttributeFieldId}}' has been defined with an invalid answer concept set UUID '{{answerConceptSetUuid}}'.`,
+ { codedPersonAttributeFieldId: id, answerConceptSetUuid },
+ ),
+ );
+ setError(true);
+ }
+ if (conceptAnswers?.length == 0) {
+ reportError(
+ t(
+ 'codedPersonAttributeAnswerSetEmpty',
+ `The coded person attribute field '{{codedPersonAttributeFieldId}}' has been defined with an answer concept set UUID '{{answerConceptSetUuid}}' that does not have any concept answers.`,
+ {
+ codedPersonAttributeFieldId: id,
+ answerConceptSetUuid,
+ },
+ ),
+ );
+ setError(true);
+ }
+ }
+ }, [isLoadingConceptAnswers, conceptAnswers, customConceptAnswers]);
+
+ const answers = useMemo(() => {
+ if (customConceptAnswers.length) {
+ return customConceptAnswers;
+ }
+ return isLoadingConceptAnswers || !conceptAnswers
+ ? []
+ : conceptAnswers
+ .map((answer) => ({ ...answer, label: answer.display }))
+ .sort((a, b) => a.label.localeCompare(b.label));
+ }, [customConceptAnswers, conceptAnswers, isLoadingConceptAnswers]);
+
+ if (error) {
+ return null;
+ }
+
+ return (
+
+ {!isLoadingConceptAnswers ? (
+
+
+ {({ field, form: { touched, errors }, meta }) => {
+ return (
+ <>
+
+
+
+ );
+ }}
+
+
+ ) : null}
+
+ );
+}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/coded-person-attribute-field.test.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/coded-person-attribute-field.test.tsx
new file mode 100644
index 00000000..389d0026
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/coded-person-attribute-field.test.tsx
@@ -0,0 +1,127 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { useConceptAnswers } from '../field.resource';
+import { CodedPersonAttributeField } from './coded-person-attribute-field.component';
+import { Form, Formik } from 'formik';
+
+jest.mock('formik', () => ({
+ ...jest.requireActual('formik'),
+}));
+
+jest.mock('../field.resource'); // Mock the useConceptAnswers hook
+
+const mockedUseConceptAnswers = useConceptAnswers as jest.Mock;
+
+describe('CodedPersonAttributeField', () => {
+ const conceptAnswers = [
+ { uuid: '1', display: 'Option 1' },
+ { uuid: '2', display: 'Option 2' },
+ ];
+ const personAttributeType = {
+ format: 'org.openmrs.Concept',
+ display: 'Referred by',
+ uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
+ name: '',
+ description: '',
+ };
+ const answerConceptSetUuid = '6682d17f-0777-45e4-a39b-93f77eb3531c';
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ mockedUseConceptAnswers.mockReturnValue({
+ data: conceptAnswers,
+ isLoading: false,
+ });
+ });
+
+ it('shows error if there is no concept answer set provided', () => {
+ expect(() => {
+ render(
+ {}}>
+
+ ,
+ );
+ }).toThrow(expect.stringMatching(/has been defined without an answer concept set UUID/i));
+ });
+
+ it('shows error if the concept answer set does not have any concept answers', () => {
+ mockedUseConceptAnswers.mockReturnValue({
+ data: [],
+ isLoading: false,
+ });
+ expect(() => {
+ render(
+ {}}>
+
+ ,
+ );
+ }).toThrow(expect.stringMatching(/does not have any concept answers/i));
+ });
+
+ it('renders the conceptAnswers as select options', () => {
+ render(
+ {}}>
+
+ ,
+ );
+
+ expect(screen.getByLabelText(/Referred by/i)).toBeInTheDocument();
+ expect(screen.getByText(/Option 1/i)).toBeInTheDocument();
+ expect(screen.getByText(/Option 2/i)).toBeInTheDocument();
+ });
+
+ it('renders customConceptAnswers as select options when they are provided', () => {
+ render(
+ {}}>
+
+ ,
+ );
+
+ expect(screen.getByLabelText(/Referred by/i)).toBeInTheDocument();
+ expect(screen.getByText(/Special Option A/i)).toBeInTheDocument();
+ expect(screen.getByText(/Special Option B/i)).toBeInTheDocument();
+ expect(screen.queryByText(/Option 1/i)).not.toBeInTheDocument();
+ expect(screen.queryByText(/Option 2/i)).not.toBeInTheDocument();
+ });
+});
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
new file mode 100644
index 00000000..58350bf9
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/person-attribute-field.component.tsx
@@ -0,0 +1,88 @@
+import React, { useMemo } from 'react';
+import { InlineNotification, TextInputSkeleton, SkeletonText } 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';
+
+export interface PersonAttributeFieldProps {
+ fieldDefinition: FieldDefinition;
+}
+
+export function PersonAttributeField({ fieldDefinition }: PersonAttributeFieldProps) {
+ const { data: personAttributeType, isLoading, error } = usePersonAttributeType(fieldDefinition.uuid);
+ const { t } = useTranslation();
+
+ const personAttributeField = useMemo(() => {
+ if (!personAttributeType) {
+ return null;
+ }
+ switch (personAttributeType.format) {
+ case 'java.lang.String':
+ return (
+
+ {t(
+ 'unknownPatientAttributeType',
+ 'Patient attribute type has unknown format {{personAttributeTypeFormat}}',
+ {
+ personAttributeTypeFormat: personAttributeType.format,
+ },
+ )}
+
+ );
+ }
+ }, [personAttributeType, fieldDefinition, t]);
+
+ if (isLoading) {
+ return (
+
+ {fieldDefinition.showHeading &&
{fieldDefinition?.label} }
+
+ {fieldDefinition.showHeading &&
{fieldDefinition?.label} }
+
+ {t('unableToFetch', 'Unable to fetch person attribute type - {{personattributetype}}', {
+ personattributetype: fieldDefinition?.label ?? fieldDefinition?.id,
+ })}
+
+
+ );
+ }
+
+ return (
+
+ {fieldDefinition.showHeading && (
+
{fieldDefinition?.label ?? personAttributeType?.display}
+ )}
+ {personAttributeField}
+
+ );
+}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/person-attribute-field.test.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/person-attribute-field.test.tsx
new file mode 100644
index 00000000..14cd16fa
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/person-attribute-field.test.tsx
@@ -0,0 +1,187 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { usePersonAttributeType } from './person-attributes.resource';
+import { PersonAttributeField } from './person-attribute-field.component';
+import { useConceptAnswers } from '../field.resource';
+import { Form, Formik } from 'formik';
+import { type FieldDefinition } from '../../../config-schema';
+
+jest.mock('./person-attributes.resource'); // Mock the usePersonAttributeType hook
+jest.mock('../field.resource'); // Mock the useConceptAnswers hook
+
+jest.mock('formik', () => ({
+ ...jest.requireActual('formik'),
+}));
+
+const mockedUsePersonAttributeType = usePersonAttributeType as jest.Mock;
+const mockedUseConceptAnswers = useConceptAnswers as jest.Mock;
+
+let fieldDefinition: FieldDefinition;
+
+describe('PersonAttributeField', () => {
+ let mockPersonAttributeType = {
+ format: 'java.lang.String',
+ display: 'Referred by',
+ uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
+ };
+
+ beforeEach(() => {
+ fieldDefinition = {
+ id: 'referredby',
+ name: 'Referred by',
+ type: 'person attribute',
+ uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
+ answerConceptSetUuid: '6682d17f-0777-45e4-a39b-93f77eb3531c',
+ validation: {
+ matches: '',
+ required: true,
+ },
+ showHeading: true,
+ };
+ mockedUsePersonAttributeType.mockReturnValue({
+ data: mockPersonAttributeType,
+ isLoading: false,
+ error: null,
+ uuid: '14d4f066-15f5-102d-96e4-000c29c2a5d7d',
+ });
+ });
+
+ afterEach(() => {
+ jest.resetAllMocks();
+ });
+
+ it('renders the text input field for String format', () => {
+ render(
+ {}}>
+
+ ,
+ );
+
+ const input = screen.getByLabelText(/Referred by/i) as HTMLInputElement;
+ expect(screen.getByRole('heading')).toBeInTheDocument();
+ expect(input).toBeInTheDocument();
+ expect(input.type).toBe('text');
+ });
+
+ it('should not show heading if showHeading is false', () => {
+ fieldDefinition = {
+ ...fieldDefinition,
+ showHeading: false,
+ };
+
+ render(
+ {}}>
+
+ ,
+ );
+ expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+ });
+
+ it('renders the coded attribute field for Concept format', () => {
+ mockedUsePersonAttributeType.mockReturnValue({
+ data: { ...mockPersonAttributeType, format: 'org.openmrs.Concept' },
+ isLoading: false,
+ error: null,
+ });
+
+ fieldDefinition = {
+ id: 'referredby',
+ ...fieldDefinition,
+ label: 'Referred by',
+ };
+
+ mockedUseConceptAnswers.mockReturnValueOnce({
+ data: [
+ { uuid: '1', display: 'Option 1' },
+ { uuid: '2', display: 'Option 2' },
+ ],
+ isLoading: false,
+ });
+
+ render(
+ {}}>
+
+ ,
+ );
+
+ const input = screen.getByLabelText(/Referred by/i) as HTMLInputElement;
+ expect(input).toBeInTheDocument();
+ expect(input.type).toBe('select-one');
+ expect(screen.getByText('Option 1')).toBeInTheDocument();
+ expect(screen.getByText('Option 2')).toBeInTheDocument();
+ });
+
+ it('renders an error notification if attribute type has unknown format', () => {
+ mockedUsePersonAttributeType.mockReturnValue({
+ data: { ...mockPersonAttributeType, format: 'unknown' },
+ isLoading: false,
+ error: null,
+ });
+
+ render(
+ {}}>
+
+ ,
+ );
+
+ expect(screen.getByText('Error')).toBeInTheDocument();
+ expect(screen.getByText(/Patient attribute type has unknown format/i)).toBeInTheDocument();
+ });
+ it('renders an error notification if unable to fetch attribute type', () => {
+ mockedUsePersonAttributeType.mockReturnValue({
+ data: null,
+ isLoading: false,
+ error: new Error('Failed to fetch attribute type'),
+ });
+
+ fieldDefinition = {
+ uuid: 'attribute-uuid',
+ label: 'Attribute',
+ showHeading: false,
+ };
+
+ render(
+ {}}>
+
+ ,
+ );
+
+ expect(screen.getByText('Error')).toBeInTheDocument();
+ expect(screen.getByText(/Unable to fetch person attribute type/i)).toBeInTheDocument();
+ });
+
+ it('renders a skeleton if attribute type is loading', () => {
+ mockedUsePersonAttributeType.mockReturnValue({
+ data: null,
+ isLoading: true,
+ error: null,
+ });
+
+ fieldDefinition = {
+ uuid: 'attribute-uuid',
+ label: 'Attribute',
+ showHeading: true,
+ };
+
+ render(
+ {}}>
+
+ ,
+ );
+ const input = screen.findByLabelText(/Reffered by/i);
+ expect(screen.getByText(/Attribute/i)).toBeInTheDocument();
+ expect(input).not.toBeNull(); // checks that the input is not rendered when the attribute type is loading
+ });
+});
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/person-attributes.resource.ts b/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/person-attributes.resource.ts
new file mode 100644
index 00000000..fb9f180f
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/person-attributes.resource.ts
@@ -0,0 +1,20 @@
+import { type FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+import { type PersonAttributeTypeResponse } from '../../patient-registration.types';
+
+export function usePersonAttributeType(personAttributeTypeUuid: string): {
+ data: PersonAttributeTypeResponse;
+ isLoading: boolean;
+ error: any;
+} {
+ const { data, error, isLoading } = useSWRImmutable>(
+ `/ws/rest/v1/personattributetype/${personAttributeTypeUuid}`,
+ openmrsFetch,
+ );
+
+ return {
+ data: data?.data,
+ isLoading,
+ error,
+ };
+}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/text-person-attribute-field.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/text-person-attribute-field.component.tsx
new file mode 100644
index 00000000..16b9c6f8
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/text-person-attribute-field.component.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Field } from 'formik';
+import { useTranslation } from 'react-i18next';
+import { Input } from '../../input/basic-input/input/input.component';
+import { type PersonAttributeTypeResponse } from '../../patient-registration.types';
+import styles from './../field.scss';
+
+export interface TextPersonAttributeFieldProps {
+ id: string;
+ personAttributeType: PersonAttributeTypeResponse;
+ validationRegex?: string;
+ label?: string;
+ required?: boolean;
+}
+
+export function TextPersonAttributeField({
+ id,
+ personAttributeType,
+ validationRegex,
+ label,
+ required,
+}: TextPersonAttributeFieldProps) {
+ const { t } = useTranslation();
+
+ const validateInput = (value: string) => {
+ if (!value || !validationRegex || validationRegex === '' || typeof validationRegex !== 'string' || value === '') {
+ return;
+ }
+ const regex = new RegExp(validationRegex);
+ if (regex.test(value)) {
+ return;
+ } else {
+ return t('invalidInput', 'Invalid Input');
+ }
+ };
+
+ const fieldName = `attributes.${personAttributeType.uuid}`;
+
+ return (
+
+
+ {({ field, form: { touched, errors }, meta }) => {
+ return (
+
+
+ );
+}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/text-person-attribute-field.test.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/text-person-attribute-field.test.tsx
new file mode 100644
index 00000000..2f65f0a6
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/text-person-attribute-field.test.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Form, Formik } from 'formik';
+import { TextPersonAttributeField } from './text-person-attribute-field.component';
+
+describe('TextPersonAttributeField', () => {
+ const mockPersonAttributeType = {
+ format: 'java.lang.String',
+ display: 'Referred by',
+ uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
+ };
+
+ it('renders the input field with a label', () => {
+ render(
+ {}}>
+
+ ,
+ );
+
+ expect(screen.getByRole('textbox', { name: /custom label \(optional\)/i })).toBeInTheDocument();
+ });
+
+ it('renders the input field with the default label if label prop is not provided', () => {
+ render(
+ {}}>
+
+ ,
+ );
+
+ expect(screen.getByRole('textbox', { name: /referred by \(optional\)/i })).toBeInTheDocument();
+ });
+
+ it('validates the input with the provided validationRegex', async () => {
+ const user = userEvent.setup();
+ const validationRegex = '^[A-Z]+$'; // Accepts only uppercase letters
+
+ render(
+ {}}>
+
+ ,
+ );
+
+ const textbox = screen.getByRole('textbox', { name: /referred by \(optional\)/i });
+ expect(textbox).toBeInTheDocument();
+
+ // Valid input: "ABC"
+ await user.type(textbox, 'ABC');
+ await user.tab();
+
+ expect(screen.queryByText(/invalid input/i)).not.toBeInTheDocument();
+ await user.clear(textbox);
+
+ // // Invalid input: "abc" (contains lowercase letters)
+ await user.type(textbox, 'abc');
+ await user.tab();
+ expect(screen.getByText(/invalid input/i)).toBeInTheDocument();
+ });
+
+ it('renders the input field as required when required prop is true', () => {
+ render(
+ {}}>
+
+ ,
+ );
+ const textbox = screen.getByRole('textbox', { name: /referred by/i });
+
+ // Required attribute should be truthy on the input element
+ expect(textbox).toBeInTheDocument();
+ expect(textbox).toBeRequired();
+ });
+});
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/phone/phone-field.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/phone/phone-field.component.tsx
new file mode 100644
index 00000000..0aa99508
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/phone/phone-field.component.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { PersonAttributeField } from '../person-attributes/person-attribute-field.component';
+import { useConfig } from '@openmrs/esm-framework';
+import { type RegistrationConfig } from '../../../config-schema';
+
+export function PhoneField() {
+ const config = useConfig();
+
+ const fieldDefinition = {
+ id: 'phone',
+ type: 'person attribute',
+ uuid: config.fieldConfigurations.phone.personAttributeUuid,
+ showHeading: false,
+ };
+ return ,
+ capturePhotoProps: CapturePhotoProps,
+ currentLocation: string,
+ initialIdentifierValues: FormValues['identifiers'],
+ currentUser: Session,
+ config: RegistrationConfig,
+ savePatientTransactionManager: SavePatientTransactionManager,
+ abortController?: AbortController,
+) => Promise;
+
+export class FormManager {
+ static savePatientFormOffline: SavePatientForm = async (
+ isNewPatient,
+ values,
+ patientUuidMap,
+ initialAddressFieldValues,
+ capturePhotoProps,
+ currentLocation,
+ initialIdentifierValues,
+ currentUser,
+ config,
+ ) => {
+ const syncItem: PatientRegistration = {
+ fhirPatient: FormManager.mapPatientToFhirPatient(
+ FormManager.getPatientToCreate(isNewPatient, values, patientUuidMap, initialAddressFieldValues, []),
+ ),
+ _patientRegistrationData: {
+ isNewPatient,
+ formValues: values,
+ patientUuidMap,
+ initialAddressFieldValues,
+ capturePhotoProps,
+ currentLocation,
+ initialIdentifierValues,
+ currentUser,
+ config,
+ savePatientTransactionManager: new SavePatientTransactionManager(),
+ },
+ };
+
+ await queueSynchronizationItem(patientRegistration, syncItem, {
+ id: values.patientUuid,
+ displayName: 'Patient registration',
+ patientUuid: syncItem.fhirPatient.id,
+ dependencies: [],
+ });
+
+ return null;
+ };
+
+ static savePatientFormOnline: SavePatientForm = async (
+ isNewPatient,
+ values,
+ patientUuidMap,
+ initialAddressFieldValues,
+ capturePhotoProps,
+ currentLocation,
+ initialIdentifierValues,
+ currentUser,
+ config,
+ savePatientTransactionManager,
+ abortController,
+ ) => {
+ const patientIdentifiers: Array = await FormManager.savePatientIdentifiers(
+ isNewPatient,
+ values.patientUuid,
+ values.identifiers,
+ initialIdentifierValues,
+ currentLocation,
+ );
+
+ const createdPatient = FormManager.getPatientToCreate(
+ isNewPatient,
+ values,
+ patientUuidMap,
+ initialAddressFieldValues,
+ patientIdentifiers,
+ );
+
+ FormManager.getDeletedNames(values.patientUuid, patientUuidMap).forEach(async (name) => {
+ await deletePersonName(name.nameUuid, name.personUuid);
+ });
+
+ const savePatientResponse = await savePatient(
+ createdPatient,
+ isNewPatient && !savePatientTransactionManager.patientSaved ? undefined : values.patientUuid,
+ );
+
+ if (savePatientResponse.ok) {
+ savePatientTransactionManager.patientSaved = true;
+ await this.saveRelationships(values.relationships, savePatientResponse);
+
+ await this.saveObservations(values.obs, savePatientResponse, currentLocation, currentUser, config);
+
+ if (config.concepts.patientPhotoUuid && capturePhotoProps?.imageData) {
+ await savePatientPhoto(
+ savePatientResponse.data.uuid,
+ capturePhotoProps.imageData,
+ '/ws/rest/v1/obs',
+ capturePhotoProps.dateTime || new Date().toISOString(),
+ config.concepts.patientPhotoUuid,
+ );
+ }
+ }
+
+ return savePatientResponse.data.uuid;
+ };
+
+ static async saveRelationships(relationships: Array, savePatientResponse: FetchResponse) {
+ return Promise.all(
+ relationships
+ .filter((m) => m.relationshipType)
+ .filter((relationship) => !!relationship.action)
+ .map(({ relatedPersonUuid, relationshipType, uuid: relationshipUuid, action }) => {
+ const [type, direction] = relationshipType.split('/');
+ const thisPatientUuid = savePatientResponse.data.uuid;
+ const isAToB = direction === 'aIsToB';
+ const relationshipToSave = {
+ personA: isAToB ? relatedPersonUuid : thisPatientUuid,
+ personB: isAToB ? thisPatientUuid : relatedPersonUuid,
+ relationshipType: type,
+ };
+
+ switch (action) {
+ case 'ADD':
+ return saveRelationship(relationshipToSave);
+ case 'UPDATE':
+ return updateRelationship(relationshipUuid, relationshipToSave);
+ case 'DELETE':
+ return deleteRelationship(relationshipUuid);
+ }
+ }),
+ );
+ }
+
+ static async saveObservations(
+ obss: { [conceptUuid: string]: string },
+ savePatientResponse: FetchResponse,
+ currentLocation: string,
+ currentUser: Session,
+ config: RegistrationConfig,
+ ) {
+ if (obss && Object.keys(obss).length > 0) {
+ if (!config.registrationObs.encounterTypeUuid) {
+ console.error(
+ 'The registration form has been configured to have obs fields, ' +
+ 'but no registration encounter type has been configured. Obs field values ' +
+ 'will not be saved.',
+ );
+ } else {
+ const encounterToSave: Encounter = {
+ encounterDatetime: new Date(),
+ patient: savePatientResponse.data.uuid,
+ encounterType: config.registrationObs.encounterTypeUuid,
+ location: currentLocation,
+ encounterProviders: [
+ {
+ provider: currentUser.currentProvider.uuid,
+ encounterRole: config.registrationObs.encounterProviderRoleUuid,
+ },
+ ],
+ form: config.registrationObs.registrationFormUuid,
+ obs: Object.entries(obss)
+ .filter(([, value]) => value !== '')
+ .map(([conceptUuid, value]) => ({ concept: conceptUuid, value })),
+ };
+ return saveEncounter(encounterToSave);
+ }
+ }
+ }
+
+ static async savePatientIdentifiers(
+ isNewPatient: boolean,
+ patientUuid: string,
+ patientIdentifiers: FormValues['identifiers'], // values.identifiers
+ initialIdentifierValues: FormValues['identifiers'], // Initial identifiers assigned to the patient
+ location: string,
+ ): Promise> {
+ let identifierTypeRequests = Object.values(patientIdentifiers)
+ /* Since default identifier-types will be present on the form and are also in the not-required state,
+ therefore we might be running into situations when there's no value and no source associated,
+ hence filtering these fields out.
+ */
+ .filter(
+ ({ identifierValue, autoGeneration, selectedSource }) => identifierValue || (autoGeneration && selectedSource),
+ )
+ .map(async (patientIdentifier) => {
+ const {
+ identifierTypeUuid,
+ identifierValue,
+ identifierUuid,
+ selectedSource,
+ preferred,
+ autoGeneration,
+ initialValue,
+ } = patientIdentifier;
+
+ const identifier = !autoGeneration
+ ? identifierValue
+ : await (
+ await generateIdentifier(selectedSource.uuid)
+ ).data.identifier;
+ const identifierToCreate = {
+ uuid: identifierUuid,
+ identifier,
+ identifierType: identifierTypeUuid,
+ location,
+ preferred,
+ };
+
+ if (!isNewPatient) {
+ if (!initialValue) {
+ await addPatientIdentifier(patientUuid, identifierToCreate);
+ } else if (initialValue !== identifier) {
+ await updatePatientIdentifier(patientUuid, identifierUuid, identifierToCreate.identifier);
+ }
+ }
+
+ return identifierToCreate;
+ });
+
+ /*
+ 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.
+ */
+
+ if (patientUuid) {
+ Object.keys(initialIdentifierValues)
+ .filter((identifierFieldName) => !patientIdentifiers[identifierFieldName])
+ .forEach(async (identifierFieldName) => {
+ await deletePatientIdentifier(patientUuid, initialIdentifierValues[identifierFieldName].identifierUuid);
+ });
+ }
+
+ return Promise.all(identifierTypeRequests);
+ }
+
+ static getDeletedNames(patientUuid: string, patientUuidMap: PatientUuidMapType) {
+ if (patientUuidMap?.additionalNameUuid) {
+ return [
+ {
+ nameUuid: patientUuidMap.additionalNameUuid,
+ personUuid: patientUuid,
+ },
+ ];
+ }
+ return [];
+ }
+
+ static getPatientToCreate(
+ isNewPatient: boolean,
+ values: FormValues,
+ patientUuidMap: PatientUuidMapType,
+ initialAddressFieldValues: Record,
+ identifiers: Array,
+ ): Patient {
+ let birthdate;
+ if (values.birthdate instanceof Date) {
+ birthdate = [values.birthdate.getFullYear(), values.birthdate.getMonth() + 1, values.birthdate.getDate()].join(
+ '-',
+ );
+ } else {
+ birthdate = values.birthdate;
+ }
+
+ return {
+ uuid: values.patientUuid,
+ person: {
+ uuid: values.patientUuid,
+ names: FormManager.getNames(values, patientUuidMap),
+ gender: values.gender.charAt(0).toUpperCase(),
+ birthdate,
+ birthdateEstimated: values.birthdateEstimated,
+ attributes: FormManager.getPatientAttributes(isNewPatient, values, patientUuidMap),
+ addresses: [values.address],
+ ...FormManager.getPatientDeathInfo(values),
+ },
+ identifiers,
+ };
+ }
+
+ static getNames(values: FormValues, patientUuidMap: PatientUuidMapType) {
+ const names = [
+ {
+ uuid: patientUuidMap.preferredNameUuid,
+ preferred: true,
+ givenName: values.givenName,
+ middleName: values.middleName,
+ familyName: values.familyName,
+ },
+ ];
+
+ if (values.addNameInLocalLanguage) {
+ names.push({
+ uuid: patientUuidMap.additionalNameUuid,
+ preferred: false,
+ givenName: values.additionalGivenName,
+ middleName: values.additionalMiddleName,
+ familyName: values.additionalFamilyName,
+ });
+ }
+
+ return names;
+ }
+
+ static getPatientAttributes(isNewPatient: boolean, values: FormValues, patientUuidMap: PatientUuidMapType) {
+ const attributes: Array = [];
+ if (values.attributes) {
+ Object.entries(values.attributes)
+ .filter(([, value]) => !!value)
+ .forEach(([key, value]) => {
+ attributes.push({
+ attributeType: key,
+ value,
+ });
+ });
+
+ if (!isNewPatient && values.patientUuid) {
+ Object.entries(values.attributes)
+ .filter(([, value]) => !value)
+ .forEach(async ([key]) => {
+ const attributeUuid = patientUuidMap[`attribute.${key}`];
+ await openmrsFetch(`/ws/rest/v1/person/${values.patientUuid}/attribute/${attributeUuid}`, {
+ method: 'DELETE',
+ }).catch((err) => {
+ console.error(err);
+ });
+ });
+ }
+ }
+
+ return attributes;
+ }
+
+ static getPatientDeathInfo(values: FormValues) {
+ const { isDead, deathDate, deathCause } = values;
+ return {
+ dead: isDead,
+ deathDate: isDead ? deathDate : undefined,
+ causeOfDeath: isDead ? deathCause : undefined,
+ };
+ }
+
+ static mapPatientToFhirPatient(patient: Partial): fhir.Patient {
+ // Important:
+ // When changing this code, ideally assume that `patient` can be missing any attribute.
+ // The `fhir.Patient` provides us with the benefit that all properties are nullable and thus
+ // not required (technically, at least). -> Even if we cannot map some props here, we still
+ // 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).
+
+ // 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: patient.person?.gender,
+ birthDate: patient.person?.birthdate,
+ deceasedBoolean: patient.person.dead,
+ deceasedDateTime: patient.person.deathDate,
+ name: patient.person?.names?.map((name) => ({
+ given: [name.givenName, name.middleName].filter(Boolean),
+ family: name.familyName,
+ })),
+ address: patient.person?.addresses.map((address) => ({
+ city: address.cityVillage,
+ country: address.country,
+ postalCode: address.postalCode,
+ state: address.stateProvince,
+ use: 'home',
+ })),
+ telecom: patient.person.attributes?.filter((attribute) => attribute.attributeType === 'Telephone Number'),
+ };
+ }
+}
+
+export class SavePatientTransactionManager {
+ patientSaved = false;
+}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/input/input.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/input/input.component.tsx
new file mode 100644
index 00000000..c2a31ab8
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/input/input.component.tsx
@@ -0,0 +1,179 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Layer, TextInput } from '@carbon/react';
+import { useField } from 'formik';
+
+// FIXME Temporarily imported here
+export interface TextInputProps
+ extends Omit, 'defaultValue' | 'id' | 'size' | 'value'> {
+ /**
+ * Specify an optional className to be applied to the `) => void;
+
+ /**
+ * Optionally provide an `onClick` handler that is called whenever the
+ * `) => void;
+
+ /**
+ * Specify the placeholder attribute for the ` = ({ checkWarning, ...props }) => {
+ const [field, meta] = useField(props.name);
+ const { t } = useTranslation();
+
+ /*
+ Do not remove these comments
+ t('givenNameRequired')
+ t('familyNameRequired')
+ t('genderUnspecified')
+ t('genderRequired')
+ t('birthdayRequired')
+ t('birthdayNotInTheFuture')
+ t('negativeYears')
+ t('negativeMonths')
+ t('deathdayNotInTheFuture')
+ t('invalidEmail')
+ t('numberInNameDubious')
+ t('yearsEstimateRequired')
+ */
+
+ const value = field.value || '';
+ const invalidText = meta.error && t(meta.error);
+ const warnText = useMemo(() => {
+ if (!invalidText && typeof checkWarning === 'function') {
+ const warning = checkWarning(value);
+ return warning && t(warning);
+ }
+
+ return undefined;
+ }, [checkWarning, invalidText, value, t]);
+
+ const labelText = props.required ? props.labelText : `${props.labelText} (${t('optional', 'optional')})`;
+
+ return (
+
+
+
+
+ );
+};
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/input/input.test.tsx b/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/input/input.test.tsx
new file mode 100644
index 00000000..77949365
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/input/input.test.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Formik, Form } from 'formik';
+import { Input } from './input.component';
+
+describe('text input', () => {
+ const setupInput = async () => {
+ render(
+ {}}>
+
+ ,
+ );
+ return screen.getByLabelText('Text') as HTMLInputElement;
+ };
+
+ it('exists', async () => {
+ const input = await setupInput();
+ expect(input.type).toEqual('text');
+ });
+
+ it('can input valid data without warning', async () => {
+ const user = userEvent.setup();
+
+ const input = await setupInput();
+ const userInput = 'text';
+
+ await user.type(input, userInput);
+ await user.tab();
+
+ expect(input.value).toEqual(userInput);
+ expect(screen.queryByText('name should be of 5 char')).not.toBeInTheDocument();
+ });
+
+ it('should show a warning when the invalid input is entered', async () => {
+ const user = userEvent.setup();
+
+ const input = await setupInput();
+ const userInput = 'Hello World';
+
+ await userEvent.clear(input);
+
+ await user.type(input, userInput);
+ await user.tab();
+
+ expect(screen.getByText('name should be of 5 char')).toBeInTheDocument();
+ });
+
+ it('should show the correct label text if the field is not required', () => {
+ render(
+ {}}>
+
+ ,
+ );
+ expect(screen.getByLabelText('Text (optional)')).toBeInTheDocument();
+ });
+});
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/select/select-input.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/select/select-input.component.tsx
new file mode 100644
index 00000000..c120bbc8
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/select/select-input.component.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Layer, Select, SelectItem } from '@carbon/react';
+import { useField } from 'formik';
+import { useTranslation } from 'react-i18next';
+
+interface SelectInputProps {
+ name: string;
+ options: Array;
+ label: string;
+ required?: boolean;
+}
+
+export const SelectInput: React.FC = ({ name, options, label, required }) => {
+ const [field] = useField(name);
+ const { t } = useTranslation();
+ const selectOptions = [
+
+
+
+ {selectOptions}
+
+
+
+ );
+};
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/select/select-input.test.tsx b/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/select/select-input.test.tsx
new file mode 100644
index 00000000..ba873599
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/select/select-input.test.tsx
@@ -0,0 +1,49 @@
+import React from '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';
+
+describe('the select input', () => {
+ const setupSelect = async () => {
+ render(
+
+
+ ,
+ );
+ return screen.getByLabelText('Select') as HTMLInputElement;
+ };
+
+ it('exists', async () => {
+ const input = await setupSelect();
+ expect(input.type).toEqual('select-one');
+ });
+
+ it('can input data', async () => {
+ const user = userEvent.setup();
+ const input = await setupSelect();
+ const expected = 'A Option';
+
+ await user.selectOptions(input, expected);
+
+ await expect(input.value).toEqual(expected);
+ });
+
+ it('should show optional label if the input is not required', async () => {
+ render(
+
+
+ ,
+ );
+
+ await expect(screen.findByRole('combobox'));
+
+ const selectInput = screen.getByRole('combobox', { name: 'Select (optional)' }) as HTMLSelectElement;
+ expect(selectInput.labels).toHaveLength(1);
+ expect(selectInput.labels[0]).toHaveTextContent('Select (optional)');
+ });
+});
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/combo-input/combo-input.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/input/combo-input/combo-input.component.tsx
new file mode 100644
index 00000000..291b4314
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/combo-input/combo-input.component.tsx
@@ -0,0 +1,128 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { TextInput, Layer } from '@carbon/react';
+import SelectionTick from './selection-tick.component';
+import styles from '../input.scss';
+
+interface ComboInputProps {
+ entries: Array;
+ name: string;
+ fieldProps: {
+ value: string;
+ labelText: string;
+ [x: string]: any;
+ };
+ handleInputChange: (newValue: string) => void;
+ handleSelection: (newSelection) => void;
+}
+
+const ComboInput: React.FC = ({ entries, fieldProps, handleInputChange, handleSelection }) => {
+ const [highlightedEntry, setHighlightedEntry] = useState(-1);
+ const { value = '' } = fieldProps;
+ const [showEntries, setShowEntries] = useState(false);
+ const comboInputRef = useRef(null);
+
+ const handleFocus = useCallback(() => {
+ setShowEntries(true);
+ setHighlightedEntry(-1);
+ }, [setShowEntries, setHighlightedEntry]);
+
+ const filteredEntries = useMemo(() => {
+ if (!entries) {
+ return [];
+ }
+ if (!value) {
+ return entries;
+ }
+ return entries.filter((entry) => entry.toLowerCase().includes(value.toLowerCase()));
+ }, [entries, value]);
+
+ const handleOptionClick = useCallback(
+ (newSelection: string, e: KeyboardEvent = null) => {
+ e?.preventDefault();
+ handleSelection(newSelection);
+ setShowEntries(false);
+ },
+ [handleSelection, setShowEntries],
+ );
+
+ const handleKeyPress = useCallback(
+ (e: KeyboardEvent) => {
+ const totalResults = filteredEntries.length ?? 0;
+
+ if (e.key === 'Tab') {
+ setShowEntries(false);
+ setHighlightedEntry(-1);
+ }
+
+ if (e.key === 'ArrowUp') {
+ setHighlightedEntry((prev) => Math.max(-1, prev - 1));
+ } else if (e.key === 'ArrowDown') {
+ setHighlightedEntry((prev) => Math.min(totalResults - 1, prev + 1));
+ } else if (e.key === 'Enter' && highlightedEntry > -1) {
+ handleOptionClick(filteredEntries[highlightedEntry], e);
+ }
+ },
+ [highlightedEntry, handleOptionClick, filteredEntries, setHighlightedEntry, setShowEntries],
+ );
+
+ useEffect(() => {
+ const listener = (e) => {
+ if (!comboInputRef.current.contains(e.target as Node)) {
+ setShowEntries(false);
+ setHighlightedEntry(-1);
+ }
+ };
+ window.addEventListener('click', listener);
+ return () => {
+ window.removeEventListener('click', listener);
+ };
+ });
+
+ return (
+
+
+ {
+ setHighlightedEntry(-1);
+ handleInputChange(e.target.value);
+ }}
+ onFocus={handleFocus}
+ autoComplete={'off'}
+ onKeyDown={handleKeyPress}
+ />
+
+
+ {showEntries && (
+
+
+
+ )}
+
+
+
+ );
+}
+
+export default SelectionTick;
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/autosuggest/autosuggest.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/autosuggest/autosuggest.component.tsx
new file mode 100644
index 00000000..148aaea2
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/autosuggest/autosuggest.component.tsx
@@ -0,0 +1,187 @@
+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, 'onChange'>;
+
+interface SearchProps extends InputPropsBase {
+ /**
+ * Specify an optional value for the `autocomplete` property on the underlying
+ * ` | React.KeyboardEvent): void;
+
+ /**
+ * Provide an optional placeholder text for the Search.
+ * Note: if the label and placeholder differ,
+ * VoiceOver on Mac will read both
+ */
+ placeholder?: string;
+
+ /**
+ * Rendered icon for the Search.
+ * Can be a React component class
+ */
+ renderIcon?: React.ComponentType | React.FunctionComponent;
+
+ /**
+ * Specify the role for the underlying `;
+ onSuggestionSelected: (field: string, value: string) => void;
+ invalid?: boolean | undefined;
+ invalidText?: string | undefined;
+}
+
+export const Autosuggest: React.FC = ({
+ getDisplayValue,
+ getFieldValue,
+ getSearchResults,
+ onSuggestionSelected,
+ invalid,
+ invalidText,
+ ...searchProps
+}) => {
+ const [suggestions, setSuggestions] = useState([]);
+ const searchBox = useRef(null);
+ const wrapper = useRef(null);
+ const { id: name, labelText } = searchProps;
+
+ useEffect(() => {
+ document.addEventListener('mousedown', handleClickOutsideComponent);
+
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutsideComponent);
+ };
+ }, [wrapper]);
+
+ const handleClickOutsideComponent = (e) => {
+ if (wrapper.current && !wrapper.current.contains(e.target)) {
+ setSuggestions([]);
+ }
+ };
+
+ const handleChange = (e: React.ChangeEvent) => {
+ const query = e.target.value;
+ onSuggestionSelected(name, undefined);
+
+ if (query) {
+ getSearchResults(query).then((suggestions) => {
+ setSuggestions(suggestions);
+ });
+ } else {
+ setSuggestions([]);
+ }
+ };
+
+ const handleClear = (e: React.ChangeEvent) => {
+ onSuggestionSelected(name, undefined);
+ };
+
+ const handleClick = (index: number) => {
+ const display = getDisplayValue(suggestions[index]);
+ const value = getFieldValue(suggestions[index]);
+ searchBox.current.value = display;
+ onSuggestionSelected(name, value);
+ setSuggestions([]);
+ };
+
+ return (
+
+
{labelText}
+
+
+ {suggestions.length > 0 && (
+
+ {suggestions.map((suggestion, index) => (
+ handleClick(index)}>
+ {getDisplayValue(suggestion)}
+
+ ))}
+
+ )}
+ {invalid ?
{invalidText} : <>}
+
+ item.display}
+ getFieldValue={(item) => item.uuid}
+ id="person"
+ labelText=""
+ onSuggestionSelected={mockedHandleSuggestionSelected}
+ placeholder="Find Person"
+ />
+ ,
+ );
+}
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
new file mode 100644
index 00000000..04918ccb
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx
@@ -0,0 +1,156 @@
+import React, { useState, useCallback, useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useField } from 'formik';
+import { Button } from '@carbon/react';
+import { TrashCan, Edit, Reset } from '@carbon/react/icons';
+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 { 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';
+
+interface IdentifierInputProps {
+ patientIdentifier: PatientIdentifierValue;
+ fieldName: string;
+}
+
+export const IdentifierInput: React.FC = ({ patientIdentifier, fieldName }) => {
+ const { t } = useTranslation();
+ const { defaultPatientIdentifierTypes } = useConfig();
+ const { identifierTypes } = useContext(ResourcesContext);
+ const { isOffline, values, setFieldValue } = useContext(PatientRegistrationContext);
+ const identifierType = useMemo(
+ () => identifierTypes.find((identifierType) => identifierType.uuid === patientIdentifier.identifierTypeUuid),
+ [patientIdentifier, identifierTypes],
+ );
+ const { autoGeneration, initialValue, identifierValue, identifierName, required } = patientIdentifier;
+ const [hideInputField, setHideInputField] = useState(autoGeneration || initialValue === identifierValue);
+ const name = `identifiers.${fieldName}.identifierValue`;
+ const [identifierField, identifierFieldMeta] = useField(name);
+
+ const disabled = isOffline && shouldBlockPatientIdentifierInOfflineMode(identifierType);
+
+ const defaultPatientIdentifierTypesMap = useMemo(() => {
+ const map = {};
+ defaultPatientIdentifierTypes?.forEach((typeUuid) => {
+ map[typeUuid] = true;
+ });
+ return map;
+ }, [defaultPatientIdentifierTypes]);
+
+ const handleReset = useCallback(() => {
+ setHideInputField(true);
+ setFieldValue(`identifiers.${fieldName}`, {
+ ...patientIdentifier,
+ identifierValue: initialValue,
+ selectedSource: null,
+ autoGeneration: false,
+ } as PatientIdentifierValue);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [initialValue, setHideInputField]);
+
+ const handleEdit = () => {
+ setHideInputField(false);
+ setFieldValue(`identifiers.${fieldName}`, {
+ ...patientIdentifier,
+ ...setIdentifierSource(identifierType?.identifierSources?.[0], initialValue, initialValue),
+ });
+ };
+
+ const handleDelete = () => {
+ /*
+ If there is an initialValue to the identifier, a confirmation modal seeking
+ confirmation to delete the identifier should be shown, else in the other case,
+ we can directly delete the identifier.
+ */
+
+ if (initialValue) {
+ const confirmDeleteIdentifierModal = showModal('delete-identifier-confirmation-modal', {
+ deleteIdentifier: (deleteIdentifier) => {
+ if (deleteIdentifier) {
+ setFieldValue('identifiers', deleteIdentifierType(values.identifiers, fieldName));
+ }
+ confirmDeleteIdentifierModal();
+ },
+ identifierName,
+ initialValue,
+ });
+ } else {
+ setFieldValue('identifiers', deleteIdentifierType(values.identifiers, fieldName));
+ }
+ };
+
+ return (
+
+ {!autoGeneration && !hideInputField ? (
+
+ ) : (
+
+
{identifierName}
+
+ {autoGeneration ? t('autoGeneratedPlaceholderText', 'Auto-generated') : identifierValue}
+
+
+ {/* This is added for any error descriptions */}
+ {!!(identifierFieldMeta.touched && identifierFieldMeta.error) && (
+
{identifierFieldMeta.error && t(identifierFieldMeta.error)}
+ )}
+
+ )}
+
+ {!patientIdentifier.required && patientIdentifier.initialValue && hideInputField && (
+
+
+
+
+ )}
+ {initialValue && initialValue !== identifierValue && (
+
+
+
+
+ )}
+ {!patientIdentifier.required && !defaultPatientIdentifierTypesMap[patientIdentifier.identifierTypeUuid] && (
+
+
+
+
+ )}
+
+
+
+ ,
+ );
+ const identifierInput = screen.getByLabelText(identifierType.fieldName) as HTMLInputElement;
+ let identifierSourceSelectInput = screen.getByLabelText('source-for-' + identifierType.fieldName);
+ return {
+ identifierInput,
+ identifierSourceSelectInput,
+ };
+ };
+
+ it('exists', async () => {
+ const { identifierInput, identifierSourceSelectInput } = await setupIdentifierInput(openmrsID);
+ expect(identifierInput.type).toBe('text');
+ expect(identifierSourceSelectInput.type).toBe('select-one');
+ });
+
+ it('has correct props for identifier source select input', async () => {
+ const { identifierSourceSelectInput } = await setupIdentifierInput(openmrsID);
+ expect(identifierSourceSelectInput.childElementCount).toBe(3);
+ expect(identifierSourceSelectInput.value).toBe('Generator 1 for OpenMRS ID');
+ });
+
+ it('has correct props for identifier input', async () => {
+ const { identifierInput } = await setupIdentifierInput(openmrsID);
+ expect(identifierInput.placeholder).toBe('Auto-generated');
+ expect(identifierInput.disabled).toBe(true);
+ });
+
+ it('text input should not be disabled if manual entry is enabled', async () => {
+ // setup
+ openmrsID.identifierSources[0].autoGenerationOption.manualEntryEnabled = true;
+ // replay
+ const { identifierInput } = await setupIdentifierInput(openmrsID);
+ expect(identifierInput.placeholder).toBe('Auto-generated');
+ expect(identifierInput.disabled).toBe(false);
+ });
+
+ it('should not render select widget if auto-entry is false', async () => {
+ // setup
+ openmrsID.identifierSources = [
+ {
+ uuid: '691eed12-c0f1-11e2-94be-8c13b969e334',
+ name: 'Generator 1 for OpenMRS ID',
+ autoGenerationOption: {
+ manualEntryEnabled: true,
+ automaticGenerationEnabled: false,
+ },
+ },
+ ];
+ // replay
+ const { identifierInput, identifierSourceSelectInput } = await setupIdentifierInput(openmrsID);
+ expect(identifierInput.placeholder).toBe('Enter identifier');
+ expect(identifierInput.disabled).toBe(false);
+ expect(identifierSourceSelectInput).toBe(undefined);
+ });
+});
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/utils.test.ts b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/utils.test.ts
new file mode 100644
index 00000000..5f3bd0c0
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/utils.test.ts
@@ -0,0 +1,81 @@
+import { isUniqueIdentifierTypeForOffline, shouldBlockPatientIdentifierInOfflineMode } from './utils';
+
+interface IdentifierTypeOptions {
+ uniquenessBehavior?: 'UNIQUE' | 'LOCATION' | 'NON_UNIQUE';
+ manualEntryEnabled?: boolean;
+ automaticGenerationEnabled?: boolean;
+}
+
+function createIdentifierType(options: IdentifierTypeOptions) {
+ return {
+ uniquenessBehavior: options.uniquenessBehavior,
+ identifierSources: [
+ {
+ uuid: 'identifier-source-uuid',
+ name: 'Identifier Source Name',
+ autoGenerationOption: {
+ manualEntryEnabled: options.manualEntryEnabled,
+ automaticGenerationEnabled: options.automaticGenerationEnabled,
+ },
+ },
+ ],
+ name: 'Identifier Type Name',
+ required: true,
+ uuid: 'identifier-type-uuid',
+ fieldName: 'identifierFieldName',
+ format: 'identifierFormat',
+ isPrimary: true,
+ };
+}
+
+describe('shouldBlockPatientIdentifierInOfflineMode function', () => {
+ it('should return false if identifierType is not unique', () => {
+ const identifierType = createIdentifierType({ uniquenessBehavior: null });
+
+ const result = shouldBlockPatientIdentifierInOfflineMode(identifierType);
+
+ expect(result).toBe(false);
+ });
+
+ it('should return false if identifierType is unique and no manual entry is enabled', () => {
+ const identifierType = createIdentifierType({ uniquenessBehavior: null });
+
+ const result = shouldBlockPatientIdentifierInOfflineMode(identifierType);
+
+ expect(result).toBe(false);
+ });
+
+ it('should return true if identifierType is unique and manual entry is enabled', () => {
+ const identifierType = createIdentifierType({ manualEntryEnabled: true, uniquenessBehavior: 'UNIQUE' });
+
+ const result = shouldBlockPatientIdentifierInOfflineMode(identifierType);
+
+ expect(result).toBe(true);
+ });
+});
+
+describe('isUniqueIdentifierTypeForOffline function', () => {
+ it('should return true if uniquenessBehavior is UNIQUE', () => {
+ const identifierType = createIdentifierType({ uniquenessBehavior: 'UNIQUE' });
+
+ const result = isUniqueIdentifierTypeForOffline(identifierType);
+
+ expect(result).toBe(true);
+ });
+
+ it('should return true if uniquenessBehavior is LOCATION', () => {
+ const identifierType = createIdentifierType({ uniquenessBehavior: 'LOCATION' });
+
+ const result = isUniqueIdentifierTypeForOffline(identifierType);
+
+ expect(result).toBe(true);
+ });
+
+ it('should return false for other uniqueness behaviors', () => {
+ const identifierType = createIdentifierType({ uniquenessBehavior: null });
+
+ const result = isUniqueIdentifierTypeForOffline(identifierType);
+
+ expect(result).toBe(false);
+ });
+});
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/utils.ts b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/utils.ts
new file mode 100644
index 00000000..a0a0436c
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/utils.ts
@@ -0,0 +1,19 @@
+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
+ // of the chance of generating conflicts when syncing later.
+ return (
+ isUniqueIdentifierTypeForOffline(identifierType) &&
+ !identifierType.identifierSources.some(
+ (source) =>
+ !source.autoGenerationOption?.manualEntryEnabled && source.autoGenerationOption?.automaticGenerationEnabled,
+ )
+ );
+}
+
+export function isUniqueIdentifierTypeForOffline(identifierType: FetchedPatientIdentifierType) {
+ // In offline mode we consider each uniqueness behavior which could cause conflicts during syncing as 'unique'.
+ // Syncing conflicts can appear for the following behaviors:
+ return identifierType.uniquenessBehavior === 'UNIQUE' || identifierType.uniquenessBehavior === 'LOCATION';
+}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/dummy-data/dummy-data-input.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/input/dummy-data/dummy-data-input.component.tsx
new file mode 100644
index 00000000..79f76218
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/dummy-data/dummy-data-input.component.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import classNames from 'classnames';
+import { v4 } from 'uuid';
+import { type FormValues } from '../../patient-registration.types';
+import styles from './../input.scss';
+
+interface DummyDataInputProps {
+ setValues(values: FormValues, shouldValidate?: boolean): void;
+}
+
+export const dummyFormValues: FormValues = {
+ patientUuid: v4(),
+ givenName: 'John',
+ middleName: '',
+ familyName: 'Smith',
+ additionalGivenName: 'Joey',
+ additionalMiddleName: '',
+ additionalFamilyName: 'Smitty',
+ addNameInLocalLanguage: true,
+ gender: 'Male',
+ birthdate: new Date(2020, 1, 1) as any,
+ yearsEstimated: 1,
+ monthsEstimated: 2,
+ birthdateEstimated: true,
+ telephoneNumber: '0800001066',
+ isDead: false,
+ deathDate: '',
+ deathCause: '',
+ relationships: [],
+ address: {
+ address1: 'Bom Jesus Street',
+ address2: '',
+ cityVillage: 'Recife',
+ stateProvince: 'Pernambuco',
+ country: 'Brazil',
+ postalCode: '50030-310',
+ },
+ identifiers: {},
+};
+
+export const DummyDataInput: React.FC = ({ setValues }) => {
+ return (
+
+ setValues(dummyFormValues)}
+ type="button"
+ aria-label="Dummy Data Input">
+ Input Dummy Data
+
+
+ );
+};
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/dummy-data/dummy-data-input.test.tsx b/packages/esm-patient-registration-app/src/patient-registration/input/dummy-data/dummy-data-input.test.tsx
new file mode 100644
index 00000000..2cf995b2
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/dummy-data/dummy-data-input.test.tsx
@@ -0,0 +1,43 @@
+import React from '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 { type FormValues } from '../../patient-registration-types';
+
+jest.mock('@openmrs/esm-framework', () => {
+ const originalModule = jest.requireActual('@openmrs/esm-framework');
+
+ return {
+ ...originalModule,
+ validator: jest.fn(),
+ };
+});
+
+describe('dummy data input', () => {
+ let formValues: FormValues = initialFormValues;
+
+ const setupInput = async () => {
+ render(
+ {
+ formValues = values;
+ }}
+ />,
+ );
+ return screen.getByLabelText('Dummy Data Input') as HTMLButtonElement;
+ };
+
+ it('exists', async () => {
+ const input = await setupInput();
+ expect(input.type).toEqual('button');
+ });
+
+ it('can input data on button click', async () => {
+ const user = userEvent.setup();
+ const input = await setupInput();
+
+ await user.click(input);
+ expect(formValues).toEqual(dummyFormValues);
+ });
+});
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
new file mode 100644
index 00000000..10a7e2e5
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/input.scss
@@ -0,0 +1,118 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '../../patient-registration/patient-registration.scss';
+
+.fieldRow {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ flex-wrap: wrap;
+}
+
+.subFieldRow {
+ margin-bottom: 5px;
+}
+
+.label {
+ @include type.type-style('label-01');
+ color: $text-02;
+}
+
+.textID,
+.comboInput {
+ margin-bottom: spacing.$spacing-05;
+}
+
+.requiredField {
+ color: $danger;
+}
+
+.input {
+ margin-right: 5px;
+}
+
+.checkboxField {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ width: 400px;
+ margin-left: 10px;
+}
+
+.textInput {
+ width: 250px !important;
+ height: 40px !important;
+}
+
+.numberInput {
+ width: 200px !important;
+ height: 40px !important;
+}
+
+.checkboxInput {
+ height: 1.5rem !important;
+ width: 1.5rem !important;
+ margin-top: 8px;
+}
+
+.selectInput {
+ width: 150px !important;
+ height: 40px !important;
+}
+
+.dateInput {
+ width: 200px !important;
+ height: 40px !important;
+ font-size: large !important;
+}
+
+.telInput {
+ width: 250px !important;
+ height: 40px !important;
+}
+
+.errorInput {
+ border: 2px solid $danger !important;
+ padding-left: 0.875rem !important;
+}
+
+.errorMessage {
+ color: $danger;
+ align-self: center;
+}
+
+.dummyData {
+ cursor: pointer;
+ margin-left: 5px;
+}
+
+.IDInput {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ align-items: end;
+}
+
+.trashCan {
+ color: $danger;
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+ .IDInput {
+ max-width: unset;
+ width: 100%;
+ }
+}
+
+.dangerLabel01 {
+ @include type.type-style('label-01');
+ color: $danger;
+}
+
+.comboInputEntries {
+ position: relative;
+}
+
+.comboInputItemOption {
+ margin: 0;
+ padding-left: 1rem;
+}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/patient-registration-context.ts b/packages/esm-patient-registration-app/src/patient-registration/patient-registration-context.ts
new file mode 100644
index 00000000..5b76ba79
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/patient-registration-context.ts
@@ -0,0 +1,24 @@
+import { useConfig } from '@openmrs/esm-framework';
+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;
+ values: FormValues;
+ validationSchema: any;
+ inEditMode: boolean;
+ setFieldValue(field: string, value: any, shouldValidate?: boolean): void;
+ setCapturePhotoProps(value: SetStateAction): void;
+ currentPhoto: string;
+ isOffline: boolean;
+ initialFormValues: FormValues;
+ setInitialFormValues?: React.Dispatch>;
+}
+
+export const PatientRegistrationContext = createContext(undefined);
+
+export function useFieldConfig(field: string) {
+ const { fieldConfigurations } = useConfig() as RegistrationConfig;
+ return fieldConfigurations[field];
+}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/patient-registration-hooks.ts b/packages/esm-patient-registration-app/src/patient-registration/patient-registration-hooks.ts
new file mode 100644
index 00000000..76c82962
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/patient-registration-hooks.ts
@@ -0,0 +1,287 @@
+import {
+ type FetchResponse,
+ type OpenmrsResource,
+ getSynchronizationItems,
+ openmrsFetch,
+ useConfig,
+ usePatient,
+} from '@openmrs/esm-framework';
+import camelCase from 'lodash-es/camelCase';
+import { type Dispatch, useEffect, useMemo, useState } from 'react';
+import useSWR from 'swr';
+import { v4 } from 'uuid';
+import { type RegistrationConfig } from '../config-schema';
+import { patientRegistration } from '../constants';
+import {
+ type FormValues,
+ type PatientRegistration,
+ type PatientUuidMapType,
+ type PersonAttributeResponse,
+ type PatientIdentifierResponse,
+ type Encounter,
+} from './patient-registration.types';
+import {
+ getAddressFieldValuesFromFhirPatient,
+ getFormValuesFromFhirPatient,
+ getPatientUuidMapFromFhirPatient,
+ getPhonePersonAttributeValueFromFhirPatient,
+ latestFirstEncounter,
+} from './patient-registration-utils';
+import { useInitialPatientRelationships } from './section/patient-relationships/relationships.resource';
+import dayjs from 'dayjs';
+
+export function useInitialFormValues(patientUuid: string): [FormValues, Dispatch] {
+ const { isLoading: isLoadingPatientToEdit, patient: patientToEdit } = usePatient(patientUuid);
+ const { data: attributes, isLoading: isLoadingAttributes } = useInitialPersonAttributes(patientUuid);
+ const { data: identifiers, isLoading: isLoadingIdentifiers } = useInitialPatientIdentifiers(patientUuid);
+ const { data: relationships, isLoading: isLoadingRelationships } = useInitialPatientRelationships(patientUuid);
+ const { data: encounters } = useInitialEncounters(patientUuid, patientToEdit);
+
+ const [initialFormValues, setInitialFormValues] = useState({
+ patientUuid: v4(),
+ givenName: '',
+ middleName: '',
+ familyName: '',
+ additionalGivenName: '',
+ additionalMiddleName: '',
+ additionalFamilyName: '',
+ addNameInLocalLanguage: false,
+ gender: '',
+ birthdate: null,
+ yearsEstimated: 0,
+ monthsEstimated: 0,
+ birthdateEstimated: false,
+ telephoneNumber: '',
+ isDead: false,
+ deathDate: '',
+ deathCause: '',
+ relationships: [],
+ identifiers: {},
+ address: {},
+ });
+
+ useEffect(() => {
+ (async () => {
+ if (patientToEdit) {
+ const birthdateEstimated = !/^\d{4}-\d{2}-\d{2}$/.test(patientToEdit.birthDate);
+ const [years = 0, months = 0] = patientToEdit.birthDate.split('-').map((val) => parseInt(val));
+ // Please refer: https://github.com/openmrs/openmrs-esm-patient-management/pull/697#issuecomment-1562706118
+ const estimatedMonthsAvailable = patientToEdit.birthDate.split('-').length > 1;
+ const yearsEstimated = birthdateEstimated ? Math.floor(dayjs().diff(patientToEdit.birthDate, 'month') / 12) : 0;
+ const monthsEstimated =
+ birthdateEstimated && estimatedMonthsAvailable ? dayjs().diff(patientToEdit.birthDate, 'month') % 12 : 0;
+
+ setInitialFormValues({
+ ...initialFormValues,
+ ...getFormValuesFromFhirPatient(patientToEdit),
+ address: getAddressFieldValuesFromFhirPatient(patientToEdit),
+ ...getPhonePersonAttributeValueFromFhirPatient(patientToEdit),
+ birthdateEstimated: !/^\d{4}-\d{2}-\d{2}$/.test(patientToEdit.birthDate),
+ yearsEstimated,
+ monthsEstimated,
+ });
+ } else if (!isLoadingPatientToEdit && patientUuid) {
+ const registration = await getPatientRegistration(patientUuid);
+
+ if (!registration._patientRegistrationData.formValues) {
+ console.error(
+ `Found a queued offline patient registration for patient ${patientUuid}, but without form values. Not using these values.`,
+ );
+ return;
+ }
+
+ setInitialFormValues(registration._patientRegistrationData.formValues);
+ }
+ })();
+ }, [isLoadingPatientToEdit, patientToEdit, patientUuid]);
+
+ // Set initial patient relationships
+ useEffect(() => {
+ if (!isLoadingRelationships && relationships) {
+ setInitialFormValues((initialFormValues) => ({
+ ...initialFormValues,
+ relationships,
+ }));
+ }
+ }, [isLoadingRelationships, relationships, setInitialFormValues]);
+
+ // Set Initial patient identifiers
+ useEffect(() => {
+ if (!isLoadingIdentifiers && identifiers) {
+ setInitialFormValues((initialFormValues) => ({
+ ...initialFormValues,
+ identifiers,
+ }));
+ }
+ }, [isLoadingIdentifiers, identifiers, setInitialFormValues]);
+
+ // Set Initial person attributes
+ useEffect(() => {
+ if (!isLoadingAttributes && attributes) {
+ let personAttributes = {};
+ attributes.forEach((attribute) => {
+ personAttributes[attribute.attributeType.uuid] =
+ attribute.attributeType.format === 'org.openmrs.Concept' && typeof attribute.value === 'object'
+ ? attribute.value?.uuid
+ : attribute.value;
+ });
+
+ setInitialFormValues((initialFormValues) => ({
+ ...initialFormValues,
+ attributes: personAttributes,
+ }));
+ }
+ }, [attributes, setInitialFormValues, isLoadingAttributes]);
+
+ // Set Initial registration encounters
+ useEffect(() => {
+ if (patientToEdit && encounters) {
+ setInitialFormValues((initialFormValues) => ({
+ ...initialFormValues,
+ obs: encounters as Record,
+ }));
+ }
+ }, [encounters, patientToEdit]);
+
+ return [initialFormValues, setInitialFormValues];
+}
+
+export function useInitialAddressFieldValues(patientUuid: string, fallback = {}): [object, Dispatch] {
+ const { isLoading, patient } = usePatient(patientUuid);
+ const [initialAddressFieldValues, setInitialAddressFieldValues] = useState(fallback);
+
+ useEffect(() => {
+ (async () => {
+ if (patient) {
+ setInitialAddressFieldValues({
+ ...initialAddressFieldValues,
+ address: getAddressFieldValuesFromFhirPatient(patient),
+ });
+ } else if (!isLoading && patientUuid) {
+ const registration = await getPatientRegistration(patientUuid);
+ setInitialAddressFieldValues(registration?._patientRegistrationData.initialAddressFieldValues ?? fallback);
+ }
+ })();
+ }, [isLoading, patient, patientUuid]);
+
+ return [initialAddressFieldValues, setInitialAddressFieldValues];
+}
+
+export function usePatientUuidMap(
+ patientUuid: string,
+ fallback: PatientUuidMapType = {},
+): [PatientUuidMapType, Dispatch] {
+ const { isLoading: isLoadingPatientToEdit, patient: patientToEdit } = usePatient(patientUuid);
+ const { data: attributes } = useInitialPersonAttributes(patientUuid);
+ const [patientUuidMap, setPatientUuidMap] = useState(fallback);
+
+ useEffect(() => {
+ if (patientToEdit) {
+ setPatientUuidMap({ ...patientUuidMap, ...getPatientUuidMapFromFhirPatient(patientToEdit) });
+ } else if (!isLoadingPatientToEdit && patientUuid) {
+ getPatientRegistration(patientUuid).then((registration) =>
+ setPatientUuidMap(registration?._patientRegistrationData.initialAddressFieldValues ?? fallback),
+ );
+ }
+ }, [isLoadingPatientToEdit, patientToEdit, patientUuid]);
+
+ useEffect(() => {
+ if (attributes) {
+ setPatientUuidMap((prevPatientUuidMap) => ({
+ ...prevPatientUuidMap,
+ ...getPatientAttributeUuidMapForPatient(attributes),
+ }));
+ }
+ }, [attributes]);
+
+ return [patientUuidMap, setPatientUuidMap];
+}
+
+async function getPatientRegistration(patientUuid: string) {
+ const items = await getSynchronizationItems(patientRegistration);
+ return items.find((item) => item._patientRegistrationData.formValues.patientUuid === patientUuid);
+}
+
+export function useInitialPatientIdentifiers(patientUuid: string): {
+ data: FormValues['identifiers'];
+ isLoading: boolean;
+} {
+ const shouldFetch = !!patientUuid;
+
+ const { data, error, isLoading } = useSWR }>, Error>(
+ shouldFetch
+ ? `/ws/rest/v1/patient/${patientUuid}/identifier?v=custom:(uuid,identifier,identifierType:(uuid,required,name),preferred)`
+ : null,
+ openmrsFetch,
+ );
+
+ const result: {
+ data: FormValues['identifiers'];
+ isLoading: boolean;
+ } = useMemo(() => {
+ const identifiers: FormValues['identifiers'] = {};
+
+ data?.data?.results?.forEach((patientIdentifier) => {
+ identifiers[camelCase(patientIdentifier.identifierType.name)] = {
+ identifierUuid: patientIdentifier.uuid,
+ preferred: patientIdentifier.preferred,
+ initialValue: patientIdentifier.identifier,
+ identifierValue: patientIdentifier.identifier,
+ identifierTypeUuid: patientIdentifier.identifierType.uuid,
+ identifierName: patientIdentifier.identifierType.name,
+ required: patientIdentifier.identifierType.required,
+ selectedSource: null,
+ autoGeneration: false,
+ };
+ });
+ return {
+ data: identifiers,
+ isLoading,
+ };
+ }, [data, error]);
+
+ return result;
+}
+
+function useInitialEncounters(patientUuid: string, patientToEdit: fhir.Patient) {
+ const { registrationObs } = useConfig() as RegistrationConfig;
+ const { data, error, isLoading } = useSWR }>>(
+ 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 as OpenmrsResource).uuid]: typeof value === 'object' ? value?.uuid : value,
+ }))
+ .reduce((accu, curr) => Object.assign(accu, curr), {});
+
+ return { data: encounters, isLoading, error };
+}
+
+function useInitialPersonAttributes(personUuid: string) {
+ const shouldFetch = !!personUuid;
+ const { data, error, isLoading } = useSWR }>, Error>(
+ shouldFetch
+ ? `/ws/rest/v1/person/${personUuid}/attribute?v=custom:(uuid,display,attributeType:(uuid,display,format),value)`
+ : null,
+ openmrsFetch,
+ );
+ const result = useMemo(() => {
+ return {
+ data: data?.data?.results,
+ isLoading,
+ };
+ }, [data, error]);
+ return result;
+}
+
+function getPatientAttributeUuidMapForPatient(attributes: Array) {
+ const attributeUuidMap = {};
+ attributes.forEach((attribute) => {
+ attributeUuidMap[`attribute.${attribute?.attributeType?.uuid}`] = attribute?.uuid;
+ });
+ return attributeUuidMap;
+}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/patient-registration-utils.ts b/packages/esm-patient-registration-app/src/patient-registration/patient-registration-utils.ts
new file mode 100644
index 00000000..880eca48
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/patient-registration-utils.ts
@@ -0,0 +1,216 @@
+import * as Yup from 'yup';
+import {
+ 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';
+import capitalize from 'lodash-es/capitalize';
+
+export function parseAddressTemplateXml(addressTemplate: string) {
+ const templateXmlDoc = new DOMParser().parseFromString(addressTemplate, 'text/xml');
+ const nameMappings = templateXmlDoc.querySelector('nameMappings');
+ const properties = nameMappings.getElementsByTagName('entry');
+ const validationSchemaObjs = Array.prototype.map.call(properties, (property: Element) => {
+ const name = property.getElementsByTagName('string')[0].innerHTML;
+ const label = property.getElementsByTagName('string')[1].innerHTML;
+ const regex = findElementValueInXmlDoc(name, 'elementRegex', templateXmlDoc) || '.*';
+ const regexFormat = findElementValueInXmlDoc(name, 'elementRegexFormats', templateXmlDoc) || '';
+
+ return {
+ name,
+ label,
+ regex,
+ regexFormat,
+ };
+ });
+
+ const addressValidationSchema = Yup.object(
+ validationSchemaObjs.reduce((final, current) => {
+ final[current.name] = Yup.string().matches(current.regex, current.regexFormat);
+ return final;
+ }, {}),
+ );
+
+ const addressFieldValues = Array.prototype.map.call(properties, (property: Element) => {
+ const name = property.getElementsByTagName('string')[0].innerHTML;
+ return {
+ name,
+ defaultValue: '',
+ };
+ });
+ return {
+ addressFieldValues,
+ addressValidationSchema,
+ };
+}
+export function parseAddressTemplateXmlOld(addressTemplate: string) {
+ const templateXmlDoc = new DOMParser().parseFromString(addressTemplate, 'text/xml');
+ const nameMappings = templateXmlDoc.querySelector('nameMappings').querySelectorAll('property');
+ const validationSchemaObjs: AddressValidationSchemaType[] = Array.prototype.map.call(
+ nameMappings,
+ (nameMapping: Element) => {
+ const name = nameMapping.getAttribute('name');
+ const label = nameMapping.getAttribute('value');
+ const regex = findElementValueInXmlDoc(name, 'elementRegex', templateXmlDoc) || '.*';
+ const regexFormat = findElementValueInXmlDoc(name, 'elementRegexFormats', templateXmlDoc) || '';
+
+ return {
+ name,
+ label,
+ regex,
+ regexFormat,
+ };
+ },
+ );
+
+ const addressValidationSchema = Yup.object(
+ validationSchemaObjs.reduce((final, current) => {
+ final[current.name] = Yup.string().matches(current.regex, current.regexFormat);
+ return final;
+ }, {}),
+ );
+
+ const addressFieldValues: Array<{ name: string; defaultValue: string }> = Array.prototype.map.call(
+ nameMappings,
+ (nameMapping: Element) => {
+ const name = nameMapping.getAttribute('name');
+ const defaultValue = findElementValueInXmlDoc(name, 'elementDefaults', templateXmlDoc) ?? '';
+ return { name, defaultValue };
+ },
+ );
+
+ return {
+ addressFieldValues,
+ addressValidationSchema,
+ };
+}
+
+function findElementValueInXmlDoc(fieldName: string, elementSelector: string, doc: XMLDocument) {
+ return doc.querySelector(elementSelector)?.querySelector(`[name=${fieldName}]`)?.getAttribute('value') ?? null;
+}
+
+export function scrollIntoView(viewId: string) {
+ document.getElementById(viewId).scrollIntoView({
+ behavior: 'smooth',
+ block: 'center',
+ inline: 'center',
+ });
+}
+
+export function cancelRegistration() {
+ window.history.back();
+}
+
+export function getFormValuesFromFhirPatient(patient: fhir.Patient) {
+ const result = {} as FormValues;
+ const patientName = patient.name[0];
+ const additionalPatientName = patient.name[1];
+
+ result.patientUuid = patient.id;
+ result.givenName = patientName?.given[0];
+ result.middleName = patientName?.given[1];
+ result.familyName = patientName?.family;
+ result.addNameInLocalLanguage = !!additionalPatientName ? true : undefined;
+ result.additionalGivenName = additionalPatientName?.given[0];
+ result.additionalMiddleName = additionalPatientName?.given[1];
+ result.additionalFamilyName = additionalPatientName?.family;
+
+ result.gender = patient.gender;
+ result.birthdate = patient.birthDate ? parseDate(patient.birthDate) : undefined;
+ result.telephoneNumber = patient.telecom ? patient.telecom[0].value : '';
+
+ if (patient.deceasedBoolean || patient.deceasedDateTime) {
+ result.isDead = true;
+ result.deathDate = patient.deceasedDateTime ? patient.deceasedDateTime.split('T')[0] : '';
+ }
+
+ return {
+ ...result,
+ ...patient.identifier.map((identifier) => {
+ const key = camelCase(identifier.system || identifier.type.text);
+ return { [key]: identifier.value };
+ }),
+ };
+}
+
+export function getAddressFieldValuesFromFhirPatient(patient: fhir.Patient) {
+ const result = {};
+ const address = patient.address?.[0];
+
+ if (address) {
+ for (const key of Object.keys(address)) {
+ switch (key) {
+ case 'city':
+ result['cityVillage'] = address[key];
+ break;
+ case 'state':
+ result['stateProvince'] = address[key];
+ break;
+ case 'district':
+ result['countyDistrict'] = address[key];
+ break;
+ case 'extension':
+ address[key].forEach((ext) => {
+ ext.extension.forEach((extension) => {
+ result[extension.url.split('#')[1]] = extension.valueString;
+ });
+ });
+ break;
+ default:
+ if (key === 'country' || key === 'postalCode') {
+ result[key] = address[key];
+ }
+ }
+ }
+ }
+
+ return result;
+}
+
+export function getPatientUuidMapFromFhirPatient(patient: fhir.Patient): PatientUuidMapType {
+ const patientName = patient.name[0];
+ const additionalPatientName = patient.name[1];
+ const address = patient.address?.[0];
+
+ return {
+ preferredNameUuid: patientName?.id,
+ additionalNameUuid: additionalPatientName?.id,
+ preferredAddressUuid: address?.id,
+ ...patient.identifier.map((identifier) => {
+ const key = camelCase(identifier.system || identifier.type.text);
+ return { [key]: { uuid: identifier.id, value: identifier.value } };
+ }),
+ };
+}
+
+export function getPatientIdentifiersFromFhirPatient(patient: fhir.Patient): Array {
+ return patient.identifier.map((identifier) => {
+ return {
+ uuid: identifier.id,
+ identifier: identifier.value,
+ };
+ });
+}
+
+export function getPhonePersonAttributeValueFromFhirPatient(patient: fhir.Patient) {
+ const result = {};
+ if (patient.telecom) {
+ result['phone'] = patient.telecom[0].value;
+ }
+ return result;
+}
+
+export const filterUndefinedPatientIdenfier = (patientIdenfiers) =>
+ Object.fromEntries(
+ Object.entries(patientIdenfiers).filter(
+ ([key, value]) => value.identifierValue !== undefined,
+ ),
+ );
+
+export const latestFirstEncounter = (a: Encounter, b: Encounter) =>
+ new Date(b.encounterDatetime).getTime() - new Date(a.encounterDatetime).getTime();
diff --git a/packages/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx
new file mode 100644
index 00000000..9df7cd41
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx
@@ -0,0 +1,240 @@
+import React, { useState, useEffect, useContext, useMemo, useRef } from 'react';
+import classNames from 'classnames';
+import { Button, Link, InlineLoading, Dropdown } from '@carbon/react';
+import { XAxis } from '@carbon/react/icons';
+import { useLocation, useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Formik, Form, type FormikHelpers } from 'formik';
+import {
+ createErrorHandler,
+ showSnackbar,
+ useConfig,
+ interpolateUrl,
+ usePatient,
+ showModal,
+} from '@openmrs/esm-framework';
+import { getValidationSchema } from './validation/patient-registration-validation';
+import { type FormValues, type CapturePhotoProps } from './patient-registration.types';
+import { PatientRegistrationContext } from './patient-registration-context';
+import { type SavePatientForm, SavePatientTransactionManager } from './form-manager';
+import { fetchPatientRecordFromClientRegistry, usePatientPhoto, fetchPerson } 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 { ResourcesContext } from '../offline.resources';
+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';
+import { TextInput } from '@carbon/react';
+import { ClientRegistry } from '../patient-verification/client-registry.component';
+
+let exportedInitialFormValuesForTesting = {} as FormValues;
+
+export interface PatientRegistrationProps {
+ savePatientForm: SavePatientForm;
+ isOffline: boolean;
+}
+
+export const PatientRegistration: React.FC = ({ savePatientForm, isOffline }) => {
+ const { currentSession, addressTemplate, identifierTypes } = useContext(ResourcesContext);
+ const { search } = useLocation();
+ const config = useConfig() as RegistrationConfig;
+ const [target, setTarget] = useState();
+ const { patientUuid: uuidOfPatientToEdit } = useParams();
+ const { isLoading: isLoadingPatientToEdit, patient: patientToEdit } = usePatient(uuidOfPatientToEdit);
+ const { t } = useTranslation();
+ const [capturePhotoProps, setCapturePhotoProps] = useState(null);
+ const [initialFormValues, setInitialFormValues] = useInitialFormValues(uuidOfPatientToEdit);
+ const [initialAddressFieldValues] = useInitialAddressFieldValues(uuidOfPatientToEdit);
+ const [patientUuidMap] = usePatientUuidMap(uuidOfPatientToEdit);
+ const location = currentSession?.sessionLocation?.uuid;
+ const inEditMode = isLoadingPatientToEdit ? undefined : !!(uuidOfPatientToEdit && patientToEdit);
+ const showDummyData = useMemo(() => localStorage.getItem('openmrs:devtools') === 'true' && !inEditMode, [inEditMode]);
+ const { data: photo } = usePatientPhoto(patientToEdit?.id);
+ const savePatientTransactionManager = useRef(new SavePatientTransactionManager());
+ const fieldDefinition = config?.fieldDefinitions?.filter((def) => def.type === 'address');
+ const validationSchema = getValidationSchema(config);
+
+ useEffect(() => {
+ exportedInitialFormValuesForTesting = initialFormValues;
+ }, [initialFormValues]);
+
+ const sections: Array = useMemo(() => {
+ return config.sections
+ .map(
+ (sectionName) =>
+ config.sectionDefinitions.filter((s) => s.id == sectionName)[0] ??
+ builtInSections.filter((s) => s.id == sectionName)[0],
+ )
+ .filter((s) => s);
+ }, [config.sections, config.sectionDefinitions]);
+
+ const onFormSubmit = async (values: FormValues, helpers: FormikHelpers) => {
+ const abortController = new AbortController();
+ helpers.setSubmitting(true);
+
+ const updatedFormValues = { ...values, identifiers: filterUndefinedPatientIdenfier(values.identifiers) };
+ try {
+ await savePatientForm(
+ !inEditMode,
+ updatedFormValues,
+ patientUuidMap,
+ initialAddressFieldValues,
+ capturePhotoProps,
+ location,
+ initialFormValues['identifiers'],
+ currentSession,
+ config,
+ savePatientTransactionManager.current,
+ abortController,
+ );
+
+ showSnackbar({
+ subtitle: inEditMode
+ ? t('updatePatientSuccessSnackbarSubtitle', "The patient's information has been successfully updated")
+ : t(
+ 'registerPatientSuccessSnackbarSubtitle',
+ 'The patient can now be found by searching for them using their name or ID number',
+ ),
+ title: inEditMode
+ ? t('updatePatientSuccessSnackbarTitle', 'Patient Details Updated')
+ : t('registerPatientSuccessSnackbarTitle', 'New Patient Created'),
+ kind: 'success',
+ isLowContrast: true,
+ });
+
+ const afterUrl = new URLSearchParams(search).get('afterUrl');
+ const redirectUrl = interpolateUrl(afterUrl || config.links.submitButton, { patientUuid: values.patientUuid });
+
+ setTarget(redirectUrl);
+ } catch (error) {
+ if (error.responseBody?.error?.globalErrors) {
+ error.responseBody.error.globalErrors.forEach((error) => {
+ showSnackbar({
+ title: inEditMode
+ ? t('updatePatientErrorSnackbarTitle', 'Patient Details Update Failed')
+ : t('registrationErrorSnackbarTitle', 'Patient Registration Failed'),
+ subtitle: error.message,
+ kind: 'error',
+ });
+ });
+ } else if (error.responseBody?.error?.message) {
+ showSnackbar({
+ title: inEditMode
+ ? t('updatePatientErrorSnackbarTitle', 'Patient Details Update Failed')
+ : t('registrationErrorSnackbarTitle', 'Patient Registration Failed'),
+ subtitle: error.responseBody.error.message,
+ kind: 'error',
+ });
+ } else {
+ createErrorHandler()(error);
+ }
+
+ helpers.setSubmitting(false);
+ }
+ };
+
+ const displayErrors = (errors) => {
+ if (errors && typeof errors === 'object' && !!Object.keys(errors).length) {
+ Object.keys(errors).forEach((error) => {
+ showSnackbar({
+ subtitle: t(`${error}LabelText`, error),
+ title: t('incompleteForm', 'The following field has errors:'),
+ kind: 'warning',
+ isLowContrast: true,
+ timeoutInMs: 5000,
+ });
+ });
+ }
+ };
+
+ return (
+
+ {(props) => (
+
+ )}
+
+ );
+};
+
+/**
+ * @internal
+ * Just exported for testing
+ */
+export { exportedInitialFormValuesForTesting as initialFormValues };
+function dispose() {
+ throw new Error('Function not implemented.');
+}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/patient-registration.resource.test.tsx b/packages/esm-patient-registration-app/src/patient-registration/patient-registration.resource.test.tsx
new file mode 100644
index 00000000..bacd67cf
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/patient-registration.resource.test.tsx
@@ -0,0 +1,26 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { savePatient } from './patient-registration.resource';
+
+const mockOpenmrsFetch = openmrsFetch as jest.Mock;
+
+jest.mock('@openmrs/esm-framework', () => ({
+ openmrsFetch: jest.fn(),
+}));
+
+describe('savePatient', () => {
+ afterEach(() => {
+ jest.resetAllMocks();
+ });
+
+ it('appends patient uuid in url if provided', () => {
+ mockOpenmrsFetch.mockImplementationOnce((url) => url);
+ savePatient(null, '1234');
+ expect(mockOpenmrsFetch.mock.calls[0][0]).toEqual('/ws/rest/v1/patient/1234');
+ });
+
+ it('does not append patient uuid in url', () => {
+ mockOpenmrsFetch.mockImplementationOnce(() => {});
+ savePatient(null);
+ expect(mockOpenmrsFetch.mock.calls[0][0]).toEqual('/ws/rest/v1/patient/');
+ });
+});
diff --git a/packages/esm-patient-registration-app/src/patient-registration/patient-registration.resource.ts b/packages/esm-patient-registration-app/src/patient-registration/patient-registration.resource.ts
new file mode 100644
index 00000000..e55fad63
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/patient-registration.resource.ts
@@ -0,0 +1,250 @@
+import useSWR from 'swr';
+import { openmrsFetch, useConfig } from '@openmrs/esm-framework';
+import { type Patient, type Relationship, type PatientIdentifier, type Encounter } from './patient-registration.types';
+
+export const uuidIdentifier = '05a29f94-c0ed-11e2-94be-8c13b969e334';
+export const uuidTelephoneNumber = '14d4f066-15f5-102d-96e4-000c29c2a5d7';
+
+function dataURItoFile(dataURI: string) {
+ const byteString = atob(dataURI.split(',')[1]);
+ const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+ // write the bytes of the string to a typed array
+ const buffer = new Uint8Array(byteString.length);
+
+ for (let i = 0; i < byteString.length; i++) {
+ buffer[i] = byteString.charCodeAt(i);
+ }
+
+ const blob = new Blob([buffer], { type: mimeString });
+ return new File([blob], 'patient-photo.png');
+}
+
+export function savePatient(patient: Patient | null, updatePatientUuid?: string) {
+ const abortController = new AbortController();
+
+ return openmrsFetch(`/ws/rest/v1/patient/${updatePatientUuid || ''}`, {
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ method: 'POST',
+ body: patient,
+ signal: abortController.signal,
+ });
+}
+
+export function saveEncounter(encounter: Encounter) {
+ const abortController = new AbortController();
+
+ return openmrsFetch(`/ws/rest/v1/encounter`, {
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ method: 'POST',
+ body: encounter,
+ signal: abortController.signal,
+ });
+}
+
+export function generateIdentifier(source: string) {
+ const abortController = new AbortController();
+
+ return openmrsFetch(`/ws/rest/v1/idgen/identifiersource/${source}/identifier`, {
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ method: 'POST',
+ body: {},
+ signal: abortController.signal,
+ });
+}
+
+export function deletePersonName(nameUuid: string, personUuid: string) {
+ const abortController = new AbortController();
+
+ return openmrsFetch(`/ws/rest/v1/person/${personUuid}/name/${nameUuid}`, {
+ method: 'DELETE',
+ signal: abortController.signal,
+ });
+}
+
+export function saveRelationship(relationship: Relationship) {
+ const abortController = new AbortController();
+
+ return openmrsFetch('/ws/rest/v1/relationship', {
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ method: 'POST',
+ body: relationship,
+ signal: abortController.signal,
+ });
+}
+
+export function updateRelationship(relationshipUuid, relationship: { relationshipType: string }) {
+ const abortController = new AbortController();
+
+ return openmrsFetch(`/ws/rest/v1/relationship/${relationshipUuid}`, {
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ method: 'POST',
+ body: { relationshipType: relationship.relationshipType },
+ signal: abortController.signal,
+ });
+}
+
+export function deleteRelationship(relationshipUuid) {
+ const abortController = new AbortController();
+
+ return openmrsFetch(`/ws/rest/v1/relationship/${relationshipUuid}`, {
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ method: 'DELETE',
+ signal: abortController.signal,
+ });
+}
+
+export async function savePatientPhoto(
+ patientUuid: string,
+ content: string,
+ url: string,
+ date: string,
+ conceptUuid: string,
+) {
+ const abortController = new AbortController();
+
+ const formData = new FormData();
+ formData.append('patient', patientUuid);
+ formData.append('file', dataURItoFile(content));
+ formData.append(
+ 'json',
+ JSON.stringify({
+ person: patientUuid,
+ concept: conceptUuid,
+ groupMembers: [],
+ obsDatetime: date,
+ }),
+ );
+
+ return openmrsFetch(url, {
+ method: 'POST',
+ signal: abortController.signal,
+ body: formData,
+ });
+}
+
+interface ObsFetchResponse {
+ results: Array;
+}
+
+interface PhotoObs {
+ display: string;
+ obsDatetime: string;
+ uuid: string;
+ value: {
+ display: string;
+ links: {
+ rel: string;
+ uri: string;
+ };
+ };
+}
+
+interface UsePatientPhotoResult {
+ data: { dateTime: string; imageSrc: string } | null;
+ isError: Error;
+ isLoading: boolean;
+}
+
+export function usePatientPhoto(patientUuid: string): UsePatientPhotoResult {
+ const {
+ concepts: { patientPhotoUuid },
+ } = useConfig();
+ const url = `/ws/rest/v1/obs?patient=${patientUuid}&concept=${patientPhotoUuid}&v=full`;
+
+ const { data, error, isLoading } = useSWR<{ data: ObsFetchResponse }, Error>(patientUuid ? url : null, openmrsFetch);
+
+ const item = data?.data?.results[0];
+
+ return {
+ data: item
+ ? {
+ dateTime: item?.obsDatetime,
+ imageSrc: item?.value?.links?.uri,
+ }
+ : null,
+ isError: error,
+ isLoading,
+ };
+}
+
+export async function fetchPerson(query: string, abortController: AbortController) {
+ const [patientsRes, personsRes] = await Promise.all([
+ openmrsFetch(`/ws/rest/v1/patient?q=${query}`, {
+ signal: abortController.signal,
+ }),
+ openmrsFetch(`/ws/rest/v1/person?q=${query}`, {
+ signal: abortController.signal,
+ }),
+ ]);
+
+ const results = [...patientsRes.data.results];
+
+ personsRes.data.results.forEach((person) => {
+ if (!results.some((patient) => patient.uuid === person.uuid)) {
+ results.push(person);
+ }
+ });
+
+ return results;
+}
+
+export async function addPatientIdentifier(patientUuid: string, patientIdentifier: PatientIdentifier) {
+ const abortController = new AbortController();
+ return openmrsFetch(`/ws/rest/v1/patient/${patientUuid}/identifier/`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ signal: abortController.signal,
+ body: patientIdentifier,
+ });
+}
+
+export async function updatePatientIdentifier(patientUuid: string, identifierUuid: string, identifier: string) {
+ const abortController = new AbortController();
+ return openmrsFetch(`/ws/rest/v1/patient/${patientUuid}/identifier/${identifierUuid}`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ signal: abortController.signal,
+ body: { identifier },
+ });
+}
+
+export async function deletePatientIdentifier(patientUuid: string, patientIdentifierUuid: string) {
+ const abortController = new AbortController();
+ return openmrsFetch(`/ws/rest/v1/patient/${patientUuid}/identifier/${patientIdentifierUuid}?purge`, {
+ method: 'DELETE',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ signal: abortController.signal,
+ });
+}
+export const fetchPatientRecordFromClientRegistry = (
+ patientIdentifier: string,
+ identifierType: string,
+ country: string,
+) => {
+ const url = `
+ https://ngx.ampath.or.ke/registry/api/uno?uno=${patientIdentifier}&idType=${identifierType}&countryCode=${country}`;
+
+ return fetch(url)
+ .then((response) => {
+ return response.json();
+ })
+ .then((data) => data);
+};
diff --git a/packages/esm-patient-registration-app/src/patient-registration/patient-registration.scss b/packages/esm-patient-registration-app/src/patient-registration/patient-registration.scss
new file mode 100644
index 00000000..3c1181fa
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/patient-registration.scss
@@ -0,0 +1,122 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.title {
+ color: var(--omrs-color-brand-teal);
+}
+
+.submit {
+ width: 250px;
+}
+
+.submit:hover {
+ cursor: pointer;
+}
+
+.cancelButton {
+ width: 11.688rem;
+}
+
+.submitButton {
+ margin-bottom: spacing.$spacing-05;
+ width: 11.688rem;
+ display: block;
+}
+
+.infoGrid {
+ width: 100%;
+ padding-left: spacing.$spacing-07;
+ margin-bottom: 40vh;
+ margin-top: spacing.$spacing-05;
+ max-width: 50rem;
+}
+
+.label01 {
+ @include type.type-style('label-01');
+ margin-top: spacing.$spacing-05;
+ margin-bottom: spacing.$spacing-05;
+ color: $ui-04;
+}
+
+.productiveHeading02 {
+ @include type.type-style('heading-compact-02');
+ color: $ui-04;
+ cursor: pointer;
+}
+
+.space05 {
+ margin: spacing.$spacing-05 0 spacing.$spacing-05 0;
+}
+
+.formContainer {
+ display: flex;
+ width: 100%;
+}
+
+.stickyColumn {
+ position: sticky;
+ margin-top: spacing.$spacing-05;
+ // 3rem for the nav height and 1rem for top margin
+ top: 4rem;
+}
+
+.touchTarget a:active {
+ color: $color-gray-100;
+}
+
+.linkName {
+ color: $color-gray-70;
+ line-height: 1.38;
+ font-size: spacing.$spacing-05;
+ font-weight: 600;
+
+ &:active {
+ text-decoration: none;
+ color: $color-gray-100;
+ }
+
+ &:hover {
+ text-decoration: none;
+ color: $color-gray-100;
+ cursor: pointer;
+ }
+}
+
+.main {
+ background-color: white;
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+ .infoGrid {
+ max-width: unset;
+ }
+}
+
+.spinner {
+ &:global(.cds--inline-loading) {
+ min-height: 1rem;
+ }
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+ .linkName {
+ & > svg {
+ transform: scale(-1, 1);
+ }
+ }
+
+ .infoGrid {
+ padding-left: unset;
+ padding-right: spacing.$spacing-07;
+ }
+}
+.patientVerification {
+ & > * {
+ margin-top: spacing.$spacing-03;
+ }
+ & > :last-child {
+ margin-top: spacing.$spacing-03;
+ }
+}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/patient-registration.test.tsx b/packages/esm-patient-registration-app/src/patient-registration/patient-registration.test.tsx
new file mode 100644
index 00000000..1c1b11e7
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/patient-registration.test.tsx
@@ -0,0 +1,471 @@
+import React from 'react';
+import { BrowserRouter as Router, useParams } from 'react-router-dom';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { showSnackbar, useConfig, usePatient } from '@openmrs/esm-framework';
+import type { AddressTemplate, Encounter } from './patient-registration.types';
+import { type RegistrationConfig } from '../config-schema';
+import { FormManager } from './form-manager';
+import { ResourcesContext } from '../offline.resources';
+import { PatientRegistration } from './patient-registration.component';
+import { saveEncounter, savePatient } from './patient-registration.resource';
+import { mockedAddressTemplate } from '__mocks__';
+import { mockPatient } from 'tools';
+
+const mockedUseConfig = useConfig as jest.Mock;
+const mockedUsePatient = usePatient as jest.Mock;
+const mockedSaveEncounter = saveEncounter as jest.Mock;
+const mockedSavePatient = savePatient as jest.Mock;
+const mockedShowSnackbar = showSnackbar as jest.Mock;
+
+jest.mock('./field/field.resource', () => ({
+ useConcept: jest.fn().mockImplementation((uuid: string) => {
+ let data;
+ if (uuid == 'weight-uuid') {
+ data = {
+ uuid: 'weight-uuid',
+ display: 'Weight (kg)',
+ datatype: { display: 'Numeric', uuid: 'num' },
+ answers: [],
+ setMembers: [],
+ };
+ } else if (uuid == 'chief-complaint-uuid') {
+ data = {
+ uuid: 'chief-complaint-uuid',
+ display: 'Chief Complaint',
+ datatype: { display: 'Text', uuid: 'txt' },
+ answers: [],
+ setMembers: [],
+ };
+ } else if (uuid == 'nationality-uuid') {
+ data = {
+ uuid: 'nationality-uuid',
+ display: 'Nationality',
+ datatype: { display: 'Coded', uuid: 'cdd' },
+ answers: [
+ { display: 'USA', uuid: 'usa' },
+ { display: 'Mexico', uuid: 'mex' },
+ ],
+ setMembers: [],
+ };
+ }
+ return {
+ data: data ?? null,
+ isLoading: !data,
+ };
+ }),
+ useConceptAnswers: jest.fn().mockImplementation((uuid: string) => {
+ if (uuid == 'nationality-uuid') {
+ return {
+ data: [
+ { display: 'USA', uuid: 'usa' },
+ { display: 'Mexico', uuid: 'mex' },
+ ],
+ isLoading: false,
+ };
+ } else if (uuid == 'other-countries-uuid') {
+ return {
+ data: [
+ { display: 'Kenya', uuid: 'ke' },
+ { display: 'Uganda', uuid: 'ug' },
+ ],
+ isLoading: false,
+ };
+ }
+ }),
+}));
+
+jest.mock('@openmrs/esm-framework', () => {
+ const originalModule = jest.requireActual('@openmrs/esm-framework');
+
+ return {
+ ...originalModule,
+ validator: jest.fn(),
+ };
+});
+
+jest.mock('react-router-dom', () => ({
+ ...(jest.requireActual('react-router-dom') as any),
+ useLocation: () => ({
+ pathname: 'openmrs/spa/patient-registration',
+ }),
+ useHistory: () => [],
+ useParams: jest.fn().mockReturnValue({ patientUuid: undefined }),
+}));
+
+jest.mock('./patient-registration.resource', () => {
+ const originalModule = jest.requireActual('./patient-registration.resource');
+
+ return {
+ ...originalModule,
+ saveEncounter: jest.fn(),
+ savePatient: jest.fn(),
+ };
+});
+
+jest.mock('@openmrs/esm-framework', () => {
+ const originalModule = jest.requireActual('@openmrs/esm-framework');
+
+ return {
+ ...originalModule,
+ validator: jest.fn(),
+ getLocale: jest.fn().mockReturnValue('en'),
+ };
+});
+
+const mockResourcesContextValue = {
+ addressTemplate: mockedAddressTemplate as AddressTemplate,
+ currentSession: {
+ authenticated: true,
+ sessionId: 'JSESSION',
+ currentProvider: { uuid: 'provider-uuid', identifier: 'PRO-123' },
+ },
+ relationshipTypes: [],
+ identifierTypes: [],
+};
+
+let mockOpenmrsConfig: RegistrationConfig = {
+ sections: ['demographics', 'contact'],
+ sectionDefinitions: [
+ { id: 'demographics', name: 'Demographics', fields: ['name', 'gender', 'dob'] },
+ { id: 'contact', name: 'Contact Info', fields: ['address'] },
+ { id: 'relationships', name: 'Relationships', fields: ['relationship'] },
+ ],
+ fieldDefinitions: [],
+ fieldConfigurations: {
+ dateOfBirth: {
+ allowEstimatedDateOfBirth: true,
+ useEstimatedDateOfBirth: {
+ enabled: true,
+ dayOfMonth: new Date().getDay(),
+ month: new Date().getMonth(),
+ },
+ },
+ name: {
+ displayMiddleName: true,
+ allowUnidentifiedPatients: true,
+ defaultUnknownGivenName: 'UNKNOWN',
+ defaultUnknownFamilyName: 'UNKNOWN',
+ displayReverseFieldOrder: false,
+ displayCapturePhoto: true,
+ },
+ gender: [
+ {
+ value: 'male',
+ label: 'Male',
+ },
+ ],
+ address: {
+ useAddressHierarchy: {
+ enabled: true,
+ useQuickSearch: true,
+ searchAddressByLevel: true,
+ },
+ },
+ },
+ concepts: {
+ patientPhotoUuid: '736e8771-e501-4615-bfa7-570c03f4bef5',
+ },
+ links: {
+ submitButton: '#',
+ },
+ defaultPatientIdentifierTypes: [],
+ registrationObs: {
+ encounterTypeUuid: null,
+ encounterProviderRoleUuid: 'asdf',
+ registrationFormUuid: null,
+ },
+};
+
+const path = `/patient/:patientUuid/edit`;
+
+const configWithObs = JSON.parse(JSON.stringify(mockOpenmrsConfig));
+configWithObs.fieldDefinitions = [
+ {
+ id: 'weight',
+ type: 'obs',
+ label: null,
+ uuid: 'weight-uuid',
+ placeholder: '',
+ validation: { required: false, matches: null },
+ answerConceptSetUuid: null,
+ customConceptAnswers: [],
+ },
+ {
+ id: 'chief complaint',
+ type: 'obs',
+ label: null,
+ uuid: 'chief-complaint-uuid',
+ placeholder: '',
+ validation: { required: false, matches: null },
+ answerConceptSetUuid: null,
+ customConceptAnswers: [],
+ },
+ {
+ id: 'nationality',
+ type: 'obs',
+ label: null,
+ uuid: 'nationality-uuid',
+ placeholder: '',
+ validation: { required: false, matches: null },
+ answerConceptSetUuid: null,
+ customConceptAnswers: [],
+ },
+];
+
+configWithObs.sectionDefinitions?.push({
+ id: 'custom',
+ name: 'Custom',
+ fields: ['weight', 'chief complaint', 'nationality'],
+});
+configWithObs.sections.push('custom');
+configWithObs.registrationObs.encounterTypeUuid = 'reg-enc-uuid';
+
+const fillRequiredFields = async () => {
+ const user = userEvent.setup();
+
+ const demographicsSection = await screen.findByLabelText('Demographics Section');
+ const givenNameInput = within(demographicsSection).getByLabelText(/first/i) as HTMLInputElement;
+ const familyNameInput = within(demographicsSection).getByLabelText(/family/i) as HTMLInputElement;
+ const dateOfBirthInput = within(demographicsSection).getByLabelText(/date of birth/i) as HTMLInputElement;
+ const genderInput = within(demographicsSection).getByLabelText(/Male/) as HTMLSelectElement;
+
+ await user.type(givenNameInput, 'Paul');
+ await user.type(familyNameInput, 'Gaihre');
+ await user.clear(dateOfBirthInput);
+ await user.type(dateOfBirthInput, '02/08/1993');
+ user.click(genderInput);
+};
+
+function Wrapper({ children }) {
+ return (
+
+ {children}
+
+ );
+}
+
+describe('Registering a new patient', () => {
+ beforeEach(() => {
+ mockedUseConfig.mockReturnValue(mockOpenmrsConfig);
+ mockedSavePatient.mockReturnValue({ data: { uuid: 'new-pt-uuid' }, ok: true });
+ mockedSaveEncounter.mockClear();
+ mockedShowSnackbar.mockClear();
+ jest.clearAllMocks();
+ });
+
+ it('renders without crashing', () => {
+ render(>({
+ encounterType: 'reg-enc-uuid',
+ patient: 'new-pt-uuid',
+ obs: [
+ { concept: 'weight-uuid', value: 50 },
+ { concept: 'chief-complaint-uuid', value: 'sad' },
+ { concept: 'nationality-uuid', value: 'usa' },
+ ],
+ }),
+ );
+ });
+
+ it('retries saving registration obs after a failed attempt', async () => {
+ const user = userEvent.setup();
+
+ mockedUseConfig.mockReturnValue(configWithObs);
+
+ render(;
+ autoGenerationSource?: IdentifierSource;
+ checked?: boolean;
+ source?: IdentifierSource;
+}
+
+export interface IdentifierSource {
+ uuid: string;
+ name: string;
+ autoGenerationOption?: IdentifierSourceAutoGenerationOption;
+}
+
+export interface IdentifierSourceAutoGenerationOption {
+ manualEntryEnabled: boolean;
+ automaticGenerationEnabled: boolean;
+}
+
+export interface PatientIdentifier {
+ uuid?: string;
+ identifier: string;
+ identifierType?: string;
+ location?: string;
+ preferred?: boolean;
+}
+
+export interface PatientRegistration {
+ id?: number;
+ /**
+ * The preliminary patient in the FHIR format.
+ */
+ fhirPatient: fhir.Patient;
+ /**
+ * Internal data collected by patient-registration. Required for later syncing and editing.
+ * Not supposed to be used outside of this module.
+ */
+ _patientRegistrationData: {
+ isNewPatient: boolean;
+ formValues: FormValues;
+ patientUuidMap: PatientUuidMapType;
+ initialAddressFieldValues: Record;
+ capturePhotoProps: CapturePhotoProps;
+ currentLocation: string;
+ initialIdentifierValues: FormValues['identifiers'];
+ currentUser: Session;
+ config: RegistrationConfig;
+ savePatientTransactionManager: SavePatientTransactionManager;
+ };
+}
+
+export type Relationship = {
+ relationshipType: string;
+ personA: string;
+ personB: string;
+};
+
+export type Patient = {
+ uuid: string;
+ identifiers: Array;
+ person: {
+ uuid: string;
+ names: Array;
+ gender: string;
+ birthdate: string;
+ birthdateEstimated: boolean;
+ attributes: Array;
+ addresses: Array>;
+ dead: boolean;
+ deathDate?: string;
+ causeOfDeath?: string;
+ };
+};
+
+export interface Encounter {
+ encounterDatetime: Date;
+ patient: string;
+ encounterType: string;
+ location: string;
+ encounterProviders: Array<{
+ provider: string;
+ encounterRole: string;
+ }>;
+ form: string;
+ obs: Array<{
+ concept: string | OpenmrsResource;
+ value: string | number | OpenmrsResource;
+ }>;
+}
+
+export interface RelationshipValue {
+ relatedPersonName?: string;
+ relatedPersonUuid: string;
+ relation?: string;
+ relationshipType: string;
+ /**
+ * Defines the action to be taken on the existing relationship
+ * @kind ADD -> adds a new relationship
+ * @kind UPDATE -> updates an existing relationship
+ * @kind DELETE -> deletes an existing relationship
+ * @kind undefined -> no operation on the existing relationship
+ */
+ action?: 'ADD' | 'UPDATE' | 'DELETE';
+ /**
+ * Value kept for restoring initial relationshipType value
+ */
+ initialrelationshipTypeValue?: string;
+ uuid?: string;
+}
+
+export interface FormValues {
+ patientUuid: string;
+ givenName: string;
+ middleName: string;
+ familyName: string;
+ additionalGivenName: string;
+ additionalMiddleName: string;
+ additionalFamilyName: string;
+ addNameInLocalLanguage: boolean;
+ gender: string;
+ birthdate: Date | string;
+ yearsEstimated: number;
+ monthsEstimated: number;
+ birthdateEstimated: boolean;
+ telephoneNumber: string;
+ isDead: boolean;
+ deathDate: string;
+ deathCause: string;
+ relationships: Array;
+ identifiers: {
+ [identifierFieldName: string]: PatientIdentifierValue;
+ };
+ attributes?: {
+ [attributeTypeUuid: string]: string;
+ };
+ obs?: {
+ [conceptUuid: string]: string;
+ };
+ address: {
+ [addressField: string]: string;
+ };
+}
+
+export interface PatientUuidMapType {
+ additionalNameUuid?: string;
+ preferredNameUuid?: string;
+ preferredAddressUuid?: string;
+}
+
+export interface CapturePhotoProps {
+ imageData: string;
+ dateTime: string;
+}
+
+export interface AddressValidationSchemaType {
+ name: string;
+ label: string;
+ regex: RegExp;
+ regexFormat: string;
+}
+
+export interface CodedPersonAttributeConfig {
+ personAttributeUuid: string;
+ conceptUuid: string;
+}
+
+export interface TextBasedPersonAttributeConfig {
+ personAttributeUuid: string;
+ validationRegex: string;
+}
+export interface PatientIdentifierResponse {
+ uuid: string;
+ identifier: string;
+ preferred: boolean;
+ identifierType: {
+ uuid: string;
+ required: boolean;
+ name: string;
+ };
+}
+export interface PersonAttributeTypeResponse {
+ uuid: string;
+ display: string;
+ name: string;
+ description: string;
+ format: string;
+}
+
+export interface PersonAttributeResponse {
+ display: string;
+ uuid: string;
+ value:
+ | string
+ | {
+ uuid: string;
+ display: string;
+ };
+ attributeType: {
+ display: string;
+ uuid: string;
+ format: 'org.openmrs.Concept' | string;
+ };
+}
+
+export interface ConceptResponse {
+ uuid: string;
+ display: string;
+ datatype: {
+ uuid: string;
+ display: string;
+ };
+ answers: Array;
+ setMembers: Array;
+}
+
+export interface ConceptAnswers {
+ display: string;
+ uuid: string;
+}
+
+export type AddressProperties =
+ | 'cityVillage'
+ | 'stateProvince'
+ | 'countyDistrict'
+ | 'postalCode'
+ | 'country'
+ | 'address1'
+ | 'address2'
+ | 'address3'
+ | 'address4'
+ | 'address5'
+ | 'address6'
+ | 'address7'
+ | 'address8'
+ | 'address9'
+ | 'address10'
+ | 'address11'
+ | 'address12'
+ | 'address13'
+ | 'address14'
+ | 'address15';
+
+export type ExtensibleAddressProperties = { [p in AddressProperties]?: string } | null;
+
+export interface AddressTemplate {
+ displayName: string | null;
+ codeName: string | null;
+ country: string | null;
+ lines: Array<
+ Array<{
+ isToken: 'IS_NOT_ADDR_TOKEN' | 'IS_ADDR_TOKEN';
+ displayText: string;
+ codeName?: AddressProperties;
+ displaySize?: string;
+ }>
+ > | null;
+ lineByLineFormat: Array | null;
+ nameMappings: ExtensibleAddressProperties;
+ sizeMappings: ExtensibleAddressProperties;
+ elementDefaults: ExtensibleAddressProperties;
+ elementRegex: ExtensibleAddressProperties;
+ elementRegexFormats: ExtensibleAddressProperties;
+ requiredElements: Array | null;
+}
+
+// https://rest.openmrs.org/#address-template
+export interface RestAddressTemplate {
+ uuid: string;
+ description: string;
+ property: string;
+ display: string;
+ value: string;
+}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/section/death-info/death-info-section.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/section/death-info/death-info-section.component.tsx
new file mode 100644
index 00000000..6b33cf3b
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/section/death-info/death-info-section.component.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Input } from '../../input/basic-input/input/input.component';
+import { SelectInput } from '../../input/basic-input/select/select-input.component';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import styles from './../section.scss';
+
+export const DeathInfoSection = () => {
+ const { values } = React.useContext(PatientRegistrationContext);
+ const { t } = useTranslation();
+
+ return (
+
+ );
+};
diff --git a/packages/esm-patient-registration-app/src/patient-registration/section/death-info/death-info-section.test.tsx b/packages/esm-patient-registration-app/src/patient-registration/section/death-info/death-info-section.test.tsx
new file mode 100644
index 00000000..9a2a06f6
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/section/death-info/death-info-section.test.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Formik, Form } from 'formik';
+import { initialFormValues } from '../../patient-registration.component';
+import { DeathInfoSection } from './death-info-section.component';
+import { type FormValues } from '../../patient-registration.types';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+
+jest.mock('@openmrs/esm-framework', () => {
+ const originalModule = jest.requireActual('@openmrs/esm-framework');
+
+ return {
+ ...originalModule,
+ validator: jest.fn(),
+ };
+});
+
+const initialContextValues = {
+ currentPhoto: 'data:image/png;base64,1234567890',
+ identifierTypes: [],
+ inEditMode: false,
+ initialFormValues: {} as FormValues,
+ isOffline: false,
+ setCapturePhotoProps: jest.fn(),
+ setFieldValue: jest.fn(),
+ setInitialFormValues: jest.fn(),
+ validationSchema: null,
+ values: {
+ isDead: true,
+ } as FormValues,
+};
+
+describe('Death info section', () => {
+ const renderDeathInfoSection = (isDead) => {
+ initialContextValues.values.isDead = isDead;
+
+ return render(
+
+
+
+
+ ,
+ );
+ };
+
+ it('shows fields for recording death info when the patient is marked as dead', () => {
+ renderDeathInfoSection(true);
+
+ expect(screen.getByRole('region', { name: /death info section/i })).toBeInTheDocument();
+ expect(screen.getByRole('heading', { name: /death info/i })).toBeInTheDocument();
+ expect(screen.getByRole('textbox', { name: /is dead \(optional\)/i })).toBeInTheDocument();
+ expect(screen.getByRole('textbox', { name: /date of death \(optional\)/i })).toBeInTheDocument();
+ expect(screen.getByRole('combobox', { name: /cause of death \(optional\)/i })).toBeInTheDocument();
+ });
+
+ it('has the correct number of inputs if is dead is not checked', async () => {
+ renderDeathInfoSection(false);
+
+ expect(screen.queryByRole('textbox', { name: /date of death \(optional\)/i })).not.toBeInTheDocument();
+ expect(screen.queryByRole('combobox', { name: /cause of death \(optional\)/i })).not.toBeInTheDocument();
+ });
+});
diff --git a/packages/esm-patient-registration-app/src/patient-registration/section/demographics/demographics-section.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/section/demographics/demographics-section.component.tsx
new file mode 100644
index 00000000..3ab1adb2
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/section/demographics/demographics-section.component.tsx
@@ -0,0 +1,30 @@
+import React, { useContext, useEffect } from 'react';
+import styles from './../section.scss';
+import { useField } from 'formik';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import { Field } from '../../field/field.component';
+
+export interface DemographicsSectionProps {
+ fields: Array;
+}
+
+export const DemographicsSection: React.FC = ({ fields }) => {
+ const [field, meta] = useField('addNameInLocalLanguage');
+ const { setFieldValue } = useContext(PatientRegistrationContext);
+
+ useEffect(() => {
+ if (!field.value && meta.touched) {
+ setFieldValue('additionalGivenName', '');
+ setFieldValue('additionalMiddleName', '');
+ setFieldValue('additionalFamilyName', '');
+ }
+ }, [field.value, meta.touched]);
+
+ return (
+
+ {fields.map((field) => (
+
+ );
+};
diff --git a/packages/esm-patient-registration-app/src/patient-registration/section/demographics/demographics-section.test.tsx b/packages/esm-patient-registration-app/src/patient-registration/section/demographics/demographics-section.test.tsx
new file mode 100644
index 00000000..e0e4615c
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/section/demographics/demographics-section.test.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Formik, Form } from 'formik';
+import { initialFormValues } from '../../patient-registration.component';
+import { DemographicsSection } from './demographics-section.component';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import { type FormValues } from '../../patient-registration.types';
+
+jest.mock('@openmrs/esm-framework', () => {
+ const originalModule = jest.requireActual('@openmrs/esm-framework');
+
+ return {
+ ...originalModule,
+ validator: jest.fn(),
+ useConfig: jest.fn().mockImplementation(() => ({
+ fieldConfigurations: { dateOfBirth: { useEstimatedDateOfBirth: { enabled: true, dayOfMonth: 0, month: 0 } } },
+ })),
+ };
+});
+
+jest.mock('../../field/name/name-field.component', () => {
+ return {
+ NameField: () => (
+
+
+ ),
+ };
+});
+
+jest.mock('../../field/gender/gender-field.component', () => {
+ return {
+ GenderField: () => (
+
+
+ ),
+ };
+});
+
+jest.mock('../../field/id/id-field.component', () => {
+ return {
+ IdField: () => (
+
+
+ ),
+ };
+});
+
+describe('demographics section', () => {
+ const formValues: FormValues = initialFormValues;
+
+ const setupSection = async (birthdateEstimated?: boolean, addNameInLocalLanguage?: boolean) => {
+ render(
+
+
+ ,
+ );
+ const allInputs = screen.getAllByRole('textbox') as Array;
+ return allInputs.map((input) => input.name);
+ };
+
+ it('inputs corresponding to number of fields', async () => {
+ const inputNames = await setupSection();
+ expect(inputNames.length).toBe(3);
+ });
+});
diff --git a/packages/esm-patient-registration-app/src/patient-registration/section/generic-section.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/section/generic-section.component.tsx
new file mode 100644
index 00000000..8544a591
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/section/generic-section.component.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { type SectionDefinition } from '../../config-schema';
+import { Field } from '../field/field.component';
+
+export interface GenericSectionProps {
+ sectionDefinition: SectionDefinition;
+}
+
+export const GenericSection = ({ sectionDefinition }: GenericSectionProps) => {
+ return (
+
+ {sectionDefinition.fields.map((name) => (
+
+ );
+};
diff --git a/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships-section.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships-section.component.tsx
new file mode 100644
index 00000000..72ca4504
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships-section.component.tsx
@@ -0,0 +1,235 @@
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import {
+ Button,
+ Layer,
+ Select,
+ SelectItem,
+ InlineNotification,
+ NotificationActionButton,
+ SkeletonText,
+} from '@carbon/react';
+import { TrashCan } from '@carbon/react/icons';
+import { FieldArray } from 'formik';
+import { useTranslation } from 'react-i18next';
+import { Autosuggest } from '../../input/custom-input/autosuggest/autosuggest.component';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import { ResourcesContext } from '../../../offline.resources';
+import { fetchPerson } from '../../patient-registration.resource';
+import { type RelationshipValue } from '../../patient-registration.types';
+import sectionStyles from '../section.scss';
+import styles from './relationships.scss';
+
+interface RelationshipType {
+ display: string;
+ uuid: string;
+ direction: string;
+}
+
+interface RelationshipViewProps {
+ relationship: RelationshipValue;
+ index: number;
+ displayRelationshipTypes: RelationshipType[];
+ remove: (index: number) => T;
+}
+
+const RelationshipView: React.FC = ({
+ relationship,
+ index,
+ displayRelationshipTypes,
+ remove,
+}) => {
+ const { t } = useTranslation();
+ const { setFieldValue } = React.useContext(PatientRegistrationContext);
+ const [isInvalid, setIsInvalid] = useState(false);
+ const newRelationship = !relationship.uuid;
+
+ const handleRelationshipTypeChange = useCallback(
+ (event) => {
+ const { target } = event;
+ const field = target.name;
+ const value = target.options[target.selectedIndex].value;
+ setFieldValue(field, value);
+ if (!relationship?.action) {
+ setFieldValue(`relationships[${index}].action`, 'UPDATE');
+ }
+ },
+ [index, relationship?.action, setFieldValue],
+ );
+
+ const handleSuggestionSelected = useCallback(
+ (field: string, selectedSuggestion: string) => {
+ setIsInvalid(!selectedSuggestion);
+ setFieldValue(field, selectedSuggestion);
+ },
+ [setFieldValue],
+ );
+
+ const searchPerson = async (query: string) => {
+ const abortController = new AbortController();
+ return await fetchPerson(query, abortController);
+ };
+
+ const deleteRelationship = useCallback(() => {
+ if (relationship.action === 'ADD') {
+ remove(index);
+ } else {
+ setFieldValue(`relationships[${index}].action`, 'DELETE');
+ }
+ }, [relationship, index, remove, setFieldValue]);
+
+ const restoreRelationship = useCallback(() => {
+ setFieldValue(`relationships[${index}]`, {
+ ...relationship,
+ action: undefined,
+ relationshipType: relationship.initialrelationshipTypeValue,
+ });
+ }, [index, setFieldValue, relationship]);
+
+ return relationship.action !== 'DELETE' ? (
+
+
+
+
{t('relationshipPlaceholder', 'Relationship')}
+
+
+
+
+ {newRelationship ? (
+
item.display}
+ getFieldValue={(item) => item.uuid}
+ />
+ ) : (
+ <>
+ {t('relativeFullNameLabelText', 'Full name')}
+ {relationship.relatedPersonName}
+
+ )}
+
+
+
+
+
+
+
+
+
+ {t('restoreRelationshipActionButton', 'Undo')}
+
+ }
+ />
+ );
+};
+
+export const RelationshipsSection = () => {
+ const { relationshipTypes } = useContext(ResourcesContext);
+ const [displayRelationshipTypes, setDisplayRelationshipTypes] = useState([]);
+ const { t } = useTranslation();
+
+ useEffect(() => {
+ if (relationshipTypes) {
+ const tmp: RelationshipType[] = [];
+ relationshipTypes.results.forEach((type) => {
+ const aIsToB = {
+ display: type.displayAIsToB ? type.displayAIsToB : type.displayBIsToA,
+ uuid: type.uuid,
+ direction: 'aIsToB',
+ };
+ const bIsToA = {
+ display: type.displayBIsToA ? type.displayBIsToA : type.displayAIsToB,
+ uuid: type.uuid,
+ direction: 'bIsToA',
+ };
+ aIsToB.display === bIsToA.display ? tmp.push(aIsToB) : tmp.push(aIsToB, bIsToA);
+ });
+ setDisplayRelationshipTypes(tmp);
+ }
+ }, [relationshipTypes]);
+
+ if (!relationshipTypes) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+ {({
+ push,
+ remove,
+ form: {
+ values: { relationships },
+ },
+ }) => (
+
+ {relationships && relationships.length > 0
+ ? relationships.map((relationship: RelationshipValue, index) => (
+
+
+ ))
+ : null}
+
+
+ push({
+ relatedPersonUuid: '',
+ action: 'ADD',
+ })
+ }>
+ {t('addRelationshipButtonText', 'Add Relationship')}
+
+
+
+
+ );
+};
diff --git a/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships-section.test.tsx b/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships-section.test.tsx
new file mode 100644
index 00000000..d804e226
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships-section.test.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import { Form, Formik } from 'formik';
+import { render, screen } from '@testing-library/react';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import { type Resources, ResourcesContext } from '../../../offline.resources';
+import { RelationshipsSection } from './relationships-section.component';
+
+jest.mock('../../patient-registration.resource', () => ({
+ fetchPerson: jest.fn().mockResolvedValue({
+ data: {
+ results: [
+ { uuid: '42ae5ce0-d64b-11ea-9064-5adc43bbdd24', display: 'Person 1' },
+ { uuid: '691eed12-c0f1-11e2-94be-8c13b969e334', display: 'Person 2' },
+ ],
+ },
+ }),
+}));
+
+let mockResourcesContextValue = {
+ addressTemplate: null,
+ currentSession: {
+ authenticated: true,
+ sessionId: 'JSESSION',
+ currentProvider: { uuid: '45ce6c2e-dd5a-11e6-9d9c-0242ac150002', identifier: 'PRO-123' },
+ },
+ identifierTypes: [],
+ relationshipTypes: null,
+} as Resources;
+
+describe('RelationshipsSection', () => {
+ it('renders a loader when relationshipTypes are not available', () => {
+ render(
+
+
+
+
+ ,
+ );
+
+ expect(screen.getByLabelText(/loading relationships section/i)).toBeInTheDocument();
+ expect(screen.getByRole('progressbar')).toBeInTheDocument();
+ expect(screen.queryByText(/add relationship/i)).not.toBeInTheDocument();
+ });
+
+ it('renders relationships when relationshipTypes are available', () => {
+ const relationshipTypes = {
+ results: [
+ {
+ displayAIsToB: 'Mother',
+ aIsToB: 'Mother',
+ bIsToA: 'Child',
+ displayBIsToA: 'Child',
+ uuid: '42ae5ce0-d64b-11ea-9064-5adc43bbdd34',
+ },
+ {
+ displayAIsToB: 'Father',
+ aIsToB: 'Father',
+ bIsToA: 'Child',
+ displayBIsToA: 'Child',
+ uuid: '52ae5ce0-d64b-11ea-9064-5adc43bbdd24',
+ },
+ ],
+ };
+ mockResourcesContextValue = {
+ ...mockResourcesContextValue,
+ relationshipTypes: relationshipTypes,
+ };
+
+ render(
+
+
+
+
+ ,
+ );
+
+ expect(screen.getByLabelText(/relationships section/i)).toBeInTheDocument();
+ expect(screen.getByRole('heading', { name: /relationship/i })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: /delete/i })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: /add relationship/i })).toBeInTheDocument();
+ expect(screen.getByRole('searchbox', { name: /full name/i })).toBeInTheDocument();
+ expect(screen.getByRole('option', { name: /mother/i })).toBeInTheDocument();
+ expect(screen.getByRole('option', { name: /father/i })).toBeInTheDocument();
+ expect(screen.getAllByRole('option', { name: /child/i }).length).toEqual(2);
+ });
+});
diff --git a/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships.resource.tsx b/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships.resource.tsx
new file mode 100644
index 00000000..4813404a
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships.resource.tsx
@@ -0,0 +1,78 @@
+import { useMemo } from 'react';
+import useSWR from 'swr';
+import { type FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
+import { type RelationshipValue } from '../../patient-registration.types';
+import { personRelationshipRepresentation } from '../../../constants';
+
+export function useInitialPatientRelationships(patientUuid: string): {
+ data: Array;
+ isLoading: boolean;
+} {
+ const shouldFetch = !!patientUuid;
+ const { data, error, isLoading } = useSWR, Error>(
+ shouldFetch ? `/ws/rest/v1/relationship?v=${personRelationshipRepresentation}&person=${patientUuid}` : null,
+ openmrsFetch,
+ );
+
+ const result = useMemo(() => {
+ const relationships: Array | undefined = data?.data?.results.map((r) =>
+ r.personA.uuid === patientUuid
+ ? {
+ relatedPersonName: r.personB.display,
+ relatedPersonUuid: r.personB.uuid,
+ relation: r.relationshipType.bIsToA,
+ relationshipType: `${r.relationshipType.uuid}/bIsToA`,
+ /**
+ * Value kept for restoring initial value
+ */
+ initialrelationshipTypeValue: `${r.relationshipType.uuid}/bIsToA`,
+ uuid: r.uuid,
+ }
+ : {
+ relatedPersonName: r.personA.display,
+ relatedPersonUuid: r.personA.uuid,
+ relation: r.relationshipType.aIsToB,
+ relationshipType: `${r.relationshipType.uuid}/aIsToB`,
+ /**
+ * Value kept for restoring initial value
+ */
+ initialrelationshipTypeValue: `${r.relationshipType.uuid}/aIsToB`,
+ uuid: r.uuid,
+ },
+ );
+ return {
+ data: relationships,
+ error,
+ isLoading,
+ };
+ }, [patientUuid, data, error]);
+
+ return result;
+}
+
+export interface Relationship {
+ display: string;
+ uuid: string;
+ personA: {
+ age: number;
+ display: string;
+ birthdate: string;
+ uuid: string;
+ };
+ personB: {
+ age: number;
+ display: string;
+ birthdate: string;
+ uuid: string;
+ };
+ relationshipType: {
+ uuid: string;
+ display: string;
+ aIsToB: string;
+ bIsToA: string;
+ };
+}
+
+interface RelationshipsResponse {
+ results: Array;
+}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships.scss b/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships.scss
new file mode 100644
index 00000000..4e8f631a
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships.scss
@@ -0,0 +1,35 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '../../patient-registration.scss';
+
+.labelText {
+ @include type.type-style('label-01');
+}
+
+.bodyShort02 {
+ @include type.type-style('body-compact-02');
+}
+
+.searchBox {
+ margin-bottom: spacing.$spacing-05;
+}
+
+.relationshipHeader {
+ display: flex;
+ align-items: center;
+}
+
+.productiveHeading {
+ @include type.type-style('heading-compact-02');
+ color: $text-02;
+}
+
+.trashCan {
+ color: $danger !important;
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+ .relationshipHeader {
+ justify-content: space-between;
+ }
+}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/section/section-wrapper.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/section/section-wrapper.component.tsx
new file mode 100644
index 00000000..acc9e7ab
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/section/section-wrapper.component.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import styles from '../patient-registration.scss';
+import { Tile } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { type SectionDefinition } from '../../config-schema';
+import { Section } from './section.component';
+
+export interface SectionWrapperProps {
+ sectionDefinition: SectionDefinition;
+ index: number;
+}
+
+export const SectionWrapper = ({ sectionDefinition, index }: SectionWrapperProps) => {
+ const { t } = useTranslation();
+
+ /*
+ * This comment exists to provide translation keys for the default section names.
+ *
+ * DO NOT REMOVE THESE UNLESS A DEFAULT SECTION IS REMOVED
+ * t('demographicsSection', 'Basic Info')
+ * t('contactSection', 'Contact Details')
+ * t('deathSection', 'Death Info')
+ * t('relationshipsSection', 'Relationships')
+ */
+ return (
+
+
+ {index + 1}. {t(`${sectionDefinition.id}Section`, sectionDefinition.name)}
+
+
+ {t('allFieldsRequiredText', 'All fields are required unless marked optional')}
+
+
+
+
+
+
+
= ({ close, children, header, buttonsGroup }) => {
+ const { t } = useTranslation();
+ const layout = useLayoutType();
+
+ return (
+
+ {isDesktop(layout) ? (
+
+ ) : (
+
+ )}
+
{children}
+
{buttonsGroup}
+
= ({ setInitialFormValues, initialFormValues }) => {
+ const { t } = useTranslation();
+ const { handleClientRegistryDataSubmit, handleOnChange, clientRegistryData } = useClientRegistryForm(
+ setInitialFormValues,
+ initialFormValues,
+ );
+ return (
+
+
+ {t('patientVerification', 'Patient Verification')}
+
+ handleOnChange(selectedItem?.id, 'country')}
+ initialSelectedItem={countries[0]}
+ itemToString={(item) => (item ? item.text : '')}
+ />
+ handleOnChange(selectedItem?.id, 'identifierType')}
+ itemToString={(item) => (item ? item.text : '')}
+ />
+ handleOnChange(e.target.value, 'patientIdentifier')}
+ id="patientIdentifier"
+ type="text"
+ labelText="Patient identifier"
+ placeholder="Enter patient identifier"
+ />
+ {clientRegistryData.isSubmitting ? (
+ handleClientRegistryDataSubmit()}>
+ {t('searchRegistry', 'Search Registry')}
+
+ )}
+
+ );
+};
diff --git a/packages/esm-patient-registration-app/src/patient-verification/client-registry.scss b/packages/esm-patient-registration-app/src/patient-verification/client-registry.scss
new file mode 100644
index 00000000..dc9f4b38
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-verification/client-registry.scss
@@ -0,0 +1 @@
+@import '../patient-registration/patient-registration.scss';
diff --git a/packages/esm-patient-registration-app/src/patient-verification/utils.tsx b/packages/esm-patient-registration-app/src/patient-verification/utils.tsx
new file mode 100644
index 00000000..fbaf45e1
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-verification/utils.tsx
@@ -0,0 +1,56 @@
+import { showModal } from '@openmrs/esm-framework';
+import { useState } from 'react';
+import { fetchPatientRecordFromClientRegistry } from '../patient-registration/patient-registration.resource';
+import { defaultSelectedCountry } from './client-registry-constants';
+
+export const handleSetFormValueFromClientRegistry = (clientData, setInitialFormValues, initialFormValues) => {
+ setInitialFormValues({
+ ...initialFormValues,
+ familyName: clientData.lastName,
+ givenName: clientData.firstName,
+ middleName: clientData.middleName,
+ gender: clientData.gender,
+ birthdate: clientData.dateOfBirth,
+ address: {
+ address2: clientData.subCounty,
+ },
+ });
+};
+
+export const useClientRegistryForm = (setInitialFormValues, initialFormValues) => {
+ const [clientRegistryData, setClientRegistryData] = useState<{
+ country: string;
+ identifierType: string;
+ patientIdentifier: string;
+ isSubmitting: boolean;
+ }>({ country: defaultSelectedCountry, identifierType: '', patientIdentifier: '', isSubmitting: false });
+
+ const handleOnChange = (data, key: 'country' | 'identifierType' | 'patientIdentifier') => {
+ setClientRegistryData({ ...clientRegistryData, [key]: data });
+ };
+
+ const handleClientRegistryDataSubmit = () => {
+ setClientRegistryData({ ...clientRegistryData, isSubmitting: true });
+ fetchPatientRecordFromClientRegistry(
+ clientRegistryData.patientIdentifier,
+ clientRegistryData.identifierType,
+ clientRegistryData.country,
+ ).then((res) => {
+ setClientRegistryData({ ...clientRegistryData, isSubmitting: false });
+ if (res.clientExists) {
+ const clientData = res.client;
+ const closeModal = showModal('client-registry-modal', {
+ clientData,
+ closeModal: () => {
+ closeModal();
+ handleSetFormValueFromClientRegistry(clientData, setInitialFormValues, initialFormValues);
+ },
+ });
+ } else {
+ const clientData = res.client;
+ }
+ });
+ };
+
+ return { handleClientRegistryDataSubmit, handleOnChange, clientRegistryData };
+};
diff --git a/packages/esm-patient-registration-app/src/patient-verification/verification-modal.scss b/packages/esm-patient-registration-app/src/patient-verification/verification-modal.scss
new file mode 100644
index 00000000..33765c81
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-verification/verification-modal.scss
@@ -0,0 +1,20 @@
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.cardContainer {
+ display: grid;
+ grid-template-columns: 0.5fr 1fr;
+ column-gap: 0.25rem;
+ margin: 0.5rem 0;
+}
+
+.label {
+ @include type.type-style('body-compact-02');
+ color: colors.$cool-gray-100;
+ font-weight: bold;
+}
+
+.value {
+ @include type.type-style('legal-01');
+ color: colors.$cool-gray-80;
+}
diff --git a/packages/esm-patient-registration-app/src/patient-verification/verification.component.tsx b/packages/esm-patient-registration-app/src/patient-verification/verification.component.tsx
new file mode 100644
index 00000000..6bf9ec7b
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-verification/verification.component.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { ModalHeader, ModalBody, ModalFooter, Button } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from './verification-modal.scss';
+
+type VerificationModalProps = { clientData; closeModal };
+
+const VerificationModal: React.FC = ({ clientData, closeModal }) => {
+ const { t } = useTranslation();
+ return (
+
+
+
+ {t('clientRegistry', 'Client registry')}
+ id.identificationType).join(' ')}
+ />
+ id.identificationNumber).join(' ')}
+ />
+
+
+ {}}>
+ {t('contactSupport', 'Contact supportt')}
+
+
+ {t('continue', 'Continue')}
+
+
+
+ {label}
+ {value}
+
+ );
+};
diff --git a/packages/esm-patient-registration-app/src/resource.ts b/packages/esm-patient-registration-app/src/resource.ts
new file mode 100644
index 00000000..c203cb90
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/resource.ts
@@ -0,0 +1,12 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+
+const AddressHierarchyBaseURL = '/module/addresshierarchy/ajax/getPossibleAddressHierarchyEntriesWithParents.form';
+
+export function performAdressHierarchyWithParentSearch(addressField, parentid, query) {
+ return openmrsFetch(
+ `${AddressHierarchyBaseURL}?addressField=${addressField}&limit=20&searchString=${query}&parentUuid=${parentid}`,
+ {
+ method: 'GET',
+ },
+ );
+}
diff --git a/packages/esm-patient-registration-app/src/root.component.tsx b/packages/esm-patient-registration-app/src/root.component.tsx
new file mode 100644
index 00000000..da6f1403
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/root.component.tsx
@@ -0,0 +1,63 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import useSWRImmutable from 'swr/immutable';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { Grid, Row } from '@carbon/react';
+import { ExtensionSlot, useConnectivity, useSession } from '@openmrs/esm-framework';
+import {
+ ResourcesContext,
+ fetchAddressTemplate,
+ fetchAllRelationshipTypes,
+ fetchPatientIdentifierTypesWithSources,
+} from './offline.resources';
+import { FormManager } from './patient-registration/form-manager';
+import { PatientRegistration } from './patient-registration/patient-registration.component';
+import styles from './root.scss';
+
+export default function Root() {
+ const isOnline = useConnectivity();
+ const currentSession = useSession();
+ const { data: addressTemplate } = useSWRImmutable('patientRegistrationAddressTemplate', fetchAddressTemplate);
+ const { data: relationshipTypes } = useSWRImmutable(
+ 'patientRegistrationRelationshipTypes',
+ fetchAllRelationshipTypes,
+ );
+ const { data: identifierTypes } = useSWRImmutable(
+ 'patientRegistrationPatientIdentifiers',
+ fetchPatientIdentifierTypesWithSources,
+ );
+ const savePatientForm = useMemo(
+ () => (isOnline ? FormManager.savePatientFormOnline : FormManager.savePatientFormOffline),
+ [isOnline],
+ );
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/packages/esm-patient-registration-app/src/root.scss b/packages/esm-patient-registration-app/src/root.scss
new file mode 100644
index 00000000..76881b6e
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/root.scss
@@ -0,0 +1,7 @@
+.root {
+ background-color: white;
+}
+
+.grid {
+ grid-template-columns: repeat(1, minmax(0, 1fr));
+}
diff --git a/packages/esm-patient-registration-app/src/root.test.tsx b/packages/esm-patient-registration-app/src/root.test.tsx
new file mode 100644
index 00000000..789b0592
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/root.test.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import Root from './root.component';
+
+window['getOpenmrsSpaBase'] = jest.fn().mockImplementation(() => '/');
+
+jest.mock('@openmrs/esm-framework', () => {
+ const originalModule = jest.requireActual('@openmrs/esm-framework');
+
+ return {
+ ...originalModule,
+ validator: jest.fn(),
+ };
+});
+
+describe('root component', () => {
+ it('renders without crashing', () => {
+ const div = document.createElement('div');
+ const root = createRoot(div);
+
+ root.render(
+ = ({ close, onConfirm }) => {
+ const { t } = useTranslation();
+ return (
+ <>
+
+
{t('discardModalHeader', 'Confirm Discard Changes')}
+
+
+
+ {t(
+ 'discardModalBody',
+ "The changes you made to this patient's details have not been saved. Discard changes?",
+ )}
+
+
+
+ {t('cancel', 'Cancel')}
+
+
+ {t('discard', 'Discard')}
+
+
+
+ );
+};
+
+export default CancelPatientEdit;
diff --git a/packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.test.tsx b/packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.test.tsx
new file mode 100644
index 00000000..1e131515
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.test.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { screen, render } from '@testing-library/react';
+import CancelPatientEdit from './cancel-patient-edit.component';
+
+describe('CancelPatientEdit component', () => {
+ const mockClose = jest.fn();
+ const mockOnConfirm = jest.fn();
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('renders the modal and triggers close and onConfirm functions', async () => {
+ const user = userEvent.setup();
+
+ render( = ({
+ deleteIdentifier,
+ identifierName,
+ identifierValue,
+}) => {
+ const { t } = useTranslation();
+
+ return (
+
+
{t('deleteIdentifierModalHeading', 'Remove identifier?')}
+
+ {identifierName}
+ {t('deleteIdentifierModalText', ' has a value of ')} {identifierValue}
+
+
+ {t('confirmIdentifierDeletionText', 'Are you sure you want to remove this identifier?')}
+
+
+ deleteIdentifier(false)}>
+ {t('cancel', 'Cancel')}
+
+ deleteIdentifier(true)}>
+ {t('removeIdentifierButton', 'Remove Identifier')}
+
+
+
= ({ patientUuid, onTransition }) => {
+ const { t } = useTranslation();
+ const handleClick = React.useCallback(() => {
+ navigate({ to: `\${openmrsSpaBase}/patient/${patientUuid}/edit` });
+ onTransition && onTransition();
+ }, [onTransition, patientUuid]);
+
+ return (
+
+
+
+ {t('editPatientDetails', 'Edit patient details')}
+
+
+
+ );
+};
+
+export default EditPatientDetailsButton;
diff --git a/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.scss b/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.scss
new file mode 100644
index 00000000..d5960b4c
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.scss
@@ -0,0 +1,3 @@
+.link {
+ text-decoration: none;
+}
diff --git a/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx b/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx
new file mode 100644
index 00000000..0b3e7542
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { navigate } from '@openmrs/esm-framework';
+import { mockPatient } from '__mocks__';
+import EditPatientDetailsButton from './edit-patient-details-button.component';
+
+describe('EditPatientDetailsButton', () => {
+ const patientUuid = mockPatient.uuid;
+
+ it('should navigate to the edit page when clicked', async () => {
+ const user = userEvent.setup();
+ const mockNavigate = navigate as jest.Mock;
+
+ jest.mock('@openmrs/esm-framework', () => {
+ const originalModule = jest.requireActual('@openmrs/esm-framework');
+ return {
+ ...originalModule,
+ };
+ });
+
+ render(