@kenyaemr/esm-patient-registration-app 4.3.0

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

@@ -0,0 +1,219 @@
+import { navigate } from '@openmrs/esm-framework';
+import * as Yup from 'yup';
+import {
+  AddressValidationSchemaType,
+  FormValues,
+  PatientIdentifier,
+  PatientUuidMapType,
+  PatientIdentifierValue,
+  Encounter,
+} from './patient-registration-types';
+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() {
+  navigate({ to: `${window.spaBase}/home` });
+}
+
+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.unidentifiedPatient =
+    patientName.given[0] === 'UNKNOWN' && patientName.family === 'unknown' ? true : undefined;
+
+  result.addNameInLocalLanguage = !!additionalPatientName ? true : undefined;
+  result.additionalGivenName = additionalPatientName?.given[0];
+  result.additionalMiddleName = additionalPatientName?.given[1];
+  result.additionalFamilyName = additionalPatientName?.family;
+
+  result.gender = capitalize(patient.gender);
+  result.birthdate = patient.birthDate ? (new Date(patient.birthDate) as any) : 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<PatientIdentifier> {
+  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<PatientIdentifierValue>(patientIdenfiers).filter(
+      ([key, value]) => value.identifierValue !== undefined,
+    ),
+  );
+
+export const latestFirstEncounter = (a: Encounter, b: Encounter) =>
+  new Date(b.encounterDatetime).getTime() - new Date(a.encounterDatetime).getTime();

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

@@ -0,0 +1,250 @@
+import React, { useState, useEffect, useContext, useMemo, useRef } from 'react';
+import { Button, Link } from '@carbon/react';
+import { XAxis, ShareKnowledge } from '@carbon/react/icons';
+import { Router, useLocation, useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Formik, Form, FormikHelpers } from 'formik';
+import { createErrorHandler, showToast, useConfig, interpolateUrl, usePatient } from '@openmrs/esm-framework';
+import { validationSchema as initialSchema } from './validation/patient-registration-validation';
+import { FormValues, CapturePhotoProps, PatientIdentifierValue } from './patient-registration-types';
+import { PatientRegistrationContext } from './patient-registration-context';
+import { SavePatientForm, SavePatientTransactionManager } from './form-manager';
+import { usePatientPhoto } from './patient-registration.resource';
+import { DummyDataInput } from './input/dummy-data/dummy-data-input.component';
+import {
+  cancelRegistration,
+  filterUndefinedPatientIdenfier,
+  parseAddressTemplateXml,
+  scrollIntoView,
+} from './patient-registration-utils';
+import {
+  useInitialAddressFieldValues,
+  useInitialFormValues,
+  usePatientObs,
+  usePatientUuidMap,
+} from './patient-registration-hooks';
+import { ResourcesContext } from '../offline.resources';
+import { builtInSections, RegistrationConfig, SectionDefinition } from '../config-schema';
+import { SectionWrapper } from './section/section-wrapper.component';
+import BeforeSavePrompt from './before-save-prompt';
+import styles from './patient-registration.scss';
+import PatientVerification from '../patient-verification/patient-verification.component';
+import { handleSavePatientToClientRegistry } from '../patient-verification/patient-verification-hook';
+
+let exportedInitialFormValuesForTesting = {} as FormValues;
+
+export interface PatientRegistrationProps {
+  savePatientForm: SavePatientForm;
+  isOffline: boolean;
+}
+
+export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePatientForm, isOffline }) => {
+  const { currentSession, addressTemplate, identifierTypes } = useContext(ResourcesContext);
+  const { search } = useLocation();
+  const config = useConfig() as RegistrationConfig;
+  const [target, setTarget] = useState<undefined | string>();
+  const [validationSchema, setValidationSchema] = useState(initialSchema);
+  const { patientUuid: uuidOfPatientToEdit } = useParams();
+  const { isLoading: isLoadingPatientToEdit, patient: patientToEdit } = usePatient(uuidOfPatientToEdit);
+  const { t } = useTranslation();
+  const [capturePhotoProps, setCapturePhotoProps] = useState<CapturePhotoProps | null>(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 [enableClientRegistry, setEnableClientRegistry] = useState(
+    inEditMode ? initialFormValues.identifiers['nationalUniquePatientIdentifier']?.identifierValue : false,
+  );
+
+  useEffect(() => {
+    exportedInitialFormValuesForTesting = initialFormValues;
+  }, [initialFormValues]);
+
+  const sections: Array<SectionDefinition> = 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]);
+
+  useEffect(() => {
+    if (addressTemplate) {
+      const addressTemplateXml = addressTemplate?.results[0].value;
+      if (!addressTemplateXml) {
+        return;
+      }
+      const { addressValidationSchema } = parseAddressTemplateXml(addressTemplateXml);
+      setValidationSchema((validationSchema) => validationSchema.concat(addressValidationSchema));
+    }
+  }, [inEditMode, addressTemplate, initialAddressFieldValues]);
+
+  const onFormSubmit = async (values: FormValues, helpers: FormikHelpers<FormValues>) => {
+    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,
+      );
+
+      showToast({
+        description: inEditMode
+          ? t('updationSuccessToastDescription', "The patient's information has been successfully updated")
+          : t(
+              'registrationSuccessToastDescription',
+              'The patient can now be found by searching for them using their name or ID number',
+            ),
+        title: inEditMode
+          ? t('updationSuccessToastTitle', 'Patient Details Updated')
+          : t('registrationSuccessToastTitle', 'New Patient Created'),
+        kind: 'success',
+      });
+
+      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) => {
+          showToast({ description: error.message });
+        });
+      } else if (error.responseBody?.error?.message) {
+        showToast({ description: error.responseBody.error.message });
+      } else {
+        createErrorHandler()(error);
+      }
+
+      helpers.setSubmitting(false);
+    }
+  };
+
+  const getDescription = (errors) => {
+    return (
+      <div>
+        <p>{t('fieldErrorTitleMessage', 'The following fields have errors:')}</p>
+        <ul style={{ listStyle: 'inside' }}>
+          {Object.keys(errors).map((error, index) => (
+            <li key={index}>{t(`${error}LabelText`, error)}</li>
+          ))}
+        </ul>
+      </div>
+    );
+  };
+
+  const displayErrors = (errors) => {
+    if (errors && typeof errors === 'object' && !!Object.keys(errors).length) {
+      showToast({
+        description: getDescription(errors),
+        title: t('incompleteForm', 'Incomplete form'),
+        kind: 'warning',
+      });
+    }
+  };
+
+  return (
+    <Formik
+      enableReinitialize
+      initialValues={initialFormValues}
+      validationSchema={validationSchema}
+      onSubmit={onFormSubmit}>
+      {(props) => (
+        <Form className={styles.form}>
+          <BeforeSavePrompt when={props.dirty} redirect={target} />
+          <div className={styles.formContainer}>
+            <div>
+              <div className={styles.stickyColumn}>
+                <h4>
+                  {inEditMode ? t('edit', 'Edit') : t('createNew', 'Create New')} {t('patient', 'Patient')}
+                </h4>
+                {showDummyData && <DummyDataInput setValues={props.setValues} />}
+                <p className={styles.label01}>{t('jumpTo', 'Jump to')}</p>
+                {sections.map((section) => (
+                  <div className={`${styles.space05} ${styles.touchTarget}`} key={section.name}>
+                    <Link className={styles.linkName} onClick={() => scrollIntoView(section.id)}>
+                      <XAxis size={16} /> {t(`${section.id}Section`, section.name)}
+                    </Link>
+                  </div>
+                ))}
+                <Button
+                  renderIcon={ShareKnowledge}
+                  disabled={!currentSession || !identifierTypes}
+                  onClick={() => {
+                    setEnableClientRegistry(true);
+                    props.isValid
+                      ? handleSavePatientToClientRegistry(props.values, props.setValues, inEditMode)
+                      : props.validateForm().then((errors) => displayErrors(errors));
+                  }}
+                  className={styles.submitButton}>
+                  {t('postToRegistry', 'Post to registry')}
+                </Button>
+                <Button
+                  className={styles.submitButton}
+                  type="submit"
+                  onClick={() => props.validateForm().then((errors) => displayErrors(errors))}
+                  // Current session and identifiers are required for patient registration.
+                  // If currentSession or identifierTypes are not available, then the
+                  // user should be blocked to register the patient.
+                  disabled={!enableClientRegistry}>
+                  {inEditMode ? t('updatePatient', 'Update Patient') : t('registerPatient', 'Register Patient')}
+                </Button>
+                <Button className={styles.cancelButton} kind="tertiary" onClick={cancelRegistration}>
+                  {t('cancel', 'Cancel')}
+                </Button>
+              </div>
+            </div>
+            <div className={styles.infoGrid}>
+              <PatientRegistrationContext.Provider
+                value={{
+                  identifierTypes: identifierTypes,
+                  validationSchema,
+                  setValidationSchema,
+                  values: props.values,
+                  inEditMode,
+                  setFieldValue: props.setFieldValue,
+                  setCapturePhotoProps,
+                  currentPhoto: photo?.imageSrc,
+                  isOffline,
+                  initialFormValues: props.initialValues,
+                }}>
+                <PatientVerification props={props} />
+                {sections.map((section, index) => (
+                  <SectionWrapper
+                    key={`registration-section-${section.id}`}
+                    sectionDefinition={section}
+                    index={index}
+                  />
+                ))}
+              </PatientRegistrationContext.Provider>
+            </div>
+          </div>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+/**
+ * @internal
+ * Just exported for testing
+ */
+export { exportedInitialFormValuesForTesting as initialFormValues };

package/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/');
+  });
+});