@kenyaemr/esm-patient-registration-app 4.3.0

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

@@ -0,0 +1,226 @@
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import {
+  Button,
+  Layer,
+  Select,
+  SelectItem,
+  InlineNotification,
+  NotificationActionButton,
+  SkeletonText,
+} from '@carbon/react';
+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 { fetchPerson } from '../../patient-registration.resource';
+import { RelationshipValue } from '../../patient-registration-types';
+import sectionStyles from '../section.scss';
+import styles from './relationships.scss';
+
+interface RelationshipType {
+  display: string;
+  uuid: string;
+  direction: string;
+}
+
+export const RelationshipsSection = () => {
+  const { relationshipTypes } = useContext(ResourcesContext);
+  const [displayRelationshipTypes, setDisplayRelationshipTypes] = useState<RelationshipType[]>([]);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (relationshipTypes) {
+      const tmp: RelationshipType[] = [];
+      relationshipTypes.results.forEach((type) => {
+        const aIsToB = {
+          display: type.aIsToB,
+          uuid: type.uuid,
+          direction: 'aIsToB',
+        };
+        const bIsToA = {
+          display: type.bIsToA,
+          uuid: type.uuid,
+          direction: 'bIsToA',
+        };
+        aIsToB.display === bIsToA.display ? tmp.push(aIsToB) : tmp.push(aIsToB, bIsToA);
+      });
+      setDisplayRelationshipTypes(tmp);
+    }
+  }, [relationshipTypes]);
+
+  if (!relationshipTypes) {
+    return (
+      <section aria-label="Relationships Section">
+        <SkeletonText />
+      </section>
+    );
+  }
+
+  return (
+    <section aria-label="Relationships Section">
+      <FieldArray name="relationships">
+        {({
+          push,
+          remove,
+          form: {
+            values: { relationships },
+          },
+        }) => (
+          <div>
+            {relationships && relationships.length > 0
+              ? relationships.map((relationship: RelationshipValue, index) => (
+                  <div key={index} className={sectionStyles.formSection}>
+                    <RelationshipView
+                      relationship={relationship}
+                      index={index}
+                      displayRelationshipTypes={displayRelationshipTypes}
+                      key={index}
+                      remove={remove}
+                    />
+                  </div>
+                ))
+              : null}
+            <div className={styles.actions}>
+              <Button
+                kind="ghost"
+                onClick={() =>
+                  push({
+                    relatedPersonUuid: '',
+                    action: 'ADD',
+                  })
+                }>
+                {t('addRelationshipButtonText', 'Add Relationship')}
+              </Button>
+            </div>
+          </div>
+        )}
+      </FieldArray>
+    </section>
+  );
+};
+
+interface RelationshipViewProps {
+  relationship: RelationshipValue;
+  index: number;
+  displayRelationshipTypes: RelationshipType[];
+  remove: <T>(index: number) => T;
+}
+
+const RelationshipView: React.FC<RelationshipViewProps> = ({
+  relationship,
+  index,
+  displayRelationshipTypes,
+  remove,
+}) => {
+  const { t } = useTranslation();
+  const { setFieldValue } = React.useContext(PatientRegistrationContext);
+
+  const newRelationship = !relationship.uuid;
+
+  const handleRelationshipTypeChange = useCallback((event) => {
+    const { target } = event;
+    const field = target.name;
+    const value = target.options[target.selectedIndex].value;
+    setFieldValue(field, value);
+    if (!relationship?.action) {
+      setFieldValue(`relationships[${index}].action`, 'UPDATE');
+    }
+  }, []);
+
+  const handleSuggestionSelected = useCallback((field: string, selectedSuggestion: string) => {
+    setFieldValue(field, selectedSuggestion);
+  }, []);
+
+  const searchPerson = async (query: string) => {
+    const abortController = new AbortController();
+    const searchResults = await fetchPerson(query);
+    return searchResults.data.results;
+  };
+
+  const deleteRelationship = useCallback(() => {
+    if (relationship.action === 'ADD') {
+      remove(index);
+    } else {
+      setFieldValue(`relationships[${index}].action`, 'DELETE');
+    }
+  }, [relationship, index]);
+
+  const restoreRelationship = useCallback(() => {
+    setFieldValue(`relationships[${index}]`, {
+      ...relationship,
+      action: undefined,
+      relationshipType: relationship.initialrelationshipTypeValue,
+    });
+  }, [index]);
+
+  return relationship.action !== 'DELETE' ? (
+    <div className={styles.relationship}>
+      <div className={styles.searchBox}>
+        <div className={styles.relationshipHeader}>
+          <h4 className={styles.productiveHeading}>
+            {relationship?.relation ?? t('relationshipPlaceholder', 'Relationship')}
+          </h4>
+          <Button
+            kind="ghost"
+            iconDescription={t('deleteRelationshipTooltipText', 'Delete')}
+            hasIconOnly
+            onClick={deleteRelationship}>
+            <TrashCan size={16} className={styles.trashCan} />
+          </Button>
+        </div>
+        <div>
+          {newRelationship ? (
+            <Autosuggest
+              name={`relationships[${index}].relatedPersonUuid`}
+              labelText={t('relativeFullNameLabelText', 'Full name')}
+              placeholder={t('relativeNamePlaceholder', 'Firstname Familyname')}
+              defaultValue={relationship.relatedPersonName}
+              onSuggestionSelected={handleSuggestionSelected}
+              getSearchResults={searchPerson}
+              getDisplayValue={(item) => item.display}
+              getFieldValue={(item) => item.uuid}
+              required
+            />
+          ) : (
+            <>
+              <span className={styles.labelText}>{t('relativeFullNameLabelText', 'Full name')}</span>
+              <p className={styles.bodyShort02}>{relationship.relatedPersonName}</p>
+            </>
+          )}
+        </div>
+      </div>
+      <div className={`${styles.selectRelationshipType}`} style={{ marginBottom: '1rem' }}>
+        <Layer>
+          <Select
+            id="select"
+            labelText={t('relationship', 'Relationship')}
+            onChange={handleRelationshipTypeChange}
+            name={`relationships[${index}].relationshipType`}
+            defaultValue={relationship?.relationshipType ?? 'placeholder-item'}>
+            <SelectItem
+              disabled
+              hidden
+              value="placeholder-item"
+              text={t('relationshipToPatient', 'Relationship to patient')}
+            />
+            {displayRelationshipTypes.map((type) => (
+              <SelectItem text={type.display} value={`${type.uuid}/${type.direction}`} key={type.display} />
+            ))}
+          </Select>
+        </Layer>
+      </div>
+    </div>
+  ) : (
+    <InlineNotification
+      kind="info"
+      title={t('relationshipRemovedText', 'Relationship removed')}
+      actions={
+        <NotificationActionButton onClick={restoreRelationship}>
+          {t('restoreRelationshipActionButton', 'Undo')}
+        </NotificationActionButton>
+      }
+    />
+  );
+};

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

@@ -0,0 +1,78 @@
+import { FetchResponse, openmrsFetch, showToast } from '@openmrs/esm-framework';
+import { RelationshipValue } from '../../patient-registration-types';
+import useSWR from 'swr';
+import { useMemo } from 'react';
+import { personRelationshipRepresentation } from '../../../constants';
+
+export function useInitialPatientRelationships(patientUuid: string): {
+  data: Array<RelationshipValue>;
+  isLoading: boolean;
+} {
+  const shouldFetch = !!patientUuid;
+  const { data, error, isLoading } = useSWR<FetchResponse<RelationshipsResponse>, Error>(
+    shouldFetch ? `/ws/rest/v1/relationship?v=${personRelationshipRepresentation}&person=${patientUuid}` : null,
+    openmrsFetch,
+  );
+
+  const result = useMemo(() => {
+    const relationships: Array<RelationshipValue> | undefined = data?.data?.results.map((r) =>
+      r.personA.uuid === patientUuid
+        ? {
+            relatedPersonName: r.personB.display,
+            relatedPersonUuid: r.personB.uuid,
+            relation: r.relationshipType.bIsToA,
+            relationshipType: `${r.relationshipType.uuid}/bIsToA`,
+            /**
+             * Value kept for restoring initial value
+             */
+            initialrelationshipTypeValue: `${r.relationshipType.uuid}/bIsToA`,
+            uuid: r.uuid,
+          }
+        : {
+            relatedPersonName: r.personA.display,
+            relatedPersonUuid: r.personA.uuid,
+            relation: r.relationshipType.aIsToB,
+            relationshipType: `${r.relationshipType.uuid}/aIsToB`,
+            /**
+             * Value kept for restoring initial value
+             */
+            initialrelationshipTypeValue: `${r.relationshipType.uuid}/aIsToB`,
+            uuid: r.uuid,
+          },
+    );
+    return {
+      data: relationships,
+      error,
+      isLoading,
+    };
+  }, [patientUuid, data, error]);
+
+  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

@@ -0,0 +1,35 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '../../patient-registration.scss';
+
+.labelText {
+  @include type.type-style('label-01');
+}
+
+.bodyShort02 {
+  @include type.type-style('body-compact-02');
+}
+
+.searchBox {
+  margin-bottom: spacing.$spacing-05;
+}
+
+.relationshipHeader {
+  display: flex;
+  align-items: center;
+}
+
+.productiveHeading {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+}
+
+.trashCan {
+  color: $danger !important;
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+  .relationshipHeader {
+    justify-content: space-between;
+  }
+}

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import styles from '../patient-registration.scss';
+import { Tile } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { SectionDefinition } from '../../config-schema';
+import { Section } from './section.component';
+
+export interface SectionWrapperProps {
+  sectionDefinition: SectionDefinition;
+  index: number;
+}
+
+export const SectionWrapper = ({ sectionDefinition, index }: SectionWrapperProps) => {
+  const { t } = useTranslation();
+
+  /*
+   * This comment exists to provide translation keys for the default section names.
+   *
+   * DO NOT REMOVE THESE UNLESS A DEFAULT SECTION IS REMOVED
+   * t('demographicsSection', 'Basic Info')
+   * t('contactSection', 'Contact Details')
+   * t('deathSection', 'Death Info')
+   * t('relationshipsSection', 'Relationships')
+   */
+  return (
+    <div id={sectionDefinition.id}>
+      <h3 className={styles.productiveHeading02} style={{ color: '#161616' }}>
+        {index + 1}. {t(`${sectionDefinition.id}Section`, sectionDefinition.name)}
+      </h3>
+      <span className={styles.label01}>
+        {t('allFieldsRequiredText', 'All fields are required unless marked optional')}
+      </span>
+      <div style={{ margin: '1rem 0 1rem' }}>
+        <Tile>
+          <Section sectionDefinition={sectionDefinition} />
+        </Tile>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { SectionDefinition } from '../../config-schema';
+import { GenericSection } from './generic-section.component';
+import { DeathInfoSection } from './death-info/death-info-section.component';
+import { DemographicsSection } from './demographics/demographics-section.component';
+import { RelationshipsSection } from './patient-relationships/relationships-section.component';
+
+export interface SectionProps {
+  sectionDefinition: SectionDefinition;
+}
+
+export function Section({ sectionDefinition }: SectionProps) {
+  switch (sectionDefinition.id) {
+    case 'demographics':
+      return <DemographicsSection fields={sectionDefinition.fields} />;
+    case 'death':
+      return <DeathInfoSection />;
+    case 'relationships':
+      return <RelationshipsSection />;
+    default: // includes 'contact'
+      return <GenericSection sectionDefinition={sectionDefinition} />;
+  }
+}

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

@@ -0,0 +1 @@
+@import '../patient-registration.scss';

package/src/patient-registration/ui-components/overlay/index.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Header } from '@carbon/react';
+import { ArrowLeft, Close } from '@carbon/react/icons';
+import { useLayoutType, isDesktop } from '@openmrs/esm-framework';
+import styles from './overlay.scss';
+
+interface OverlayProps {
+  close: () => void;
+  header: string;
+  buttonsGroup?: React.ReactElement;
+  children?: React.ReactNode;
+}
+
+const Overlay: React.FC<OverlayProps> = ({ close, children, header, buttonsGroup }) => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+
+  return (
+    <div className={isDesktop(layout) ? styles.desktopOverlay : styles.tabletOverlay}>
+      {isDesktop(layout) ? (
+        <div className={styles.desktopHeader}>
+          <div className={styles.headerContent}>{header}</div>
+          <Button
+            className={styles.closeButton}
+            iconDescription={t('closeOverlay', 'Close overlay')}
+            onClick={close}
+            kind="ghost"
+            hasIconOnly
+            renderIcon={(props) => <Close size={16} {...props} />}
+          />
+        </div>
+      ) : (
+        <Header className={styles.tabletOverlayHeader}>
+          <Button
+            kind="ghost"
+            onClick={close}
+            hasIconOnly
+            iconDescription={t('closeOverlay', 'Close overlay')}
+            renderIcon={(props) => <ArrowLeft size={16} onClick={close} {...props} />}
+          />
+          <div className={styles.headerContent}>{header}</div>
+        </Header>
+      )}
+      <div className={styles.overlayContent}>{children}</div>
+      <div>{buttonsGroup}</div>
+    </div>
+  );
+};
+
+export default Overlay;

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

@@ -0,0 +1,63 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '../../patient-registration.scss';
+
+.desktopOverlay {
+  position: fixed;
+  top: spacing.$spacing-09;
+  right: 0;
+  height: calc(100vh - 3rem);
+  min-width: 27rem;
+  background-color: $ui-02;
+  border-left: 1px solid $text-03;
+  overflow: hidden;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  z-index: 999;
+}
+
+.tabletOverlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  background-color: $ui-02;
+  overflow: hidden;
+  padding-top: spacing.$spacing-09;
+  display: grid;
+  grid-template-rows: 1fr auto;
+}
+
+.tabletOverlayHeader {
+  button {
+    background-color: $brand-01 !important;
+  }
+  .headerContent {
+    color: $ui-02;
+  }
+}
+
+.desktopHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: $ui-03;
+  border-bottom: 1px solid $text-03;
+}
+
+.headerContent {
+  @include type.type-style('heading-compact-02');
+  padding: 0 spacing.$spacing-05;
+  color: $ui-05;
+}
+
+.closeButton {
+  background-color: $ui-02;
+}
+
+.overlayContent {
+  padding: spacing.$spacing-05;
+  overflow-y: auto;
+}

package/src/patient-registration/validation/patient-registration-validation.test.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Formik, Form } from 'formik';
+import { useConfig } from '@openmrs/esm-framework';
+import { validationSchema } from './patient-registration-validation';
+import { NameField } from '../field/name/name-field.component';
+import { PatientRegistrationContext } from '../patient-registration-context';
+import { initialFormValues } from '../patient-registration.component';
+import { FormValues } from '../patient-registration-types';
+
+const mockUseConfig = useConfig as jest.Mock;
+const mockFieldConfigs = {
+  fieldConfigurations: {
+    name: {
+      displayMiddleName: true,
+    },
+  },
+};
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+
+  return {
+    ...originalModule,
+    useConfig: jest.fn(),
+    validator: jest.fn(),
+  };
+});
+
+describe('Name input', () => {
+  const formValues: FormValues = initialFormValues;
+
+  const testValidName = (givenNameValue: string, middleNameValue: string, familyNameValue: string) => {
+    it(
+      'does not display error message when givenNameValue: ' +
+        givenNameValue +
+        ', middleNameValue: ' +
+        middleNameValue +
+        ', familyNameValue: ' +
+        familyNameValue,
+      async () => {
+        const error = await updateNameAndReturnError(givenNameValue, middleNameValue, familyNameValue);
+        Object.values(error).map((currentError) => expect(currentError).toBeNull());
+      },
+    );
+  };
+
+  const testInvalidName = (
+    givenNameValue: string,
+    middleNameValue: string,
+    familyNameValue: string,
+    expectedError: string,
+    errorType: string,
+  ) => {
+    it.skip(
+      'displays error message when givenNameValue: ' +
+        givenNameValue +
+        ', middleNameValue: ' +
+        middleNameValue +
+        ', familyNameValue: ' +
+        familyNameValue,
+      async () => {
+        const error = (await updateNameAndReturnError(givenNameValue, middleNameValue, familyNameValue))[errorType];
+        expect(error.textContent).toEqual(expectedError);
+      },
+    );
+  };
+
+  const updateNameAndReturnError = async (givenNameValue: string, middleNameValue: string, familyNameValue: string) => {
+    const user = userEvent.setup();
+
+    mockUseConfig.mockReturnValue(mockFieldConfigs);
+
+    render(
+      <Formik
+        initialValues={{
+          givenName: '',
+          middleName: '',
+          familyName: '',
+        }}
+        onSubmit={null}
+        validationSchema={validationSchema}>
+        <Form>
+          <PatientRegistrationContext.Provider
+            value={{
+              initialFormValues: null,
+              identifierTypes: [],
+              validationSchema,
+              setValidationSchema: () => {},
+              values: formValues,
+              inEditMode: false,
+              setFieldValue: () => null,
+              currentPhoto: 'TEST',
+              isOffline: true,
+              setCapturePhotoProps: (value) => {},
+            }}>
+            <NameField />
+          </PatientRegistrationContext.Provider>
+        </Form>
+      </Formik>,
+    );
+    const givenNameInput = screen.getByLabelText('First Name') as HTMLInputElement;
+    const middleNameInput = screen.getByLabelText(/Middle Name/i) as HTMLInputElement;
+    const familyNameInput = screen.getByLabelText('Family Name') as HTMLInputElement;
+
+    await user.click(givenNameInput);
+
+    fireEvent.change(givenNameInput, { target: { value: givenNameValue } });
+    fireEvent.blur(givenNameInput);
+    fireEvent.change(middleNameInput, { target: { value: middleNameValue } });
+    fireEvent.blur(middleNameInput);
+    fireEvent.change(familyNameInput, { target: { value: familyNameValue } });
+    fireEvent.blur(familyNameInput);
+
+    return {
+      givenNameError: screen.queryByText('Given name is required'),
+      middleNameError: screen.queryByText('Middle name is required'),
+      familyNameError: screen.queryByText('Family name is required'),
+    };
+  };
+
+  testValidName('Aaron', 'A', 'Aaronson');
+  testValidName('No', '', 'Middle Name');
+  testInvalidName('', '', '', 'Given name is required', 'givenNameError');
+  testInvalidName('', '', '', 'Family name is required', 'familyNameError');
+  testInvalidName('', 'No', 'Given Name', 'Given name is required', 'givenNameError');
+  testInvalidName('No', 'Family Name', '', 'Family name is required', 'familyNameError');
+});