@kenyaemr/esm-patient-registration-app 5.2.2 → 6.0.0

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

@@ -2,17 +2,86 @@ 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 { type FieldDefinition } from '../../../config-schema';
+import { useConcept, useConceptAnswers } from '../field.resource';
 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');
+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: {} } })}</>),
@@ -24,18 +93,14 @@ const textFieldDef: FieldDefinition = {
   type: 'obs',
   label: '',
   placeholder: '',
+  showHeading: false,
   uuid: 'chief-complaint-uuid',
   validation: {
     required: false,
     matches: null,
   },
   answerConceptSetUuid: null,
-  customConceptAnswers: [
-    {
-      uuid: 'concept-uuid',
-      label: '',
-    },
-  ],
+  customConceptAnswers: [],
 };
 
 const numberFieldDef: FieldDefinition = {
@@ -43,18 +108,14 @@ const numberFieldDef: FieldDefinition = {
   type: 'obs',
   label: '',
   placeholder: '',
+  showHeading: false,
   uuid: 'weight-uuid',
   validation: {
     required: false,
     matches: null,
   },
   answerConceptSetUuid: null,
-  customConceptAnswers: [
-    {
-      uuid: 'concept-uuid',
-      label: '',
-    },
-  ],
+  customConceptAnswers: [],
 };
 
 const codedFieldDef: FieldDefinition = {
@@ -62,30 +123,30 @@ const codedFieldDef: FieldDefinition = {
   type: 'obs',
   label: '',
   placeholder: '',
+  showHeading: false,
   uuid: 'nationality-uuid',
   validation: {
     required: false,
     matches: null,
   },
   answerConceptSetUuid: null,
-  customConceptAnswers: [
-    {
-      uuid: 'concept-uuid',
-      label: 'Kenya',
-    },
-  ],
+  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.*configure/i));
+    expect(console.error).toHaveBeenCalledWith(
+      expect.stringMatching(/no registration encounter type has been configured/i),
+    );
     expect(screen.queryByRole('textbox')).toBeNull();
   });
 
@@ -107,15 +168,10 @@ describe('ObsField', () => {
     // expect(screen.getByLabelText("Nationality")).toBeInTheDocument();
     const select = screen.getByRole('combobox');
     expect(select).toBeInTheDocument();
-    expect(select).toHaveDisplayValue('');
+    expect(select).toHaveDisplayValue('Select an option');
   });
 
   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' }} />);
@@ -124,4 +180,26 @@ describe('ObsField', () => {
     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

@@ -3,7 +3,7 @@ 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 { CodedPersonAttributeConfig } from '../../patient-registration.types';
+import { type CodedPersonAttributeConfig } from '../../patient-registration.types';
 import { useConceptAnswers } from '../field.resource';
 import { usePersonAttributeType } from './person-attributes.resource';
 import styles from './../field.scss';

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

@@ -1,18 +1,19 @@
-import React from 'react';
+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 { Input } from '../../input/basic-input/input/input.component';
-import { PersonAttributeTypeResponse } from '../../patient-registration.types';
+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({
@@ -20,14 +21,75 @@ export function CodedPersonAttributeField({
   personAttributeType,
   answerConceptSetUuid,
   label,
+  customConceptAnswers,
 }: CodedPersonAttributeFieldProps) {
-  const { data: conceptAnswers, isLoading: isLoadingConceptAnswers } = useConceptAnswers(answerConceptSetUuid);
+  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 && conceptAnswers?.length ? (
+      {!isLoadingConceptAnswers ? (
         <Layer>
           <Field name={fieldName}>
             {({ field, form: { touched, errors }, meta }) => {
@@ -40,8 +102,8 @@ export function CodedPersonAttributeField({
                     invalid={errors[fieldName] && touched[fieldName]}
                     {...field}>
                     <SelectItem value={''} text={t('selectAnOption', 'Select an option')} />
-                    {conceptAnswers.map((answer) => (
-                      <SelectItem key={answer.uuid} value={answer.uuid} text={answer.display} />
+                    {answers.map((answer) => (
+                      <SelectItem key={answer.uuid} value={answer.uuid} text={answer.label} />
                     ))}
                   </Select>
                 </>
@@ -49,23 +111,7 @@ export function CodedPersonAttributeField({
             }}
           </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>
-      )}
+      ) : null}
     </div>
   );
 }

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

@@ -21,6 +21,8 @@ describe('CodedPersonAttributeField', () => {
     format: 'org.openmrs.Concept',
     display: 'Referred by',
     uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
+    name: '',
+    description: '',
   };
   const answerConceptSetUuid = '6682d17f-0777-45e4-a39b-93f77eb3531c';
 
@@ -32,31 +34,47 @@ describe('CodedPersonAttributeField', () => {
     });
   });
 
-  it('renders the Select component when conceptAnswers are available', () => {
-    render(
-      <Formik initialValues={{}} onSubmit={() => {}}>
-        <Form>
-          <CodedPersonAttributeField
-            id="attributeId"
-            personAttributeType={personAttributeType}
-            answerConceptSetUuid={answerConceptSetUuid}
-            label={personAttributeType.display}
-          />
-        </Form>
-      </Formik>,
-    );
-
-    expect(screen.getByLabelText(/Referred by/i)).toBeInTheDocument();
-    expect(screen.getByText(/Option 1/i)).toBeInTheDocument();
-    expect(screen.getByText(/Option 2/i)).toBeInTheDocument();
+  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('renders the Input component when conceptAnswers are not available', () => {
-    mockedUseConceptAnswers.mockReturnValueOnce({
-      data: null,
+  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>
@@ -65,23 +83,18 @@ describe('CodedPersonAttributeField', () => {
             personAttributeType={personAttributeType}
             answerConceptSetUuid={answerConceptSetUuid}
             label={personAttributeType.display}
+            customConceptAnswers={[]}
           />
         </Form>
       </Formik>,
     );
 
     expect(screen.getByLabelText(/Referred by/i)).toBeInTheDocument();
-    expect(screen.queryByText(/Option 1/i)).not.toBeInTheDocument();
-    expect(screen.queryByText(/Option 2/i)).not.toBeInTheDocument();
-    expect(screen.getByRole('textbox')).toBeInTheDocument();
+    expect(screen.getByText(/Option 1/i)).toBeInTheDocument();
+    expect(screen.getByText(/Option 2/i)).toBeInTheDocument();
   });
 
-  it('renders the Input component when conceptAnswers are still loading', () => {
-    mockedUseConceptAnswers.mockReturnValueOnce({
-      data: null,
-      isLoading: true,
-    });
-
+  it('renders customConceptAnswers as select options when they are provided', () => {
     render(
       <Formik initialValues={{}} onSubmit={() => {}}>
         <Form>
@@ -90,14 +103,25 @@ describe('CodedPersonAttributeField', () => {
             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();
-    expect(screen.getByRole('textbox')).toBeInTheDocument();
   });
 });

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

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { InlineNotification, TextInputSkeleton, SkeletonText } from '@carbon/react';
-import { FieldDefinition } from '../../../config-schema';
+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';
@@ -24,9 +24,9 @@ export function PersonAttributeField({ fieldDefinition }: PersonAttributeFieldPr
         return (
           <TextPersonAttributeField
             personAttributeType={personAttributeType}
-            validationRegex={fieldDefinition.validation.matches}
+            validationRegex={fieldDefinition.validation?.matches ?? ''}
             label={fieldDefinition.label}
-            required={fieldDefinition.validation.required}
+            required={fieldDefinition.validation?.required ?? false}
             id={fieldDefinition?.id}
           />
         );
@@ -37,6 +37,7 @@ export function PersonAttributeField({ fieldDefinition }: PersonAttributeFieldPr
             answerConceptSetUuid={fieldDefinition.answerConceptSetUuid}
             label={fieldDefinition.label}
             id={fieldDefinition?.id}
+            customConceptAnswers={fieldDefinition.customConceptAnswers ?? []}
           />
         );
       default:

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

@@ -4,7 +4,7 @@ import { usePersonAttributeType } from './person-attributes.resource';
 import { PersonAttributeField } from './person-attribute-field.component';
 import { useConceptAnswers } from '../field.resource';
 import { Form, Formik } from 'formik';
-import { FieldDefinition } from '../../../config-schema';
+import { type FieldDefinition } from '../../../config-schema';
 
 jest.mock('./person-attributes.resource'); // Mock the usePersonAttributeType hook
 jest.mock('../field.resource'); // Mock the useConceptAnswers hook

package/src/patient-registration/field/person-attributes/{person-attributes.resource.tsx → person-attributes.resource.ts}

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

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

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { Field } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { Input } from '../../input/basic-input/input/input.component';
-import { PersonAttributeTypeResponse } from '../../patient-registration.types';
+import { type PersonAttributeTypeResponse } from '../../patient-registration.types';
 import styles from './../field.scss';
 
 export interface TextPersonAttributeFieldProps {

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { PersonAttributeField } from '../person-attributes/person-attribute-field.component';
+import { useConfig } from '@openmrs/esm-framework';
+import { type RegistrationConfig } from '../../../config-schema';
+
+export function PhoneField() {
+  const config = useConfig<RegistrationConfig>();
+
+  const fieldDefinition = {
+    id: 'phone',
+    type: 'person attribute',
+    uuid: config.fieldConfigurations.phone.personAttributeUuid,
+    showHeading: false,
+  };
+  return <PersonAttributeField fieldDefinition={fieldDefinition} />;
+}

package/src/patient-registration/form-manager.test.ts

@@ -1,5 +1,5 @@
 import { FormManager } from './form-manager';
-import { FormValues } from './patient-registration.types';
+import { type FormValues } from './patient-registration.types';
 
 jest.mock('./patient-registration.resource');