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

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

@@ -0,0 +1,205 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useConfig } from '@openmrs/esm-framework';
+import { type FieldDefinition } from '../../../config-schema';
+import { useConcept, useConceptAnswers } from '../field.resource';
+import { ObsField } from './obs-field.component';
+
+const mockUseConfig = useConfig as jest.Mock;
+
+jest.mock('../field.resource'); // Mock the useConceptAnswers hook
+
+const mockedUseConcept = useConcept as jest.Mock;
+const mockedUseConceptAnswers = useConceptAnswers as jest.Mock;
+
+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 {
+    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,
+    };
+  } else if (uuid == 'other-countries-uuid') {
+    return {
+      data: [
+        { display: 'Kenya', uuid: 'ke' },
+        { display: 'Uganda', uuid: 'ug' },
+      ],
+      isLoading: false,
+    };
+  } else if (uuid == '') {
+    return {
+      data: [],
+      isLoading: false,
+    };
+  } 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 } }) => React.ReactNode;
+};
+
+jest.mock('formik', () => ({
+  ...(jest.requireActual('formik') as object),
+  Field: jest.fn(({ children }: FieldProps) => <>{children({ field: {}, form: { touched: {}, errors: {} } })}</>),
+  useField: jest.fn(() => [{ value: null }, {}]),
+}));
+
+const textFieldDef: FieldDefinition = {
+  id: 'chief-complaint',
+  type: 'obs',
+  label: '',
+  placeholder: '',
+  showHeading: false,
+  uuid: 'chief-complaint-uuid',
+  validation: {
+    required: false,
+    matches: null,
+  },
+  answerConceptSetUuid: null,
+  customConceptAnswers: [],
+};
+
+const numberFieldDef: FieldDefinition = {
+  id: 'weight',
+  type: 'obs',
+  label: '',
+  placeholder: '',
+  showHeading: false,
+  uuid: 'weight-uuid',
+  validation: {
+    required: false,
+    matches: null,
+  },
+  answerConceptSetUuid: null,
+  customConceptAnswers: [],
+};
+
+const codedFieldDef: FieldDefinition = {
+  id: 'nationality',
+  type: 'obs',
+  label: '',
+  placeholder: '',
+  showHeading: false,
+  uuid: 'nationality-uuid',
+  validation: {
+    required: false,
+    matches: null,
+  },
+  answerConceptSetUuid: null,
+  customConceptAnswers: [],
+};
+
+describe('ObsField', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({ registrationObs: { encounterTypeUuid: 'reg-enc-uuid' } });
+    mockedUseConcept.mockImplementation(useConceptMockImpl);
+    mockedUseConceptAnswers.mockImplementation(useConceptAnswersMockImpl);
+  });
+
+  it("logs an error and doesn't render if no registration encounter type is provided", () => {
+    mockUseConfig.mockReturnValue({ registrationObs: { encounterTypeUuid: null } });
+    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')).toBeNull();
+  });
+
+  it('renders a text box for text concept', () => {
+    render(<ObsField fieldDefinition={textFieldDef} />);
+    // I don't know why the labels aren't in the DOM, but they aren't
+    // expect(screen.getByLabelText("Chief Complaint")).toBeInTheDocument();
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('renders a number box for number concept', () => {
+    render(<ObsField fieldDefinition={numberFieldDef} />);
+    // expect(screen.getByLabelText("Weight (kg)")).toBeInTheDocument();
+    expect(screen.getByRole('spinbutton')).toBeInTheDocument();
+  });
+
+  it('renders a select for a coded concept', () => {
+    render(<ObsField fieldDefinition={codedFieldDef} />);
+    // expect(screen.getByLabelText("Nationality")).toBeInTheDocument();
+    const select = screen.getByRole('combobox');
+    expect(select).toBeInTheDocument();
+    expect(select).toHaveDisplayValue('Select an option');
+  });
+
+  it('select uses answerConcept for answers when it is provided', async () => {
+    const user = userEvent.setup();
+
+    render(<ObsField fieldDefinition={{ ...codedFieldDef, answerConceptSetUuid: 'other-countries-uuid' }} />);
+    // expect(screen.getByLabelText("Nationality")).toBeInTheDocument();
+    const select = screen.getByRole('combobox');
+    expect(select).toBeInTheDocument();
+    await user.selectOptions(select, 'Kenya');
+  });
+
+  it('select uses customConceptAnswers for answers when provided', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <ObsField
+        fieldDefinition={{
+          ...codedFieldDef,
+          customConceptAnswers: [
+            {
+              uuid: 'mozambique-uuid',
+              label: 'Mozambique',
+            },
+          ],
+        }}
+      />,
+    );
+    // expect(screen.getByLabelText("Nationality")).toBeInTheDocument();
+    const select = screen.getByRole('combobox');
+    expect(select).toBeInTheDocument();
+    await user.selectOptions(select, 'Mozambique');
+  });
+});

package/src/patient-registration/field/person-attributes/coded-attributes.component.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Layer, Select, SelectItem } from '@carbon/react';
+import { useConfig } from '@openmrs/esm-framework';
+import { Input } from '../../input/basic-input/input/input.component';
+import { type CodedPersonAttributeConfig } from '../../patient-registration.types';
+import { useConceptAnswers } from '../field.resource';
+import { usePersonAttributeType } from './person-attributes.resource';
+import styles from './../field.scss';
+
+export interface CodedAttributesFieldProps {}
+
+export const CodedAttributesField: React.FC<CodedAttributesFieldProps> = () => {
+  const { codedPersonAttributes } = useConfig();
+
+  return codedPersonAttributes?.length ? (
+    <div>
+      {codedPersonAttributes.map((personAttributeType: CodedPersonAttributeConfig, ind) => (
+        <PersonAttributeField
+          key={ind}
+          personAttributeTypeUuid={personAttributeType.personAttributeUuid}
+          conceptUuid={personAttributeType.conceptUuid}
+        />
+      ))}
+    </div>
+  ) : null;
+};
+
+interface PersonAttributeFieldProps {
+  personAttributeTypeUuid: string;
+  conceptUuid: string;
+}
+
+const PersonAttributeField: React.FC<PersonAttributeFieldProps> = ({ personAttributeTypeUuid, conceptUuid }) => {
+  const { data: personAttributeType, isLoading } = usePersonAttributeType(personAttributeTypeUuid);
+  const { data: conceptAnswers, isLoading: isLoadingConceptAnswers } = useConceptAnswers(conceptUuid);
+
+  return !isLoading ? (
+    <div className={classNames(styles.attributeField, styles.halfWidthInDesktopView)}>
+      {!isLoadingConceptAnswers && conceptAnswers?.length ? (
+        <Layer>
+          <Select
+            id={`person-attribute-${personAttributeTypeUuid}`}
+            name={`attributes.${personAttributeTypeUuid}`}
+            labelText={personAttributeType?.display}>
+            {conceptAnswers.map((answer) => (
+              <SelectItem key={answer.uuid} value={answer.uuid} text={answer.display} />
+            ))}
+          </Select>
+        </Layer>
+      ) : (
+        <Input
+          id={`person-attribute-${personAttributeTypeUuid}`}
+          labelText={personAttributeType?.display}
+          name={`attributes.${personAttributeTypeUuid}`}
+        />
+      )}
+    </div>
+  ) : null;
+};

package/src/patient-registration/field/person-attributes/coded-person-attribute-field.component.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Field } from 'formik';
+import { Layer, Select, SelectItem } from '@carbon/react';
+import { type PersonAttributeTypeResponse } from '../../patient-registration.types';
+import { useConceptAnswers } from '../field.resource';
+import styles from './../field.scss';
+import { reportError } from '@openmrs/esm-framework';
+
+export interface CodedPersonAttributeFieldProps {
+  id: string;
+  personAttributeType: PersonAttributeTypeResponse;
+  answerConceptSetUuid: string;
+  label?: string;
+  customConceptAnswers: Array<{ uuid: string; label?: string }>;
+}
+
+export function CodedPersonAttributeField({
+  id,
+  personAttributeType,
+  answerConceptSetUuid,
+  label,
+  customConceptAnswers,
+}: CodedPersonAttributeFieldProps) {
+  const { data: conceptAnswers, isLoading: isLoadingConceptAnswers } = useConceptAnswers(
+    customConceptAnswers.length ? '' : answerConceptSetUuid,
+  );
+  const { t } = useTranslation();
+  const fieldName = `attributes.${personAttributeType.uuid}`;
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    if (!answerConceptSetUuid && !customConceptAnswers.length) {
+      reportError(
+        t(
+          'codedPersonAttributeNoAnswerSet',
+          `The person attribute field '{{codedPersonAttributeFieldId}}' is of type 'coded' but has been defined without an answer concept set UUID. The 'answerConceptSetUuid' key is required.`,
+          { codedPersonAttributeFieldId: id },
+        ),
+      );
+      setError(true);
+    }
+  }, [answerConceptSetUuid, customConceptAnswers]);
+
+  useEffect(() => {
+    if (!isLoadingConceptAnswers && !customConceptAnswers.length) {
+      if (!conceptAnswers) {
+        reportError(
+          t(
+            'codedPersonAttributeAnswerSetInvalid',
+            `The coded person attribute field '{{codedPersonAttributeFieldId}}' has been defined with an invalid answer concept set UUID '{{answerConceptSetUuid}}'.`,
+            { codedPersonAttributeFieldId: id, answerConceptSetUuid },
+          ),
+        );
+        setError(true);
+      }
+      if (conceptAnswers?.length == 0) {
+        reportError(
+          t(
+            'codedPersonAttributeAnswerSetEmpty',
+            `The coded person attribute field '{{codedPersonAttributeFieldId}}' has been defined with an answer concept set UUID '{{answerConceptSetUuid}}' that does not have any concept answers.`,
+            {
+              codedPersonAttributeFieldId: id,
+              answerConceptSetUuid,
+            },
+          ),
+        );
+        setError(true);
+      }
+    }
+  }, [isLoadingConceptAnswers, conceptAnswers, customConceptAnswers]);
+
+  const answers = useMemo(() => {
+    if (customConceptAnswers.length) {
+      return customConceptAnswers;
+    }
+    return isLoadingConceptAnswers || !conceptAnswers
+      ? []
+      : conceptAnswers
+          .map((answer) => ({ ...answer, label: answer.display }))
+          .sort((a, b) => a.label.localeCompare(b.label));
+  }, [customConceptAnswers, conceptAnswers, isLoadingConceptAnswers]);
+
+  if (error) {
+    return null;
+  }
+
+  return (
+    <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
+      {!isLoadingConceptAnswers ? (
+        <Layer>
+          <Field name={fieldName}>
+            {({ field, form: { touched, errors }, meta }) => {
+              return (
+                <>
+                  <Select
+                    id={id}
+                    name={`person-attribute-${personAttributeType.uuid}`}
+                    labelText={label ?? personAttributeType?.display}
+                    invalid={errors[fieldName] && touched[fieldName]}
+                    {...field}>
+                    <SelectItem value={''} text={t('selectAnOption', 'Select an option')} />
+                    {answers.map((answer) => (
+                      <SelectItem key={answer.uuid} value={answer.uuid} text={answer.label} />
+                    ))}
+                  </Select>
+                </>
+              );
+            }}
+          </Field>
+        </Layer>
+      ) : null}
+    </div>
+  );
+}

package/src/patient-registration/field/person-attributes/coded-person-attribute-field.test.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { useConceptAnswers } from '../field.resource';
+import { CodedPersonAttributeField } from './coded-person-attribute-field.component';
+import { Form, Formik } from 'formik';
+
+jest.mock('formik', () => ({
+  ...jest.requireActual('formik'),
+}));
+
+jest.mock('../field.resource'); // Mock the useConceptAnswers hook
+
+const mockedUseConceptAnswers = useConceptAnswers as jest.Mock;
+
+describe('CodedPersonAttributeField', () => {
+  const conceptAnswers = [
+    { uuid: '1', display: 'Option 1' },
+    { uuid: '2', display: 'Option 2' },
+  ];
+  const personAttributeType = {
+    format: 'org.openmrs.Concept',
+    display: 'Referred by',
+    uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
+    name: '',
+    description: '',
+  };
+  const answerConceptSetUuid = '6682d17f-0777-45e4-a39b-93f77eb3531c';
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockedUseConceptAnswers.mockReturnValue({
+      data: conceptAnswers,
+      isLoading: false,
+    });
+  });
+
+  it('shows error if there is no concept answer set provided', () => {
+    expect(() => {
+      render(
+        <Formik initialValues={{}} onSubmit={() => {}}>
+          <Form>
+            <CodedPersonAttributeField
+              id="attributeId"
+              personAttributeType={personAttributeType}
+              answerConceptSetUuid={null}
+              label={personAttributeType.display}
+              customConceptAnswers={[]}
+            />
+          </Form>
+        </Formik>,
+      );
+    }).toThrow(expect.stringMatching(/has been defined without an answer concept set UUID/i));
+  });
+
+  it('shows error if the concept answer set does not have any concept answers', () => {
+    mockedUseConceptAnswers.mockReturnValue({
+      data: [],
+      isLoading: false,
+    });
+    expect(() => {
+      render(
+        <Formik initialValues={{}} onSubmit={() => {}}>
+          <Form>
+            <CodedPersonAttributeField
+              id="attributeId"
+              personAttributeType={personAttributeType}
+              answerConceptSetUuid={answerConceptSetUuid}
+              label={personAttributeType.display}
+              customConceptAnswers={[]}
+            />
+          </Form>
+        </Formik>,
+      );
+    }).toThrow(expect.stringMatching(/does not have any concept answers/i));
+  });
+
+  it('renders the conceptAnswers as select options', () => {
+    render(
+      <Formik initialValues={{}} onSubmit={() => {}}>
+        <Form>
+          <CodedPersonAttributeField
+            id="attributeId"
+            personAttributeType={personAttributeType}
+            answerConceptSetUuid={answerConceptSetUuid}
+            label={personAttributeType.display}
+            customConceptAnswers={[]}
+          />
+        </Form>
+      </Formik>,
+    );
+
+    expect(screen.getByLabelText(/Referred by/i)).toBeInTheDocument();
+    expect(screen.getByText(/Option 1/i)).toBeInTheDocument();
+    expect(screen.getByText(/Option 2/i)).toBeInTheDocument();
+  });
+
+  it('renders customConceptAnswers as select options when they are provided', () => {
+    render(
+      <Formik initialValues={{}} onSubmit={() => {}}>
+        <Form>
+          <CodedPersonAttributeField
+            id="attributeId"
+            personAttributeType={personAttributeType}
+            answerConceptSetUuid={answerConceptSetUuid}
+            label={personAttributeType.display}
+            customConceptAnswers={[
+              {
+                uuid: 'A',
+                label: 'Special Option A',
+              },
+              {
+                uuid: 'B',
+                label: 'Special Option B',
+              },
+            ]}
+          />
+        </Form>
+      </Formik>,
+    );
+
+    expect(screen.getByLabelText(/Referred by/i)).toBeInTheDocument();
+    expect(screen.getByText(/Special Option A/i)).toBeInTheDocument();
+    expect(screen.getByText(/Special Option B/i)).toBeInTheDocument();
+    expect(screen.queryByText(/Option 1/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Option 2/i)).not.toBeInTheDocument();
+  });
+});

package/src/patient-registration/field/person-attributes/person-attribute-field.component.tsx

@@ -0,0 +1,88 @@
+import React, { useMemo } from 'react';
+import { InlineNotification, TextInputSkeleton, SkeletonText } from '@carbon/react';
+import { type FieldDefinition } from '../../../config-schema';
+import { CodedPersonAttributeField } from './coded-person-attribute-field.component';
+import { usePersonAttributeType } from './person-attributes.resource';
+import { TextPersonAttributeField } from './text-person-attribute-field.component';
+import { useTranslation } from 'react-i18next';
+import styles from '../field.scss';
+
+export interface PersonAttributeFieldProps {
+  fieldDefinition: FieldDefinition;
+}
+
+export function PersonAttributeField({ fieldDefinition }: PersonAttributeFieldProps) {
+  const { data: personAttributeType, isLoading, error } = usePersonAttributeType(fieldDefinition.uuid);
+  const { t } = useTranslation();
+
+  const personAttributeField = useMemo(() => {
+    if (!personAttributeType) {
+      return null;
+    }
+    switch (personAttributeType.format) {
+      case 'java.lang.String':
+        return (
+          <TextPersonAttributeField
+            personAttributeType={personAttributeType}
+            validationRegex={fieldDefinition.validation?.matches ?? ''}
+            label={fieldDefinition.label}
+            required={fieldDefinition.validation?.required ?? false}
+            id={fieldDefinition?.id}
+          />
+        );
+      case 'org.openmrs.Concept':
+        return (
+          <CodedPersonAttributeField
+            personAttributeType={personAttributeType}
+            answerConceptSetUuid={fieldDefinition.answerConceptSetUuid}
+            label={fieldDefinition.label}
+            id={fieldDefinition?.id}
+            customConceptAnswers={fieldDefinition.customConceptAnswers ?? []}
+          />
+        );
+      default:
+        return (
+          <InlineNotification kind="error" title="Error">
+            {t(
+              'unknownPatientAttributeType',
+              'Patient attribute type has unknown format {{personAttributeTypeFormat}}',
+              {
+                personAttributeTypeFormat: personAttributeType.format,
+              },
+            )}
+          </InlineNotification>
+        );
+    }
+  }, [personAttributeType, fieldDefinition, t]);
+
+  if (isLoading) {
+    return (
+      <div>
+        {fieldDefinition.showHeading && <h4 className={styles.productiveHeading02Light}>{fieldDefinition?.label}</h4>}
+        <TextInputSkeleton />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div>
+        {fieldDefinition.showHeading && <h4 className={styles.productiveHeading02Light}>{fieldDefinition?.label}</h4>}
+        <InlineNotification kind="error" title={t('error', 'Error')}>
+          {t('unableToFetch', 'Unable to fetch person attribute type - {{personattributetype}}', {
+            personattributetype: fieldDefinition?.label ?? fieldDefinition?.id,
+          })}
+        </InlineNotification>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {fieldDefinition.showHeading && (
+        <h4 className={styles.productiveHeading02Light}>{fieldDefinition?.label ?? personAttributeType?.display}</h4>
+      )}
+      {personAttributeField}
+    </div>
+  );
+}