@ampath/esm-patient-registration-app 6.0.1-pre.6

package/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<PatientRegistrationProps> = ({ savePatientForm, isOffline }) => {
+  const { currentSession, addressTemplate, identifierTypes } = useContext(ResourcesContext);
+  const { search } = useLocation();
+  const config = useConfig() as RegistrationConfig;
+  const [target, setTarget] = useState<undefined | string>();
+  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 validationSchema = getValidationSchema(config);
+
+  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]);
+
+  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,
+      );
+
+      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 (
+    <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={classNames(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
+                  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={!currentSession || !identifierTypes || props.isSubmitting}>
+                  {props.isSubmitting ? (
+                    <InlineLoading
+                      className={styles.spinner}
+                      description={`${t('submitting', 'Submitting')} ...`}
+                      iconDescription="submitting"
+                      status="active"
+                    />
+                  ) : 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,
+                  values: props.values,
+                  inEditMode,
+                  setFieldValue: props.setFieldValue,
+                  setCapturePhotoProps,
+                  currentPhoto: photo?.imageSrc,
+                  isOffline,
+                  initialFormValues: props.initialValues,
+                  setInitialFormValues,
+                }}>
+                <ClientRegistry initialFormValues={initialFormValues} setInitialFormValues={setInitialFormValues} />
+                {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 };
+function dispose() {
+  throw new Error('Function not implemented.');
+}

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

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

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