@kenyaemr/esm-patient-registration-app 4.3.0

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@kenyaemr/esm-patient-registration-app",
+  "version": "4.3.0",
+  "description": "Patient registration microfrontend for the OpenMRS SPA",
+  "browser": "dist/openmrs-esm-patient-registration-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "license": "MPL-2.0",
+  "homepage": "https://github.com/openmrs/openmrs-esm-patient-management#readme",
+  "scripts": {
+    "start": "openmrs develop",
+    "serve": "webpack serve --mode=development",
+    "debug": "npm run serve",
+    "build": "webpack --mode production",
+    "analyze": "webpack --mode=production --env analyze=true",
+    "lint": "eslint src --ext ts,tsx",
+    "typescript": "tsc",
+    "extract-translations": "i18next 'src/**/*.component.tsx'"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openmrs/openmrs-esm-patient-management.git"
+  },
+  "bugs": {
+    "url": "https://github.com/openmrs/openmrs-esm-patient-management/issues"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.12.0",
+    "formik": "^2.1.5",
+    "geopattern": "^1.2.3",
+    "lodash-es": "^4.17.15",
+    "react-avatar": "^4.0.0",
+    "uuid": "^8.3.2",
+    "yup": "^0.29.1"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "4.x",
+    "dayjs": "1.x",
+    "react": "18.x",
+    "react-i18next": "11.x",
+    "react-router-dom": "6.x"
+  },
+  "devDependencies": {
+    "webpack": "^5.74.0"
+  }
+}

package/src/add-patient-link.scss

@@ -0,0 +1,3 @@
+.slotStyles {
+  background-color: transparent;
+}

package/src/add-patient-link.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { HeaderGlobalAction } from '@carbon/react';
+import { UserFollow } from '@carbon/react/icons';
+import { navigate } from '@openmrs/esm-framework';
+import styles from './add-patient-link.scss';
+
+export default function Root() {
+  const addPatient = React.useCallback(() => navigate({ to: '${openmrsSpaBase}/patient-registration' }), []);
+
+  return (
+    <HeaderGlobalAction
+      aria-label="Add Patient"
+      aria-labelledby="Add Patient"
+      enterDelayMs={500}
+      name="AddPatientIcon"
+      onClick={addPatient}
+      className={styles.slotStyles}>
+      <UserFollow size={20} />
+    </HeaderGlobalAction>
+  );
+}

package/src/config-schema.ts

@@ -0,0 +1,405 @@
+import { Type, validator, validators } from '@openmrs/esm-framework';
+
+export interface SectionDefinition {
+  id: string;
+  name?: string;
+  fields: Array<string>;
+}
+
+export interface FieldDefinition {
+  id: string;
+  type: string;
+  label?: string;
+  uuid: string;
+  placeholder: string;
+  showHeading: boolean;
+  validation: {
+    required: boolean;
+    matches?: string;
+  };
+  answerConceptSetUuid?: string;
+  customConceptAnswers: Array<CustomConceptAnswer>;
+}
+export interface CustomConceptAnswer {
+  uuid: string;
+  label?: string;
+}
+export interface Gender {
+  label?: string;
+  value: string;
+  id: string;
+}
+
+export interface RegistrationConfig {
+  sections: Array<string>;
+  sectionDefinitions: Array<SectionDefinition>;
+  fieldDefinitions: Array<FieldDefinition>;
+  fieldConfigurations: {
+    name: {
+      displayMiddleName: boolean;
+      unidentifiedPatient: boolean;
+      defaultUnknownGivenName: string;
+      defaultUnknownFamilyName: string;
+      displayCapturePhoto: boolean;
+    };
+    gender: Array<Gender>;
+    address: {
+      useAddressHierarchy: {
+        enabled: boolean;
+        useQuickSearch: boolean;
+        searchAddressByLevel: boolean;
+      };
+    };
+    dateOfBirth: {
+      useEstimatedDateOfBirth: {
+        enabled: boolean;
+        dayOfMonth: number;
+        month: number;
+      };
+    };
+  };
+  links: {
+    submitButton: string;
+  };
+  concepts: {
+    patientPhotoUuid: string;
+  };
+  defaultPatientIdentifierTypes: Array<string>;
+  registrationObs: {
+    encounterTypeUuid: string | null;
+    encounterProviderRoleUuid: string;
+    registrationFormUuid: string | null;
+  };
+}
+
+export const builtInSections: Array<SectionDefinition> = [
+  {
+    id: 'demographics',
+    name: 'Basic Info',
+    fields: ['name', 'gender', 'dob', 'id'],
+  },
+  { 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', 'phone & email'] as const;
+
+export const esmPatientRegistrationSchema = {
+  sections: {
+    _type: Type.Array,
+    _default: ['demographics', 'contact', 'relationships'],
+    _description: `An array of strings which are the keys from 'sectionDefinitions' or any of the following built-in sections: '${builtInSections
+      .map((s) => s.id)
+      .join("', '")}'.`,
+    _elements: {
+      _type: Type.String,
+    },
+  },
+  sectionDefinitions: {
+    _type: Type.Array,
+    _elements: {
+      id: {
+        _type: Type.String,
+        _description: `How this section will be referred to in the \`sections\` configuration. To override a built-in section, use that section's id. The built in section ids are '${builtInSections
+          .map((s) => s.id)
+          .join("', '")}'.`,
+      },
+      name: {
+        _type: Type.String,
+        _description: 'The title to display at the top of the section.',
+      },
+      fields: {
+        _type: Type.Array,
+        _default: [],
+        _description: `The parts to include in the section. Can be any of the following built-in fields: ${builtInFields.join(
+          ', ',
+        )}. Can also be an id from an object in the \`fieldDefinitions\` array, which you can use to define custom fields.`,
+        _elements: { _type: Type.String },
+      },
+    },
+    _default: [],
+  },
+  fieldDefinitions: {
+    _type: Type.Array,
+    _elements: {
+      id: {
+        _type: Type.String,
+        _description:
+          'How this field will be referred to in the `fields` element of the `sectionDefinitions` configuration.',
+      },
+      type: {
+        _type: Type.String,
+        _description: "How this field's data will be stored—a person attribute or an obs.",
+        // _validators: [validators.oneOf(['person attribute', 'obs'])],
+      },
+      uuid: {
+        _type: Type.UUID,
+        _description: "Person attribute type UUID that this field's data should be saved to.",
+      },
+      showHeading: {
+        _type: Type.Boolean,
+        _description: 'Whether to show a heading above the person attribute field.',
+        _default: false,
+      },
+      label: {
+        _type: Type.String,
+        _default: null,
+        _description: 'The label of the input. By default, uses the metadata `display` attribute.',
+      },
+      placeholder: {
+        _type: Type.String,
+        _default: '',
+        _description: 'Placeholder that will appear in the input.',
+      },
+      validation: {
+        required: { _type: Type.Boolean, _default: false },
+        matches: {
+          _type: Type.String,
+          _default: null,
+          _description: 'Optional RegEx for testing the validity of the input.',
+        },
+      },
+      answerConceptSetUuid: {
+        _type: Type.ConceptUuid,
+        _default: null,
+        _description:
+          'For coded questions only. A concept which has the possible responses either as answers or as set members.',
+      },
+      customConceptAnswers: {
+        _type: Type.Array,
+        _elements: {
+          uuid: {
+            _type: Type.UUID,
+            _description: 'Answer concept UUID',
+          },
+          label: {
+            _type: Type.String,
+            _default: null,
+            _description: 'The custom label for the answer concept.',
+          },
+        },
+        _default: [],
+        _description: 'For coded questions only. Provide ability to add custom concept answers.',
+      },
+    },
+    _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.',
+  },
+  fieldConfigurations: {
+    name: {
+      displayMiddleName: { _type: Type.Boolean, _default: true },
+      unidentifiedPatient: {
+        _type: Type.Boolean,
+        _default: true,
+        _description: 'Whether to allow patients to be registered without names.',
+      },
+      defaultUnknownGivenName: {
+        _type: Type.String,
+        _default: 'UNKNOWN',
+        _description: 'The given/first name to record for unidentified patients.',
+      },
+      defaultUnknownFamilyName: {
+        _type: Type.String,
+        _default: 'UNKNOWN',
+        _description: 'The family/last name to record for unidentified patients.',
+      },
+      displayCapturePhoto: {
+        _type: Type.Boolean,
+        _default: true,
+        _description: 'Whether to display capture patient photo slot on name field',
+      },
+    },
+    gender: {
+      _type: Type.Array,
+      _elements: {
+        value: {
+          _type: Type.String,
+          _description: 'The value for sex option',
+        },
+        label: {
+          _type: Type.String,
+          _default: null,
+          _description: 'The label displayed for sex option.',
+        },
+        id: {
+          _type: Type.String,
+          _default: null,
+          _description: 'The id for sex option.',
+        },
+      },
+      _default: [
+        {
+          id: 'male',
+          value: 'Male',
+          label: 'Male',
+        },
+        {
+          id: 'female',
+          value: 'Female',
+          label: 'Female',
+        },
+        {
+          id: 'other',
+          value: 'Other',
+          label: 'Other',
+        },
+        {
+          id: 'unknown',
+          value: 'Unknown',
+          label: 'Unknown',
+        },
+      ],
+      _description: 'Provide ability to configure sex options.',
+    },
+    address: {
+      useAddressHierarchy: {
+        enabled: {
+          _type: Type.Boolean,
+          _description: 'Whether to use the Address hierarchy in the registration form or not',
+          _default: true,
+        },
+        useQuickSearch: {
+          _type: Type.Boolean,
+          _description:
+            'Whether to use the quick searching through the address saved in the database pre-fill the form.',
+          _default: true,
+        },
+        searchAddressByLevel: {
+          _type: Type.Boolean,
+          _description:
+            "Whether to fill the addresses by levels, i.e. County => subCounty, the current field is dependent on it's previous field.",
+          _default: false,
+        },
+        useAddressHierarchyLabel: {
+          _type: Type.Object,
+          _description: 'Whether to use custom labels for address hierarchy',
+          _default: {},
+        },
+      },
+    },
+    dateOfBirth: {
+      useEstimatedDateOfBirth: {
+        enabled: {
+          _type: Type.Boolean,
+          _description: 'Whether to use custom day and month for estimated date of birth',
+          _default: false,
+        },
+        dayOfMonth: {
+          _type: Type.Number,
+          _description: 'The custom day of the month use on the estimated date of birth',
+          _default: 0,
+        },
+        month: {
+          _type: Type.Number,
+          _description: 'The custom month to use on the estimated date of birth i.e 0 = Jan 11 = Dec',
+          _default: 0,
+        },
+      },
+    },
+  },
+  links: {
+    submitButton: {
+      _type: Type.String,
+      _default: '${openmrsSpaBase}/patient/${patientUuid}/chart',
+      _validators: [validators.isUrlWithTemplateParameters(['patientUuid'])],
+    },
+  },
+  concepts: {
+    patientPhotoUuid: {
+      _type: Type.ConceptUuid,
+      _default: '736e8771-e501-4615-bfa7-570c03f4bef5',
+    },
+  },
+  defaultPatientIdentifierTypes: {
+    _type: Type.Array,
+    _elements: {
+      _type: Type.PatientIdentifierTypeUuid,
+    },
+    _default: [],
+  },
+  registrationObs: {
+    encounterTypeUuid: {
+      _type: Type.UUID,
+      _default: null,
+      _description:
+        'Obs created during registration will be associated with an encounter of this type. This must be set in order to use fields of type `obs`.',
+    },
+    encounterProviderRoleUuid: {
+      _type: Type.UUID,
+      _default: 'a0b03050-c99b-11e0-9572-0800200c9a66',
+      _description: "The provider role to use for the registration encounter. Default is 'Unkown'.",
+    },
+    registrationFormUuid: {
+      _type: Type.UUID,
+      _default: null,
+      _description:
+        'The form UUID to associate with the registration encounter. By default no form will be associated.',
+    },
+  },
+  _validators: [
+    validator(
+      (config: RegistrationConfig) =>
+        !config.fieldDefinitions.some((d) => d.type == 'obs') || config.registrationObs.encounterTypeUuid != null,
+      "If fieldDefinitions contains any fields of type 'obs', `registrationObs.encounterTypeUuid` must be specified.",
+    ),
+    validator(
+      (config: RegistrationConfig) =>
+        config.sections.every((s) =>
+          [...builtInSections, ...config.sectionDefinitions].map((sDef) => sDef.id).includes(s),
+        ),
+      (config: RegistrationConfig) => {
+        const allowedSections = [...builtInSections, ...config.sectionDefinitions].map((sDef) => sDef.id);
+        const badSection = config.sections.find((s) => !allowedSections.includes(s));
+        return (
+          `'${badSection}' is not a valid section ID. Valid section IDs include the built-in sections ${stringifyDefinitions(
+            builtInSections,
+          )}` +
+          (config.sectionDefinitions.length
+            ? `; and the defined sections ${stringifyDefinitions(config.sectionDefinitions)}.`
+            : '.')
+        );
+      },
+    ),
+    validator(
+      (config: RegistrationConfig) =>
+        config.sectionDefinitions.every((sectionDefinition) =>
+          sectionDefinition.fields.every((f) =>
+            [...builtInFields, ...config.fieldDefinitions.map((fDef) => fDef.id)].includes(f),
+          ),
+        ),
+      (config: RegistrationConfig) => {
+        const allowedFields = [...builtInFields, ...config.fieldDefinitions.map((fDef) => fDef.id)];
+        const badSection = config.sectionDefinitions.find((sectionDefinition) =>
+          sectionDefinition.fields.some((f) => !allowedFields.includes(f)),
+        );
+        const badField = badSection.fields.find((f) => !allowedFields.includes(f));
+        return (
+          `The section definition '${
+            badSection.id
+          }' contains an invalid field '${badField}'. 'fields' can only contain the built-in fields '${builtInFields.join(
+            "', '",
+          )}'` +
+          (config.fieldDefinitions.length
+            ? `; or the defined fields ${stringifyDefinitions(config.fieldDefinitions)}.`
+            : '.')
+        );
+      },
+    ),
+  ],
+};
+
+function stringifyDefinitions(sectionDefinitions: Array<SectionDefinition | FieldDefinition>) {
+  return `'${sectionDefinitions.map((s) => s.id).join("', '")}'`;
+}

package/src/constants.ts

@@ -0,0 +1,14 @@
+import { omrsOfflineCachingStrategyHttpHeaderName, OmrsOfflineHttpHeaders } from '@openmrs/esm-framework';
+
+export const personRelationshipRepresentation =
+  'custom:(display,uuid,' +
+  'personA:(age,display,birthdate,uuid),' +
+  'personB:(age,display,birthdate,uuid),' +
+  'relationshipType:(uuid,display,description,aIsToB,bIsToA))';
+
+export const moduleName = '@openmrs/esm-patient-registration-app';
+export const patientRegistration = 'patient-registration';
+
+export const cacheForOfflineHeaders: OmrsOfflineHttpHeaders = {
+  [omrsOfflineCachingStrategyHttpHeaderName]: 'network-first',
+};

package/src/declarations.d.tsx

@@ -0,0 +1,4 @@
+declare module '*.css';
+declare module '*.scss';
+declare module '*.png';
+declare module '*.svg';

package/src/index.ts

@@ -0,0 +1,131 @@
+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__;
+
+const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+const backendDependencies = {
+  'webservices.rest': '^2.24.0',
+};
+
+function setupOpenMRS() {
+  const options = {
+    featureName: 'Patient Registration',
+    moduleName,
+  };
+
+  defineConfigSchema(moduleName, esmPatientRegistrationSchema);
+
+  registerBreadcrumbs([
+    {
+      path: `${window.spaBase}/${patientRegistration}`,
+      title: 'Patient Registration',
+      parent: `${window.spaBase}/home`,
+    },
+    {
+      path: `${window.spaBase}/patient/:patientUuid/edit`,
+      title: 'Edit patient details',
+      parent: `${window.spaBase}/patient/:patientUuid/chart`,
+    },
+  ]);
+
+  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 };

package/src/nav-link.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+
+export default function Root() {
+  return (
+    <ConfigurableLink to="${openmrsSpaBase}/patient-registration" className="cds--side-nav__link">
+      Patient Registration
+    </ConfigurableLink>
+  );
+}