@kenyaemr/esm-patient-registration-app 4.5.1 → 4.5.2

package/src/config-schema.ts

@@ -41,6 +41,7 @@ export interface RegistrationConfig {
       defaultUnknownGivenName: string;
       defaultUnknownFamilyName: string;
       displayCapturePhoto: boolean;
+      displayReverseFieldOrder: boolean;
     };
     gender: Array<Gender>;
     address: {
@@ -78,12 +79,12 @@ export const builtInSections: Array<SectionDefinition> = [
     name: 'Basic Info',
     fields: ['name', 'gender', 'dob', 'id'],
   },
-  { id: 'contact', name: 'Contact Details', fields: ['address'] },
+  { id: 'contact', name: 'Contact Details', fields: ['address', 'phone'] },
   { id: 'death', name: 'Death Info', fields: [] },
   { id: 'relationships', name: 'Relationships', fields: [] },
 ];
 
-export const builtInFields = ['name', 'gender', 'dob', 'address', 'id'] as const;
+export const builtInFields = ['name', 'gender', 'dob', 'address', 'id', 'phone & email'] as const;
 
 export const esmPatientRegistrationSchema = {
   sections: {
@@ -183,7 +184,17 @@ export const esmPatientRegistrationSchema = {
         _description: 'For coded questions only. Provide ability to add custom concept answers.',
       },
     },
-    _default: [],
+    _default: [
+      {
+        id: 'phone',
+        type: 'person attribute',
+        uuid: '14d4f066-15f5-102d-96e4-000c29c2a5d7',
+        showHeading: false,
+        validation: {
+          matches: '',
+        },
+      },
+    ],
     _description:
       'Definitions for custom fields that can be used in sectionDefinitions. Can also be used to override built-in fields.',
   },
@@ -210,6 +221,11 @@ export const esmPatientRegistrationSchema = {
         _default: true,
         _description: 'Whether to display capture patient photo slot on name field',
       },
+      displayReverseFieldOrder: {
+        _type: Type.Boolean,
+        _default: false,
+        _description: "Whether to display the name fields in the order 'Family name' -> 'Middle name' -> 'First name'",
+      },
     },
     gender: {
       _type: Type.Array,

package/src/index.ts

@@ -1,25 +1,16 @@
 import { registerBreadcrumbs, defineConfigSchema, getAsyncLifecycle } from '@openmrs/esm-framework';
-import { FormManager } from './patient-registration/form-manager';
 import { esmPatientRegistrationSchema } from './config-schema';
 import { moduleName, patientRegistration } from './constants';
 import { setupOffline } from './offline';
 
-declare var __VERSION__: string;
-// __VERSION__ is replaced by Webpack with the version from package.json
-const version = __VERSION__;
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
-const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
-
-const backendDependencies = {
-  'webservices.rest': '^2.24.0',
+const options = {
+  featureName: 'Patient Registration',
+  moduleName,
 };
 
-function setupOpenMRS() {
-  const options = {
-    featureName: 'Patient Registration',
-    moduleName,
-  };
-
+export function startupApp() {
   defineConfigSchema(moduleName, esmPatientRegistrationSchema);
 
   registerBreadcrumbs([
@@ -36,96 +27,33 @@ function setupOpenMRS() {
   ]);
 
   setupOffline();
-
-  return {
-    pages: [
-      {
-        load: getAsyncLifecycle(() => import('./root.component'), options),
-        route: 'patient-registration',
-        online: {
-          savePatientForm: FormManager.savePatientFormOnline,
-          isOffline: false,
-        },
-        offline: {
-          savePatientForm: FormManager.savePatientFormOffline,
-          isOffline: true,
-        },
-      },
-      {
-        load: getAsyncLifecycle(() => import('./root.component'), {
-          featureName: 'edit-patient-details-form',
-          moduleName,
-        }),
-        route: /patient\/([a-zA-Z0-9\-]+)\/edit/,
-        online: {
-          savePatientForm: FormManager.savePatientFormOnline,
-        },
-        offline: {
-          savePatientForm: FormManager.savePatientFormOffline,
-        },
-      },
-    ],
-    extensions: [
-      {
-        id: 'add-patient-action',
-        slot: 'top-nav-actions-slot',
-        load: getAsyncLifecycle(() => import('./add-patient-link'), options),
-        online: true,
-        offline: true,
-      },
-      {
-        id: 'cancel-patient-edit-modal',
-        load: getAsyncLifecycle(() => import('./widgets/cancel-patient-edit.component'), options),
-        online: true,
-        offline: true,
-      },
-      {
-        id: 'patient-photo-widget',
-        slot: 'patient-photo-slot',
-        load: getAsyncLifecycle(() => import('./widgets/display-photo.component'), options),
-        online: true,
-        offline: true,
-      },
-      {
-        id: 'edit-patient-details-button',
-        slot: 'patient-actions-slot',
-        load: getAsyncLifecycle(() => import('./widgets/edit-patient-details-button.component'), options),
-        online: true,
-        offline: true,
-      },
-      {
-        id: 'edit-patient-details-button',
-        slot: 'patient-search-actions-slot',
-        load: getAsyncLifecycle(() => import('./widgets/edit-patient-details-button.component'), options),
-        online: true,
-        offline: true,
-      },
-      {
-        id: 'delete-identifier-confirmation-modal',
-        load: getAsyncLifecycle(() => import('./widgets/delete-identifier-confirmation-modal'), options),
-        online: true,
-        offline: true,
-      },
-      {
-        id: 'empty-client-registry-modal',
-        load: getAsyncLifecycle(
-          () => import('./patient-verification/verification-modal/empty-prompt.component'),
-          options,
-        ),
-        online: true,
-        offline: true,
-      },
-      {
-        id: 'confirm-client-registry-modal',
-        load: getAsyncLifecycle(
-          () => import('./patient-verification/verification-modal/confirm-prompt.component'),
-          options,
-        ),
-        online: true,
-        offline: true,
-      },
-    ],
-  };
 }
 
-export { backendDependencies, importTranslation, setupOpenMRS, version };
+export const root = getAsyncLifecycle(() => import('./root.component'), options);
+
+export const editPatient = getAsyncLifecycle(() => import('./root.component'), {
+  featureName: 'edit-patient-details-form',
+  moduleName,
+});
+
+export const addPatientLink = getAsyncLifecycle(() => import('./add-patient-link'), options);
+
+export const cancelPatientEditModal = getAsyncLifecycle(
+  () => import('./widgets/cancel-patient-edit.component'),
+  options,
+);
+
+export const patientPhoto = getAsyncLifecycle(() => import('./widgets/display-photo.component'), options);
+
+export const editPatientDetailsButton = getAsyncLifecycle(
+  () => import('./widgets/edit-patient-details-button.component'),
+  {
+    featureName: 'edit-patient-details',
+    moduleName,
+  },
+);
+
+export const deleteIdentifierConfirmationModal = getAsyncLifecycle(
+  () => import('./widgets/delete-identifier-confirmation-modal'),
+  options,
+);

package/src/nav-link.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Root from './nav-link';
+
+describe('Nav link component', () => {
+  it('renders a link to the patient registration page', () => {
+    const { getByText } = render(<Root />);
+    const linkElement = getByText('Patient Registration');
+
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement).toHaveAttribute('href', '/openmrs/spa/patient-registration');
+  });
+});

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

@@ -188,4 +188,4 @@ const AddressComponentContainer = ({ children }) => {
       </div>
     </div>
   );
-};
+};

package/src/patient-registration/field/address/address-hierarchy-levels.component.tsx

@@ -37,7 +37,7 @@ const AddressComboBox: React.FC<AddressComboBoxProps> = ({ attribute }) => {
   const [field, meta, helpers] = useField(`address.${attribute.name}`);
   const { fetchEntriesForField, searchString, updateChildElements } = useAddressEntryFetchConfig(attribute.name);
   const { entries } = useAddressEntries(fetchEntriesForField, searchString);
-  console.log(searchString);
+
   const handleInputChange = useCallback((newValue) => {
     helpers.setValue(newValue);
   }, []);

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

@@ -0,0 +1,291 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Field } from './field.component';
+import { useConfig } from '@openmrs/esm-framework';
+import { PatientRegistrationContext } from '../patient-registration-context';
+import { Resources, ResourcesContext } from '../../offline.resources';
+import { Form, Formik } from 'formik';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  useConfig: jest.fn(),
+}));
+const predefinedAddressTemplate = {
+  results: [
+    {
+      value:
+        '<org.openmrs.layout.address.AddressTemplate>\r\n     <nameMappings class="properties">\r\n       <property name="postalCode" value="Location.postalCode"/>\r\n       <property name="address2" value="Location.address2"/>\r\n       <property name="address1" value="Location.address1"/>\r\n       <property name="country" value="Location.country"/>\r\n       <property name="stateProvince" value="Location.stateProvince"/>\r\n       <property name="cityVillage" value="Location.cityVillage"/>\r\n     </nameMappings>\r\n     <sizeMappings class="properties">\r\n       <property name="postalCode" value="4"/>\r\n       <property name="address1" value="40"/>\r\n       <property name="address2" value="40"/>\r\n       <property name="country" value="10"/>\r\n       <property name="stateProvince" value="10"/>\r\n       <property name="cityVillage" value="10"/>\r\n       <asset name="cityVillage" value="10"/>\r\n     </sizeMappings>\r\n     <lineByLineFormat>\r\n       <string>address1 address2</string>\r\n       <string>cityVillage stateProvince postalCode</string>\r\n       <string>country</string>\r\n     </lineByLineFormat>\r\n     <elementDefaults class="properties">\r\n            <property name="country" value=""/>\r\n     </elementDefaults>\r\n     <elementRegex class="properties">\r\n            <property name="address1" value="[a-zA-Z]+$"/>\r\n     </elementRegex>\r\n     <elementRegexFormats class="properties">\r\n            <property name="address1" value="Countries can only be letters"/>\r\n     </elementRegexFormats>\r\n   </org.openmrs.layout.address.AddressTemplate>',
+    },
+  ],
+};
+
+const mockedIdentifierTypes = [
+  {
+    fieldName: 'openMrsId',
+    format: null,
+    identifierSources: [
+      {
+        uuid: '8549f706-7e85-4c1d-9424-217d50a2988b',
+        name: 'Generator for OpenMRS ID',
+        description: 'Generator for OpenMRS ID',
+        baseCharacterSet: '0123456789ACDEFGHJKLMNPRTUVWXY',
+        prefix: '',
+      },
+    ],
+    isPrimary: true,
+    name: 'OpenMRS ID',
+    required: true,
+    uniquenessBehavior: 'UNIQUE',
+    uuid: '05a29f94-c0ed-11e2-94be-8c13b969e334',
+  },
+  {
+    fieldName: 'idCard',
+    format: null,
+    identifierSources: [],
+    isPrimary: false,
+    name: 'ID Card',
+    required: false,
+    uniquenessBehavior: 'UNIQUE',
+    uuid: 'b4143563-16cd-4439-b288-f83d61670fc8',
+  },
+  {
+    fieldName: 'legacyId',
+    format: null,
+    identifierSources: [],
+    isPrimary: false,
+    name: 'Legacy ID',
+    required: false,
+    uniquenessBehavior: null,
+    uuid: '22348099-3873-459e-a32e-d93b17eda533',
+  },
+  {
+    fieldName: 'oldIdentificationNumber',
+    format: '',
+    identifierSources: [],
+    isPrimary: false,
+    name: 'Old Identification Number',
+    required: false,
+    uniquenessBehavior: null,
+    uuid: '8d79403a-c2cc-11de-8d13-0010c6dffd0f',
+  },
+  {
+    fieldName: 'openMrsIdentificationNumber',
+    format: '',
+    identifierSources: [],
+    isPrimary: false,
+    name: 'OpenMRS Identification Number',
+    required: false,
+    uniquenessBehavior: null,
+    uuid: '8d793bee-c2cc-11de-8d13-0010c6dffd0f',
+  },
+];
+const mockResourcesContextValue = {
+  addressTemplate: predefinedAddressTemplate,
+  currentSession: {
+    authenticated: true,
+    sessionId: 'JSESSION',
+    currentProvider: { uuid: 'provider-uuid', identifier: 'PRO-123' },
+  },
+  relationshipTypes: [],
+  identifierTypes: [...mockedIdentifierTypes],
+} as Resources;
+
+describe('Field', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render NameField component when name prop is "name"', () => {
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldConfigurations: {
+        name: {
+          displayMiddleName: true,
+          unidentifiedPatient: true,
+          defaultUnknownGivenName: 'UNKNOWN',
+          defaultUnknownFamilyName: 'UNKNOWN',
+        },
+      },
+    }));
+    render(
+      <ResourcesContext.Provider value={mockResourcesContextValue}>
+        <Formik initialValues={{}} onSubmit={null}>
+          <Form>
+            <PatientRegistrationContext.Provider
+              value={{
+                setFieldValue: jest.fn(),
+                setInitialFormValues: jest.fn(),
+                values: {},
+              }}>
+              <Field name="name" />
+            </PatientRegistrationContext.Provider>
+          </Form>
+        </Formik>
+      </ResourcesContext.Provider>,
+    );
+    expect(screen.getByText('Full Name')).toBeInTheDocument();
+  });
+
+  it('should render GenderField component when name prop is "gender"', () => {
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldConfigurations: {
+        gender: [
+          {
+            value: 'Male',
+            label: 'Male',
+            id: 'male',
+          },
+        ],
+      },
+    }));
+    render(
+      <ResourcesContext.Provider value={mockResourcesContextValue}>
+        <Formik initialValues={{}} onSubmit={null}>
+          <Form>
+            <PatientRegistrationContext.Provider
+              value={{
+                setFieldValue: jest.fn(),
+                setInitialFormValues: jest.fn(),
+                values: {},
+              }}>
+              <Field name="gender" />
+            </PatientRegistrationContext.Provider>
+          </Form>
+        </Formik>
+      </ResourcesContext.Provider>,
+    );
+    expect(screen.getByLabelText('Male')).toBeInTheDocument();
+  });
+
+  it('should render DobField component when name prop is "dob"', () => {
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldConfigurations: {
+        dob: {
+          minAgeLimit: 0,
+          maxAgeLimit: 120,
+        },
+      },
+    }));
+    render(
+      <ResourcesContext.Provider value={mockResourcesContextValue}>
+        <Formik initialValues={{}} onSubmit={null}>
+          <Form>
+            <PatientRegistrationContext.Provider
+              value={{
+                setFieldValue: jest.fn(),
+                setInitialFormValues: jest.fn(),
+                values: {},
+              }}>
+              <Field name="dob" />
+            </PatientRegistrationContext.Provider>
+          </Form>
+        </Formik>
+      </ResourcesContext.Provider>,
+    );
+    expect(screen.getByText('Birth')).toBeInTheDocument();
+  });
+
+  it('should render AddressComponent component when name prop is "address"', () => {
+    jest.mock('./address/address-hierarchy.resource', () => ({
+      ...(jest.requireActual('../address-hierarchy.resource') as jest.Mock),
+      useOrderedAddressHierarchyLevels: jest.fn(),
+    }));
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: false,
+            useQuickSearch: false,
+            searchAddressByLevel: false,
+          },
+        },
+      },
+    }));
+    render(
+      <ResourcesContext.Provider value={mockResourcesContextValue}>
+        <Formik initialValues={{}} onSubmit={null}>
+          <Form>
+            <PatientRegistrationContext.Provider
+              value={{
+                setFieldValue: jest.fn(),
+                setInitialFormValues: jest.fn(),
+                values: {},
+              }}>
+              <Field name="address" />
+            </PatientRegistrationContext.Provider>
+          </Form>
+        </Formik>
+      </ResourcesContext.Provider>,
+    );
+    expect(screen.getByText('Address')).toBeInTheDocument();
+  });
+
+  it('should render Identifiers component when name prop is "id"', () => {
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      defaultPatientIdentifierTypes: ['OpenMRS ID'],
+    }));
+    // initial value for the identifiers field
+    const openmrsID = {
+      name: 'OpenMRS ID',
+      fieldName: 'openMrsId',
+      required: true,
+      uuid: '05a29f94-c0ed-11e2-94be-8c13b969e334',
+      format: null,
+      isPrimary: true,
+      identifierSources: [
+        {
+          uuid: '691eed12-c0f1-11e2-94be-8c13b969e334',
+          name: 'Generator 1 for OpenMRS ID',
+          autoGenerationOption: {
+            manualEntryEnabled: false,
+            automaticGenerationEnabled: true,
+          },
+        },
+        {
+          uuid: '01af8526-cea4-4175-aa90-340acb411771',
+          name: 'Generator 2 for OpenMRS ID',
+          autoGenerationOption: {
+            manualEntryEnabled: true,
+            automaticGenerationEnabled: true,
+          },
+        },
+      ],
+      autoGenerationSource: null,
+    };
+    render(
+      <ResourcesContext.Provider value={mockResourcesContextValue}>
+        <Formik initialValues={{}} onSubmit={null}>
+          <Form>
+            <PatientRegistrationContext.Provider
+              value={{
+                setFieldValue: jest.fn(),
+                initialFormValues: { identifiers: { openmrsID } },
+                setInitialFormValues: jest.fn(),
+                values: {
+                  identifiers: { openmrsID },
+                },
+              }}>
+              <Field name="id" />
+            </PatientRegistrationContext.Provider>
+          </Form>
+        </Formik>
+      </ResourcesContext.Provider>,
+    );
+    expect(screen.getByText('Identifiers')).toBeInTheDocument();
+  });
+
+  it('should return null and report an error for an invalid field name', () => {
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldDefinitions: [{ id: 'weight' }],
+    }));
+    let error = null;
+    try {
+      render(<Field name="invalidField" />);
+    } catch (err) {
+      error = err;
+    }
+    expect(error).toBe(
+      "Invalid field name 'invalidField'. Valid options are 'weight', 'name', 'gender', 'dob', 'address', 'id', 'phone & email'.",
+    );
+    expect(screen.queryByTestId('invalid-field')).not.toBeInTheDocument();
+  });
+});

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

@@ -21,7 +21,7 @@ function checkNumber(value: string) {
 export const NameField = () => {
   const {
     fieldConfigurations: {
-      name: { displayCapturePhoto },
+      name: { displayCapturePhoto, displayReverseFieldOrder },
     },
   } = useConfig() as RegistrationConfig;
   const { t } = useTranslation();
@@ -55,6 +55,36 @@ export const NameField = () => {
     }
   };
 
+  const firstNameField = (
+    <Input
+      id="givenName"
+      name="givenName"
+      labelText={t('givenNameLabelText', 'First Name')}
+      checkWarning={checkNumber}
+      required
+    />
+  );
+
+  const middleNameField = fieldConfigs.displayMiddleName && (
+    <Input
+      id="middleName"
+      name="middleName"
+      labelText={t('middleNameLabelText', 'Middle Name')}
+      light
+      checkWarning={checkNumber}
+    />
+  );
+
+  const familyNameField = (
+    <Input
+      id="familyName"
+      name="familyName"
+      labelText={t('familyNameLabelText', 'Family Name')}
+      checkWarning={checkNumber}
+      required
+    />
+  );
+
   return (
     <div>
       <h4 className={styles.productiveHeading02Light}>{t('fullNameLabelText', 'Full Name')}</h4>
@@ -75,33 +105,20 @@ export const NameField = () => {
             <Switch name="known" text={t('yes', 'Yes')} />
             <Switch name="unknown" text={t('no', 'No')} />
           </ContentSwitcher>
-          {nameKnown && (
-            <>
-              <Input
-                id="givenName"
-                name="givenName"
-                labelText={t('givenNameLabelText', 'First Name')}
-                checkWarning={checkNumber}
-                required
-              />
-              {fieldConfigs.displayMiddleName && (
-                <Input
-                  id="middleName"
-                  name="middleName"
-                  labelText={t('middleNameLabelText', 'Middle Name')}
-                  light
-                  checkWarning={checkNumber}
-                />
-              )}
-              <Input
-                id="familyName"
-                name="familyName"
-                labelText={t('familyNameLabelText', 'Family Name')}
-                checkWarning={checkNumber}
-                required
-              />
-            </>
-          )}
+          {nameKnown &&
+            (!displayReverseFieldOrder ? (
+              <>
+                {firstNameField}
+                {middleNameField}
+                {familyNameField}
+              </>
+            ) : (
+              <>
+                {familyNameField}
+                {middleNameField}
+                {firstNameField}
+              </>
+            ))}
         </div>
       </div>
     </div>

package/src/patient-registration/form-manager.ts

@@ -39,6 +39,7 @@ export type SavePatientForm = (
   savePatientTransactionManager: SavePatientTransactionManager,
   abortController?: AbortController,
 ) => Promise<string | void>;
+
 export class FormManager {
   static savePatientFormOffline: SavePatientForm = async (
     isNewPatient,