@kenyaemr/esm-service-queues-app 7.0.2-pre.65

package/src/past-visit/past-visit.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import PastVisitSummary from './past-visit-details/past-visit-summary.component';
+import userEvent from '@testing-library/user-event';
+import { mockPastVisit } from '__mocks__';
+import { mockPatient, renderWithSwr } from 'tools';
+import { usePastVisits } from './past-visit.resource';
+
+const mockUsePastVisits = usePastVisits as jest.Mock;
+
+jest.mock('./past-visit.resource', () => ({
+  usePastVisits: jest.fn(),
+}));
+
+describe('PastVisit: ', () => {
+  it('renders an empty state when notes, encounters, medications, and vitals data is not available', async () => {
+    const user = userEvent.setup();
+
+    mockUsePastVisits.mockReturnValueOnce({
+      data: mockPastVisit.data.results,
+    });
+
+    renderPastVisitTabs();
+
+    expect(screen.queryAllByText(/vitals/i));
+    const vitalsTab = screen.getByRole('tab', { name: /vitals/i });
+
+    expect(vitalsTab).toBeInTheDocument();
+
+    expect(screen.getByRole('tab', { name: /notes/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /medications/i })).toBeInTheDocument();
+
+    await user.click(vitalsTab);
+
+    expect(vitalsTab).toHaveAttribute('aria-selected', 'true');
+  });
+});
+
+function renderPastVisitTabs() {
+  renderWithSwr(<PastVisitSummary patientUuid={mockPatient.id} encounters={[]} />);
+}

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, type 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 { type 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';
+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.ts

@@ -0,0 +1,43 @@
+import dayjs from 'dayjs';
+import useSWR from 'swr';
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type AppointmentsFetchResponse } from '../types';
+
+export const appointmentsSearchUrl = `${restBaseUrl}/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/hooks/usePatientAttributes.tsx

@@ -0,0 +1,42 @@
+import { openmrsFetch, restBaseUrl, useConfig, type Patient } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+import { type ConfigObject } from '../../config-schema';
+import { type 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 }>(
+    `${restBaseUrl}/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<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,82 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { ClickableTile } from '@carbon/react';
+import { Edit } from '@carbon/react/icons';
+import {
+  age,
+  displayName,
+  formatDate,
+  parseDate,
+  ConfigurableLink,
+  PatientPhoto,
+  PatientBannerToggleContactDetailsButton,
+  PatientBannerContactDetails,
+} from '@openmrs/esm-framework';
+import AppointmentDetails from './appointment-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 = displayName(patient);
+
+  const toggleShowMore = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setShowContactDetails((prevState) => !prevState);
+  };
+
+  return (
+    <ClickableTile className={styles.container} onClick={handlePatientInfoClick}>
+      <div
+        className={classNames({
+          [styles.activePatientInfoContainer]: showContactDetails,
+          [styles.patientInfoContainer]: !showContactDetails,
+        })}>
+        <PatientPhoto patientUuid={patient.id} patientName={patientName} size="small" />
+        <div className={styles.patientInfoContent}>
+          <div className={styles.patientInfoRow}>
+            <span className={styles.patientName}>{patientName}</span>
+            <ConfigurableLink
+              className={styles.patientEditBtn}
+              to={`\${openmrsSpaBase}/patient/${patient.id}/edit`}
+              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>
+            <PatientBannerToggleContactDetailsButton
+              showContactDetails={showContactDetails}
+              toggleContactDetails={toggleShowMore}
+            />
+          </div>
+        </div>
+      </div>
+      {showContactDetails && (
+        <>
+          <PatientBannerContactDetails patientId={patient.id} deceased={patient.deceasedBoolean} />
+          <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,43 @@
+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, mockPatientWithLongName, mockPatientWithoutFormattedName } from 'tools';
+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', () => {
+  it.each([
+    [mockPatient, 'Wilson, John'],
+    [mockPatientWithLongName, 'family name, Some very long given name'],
+    [mockPatientWithoutFormattedName, 'given middle family name'],
+  ])(`should render patient info correctly`, async (patient, displayName) => {
+    const user = userEvent.setup();
+
+    mockAge.mockReturnValue(35);
+
+    renderPatientInfo(patient);
+
+    expect(screen.getByText(new RegExp(displayName))).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.getByText('Patient Banner Toggle Contact Details Button');
+    expect(showDetailsButton).toBeInTheDocument();
+  });
+});
+
+const renderPatientInfo = (patient) => {
+  render(<PatientInfo handlePatientInfoClick={() => {}} patient={patient} />);
+};

package/src/patient-queue-header/patient-queue-header.component.tsx

@@ -0,0 +1,99 @@
+import React, { useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar, Location } from '@carbon/react/icons';
+import { Dropdown } from '@carbon/react';
+import { formatDate, useSession } from '@openmrs/esm-framework';
+import PatientQueueIllustration from './patient-queue-illustration.component';
+import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
+
+import {
+  updateSelectedQueueLocationUuid,
+  updateSelectedQueueLocationName,
+  updateSelectedServiceName,
+  useSelectedQueueLocationName,
+  useSelectedQueueLocationUuid,
+} from '../helpers/helpers';
+import styles from './patient-queue-header.scss';
+
+const PatientQueueHeader: React.FC<{ title?: string }> = ({ title }) => {
+  const { t } = useTranslation();
+  const { queueLocations, isLoading, error } = useQueueLocations();
+  const userSession = useSession();
+  const userLocation = userSession?.sessionLocation?.display;
+  const currentQueueLocationName = useSelectedQueueLocationName();
+  const currentQueueLocationUuid = useSelectedQueueLocationUuid();
+
+  const handleQueueLocationChange = useCallback(({ selectedItem }) => {
+    if (selectedItem.id === 'all') {
+      updateSelectedQueueLocationUuid(null);
+      updateSelectedQueueLocationName(null);
+    } else {
+      updateSelectedQueueLocationUuid(selectedItem.id);
+      updateSelectedQueueLocationName(selectedItem.name);
+      updateSelectedServiceName('All');
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isLoading && !error && !currentQueueLocationUuid) {
+      if (queueLocations.length === 1) {
+        handleQueueLocationChange({ selectedItem: queueLocations[0] });
+      }
+      if (queueLocations.some((location) => location.id === userSession?.sessionLocation?.uuid)) {
+        handleQueueLocationChange({
+          selectedItem: {
+            id: userSession?.sessionLocation?.uuid,
+            name: userSession?.sessionLocation?.display,
+          },
+        });
+      }
+    }
+  }, [
+    queueLocations,
+    currentQueueLocationName,
+    currentQueueLocationUuid,
+    isLoading,
+    error,
+    userSession?.sessionLocation?.uuid,
+  ]);
+
+  return (
+    <>
+      <div className={styles.header} data-testid="patient-queue-header">
+        <div className={styles['left-justified-items']}>
+          <PatientQueueIllustration />
+          <div className={styles['page-labels']}>
+            <p>{t('serviceQueues', 'Service queues')}</p>
+            <p className={styles['page-name']}>{title ?? t('home', 'Home')}</p>
+          </div>
+        </div>
+        <div className={styles['right-justified-items']}>
+          <div className={styles['date-and-location']}>
+            <Location size={16} />
+            <span className={styles.value}>{userLocation}</span>
+            <span className={styles.middot}>&middot;</span>
+            <Calendar size={16} />
+            <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
+          </div>
+          <div className={styles.dropdownContainer}>
+            <Dropdown
+              aria-label="Select queue location"
+              className={styles.dropdown}
+              id="queueLocationDropdown"
+              label={currentQueueLocationName ?? t('all', 'All')}
+              items={
+                queueLocations.length !== 1 ? [{ id: 'all', name: t('all', 'All') }, ...queueLocations] : queueLocations
+              }
+              itemToString={(item) => (item ? item.name : '')}
+              titleText={t('location', 'Location')}
+              type="inline"
+              onChange={handleQueueLocationChange}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default PatientQueueHeader;

package/src/patient-queue-header/patient-queue-header.scss

@@ -0,0 +1,90 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.header {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  height: spacing.$spacing-12;
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  border-left: 0px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.left-justified-items {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.right-justified-items {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  padding-top: 1rem;
+}
+
+.page-name {
+  @include type.type-style('heading-04');
+}
+
+.page-labels {
+  p:first-of-type {
+    margin-bottom: 0.25rem;
+  }
+}
+
+.date-and-location {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-right: 1rem;
+}
+
+.value {
+  margin-left: 0.25rem;
+}
+
+.middot {
+  margin: 0 0.5rem;
+}
+
+.view {
+  @include type.type-style('label-01');
+}
+
+.dropdownContainer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: 0.5rem;
+}
+
+.dropdown {
+  :global(.cds--list-box__field) {
+    width: 14rem;
+    overflow: hidden;
+  }
+
+  :global(.cds--dropdown--inline .cds--list-box__menu) {
+    left: -4rem;
+  }
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .date-and-location {
+    margin-right: unset;
+    margin-left: spacing.$spacing-05;
+    & > svg:first-child {
+      order: -1;
+    }
+    & > svg:nth-child(4) {
+      order: 1;
+    }
+    & > span:nth-child(2) {
+      order: -2;
+    }
+  }
+}