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

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

@@ -0,0 +1,318 @@
+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;
+  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 {
+  patientUuid: string;
+  givenName: string;
+  middleName: string;
+  familyName: string;
+  additionalGivenName: string;
+  additionalMiddleName: string;
+  additionalFamilyName: string;
+  addNameInLocalLanguage: boolean;
+  gender: string;
+  birthdate: Date | string;
+  yearsEstimated: number;
+  monthsEstimated: number;
+  birthdateEstimated: boolean;
+  telephoneNumber: string;
+  isDead: boolean;
+  deathDate: string;
+  deathCause: string;
+  relationships: Array<RelationshipValue>;
+  identifiers: {
+    [identifierFieldName: string]: PatientIdentifierValue;
+  };
+  attributes?: {
+    [attributeTypeUuid: string]: string;
+  };
+  obs?: {
+    [conceptUuid: string]: string;
+  };
+  address: {
+    [addressField: string]: string;
+  };
+}
+
+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,31 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Input } from '../../input/basic-input/input/input.component';
+import { SelectInput } from '../../input/basic-input/select/select-input.component';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import styles from './../section.scss';
+
+export const DeathInfoSection = () => {
+  const { values } = React.useContext(PatientRegistrationContext);
+  const { t } = useTranslation();
+
+  return (
+    <section className={styles.formSection} aria-label="Death Info Section">
+      <h5 className={classNames('omrs-type-title-5', styles.formSectionTitle)}>Death Info</h5>
+      <section className={styles.fieldGroup}>
+        <Input labelText={t('isDeadInputLabel', 'Is Dead')} name="isDead" id="isDead" />
+        {values.isDead && (
+          <>
+            <Input labelText={t('deathDateInputLabel', 'Date of Death')} name="deathDate" id="deathDate" />
+            <SelectInput
+              options={[t('unknown', 'Unknown'), t('stroke', 'Stroke')]}
+              label={t('causeOfDeathInputLabel', 'Cause of Death')}
+              name="deathCause"
+            />
+          </>
+        )}
+      </section>
+    </section>
+  );
+};

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Formik, Form } from 'formik';
+import { initialFormValues } from '../../patient-registration.component';
+import { DeathInfoSection } from './death-info-section.component';
+import { type FormValues } from '../../patient-registration.types';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+
+  return {
+    ...originalModule,
+    validator: jest.fn(),
+  };
+});
+
+const initialContextValues = {
+  currentPhoto: 'data:image/png;base64,1234567890',
+  identifierTypes: [],
+  inEditMode: false,
+  initialFormValues: {} as FormValues,
+  isOffline: false,
+  setCapturePhotoProps: jest.fn(),
+  setFieldValue: jest.fn(),
+  setInitialFormValues: jest.fn(),
+  validationSchema: null,
+  values: {
+    isDead: true,
+  } as FormValues,
+};
+
+describe('Death info section', () => {
+  const renderDeathInfoSection = (isDead) => {
+    initialContextValues.values.isDead = isDead;
+
+    return render(
+      <PatientRegistrationContext.Provider value={initialContextValues}>
+        <Formik initialValues={initialFormValues} onSubmit={jest.fn()}>
+          <Form>
+            <DeathInfoSection />
+          </Form>
+        </Formik>
+      </PatientRegistrationContext.Provider>,
+    );
+  };
+
+  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('heading', { name: /death info/i })).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: /is dead \(optional\)/i })).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: /date of death \(optional\)/i })).toBeInTheDocument();
+    expect(screen.getByRole('combobox', { name: /cause of death \(optional\)/i })).toBeInTheDocument();
+  });
+
+  it('has the correct number of inputs if is dead is not checked', async () => {
+    renderDeathInfoSection(false);
+
+    expect(screen.queryByRole('textbox', { name: /date of death \(optional\)/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('combobox', { name: /cause of death \(optional\)/i })).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,30 @@
+import React, { useContext, useEffect } from 'react';
+import styles from './../section.scss';
+import { useField } from 'formik';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import { Field } from '../../field/field.component';
+
+export interface DemographicsSectionProps {
+  fields: Array<string>;
+}
+
+export const DemographicsSection: React.FC<DemographicsSectionProps> = ({ fields }) => {
+  const [field, meta] = useField('addNameInLocalLanguage');
+  const { setFieldValue } = useContext(PatientRegistrationContext);
+
+  useEffect(() => {
+    if (!field.value && meta.touched) {
+      setFieldValue('additionalGivenName', '');
+      setFieldValue('additionalMiddleName', '');
+      setFieldValue('additionalFamilyName', '');
+    }
+  }, [field.value, meta.touched]);
+
+  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,83 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Formik, Form } from 'formik';
+import { initialFormValues } from '../../patient-registration.component';
+import { DemographicsSection } from './demographics-section.component';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import { type FormValues } from '../../patient-registration.types';
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+
+  return {
+    ...originalModule,
+    validator: jest.fn(),
+    useConfig: jest.fn().mockImplementation(() => ({
+      fieldConfigurations: { dateOfBirth: { useEstimatedDateOfBirth: { enabled: true, dayOfMonth: 0, month: 0 } } },
+    })),
+  };
+});
+
+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', () => {
+  const formValues: FormValues = initialFormValues;
+
+  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) => {},
+            }}>
+            <DemographicsSection fields={['name', 'gender', 'dob']} id="demographics" />
+          </PatientRegistrationContext.Provider>
+        </Form>
+      </Formik>,
+    );
+    const allInputs = screen.getAllByRole('textbox') as Array<HTMLInputElement>;
+    return allInputs.map((input) => input.name);
+  };
+
+  it('inputs corresponding to number of fields', async () => {
+    const inputNames = await setupSection();
+    expect(inputNames.length).toBe(3);
+  });
+});

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>
+  );
+};