@olaboot/esm-patient-registration-app 9.2.0 → 10.0.2

package/src/patient-registration/input/dummy-data/dummy-data-input.test.tsx

@@ -1,34 +1,66 @@
 import React from 'react';
+import { vi, describe, it, expect } from 'vitest';
 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';
 
-describe('Dummy data input', () => {
-  let formValues: FormValues = initialFormValues;
-
-  const setupInput = async () => {
-    render(
-      <DummyDataInput
-        setValues={(values) => {
-          formValues = values;
-        }}
-      />,
-    );
-    return screen.getByLabelText('Dummy Data Input') as HTMLButtonElement;
+/**
+ * Helper to render DummyDataInput component.
+ */
+function renderDummyDataInput(onSetValues?: (values: FormValues) => void) {
+  let capturedValues: FormValues = initialFormValues;
+  const handleSetValues =
+    onSetValues ||
+    ((values: FormValues) => {
+      capturedValues = values;
+    });
+
+  const utils = render(<DummyDataInput setValues={handleSetValues} />);
+
+  return {
+    ...utils,
+    getCapturedValues: () => capturedValues,
   };
+}
 
-  it('exists', async () => {
-    const input = await setupInput();
-    expect(input.type).toEqual('button');
+describe('DummyDataInput component', () => {
+  describe('Rendering', () => {
+    it('renders the dummy data input button', () => {
+      renderDummyDataInput();
+
+      const button = screen.getByLabelText('Input Dummy Data') as HTMLButtonElement;
+      expect(button).toBeInTheDocument();
+      expect(button.type).toBe('button');
+    });
   });
 
-  it('can input data on button click', async () => {
-    const user = userEvent.setup();
-    const input = await setupInput();
+  describe('User interaction', () => {
+    it('populates form values with dummy data when button is clicked', async () => {
+      const user = userEvent.setup();
+      const mockSetValues = vi.fn();
+      renderDummyDataInput(mockSetValues);
+
+      const button = screen.getByLabelText('Input Dummy Data');
+      await user.click(button);
+
+      expect(mockSetValues).toHaveBeenCalledTimes(1);
+      expect(mockSetValues).toHaveBeenCalledWith(dummyFormValues);
+    });
+
+    it('can be clicked multiple times', async () => {
+      const user = userEvent.setup();
+      const mockSetValues = vi.fn();
+      renderDummyDataInput(mockSetValues);
+
+      const button = screen.getByLabelText('Input Dummy Data');
+      await user.click(button);
+      await user.click(button);
+      await user.click(button);
 
-    await user.click(input);
-    expect(formValues).toEqual(dummyFormValues);
+      expect(mockSetValues).toHaveBeenCalledTimes(3);
+      expect(mockSetValues).toHaveBeenCalledWith(dummyFormValues);
+    });
   });
 });

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

@@ -82,8 +82,7 @@
 }
 
 .dummyData {
-  cursor: pointer;
-  margin-left: 5px;
+  margin: layout.$spacing-03 0;
 }
 
 .IDInput {

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

@@ -1,4 +1,6 @@
 import { createContext, type SetStateAction, useContext } from 'react';
+import type { FormikHelpers } from 'formik';
+import type { ObjectSchema } from 'yup';
 import { type PatientIdentifierType, useConfig } from '@openmrs/esm-framework';
 import { type CapturePhotoProps, type FormValues } from './patient-registration.types';
 import { type RegistrationConfig } from '../config-schema';
@@ -10,10 +12,10 @@ export interface PatientRegistrationContextProps {
   initialFormValues: FormValues;
   isOffline: boolean;
   setCapturePhotoProps(value: SetStateAction<CapturePhotoProps>): void;
-  setFieldTouched(field: string, isTouched?: any, shouldValidate?: boolean): void;
-  setFieldValue(field: string, value: any, shouldValidate?: boolean): void;
+  setFieldTouched: FormikHelpers<FormValues>['setFieldTouched'];
+  setFieldValue: FormikHelpers<FormValues>['setFieldValue'];
   setInitialFormValues?: React.Dispatch<SetStateAction<FormValues>>;
-  validationSchema: any;
+  validationSchema: ObjectSchema<any> | null;
   values: FormValues;
 }
 

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

@@ -21,6 +21,7 @@ import {
   type PatientRegistration,
   type PatientUuidMapType,
   type PersonAttributeResponse,
+  type AddressProperties,
 } from './patient-registration.types';
 import {
   getAddressFieldValuesFromFhirPatient,
@@ -30,17 +31,6 @@ import {
   latestFirstEncounter,
 } from './patient-registration-utils';
 
-interface AddressFieldValues {
-  address?: {
-    cityVillage?: string;
-    country?: string;
-    countyDistrict?: string;
-    postalCode?: string;
-    stateProvince?: string;
-    [key: string]: string | undefined;
-  };
-}
-
 interface DeathInfoResults {
   causeOfDeath: OpenmrsResource | null;
   causeOfDeathNonCoded: string | null;
@@ -192,6 +182,8 @@ export function useInitialFormValues(
   return [initialFormValues, setInitialFormValues];
 }
 
+type AddressFieldValues = Partial<Record<AddressProperties, string>>;
+
 export function useInitialAddressFieldValues(
   fallback: AddressFieldValues = {},
   isLoadingPatientToEdit: boolean,
@@ -243,7 +235,7 @@ export function usePatientUuidMap(
         try {
           const registration = await getPatientRegistration(patientUuid);
           if (!abortController.signal.aborted) {
-            setPatientUuidMap(registration?._patientRegistrationData.initialAddressFieldValues ?? fallbackRef.current);
+            setPatientUuidMap(registration?._patientRegistrationData.patientUuidMap ?? fallbackRef.current);
           }
         } catch (error) {
           if (!abortController.signal.aborted) {

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

@@ -1,4 +1,5 @@
 import { filterOutUndefinedPatientIdentifiers } from './patient-registration-utils';
+import { vi, describe, it, expect } from 'vitest';
 
 describe('filterOutUndefinedPatientIdentifiers', () => {
   const getIdentifiers = (autoGeneration = true, manualEntryEnabled = false) => ({
@@ -21,7 +22,7 @@ describe('filterOutUndefinedPatientIdentifiers', () => {
     },
   });
 
-  it('should fitler out undefined identifiers', () => {
+  it('should filter out undefined identifiers', () => {
     const filteredIdentifiers = filterOutUndefinedPatientIdentifiers(getIdentifiers());
     expect(filteredIdentifiers.OpenMRSId).not.toBeDefined();
   });

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

@@ -1,103 +1,16 @@
-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 PatientIdentifierValue,
   type PatientUuidMapType,
 } from './patient-registration.types';
 
-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({
+  document.getElementById(viewId)?.scrollIntoView({
     behavior: 'smooth',
-    block: 'center',
+    block: 'start',
     inline: 'center',
   });
 }
@@ -183,15 +96,6 @@ export function getPatientUuidMapFromFhirPatient(patient: fhir.Patient): Patient
   };
 }
 
-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) {

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

@@ -4,7 +4,7 @@ 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 { Form, Formik, type FormikHelpers } from 'formik';
+import { Form, Formik, type FormikHelpers, type FormikErrors } from 'formik';
 import {
   createErrorHandler,
   interpolateUrl,
@@ -60,7 +60,10 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
 
   const location = currentSession?.sessionLocation?.uuid;
   const inEditMode = isLoadingPatientToEdit ? undefined : !!(uuidOfPatientToEdit && patientToEdit);
-  const showDummyData = useMemo(() => localStorage.getItem('openmrs:devtools') === 'true' && !inEditMode, [inEditMode]);
+  const showDummyDataInput = useMemo(
+    () => localStorage.getItem('openmrs:devtools') === 'true' && !inEditMode,
+    [inEditMode],
+  );
   const { data: photo } = usePatientPhoto(patientToEdit?.id);
   const savePatientTransactionManager = useRef(new SavePatientTransactionManager());
   const validationSchema = getValidationSchema(config, t);
@@ -73,8 +76,8 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
     return config.sections
       .map(
         (sectionName) =>
-          config.sectionDefinitions.filter((s) => s.id == sectionName)[0] ??
-          builtInSections.filter((s) => s.id == sectionName)[0],
+          config.sectionDefinitions.filter((s) => s.id === sectionName)[0] ??
+          builtInSections.filter((s) => s.id === sectionName)[0],
       )
       .filter((s) => s);
   }, [config.sections, config.sectionDefinitions]);
@@ -144,7 +147,7 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
     }
   };
 
-  const getDescription = (errors) => {
+  const getDescription = (errors: FormikErrors<FormValues>): JSX.Element => {
     return (
       <ul style={{ listStyle: 'inside' }}>
         {Object.keys(errors).map((error, index) => {
@@ -154,7 +157,7 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
     );
   };
 
-  const displayErrors = (errors) => {
+  const displayErrors = (errors: FormikErrors<FormValues>): void => {
     if (errors && typeof errors === 'object' && !!Object.keys(errors).length) {
       showSnackbar({
         isLowContrast: true,
@@ -200,47 +203,48 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
         <Form className={styles.form}>
           <BeforeSavePrompt when={Object.keys(props.touched).length > 0} redirect={target} />
           <div className={styles.formContainer}>
-            <div>
-              <div className={styles.stickyColumn}>
-                <h4>
-                  {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>
-                {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"
-                    />
-                  ) : inEditMode ? (
-                    t('updatePatient', 'Update patient')
-                  ) : (
-                    t('registerPatient', 'Register patient')
-                  )}
-                </Button>
-                <Button className={styles.cancelButton} kind="secondary" onClick={cancelRegistration}>
-                  {t('cancel', 'Cancel')}
-                </Button>
-              </div>
+            {/* Navigation Sidebar */}
+            <div className={styles.stickyColumn}>
+              <h4>
+                {inEditMode
+                  ? t('editPatientDetails', 'Edit patient details')
+                  : t('createNewPatient', 'Create new patient')}
+              </h4>
+              {showDummyDataInput && <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>
+              ))}
+              <hr className={styles.divider} />
+              <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"
+                  />
+                ) : inEditMode ? (
+                  t('updatePatient', 'Update patient')
+                ) : (
+                  t('registerPatient', 'Register patient')
+                )}
+              </Button>
+              <Button className={styles.cancelButton} kind="secondary" onClick={cancelRegistration}>
+                {t('cancel', 'Cancel')}
+              </Button>
             </div>
+            {/* Registration Form */}
             <div className={styles.infoGrid}>
               <PatientRegistrationContextProvider value={createContextValue(props)}>
                 {sections.map((section, index) => (

package/src/patient-registration/patient-registration.resource.test.tsx

@@ -1,21 +1,18 @@
 import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { vi, describe, it, expect } from 'vitest';
 import { savePatient } from './patient-registration.resource';
 
-const mockOpenmrsFetch = openmrsFetch as jest.Mock;
-
-jest.mock('@openmrs/esm-framework', () => ({
-  openmrsFetch: jest.fn(),
-}));
+const mockOpenmrsFetch = vi.mocked(openmrsFetch);
 
 describe('savePatient', () => {
   it('appends patient uuid in url if provided', () => {
-    mockOpenmrsFetch.mockImplementationOnce((url) => url);
+    mockOpenmrsFetch.mockImplementationOnce(() => Promise.resolve({} as any));
     savePatient(null, '1234');
     expect(mockOpenmrsFetch.mock.calls[0][0]).toEqual(`${restBaseUrl}/patient/1234`);
   });
 
   it('does not append patient uuid in url', () => {
-    mockOpenmrsFetch.mockImplementationOnce(() => {});
+    mockOpenmrsFetch.mockImplementationOnce(() => Promise.resolve({} as any));
     savePatient(null);
     expect(mockOpenmrsFetch.mock.calls[0][0]).toEqual(`${restBaseUrl}/patient/`);
   });

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

@@ -1,9 +1,6 @@
+import dayjs from 'dayjs';
 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 = '05a29f94-c0ed-11e2-94be-8c13b969e334';
-export const uuidTelephoneNumber = '14d4f066-15f5-102d-96e4-000c29c2a5d7';
 
 function dataURItoFile(dataURI: string) {
   const byteString = window.atob(dataURI.split(',')[1]);

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

@@ -45,16 +45,29 @@
   margin: layout.$spacing-05 0;
 }
 
+.divider {
+  width: 100%;
+  height: 1px;
+  margin: layout.$spacing-07 0;
+  border: none;
+  background-color: $ui-03;
+}
+
 .formContainer {
   display: flex;
   width: 100%;
+  align-items: flex-start;
+  height: calc(100dvh - var(--omrs-topnav-height, 3rem)); // subtract nav height
+  overflow-y: auto;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .stickyColumn {
   position: sticky;
-  margin-top: layout.$spacing-05;
-  // layout.$spacing-09 for the nav height and layout.$spacing-05 for top margin
-  top: layout.$spacing-10;
+  top: layout.$spacing-05;
 }
 
 .touchTarget a:active {