@kenyaemr/esm-patient-registration-app 4.3.0

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

@@ -0,0 +1,109 @@
+import React, { useCallback, useContext } 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 { Input } from '../../input/basic-input/input/input.component';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import styles from '../field.scss';
+import { RegistrationConfig } from '../../../config-schema';
+
+const containsNoNumbers = /^([^0-9]*)$/;
+
+function checkNumber(value: string) {
+  if (!containsNoNumbers.test(value)) {
+    return 'numberInNameDubious';
+  }
+
+  return undefined;
+}
+
+export const NameField = () => {
+  const {
+    fieldConfigurations: {
+      name: { displayCapturePhoto },
+    },
+  } = useConfig() as RegistrationConfig;
+  const { t } = useTranslation();
+  const { setCapturePhotoProps, currentPhoto, setFieldValue } = useContext(PatientRegistrationContext);
+  const { fieldConfigurations } = useConfig();
+  const fieldConfigs = fieldConfigurations?.name;
+  const [{ value: unidentified }] = useField('unidentifiedPatient');
+  const nameKnown = !unidentified;
+
+  const onCapturePhoto = useCallback(
+    (dataUri: string, photoDateTime: string) => {
+      if (setCapturePhotoProps) {
+        setCapturePhotoProps({
+          imageData: dataUri,
+          dateTime: photoDateTime,
+        });
+      }
+    },
+    [setCapturePhotoProps],
+  );
+
+  const toggleNameKnown = (e) => {
+    if (e.name === 'known') {
+      setFieldValue('givenName', '');
+      setFieldValue('familyName', '');
+      setFieldValue('unidentifiedPatient', false);
+    } else {
+      setFieldValue('givenName', fieldConfigs.defaultUnknownGivenName);
+      setFieldValue('familyName', fieldConfigs.defaultUnknownFamilyName);
+      setFieldValue('unidentifiedPatient', true);
+    }
+  };
+
+  return (
+    <div>
+      <h4 className={styles.productiveHeading02Light}>{t('fullNameLabelText', 'Full Name')}</h4>
+      <div className={styles.grid}>
+        {displayCapturePhoto && (
+          <ExtensionSlot
+            className={styles.photoExtension}
+            extensionSlotName="capture-patient-photo-slot"
+            state={{ onCapturePhoto, initialState: currentPhoto }}
+          />
+        )}
+
+        <div className={styles.nameField}>
+          <div className={styles.dobContentSwitcherLabel}>
+            <span className={styles.label01}>{t('patientNameKnown', "Patient's Name is Known?")}</span>
+          </div>
+          <ContentSwitcher className={styles.contentSwitcher} onChange={toggleNameKnown}>
+            <Switch name="known" text={t('yes', 'Yes')} />
+            <Switch name="unknown" text={t('no', 'No')} />
+          </ContentSwitcher>
+          {nameKnown && (
+            <>
+              <Input
+                id="givenName"
+                name="givenName"
+                labelText={t('givenNameLabelText', 'First Name')}
+                checkWarning={checkNumber}
+                required
+              />
+              {fieldConfigs.displayMiddleName && (
+                <Input
+                  id="middleName"
+                  name="middleName"
+                  labelText={t('middleNameLabelText', 'Middle Name')}
+                  light
+                  checkWarning={checkNumber}
+                />
+              )}
+              <Input
+                id="familyName"
+                name="familyName"
+                labelText={t('familyNameLabelText', 'Family Name')}
+                checkWarning={checkNumber}
+                required
+              />
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,185 @@
+import React from 'react';
+import { Field } from 'formik';
+import { useTranslation } from 'react-i18next';
+import { InlineNotification, Layer, Select, SelectItem } from '@carbon/react';
+import { useConfig } from '@openmrs/esm-framework';
+import { ConceptResponse } from '../../patient-registration-types';
+import { FieldDefinition, RegistrationConfig } from '../../../config-schema';
+import { Input } from '../../input/basic-input/input/input.component';
+import { useConcept, useConceptAnswers } from '../field.resource';
+import styles from './../field.scss';
+
+export interface ObsFieldProps {
+  fieldDefinition: FieldDefinition;
+}
+
+export function ObsField({ fieldDefinition }: ObsFieldProps) {
+  const { data: concept, isLoading } = useConcept(fieldDefinition.uuid);
+  const config = useConfig() as 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}
+        />
+      );
+    case 'Numeric':
+      return <NumericObsField concept={concept} label={fieldDefinition.label} />;
+    case 'Coded':
+      return (
+        <CodedObsField
+          concept={concept}
+          answerConceptSetUuid={fieldDefinition.answerConceptSetUuid}
+          label={fieldDefinition.label}
+        />
+      );
+    default:
+      return (
+        <InlineNotification kind="error" title="Error">
+          Concept has unknown datatype "{concept.datatype.display}"
+        </InlineNotification>
+      );
+  }
+}
+
+interface TextObsFieldProps {
+  concept: ConceptResponse;
+  validationRegex: string;
+  label: string;
+}
+
+function TextObsField({ concept, validationRegex, label }: 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={`${styles.customField} ${styles.halfWidthInDesktopView}`}>
+      <Field name={fieldName} validate={validateInput}>
+        {({ field, form: { touched, errors }, meta }) => {
+          return (
+            <Input
+              id={fieldName}
+              labelText={label ?? concept.display}
+              invalid={errors[fieldName] && touched[fieldName]}
+              {...field}
+            />
+          );
+        }}
+      </Field>
+    </div>
+  );
+}
+
+interface NumericObsFieldProps {
+  concept: ConceptResponse;
+  label: string;
+}
+
+function NumericObsField({ concept, label }: NumericObsFieldProps) {
+  const { t } = useTranslation();
+
+  const fieldName = `obs.${concept.uuid}`;
+
+  return (
+    <div className={`${styles.customField} ${styles.halfWidthInDesktopView}`}>
+      <Field name={fieldName}>
+        {({ field, form: { touched, errors }, meta }) => {
+          return (
+            <Input
+              id={fieldName}
+              labelText={label ?? concept.display}
+              invalid={errors[fieldName] && touched[fieldName]}
+              type="number"
+              {...field}
+            />
+          );
+        }}
+      </Field>
+    </div>
+  );
+}
+
+interface CodedObsFieldProps {
+  concept: ConceptResponse;
+  answerConceptSetUuid?: string;
+  label?: string;
+}
+
+function CodedObsField({ concept, answerConceptSetUuid, label }: CodedObsFieldProps) {
+  const config = useConfig() as RegistrationConfig;
+  const { data: conceptAnswers, isLoading: isLoadingConceptAnswers } = useConceptAnswers(
+    answerConceptSetUuid ?? concept.uuid,
+  );
+
+  const fieldName = `obs.${concept.uuid}`;
+  const fieldDefinition = config?.fieldDefinitions?.filter((def) => def.type === 'obs' && def.uuid === concept.uuid)[0];
+
+  return (
+    <div className={`${styles.customField} ${styles.halfWidthInDesktopView}`}>
+      {!isLoadingConceptAnswers ? (
+        <Field name={fieldName}>
+          {({ field, form: { touched, errors }, meta }) => {
+            if (fieldDefinition?.customConceptAnswers?.length) {
+              return (
+                <Select
+                  id={fieldName}
+                  name={fieldName}
+                  labelText={label ?? concept?.display}
+                  light
+                  invalid={errors[fieldName] && touched[fieldName]}
+                  {...field}>
+                  <SelectItem key={`no-answer-select-item-${fieldName}`} value={''} text="" />
+                  {fieldDefinition?.customConceptAnswers.map((answer) => (
+                    <SelectItem key={answer.uuid} value={answer.uuid} text={answer.label} />
+                  ))}
+                </Select>
+              );
+            }
+            return (
+              <Layer>
+                <Select
+                  id={fieldName}
+                  name={fieldName}
+                  labelText={label ?? concept?.display}
+                  invalid={errors[fieldName] && touched[fieldName]}
+                  {...field}>
+                  <SelectItem key={`no-answer-select-item-${fieldName}`} value={''} text="" />
+                  {conceptAnswers.map((answer) => (
+                    <SelectItem key={answer.uuid} value={answer.uuid} text={answer.display} />
+                  ))}
+                </Select>
+              </Layer>
+            );
+          }}
+        </Field>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,127 @@
+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 { FieldDefinition } from '../../../config-schema';
+import { ObsField } from './obs-field.component';
+
+const mockUseConfig = useConfig as jest.Mock;
+
+// The UUIDs in this test all refer to ones that are in `__mocks__/field.resource.ts`
+jest.mock('../field.resource');
+
+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: '',
+  uuid: 'chief-complaint-uuid',
+  validation: {
+    required: false,
+    matches: null,
+  },
+  answerConceptSetUuid: null,
+  customConceptAnswers: [
+    {
+      uuid: 'concept-uuid',
+      label: '',
+    },
+  ],
+};
+
+const numberFieldDef: FieldDefinition = {
+  id: 'weight',
+  type: 'obs',
+  label: '',
+  placeholder: '',
+  uuid: 'weight-uuid',
+  validation: {
+    required: false,
+    matches: null,
+  },
+  answerConceptSetUuid: null,
+  customConceptAnswers: [
+    {
+      uuid: 'concept-uuid',
+      label: '',
+    },
+  ],
+};
+
+const codedFieldDef: FieldDefinition = {
+  id: 'nationality',
+  type: 'obs',
+  label: '',
+  placeholder: '',
+  uuid: 'nationality-uuid',
+  validation: {
+    required: false,
+    matches: null,
+  },
+  answerConceptSetUuid: null,
+  customConceptAnswers: [
+    {
+      uuid: 'concept-uuid',
+      label: 'Kenya',
+    },
+  ],
+};
+
+describe('ObsField', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({ registrationObs: { encounterTypeUuid: 'reg-enc-uuid' } });
+  });
+
+  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.*configure/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('');
+  });
+
+  it('select uses answerConcept for answers when it is provided', async () => {
+    mockUseConfig.mockReturnValue({
+      registrationObs: { encounterTypeUuid: 'reg-enc-uuid' },
+      fieldDefinitions: [codedFieldDef],
+    });
+
+    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');
+  });
+});

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Layer, Select, SelectItem } from '@carbon/react';
+import { useConfig } from '@openmrs/esm-framework';
+import { Input } from '../../input/basic-input/input/input.component';
+import { 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={`${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,68 @@
+import React from 'react';
+import { Layer, Select, SelectItem } from '@carbon/react';
+import { Input } from '../../input/basic-input/input/input.component';
+import { PersonAttributeTypeResponse } from '../../patient-registration-types';
+import { useConceptAnswers } from '../field.resource';
+import styles from './../field.scss';
+import { useTranslation } from 'react-i18next';
+import { Field } from 'formik';
+
+export interface CodedPersonAttributeFieldProps {
+  id: string;
+  personAttributeType: PersonAttributeTypeResponse;
+  answerConceptSetUuid: string;
+  label?: string;
+}
+
+export function CodedPersonAttributeField({
+  id,
+  personAttributeType,
+  answerConceptSetUuid,
+  label,
+}: CodedPersonAttributeFieldProps) {
+  const { data: conceptAnswers, isLoading: isLoadingConceptAnswers } = useConceptAnswers(answerConceptSetUuid);
+  const { t } = useTranslation();
+  const fieldName = `attributes.${personAttributeType.uuid}`;
+
+  return (
+    <div className={`${styles.customField} ${styles.halfWidthInDesktopView}`}>
+      {!isLoadingConceptAnswers && conceptAnswers?.length ? (
+        <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={null} text={t('selectAnOption', 'Select an option')} />
+                  {conceptAnswers.map((answer) => (
+                    <SelectItem key={answer.uuid} value={answer.uuid} text={answer.display} />
+                  ))}
+                </Select>
+              );
+            }}
+          </Field>
+        </Layer>
+      ) : (
+        <Layer>
+          <Field name={fieldName}>
+            {({ field, form: { touched, errors }, meta }) => {
+              return (
+                <Input
+                  id={id}
+                  name={`person-attribute-${personAttributeType.uuid}`}
+                  labelText={label ?? personAttributeType?.display}
+                  invalid={errors[fieldName] && touched[fieldName]}
+                  {...field}
+                />
+              );
+            }}
+          </Field>
+        </Layer>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,81 @@
+import React, { useMemo } from 'react';
+import { InlineNotification, TextInputSkeleton, SkeletonText } from '@carbon/react';
+import { 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}
+            id={fieldDefinition?.id}
+          />
+        );
+      case 'org.openmrs.Concept':
+        return (
+          <CodedPersonAttributeField
+            personAttributeType={personAttributeType}
+            answerConceptSetUuid={fieldDefinition.answerConceptSetUuid}
+            label={fieldDefinition.label}
+            id={fieldDefinition?.id}
+          />
+        );
+      default:
+        return (
+          <InlineNotification kind="error" title="Error">
+            Patient attribute type has unknown format "{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>
+  );
+}

package/src/patient-registration/field/person-attributes/person-attributes.resource.tsx

@@ -0,0 +1,20 @@
+import { FetchResponse, openmrsFetch, showToast } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+import { PersonAttributeTypeResponse } from '../../patient-registration-types';
+
+export function usePersonAttributeType(personAttributeTypeUuid: string): {
+  data: PersonAttributeTypeResponse;
+  isLoading: boolean;
+  error: any;
+} {
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse<PersonAttributeTypeResponse>>(
+    `/ws/rest/v1/personattributetype/${personAttributeTypeUuid}`,
+    openmrsFetch,
+  );
+
+  return {
+    data: data?.data,
+    isLoading,
+    error,
+  };
+}