@ampath/esm-patient-registration-app 6.0.1-pre.98 → 9.2.0-next.14

package/src/patient-registration/section/death-info/death-info-section.component.tsx

@@ -1,30 +1,35 @@
 import React from 'react';
-import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { Input } from '../../input/basic-input/input/input.component';
-import { SelectInput } from '../../input/basic-input/select/select-input.component';
-import { PatientRegistrationContext } from '../../patient-registration-context';
+import { Checkbox, Layer } from '@carbon/react';
+import { useField } from 'formik';
+import { usePatientRegistrationContext } from '../../patient-registration-context';
+import { Field } from '../../field/field.component';
 import styles from './../section.scss';
 
-export const DeathInfoSection = () => {
-  const { values } = React.useContext(PatientRegistrationContext);
+export interface DeathInfoSectionProps {
+  fields: Array<string>;
+}
+
+export const DeathInfoSection: React.FC<DeathInfoSectionProps> = ({ fields }) => {
   const { t } = useTranslation();
+  const { values, setFieldValue } = usePatientRegistrationContext();
+  const [deathDate, deathDateMeta] = useField('deathDate');
+  const today = new Date();
 
   return (
     <section className={styles.formSection} aria-label="Death Info Section">
-      <h5 className={classNames('omrs-type-title-5', styles.formSectionTitle)}>Death Info</h5>
       <section className={styles.fieldGroup}>
-        <Input labelText={t('isDeadInputLabel', 'Is Dead')} name="isDead" id="isDead" />
-        {values.isDead && (
-          <>
-            <Input labelText={t('deathDateInputLabel', 'Date of Death')} name="deathDate" id="deathDate" />
-            <SelectInput
-              options={[t('unknown', 'Unknown'), t('stroke', 'Stroke')]}
-              label={t('causeOfDeathInputLabel', 'Cause of Death')}
-              name="deathCause"
+        <Layer>
+          <div className={styles.isDeadFieldContainer}>
+            <Checkbox
+              checked={values.isDead}
+              id="isDead"
+              labelText={t('isDeadInputLabel', 'Is dead')}
+              onChange={(event, { checked, id }) => setFieldValue(id, checked)}
             />
-          </>
-        )}
+          </div>
+        </Layer>
+        {values.isDead ? fields.map((field) => <Field key={`death-info-${field}`} name={field} />) : null}
       </section>
     </section>
   );

package/src/patient-registration/section/death-info/death-info-section.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Form, Formik } from 'formik';
+import { type FormValues } from '../../patient-registration.types';
+import { renderWithContext } from 'tools';
+import { initialFormValues } from '../../patient-registration.component';
+import { PatientRegistrationContextProvider } from '../../patient-registration-context';
+import { DeathInfoSection } from './death-info-section.component';
+
+const initialContextValues = {
+  currentPhoto: 'data:image/png;base64,1234567890',
+  identifierTypes: [],
+  inEditMode: false,
+  initialFormValues: {} as FormValues,
+  isOffline: false,
+  setCapturePhotoProps: jest.fn(),
+  setFieldValue: jest.fn(),
+  setFieldTouched: jest.fn(),
+  setInitialFormValues: jest.fn(),
+  validationSchema: null,
+  values: {
+    isDead: true,
+  } as FormValues,
+};
+
+describe('Death info section', () => {
+  const renderDeathInfoSection = (isDead) => {
+    initialContextValues.values.isDead = isDead;
+
+    renderWithContext(
+      <Formik initialValues={initialFormValues} onSubmit={jest.fn()}>
+        <Form>
+          <DeathInfoSection fields={[]} />
+        </Form>
+      </Formik>,
+      PatientRegistrationContextProvider,
+      initialContextValues,
+    );
+  };
+
+  it('shows fields for recording death info when the patient is marked as dead', () => {
+    renderDeathInfoSection(true);
+
+    expect(screen.getByRole('region', { name: /death info section/i })).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: /is dead/i })).toBeInTheDocument();
+  });
+});

package/src/patient-registration/section/demographics/demographics-section.component.tsx

@@ -1,8 +1,8 @@
-import React, { useContext, useEffect } from 'react';
-import styles from './../section.scss';
+import React, { useEffect } from 'react';
 import { useField } from 'formik';
-import { PatientRegistrationContext } from '../../patient-registration-context';
 import { Field } from '../../field/field.component';
+import { usePatientRegistrationContext } from '../../patient-registration-context';
+import styles from './../section.scss';
 
 export interface DemographicsSectionProps {
   fields: Array<string>;
@@ -10,7 +10,7 @@ export interface DemographicsSectionProps {
 
 export const DemographicsSection: React.FC<DemographicsSectionProps> = ({ fields }) => {
   const [field, meta] = useField('addNameInLocalLanguage');
-  const { setFieldValue } = useContext(PatientRegistrationContext);
+  const { setFieldValue } = usePatientRegistrationContext();
 
   useEffect(() => {
     if (!field.value && meta.touched) {
@@ -18,7 +18,7 @@ export const DemographicsSection: React.FC<DemographicsSectionProps> = ({ fields
       setFieldValue('additionalMiddleName', '');
       setFieldValue('additionalFamilyName', '');
     }
-  }, [field.value, meta.touched]);
+  }, [field.value, meta.touched, setFieldValue]);
 
   return (
     <section className={styles.formSection} aria-label="Demographics Section">

package/src/patient-registration/section/demographics/demographics-section.test.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Formik, Form } from 'formik';
+import { initialFormValues } from '../../patient-registration.component';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { DemographicsSection } from './demographics-section.component';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import { type RegistrationConfig, esmPatientRegistrationSchema } from '../../../config-schema';
+
+const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
+
+jest.mock('../../field/name/name-field.component', () => {
+  return {
+    NameField: () => (
+      <div>
+        <input type="text" name="name" />
+      </div>
+    ),
+  };
+});
+
+jest.mock('../../field/gender/gender-field.component', () => {
+  return {
+    GenderField: () => (
+      <div>
+        <input type="text" name="name" />
+      </div>
+    ),
+  };
+});
+
+jest.mock('../../field/id/id-field.component', () => {
+  return {
+    IdField: () => (
+      <div>
+        <input type="text" name="name" />
+      </div>
+    ),
+  };
+});
+
+describe('Demographics section', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldConfigurations: {
+        dateOfBirth: {
+          allowEstimatedDateOfBirth: true,
+          useEstimatedDateOfBirth: { enabled: true, dayOfMonth: 0, month: 0 },
+        },
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+  });
+
+  const setupSection = async (birthdateEstimated?: boolean, addNameInLocalLanguage?: boolean) => {
+    render(
+      <Formik initialValues={{ ...initialFormValues, birthdateEstimated, addNameInLocalLanguage }} onSubmit={null}>
+        <Form>
+          <PatientRegistrationContext.Provider
+            value={{
+              initialFormValues: null,
+              identifierTypes: [],
+              validationSchema: {},
+              values: { ...initialFormValues, birthdateEstimated, addNameInLocalLanguage },
+              inEditMode: false,
+              setFieldValue: () => {},
+              currentPhoto: 'TEST',
+              isOffline: true,
+              setCapturePhotoProps: (value) => {},
+              setFieldTouched: () => {},
+            }}>
+            <DemographicsSection fields={['name', 'gender', 'dob']} />
+          </PatientRegistrationContext.Provider>
+        </Form>
+      </Formik>,
+    );
+    const allInputs = screen.getAllByRole('textbox') as Array<HTMLInputElement>;
+    return allInputs.map((input) => input.name);
+  };
+
+  it('renders demographics fields and date of birth inputs', async () => {
+    const inputNames = await setupSection();
+    expect(inputNames.length).toBe(3);
+
+    expect(screen.getByText(/date of birth known\?/i)).toBeInTheDocument();
+    expect(
+      screen.getByRole('tab', {
+        name: /yes/i,
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('tab', {
+        name: /no/i,
+      }),
+    ).toBeInTheDocument();
+    expect(screen.getByLabelText(/date of birth/i)).toBeInTheDocument();
+  });
+});

package/src/patient-registration/section/patient-relationships/relationships-section.component.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useId, useState } from 'react';
 import {
   Button,
   Layer,
@@ -12,9 +12,9 @@ import { TrashCan } from '@carbon/react/icons';
 import { FieldArray } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { Autosuggest } from '../../input/custom-input/autosuggest/autosuggest.component';
-import { PatientRegistrationContext } from '../../patient-registration-context';
-import { ResourcesContext } from '../../../offline.resources';
+import { usePatientRegistrationContext } from '../../patient-registration-context';
 import { fetchPerson } from '../../patient-registration.resource';
+import { useResourcesContext } from '../../../resources-context';
 import { type RelationshipValue } from '../../patient-registration.types';
 import sectionStyles from '../section.scss';
 import styles from './relationships.scss';
@@ -39,9 +39,10 @@ const RelationshipView: React.FC<RelationshipViewProps> = ({
   remove,
 }) => {
   const { t } = useTranslation();
-  const { setFieldValue } = React.useContext(PatientRegistrationContext);
-  const [isInvalid, setIsInvalid] = useState<boolean>(false);
+  const { setFieldValue } = usePatientRegistrationContext();
+  const [isInvalid, setIsInvalid] = useState(false);
   const newRelationship = !relationship.uuid;
+  const selectId = useId();
 
   const handleRelationshipTypeChange = useCallback(
     (event) => {
@@ -123,7 +124,7 @@ const RelationshipView: React.FC<RelationshipViewProps> = ({
       <div className={styles.selectRelationshipType} style={{ marginBottom: '1rem' }}>
         <Layer>
           <Select
-            id="select"
+            id={selectId}
             labelText={t('relationship', 'Relationship')}
             onChange={handleRelationshipTypeChange}
             name={`relationships[${index}].relationshipType`}
@@ -159,7 +160,7 @@ const RelationshipView: React.FC<RelationshipViewProps> = ({
 };
 
 export const RelationshipsSection = () => {
-  const { relationshipTypes } = useContext(ResourcesContext);
+  const { relationshipTypes } = useResourcesContext();
   const [displayRelationshipTypes, setDisplayRelationshipTypes] = useState<RelationshipType[]>([]);
   const { t } = useTranslation();
 

package/src/patient-registration/section/patient-relationships/relationships-section.test.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { Form, Formik } from 'formik';
+import { screen } from '@testing-library/react';
+import { type Resources } from '../../../offline.resources';
+import { type FormValues } from '../../patient-registration.types';
+import { PatientRegistrationContextProvider } from '../../patient-registration-context';
+import { RelationshipsSection } from './relationships-section.component';
+import { ResourcesContextProvider } from '../../../resources-context';
+import { renderWithContext } from 'tools';
+
+jest.mock('../../patient-registration.resource', () => ({
+  fetchPerson: jest.fn().mockResolvedValue({
+    data: {
+      results: [
+        { uuid: '42ae5ce0-d64b-11ea-9064-5adc43bbdd24', display: 'Person 1' },
+        { uuid: '691eed12-c0f1-11e2-94be-8c13b969e334', display: 'Person 2' },
+      ],
+    },
+  }),
+}));
+
+let mockResourcesContextValue = {
+  addressTemplate: null,
+  currentSession: {
+    authenticated: true,
+    sessionId: 'JSESSION',
+    currentProvider: { uuid: '45ce6c2e-dd5a-11e6-9d9c-0242ac150002', identifier: 'PRO-123' },
+  },
+  identifierTypes: [],
+  relationshipTypes: null,
+} as Resources;
+
+const initialContextValues = {
+  currentPhoto: 'data:image/png;base64,1234567890',
+  identifierTypes: [],
+  inEditMode: false,
+  initialFormValues: {} as FormValues,
+  isOffline: false,
+  setCapturePhotoProps: jest.fn(),
+  setFieldValue: jest.fn(),
+  setFieldTouched: jest.fn(),
+  setInitialFormValues: jest.fn(),
+  validationSchema: null,
+  values: {} as FormValues,
+};
+
+describe('RelationshipsSection', () => {
+  it('renders a loader when relationshipTypes are not available', () => {
+    renderWithContext(
+      <Formik initialValues={{}} onSubmit={null}>
+        <Form>
+          <RelationshipsSection />
+        </Form>
+      </Formik>,
+      ResourcesContextProvider,
+      mockResourcesContextValue,
+    );
+
+    expect(screen.getByLabelText(/loading relationships section/i)).toBeInTheDocument();
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    expect(screen.queryByText(/add relationship/i)).not.toBeInTheDocument();
+  });
+
+  it('renders relationships when relationshipTypes are available', () => {
+    const relationshipTypes = {
+      results: [
+        {
+          displayAIsToB: 'Mother',
+          aIsToB: 'Mother',
+          bIsToA: 'Child',
+          displayBIsToA: 'Child',
+          uuid: '42ae5ce0-d64b-11ea-9064-5adc43bbdd34',
+        },
+        {
+          displayAIsToB: 'Father',
+          aIsToB: 'Father',
+          bIsToA: 'Child',
+          displayBIsToA: 'Child',
+          uuid: '52ae5ce0-d64b-11ea-9064-5adc43bbdd24',
+        },
+      ],
+    };
+    mockResourcesContextValue = {
+      ...mockResourcesContextValue,
+      relationshipTypes: relationshipTypes,
+    };
+
+    renderWithContext(
+      <Formik
+        initialValues={{
+          relationships: [{ action: 'ADD', relatedPersonUuid: '11524ae7-3ef6-4ab6-aff6-804ffc58704a' }],
+        }}
+        onSubmit={null}>
+        <Form>
+          <PatientRegistrationContextProvider value={initialContextValues}>
+            <RelationshipsSection />
+          </PatientRegistrationContextProvider>
+        </Form>
+      </Formik>,
+      ResourcesContextProvider,
+      mockResourcesContextValue,
+    );
+
+    expect(screen.getByLabelText(/relationships section/i)).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /relationship/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /delete/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /add relationship/i })).toBeInTheDocument();
+    expect(screen.getByRole('searchbox', { name: /full name/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /mother/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /father/i })).toBeInTheDocument();
+    expect(screen.getAllByRole('option', { name: /child/i }).length).toEqual(2);
+  });
+});

package/src/patient-registration/section/patient-relationships/relationships.resource.tsx

@@ -4,6 +4,33 @@ import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-fram
 import { type RelationshipValue } from '../../patient-registration.types';
 import { personRelationshipRepresentation } from '../../../constants';
 
+export interface Relationship {
+  display: string;
+  uuid: string;
+  personA: {
+    age: number;
+    display: string;
+    birthdate: string;
+    uuid: string;
+  };
+  personB: {
+    age: number;
+    display: string;
+    birthdate: string;
+    uuid: string;
+  };
+  relationshipType: {
+    uuid: string;
+    display: string;
+    aIsToB: string;
+    bIsToA: string;
+  };
+}
+
+interface RelationshipsResponse {
+  results: Array<Relationship>;
+}
+
 export function useInitialPatientRelationships(patientUuid: string): {
   data: Array<RelationshipValue>;
   isLoading: boolean;
@@ -45,34 +72,7 @@ export function useInitialPatientRelationships(patientUuid: string): {
       error,
       isLoading,
     };
-  }, [patientUuid, data, error]);
+  }, [data?.data?.results, error, isLoading, patientUuid]);
 
   return result;
 }
-
-export interface Relationship {
-  display: string;
-  uuid: string;
-  personA: {
-    age: number;
-    display: string;
-    birthdate: string;
-    uuid: string;
-  };
-  personB: {
-    age: number;
-    display: string;
-    birthdate: string;
-    uuid: string;
-  };
-  relationshipType: {
-    uuid: string;
-    display: string;
-    aIsToB: string;
-    bIsToA: string;
-  };
-}
-
-interface RelationshipsResponse {
-  results: Array<Relationship>;
-}

package/src/patient-registration/section/patient-relationships/relationships.scss

@@ -1,6 +1,6 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '../../patient-registration.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .labelText {
   @include type.type-style('label-01');
@@ -11,7 +11,7 @@
 }
 
 .searchBox {
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 }
 
 .relationshipHeader {

package/src/patient-registration/section/section-wrapper.component.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import styles from '../patient-registration.scss';
 import { Tile } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { type SectionDefinition } from '../../config-schema';
 import { Section } from './section.component';
+import styles from './section.scss';
 
 export interface SectionWrapperProps {
   sectionDefinition: SectionDefinition;

package/src/patient-registration/section/section.component.tsx

@@ -14,7 +14,7 @@ export function Section({ sectionDefinition }: SectionProps) {
     case 'demographics':
       return <DemographicsSection fields={sectionDefinition.fields} />;
     case 'death':
-      return <DeathInfoSection />;
+      return <DeathInfoSection fields={sectionDefinition.fields} />;
     case 'relationships':
       return <RelationshipsSection />;
     default: // includes 'contact'

package/src/patient-registration/section/section.scss

@@ -1 +1,21 @@
-@import '../patient-registration.scss';
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.label01 {
+  @include type.type-style('label-01');
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-05;
+  color: $ui-05;
+}
+
+.productiveHeading02 {
+  @include type.type-style('heading-compact-02');
+  color: $ui-04;
+  cursor: pointer;
+}
+
+.isDeadFieldContainer {
+  margin-bottom: layout.$spacing-05;
+}

package/src/patient-registration/ui-components/overlay/overlay.scss

@@ -1,12 +1,12 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '../../patient-registration.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .desktopOverlay {
   position: fixed;
-  top: spacing.$spacing-09;
+  top: layout.$spacing-09;
   right: 0;
-  height: calc(100vh - 3rem);
+  height: calc(100vh - layout.$spacing-09);
   min-width: 27rem;
   background-color: $ui-02;
   border-left: 1px solid $text-03;
@@ -25,7 +25,7 @@
   z-index: 9999;
   background-color: $ui-02;
   overflow: hidden;
-  padding-top: spacing.$spacing-09;
+  padding-top: layout.$spacing-09;
   display: grid;
   grid-template-rows: 1fr auto;
 }
@@ -49,7 +49,7 @@
 
 .headerContent {
   @include type.type-style('heading-compact-02');
-  padding: 0 spacing.$spacing-05;
+  padding: 0 layout.$spacing-05;
   color: $ui-05;
 }
 
@@ -58,6 +58,6 @@
 }
 
 .overlayContent {
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
   overflow-y: auto;
 }