@olaboot/esm-patient-registration-app 9.2.0

package/src/patient-registration/field/gender/gender-field.test.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { Formik, Form } from 'formik';
+import { screen } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { renderWithContext } from 'tools';
+import { type RegistrationConfig, esmPatientRegistrationSchema } from '../../../config-schema';
+import { type FormValues } from '../../patient-registration.types';
+import {
+  type PatientRegistrationContextProps,
+  PatientRegistrationContextProvider,
+} from '../../patient-registration-context';
+import { GenderField } from './gender-field.component';
+
+const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
+
+const mockContextValues: PatientRegistrationContextProps = {
+  currentPhoto: null,
+  identifierTypes: [],
+  inEditMode: false,
+  initialFormValues: {
+    gender: 'male',
+  } as FormValues,
+  isOffline: false,
+  setCapturePhotoProps: jest.fn(),
+  setFieldTouched: jest.fn(),
+  setFieldValue: jest.fn(),
+  validationSchema: esmPatientRegistrationSchema,
+  values: {
+    gender: 'male',
+  } as FormValues,
+};
+
+jest.mock('formik', () => ({
+  ...(jest.requireActual('formik') as any),
+  useField: jest.fn(() => [{}, {}]),
+}));
+
+describe('GenderField', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldConfigurations: {
+        gender: [
+          {
+            value: 'male',
+            label: 'Male',
+          },
+          {
+            value: 'female',
+            label: 'Female',
+          },
+        ],
+        name: {
+          displayMiddleName: false,
+          allowUnidentifiedPatients: false,
+          defaultUnknownGivenName: '',
+          defaultUnknownFamilyName: '',
+          displayCapturePhoto: false,
+          displayReverseFieldOrder: false,
+        },
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+  });
+
+  it('has a label', () => {
+    renderWithContext(
+      <Formik initialValues={{}} onSubmit={null}>
+        <Form>
+          <GenderField />
+        </Form>
+      </Formik>,
+      PatientRegistrationContextProvider,
+      mockContextValues,
+    );
+
+    expect(screen.getByRole('heading', { name: /sex/i })).toBeInTheDocument();
+    expect(screen.getByLabelText(/^male/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/female/i)).toBeInTheDocument();
+  });
+
+  it('checks an option', async () => {
+    const user = userEvent.setup();
+
+    renderWithContext(
+      <Formik initialValues={{}} onSubmit={null}>
+        <Form>
+          <GenderField />
+        </Form>
+      </Formik>,
+      PatientRegistrationContextProvider,
+      mockContextValues,
+    );
+
+    await user.click(screen.getByText(/female/i));
+    expect(screen.getByLabelText(/female/i)).toBeChecked();
+    expect(screen.getByLabelText(/^male/i)).not.toBeChecked();
+  });
+});

package/src/patient-registration/field/id/id-field.component.tsx

@@ -0,0 +1,136 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SkeletonText } from '@carbon/react';
+import { useConfig } from '@openmrs/esm-framework';
+import { usePatientRegistrationContext } from '../../patient-registration-context';
+import { useResourcesContext } from '../../../resources-context';
+import type {
+  FormValues,
+  IdentifierSource,
+  PatientIdentifierType,
+  PatientIdentifierValue,
+} from '../../patient-registration.types';
+import IdentifierInput from '../../input/custom-input/identifier/identifier-input.component';
+import styles from '../field.scss';
+
+export function setIdentifierSource(
+  identifierSource: IdentifierSource,
+  identifierValue: string,
+  initialValue: string,
+): {
+  identifierValue: string;
+  autoGeneration: boolean;
+  selectedSource: IdentifierSource;
+} {
+  const autoGeneration = identifierSource?.autoGenerationOption?.automaticGenerationEnabled;
+  const manualEntryEnabled = identifierSource?.autoGenerationOption?.manualEntryEnabled;
+  return {
+    selectedSource: identifierSource,
+    autoGeneration,
+    identifierValue:
+      autoGeneration && !manualEntryEnabled
+        ? 'auto-generated'
+        : identifierValue !== 'auto-generated'
+          ? identifierValue
+          : initialValue,
+  };
+}
+
+export function initializeIdentifier(
+  identifierType: PatientIdentifierType,
+  identifierProps,
+  identifierTypeOverrides?: Array<{ identifierTypeUuid: string; required?: boolean }>,
+): PatientIdentifierValue {
+  // Check if there's an override for this identifier type
+  const override = identifierTypeOverrides?.find((override) => override.identifierTypeUuid === identifierType.uuid);
+  const isRequired = override?.required !== undefined ? override.required : identifierType.isPrimary || identifierType.required;
+
+  return {
+    identifierTypeUuid: identifierType.uuid,
+    identifierName: identifierType.name,
+    preferred: identifierType.isPrimary,
+    initialValue: '',
+    required: isRequired,
+    ...identifierProps,
+    ...setIdentifierSource(
+      identifierProps?.selectedSource ?? identifierType.identifierSources?.[0],
+      identifierProps?.identifierValue,
+      identifierProps?.initialValue ?? '',
+    ),
+  };
+}
+
+export function deleteIdentifierType(identifiers: FormValues['identifiers'], identifierFieldName) {
+  return Object.fromEntries(Object.entries(identifiers).filter(([fieldName]) => fieldName !== identifierFieldName));
+}
+
+export const Identifiers: React.FC = () => {
+  const { identifierTypes } = useResourcesContext();
+  const isLoading = !identifierTypes?.length;
+  const { values, setFieldValue, initialFormValues, isOffline } = usePatientRegistrationContext();
+  const { t } = useTranslation();
+  const config = useConfig();
+  const { defaultPatientIdentifierTypes, identifierTypeOverrides } = config;
+
+  useEffect(() => {
+    if (identifierTypes) {
+      const identifiers = {};
+      identifierTypes
+        .filter(
+          (type) =>
+            type.isPrimary ||
+            type.required ||
+            !!defaultPatientIdentifierTypes?.find(
+              (defaultIdentifierTypeUuid) => defaultIdentifierTypeUuid === type.uuid,
+            ),
+        )
+        .filter((type) => !values.identifiers[type.fieldName])
+        .forEach((type) => {
+          identifiers[type.fieldName] = initializeIdentifier(
+            type,
+            values.identifiers[type.uuid] ?? initialFormValues.identifiers[type.uuid] ?? {},
+            identifierTypeOverrides,
+          );
+        });
+      /*
+        Identifier value should only be updated if there is any update in the
+        identifier values, otherwise, if the below 'if' clause is removed, it will
+        fall into an infinite run.
+      */
+      if (Object.keys(identifiers).length) {
+        setFieldValue('identifiers', {
+          ...values.identifiers,
+          ...identifiers,
+        });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [identifierTypes, setFieldValue, defaultPatientIdentifierTypes, identifierTypeOverrides, values.identifiers, initializeIdentifier]);
+
+  if (isLoading && !isOffline) {
+    return (
+      <div className={styles.halfWidthInDesktopView}>
+        <div className={styles.identifierLabelText}>
+          <h4 className={styles.productiveHeading02Light}>{t('idFieldLabelText', 'Identifiers')}</h4>
+        </div>
+        <SkeletonText
+          // @ts-expect-error
+          role="progressbar"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.halfWidthInDesktopView}>
+      <div className={styles.identifierLabelText}>
+        <h4 className={styles.productiveHeading02Light}>{t('idFieldLabelText', 'Identifiers')}</h4>
+      </div>
+      <div>
+        {Object.entries(values.identifiers).map(([fieldName, identifier]) => (
+          <IdentifierInput key={fieldName} fieldName={fieldName} patientIdentifier={identifier} />
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/patient-registration/field/id/id-field.test.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { Form, Formik } from 'formik';
+import { screen } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { type AddressTemplate, type IdentifierSource } from '../../patient-registration.types';
+import { mockIdentifierTypes, mockOpenmrsId, mockPatient, mockSession } from '__mocks__';
+import { renderWithContext } from 'tools';
+import { esmPatientRegistrationSchema, type RegistrationConfig } from '../../../config-schema';
+import { type Resources } from '../../../offline.resources';
+import {
+  PatientRegistrationContextProvider,
+  type PatientRegistrationContextProps,
+} from '../../patient-registration-context';
+import { Identifiers, setIdentifierSource } from './id-field.component';
+import { ResourcesContextProvider } from '../../../resources-context';
+
+const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
+
+const mockResourcesContextValue = {
+  addressTemplate: null as unknown as AddressTemplate,
+  currentSession: mockSession.data,
+  identifierTypes: [],
+  relationshipTypes: [],
+} as Resources;
+
+const mockInitialFormValues = {
+  additionalFamilyName: '',
+  additionalGivenName: '',
+  additionalMiddleName: '',
+  addNameInLocalLanguage: false,
+  address: {},
+  birthdate: null,
+  birthdateEstimated: false,
+  deathCause: '',
+  deathDate: '',
+  familyName: 'Doe',
+  gender: 'male',
+  givenName: 'John',
+  identifiers: mockOpenmrsId,
+  isDead: false,
+  middleName: 'Test',
+  monthsEstimated: 0,
+  patientUuid: mockPatient.uuid,
+  relationships: [],
+  telephoneNumber: '',
+  yearsEstimated: 0,
+};
+
+const mockContextValues: PatientRegistrationContextProps = {
+  currentPhoto: null,
+  inEditMode: false,
+  identifierTypes: [],
+  initialFormValues: mockInitialFormValues,
+  isOffline: false,
+  setCapturePhotoProps: jest.fn(),
+  setFieldValue: jest.fn(),
+  setInitialFormValues: jest.fn(),
+  validationSchema: null,
+  values: mockInitialFormValues,
+} as unknown as PatientRegistrationContextProps;
+
+describe('Identifiers', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      defaultPatientIdentifierTypes: ['OpenMRS ID'],
+    });
+  });
+
+  it('should render loading skeleton when identifier types are loading', () => {
+    renderWithContext(
+      <Formik initialValues={{}} onSubmit={null}>
+        <Form>
+          <PatientRegistrationContextProvider value={mockContextValues}>
+            <Identifiers />
+          </PatientRegistrationContextProvider>
+        </Form>
+      </Formik>,
+      ResourcesContextProvider,
+      mockResourcesContextValue,
+    );
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('should render identifier inputs when identifier types are loaded', () => {
+    mockResourcesContextValue.identifierTypes = mockIdentifierTypes;
+
+    renderWithContext(
+      <Formik initialValues={{}} onSubmit={null}>
+        <Form>
+          <PatientRegistrationContextProvider value={mockContextValues}>
+            <Identifiers />
+          </PatientRegistrationContextProvider>
+        </Form>
+      </Formik>,
+      ResourcesContextProvider,
+      mockResourcesContextValue,
+    );
+
+    expect(screen.getByText('Identifiers')).toBeInTheDocument();
+  });
+});
+
+describe('setIdentifierSource', () => {
+  describe('auto-generation', () => {
+    it('should return auto-generated as the identifier value', () => {
+      const identifierSource = { autoGenerationOption: { automaticGenerationEnabled: true } } as IdentifierSource;
+      const { identifierValue } = setIdentifierSource(identifierSource, '', '');
+      expect(identifierValue).toBe('auto-generated');
+    });
+
+    it('should return the identifier value when manual entry enabled', () => {
+      const identifierSource = {
+        autoGenerationOption: { automaticGenerationEnabled: true, manualEntryEnabled: true },
+      } as IdentifierSource;
+      const { identifierValue } = setIdentifierSource(identifierSource, '10001V', '');
+      expect(identifierValue).toBe('10001V');
+    });
+  });
+});

package/src/patient-registration/field/id/identifier-selection-overlay.component.tsx

@@ -0,0 +1,200 @@
+import React, { useMemo, useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ButtonSet, Checkbox, Search, RadioButtonGroup, RadioButton } from '@carbon/react';
+import { isDesktop, useConfig, useLayoutType } from '@openmrs/esm-framework';
+import { type FormValues, type PatientIdentifierType, PatientIdentifierValue } from '../../patient-registration.types';
+import { usePatientRegistrationContext } from '../../patient-registration-context';
+import {
+  isUniqueIdentifierTypeForOffline,
+  shouldBlockPatientIdentifierInOfflineMode,
+} from '../../input/custom-input/identifier/utils';
+import { initializeIdentifier, setIdentifierSource } from './id-field.component';
+import { useResourcesContext } from '../../../resources-context';
+import Overlay from '../../ui-components/overlay/overlay.component';
+import styles from './identifier-selection.scss';
+
+interface PatientIdentifierOverlayProps {
+  setFieldValue: (string, PatientIdentifierValue) => void;
+  closeOverlay: () => void;
+}
+
+const PatientIdentifierOverlay: React.FC<PatientIdentifierOverlayProps> = ({ closeOverlay, setFieldValue }) => {
+  const layout = useLayoutType();
+  const { identifierTypes } = useResourcesContext();
+  const { isOffline, values, initialFormValues } = usePatientRegistrationContext();
+  const [unsavedIdentifierTypes, setUnsavedIdentifierTypes] = useState<FormValues['identifiers']>(values.identifiers);
+  const [searchString, setSearchString] = useState('');
+  const { t } = useTranslation();
+  const { defaultPatientIdentifierTypes, identifierTypeOverrides } = useConfig();
+
+  const defaultPatientIdentifierTypesMap = useMemo(() => {
+    const map = {};
+    defaultPatientIdentifierTypes?.forEach((typeUuid) => {
+      map[typeUuid] = true;
+    });
+    return map;
+  }, [defaultPatientIdentifierTypes]);
+
+  useEffect(() => {
+    setUnsavedIdentifierTypes(values.identifiers);
+  }, [values.identifiers]);
+
+  const handleSearch = useCallback((event) => setSearchString(event?.target?.value ?? ''), []);
+
+  const filteredIdentifiers = useMemo(
+    () => identifierTypes?.filter((identifier) => identifier?.name?.toLowerCase().includes(searchString.toLowerCase())),
+    [searchString, identifierTypes],
+  );
+
+  const handleCheckingIdentifier = useCallback(
+    (identifierType: PatientIdentifierType, checked: boolean) =>
+      setUnsavedIdentifierTypes((unsavedIdentifierTypes) => {
+        if (checked) {
+          return {
+            ...unsavedIdentifierTypes,
+            [identifierType.fieldName]: initializeIdentifier(
+              identifierType,
+              values.identifiers[identifierType.fieldName] ??
+                initialFormValues.identifiers[identifierType.fieldName] ??
+                {},
+              identifierTypeOverrides,
+            ),
+          };
+        }
+        if (unsavedIdentifierTypes[identifierType.fieldName]) {
+          return Object.fromEntries(
+            Object.entries(unsavedIdentifierTypes).filter(([fieldName]) => fieldName !== identifierType.fieldName),
+          );
+        }
+        return unsavedIdentifierTypes;
+      }),
+    [initialFormValues.identifiers, values.identifiers, identifierTypeOverrides],
+  );
+
+  const handleSelectingIdentifierSource = (identifierType: PatientIdentifierType, sourceUuid) =>
+    setUnsavedIdentifierTypes((unsavedIdentifierTypes) => ({
+      ...unsavedIdentifierTypes,
+      [identifierType.fieldName]: {
+        ...unsavedIdentifierTypes[identifierType.fieldName],
+        ...setIdentifierSource(
+          identifierType.identifierSources.find((source) => source.uuid === sourceUuid),
+          unsavedIdentifierTypes[identifierType.fieldName].identifierValue,
+          unsavedIdentifierTypes[identifierType.fieldName].initialValue,
+        ),
+      },
+    }));
+
+  const identifierTypeFields = useMemo(
+    () =>
+      filteredIdentifiers.map((identifierType) => {
+        const patientIdentifier = unsavedIdentifierTypes[identifierType.fieldName];
+        const isDisabled =
+          identifierType.isPrimary ||
+          identifierType.required ||
+          defaultPatientIdentifierTypesMap[identifierType.uuid] ||
+          // De-selecting shouldn't be allowed if the identifier was selected earlier and is present in the form.
+          // If the user wants to de-select an identifier-type already present in the form, they'll need to delete the particular identifier from the form itself.
+          values.identifiers[identifierType.fieldName];
+        const isDisabledOffline = isOffline && shouldBlockPatientIdentifierInOfflineMode(identifierType);
+
+        return (
+          <div key={identifierType.uuid} className={styles.space05}>
+            <Checkbox
+              id={identifierType.uuid}
+              value={identifierType.uuid}
+              labelText={identifierType.name}
+              onChange={(e, { checked }) => handleCheckingIdentifier(identifierType, checked)}
+              checked={!!patientIdentifier}
+              disabled={isDisabled || (isOffline && isDisabledOffline)}
+            />
+            {patientIdentifier &&
+              identifierType?.identifierSources?.length > 0 &&
+              /*
+                This check are for the cases when there's an initialValue identifier is assigned
+                to the patient
+                The corresponding flow is like:
+                1. If there's no change to the actual initial identifier, then the source remains null,
+                hence the list of the identifier sources shouldn't be displayed.
+                2. If user wants to edit the patient identifier's value, hence there will be an initialValue,
+                along with a source assigned to itself(only if the identifierType has sources, else there's nothing to worry about), which by
+                default is the first identifierSource
+              */
+              (!patientIdentifier.initialValue || patientIdentifier?.selectedSource) && (
+                <div className={styles.radioGroup}>
+                  <RadioButtonGroup
+                    legendText={t('source', 'Source')}
+                    name={`${identifierType?.fieldName}-identifier-sources`}
+                    defaultSelected={patientIdentifier?.selectedSource?.uuid}
+                    onChange={(sourceUuid: string) => handleSelectingIdentifierSource(identifierType, sourceUuid)}
+                    orientation="vertical">
+                    {identifierType?.identifierSources.map((source) => (
+                      <RadioButton
+                        key={source.uuid}
+                        labelText={source.name}
+                        name={source.uuid}
+                        value={source.uuid}
+                        className={styles.radioButton}
+                        disabled={
+                          isOffline &&
+                          isUniqueIdentifierTypeForOffline(identifierType) &&
+                          source.autoGenerationOption?.manualEntryEnabled
+                        }
+                      />
+                    ))}
+                  </RadioButtonGroup>
+                </div>
+              )}
+          </div>
+        );
+      }),
+    [
+      filteredIdentifiers,
+      unsavedIdentifierTypes,
+      defaultPatientIdentifierTypesMap,
+      values.identifiers,
+      isOffline,
+      handleCheckingIdentifier,
+      t,
+    ],
+  );
+
+  const handleConfiguringIdentifiers = useCallback(() => {
+    setFieldValue('identifiers', unsavedIdentifierTypes);
+    closeOverlay();
+  }, [unsavedIdentifierTypes, setFieldValue, closeOverlay]);
+
+  return (
+    <Overlay
+      close={closeOverlay}
+      header={t('configureIdentifiers', 'Configure identifiers')}
+      buttonsGroup={
+        <ButtonSet className={isDesktop(layout) ? styles.desktop : styles.tablet}>
+          <Button className={styles.button} kind="secondary" onClick={closeOverlay}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button className={styles.button} kind="primary" onClick={handleConfiguringIdentifiers}>
+            {t('configureIdentifiers', 'Configure identifiers')}
+          </Button>
+        </ButtonSet>
+      }>
+      <div>
+        <p className={styles.bodyLong02}>
+          {t('IDInstructions', "Select the identifiers you'd like to add for this patient:")}
+        </p>
+        {identifierTypes.length > 7 && (
+          <div className={styles.space05}>
+            <Search
+              labelText={t('searchIdentifierPlaceholder', 'Search identifier')}
+              placeholder={t('searchIdentifierPlaceholder', 'Search identifier')}
+              onChange={handleSearch}
+              value={searchString}
+            />
+          </div>
+        )}
+        <fieldset>{identifierTypeFields}</fieldset>
+      </div>
+    </Overlay>
+  );
+};
+
+export default PatientIdentifierOverlay;

package/src/patient-registration/field/id/identifier-selection.scss

@@ -0,0 +1,41 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.button {
+  height: layout.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: $ui-02;
+}
+
+.desktop {
+  padding: 0;
+}
+
+.radioGroup {
+  background-color: $ui-01;
+  padding: layout.$spacing-05;
+}
+
+.radioButton {
+  margin: 0 !important;
+  label {
+    height: layout.$spacing-07;
+  }
+}
+
+.space05 {
+  margin: layout.$spacing-05 0;
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+  .radioButton label {
+    height: layout.$spacing-09 !important;
+  }
+}