@kenyaemr/esm-patient-registration-app 4.3.0

package/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx

@@ -0,0 +1,156 @@
+import React, { useState, useCallback, useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useField } from 'formik';
+import { Button } from '@carbon/react';
+import { TrashCan, Edit, Reset } from '@carbon/react/icons';
+import { ResourcesContext } from '../../../../offline.resources';
+import { showModal, useConfig, UserHasAccess } from '@openmrs/esm-framework';
+import { shouldBlockPatientIdentifierInOfflineMode } from './utils';
+import { deleteIdentifierType, setIdentifierSource } from '../../../field/id/id-field.component';
+import { PatientIdentifierValue } from '../../../patient-registration-types';
+import { PatientRegistrationContext } from '../../../patient-registration-context';
+import { Input } from '../../basic-input/input/input.component';
+import styles from '../../input.scss';
+
+interface IdentifierInputProps {
+  patientIdentifier: PatientIdentifierValue;
+  fieldName: string;
+}
+
+export const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fieldName }) => {
+  const { t } = useTranslation();
+  const { defaultPatientIdentifierTypes } = useConfig();
+  const { identifierTypes } = useContext(ResourcesContext);
+  const { isOffline, values, setFieldValue } = useContext(PatientRegistrationContext);
+  const identifierType = useMemo(
+    () => identifierTypes.find((identifierType) => identifierType.uuid === patientIdentifier.identifierTypeUuid),
+    [patientIdentifier, identifierTypes],
+  );
+  const { autoGeneration, initialValue, identifierValue, identifierName, required } = patientIdentifier;
+  const [hideInputField, setHideInputField] = useState(autoGeneration || initialValue === identifierValue);
+  const name = `identifiers.${fieldName}.identifierValue`;
+  const [identifierField, identifierFieldMeta] = useField(name);
+
+  const disabled = isOffline && shouldBlockPatientIdentifierInOfflineMode(identifierType);
+
+  const defaultPatientIdentifierTypesMap = useMemo(() => {
+    const map = {};
+    defaultPatientIdentifierTypes?.forEach((typeUuid) => {
+      map[typeUuid] = true;
+    });
+    return map;
+  }, [defaultPatientIdentifierTypes]);
+
+  const handleReset = useCallback(() => {
+    setHideInputField(true);
+    setFieldValue(`identifiers.${fieldName}`, {
+      ...patientIdentifier,
+      identifierValue: initialValue,
+      selectedSource: null,
+      autoGeneration: false,
+    } as PatientIdentifierValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialValue, setHideInputField]);
+
+  const handleEdit = () => {
+    setHideInputField(false);
+    setFieldValue(`identifiers.${fieldName}`, {
+      ...patientIdentifier,
+      ...setIdentifierSource(identifierType?.identifierSources?.[0], initialValue, initialValue),
+    });
+  };
+
+  const handleDelete = () => {
+    /*
+    If there is an initialValue to the identifier, a confirmation modal seeking
+    confirmation to delete the identifier should be shown, else in the other case,
+    we can directly delete the identifier.
+    */
+
+    if (initialValue) {
+      const confirmDeleteIdentifierModal = showModal('delete-identifier-confirmation-modal', {
+        deleteIdentifier: (deleteIdentifier) => {
+          if (deleteIdentifier) {
+            setFieldValue('identifiers', deleteIdentifierType(values.identifiers, fieldName));
+          }
+          confirmDeleteIdentifierModal();
+        },
+        identifierName,
+        initialValue,
+      });
+    } else {
+      setFieldValue('identifiers', deleteIdentifierType(values.identifiers, fieldName));
+    }
+  };
+
+  return (
+    <div className={styles.IDInput}>
+      {!autoGeneration && !hideInputField ? (
+        <Input
+          id={name}
+          labelText={identifierName}
+          name={name}
+          disabled={disabled}
+          required={required}
+          invalid={!!(identifierFieldMeta.touched && identifierFieldMeta.error)}
+          invalidText={identifierFieldMeta.error && t(identifierFieldMeta.error)}
+          // t('identifierValueRequired', 'Identifier value is required')
+          {...identifierField}
+        />
+      ) : (
+        <div className={styles.textID}>
+          <p className={styles.label}>{identifierName}</p>
+          <p className={styles.bodyShort02}>
+            {autoGeneration ? t('autoGeneratedPlaceholderText', 'Auto-generated') : identifierValue}
+          </p>
+          <input type="hidden" {...identifierField} disabled />
+          {/* This is added for any error descriptions */}
+          {!!(identifierFieldMeta.touched && identifierFieldMeta.error) && (
+            <span className={styles.dangerLabel01}>{identifierFieldMeta.error && t(identifierFieldMeta.error)}</span>
+          )}
+        </div>
+      )}
+      <div style={{ marginBottom: '1rem' }}>
+        {!patientIdentifier.required && patientIdentifier.initialValue && hideInputField && (
+          <UserHasAccess privilege="Edit Patient Identifiers">
+            <Button
+              size="md"
+              kind="ghost"
+              onClick={handleEdit}
+              iconDescription={t('editIdentifierTooltip', 'Edit')}
+              disabled={disabled}
+              hasIconOnly>
+              <Edit size={16} />
+            </Button>
+          </UserHasAccess>
+        )}
+        {initialValue && initialValue !== identifierValue && (
+          <UserHasAccess privilege="Edit Patient Identifiers">
+            <Button
+              size="md"
+              kind="ghost"
+              onClick={handleReset}
+              iconDescription={t('resetIdentifierTooltip', 'Reset')}
+              disabled={disabled}
+              hasIconOnly>
+              <Reset size={16} />
+            </Button>
+          </UserHasAccess>
+        )}
+        {!patientIdentifier.required && !defaultPatientIdentifierTypesMap[patientIdentifier.identifierTypeUuid] && (
+          <UserHasAccess privilege="Delete Patient Identifiers">
+            <Button
+              size="md"
+              kind="danger--ghost"
+              onClick={handleDelete}
+              iconDescription={t('deleteIdentifierTooltip', 'Delete')}
+              disabled={disabled}
+              hasIconOnly>
+              <TrashCan size={16} />
+            </Button>
+          </UserHasAccess>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/patient-registration/input/custom-input/identifier/identifier-input.test.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Formik, Form } from 'formik';
+import { IdentifierInput } from './identifier-input.component';
+import { initialFormValues } from '../../../patient-registration.component';
+import { PatientIdentifierType } from '../../../patient-registration-types';
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+
+  return {
+    ...originalModule,
+    validator: jest.fn(),
+  };
+});
+
+describe.skip('identifier input', () => {
+  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,
+  };
+  const setupIdentifierInput = async (identifierType: PatientIdentifierType) => {
+    initialFormValues['source-for-' + identifierType.fieldName] = identifierType.identifierSources[0].name;
+    render(
+      <Formik initialValues={initialFormValues} onSubmit={null}>
+        <Form>
+          <IdentifierInput identifierType={identifierType} />
+        </Form>
+      </Formik>,
+    );
+    const identifierInput = screen.getByLabelText(identifierType.fieldName) as HTMLInputElement;
+    let identifierSourceSelectInput = undefined;
+    try {
+      identifierSourceSelectInput = screen.getByLabelText('source-for-' + identifierType.fieldName) as HTMLInputElement;
+    } catch (e) {}
+    return {
+      identifierInput,
+      identifierSourceSelectInput,
+    };
+  };
+
+  it('exists', async () => {
+    const { identifierInput, identifierSourceSelectInput } = await setupIdentifierInput(openmrsID);
+    expect(identifierInput.type).toBe('text');
+    expect(identifierSourceSelectInput.type).toBe('select-one');
+  });
+
+  it('has correct props for identifier source select input', async () => {
+    const { identifierSourceSelectInput } = await setupIdentifierInput(openmrsID);
+    expect(identifierSourceSelectInput.childElementCount).toBe(3);
+    expect(identifierSourceSelectInput.value).toBe('Generator 1 for OpenMRS ID');
+  });
+
+  it('has correct props for identifier input', async () => {
+    const { identifierInput } = await setupIdentifierInput(openmrsID);
+    expect(identifierInput.placeholder).toBe('Auto-generated');
+    expect(identifierInput.disabled).toBe(true);
+  });
+
+  it('text input should not be disabled if manual entry is enabled', async () => {
+    // setup
+    openmrsID.identifierSources[0].autoGenerationOption.manualEntryEnabled = true;
+    // replay
+    const { identifierInput } = await setupIdentifierInput(openmrsID);
+    expect(identifierInput.placeholder).toBe('Auto-generated');
+    expect(identifierInput.disabled).toBe(false);
+  });
+
+  it('should not render select widget if auto-entry is false', async () => {
+    // setup
+    openmrsID.identifierSources = [
+      {
+        uuid: '691eed12-c0f1-11e2-94be-8c13b969e334',
+        name: 'Generator 1 for OpenMRS ID',
+        autoGenerationOption: {
+          manualEntryEnabled: true,
+          automaticGenerationEnabled: false,
+        },
+      },
+    ];
+    // replay
+    const { identifierInput, identifierSourceSelectInput } = await setupIdentifierInput(openmrsID);
+    expect(identifierInput.placeholder).toBe('Enter identifier');
+    expect(identifierInput.disabled).toBe(false);
+    expect(identifierSourceSelectInput).toBe(undefined);
+  });
+});

package/src/patient-registration/input/custom-input/identifier/utils.ts

@@ -0,0 +1,19 @@
+import { FetchedPatientIdentifierType, PatientIdentifierType } from '../../../patient-registration-types';
+
+export function shouldBlockPatientIdentifierInOfflineMode(identifierType: PatientIdentifierType) {
+  // Patient Identifiers which are unique and can be manually entered are prohibited while offline because
+  // of the chance of generating conflicts when syncing later.
+  return (
+    isUniqueIdentifierTypeForOffline(identifierType) &&
+    !identifierType.identifierSources.some(
+      (source) =>
+        !source.autoGenerationOption?.manualEntryEnabled && source.autoGenerationOption?.automaticGenerationEnabled,
+    )
+  );
+}
+
+export function isUniqueIdentifierTypeForOffline(identifierType: FetchedPatientIdentifierType) {
+  // In offline mode we consider each uniqueness behavior which could cause conflicts during syncing as 'unique'.
+  // Syncing conflicts can appear for the following behaviors:
+  return identifierType.uniquenessBehavior === 'UNIQUE' || identifierType.uniquenessBehavior === 'LOCATION';
+}

package/src/patient-registration/input/custom-input/unidentified-patient/unidentified-patient-input.component.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useField } from 'formik';
+import { Input } from '../../basic-input/input/input.component';
+
+interface UnidentifiedPatientInputProps {
+  name: string;
+  setName(field: string, value: any, shouldValidate?: boolean): void;
+}
+
+export const UnidentifiedPatientInput: React.FC<UnidentifiedPatientInputProps> = ({ setName, name }) => {
+  const [field] = useField({ name });
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (field.value) {
+      setName('givenName', 'UNKNOWN');
+      setName('middleName', 'UNKNOWN');
+      setName('familyName', 'UNKNOWN');
+    }
+  }, [field.value, setName]);
+
+  return <Input id="checkbox" labelText={t('unidentifiedPatient', 'Unidentified Patient')} name={name} />;
+};

package/src/patient-registration/input/custom-input/unidentified-patient/unidentified-patient-input.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Formik, Form } from 'formik';
+import { UnidentifiedPatientInput } from './unidentified-patient-input.component';
+
+describe.skip('unidentified patient input', () => {
+  const mockSetName = jest.fn();
+
+  const setupInput = async (unidentifiedPatient) => {
+    render(
+      <Formik initialValues={{ unidentifiedPatient: unidentifiedPatient }} onSubmit={null}>
+        <Form>
+          <UnidentifiedPatientInput name="unidentifiedPatient" setName={mockSetName} />
+        </Form>
+      </Formik>,
+    );
+    return screen.getByLabelText('Unidentified Patient') as HTMLInputElement;
+  };
+
+  it('exists', async () => {
+    const input = await setupInput(false);
+    expect(input.type).toEqual('checkbox');
+  });
+
+  it('sets givenName, middleName and familyName to "UNKNOWN" if patient is marked as unidentified', async () => {
+    mockSetName.mockReset();
+    await setupInput(true);
+    expect(mockSetName.mock.calls.length).toBe(3);
+    expect(mockSetName).toHaveBeenCalledWith('givenName', 'UNKNOWN');
+    expect(mockSetName).toHaveBeenCalledWith('middleName', 'UNKNOWN');
+    expect(mockSetName).toHaveBeenCalledWith('familyName', 'UNKNOWN');
+  });
+
+  it('does not override givenName, middleName and familyName if patient is identified', async () => {
+    mockSetName.mockReset();
+    await setupInput(false);
+    expect(mockSetName.mock.calls.length).toBe(0);
+  });
+});

package/src/patient-registration/input/dummy-data/dummy-data-input.component.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { v4 } from 'uuid';
+import { FormValues } from '../../patient-registration-types';
+import styles from './../input.scss';
+
+interface DummyDataInputProps {
+  setValues(values: FormValues, shouldValidate?: boolean): void;
+}
+
+export const dummyFormValues: FormValues = {
+  patientUuid: v4(),
+  givenName: 'John',
+  middleName: '',
+  familyName: 'Smith',
+  unidentifiedPatient: false,
+  additionalGivenName: 'Joey',
+  additionalMiddleName: '',
+  additionalFamilyName: 'Smitty',
+  addNameInLocalLanguage: true,
+  gender: 'Male',
+  birthdate: new Date(2020, 1, 1) as any,
+  yearsEstimated: 1,
+  monthsEstimated: 2,
+  birthdateEstimated: true,
+  telephoneNumber: '0800001066',
+  isDead: false,
+  deathDate: '',
+  deathCause: '',
+  relationships: [],
+  address: {
+    address1: 'Bom Jesus Street',
+    address2: '',
+    cityVillage: 'Recife',
+    stateProvince: 'Pernambuco',
+    country: 'Brazil',
+    postalCode: '50030-310',
+  },
+  identifiers: {},
+};
+
+export const DummyDataInput: React.FC<DummyDataInputProps> = ({ setValues }) => {
+  return (
+    <main>
+      <button
+        onClick={() => setValues(dummyFormValues)}
+        className={`omrs-btn omrs-filled-neutral ${styles.dummyData}`}
+        type="button"
+        aria-label="Dummy Data Input">
+        Input Dummy Data
+      </button>
+    </main>
+  );
+};

package/src/patient-registration/input/dummy-data/dummy-data-input.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import { DummyDataInput, dummyFormValues } from './dummy-data-input.component';
+import { initialFormValues } from '../../patient-registration.component';
+import { FormValues } from '../../patient-registration-types';
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+
+  return {
+    ...originalModule,
+    validator: jest.fn(),
+  };
+});
+
+describe('dummy data input', () => {
+  let formValues: FormValues = initialFormValues;
+
+  const setupInput = async () => {
+    render(
+      <DummyDataInput
+        setValues={(values) => {
+          formValues = values;
+        }}
+      />,
+    );
+    return screen.getByLabelText('Dummy Data Input') as HTMLButtonElement;
+  };
+
+  it('exists', async () => {
+    const input = await setupInput();
+    expect(input.type).toEqual('button');
+  });
+
+  it('can input data on button click', async () => {
+    const input = await setupInput();
+
+    fireEvent.click(input);
+    waitFor(() => {
+      expect(formValues).toEqual(dummyFormValues);
+    });
+  });
+});

package/src/patient-registration/input/input.scss

@@ -0,0 +1,108 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '../../patient-registration/patient-registration.scss';
+
+.fieldRow {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+
+.subFieldRow {
+  margin-bottom: 5px;
+}
+
+.label {
+  @include type.type-style('label-01');
+  color: $text-02;
+}
+
+.textID {
+  margin-bottom: spacing.$spacing-05;
+}
+
+.requiredField {
+  color: $danger;
+}
+
+.input {
+  margin-right: 5px;
+}
+
+.checkboxField {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  width: 400px;
+  margin-left: 10px;
+}
+
+.textInput {
+  width: 250px !important;
+  height: 40px !important;
+}
+
+.numberInput {
+  width: 200px !important;
+  height: 40px !important;
+}
+
+.checkboxInput {
+  height: 1.5rem !important;
+  width: 1.5rem !important;
+  margin-top: 8px;
+}
+
+.selectInput {
+  width: 150px !important;
+  height: 40px !important;
+}
+
+.dateInput {
+  width: 200px !important;
+  height: 40px !important;
+  font-size: large !important;
+}
+
+.telInput {
+  width: 250px !important;
+  height: 40px !important;
+}
+
+.errorInput {
+  border: 2px solid $danger !important;
+  padding-left: 0.875rem !important;
+}
+
+.errorMessage {
+  color: $danger;
+  align-self: center;
+}
+
+.dummyData {
+  cursor: pointer;
+  margin-left: 5px;
+}
+
+.IDInput {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: end;
+}
+
+.trashCan {
+  color: $danger;
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+  .IDInput {
+    max-width: unset;
+    width: 100%;
+  }
+}
+
+.dangerLabel01 {
+  @include type.type-style('label-01');
+  color: $danger;
+}

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

@@ -0,0 +1,24 @@
+import { useConfig } from '@openmrs/esm-framework';
+import { createContext, SetStateAction } from 'react';
+import { RegistrationConfig } from '../config-schema';
+import { FormValues, CapturePhotoProps } from './patient-registration-types';
+
+export interface PatientRegistrationContextProps {
+  identifierTypes: Array<any>;
+  values: FormValues;
+  validationSchema: any;
+  setValidationSchema(value: any): void;
+  inEditMode: boolean;
+  setFieldValue(field: string, value: any, shouldValidate?: boolean): void;
+  setCapturePhotoProps(value: SetStateAction<CapturePhotoProps>): void;
+  currentPhoto: string;
+  isOffline: boolean;
+  initialFormValues: FormValues;
+}
+
+export const PatientRegistrationContext = createContext<PatientRegistrationContextProps | undefined>(undefined);
+
+export function useFieldConfig(field: string) {
+  const { fieldConfigurations } = useConfig() as RegistrationConfig;
+  return fieldConfigurations[field];
+}