@kenyaemr/esm-appointments-app 7.0.2-pre.65

package/src/past-visit/past-visit.scss

@@ -0,0 +1,106 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.wrapper {
+  margin-top: 0.5rem;
+}
+
+.bodyShort02 {
+  @include type.type-style('body-compact-02');
+}
+
+.bodyLong01 {
+  @include type.type-style('body-01');
+}
+
+.date {
+  @include type.type-style('label-01');
+  color: $text-02;
+  margin: 0.5rem 0rem 0.25rem;
+}
+
+.visitType {
+  @include type.type-style('heading-compact-02');
+}
+
+.container {
+  background-color: $ui-background;
+  border: 1px solid $grey-2;
+  padding: spacing.$spacing-05;
+  margin: spacing.$spacing-05 0rem spacing.$spacing-05;
+  width: 100%;
+}
+
+.tabs > :global(.cds--tab-content) {
+  padding: spacing.$spacing-05 0rem !important;
+}
+
+.header::after {
+  content: '';
+  display: block;
+  width: spacing.$spacing-07;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.visitContainer {
+  background-color: $ui-background;
+  display: grid;
+  grid-template-columns: max-content auto;
+}
+
+.flexSections {
+  display: flex;
+}
+
+.verticalTabs {
+  margin: spacing.$spacing-04 0;
+
+  &:global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-item + .cds--tabs--scrollable__nav-item) {
+    margin-left: 0rem;
+  }
+}
+
+.verticalTabs > ul {
+  flex-direction: column !important;
+}
+
+.desktopTabs {
+  button {
+    height: 32px;
+  }
+}
+
+.tabletTabs {
+  button {
+    height: 48px;
+  }
+}
+
+.tab > button {
+  border-bottom: 0 !important;
+  border-left: 3px solid $ui-03 !important;
+}
+
+.tab > button,
+.tab > button:focus,
+.tab > button:active {
+  outline: 0 !important;
+  outline-offset: 0 !important;
+}
+
+.selectedTab > button {
+  border-left: 3px solid var(--brand-03) !important;
+  border-bottom: 0 !important;
+  font-weight: 600 !important;
+}
+
+.tabContent {
+  border-top: 1px solid $ui-03;
+  padding: spacing.$spacing-05 0;
+  width: 70%;
+}
+.textColor {
+  color: $color-blue-60-2;
+}

package/src/patient-appointments/patient-appointments-action-menu.component.tsx

@@ -0,0 +1,65 @@
+import React, { useCallback, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Layer, OverflowMenu, OverflowMenuItem } from '@carbon/react';
+import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
+import { launchWorkspace, showModal, useLayoutType } from '@openmrs/esm-framework';
+import type { Appointment } from '../types';
+import styles from './patient-appointments-action-menu.scss';
+
+import PatientAppointmentContext, { PatientAppointmentContextTypes } from '../hooks/patientAppointmentContext';
+
+interface appointmentsActionMenuProps {
+  appointment: Appointment;
+  patientUuid: string;
+}
+
+export const PatientAppointmentsActionMenu = ({ appointment, patientUuid }: appointmentsActionMenuProps) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const patientAppointmentContext = useContext(PatientAppointmentContext);
+
+  const launchEditAppointmentForm = useCallback(() => {
+    if (patientAppointmentContext === PatientAppointmentContextTypes.PATIENT_CHART) {
+      launchPatientWorkspace('appointments-form-workspace', {
+        workspaceTitle: t('editAppointment', 'Edit an appointment'),
+        appointment,
+        context: 'editing',
+      });
+    } else {
+      launchWorkspace('edit-appointments-form', {
+        context: 'editing',
+        appointment,
+      });
+    }
+  }, [appointment, t]);
+
+  const launchCancelAppointmentDialog = () => {
+    const dispose = showModal('patient-appointment-cancel-confirmation-dialog', {
+      closeCancelModal: () => dispose(),
+      appointmentUuid: appointment.uuid,
+      patientUuid,
+    });
+  };
+
+  return (
+    <Layer className={styles.layer}>
+      <OverflowMenu aria-label="Edit or delete appointment" size={isTablet ? 'lg' : 'sm'} flipped align="left">
+        <OverflowMenuItem
+          className={styles.menuItem}
+          id="editAppointment"
+          onClick={launchEditAppointmentForm}
+          itemText={t('edit', 'Edit')}
+        />
+        <OverflowMenuItem
+          className={styles.menuItem}
+          id="cancelAppointment"
+          itemText={t('cancel', 'Cancel')}
+          onClick={launchCancelAppointmentDialog}
+          isDelete={true}
+          hasDivider
+        />
+      </OverflowMenu>
+    </Layer>
+  );
+};

package/src/patient-appointments/patient-appointments-action-menu.scss

@@ -0,0 +1,7 @@
+.layer {
+  height: 100%;
+}
+
+.menuItem {
+  max-width: none;
+}

package/src/patient-appointments/patient-appointments-base.component.tsx

@@ -0,0 +1,165 @@
+import React, { useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
+import { Button, ContentSwitcher, DataTableSkeleton, InlineLoading, Layer, Switch, Tile } from '@carbon/react';
+import { Add } from '@carbon/react/icons';
+import { launchWorkspace, useLayoutType } from '@openmrs/esm-framework';
+import { CardHeader, EmptyDataIllustration, ErrorState, launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
+import { usePatientAppointments } from './patient-appointments.resource';
+import PatientAppointmentsTable from './patient-appointments-table';
+import styles from './patient-appointments-base.scss';
+
+import PatientAppointmentContext, { PatientAppointmentContextTypes } from '../hooks/patientAppointmentContext';
+
+interface PatientAppointmentsBaseProps {
+  patientUuid: string;
+}
+
+enum AppointmentTypes {
+  UPCOMING = 0,
+  TODAY = 1,
+  PAST = 2,
+}
+
+const PatientAppointmentsBase: React.FC<PatientAppointmentsBaseProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const headerTitle = t('appointments', 'Appointments');
+  const isTablet = useLayoutType() === 'tablet';
+  const patientAppointmentContext = useContext(PatientAppointmentContext);
+  const [switchedView, setSwitchedView] = useState(false);
+
+  const [contentSwitcherValue, setContentSwitcherValue] = useState(0);
+  const startDate = dayjs(new Date().toISOString()).subtract(6, 'month').toISOString();
+  const {
+    data: appointmentsData,
+    isError,
+    isLoading,
+    isValidating,
+  } = usePatientAppointments(patientUuid, startDate, new AbortController());
+
+  const launchAppointmentsForm = () => {
+    if (patientAppointmentContext === PatientAppointmentContextTypes.PATIENT_CHART) {
+      launchPatientWorkspace('appointments-form-workspace');
+    } else {
+      launchWorkspace('add-appointment', {
+        context: 'creating',
+        patientUuid,
+      });
+    }
+  };
+
+  if (isLoading) return <DataTableSkeleton role="progressbar" compact={!isTablet} zebra />;
+  if (isError) {
+    return <ErrorState headerTitle={headerTitle} error={isError} />;
+  }
+  if (Object.keys(appointmentsData)?.length) {
+    return (
+      <div className={styles.widgetCard}>
+        <CardHeader title={headerTitle}>
+          {isValidating ? (
+            <span>
+              <InlineLoading />
+            </span>
+          ) : null}
+          <div className={styles.contentSwitcherWrapper}>
+            <ContentSwitcher
+              size={isTablet ? 'md' : 'sm'}
+              onChange={({ index }) => {
+                setContentSwitcherValue(index);
+                setSwitchedView(true);
+              }}>
+              <Switch name={'upcoming'} text={t('upcoming', 'Upcoming')} />
+              <Switch name={'today'} text={t('today', 'Today')} />
+              <Switch name={'past'} text={t('past', 'Past')} />
+            </ContentSwitcher>
+            <div className={styles.divider}>|</div>
+            <Button
+              kind="ghost"
+              renderIcon={(props) => <Add size={16} {...props} />}
+              iconDescription="Add Appointments"
+              onClick={launchAppointmentsForm}>
+              {t('add', 'Add')}
+            </Button>
+          </div>
+        </CardHeader>
+        {(() => {
+          if (contentSwitcherValue === AppointmentTypes.UPCOMING) {
+            if (appointmentsData.upcomingAppointments?.length) {
+              return (
+                <PatientAppointmentsTable
+                  patientAppointments={appointmentsData?.upcomingAppointments}
+                  switchedView={switchedView}
+                  setSwitchedView={setSwitchedView}
+                  patientUuid={patientUuid}
+                />
+              );
+            }
+            return (
+              <Layer>
+                <Tile className={styles.tile}>
+                  <EmptyDataIllustration />
+                  <p className={styles.content}>
+                    {t(
+                      'noUpcomingAppointmentsForPatient',
+                      'There are no upcoming appointments to display for this patient',
+                    )}
+                  </p>
+                </Tile>
+              </Layer>
+            );
+          }
+          if (contentSwitcherValue === AppointmentTypes.TODAY) {
+            if (appointmentsData.todaysAppointments?.length) {
+              return (
+                <PatientAppointmentsTable
+                  patientAppointments={appointmentsData?.todaysAppointments}
+                  switchedView={switchedView}
+                  setSwitchedView={setSwitchedView}
+                  patientUuid={patientUuid}
+                />
+              );
+            }
+            return (
+              <Layer>
+                <Tile className={styles.tile}>
+                  <EmptyDataIllustration />
+                  <p className={styles.content}>
+                    {t(
+                      'noCurrentAppointments',
+                      'There are no appointments scheduled for today to display for this patient',
+                    )}
+                  </p>
+                </Tile>
+              </Layer>
+            );
+          }
+
+          if (contentSwitcherValue === AppointmentTypes.PAST) {
+            if (appointmentsData.pastAppointments?.length) {
+              return (
+                <PatientAppointmentsTable
+                  patientAppointments={appointmentsData?.pastAppointments}
+                  switchedView={switchedView}
+                  setSwitchedView={setSwitchedView}
+                  patientUuid={patientUuid}
+                />
+              );
+            }
+            return (
+              <Layer>
+                <Tile className={styles.tile}>
+                  <EmptyDataIllustration />
+                  <p className={styles.content}>
+                    {t('noPastAppointments', 'There are no past appointments to display for this patient')}
+                  </p>
+                </Tile>
+              </Layer>
+            );
+          }
+        })()}
+      </div>
+    );
+  }
+};
+
+export default PatientAppointmentsBase;

package/src/patient-appointments/patient-appointments-base.scss

@@ -0,0 +1,85 @@
+@use '@carbon/colors';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '@openmrs/esm-styleguide/src/vars';
+
+// TO DO Move this styles to style - guide
+// https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-styleguide/src/_vars.scss
+$color-blue-30: #a6c8ff;
+$color-blue-10: #edf5ff;
+
+.widgetCard {
+  border: 1px solid $ui-03;
+  max-width: 60rem;
+  margin: auto;
+  margin-top: spacing.$spacing-05;
+}
+
+.productiveHeading01 {
+  @include type.type-style('heading-compact-01');
+}
+
+.contentSwitcherWrapper {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  width: 60%;
+}
+
+.contentSwitcherWrapper > div > button {
+  background-color: $ui-02;
+}
+
+.contentSwitcherWrapper > div button:first-child {
+  border-top: 1px solid $color-blue-30;
+  border-bottom: 1px solid $color-blue-30;
+  border-left: 1px solid $color-blue-30;
+  border-right: none;
+  border-radius: spacing.$spacing-02 0 0px spacing.$spacing-02;
+}
+
+.contentSwitcherWrapper > div button:last-child {
+  border-top: 1px solid $color-blue-30;
+  border-bottom: 1px solid $color-blue-30;
+  border-right: 1px solid $color-blue-30;
+  border-left: none;
+  border-radius: 0px spacing.$spacing-02 spacing.$spacing-02 0px;
+}
+
+.contentSwitcherWrapper > div > button[aria-selected='true'],
+.contentSwitcherWrapper > div > button[aria-selected='true']:first-child {
+  background-color: $color-blue-10;
+  color: $color-blue-60-2;
+  border-color: $color-blue-60-2;
+  border-right: 1px solid $color-blue-60-2;
+}
+
+.contentSwitcherWrapper > div > button[aria-selected='true'],
+.contentSwitcherWrapper > div > button[aria-selected='true']:last-child {
+  background-color: $color-blue-10;
+  color: $color-blue-60-2;
+  border-color: $color-blue-60-2;
+  border-left: 1px solid $color-blue-60-2;
+}
+
+.contentSwitcherWrapper > div > button[aria-selected='true']:focus {
+  box-shadow: none;
+}
+
+.divider {
+  width: 1px;
+  height: spacing.$spacing-05;
+  color: colors.$gray-20;
+  margin: 0 spacing.$spacing-05;
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: spacing.$spacing-05;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.tile {
+  text-align: center;
+}

package/src/patient-appointments/patient-appointments-base.test.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { mockAppointmentsData } from '__mocks__';
+import { mockPatient, patientChartBasePath, renderWithSwr, waitForLoadingToFinish } from 'tools';
+import AppointmentsBase from './patient-appointments-base.component';
+
+const testProps = {
+  basePath: patientChartBasePath,
+  patientUuid: mockPatient.id,
+};
+
+const mockOpenmrsFetch = openmrsFetch as jest.Mock;
+
+describe('AppointmensOverview', () => {
+  it('renders an empty state if appointments data is unavailable', async () => {
+    mockOpenmrsFetch.mockReturnValueOnce({ data: [] });
+
+    renderAppointments();
+
+    await waitForLoadingToFinish();
+
+    expect(screen.getByRole('heading', { name: /appointments/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /add/i })).toBeInTheDocument();
+  });
+
+  it('renders an error state if there was a problem fetching appointments data', async () => {
+    const error = {
+      message: 'Internal server error',
+      response: {
+        status: 500,
+        statusText: 'Internal server error',
+      },
+    };
+
+    mockOpenmrsFetch.mockRejectedValueOnce(error);
+
+    renderAppointments();
+
+    await waitForLoadingToFinish();
+
+    expect(screen.getByRole('heading', { name: /appointments/i })).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'Sorry, there was a problem displaying this information. You can try to reload this page, or contact the site administrator and quote the error code above.',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it(`renders a tabular overview of the patient's appointment schedule if available`, async () => {
+    const user = userEvent.setup();
+
+    mockOpenmrsFetch.mockReturnValueOnce(mockAppointmentsData);
+
+    renderAppointments();
+
+    await waitForLoadingToFinish();
+
+    expect(screen.getByRole('heading', { name: /appointments/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /add/i })).toBeInTheDocument();
+
+    const upcomingAppointmentsTab = screen.getByRole('tab', { name: /upcoming/i });
+    const pastAppointmentsTab = screen.getByRole('tab', { name: /past/i });
+
+    expect(screen.getByRole('tablist')).toContainElement(upcomingAppointmentsTab);
+    expect(screen.getByRole('tablist')).toContainElement(pastAppointmentsTab);
+    expect(screen.getByTitle(/Empty data illustration/i)).toBeInTheDocument();
+    expect(screen.getByText(/There are no upcoming appointments to display for this patient/i)).toBeInTheDocument();
+
+    await user.click(pastAppointmentsTab);
+    expect(screen.getByRole('table')).toBeInTheDocument();
+
+    const expectedColumnHeaders = [/date/, /location/, /service/];
+    expectedColumnHeaders.forEach((header) => {
+      expect(screen.getByRole('columnheader', { name: new RegExp(header, 'i') })).toBeInTheDocument();
+    });
+
+    expect(screen.getAllByRole('row').length).toEqual(7); // 7 appts in mock data + header row
+
+    const previousPageButton = screen.getByRole('button', { name: /previous page/i });
+    const nextPageButton = screen.getByRole('button', { name: /next page/i });
+
+    expect(previousPageButton).toBeDisabled();
+    expect(nextPageButton).toBeDisabled();
+  });
+});
+
+function renderAppointments() {
+  renderWithSwr(<AppointmentsBase {...testProps} />);
+}

package/src/patient-appointments/patient-appointments-cancel-modal.component.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { changeAppointmentStatus, usePatientAppointments } from './patient-appointments.resource';
+
+interface PatientCancelAppointmentModalProps {
+  closeCancelModal: () => void;
+  appointmentUuid: string;
+  patientUuid: string;
+}
+
+const PatientCancelAppointmentModal: React.FC<PatientCancelAppointmentModalProps> = ({
+  closeCancelModal,
+  appointmentUuid,
+  patientUuid,
+}) => {
+  const { t } = useTranslation();
+  const { mutate } = usePatientAppointments(patientUuid, new Date().toUTCString(), new AbortController());
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleCancel = async () => {
+    setIsSubmitting(true);
+
+    changeAppointmentStatus('Cancelled', appointmentUuid)
+      .then(({ status }) => {
+        if (status === 200) {
+          mutate();
+          closeCancelModal();
+          showSnackbar({
+            isLowContrast: true,
+            kind: 'success',
+            subtitle: t('appointmentCancelledSuccessfully', 'Appointment cancelled successfully'),
+            title: t('appointmentCancelled', 'Appointment cancelled'),
+          });
+        }
+      })
+      .catch((err) => {
+        showSnackbar({
+          title: t('appointmentCancelError', 'Error cancelling appointment'),
+          kind: 'error',
+          isLowContrast: true,
+          subtitle: err?.message,
+        });
+      });
+  };
+
+  return (
+    <div>
+      <ModalHeader closeModal={closeCancelModal} title={t('cancelAppointment', 'Cancel appointment')} />
+      <ModalBody>
+        <p>{t('cancelAppointmentModalConfirmationText', 'Are you sure you want to cancel this appointment?')}</p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeCancelModal}>
+          {t('discard', 'Discard')}
+        </Button>
+        <Button kind="danger" onClick={handleCancel} disabled={isSubmitting}>
+          {t('cancelAppointment', 'Cancel appointment')}
+        </Button>
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default PatientCancelAppointmentModal;

package/src/patient-appointments/patient-appointments-detailed-summary.component.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import PatientAppointmentsBase from './patient-appointments-base.component';
+
+interface PatientAppointmentsDetailedSummaryProps {
+  patientUuid: string;
+}
+/**
+ * This component is wired in as an extension to render the patient appointments view (all appointments for a single patient) within of the context of the patient chart.
+ * It uses the PatientAppointmentsBase component to render the actual appointments data.
+ */
+const PatientAppointmentsDetailedSummary: React.FC<PatientAppointmentsDetailedSummaryProps> = ({ patientUuid }) => {
+  return <PatientAppointmentsBase patientUuid={patientUuid} />;
+};
+
+export default PatientAppointmentsDetailedSummary;

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

@@ -0,0 +1,27 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.patientBanner {
+  display: flex;
+}
+
+.patientAvatar {
+  width: 5rem;
+  height: 5rem;
+  margin: 1rem;
+  border-radius: 1px;
+}
+
+.divider {
+  border: 0;
+  border-top: 0.075rem solid colors.$gray-20;
+  width: 100%;
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .titleContent {
+    margin-left: 1rem;
+  }
+}

package/src/patient-appointments/patient-appointments-header.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ArrowLeft } from '@carbon/react/icons';
+import { Button } from '@carbon/react';
+import { useNavigate } from 'react-router-dom';
+import styles from './patient-appointments-header.scss';
+import { PatientBannerPatientInfo, PatientPhoto, displayName } from '@openmrs/esm-framework';
+
+interface PatientAppointmentsHeaderProps {
+  patient: fhir.Patient;
+}
+
+const PatientAppointmentsHeader: React.FC<PatientAppointmentsHeaderProps> = ({ patient }) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const patientName = displayName(patient);
+
+  return (
+    <div>
+      <div className={styles.titleContainer}>
+        <Button
+          kind="ghost"
+          onClick={() => navigate(-1)}
+          renderIcon={ArrowLeft}
+          iconDescription={t('back', 'Back')}
+          size="lg">
+          <span>{t('back', 'Back')}</span>
+        </Button>
+      </div>
+      <div className={styles.divider}></div>
+      <div className={styles.patientBanner}>
+        <div className={styles.patientAvatar} role="img">
+          <PatientPhoto patientUuid={patient.id} patientName={patientName} />
+        </div>
+        <PatientBannerPatientInfo patient={patient}></PatientBannerPatientInfo>
+      </div>
+      <div className={styles.divider}></div>
+    </div>
+  );
+};
+
+export default PatientAppointmentsHeader;