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

package/dist/routes.json

@@ -0,0 +1 @@
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.24.0"},"pages":[{"component":"root","route":"patient-registration","online":true,"offline":true},{"component":"editPatient","routeRegex":"patient\\/([a-zA-Z0-9\\-]+)\\/edit","online":true,"offline":true}],"extensions":[{"component":"addPatientLink","name":"add-patient-action","slot":"top-nav-actions-slot","online":true,"offline":true},{"component":"cancelPatientEditModal","name":"cancel-patient-edit-modal","online":true,"offline":true},{"component":"patientPhoto","name":"patient-photo-widget","slot":"patient-photo-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-actions-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-search-actions-slot","online":true,"offline":true},{"component":"deleteIdentifierConfirmationModal","name":"delete-identifier-confirmation-modal","online":true,"offline":true},{"name":"client-registry-modal","component":"clientRegistryModal"}],"version":"6.0.1-pre.6"}

package/jest.config.js

@@ -0,0 +1,3 @@
+const rootConfig = require('../../jest.config.js');
+
+module.exports = rootConfig;

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@ampath/esm-patient-registration-app",
+  "version": "6.0.1-pre.6",
+  "description": "Patient registration microfrontend for the OpenMRS SPA",
+  "browser": "dist/ampath-esm-patient-registration-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "license": "MPL-2.0",
+  "homepage": "https://github.com/ampath/ampath-esm-3.x#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": "cross-env eslint src --ext ts,tsx",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests --color",
+    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
+    "coverage": "yarn test --coverage",
+    "typescript": "tsc",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts'"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ampath/ampath-esm-3.x.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ampath/ampath-esm-3.x/issues"
+  },
+  "dependencies": {
+    "@carbon/react": "~1.37.0",
+    "core-js-pure": "^3.34.0",
+    "formik": "^2.1.5",
+    "geopattern": "^1.2.3",
+    "lodash-es": "^4.17.15",
+    "react-avatar": "^5.0.3",
+    "uuid": "^8.3.2",
+    "yup": "^0.29.1"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "5.x",
+    "dayjs": "1.x",
+    "react": "18.x",
+    "react-i18next": "11.x",
+    "react-router-dom": "6.x",
+    "swr": "2.x"
+  },
+  "devDependencies": {
+    "webpack": "^5.74.0"
+  },
+  "stableVersion": "6.0.0"
+}

package/src/add-patient-link.scss

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

package/src/add-patient-link.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render } from '@testing-library/react';
+import { navigate } from '@openmrs/esm-framework';
+import Root from './add-patient-link';
+
+const mockedNavigate = navigate as jest.Mock;
+
+describe('Add patient link component', () => {
+  it('renders an "Add Patient" button and triggers navigation on click', async () => {
+    const user = userEvent.setup();
+
+    const { getByRole } = render(<Root />);
+    const addButton = getByRole('button', { name: /add patient/i });
+
+    await user.click(addButton);
+
+    expect(mockedNavigate).toHaveBeenCalledWith({ to: '${openmrsSpaBase}/patient-registration' });
+  });
+});

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,410 @@
+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;
+}
+
+export interface RegistrationConfig {
+  sections: Array<string>;
+  sectionDefinitions: Array<SectionDefinition>;
+  fieldDefinitions: Array<FieldDefinition>;
+  fieldConfigurations: {
+    name: {
+      displayMiddleName: boolean;
+      allowUnidentifiedPatients: boolean;
+      defaultUnknownGivenName: string;
+      defaultUnknownFamilyName: string;
+      displayCapturePhoto: boolean;
+      displayReverseFieldOrder: boolean;
+    };
+    gender: Array<Gender>;
+    address: {
+      useAddressHierarchy: {
+        enabled: boolean;
+        useQuickSearch: boolean;
+        searchAddressByLevel: boolean;
+      };
+    };
+    dateOfBirth: {
+      allowEstimatedDateOfBirth: boolean;
+      useEstimatedDateOfBirth: {
+        enabled: boolean;
+        dayOfMonth: number;
+        month: number;
+      };
+    };
+    phone: {
+      personAttributeUuid: string;
+    };
+  };
+  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: [] },
+];
+
+// These fields are handled specially in field.component.tsx
+export const builtInFields = ['name', 'gender', 'dob', 'id', 'address', 'phone'] 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 (obs or person attrbute). A list of custom concept answers. Overrides answers that come from the obs concept or from `answerSetConceptUuid`.',
+      },
+    },
+    // Do not add fields here. If you want to add a field in code, add it to built-in fields above.
+    _default: [],
+    _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 },
+      allowUnidentifiedPatients: {
+        _type: Type.Boolean,
+        _default: true,
+        _description: 'Whether to allow registering unidentified patients.',
+      },
+      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',
+      },
+      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,
+      _elements: {
+        value: {
+          _type: Type.String,
+          _description:
+            'Value that will be sent to the server. Limited to FHIR-supported values for Administrative Gender',
+          _validators: [validators.oneOf(['male', 'female', 'other', 'unknown'])],
+        },
+        label: {
+          _type: Type.String,
+          _default: null,
+          _description:
+            'The label displayed for the sex option, if it should be different from the value (the value will be translated; the English "translation" is upper-case).',
+        },
+      },
+      _default: [
+        {
+          value: 'male',
+        },
+        {
+          value: 'female',
+        },
+        {
+          value: 'other',
+        },
+        {
+          value: 'unknown',
+        },
+      ],
+      _description:
+        'The options for sex selection during patient registration. This is Administrative Gender as it is called by FHIR (Possible options are limited to those defined in FHIR Administrative Gender, see https://hl7.org/fhir/R4/valueset-administrative-gender.html).',
+    },
+    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: {
+      allowEstimatedDateOfBirth: {
+        _type: Type.Boolean,
+        _description: 'Whether to allow estimated date of birth for a patient during registration',
+        _default: true,
+      },
+      useEstimatedDateOfBirth: {
+        enabled: {
+          _type: Type.Boolean,
+          _description: 'Whether to use a fixed 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,
+        },
+      },
+    },
+    phone: {
+      personAttributeUuid: {
+        _type: Type.UUID,
+        _default: '14d4f066-15f5-102d-96e4-000c29c2a5d7',
+        _description: 'The UUID of the phone number person attribute type',
+      },
+    },
+  },
+  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, type 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 = '@ampath/esm-patient-registration-app';
+export const patientRegistration = 'patient-registration';
+
+export const cacheForOfflineHeaders: OmrsOfflineHttpHeaders = {
+  [omrsOfflineCachingStrategyHttpHeaderName]: 'network-first',
+};

package/src/declarations.d.ts

@@ -0,0 +1,6 @@
+declare module '@carbon/react';
+declare module '*.css';
+declare module '*.scss';
+declare module '*.png';
+declare module '*.svg';
+declare type SideNavProps = {};

package/src/index.ts

@@ -0,0 +1,71 @@
+import { registerBreadcrumbs, defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
+import { esmPatientRegistrationSchema } from './config-schema';
+import { moduleName, patientRegistration } from './constants';
+import { setupOffline } from './offline';
+import rootComponent from './root.component';
+import addPatientLinkComponent from './add-patient-link';
+import patientPhotoComponent from './widgets/display-photo.component';
+import editPatientDetailsButtonComponent from './widgets/edit-patient-details-button.component';
+import VerificationModal from './patient-verification/verification.component';
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+const options = {
+  featureName: 'Patient Registration',
+  moduleName,
+};
+
+export function startupApp() {
+  defineConfigSchema(moduleName, esmPatientRegistrationSchema);
+
+  registerBreadcrumbs([
+    {
+      path: `${window.spaBase}/${patientRegistration}`,
+      // t('patientRegistrationBreadcrumb', 'Patient Registration')
+      title: () =>
+        Promise.resolve(
+          window.i18next.t('patientRegistrationBreadcrumb', { defaultValue: 'Patient Registration', ns: moduleName }),
+        ),
+      parent: `${window.spaBase}/home`,
+    },
+    {
+      path: `${window.spaBase}/patient/:patientUuid/edit`,
+      // t('editPatientDetailsBreadcrumb', 'Edit patient details')
+      title: () =>
+        Promise.resolve(
+          window.i18next.t('editPatientDetailsBreadcrumb', { defaultValue: 'Edit patient details', ns: moduleName }),
+        ),
+      parent: `${window.spaBase}/patient/:patientUuid/chart`,
+    },
+  ]);
+
+  setupOffline();
+}
+
+export const root = getSyncLifecycle(rootComponent, options);
+
+export const editPatient = getSyncLifecycle(rootComponent, {
+  featureName: 'edit-patient-details-form',
+  moduleName,
+});
+
+export const addPatientLink = getSyncLifecycle(addPatientLinkComponent, options);
+
+export const cancelPatientEditModal = getAsyncLifecycle(
+  () => import('./widgets/cancel-patient-edit.component'),
+  options,
+);
+
+export const patientPhoto = getSyncLifecycle(patientPhotoComponent, options);
+
+export const editPatientDetailsButton = getSyncLifecycle(editPatientDetailsButtonComponent, {
+  featureName: 'edit-patient-details',
+  moduleName,
+});
+
+export const deleteIdentifierConfirmationModal = getAsyncLifecycle(
+  () => import('./widgets/delete-identifier-confirmation-modal'),
+  options,
+);
+
+export const clientRegistryModal = getSyncLifecycle(VerificationModal, 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/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>
+  );
+}