@kenyaemr/esm-patient-registration-app 8.1.1-pre.129 → 8.1.2-pre.154

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { BrowserRouter } from 'react-router-dom';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { renderWithRouter } from 'tools';
 import { Autosuggest } from './autosuggest.component';
 
 const mockPersons = [
@@ -33,18 +33,16 @@ const mockHandleSuggestionSelected = jest.fn((field, value) => [field, value]);
 
 describe('Autosuggest', () => {
   it('renders a search box', () => {
-    render(
-      <BrowserRouter>
-        <Autosuggest
-          getSearchResults={mockGetSearchResults}
-          getDisplayValue={(item) => item.display}
-          getFieldValue={(item) => item.uuid}
-          id="person"
-          labelText=""
-          onSuggestionSelected={mockHandleSuggestionSelected}
-          placeholder="Find Person"
-        />
-      </BrowserRouter>,
+    renderWithRouter(
+      <Autosuggest
+        getSearchResults={mockGetSearchResults}
+        getDisplayValue={(item) => item.display}
+        getFieldValue={(item) => item.uuid}
+        id="person"
+        labelText=""
+        onSuggestionSelected={mockHandleSuggestionSelected}
+        placeholder="Find Person"
+      />,
     );
 
     expect(screen.getByRole('searchbox')).toBeInTheDocument();
@@ -54,18 +52,16 @@ describe('Autosuggest', () => {
   it('renders matching search results in a list when the user types a query', async () => {
     const user = userEvent.setup();
 
-    render(
-      <BrowserRouter>
-        <Autosuggest
-          getSearchResults={mockGetSearchResults}
-          getDisplayValue={(item) => item.display}
-          getFieldValue={(item) => item.uuid}
-          id="person"
-          labelText=""
-          onSuggestionSelected={mockHandleSuggestionSelected}
-          placeholder="Find Person"
-        />
-      </BrowserRouter>,
+    renderWithRouter(
+      <Autosuggest
+        getSearchResults={mockGetSearchResults}
+        getDisplayValue={(item) => item.display}
+        getFieldValue={(item) => item.uuid}
+        id="person"
+        labelText=""
+        onSuggestionSelected={mockHandleSuggestionSelected}
+        placeholder="Find Person"
+      />,
     );
 
     const searchbox = screen.getByRole('searchbox');
@@ -82,18 +78,16 @@ describe('Autosuggest', () => {
   it('clears the list of suggestions when a suggestion is selected', async () => {
     const user = userEvent.setup();
 
-    render(
-      <BrowserRouter>
-        <Autosuggest
-          getSearchResults={mockGetSearchResults}
-          getDisplayValue={(item) => item.display}
-          getFieldValue={(item) => item.uuid}
-          id="person"
-          labelText=""
-          onSuggestionSelected={mockHandleSuggestionSelected}
-          placeholder="Find Person"
-        />
-      </BrowserRouter>,
+    renderWithRouter(
+      <Autosuggest
+        getSearchResults={mockGetSearchResults}
+        getDisplayValue={(item) => item.display}
+        getFieldValue={(item) => item.uuid}
+        id="person"
+        labelText=""
+        onSuggestionSelected={mockHandleSuggestionSelected}
+        placeholder="Find Person"
+      />,
     );
 
     let list = screen.queryByRole('list');
@@ -117,18 +111,16 @@ describe('Autosuggest', () => {
   it('changes suggestions when a search input is changed', async () => {
     const user = userEvent.setup();
 
-    render(
-      <BrowserRouter>
-        <Autosuggest
-          getSearchResults={mockGetSearchResults}
-          getDisplayValue={(item) => item.display}
-          getFieldValue={(item) => item.uuid}
-          id="person"
-          labelText=""
-          onSuggestionSelected={mockHandleSuggestionSelected}
-          placeholder="Find Person"
-        />
-      </BrowserRouter>,
+    renderWithRouter(
+      <Autosuggest
+        getSearchResults={mockGetSearchResults}
+        getDisplayValue={(item) => item.display}
+        getFieldValue={(item) => item.uuid}
+        id="person"
+        labelText=""
+        onSuggestionSelected={mockHandleSuggestionSelected}
+        placeholder="Find Person"
+      />,
     );
 
     let list = screen.queryByRole('list');
@@ -149,18 +141,16 @@ describe('Autosuggest', () => {
   it('hides the list of suggestions when the user clicks outside of the component', async () => {
     const user = userEvent.setup();
 
-    render(
-      <BrowserRouter>
-        <Autosuggest
-          getSearchResults={mockGetSearchResults}
-          getDisplayValue={(item) => item.display}
-          getFieldValue={(item) => item.uuid}
-          id="person"
-          labelText=""
-          onSuggestionSelected={mockHandleSuggestionSelected}
-          placeholder="Find Person"
-        />
-      </BrowserRouter>,
+    renderWithRouter(
+      <Autosuggest
+        getSearchResults={mockGetSearchResults}
+        getDisplayValue={(item) => item.display}
+        getFieldValue={(item) => item.uuid}
+        id="person"
+        labelText=""
+        onSuggestionSelected={mockHandleSuggestionSelected}
+        placeholder="Find Person"
+      />,
     );
 
     const input = screen.getByRole('searchbox');

package/src/patient-registration/mpi/mpi-patient.resource.ts

@@ -0,0 +1,21 @@
+import useSWR from 'swr';
+
+const fetcher = (url: string) => {
+  const headers = new Headers();
+  headers.append('Content-Type', 'application/json');
+  headers.append('Authorization', `Basic ${btoa('kemr:password')}`);
+  return fetch(url, { headers }).then((res) => res.json());
+};
+
+export function useMpiPatient(patientId: string) {
+  const url = `https://hiedhs.intellisoftkenya.com/fhir/Patient?_id=${patientId}`;
+
+  const { data: patient, error: error, isLoading: isLoading } = useSWR<{ data: fhir.Bundle }, Error>(url, fetcher);
+  const patientInfo = patient?.['entry']?.[0]?.resource;
+
+  return {
+    isLoading,
+    patient: patientInfo,
+    error,
+  };
+}

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

@@ -1,15 +1,16 @@
+import { type Dispatch, useEffect, useMemo, useState } from 'react';
 import {
   type FetchResponse,
+  type OpenmrsResource,
   getSynchronizationItems,
   openmrsFetch,
-  type OpenmrsResource,
   restBaseUrl,
   useConfig,
   usePatient,
 } from '@openmrs/esm-framework';
 import last from 'lodash-es/last';
 import camelCase from 'lodash-es/camelCase';
-import { type Dispatch, useEffect, useMemo, useState } from 'react';
+import dayjs from 'dayjs';
 import useSWR from 'swr';
 import { v4 } from 'uuid';
 import { type RegistrationConfig } from '../config-schema';
@@ -31,15 +32,25 @@ import {
 import {
   getAddressFieldValuesFromFhirPatient,
   getFormValuesFromFhirPatient,
+  getIdentifierFieldValuesFromFhirPatient,
   getPatientUuidMapFromFhirPatient,
   getPhonePersonAttributeValueFromFhirPatient,
   latestFirstEncounter,
 } from './patient-registration-utils';
 import { useInitialPatientRelationships } from './section/patient-relationships/relationships.resource';
-import dayjs from 'dayjs';
+import { useMpiPatient } from './mpi/mpi-patient.resource';
+
+interface DeathInfoResults {
+  uuid: string;
+  display: string;
+  causeOfDeath: OpenmrsResource | null;
+  dead: boolean;
+  deathDate: string;
+  causeOfDeathNonCoded: string | null;
+}
 
-export function useInitialFormValues(patientUuid: string): [FormValues, Dispatch<FormValues>] {
-  const { freeTextFieldConceptUuid } = useConfig<RegistrationConfig>();
+export function useInitialFormValuesLocal(patientUuid: string): [FormValues, Dispatch<FormValues>] {
+  const { freeTextFieldConceptUuid, fieldConfigurations } = useConfig<RegistrationConfig>()
   const { martialStatus, education, occupation, educationLoad } = useConcepts();
   const { isLoading: isLoadingPatientToEdit, patient: patientToEdit } = usePatient(patientUuid);
   const { data: deathInfo, isLoading: isLoadingDeathInfo } = useInitialPersonDeathInfo(patientUuid);
@@ -89,7 +100,7 @@ export function useInitialFormValues(patientUuid: string): [FormValues, Dispatch
           ...initialFormValues,
           ...getFormValuesFromFhirPatient(patientToEdit),
           address: getAddressFieldValuesFromFhirPatient(patientToEdit),
-          ...getPhonePersonAttributeValueFromFhirPatient(patientToEdit),
+          ...getPhonePersonAttributeValueFromFhirPatient(patientToEdit, fieldConfigurations.phone.personAttributeUuid),
           birthdateEstimated: !/^\d{4}-\d{2}-\d{2}$/.test(patientToEdit.birthDate),
           yearsEstimated,
           monthsEstimated,
@@ -107,7 +118,13 @@ export function useInitialFormValues(patientUuid: string): [FormValues, Dispatch
         setInitialFormValues(registration._patientRegistrationData.formValues);
       }
     })();
-  }, [isLoadingPatientToEdit, patientToEdit, patientUuid]);
+  }, [
+    initialFormValues,
+    isLoadingPatientToEdit,
+    patientToEdit,
+    patientUuid,
+    fieldConfigurations.phone.personAttributeUuid,
+  ]);
 
   // Set initial patient death info
   useEffect(() => {
@@ -126,9 +143,9 @@ export function useInitialFormValues(patientUuid: string): [FormValues, Dispatch
         nonCodedCauseOfDeath: deathInfo.causeOfDeathNonCoded,
       }));
     }
-  }, [isLoadingDeathInfo, deathInfo, setInitialFormValues]);
-  // Setting authentication token
+  }, [isLoadingDeathInfo, deathInfo, setInitialFormValues, freeTextFieldConceptUuid]);
 
+  // Setting authentication token
   useEffect(() => {
     if (!isLoadingToken && token) {
       setInitialFormValues((initialFormValues) => ({ ...initialFormValues, token: String(token.access_token) }));
@@ -179,7 +196,7 @@ export function useInitialFormValues(patientUuid: string): [FormValues, Dispatch
     if (!isLoadingObs) {
       setInitialFormValues((initialFormValues) => ({ ...initialFormValues, obs: obs, observation: observations }));
     }
-  }, [isLoadingObs]);
+  }, [isLoadingObs, obs, observations]);
 
   // Set Initial encounter
 
@@ -190,11 +207,68 @@ export function useInitialFormValues(patientUuid: string): [FormValues, Dispatch
         concepts: [...occupation, ...martialStatus, ...education],
       }));
     }
-  }, [educationLoad]);
+  }, [educationLoad, martialStatus, education, occupation]);
 
   return [initialFormValues, setInitialFormValues];
 }
 
+export function useMpiInitialFormValues(patientUuid: string): [FormValues, Dispatch<FormValues>] {
+  const { fieldConfigurations } = useConfig<RegistrationConfig>();
+  const { isLoading: isLoadingMpiPatient, patient: mpiPatient } = useMpiPatient(patientUuid);
+
+  const [initialMPIFormValues, setInitialMPIFormValues] = useState<FormValues>({
+    patientUuid: v4(),
+    givenName: '',
+    middleName: '',
+    familyName: '',
+    additionalGivenName: '',
+    additionalMiddleName: '',
+    additionalFamilyName: '',
+    addNameInLocalLanguage: false,
+    gender: '',
+    birthdate: null,
+    yearsEstimated: 0,
+    monthsEstimated: 0,
+    birthdateEstimated: false,
+    telephoneNumber: '',
+    isDead: false,
+    deathDate: undefined,
+    deathTime: undefined,
+    deathTimeFormat: 'AM',
+    deathCause: '',
+    nonCodedCauseOfDeath: '',
+    relationships: [],
+    identifiers: {},
+    address: {},
+  });
+
+  useEffect(() => {
+    (async () => {
+      if (mpiPatient) {
+        // const identifiers = await getIdentifierFieldValuesFromFhirPatient(
+        //   mpiPatient.data,
+        //   fieldConfigurations.identifier,
+        // );
+
+        const values = {
+          ...initialMPIFormValues,
+          ...getFormValuesFromFhirPatient(mpiPatient),
+          address: getAddressFieldValuesFromFhirPatient(mpiPatient),
+          attributes: getPhonePersonAttributeValueFromFhirPatient(
+            mpiPatient,
+            fieldConfigurations.phone.personAttributeUuid,
+          ),
+        };
+        setInitialMPIFormValues(values);
+      }
+    })();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mpiPatient, isLoadingMpiPatient]);
+
+  return [initialMPIFormValues, setInitialMPIFormValues];
+}
+
 export function useInitialAddressFieldValues(patientUuid: string, fallback = {}): [object, Dispatch<object>] {
   const { isLoading, patient } = usePatient(patientUuid);
   const [initialAddressFieldValues, setInitialAddressFieldValues] = useState<object>(fallback);
@@ -211,7 +285,7 @@ export function useInitialAddressFieldValues(patientUuid: string, fallback = {})
         setInitialAddressFieldValues(registration?._patientRegistrationData.initialAddressFieldValues ?? fallback);
       }
     })();
-  }, [isLoading, patient, patientUuid]);
+  }, [fallback, initialAddressFieldValues, isLoading, patient, patientUuid]);
 
   return [initialAddressFieldValues, setInitialAddressFieldValues];
 }
@@ -232,7 +306,7 @@ export function usePatientUuidMap(
         setPatientUuidMap(registration?._patientRegistrationData.initialAddressFieldValues ?? fallback),
       );
     }
-  }, [isLoadingPatientToEdit, patientToEdit, patientUuid]);
+  }, [fallback, isLoadingPatientToEdit, patientToEdit, patientUuid, patientUuidMap]);
 
   useEffect(() => {
     if (attributes) {
@@ -287,7 +361,7 @@ export function useInitialPatientIdentifiers(patientUuid: string): {
       data: identifiers,
       isLoading,
     };
-  }, [data, error]);
+  }, [data?.data?.results, isLoading]);
 
   return result;
 }
@@ -323,19 +397,10 @@ function useInitialPersonAttributes(personUuid: string) {
       data: data?.data?.results,
       isLoading,
     };
-  }, [data, error]);
+  }, [data?.data?.results, isLoading]);
   return result;
 }
 
-interface DeathInfoResults {
-  uuid: string;
-  display: string;
-  causeOfDeath: OpenmrsResource | null;
-  dead: boolean;
-  deathDate: string;
-  causeOfDeathNonCoded: string | null;
-}
-
 function useInitialPersonDeathInfo(personUuid: string) {
   const { data, error, isLoading } = useSWR<FetchResponse<DeathInfoResults>, Error>(
     !!personUuid
@@ -349,7 +414,7 @@ function useInitialPersonDeathInfo(personUuid: string) {
       data: data?.data,
       isLoading,
     };
-  }, [data, error]);
+  }, [data?.data, isLoading]);
   return result;
 }
 

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

@@ -0,0 +1,33 @@
+import { filterOutUndefinedPatientIdentifiers } from './patient-registration-utils';
+
+describe('filterOutUndefinedPatientIdentifiers', () => {
+  const getIdentifiers = (autoGeneration = true, manualEntryEnabled = false) => ({
+    OpenMRSId: {
+      autoGeneration: autoGeneration,
+      identifierName: 'OpenMRS ID',
+      identifierTypeUuid: '05a29f94-c0ed-11e2-94be-8c13b969e334',
+      identifierValue: undefined,
+      initialValue: '100GEJ',
+      preferred: true,
+      required: true,
+      selectedSource: {
+        uuid: '01af8526-cea4-4175-aa90-340acb411771',
+        name: 'Generator for OpenMRS ID',
+        autoGenerationOption: {
+          manualEntryEnabled: manualEntryEnabled,
+          automaticGenerationEnabled: autoGeneration,
+        },
+      },
+    },
+  });
+
+  it('should fitler out undefined identifiers', () => {
+    const filteredIdentifiers = filterOutUndefinedPatientIdentifiers(getIdentifiers());
+    expect(filteredIdentifiers.OpenMRSId).not.toBeDefined();
+  });
+
+  it('should retain auto-generated identifiers with manual entry', () => {
+    const filteredIdentifiers = filterOutUndefinedPatientIdentifiers(getIdentifiers(true, true));
+    expect(filteredIdentifiers.OpenMRSId).toBeDefined();
+  });
+});

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

@@ -1,6 +1,6 @@
 import * as Yup from 'yup';
 import camelCase from 'lodash-es/camelCase';
-import { parseDate } from '@openmrs/esm-framework';
+import { openmrsFetch, restBaseUrl, parseDate } from '@openmrs/esm-framework';
 import {
   type AddressValidationSchemaType,
   type Encounter,
@@ -110,15 +110,14 @@ 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.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.additionalGivenName = additionalPatientName?.given?.[0] ?? undefined;
+  result.additionalMiddleName = additionalPatientName?.given?.[1] ?? undefined;
+  result.additionalFamilyName = additionalPatientName?.family ?? undefined;
 
   result.gender = patient.gender;
   result.birthdate = patient.birthDate ? parseDate(patient.birthDate) : undefined;
@@ -192,18 +191,69 @@ export function getPatientIdentifiersFromFhirPatient(patient: fhir.Patient): Arr
   });
 }
 
-export function getPhonePersonAttributeValueFromFhirPatient(patient: fhir.Patient) {
+export async function getIdentifierFieldValuesFromFhirPatient(
+  patient: fhir.Patient,
+  identifierConfig,
+): Promise<{ [identifierFieldName: string]: PatientIdentifierValue }> {
+  const identifiers: FormValues['identifiers'] = {};
+  const promises: Promise<void>[] = [];
+
+  for (const identifier of patient.identifier) {
+    for (const config of identifierConfig) {
+      if (config.fhirIdentifierSystem !== identifier.system) {
+        continue;
+      }
+
+      const url = `${restBaseUrl}/patientidentifiertype/${config.openmrsIdentifierTypeUuid}`;
+
+      promises.push(
+        openmrsFetch(url)
+          .then((response) => {
+            if (!response.data?.name) {
+              return;
+            }
+            identifiers[response.data.name] = {
+              identifierUuid: null,
+              preferred: false,
+              initialValue: identifier.value,
+              identifierValue: identifier.value,
+              identifierTypeUuid: config.identifierTypeUuid,
+              identifierName: response.data.name,
+              required: false,
+              selectedSource: null,
+              autoGeneration: false,
+            };
+          })
+          .catch((error) => {
+            console.error(`Error fetching identifier type for ${config.identifierTypeUuid}:`, error);
+          }),
+      );
+    }
+  }
+  await Promise.all(promises);
+  return identifiers;
+}
+
+export function getPhonePersonAttributeValueFromFhirPatient(patient: fhir.Patient, phoneUuid) {
   const result = {};
-  if (patient.telecom) {
-    result['phone'] = patient.telecom[0].value;
+
+  if (patient.telecom && Array.isArray(patient.telecom)) {
+    const phoneEntry = patient.telecom.find((entry) => entry.system === 'phone');
+    if (phoneEntry) {
+      result[phoneUuid] = phoneEntry.value;
+    }
   }
+
   return result;
 }
 
-export const filterOutUndefinedPatientIdentifiers = (patientIdentifiers) =>
+type IdentifierMap = { [identifierFieldName: string]: PatientIdentifierValue };
+export const filterOutUndefinedPatientIdentifiers = (patientIdentifiers: IdentifierMap): IdentifierMap =>
   Object.fromEntries(
-    Object.entries<PatientIdentifierValue>(patientIdentifiers).filter(
-      ([key, value]) => value.identifierValue !== undefined,
+    Object.entries(patientIdentifiers).filter(
+      ([key, value]) =>
+        (value.autoGeneration && value.selectedSource.autoGenerationOption.manualEntryEnabled) ||
+        value.identifierValue !== undefined,
     ),
   );
 

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

@@ -9,6 +9,7 @@ import {
   createErrorHandler,
   interpolateUrl,
   showSnackbar,
+  useAppContext,
   useConfig,
   usePatient,
   usePatientPhoto,
@@ -20,7 +21,12 @@ import { PatientRegistrationContext } from './patient-registration-context';
 import { type SavePatientForm, SavePatientTransactionManager } from './form-manager';
 import { DummyDataInput } from './input/dummy-data/dummy-data-input.component';
 import { cancelRegistration, filterOutUndefinedPatientIdentifiers, scrollIntoView } from './patient-registration-utils';
-import { useInitialAddressFieldValues, useInitialFormValues, usePatientUuidMap } from './patient-registration-hooks';
+import {
+  useInitialAddressFieldValues,
+  useMpiInitialFormValues,
+  useInitialFormValuesLocal,
+  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';
@@ -44,10 +50,12 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
   const config = useConfig() as RegistrationConfig;
   const [target, setTarget] = useState<undefined | string>();
   const { patientUuid: uuidOfPatientToEdit } = useParams();
+  const sourcePatientId = new URLSearchParams(search).get('sourceRecord');
   const { isLoading: isLoadingPatientToEdit, patient: patientToEdit } = usePatient(uuidOfPatientToEdit);
   const { t } = useTranslation();
   const [capturePhotoProps, setCapturePhotoProps] = useState<CapturePhotoProps | null>(null);
-  const [initialFormValues, setInitialFormValues] = useInitialFormValues(uuidOfPatientToEdit);
+  const [initialFormValues, setInitialFormValues] = useInitialFormValuesLocal(uuidOfPatientToEdit);
+  const [initialMPIFormValues, setInitialMPIFormValues] = useMpiInitialFormValues(sourcePatientId);
   const [initialAddressFieldValues] = useInitialAddressFieldValues(uuidOfPatientToEdit);
   const [patientUuidMap] = usePatientUuidMap(uuidOfPatientToEdit);
   const location = currentSession?.sessionLocation?.uuid;
@@ -61,6 +69,13 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
     inEditMode ? initialFormValues.identifiers['nationalUniquePatientIdentifier']?.identifierValue : false,
   );
 
+  useEffect(() => {
+    if (initialMPIFormValues) {
+      setInitialFormValues(initialMPIFormValues);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialMPIFormValues, setInitialMPIFormValues]);
+
   useEffect(() => {
     exportedInitialFormValuesForTesting = initialFormValues;
   }, [initialFormValues]);