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

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

@@ -0,0 +1,235 @@
+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 { type RelationshipValue } from '../../patient-registration.types';
+import sectionStyles from '../section.scss';
+import styles from './relationships.scss';
+
+interface RelationshipType {
+  display: string;
+  uuid: string;
+  direction: string;
+}
+
+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 [isInvalid, setIsInvalid] = useState<boolean>(false);
+  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');
+      }
+    },
+    [index, relationship?.action, setFieldValue],
+  );
+
+  const handleSuggestionSelected = useCallback(
+    (field: string, selectedSuggestion: string) => {
+      setIsInvalid(!selectedSuggestion);
+      setFieldValue(field, selectedSuggestion);
+    },
+    [setFieldValue],
+  );
+
+  const searchPerson = async (query: string) => {
+    const abortController = new AbortController();
+    return await fetchPerson(query, abortController);
+  };
+
+  const deleteRelationship = useCallback(() => {
+    if (relationship.action === 'ADD') {
+      remove(index);
+    } else {
+      setFieldValue(`relationships[${index}].action`, 'DELETE');
+    }
+  }, [relationship, index, remove, setFieldValue]);
+
+  const restoreRelationship = useCallback(() => {
+    setFieldValue(`relationships[${index}]`, {
+      ...relationship,
+      action: undefined,
+      relationshipType: relationship.initialrelationshipTypeValue,
+    });
+  }, [index, setFieldValue, relationship]);
+
+  return relationship.action !== 'DELETE' ? (
+    <div className={styles.relationship}>
+      <div className={styles.searchBox}>
+        <div className={styles.relationshipHeader}>
+          <h4 className={styles.productiveHeading}>{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
+              id={`relationships[${index}].relatedPersonUuid`}
+              labelText={t('relativeFullNameLabelText', 'Full name')}
+              placeholder={t('relativeNamePlaceholder', 'Firstname Familyname')}
+              defaultValue={relationship.relatedPersonName}
+              onSuggestionSelected={handleSuggestionSelected}
+              invalid={isInvalid}
+              invalidText={t('relationshipPersonMustExist', 'Related person must be an existing person')}
+              getSearchResults={searchPerson}
+              getDisplayValue={(item) => item.display}
+              getFieldValue={(item) => item.uuid}
+            />
+          ) : (
+            <>
+              <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((relationshipType, index) => (
+              <SelectItem
+                text={relationshipType.display}
+                value={`${relationshipType.uuid}/${relationshipType.direction}`}
+                key={`relationship-${relationshipType.uuid}-${index}`}
+              />
+            ))}
+          </Select>
+        </Layer>
+      </div>
+    </div>
+  ) : (
+    <InlineNotification
+      kind="info"
+      title={t('relationshipRemovedText', 'Relationship removed')}
+      actions={
+        <NotificationActionButton onClick={restoreRelationship}>
+          {t('restoreRelationshipActionButton', 'Undo')}
+        </NotificationActionButton>
+      }
+    />
+  );
+};
+
+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.displayAIsToB ? type.displayAIsToB : type.displayBIsToA,
+          uuid: type.uuid,
+          direction: 'aIsToB',
+        };
+        const bIsToA = {
+          display: type.displayBIsToA ? type.displayBIsToA : type.displayAIsToB,
+          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="Loading relationships section">
+        <SkeletonText role="progressbar" />
+      </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>
+  );
+};

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

@@ -0,0 +1,100 @@
+import React from 'react';
+import { Form, Formik } from 'formik';
+import { render, screen } from '@testing-library/react';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import { type Resources, ResourcesContext } from '../../../offline.resources';
+import { RelationshipsSection } from './relationships-section.component';
+
+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;
+
+describe('RelationshipsSection', () => {
+  it('renders a loader when relationshipTypes are not available', () => {
+    render(
+      <ResourcesContext.Provider value={mockResourcesContextValue}>
+        <Formik initialValues={{}} onSubmit={null}>
+          <Form>
+            <RelationshipsSection />
+          </Form>
+        </Formik>
+      </ResourcesContext.Provider>,
+    );
+
+    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,
+    };
+
+    render(
+      <ResourcesContext.Provider value={mockResourcesContextValue}>
+        <Formik
+          initialValues={{
+            relationships: [{ action: 'ADD', relatedPersonUuid: '11524ae7-3ef6-4ab6-aff6-804ffc58704a' }],
+          }}
+          onSubmit={null}>
+          <Form>
+            <PatientRegistrationContext.Provider
+              value={{
+                setFieldValue: jest.fn(),
+                setInitialFormValues: jest.fn(),
+              }}>
+              <RelationshipsSection />
+            </PatientRegistrationContext.Provider>
+          </Form>
+        </Formik>
+      </ResourcesContext.Provider>,
+    );
+
+    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

@@ -0,0 +1,78 @@
+import { useMemo } from 'react';
+import useSWR from 'swr';
+import { type FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
+import { type RelationshipValue } from '../../patient-registration.types';
+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 { type 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} style={{ scrollMarginTop: '4rem' }}>
+      <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 { type 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/overlay.component.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} aria-label="Overlay header">
+          <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;
+}