@olaboot/esm-patient-registration-app 9.2.0

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

@@ -0,0 +1,148 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ContentSwitcher, Switch } from '@carbon/react';
+import { useField } from 'formik';
+import { ExtensionSlot, useConfig } from '@openmrs/esm-framework';
+import { type RegistrationConfig } from '../../../config-schema';
+import { usePatientRegistrationContext } from '../../patient-registration-context';
+import { Input } from '../../input/basic-input/input/input.component';
+import styles from '../field.scss';
+
+export const unidentifiedPatientAttributeTypeUuid = '8b56eac7-5c76-4b9c-8c6f-1deab8d3fc47';
+const containsNoNumbers = /^([^0-9]*)$/;
+
+function checkNumber(value: string) {
+  if (!containsNoNumbers.test(value)) {
+    return 'numberInNameDubious';
+  }
+
+  return undefined;
+}
+
+export const NameField = () => {
+  const { t } = useTranslation();
+  const { setCapturePhotoProps, currentPhoto, setFieldValue, setFieldTouched } = usePatientRegistrationContext();
+
+  const {
+    fieldConfigurations: {
+      name: {
+        displayCapturePhoto,
+        allowUnidentifiedPatients,
+        defaultUnknownGivenName,
+        defaultUnknownFamilyName,
+        displayMiddleName,
+        displayReverseFieldOrder,
+      },
+    },
+  } = useConfig<RegistrationConfig>();
+
+  const [{ value: isPatientUnknownValue }, , { setValue: setUnknownPatient }] = useField<string>(
+    `attributes.${unidentifiedPatientAttributeTypeUuid}`,
+  );
+
+  const isPatientUnknown = isPatientUnknownValue === 'true';
+
+  const onCapturePhoto = useCallback(
+    (dataUri: string, photoDateTime: string) => {
+      if (setCapturePhotoProps) {
+        setCapturePhotoProps({
+          imageData: dataUri,
+          dateTime: photoDateTime,
+        });
+        setFieldTouched('photo', true, false);
+      }
+    },
+    [setCapturePhotoProps, setFieldTouched],
+  );
+
+  const toggleNameKnown = (e) => {
+    if (e.name === 'known') {
+      setFieldValue('givenName', '');
+      setFieldValue('familyName', '');
+      setUnknownPatient('false');
+    } else {
+      setFieldValue('givenName', defaultUnknownGivenName);
+      setFieldValue('familyName', defaultUnknownFamilyName);
+      setUnknownPatient('true');
+    }
+    setFieldTouched('givenName', true);
+    setFieldTouched('familyName', true);
+    setFieldTouched(`attributes.${unidentifiedPatientAttributeTypeUuid}`, true, false);
+  };
+
+  const firstNameField = (
+    <Input
+      id="givenName"
+      name="givenName"
+      labelText={t('givenNameLabelText', 'First Name')}
+      checkWarning={checkNumber}
+      required
+    />
+  );
+
+  const middleNameField = displayMiddleName && (
+    <Input
+      id="middleName"
+      name="middleName"
+      labelText={t('middleNameLabelText', 'Middle Name')}
+      checkWarning={checkNumber}
+    />
+  );
+
+  const familyNameField = (
+    <Input
+      id="familyName"
+      name="familyName"
+      labelText={t('familyNameLabelText', 'Family Name')}
+      checkWarning={checkNumber}
+      required
+    />
+  );
+
+  return (
+    <div>
+      <h4 className={styles.productiveHeading02Light}>{t('fullNameLabelText', 'Full Name')}</h4>
+      <div className={styles.grid}>
+        {displayCapturePhoto && (
+          <ExtensionSlot
+            className={styles.photoExtension}
+            name="capture-patient-photo-slot"
+            state={{ onCapturePhoto, initialState: currentPhoto }}
+          />
+        )}
+
+        <div className={styles.nameField}>
+          {(allowUnidentifiedPatients || isPatientUnknown) && (
+            <>
+              <div className={styles.dobContentSwitcherLabel}>
+                <span className={styles.label01}>{t('patientNameKnown', "Patient's Name is Known?")}</span>
+              </div>
+              <ContentSwitcher
+                className={styles.contentSwitcher}
+                size="md"
+                selectedIndex={isPatientUnknown ? 1 : 0}
+                onChange={toggleNameKnown}>
+                <Switch name="known" text={t('yes', 'Yes')} />
+                <Switch name="unknown" text={t('no', 'No')} />
+              </ContentSwitcher>
+            </>
+          )}
+          {!isPatientUnknown &&
+            (!displayReverseFieldOrder ? (
+              <>
+                {firstNameField}
+                {middleNameField}
+                {familyNameField}
+              </>
+            ) : (
+              <>
+                {familyNameField}
+                {middleNameField}
+                {firstNameField}
+              </>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,261 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { Field } from 'formik';
+import { useTranslation } from 'react-i18next';
+import { InlineNotification, Layer, Select, SelectItem } from '@carbon/react';
+import { OpenmrsDatePicker, useConfig } from '@openmrs/esm-framework';
+import { type ConceptResponse } from '../../patient-registration.types';
+import { type FieldDefinition, type RegistrationConfig } from '../../../config-schema';
+import { Input } from '../../input/basic-input/input/input.component';
+import { useConcept, useConceptAnswers } from '../field.resource';
+import { usePatientRegistrationContext } from '../../patient-registration-context';
+import styles from './../field.scss';
+
+export interface ObsFieldProps {
+  fieldDefinition: FieldDefinition;
+}
+
+export function ObsField({ fieldDefinition }: ObsFieldProps) {
+  const { t } = useTranslation();
+  const { data: concept, isLoading } = useConcept(fieldDefinition.uuid);
+  const config = useConfig<RegistrationConfig>();
+
+  if (!config.registrationObs.encounterTypeUuid) {
+    console.error(
+      'The registration form has been configured to have obs fields, ' +
+        'but no registration encounter type has been configured. Obs fields ' +
+        'will not be displayed.',
+    );
+    return null;
+  }
+
+  if (isLoading) {
+    return null;
+  }
+
+  switch (concept.datatype.display) {
+    case 'Text':
+      return (
+        <TextObsField
+          concept={concept}
+          validationRegex={fieldDefinition.validation.matches}
+          label={fieldDefinition.label}
+          required={fieldDefinition.validation.required}
+        />
+      );
+    case 'Numeric':
+      return (
+        <NumericObsField
+          concept={concept}
+          label={fieldDefinition.label}
+          required={fieldDefinition.validation.required}
+        />
+      );
+    case 'Date':
+      return (
+        <DateObsField
+          concept={concept}
+          label={fieldDefinition.label}
+          required={fieldDefinition.validation.required}
+          allowPastDates={fieldDefinition.allowPastDates}
+          allowFutureDates={fieldDefinition.allowFutureDates}
+        />
+      );
+    case 'Coded':
+      return (
+        <CodedObsField
+          concept={concept}
+          answerConceptSetUuid={fieldDefinition.answerConceptSetUuid}
+          label={fieldDefinition.label}
+          required={fieldDefinition.validation.required}
+          customConceptAnswers={fieldDefinition.customConceptAnswers}
+        />
+      );
+    default:
+      return (
+        <InlineNotification kind="error" title="Error">
+          {t(
+            'obsFieldUnknownDatatype',
+            `Concept for obs field '{{fieldDefinitionId}}' has unknown datatype '{{datatypeName}}'`,
+            { fieldDefinitionId: fieldDefinition.id, datatypeName: concept.datatype.display },
+          )}
+        </InlineNotification>
+      );
+  }
+}
+
+interface TextObsFieldProps {
+  concept: ConceptResponse;
+  validationRegex: string;
+  label: string;
+  required?: boolean;
+}
+
+function TextObsField({ concept, validationRegex, label, required }: TextObsFieldProps) {
+  const { t } = useTranslation();
+
+  const validateInput = (value: string) => {
+    if (!value || !validationRegex || validationRegex === '' || typeof validationRegex !== 'string' || value === '') {
+      return;
+    }
+    const regex = new RegExp(validationRegex);
+    if (regex.test(value)) {
+      return;
+    } else {
+      return t('invalidInput', 'Invalid Input');
+    }
+  };
+
+  const fieldName = `obs.${concept.uuid}`;
+  return (
+    <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
+      <Field name={fieldName} validate={validateInput}>
+        {({ field, form: { touched, errors }, meta }) => {
+          return (
+            <Input
+              id={fieldName}
+              labelText={label ?? concept.display}
+              required={required}
+              invalid={errors[fieldName] && touched[fieldName]}
+              {...field}
+            />
+          );
+        }}
+      </Field>
+    </div>
+  );
+}
+
+interface NumericObsFieldProps {
+  concept: ConceptResponse;
+  label: string;
+  required?: boolean;
+}
+
+function NumericObsField({ concept, label, required }: NumericObsFieldProps) {
+  const fieldName = `obs.${concept.uuid}`;
+
+  return (
+    <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
+      <Field name={fieldName}>
+        {({ field, form: { touched, errors }, meta }) => {
+          return (
+            <Input
+              id={fieldName}
+              labelText={label ?? concept.display}
+              required={required}
+              invalid={errors[fieldName] && touched[fieldName]}
+              type="number"
+              {...field}
+            />
+          );
+        }}
+      </Field>
+    </div>
+  );
+}
+
+interface DateObsFieldProps {
+  concept: ConceptResponse;
+  label: string;
+  required?: boolean;
+  allowPastDates?: boolean;
+  allowFutureDates?: boolean;
+}
+
+function DateObsField({ concept, label, required, allowPastDates, allowFutureDates }: DateObsFieldProps) {
+  const { t } = useTranslation();
+  const fieldName = `obs.${concept.uuid}`;
+  const { setFieldValue } = usePatientRegistrationContext();
+  const futureDatesAllowed = allowFutureDates ?? true;
+  const pastDatesAllowed = allowPastDates ?? true;
+
+  const onDateChange = (date: Date) => {
+    setFieldValue(fieldName, date);
+  };
+
+  return (
+    <Layer>
+      <div className={styles.dobField}>
+        <Field name={fieldName}>
+          {({ field, form: { touched, errors }, meta }) => {
+            return (
+              <>
+                <OpenmrsDatePicker
+                  id={fieldName}
+                  {...field}
+                  isRequired={required}
+                  onChange={onDateChange}
+                  labelText={label ?? concept.display}
+                  isInvalid={errors[fieldName] && touched[fieldName]}
+                  invalidText={t(meta.error)}
+                  value={field.value}
+                  minDate={!pastDatesAllowed ? new Date() : undefined}
+                  maxDate={!futureDatesAllowed ? new Date() : undefined}
+                />
+              </>
+            );
+          }}
+        </Field>
+      </div>
+    </Layer>
+  );
+}
+
+interface CodedObsFieldProps {
+  concept: ConceptResponse;
+  answerConceptSetUuid?: string;
+  label?: string;
+  required?: boolean;
+  customConceptAnswers: Array<{ uuid: string; label?: string }>;
+}
+
+function CodedObsField({ concept, answerConceptSetUuid, label, required, customConceptAnswers }: CodedObsFieldProps) {
+  const { t } = useTranslation();
+  const fieldName = `obs.${concept.uuid}`;
+
+  const { data: conceptAnswers, isLoading: isLoadingConceptAnswers } = useConceptAnswers(
+    customConceptAnswers.length ? '' : answerConceptSetUuid ?? concept.uuid,
+  );
+
+  const answers = useMemo(
+    () =>
+      customConceptAnswers.length
+        ? customConceptAnswers
+        : isLoadingConceptAnswers
+          ? []
+          : conceptAnswers.map((answer) => ({ ...answer, label: answer.display })),
+    [customConceptAnswers, conceptAnswers, isLoadingConceptAnswers],
+  );
+
+  return (
+    <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
+      {!isLoadingConceptAnswers ? (
+        <Field name={fieldName}>
+          {({ field, form: { touched, errors }, meta }) => {
+            return (
+              <Layer>
+                <Select
+                  id={fieldName}
+                  name={fieldName}
+                  labelText={label ?? concept?.display}
+                  required={required}
+                  invalid={errors[fieldName] && touched[fieldName]}
+                  {...field}>
+                  <SelectItem
+                    key={`no-answer-select-item-${fieldName}`}
+                    value={''}
+                    text={t('selectAnOption', 'Select an option')}
+                  />
+                  {answers.map((answer) => (
+                    <SelectItem key={answer.uuid} value={answer.uuid} text={answer.label} />
+                  ))}
+                </Select>
+              </Layer>
+            );
+          }}
+        </Field>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,299 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { esmPatientRegistrationSchema, type FieldDefinition, type RegistrationConfig } from '../../../config-schema';
+import { useConcept, useConceptAnswers } from '../field.resource';
+import { ObsField } from './obs-field.component';
+import {
+  PatientRegistrationContextProvider,
+  type PatientRegistrationContextProps,
+} from '../../patient-registration-context';
+import { mockOpenmrsId, mockPatient } from '__mocks__';
+
+const mockUseConcept = jest.mocked(useConcept);
+const mockUseConceptAnswers = jest.mocked(useConceptAnswers);
+const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
+
+jest.mock('../field.resource');
+
+const useConceptMockImpl = (uuid: string) => {
+  let data;
+  if (uuid == 'weight-uuid') {
+    data = {
+      uuid: 'weight-uuid',
+      display: 'Weight (kg)',
+      datatype: { display: 'Numeric', uuid: 'num' },
+      answers: [],
+      setMembers: [],
+    };
+  } else if (uuid == 'chief-complaint-uuid') {
+    data = {
+      uuid: 'chief-complaint-uuid',
+      display: 'Chief Complaint',
+      datatype: { display: 'Text', uuid: 'txt' },
+      answers: [],
+      setMembers: [],
+    };
+  } else if (uuid == 'nationality-uuid') {
+    data = {
+      uuid: 'nationality-uuid',
+      display: 'Nationality',
+      datatype: { display: 'Coded', uuid: 'cdd' },
+      answers: [
+        { display: 'USA', uuid: 'usa' },
+        { display: 'Mexico', uuid: 'mex' },
+      ],
+      setMembers: [],
+    };
+  } else if (uuid == 'vaccination-date-uuid') {
+    data = {
+      uuid: 'vaccination-date-uuid',
+      display: 'Vaccination Date',
+      datatype: { display: 'Date', uuid: 'date' },
+      answers: [],
+      setMembers: [],
+    };
+  } else {
+    throw Error(`Programming error, you probably didn't mean to do this: unknown concept uuid '${uuid}'`);
+  }
+  return {
+    data: data ?? null,
+    isLoading: !data,
+  };
+};
+
+const useConceptAnswersMockImpl = (uuid: string) => {
+  if (uuid == 'nationality-uuid') {
+    return {
+      data: [
+        { display: 'USA', uuid: 'usa' },
+        { display: 'Mexico', uuid: 'mex' },
+      ],
+      isLoading: false,
+      error: null,
+    };
+  } else if (uuid == 'other-countries-uuid') {
+    return {
+      data: [
+        { display: 'Kenya', uuid: 'ke' },
+        { display: 'Uganda', uuid: 'ug' },
+      ],
+      isLoading: false,
+      error: null,
+    };
+  } else if (uuid == '') {
+    return {
+      data: [],
+      isLoading: false,
+      error: null,
+    };
+  } else {
+    throw Error(`Programming error, you probably didn't mean to do this: unknown concept answer set uuid '${uuid}'`);
+  }
+};
+
+type FieldProps = {
+  children: ({ field, form: { touched, errors }, meta }) => React.ReactNode;
+};
+
+jest.mock('formik', () => ({
+  ...(jest.requireActual('formik') as object),
+  Field: jest.fn(({ children }: FieldProps) => (
+    <>{children({ field: {}, form: { touched: {}, errors: {} }, meta: { error: undefined } })}</>
+  )),
+  useField: jest.fn(() => [{ value: null }, {}]),
+}));
+
+const textFieldDef: FieldDefinition = {
+  id: 'chief-complaint',
+  type: 'obs',
+  label: 'Chief complaint',
+  placeholder: '',
+  showHeading: false,
+  uuid: 'chief-complaint-uuid',
+  validation: {
+    required: false,
+    matches: null,
+  },
+  answerConceptSetUuid: null,
+  customConceptAnswers: [],
+};
+
+const numberFieldDef: FieldDefinition = {
+  id: 'weight',
+  type: 'obs',
+  label: 'Weight',
+  placeholder: '',
+  showHeading: false,
+  uuid: 'weight-uuid',
+  validation: {
+    required: false,
+    matches: null,
+  },
+  answerConceptSetUuid: null,
+  customConceptAnswers: [],
+};
+
+const dateFieldDef: FieldDefinition = {
+  id: 'vac_date',
+  type: 'obs',
+  label: 'Vaccination date',
+  placeholder: '',
+  showHeading: false,
+  uuid: 'vaccination-date-uuid',
+  validation: {
+    required: false,
+    matches: null,
+  },
+  answerConceptSetUuid: null,
+  customConceptAnswers: [],
+};
+
+const codedFieldDef: FieldDefinition = {
+  id: 'nationality',
+  type: 'obs',
+  label: 'Nationality',
+  placeholder: '',
+  showHeading: false,
+  uuid: 'nationality-uuid',
+  validation: {
+    required: false,
+    matches: null,
+  },
+  answerConceptSetUuid: null,
+  customConceptAnswers: [],
+};
+
+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,
+  deathTime: '',
+  deathTimeFormat: 'AM' as const,
+  nonCodedCauseOfDeath: '',
+};
+
+const initialContextValues: PatientRegistrationContextProps = {
+  currentPhoto: null,
+  inEditMode: false,
+  identifierTypes: [],
+  initialFormValues: mockInitialFormValues,
+  isOffline: false,
+  setCapturePhotoProps: jest.fn(),
+  setFieldValue: jest.fn(),
+  setInitialFormValues: jest.fn(),
+  validationSchema: null,
+  values: mockInitialFormValues,
+  setFieldTouched: jest.fn(),
+};
+
+describe('ObsField', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      registrationObs: { encounterTypeUuid: 'reg-enc-uuid' },
+    } as RegistrationConfig);
+    mockUseConcept.mockImplementation(useConceptMockImpl);
+    mockUseConceptAnswers.mockImplementation(useConceptAnswersMockImpl);
+  });
+
+  it("logs an error and doesn't render if no registration encounter type is provided", () => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      registrationObs: { encounterTypeUuid: null },
+    } as RegistrationConfig);
+
+    console.error = jest.fn();
+    render(<ObsField fieldDefinition={textFieldDef} />);
+    expect(console.error).toHaveBeenCalledWith(
+      expect.stringMatching(/no registration encounter type has been configured/i),
+    );
+    expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+  });
+
+  it('renders a text box for text concept', () => {
+    render(<ObsField fieldDefinition={textFieldDef} />);
+
+    expect(screen.getByRole('textbox', { name: 'Chief complaint (optional)' })).toBeInTheDocument();
+  });
+
+  it('renders a number box for number concept', () => {
+    render(<ObsField fieldDefinition={numberFieldDef} />);
+
+    expect(screen.getByRole('spinbutton', { name: 'Weight (optional)' })).toBeInTheDocument();
+  });
+
+  it('renders a datepicker for date concept', async () => {
+    const user = userEvent.setup();
+    render(
+      <PatientRegistrationContextProvider value={initialContextValues}>
+        <ObsField fieldDefinition={dateFieldDef} />
+      </PatientRegistrationContextProvider>,
+    );
+
+    expect(screen.getByText(/vaccination date/i)).toBeInTheDocument();
+
+    const dateInput = screen.getByLabelText(/vaccination date/i);
+    expect(dateInput).toBeInTheDocument();
+    await user.clear(dateInput);
+    await user.type(dateInput, '28/05/2024');
+    // FIXME: Make the date input work
+    // expect(dateInput).toHaveValue('28/05/2024');
+  });
+
+  it('renders a select for a coded concept', () => {
+    render(<ObsField fieldDefinition={codedFieldDef} />);
+
+    expect(screen.getByRole('combobox', { name: 'Nationality' })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'USA' })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Mexico' })).toBeInTheDocument();
+  });
+
+  it('select uses answerConcept for answers when it is provided', async () => {
+    render(<ObsField fieldDefinition={{ ...codedFieldDef, answerConceptSetUuid: 'other-countries-uuid' }} />);
+
+    expect(screen.getByRole('combobox', { name: 'Nationality' })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Kenya' })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Uganda' })).toBeInTheDocument();
+    expect(screen.queryByRole('option', { name: 'USA' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('option', { name: 'Mexico' })).not.toBeInTheDocument();
+  });
+
+  it('select uses customConceptAnswers for answers when provided', async () => {
+    render(
+      <ObsField
+        fieldDefinition={{
+          ...codedFieldDef,
+          customConceptAnswers: [
+            {
+              uuid: 'mozambique-uuid',
+              label: 'Mozambique',
+            },
+          ],
+        }}
+      />,
+    );
+
+    expect(screen.getByRole('combobox', { name: 'Nationality' })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Mozambique' })).toBeInTheDocument();
+    expect(screen.queryByRole('option', { name: 'Uganda' })).not.toBeInTheDocument();
+  });
+});