@olaboot/esm-patient-registration-app 9.2.0

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

@@ -0,0 +1,322 @@
+import { type OpenmrsResource, type Session } from '@openmrs/esm-framework';
+import { type RegistrationConfig } from '../config-schema';
+import { type SavePatientTransactionManager } from './form-manager';
+
+interface NameValue {
+  uuid: string;
+  preferred: boolean;
+  givenName: string;
+  middleName: string;
+  familyName: string;
+}
+
+export interface AttributeValue {
+  attributeType: string;
+  value: string;
+}
+
+/**
+ * Patient Identifier data as it is fetched and composed from the APIs.
+ */
+export interface FetchedPatientIdentifierType {
+  name: string;
+  required: boolean;
+  uuid: string;
+  fieldName: string;
+  format: string;
+  formatDescription?: string;
+  isPrimary: boolean;
+  /** See: https://github.com/openmrs/openmrs-core/blob/e3fb1ac0a052aeff0f957a150731757dd319693b/api/src/main/java/org/openmrs/PatientIdentifierType.java#L41 */
+  uniquenessBehavior: undefined | null | 'UNIQUE' | 'NON_UNIQUE' | 'LOCATION';
+}
+
+export interface PatientIdentifierValue {
+  identifierUuid?: string;
+  identifierTypeUuid: string;
+  initialValue: string;
+  identifierValue: string;
+  identifierName: string;
+  selectedSource: IdentifierSource;
+  autoGeneration?: boolean;
+  preferred: boolean;
+  required: boolean;
+}
+
+/**
+ * Extends the `FetchedPatientIdentifierType` with aggregated data.
+ */
+export interface PatientIdentifierType extends FetchedPatientIdentifierType {
+  identifierSources: Array<IdentifierSource>;
+  autoGenerationSource?: IdentifierSource;
+  checked?: boolean;
+  source?: IdentifierSource;
+}
+
+export interface IdentifierSource {
+  uuid: string;
+  name: string;
+  autoGenerationOption?: IdentifierSourceAutoGenerationOption;
+}
+
+export interface IdentifierSourceAutoGenerationOption {
+  manualEntryEnabled: boolean;
+  automaticGenerationEnabled: boolean;
+}
+
+export interface PatientIdentifier {
+  uuid?: string;
+  identifier: string;
+  identifierType?: string;
+  location?: string;
+  preferred?: boolean;
+}
+
+export interface PatientRegistration {
+  id?: number;
+  /**
+   * The preliminary patient in the FHIR format.
+   */
+  fhirPatient: fhir.Patient;
+  /**
+   * Internal data collected by patient-registration. Required for later syncing and editing.
+   * Not supposed to be used outside of this module.
+   */
+  _patientRegistrationData: {
+    isNewPatient: boolean;
+    formValues: FormValues;
+    patientUuidMap: PatientUuidMapType;
+    initialAddressFieldValues: Record<string, any>;
+    capturePhotoProps: CapturePhotoProps;
+    currentLocation: string;
+    initialIdentifierValues: FormValues['identifiers'];
+    currentUser: Session;
+    config: RegistrationConfig;
+    savePatientTransactionManager: SavePatientTransactionManager;
+  };
+}
+
+export type Relationship = {
+  relationshipType: string;
+  personA: string;
+  personB: string;
+};
+
+export type Patient = {
+  uuid: string;
+  identifiers: Array<PatientIdentifier>;
+  person: {
+    uuid: string;
+    names: Array<NameValue>;
+    gender: string;
+    birthdate: string;
+    birthdateEstimated: boolean;
+    attributes: Array<AttributeValue>;
+    addresses: Array<Record<string, string>>;
+    dead: boolean;
+    deathDate?: string;
+    causeOfDeath?: string;
+  };
+};
+
+export interface Encounter {
+  encounterDatetime: Date;
+  patient: string;
+  encounterType: string;
+  location: string;
+  encounterProviders: Array<{
+    provider: string;
+    encounterRole: string;
+  }>;
+  form: string;
+  obs: Array<{
+    concept: string | OpenmrsResource;
+    value: string | number | OpenmrsResource;
+  }>;
+}
+
+export interface RelationshipValue {
+  relatedPersonName?: string;
+  relatedPersonUuid: string;
+  relation?: string;
+  relationshipType: string;
+  /**
+   * Defines the action to be taken on the existing relationship
+   * @kind ADD -> adds a new relationship
+   * @kind UPDATE -> updates an existing relationship
+   * @kind DELETE -> deletes an existing relationship
+   * @kind undefined -> no operation on the existing relationship
+   */
+  action?: 'ADD' | 'UPDATE' | 'DELETE';
+  /**
+   * Value kept for restoring initial relationshipType value
+   */
+  initialrelationshipTypeValue?: string;
+  uuid?: string;
+}
+
+export interface FormValues {
+  additionalFamilyName: string;
+  additionalGivenName: string;
+  additionalMiddleName: string;
+  addNameInLocalLanguage: boolean;
+  address: {
+    [addressField: string]: string;
+  };
+  attributes?: {
+    [attributeTypeUuid: string]: string;
+  };
+  birthdate: Date | string;
+  birthdateEstimated: boolean;
+  deathCause: string;
+  deathDate: string | Date;
+  deathTime: string;
+  deathTimeFormat: 'AM' | 'PM';
+  familyName: string;
+  gender: string;
+  givenName: string;
+  identifiers: {
+    [identifierFieldName: string]: PatientIdentifierValue;
+  };
+  isDead: boolean;
+  middleName: string;
+  monthsEstimated: number;
+  nonCodedCauseOfDeath: string;
+  obs?: {
+    [conceptUuid: string]: string;
+  };
+  patientUuid: string;
+  relationships: Array<RelationshipValue>;
+  telephoneNumber: string;
+  yearsEstimated: number;
+}
+
+export interface PatientUuidMapType {
+  additionalNameUuid?: string;
+  preferredNameUuid?: string;
+  preferredAddressUuid?: string;
+}
+
+export interface CapturePhotoProps {
+  imageData: string;
+  dateTime: string;
+}
+
+export interface AddressValidationSchemaType {
+  name: string;
+  label: string;
+  regex: RegExp;
+  regexFormat: string;
+}
+
+export interface CodedPersonAttributeConfig {
+  personAttributeUuid: string;
+  conceptUuid: string;
+}
+
+export interface TextBasedPersonAttributeConfig {
+  personAttributeUuid: string;
+  validationRegex: string;
+}
+export interface PatientIdentifierResponse {
+  uuid: string;
+  identifier: string;
+  preferred: boolean;
+  identifierType: {
+    uuid: string;
+    required: boolean;
+    name: string;
+  };
+}
+export interface PersonAttributeTypeResponse {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  format: string;
+}
+
+export interface PersonAttributeResponse {
+  display: string;
+  uuid: string;
+  value:
+    | string
+    | {
+        uuid: string;
+        display: string;
+      };
+  attributeType: {
+    display: string;
+    uuid: string;
+    format: 'org.openmrs.Concept' | string;
+  };
+}
+
+export interface ConceptResponse {
+  uuid: string;
+  display: string;
+  datatype: {
+    uuid: string;
+    display: string;
+  };
+  answers: Array<ConceptAnswers>;
+  setMembers: Array<ConceptAnswers>;
+}
+
+export interface ConceptAnswers {
+  display: string;
+  uuid: string;
+}
+
+export type AddressProperties =
+  | 'cityVillage'
+  | 'stateProvince'
+  | 'countyDistrict'
+  | 'postalCode'
+  | 'country'
+  | 'address1'
+  | 'address2'
+  | 'address3'
+  | 'address4'
+  | 'address5'
+  | 'address6'
+  | 'address7'
+  | 'address8'
+  | 'address9'
+  | 'address10'
+  | 'address11'
+  | 'address12'
+  | 'address13'
+  | 'address14'
+  | 'address15';
+
+export type ExtensibleAddressProperties = { [p in AddressProperties]?: string } | null;
+
+export interface AddressTemplate {
+  displayName: string | null;
+  codeName: string | null;
+  country: string | null;
+  lines: Array<
+    Array<{
+      isToken: 'IS_NOT_ADDR_TOKEN' | 'IS_ADDR_TOKEN';
+      displayText: string;
+      codeName?: AddressProperties;
+      displaySize?: string;
+    }>
+  > | null;
+  lineByLineFormat: Array<string> | null;
+  nameMappings: ExtensibleAddressProperties;
+  sizeMappings: ExtensibleAddressProperties;
+  elementDefaults: ExtensibleAddressProperties;
+  elementRegex: ExtensibleAddressProperties;
+  elementRegexFormats: ExtensibleAddressProperties;
+  requiredElements: Array<AddressProperties> | null;
+}
+
+// https://rest.openmrs.org/#address-template
+export interface RestAddressTemplate {
+  uuid: string;
+  description: string;
+  property: string;
+  display: string;
+  value: string;
+}

package/src/patient-registration/section/death-info/death-info-section.component.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Checkbox, Layer } from '@carbon/react';
+import { useField } from 'formik';
+import { usePatientRegistrationContext } from '../../patient-registration-context';
+import { Field } from '../../field/field.component';
+import styles from './../section.scss';
+
+export interface DeathInfoSectionProps {
+  fields: Array<string>;
+}
+
+export const DeathInfoSection: React.FC<DeathInfoSectionProps> = ({ fields }) => {
+  const { t } = useTranslation();
+  const { values, setFieldValue } = usePatientRegistrationContext();
+  const [deathDate, deathDateMeta] = useField('deathDate');
+  const today = new Date();
+
+  return (
+    <section className={styles.formSection} aria-label="Death Info Section">
+      <section className={styles.fieldGroup}>
+        <Layer>
+          <div className={styles.isDeadFieldContainer}>
+            <Checkbox
+              checked={values.isDead}
+              id="isDead"
+              labelText={t('isDeadInputLabel', 'Is dead')}
+              onChange={(event, { checked, id }) => setFieldValue(id, checked)}
+            />
+          </div>
+        </Layer>
+        {values.isDead ? fields.map((field) => <Field key={`death-info-${field}`} name={field} />) : null}
+      </section>
+    </section>
+  );
+};

package/src/patient-registration/section/death-info/death-info-section.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Form, Formik } from 'formik';
+import { type FormValues } from '../../patient-registration.types';
+import { renderWithContext } from 'tools';
+import { initialFormValues } from '../../patient-registration.component';
+import { PatientRegistrationContextProvider } from '../../patient-registration-context';
+import { DeathInfoSection } from './death-info-section.component';
+
+const initialContextValues = {
+  currentPhoto: 'data:image/png;base64,1234567890',
+  identifierTypes: [],
+  inEditMode: false,
+  initialFormValues: {} as FormValues,
+  isOffline: false,
+  setCapturePhotoProps: jest.fn(),
+  setFieldValue: jest.fn(),
+  setFieldTouched: jest.fn(),
+  setInitialFormValues: jest.fn(),
+  validationSchema: null,
+  values: {
+    isDead: true,
+  } as FormValues,
+};
+
+describe('Death info section', () => {
+  const renderDeathInfoSection = (isDead) => {
+    initialContextValues.values.isDead = isDead;
+
+    renderWithContext(
+      <Formik initialValues={initialFormValues} onSubmit={jest.fn()}>
+        <Form>
+          <DeathInfoSection fields={[]} />
+        </Form>
+      </Formik>,
+      PatientRegistrationContextProvider,
+      initialContextValues,
+    );
+  };
+
+  it('shows fields for recording death info when the patient is marked as dead', () => {
+    renderDeathInfoSection(true);
+
+    expect(screen.getByRole('region', { name: /death info section/i })).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: /is dead/i })).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,30 @@
+import React, { useEffect } from 'react';
+import { useField } from 'formik';
+import { Field } from '../../field/field.component';
+import { usePatientRegistrationContext } from '../../patient-registration-context';
+import styles from './../section.scss';
+
+export interface DemographicsSectionProps {
+  fields: Array<string>;
+}
+
+export const DemographicsSection: React.FC<DemographicsSectionProps> = ({ fields }) => {
+  const [field, meta] = useField('addNameInLocalLanguage');
+  const { setFieldValue } = usePatientRegistrationContext();
+
+  useEffect(() => {
+    if (!field.value && meta.touched) {
+      setFieldValue('additionalGivenName', '');
+      setFieldValue('additionalMiddleName', '');
+      setFieldValue('additionalFamilyName', '');
+    }
+  }, [field.value, meta.touched, setFieldValue]);
+
+  return (
+    <section className={styles.formSection} aria-label="Demographics Section">
+      {fields.map((field) => (
+        <Field key={`demographics-${field}`} name={field} />
+      ))}
+    </section>
+  );
+};

package/src/patient-registration/section/demographics/demographics-section.test.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Formik, Form } from 'formik';
+import { initialFormValues } from '../../patient-registration.component';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { DemographicsSection } from './demographics-section.component';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import { type RegistrationConfig, esmPatientRegistrationSchema } from '../../../config-schema';
+
+const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
+
+jest.mock('../../field/name/name-field.component', () => {
+  return {
+    NameField: () => (
+      <div>
+        <input type="text" name="name" />
+      </div>
+    ),
+  };
+});
+
+jest.mock('../../field/gender/gender-field.component', () => {
+  return {
+    GenderField: () => (
+      <div>
+        <input type="text" name="name" />
+      </div>
+    ),
+  };
+});
+
+jest.mock('../../field/id/id-field.component', () => {
+  return {
+    IdField: () => (
+      <div>
+        <input type="text" name="name" />
+      </div>
+    ),
+  };
+});
+
+describe('Demographics section', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldConfigurations: {
+        dateOfBirth: {
+          allowEstimatedDateOfBirth: true,
+          useEstimatedDateOfBirth: { enabled: true, dayOfMonth: 0, month: 0 },
+        },
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+  });
+
+  const setupSection = async (birthdateEstimated?: boolean, addNameInLocalLanguage?: boolean) => {
+    render(
+      <Formik initialValues={{ ...initialFormValues, birthdateEstimated, addNameInLocalLanguage }} onSubmit={null}>
+        <Form>
+          <PatientRegistrationContext.Provider
+            value={{
+              initialFormValues: null,
+              identifierTypes: [],
+              validationSchema: {},
+              values: { ...initialFormValues, birthdateEstimated, addNameInLocalLanguage },
+              inEditMode: false,
+              setFieldValue: () => {},
+              currentPhoto: 'TEST',
+              isOffline: true,
+              setCapturePhotoProps: (value) => {},
+              setFieldTouched: () => {},
+            }}>
+            <DemographicsSection fields={['name', 'gender', 'dob']} />
+          </PatientRegistrationContext.Provider>
+        </Form>
+      </Formik>,
+    );
+    const allInputs = screen.getAllByRole('textbox') as Array<HTMLInputElement>;
+    return allInputs.map((input) => input.name);
+  };
+
+  it('renders demographics fields and date of birth inputs', async () => {
+    const inputNames = await setupSection();
+    expect(inputNames.length).toBe(3);
+
+    expect(screen.getByText(/date of birth known\?/i)).toBeInTheDocument();
+    expect(
+      screen.getByRole('tab', {
+        name: /yes/i,
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('tab', {
+        name: /no/i,
+      }),
+    ).toBeInTheDocument();
+    expect(screen.getByLabelText(/date of birth/i)).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { type SectionDefinition } from '../../config-schema';
+import { Field } from '../field/field.component';
+
+export interface GenericSectionProps {
+  sectionDefinition: SectionDefinition;
+}
+
+export const GenericSection = ({ sectionDefinition }: GenericSectionProps) => {
+  return (
+    <section aria-label={`${sectionDefinition.name} Section`}>
+      {sectionDefinition.fields.map((name) => (
+        <Field key={`${sectionDefinition.name}-${name}`} name={name} />
+      ))}
+    </section>
+  );
+};