@ampath/esm-patient-registration-app 6.0.1-pre.98 → 9.2.0-next.12

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

@@ -1,15 +1,14 @@
 import * as Yup from 'yup';
+import camelCase from 'lodash-es/camelCase';
+import { parseDate } from '@openmrs/esm-framework';
 import {
   type AddressValidationSchemaType,
+  type Encounter,
   type FormValues,
   type PatientIdentifier,
-  type PatientUuidMapType,
   type PatientIdentifierValue,
-  type Encounter,
+  type PatientUuidMapType,
 } 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');
@@ -48,6 +47,7 @@ export function parseAddressTemplateXml(addressTemplate: string) {
     addressValidationSchema,
   };
 }
+
 export function parseAddressTemplateXmlOld(addressTemplate: string) {
   const templateXmlDoc = new DOMParser().parseFromString(addressTemplate, 'text/xml');
   const nameMappings = templateXmlDoc.querySelector('nameMappings').querySelectorAll('property');
@@ -124,11 +124,6 @@ export function getFormValuesFromFhirPatient(patient: fhir.Patient) {
   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) => {
@@ -205,10 +200,13 @@ export function getPhonePersonAttributeValueFromFhirPatient(patient: fhir.Patien
   return result;
 }
 
-export const filterUndefinedPatientIdenfier = (patientIdenfiers) =>
+type IdentifierMap = { [identifierFieldName: string]: PatientIdentifierValue };
+export const filterOutUndefinedPatientIdentifiers = (patientIdentifiers: IdentifierMap): IdentifierMap =>
   Object.fromEntries(
-    Object.entries<PatientIdentifierValue>(patientIdenfiers).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

@@ -1,42 +1,30 @@
-import React, { useState, useEffect, useContext, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
-import { Button, Link, InlineLoading } from '@carbon/react';
-import { XAxis, ShareKnowledge } from '@carbon/react/icons';
+import { Button, InlineLoading, Link } 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 { Form, Formik, type FormikHelpers } from 'formik';
 import {
   createErrorHandler,
+  interpolateUrl,
   showSnackbar,
   useConfig,
-  interpolateUrl,
   usePatient,
   usePatientPhoto,
 } from '@openmrs/esm-framework';
+import { builtInSections, type RegistrationConfig, type SectionDefinition } from '../config-schema';
+import { cancelRegistration, filterOutUndefinedPatientIdentifiers, scrollIntoView } from './patient-registration-utils';
 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 { 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, type RegistrationConfig, type SectionDefinition } from '../config-schema';
+import { PatientRegistrationContextProvider } from './patient-registration-context';
+import { useResourcesContext } from '../resources-context';
 import { SectionWrapper } from './section/section-wrapper.component';
+import { type CapturePhotoProps, type FormValues } from './patient-registration.types';
+import { type SavePatientForm, SavePatientTransactionManager } from './form-manager';
+import { useInitialAddressFieldValues, useInitialFormValues, usePatientUuidMap } from './patient-registration-hooks';
 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;
 
@@ -46,27 +34,36 @@ export interface PatientRegistrationProps {
 }
 
 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 { t } = useTranslation();
+  const { currentSession, identifierTypes } = useResourcesContext();
   const { patientUuid: uuidOfPatientToEdit } = useParams();
+  const { search } = useLocation();
   const { isLoading: isLoadingPatientToEdit, patient: patientToEdit } = usePatient(uuidOfPatientToEdit);
-  const { t } = useTranslation();
+  const config = useConfig<RegistrationConfig>();
+
+  const [initialFormValues, setInitialFormValues] = useInitialFormValues(
+    isLoadingPatientToEdit,
+    patientToEdit,
+    uuidOfPatientToEdit,
+  );
+  const [initialAddressFieldValues] = useInitialAddressFieldValues(
+    {},
+    isLoadingPatientToEdit,
+    patientToEdit,
+    uuidOfPatientToEdit,
+  );
+
+  const [patientUuidMap] = usePatientUuidMap({}, isLoadingPatientToEdit, patientToEdit, uuidOfPatientToEdit);
+
+  const [target, setTarget] = useState<undefined | string>();
   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);
-  const [enableClientRegistry, setEnableClientRegistry] = useState(
-    inEditMode ? initialFormValues.identifiers['nationalUniquePatientIdentifier']?.identifierValue : false,
-  );
+  const validationSchema = getValidationSchema(config, t);
 
   useEffect(() => {
     exportedInitialFormValuesForTesting = initialFormValues;
@@ -86,7 +83,7 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
     const abortController = new AbortController();
     helpers.setSubmitting(true);
 
-    const updatedFormValues = { ...values, identifiers: filterUndefinedPatientIdenfier(values.identifiers) };
+    const updatedFormValues = { ...values, identifiers: filterOutUndefinedPatientIdentifiers(values.identifiers) };
     try {
       await savePatientForm(
         !inEditMode,
@@ -121,26 +118,6 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
 
       setTarget(redirectUrl);
     } catch (error) {
-      const fieldErrors = Object.entries(error.responseBody?.error?.fieldErrors || {}) as Array<
-        [string, Array<{ code: string; message: string }>]
-      >;
-
-      if (savePatientTransactionManager.current.patientSaved) {
-        fieldErrors.forEach(([field, error]) => {
-          const errorMessage = error.map((e) => e.message).join(', ');
-          showSnackbar({
-            subtitle: errorMessage,
-            title: `Patient registration successful, with errors for registration encounter`,
-            kind: 'warning',
-            timeoutInMs: 8000,
-          });
-        });
-        const afterUrl = new URLSearchParams(search).get('afterUrl');
-        const redirectUrl = interpolateUrl(afterUrl || config.links.submitButton, { patientUuid: values.patientUuid });
-
-        setTarget(redirectUrl);
-      }
-
       if (error.responseBody?.error?.globalErrors) {
         error.responseBody.error.globalErrors.forEach((error) => {
           showSnackbar({
@@ -161,41 +138,74 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
         });
       } else {
         createErrorHandler()(error);
-        console.error(error);
       }
 
       helpers.setSubmitting(false);
     }
   };
 
+  const getDescription = (errors) => {
+    return (
+      <ul style={{ listStyle: 'inside' }}>
+        {Object.keys(errors).map((error, index) => {
+          return <li key={index}>{t(`${error}LabelText`, error)}</li>;
+        })}
+      </ul>
+    );
+  };
+
   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,
-        });
+      showSnackbar({
+        isLowContrast: true,
+        kind: 'warning',
+        title: t('fieldsWithErrors', 'The following fields have errors:'),
+        subtitle: <>{getDescription(errors)}</>,
       });
     }
   };
 
+  const createContextValue = useCallback(
+    (formikProps) => ({
+      identifierTypes,
+      validationSchema,
+      values: formikProps.values,
+      inEditMode,
+      setFieldValue: formikProps.setFieldValue,
+      setFieldTouched: formikProps.setFieldTouched,
+      setCapturePhotoProps,
+      currentPhoto: photo?.imageSrc,
+      isOffline,
+      initialFormValues: formikProps.initialValues,
+      setInitialFormValues,
+    }),
+    [
+      identifierTypes,
+      validationSchema,
+      inEditMode,
+      setCapturePhotoProps,
+      photo?.imageSrc,
+      isOffline,
+      setInitialFormValues,
+    ],
+  );
+
   return (
     <Formik
       enableReinitialize
       initialValues={initialFormValues}
-      validationSchema={validationSchema}
-      onSubmit={onFormSubmit}>
+      onSubmit={onFormSubmit}
+      validationSchema={validationSchema}>
       {(props) => (
         <Form className={styles.form}>
-          <BeforeSavePrompt when={props.dirty} redirect={target} />
+          <BeforeSavePrompt when={Object.keys(props.touched).length > 0} redirect={target} />
           <div className={styles.formContainer}>
             <div>
               <div className={styles.stickyColumn}>
                 <h4>
-                  {inEditMode ? t('edit', 'Edit') : t('createNew', 'Create New')} {t('patient', 'Patient')}
+                  {inEditMode
+                    ? t('editPatientDetails', 'Edit patient details')
+                    : t('createNewPatient', 'Create new patient')}
                 </h4>
                 {showDummyData && <DummyDataInput setValues={props.setValues} />}
                 <p className={styles.label01}>{t('jumpTo', 'Jump to')}</p>
@@ -206,18 +216,6 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
                     </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"
@@ -225,40 +223,26 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
                   // 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 || !enableClientRegistry}>
+                  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('updatePatient', 'Update patient')
                   ) : (
-                    t('registerPatient', 'Register Patient')
+                    t('registerPatient', 'Register patient')
                   )}
                 </Button>
-                <Button className={styles.cancelButton} kind="tertiary" onClick={cancelRegistration}>
+                <Button className={styles.cancelButton} kind="secondary" 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,
-                }}>
-                <PatientVerification props={props} setInitialFormValues={setInitialFormValues} />
+              <PatientRegistrationContextProvider value={createContextValue(props)}>
                 {sections.map((section, index) => (
                   <SectionWrapper
                     key={`registration-section-${section.id}`}
@@ -266,7 +250,7 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
                     index={index}
                   />
                 ))}
-              </PatientRegistrationContext.Provider>
+              </PatientRegistrationContextProvider>
             </div>
           </div>
         </Form>

package/src/patient-registration/{patient-registration.resource.testt.tsx → patient-registration.resource.test.tsx}

@@ -8,10 +8,6 @@ jest.mock('@openmrs/esm-framework', () => ({
 }));
 
 describe('savePatient', () => {
-  afterEach(() => {
-    jest.resetAllMocks();
-  });
-
   it('appends patient uuid in url if provided', () => {
     mockOpenmrsFetch.mockImplementationOnce((url) => url);
     savePatient(null, '1234');

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

@@ -1,11 +1,12 @@
 import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import { type Patient, type Relationship, type PatientIdentifier, type Encounter } from './patient-registration.types';
+import dayjs from 'dayjs';
 
-export const uuidIdentifier = '58a4732e-1359-11df-a1f1-0026b9348838';
-export const uuidTelephoneNumber = '72a759a8-1359-11df-a1f1-0026b9348838';
+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 byteString = window.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);
@@ -57,6 +58,22 @@ export function generateIdentifier(source: string) {
   });
 }
 
+export async function generateAmrsUniversalIdentifier() {
+  const abortController = new AbortController();
+  const resp = await openmrsFetch(`https://ngx.ampath.or.ke/amrs-id-generator/generateidentifier`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: {
+      user: 1,
+    },
+    signal: abortController.signal,
+  });
+  const data = await resp.json();
+  return data['identifier'] ?? '';
+}
+
 export function deletePersonName(nameUuid: string, personUuid: string) {
   const abortController = new AbortController();
 
@@ -188,3 +205,10 @@ export async function deletePatientIdentifier(patientUuid: string, patientIdenti
     signal: abortController.signal,
   });
 }
+
+export function getDatetime(date: Date | string, time: string, timeFormat: 'AM' | 'PM') {
+  const datetime = new Date(date);
+  const [hours, minutes] = time.split(':').map(Number);
+  const fullHours = timeFormat === 'PM' ? (hours % 12) + 12 : hours % 12;
+  return dayjs(datetime).hour(fullHours).minute(minutes).second(0).millisecond(0).toDate();
+}

package/src/patient-registration/patient-registration.scss

@@ -1,13 +1,9 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
-
-.title {
-  color: var(--omrs-color-brand-teal);
-}
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .submit {
-  width: 250px;
+  width: 15.625rem;
 }
 
 .submit:hover {
@@ -19,34 +15,34 @@
 }
 
 .submitButton {
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
   width: 11.688rem;
   display: block;
 }
 
 .infoGrid {
   width: 100%;
-  padding-left: spacing.$spacing-07;
+  padding-left: layout.$spacing-07;
   margin-bottom: 40vh;
-  margin-top: spacing.$spacing-05;
+  margin-top: layout.$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;
+:global(.omrs-breakpoint-lt-desktop) {
+  .infoGrid {
+    max-width: unset;
+  }
 }
 
-.productiveHeading02 {
-  @include type.type-style('heading-compact-02');
-  color: $ui-04;
-  cursor: pointer;
+.label01 {
+  @include type.type-style('label-01');
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-05;
+  color: $ui-05;
 }
 
 .space05 {
-  margin: spacing.$spacing-05 0 spacing.$spacing-05 0;
+  margin: layout.$spacing-05 0;
 }
 
 .formContainer {
@@ -56,9 +52,9 @@
 
 .stickyColumn {
   position: sticky;
-  margin-top: spacing.$spacing-05;
-  // 3rem for the nav height and 1rem for top margin
-  top: 4rem;
+  margin-top: layout.$spacing-05;
+  // layout.$spacing-09 for the nav height and layout.$spacing-05 for top margin
+  top: layout.$spacing-10;
 }
 
 .touchTarget a:active {
@@ -68,7 +64,7 @@
 .linkName {
   color: $color-gray-70;
   line-height: 1.38;
-  font-size: spacing.$spacing-05;
+  font-size: layout.$spacing-05;
   font-weight: 600;
 
   &:active {
@@ -83,19 +79,12 @@
   }
 }
 
-.main {
-  background-color: white;
-}
-
-:global(.omrs-breakpoint-lt-desktop) {
-  .infoGrid {
-    max-width: unset;
-  }
-}
-
 .spinner {
-  &:global(.cds--inline-loading) {
-    min-height: 1rem;
+  min-height: layout.$spacing-05;
+  width: max-content;
+
+  :global(.cds--inline-loading__text) {
+    @include type.type-style('body-01');
   }
 }
 
@@ -109,6 +98,6 @@ html[dir='rtl'] {
 
   .infoGrid {
     padding-left: unset;
-    padding-right: spacing.$spacing-07;
+    padding-right: layout.$spacing-07;
   }
 }