@openmrs/esm-service-queues-app 5.0.1-pre.2087

package/src/patient-info/appointment-details.component.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
+import { InlineLoading } from '@carbon/react';
+import { formatDatetime, parseDate, Visit } from '@openmrs/esm-framework';
+import { useAppointments } from './appointments.resource';
+import styles from './appointment-details.scss';
+import { usePastVisits } from '../past-visit/past-visit.resource';
+import { Appointment } from '../types';
+
+interface AppointmentDetailsProps {
+  patientUuid: string;
+}
+
+interface PastAppointmentDetailsProps {
+  pastVisit: Visit;
+  isLoading: boolean;
+}
+
+interface UpcomingAppointmentDetailsProps {
+  upcomingAppointment: Appointment;
+  isLoading: boolean;
+}
+
+const PastAppointmentDetails: React.FC<PastAppointmentDetailsProps> = ({ pastVisit, isLoading }) => {
+  const { t } = useTranslation();
+
+  if (isLoading) {
+    return (
+      <div className={styles.widgetCard}>
+        <InlineLoading description={t('loading', 'Loading...')} role="progressbar" />
+      </div>
+    );
+  }
+
+  if (pastVisit) {
+    return (
+      <div className={styles.widgetCard}>
+        <React.Fragment>
+          <p className={styles.title}>{t('lastEncounter', 'Last encounter')}</p>
+          <p className={styles.subtitle}>
+            {formatDatetime(parseDate(pastVisit?.startDatetime))} ·{' '}
+            {pastVisit?.visitType ? pastVisit?.visitType?.display : '--'} ·{' '}
+            {pastVisit?.location ? pastVisit.location?.display : '--'}
+          </p>
+        </React.Fragment>
+      </div>
+    );
+  }
+  return (
+    <p className={styles.content}>{t('noLastEncounter', 'There is no last encounter to display for this patient')}</p>
+  );
+};
+
+const UpcomingAppointmentDetails: React.FC<UpcomingAppointmentDetailsProps> = ({ upcomingAppointment, isLoading }) => {
+  const { t } = useTranslation();
+
+  if (isLoading) {
+    return (
+      <div className={styles.widgetCard}>
+        <InlineLoading description={t('loading', 'Loading...')} role="progressbar" />
+      </div>
+    );
+  }
+
+  if (upcomingAppointment) {
+    return (
+      <div className={styles.widgetCard}>
+        <React.Fragment>
+          <p className={styles.title}>{t('returnDate', 'Return date')}</p>
+          <p className={styles.subtitle}>
+            {formatDatetime(parseDate(upcomingAppointment?.startDateTime))} ·{' '}
+            {upcomingAppointment?.service ? upcomingAppointment?.service?.name : '--'} ·{' '}
+            {upcomingAppointment?.location ? upcomingAppointment?.location?.name : '--'}{' '}
+          </p>
+        </React.Fragment>
+      </div>
+    );
+  }
+
+  return <p className={styles.content}>{t('noReturnDate', 'There is no return date to display for this patient')}</p>;
+};
+
+const AppointmentDetails: React.FC<AppointmentDetailsProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const startDate = dayjs(new Date().toISOString()).subtract(6, 'month').toISOString();
+  const { upcomingAppointment, isLoading } = useAppointments(patientUuid, startDate);
+  const { visits, isLoading: loading } = usePastVisits(patientUuid);
+
+  return (
+    <>
+      <PastAppointmentDetails pastVisit={visits} isLoading={loading} />
+      <UpcomingAppointmentDetails upcomingAppointment={upcomingAppointment} isLoading={isLoading} />
+    </>
+  );
+};
+
+export default AppointmentDetails;

package/src/patient-info/appointment-details.scss

@@ -0,0 +1,34 @@
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.widgetCard {
+  border: 1px solid colors.$blue-20;
+  border-left: none;
+  border-right: none;
+  background-color: colors.$blue-10;
+  padding: spacing.$spacing-05;
+}
+
+.title {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-bottom: spacing.$spacing-02;
+}
+
+.subtitle {
+  color: $text-02;
+  @include type.type-style('body-compact-01');
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  background-color: colors.$blue-10;
+  padding: spacing.$spacing-05;
+  border: 1px solid colors.$blue-20;
+}
+
+.tile {
+  text-align: center;
+}

package/src/patient-info/appointment-details.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { mockPatient, renderWithSwr } from '../../../../tools/test-helpers';
+import AppointmentDetails from './appointment-details.component';
+import { usePastVisits } from './../past-visit/past-visit.resource';
+import { useAppointments } from './appointments.resource';
+
+const testProps = {
+  patientUuid: mockPatient.id,
+};
+
+const mockUseAppointments = useAppointments as jest.Mock;
+const mockUsePastVisits = usePastVisits as jest.Mock;
+
+jest.mock('./../past-visit/past-visit.resource', () => ({
+  usePastVisits: jest.fn(),
+}));
+
+jest.mock('./appointments.resource', () => ({
+  useAppointments: jest.fn(),
+}));
+
+describe('RecentandUpcomingAppointments', () => {
+  it('renders no data if past and upcoming visit is empty', async () => {
+    mockUseAppointments.mockReturnValueOnce({ data: [] });
+    mockUsePastVisits.mockReturnValueOnce({ data: [] });
+    renderAppointments();
+
+    expect(screen.getByText(/there is no last encounter to display for this patient/i)).toBeInTheDocument();
+    expect(screen.getByText(/there is no return date to display for this patient/i)).toBeInTheDocument();
+  });
+});
+
+const renderAppointments = () => {
+  renderWithSwr(<AppointmentDetails {...testProps} />);
+};

package/src/patient-info/appointments.resource.tsx

@@ -0,0 +1,43 @@
+import dayjs from 'dayjs';
+import useSWR from 'swr';
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { AppointmentsFetchResponse } from '../types';
+
+export const appointmentsSearchUrl = `/ws/rest/v1/appointments/search`;
+
+export function useAppointments(patientUuid: string, startDate: string) {
+  const abortController = new AbortController();
+
+  const fetcher = () =>
+    openmrsFetch(appointmentsSearchUrl, {
+      method: 'POST',
+      signal: abortController.signal,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: {
+        patientUuid: patientUuid,
+        startDate: startDate,
+      },
+    });
+
+  const { data, error, isLoading, isValidating } = useSWR<AppointmentsFetchResponse, Error>(
+    appointmentsSearchUrl,
+    fetcher,
+  );
+
+  const appointments = data?.data?.length
+    ? data.data.sort((a, b) => (b.startDateTime > a.startDateTime ? 1 : -1))
+    : null;
+
+  const upcomingAppointment = appointments?.find((appointment) =>
+    dayjs((appointment.startDateTime / 1000) * 1000).isAfter(dayjs()),
+  );
+
+  return {
+    upcomingAppointment: upcomingAppointment ? upcomingAppointment : null,
+    isError: error,
+    isLoading,
+    isValidating,
+  };
+}

package/src/patient-info/contact-details.component.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Grid, Row, Column, InlineLoading } from '@carbon/react';
+import { usePatientContactAttributes } from './hooks/usePatientAttributes';
+import styles from './contact-details.scss';
+
+interface ContactDetailsProps {
+  patientId: string;
+  address: Array<fhir.Address>;
+  contact: Array<fhir.ContactPoint>;
+}
+
+const Address: React.FC<{ address?: fhir.Address }> = ({ address }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <p className={styles.heading}>{t('placeOfResidence', 'Place of Residence')}</p>
+      <ul>
+        {address ? (
+          <>
+            <li>{address.postalCode}</li>
+            <li>{address.city}</li>
+            <li>{address.state}</li>
+            <li>{address.country}</li>
+          </>
+        ) : (
+          '--'
+        )}
+      </ul>
+    </div>
+  );
+};
+
+const Contact: React.FC<{ contact: Array<fhir.ContactPoint>; patientUuid: string }> = ({ contact, patientUuid }) => {
+  const { t } = useTranslation();
+  const value = contact?.length ? contact[0].value : '--';
+
+  const { isLoading, contactAttributes } = usePatientContactAttributes(patientUuid);
+
+  return (
+    <div>
+      <p className={styles.heading}>{t('contactDetails', 'Contact Details')}</p>
+      <ul>
+        <li>{value}</li>
+        {isLoading ? (
+          <InlineLoading description={t('loading', 'Loading...')} />
+        ) : (
+          contactAttributes?.map(({ attributeType, value, uuid }) => (
+            <li key={uuid}>
+              {attributeType.display} : {value}
+            </li>
+          ))
+        )}
+      </ul>
+    </div>
+  );
+};
+
+const ContactDetails: React.FC<ContactDetailsProps> = ({ patientId, address, contact }) => {
+  const currentAddress = address ? address.find((a) => a.use === 'home') : undefined;
+
+  return (
+    <div className={styles.container}>
+      <Address address={currentAddress} />
+      <Contact contact={contact} patientUuid={patientId} />
+    </div>
+  );
+};
+
+export default ContactDetails;

package/src/patient-info/contact-details.scss

@@ -0,0 +1,31 @@
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.heading {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+}
+
+.container {
+  background-color: $color-blue-10;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border-top: 1px solid colors.$blue-20;
+  margin-top: spacing.$spacing-01;
+
+  & > div {
+    padding: spacing.$spacing-05;
+  }
+
+  & > div:first-child {
+    border-right: 1px solid colors.$blue-20;
+  }
+
+  & ul > li {
+    padding: spacing.$spacing-02 0;
+    color: $text-02;
+    @include type.type-style('body-compact-01');
+  }
+}

package/src/patient-info/contact-details.test.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { renderWithSwr } from '../../../../tools/test-helpers';
+import { usePatientAttributes, usePatientContactAttributes } from './hooks/usePatientAttributes';
+import ContactDetails from './contact-details.component';
+
+const mockUsePatientAttributes = usePatientAttributes as jest.Mock;
+const mockUsePatientContactAttributes = usePatientContactAttributes as jest.Mock;
+
+jest.mock('./hooks/usePatientAttributes', () => ({
+  usePatientContactAttributes: jest.fn(),
+  usePatientAttributes: jest.fn(),
+}));
+
+let testProps = {
+  address: [
+    {
+      city: 'City9564',
+      country: 'Country9564',
+      id: '0000',
+      postalCode: '18156',
+      state: 'State9564',
+      use: 'home',
+    },
+  ],
+  contact: [{ value: '+0123456789' }],
+  patientId: '1111',
+};
+
+const personAttributeMock = [
+  {
+    display: 'Next of Kin Contact Phone Number = 0000000000',
+    uuid: '1de1ac71-68e8-4a08-a7e2-5042093d4e46',
+    value: '0700-000-000',
+    attributeType: {
+      uuid: 'a657a4f1-9c0f-444b-a1fd-445bb91dd12d',
+      display: 'Next of Kin Contact Phone Number',
+    },
+  },
+];
+
+describe('ContactDetails: ', () => {
+  it("renders the patient's address and contact details when available", async () => {
+    mockUsePatientAttributes.mockReturnValueOnce({
+      isLoading: false,
+      attributes: personAttributeMock,
+      error: null,
+    });
+
+    mockUsePatientContactAttributes.mockReturnValueOnce({
+      isLoading: false,
+      contactAttributes: personAttributeMock,
+    });
+
+    renderContactDetails();
+
+    expect(screen.getByText(/Place of Residence/i)).toBeInTheDocument();
+    expect(screen.getByText(/City9564/)).toBeInTheDocument();
+    expect(screen.getByText(/Country9564/)).toBeInTheDocument();
+    expect(screen.getByText(/18156/)).toBeInTheDocument();
+    expect(screen.getByText(/State9564/)).toBeInTheDocument();
+    expect(screen.getByText(/Contact Details/i)).toBeInTheDocument();
+    expect(screen.getByText(/0123456789/)).toBeInTheDocument();
+  });
+
+  it('renders an empty state view when address and contact information are not available', () => {
+    testProps = {
+      address: null,
+      contact: null,
+      patientId: 'some-uuid',
+    };
+
+    mockUsePatientAttributes.mockReturnValueOnce({
+      isLoading: false,
+      attributes: [],
+      error: null,
+    });
+
+    mockUsePatientContactAttributes.mockReturnValueOnce({
+      isLoading: false,
+      contactAttributes: [],
+    });
+
+    renderContactDetails();
+
+    expect(screen.getByText(/Place of Residence/i)).toBeInTheDocument();
+    expect(screen.getByText(/Contact Details/i)).toBeInTheDocument();
+    expect(screen.getAllByText('--').length).toBe(2);
+  });
+});
+
+function renderContactDetails() {
+  renderWithSwr(<ContactDetails {...testProps} />);
+}

package/src/patient-info/hooks/usePatientAttributes.tsx

@@ -0,0 +1,42 @@
+import { openmrsFetch, useConfig } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+import { ConfigObject } from '../../config-schema';
+import { Patient, Attribute } from '../../types';
+
+const customRepresentation =
+  'custom:(uuid,display,identifiers:(identifier,uuid,preferred,location:(uuid,name),identifierType:(uuid,name,format,formatDescription,validator)),person:(uuid,display,gender,birthdate,dead,age,deathDate,birthdateEstimated,causeOfDeath,preferredName:(uuid,preferred,givenName,middleName,familyName),attributes,preferredAddress:(uuid,preferred,address1,address2,cityVillage,longitude,stateProvince,latitude,country,postalCode,countyDistrict,address3,address4,address5,address6,address7)))';
+
+/**
+ *  React hook that takes a patientUuid and returns patient attributes {@link Attribute}
+ * @param patientUuid Unique patient identifier
+ * @returns An object containing patient attributes, an `isLoading` boolean and an `error` object
+ */
+export const usePatientAttributes = (patientUuid: string) => {
+  const { data, error, isLoading } = useSWRImmutable<{ data: Patient }>(
+    `/ws/rest/v1/patient/${patientUuid}?v=${customRepresentation}`,
+    openmrsFetch,
+  );
+
+  return {
+    isLoading,
+    attributes: data?.data.person.attributes ?? [],
+    error: error,
+  };
+};
+/**
+ *  React hook that takes patientUuid {@link string} and return contact details
+ *  derived from patient-attributes using configured attributeTypes
+ * @param patientUuid Unique patient identifier {@type string}
+ * @returns Object containing `contactAttribute` {@link Attribute} loading status
+ */
+export const usePatientContactAttributes = (patientUuid: string) => {
+  const { contactAttributeType } = useConfig() as ConfigObject;
+  const { attributes, isLoading } = usePatientAttributes(patientUuid);
+  const contactAttributes = attributes.filter(({ attributeType }) =>
+    contactAttributeType?.some((uuid) => attributeType.uuid === uuid),
+  );
+  return {
+    contactAttributes: contactAttributes ?? [],
+    isLoading,
+  };
+};

package/src/patient-info/patient-info.component.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ClickableTile } from '@carbon/react';
+import { ChevronDown, ChevronUp, Edit } from '@carbon/react/icons';
+import { age, ExtensionSlot, formatDate, parseDate, ConfigurableLink } from '@openmrs/esm-framework';
+import AppointmentDetails from './appointment-details.component';
+import ContactDetails from './contact-details.component';
+import styles from './patient-info.scss';
+
+interface PatientInfoProps {
+  patient: fhir.Patient;
+  handlePatientInfoClick: () => void;
+}
+
+const PatientInfo: React.FC<PatientInfoProps> = ({ patient, handlePatientInfoClick }) => {
+  const { t } = useTranslation();
+  const [showContactDetails, setShowContactDetails] = useState<boolean>(false);
+  const patientName = `${patient.name?.[0].given?.join(' ')} ${patient?.name?.[0].family}`;
+  const patientPhotoSlotState = React.useMemo(
+    () => ({ patientUuid: patient.id, patientName }),
+    [patient.id, patientName],
+  );
+
+  const toggleShowMore = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setShowContactDetails((prevState) => !prevState);
+  };
+
+  return (
+    <ClickableTile className={styles.container} onClick={handlePatientInfoClick}>
+      <div className={`${showContactDetails ? styles.activePatientInfoContainer : styles.patientInfoContainer}`}>
+        <ExtensionSlot name="patient-photo-slot" state={patientPhotoSlotState} />
+        <div className={styles.patientInfoContent}>
+          <div className={styles.patientInfoRow}>
+            <span className={styles.patientName}>{patientName}</span>
+            <ConfigurableLink
+              to={`\${openmrsSpaBase}/patient/${patient.id}/edit`}
+              className={styles.patientEditBtn}
+              title={t('editPatientDetails', 'Edit Patient Details')}>
+              <Edit size={16} />
+            </ConfigurableLink>
+          </div>
+          <div className={styles.patientInfoRow}>
+            <div className={styles.demographics}>
+              <span>
+                {(patient.gender ?? t('unknown', 'Unknown')).replace(/^\w/, (c) => c.toUpperCase())} &middot;{' '}
+              </span>
+              <span>{age(patient.birthDate)} &middot; </span>
+              <span>{formatDate(parseDate(patient.birthDate), { mode: 'wide', time: false })}</span>
+            </div>
+          </div>
+          <div className={styles.patientInfoRow}>
+            <span className={styles.identifier}>
+              {patient.identifier.length ? patient.identifier.map((identifier) => identifier.value).join(', ') : '--'}
+            </span>
+            <Button
+              kind="ghost"
+              renderIcon={(props) =>
+                showContactDetails ? <ChevronUp size={16} {...props} /> : <ChevronDown size={16} {...props} />
+              }
+              iconDescription="Toggle contact details"
+              onClick={(e) => toggleShowMore(e)}>
+              {showContactDetails ? t('showLess', 'Show less') : t('showAllDetails', 'Show all details')}
+            </Button>
+          </div>
+        </div>
+      </div>
+      {showContactDetails && (
+        <>
+          <ContactDetails patientId={patient.id} address={patient.address ?? []} contact={patient.contact} />
+          <AppointmentDetails patientUuid={patient.id} />
+        </>
+      )}
+    </ClickableTile>
+  );
+};
+
+export default PatientInfo;

package/src/patient-info/patient-info.scss

@@ -0,0 +1,60 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  border-bottom: 0.0125rem solid $color-gray-30;
+  background-color: $ui-02;
+  padding: 0;
+}
+
+.patientInfoContainer {
+  background-color: $ui-02;
+  padding: 0 0 0 spacing.$spacing-05;
+  display: flex;
+  align-items: center;
+  min-height: 7rem;
+}
+
+.activePatientInfoContainer {
+  background-color: $color-blue-10;
+  padding: 0 0 0 spacing.$spacing-05;
+  display: flex;
+  align-items: center;
+  min-height: 7rem;
+}
+
+.patientName {
+  @include type.type-style('heading-03');
+}
+
+.patientInfoContent {
+  margin: spacing.$spacing-05 0 0 spacing.$spacing-05;
+  width: 100%;
+}
+
+.demographics {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  margin-top: spacing.$spacing-02;
+}
+
+.identifier {
+  @include type.type-style('body-compact-02');
+  color: $ui-04;
+}
+
+.patientInfoRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  & > button {
+    min-height: 2rem;
+  }
+}
+
+.patientEditBtn {
+  color: $ui-05;
+  margin: spacing.$spacing-03;
+}

package/src/patient-info/patient-info.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { screen, render } from '@testing-library/react';
+import { age } from '@openmrs/esm-framework';
+import { mockPatient } from '../../../../tools/test-helpers';
+import PatientInfo from './patient-info.component';
+
+const mockAge = age as jest.Mock;
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+  return {
+    ...originalModule,
+    age: jest.fn(),
+  };
+});
+
+describe('Patient Info', () => {
+  test('should render patient info correctly', async () => {
+    const user = userEvent.setup();
+
+    mockAge.mockReturnValue(35);
+
+    renderPatientInfo();
+
+    expect(screen.getByText(/John Wilson/)).toBeInTheDocument();
+    expect(screen.getByText(/35/)).toBeInTheDocument();
+    expect(screen.getByText(/Male/i)).toBeInTheDocument();
+    expect(screen.getByText(/04 — Apr — 1972/i)).toBeInTheDocument();
+    expect(screen.getByText(/100732HE, 100GEJ/i)).toBeInTheDocument();
+
+    const showDetailsButton = screen.getByRole('button', { name: /Show all details/ });
+    expect(showDetailsButton).toBeInTheDocument();
+
+    await user.click(showDetailsButton);
+
+    expect(screen.queryByRole('button', { name: /Show all details/ })).not.toBeInTheDocument();
+    const showLessButton = screen.getByRole('button', { name: /Show less/i });
+    expect(showLessButton).toBeInTheDocument();
+  });
+});
+
+const renderPatientInfo = () => {
+  render(<PatientInfo handlePatientInfoClick={() => {}} patient={mockPatient} />);
+};