@openmrs/esm-appointments-app 10.0.2 → 10.0.3-pre.2

package/src/appointments/appointment-tabs.component.tsx

@@ -5,42 +5,64 @@ import { useConfig } from '@openmrs/esm-framework';
 import { type ConfigObject } from '../config-schema';
 import ScheduledAppointments from './scheduled/scheduled-appointments.component';
 import UnscheduledAppointments from './unscheduled/unscheduled-appointments.component';
+import EarlyAppointments from './scheduled/early-appointments.component';
 import styles from './appointment-tabs.scss';
 
-interface AppointmentTabsProps {
-  appointmentServiceTypes: Array<string>;
-}
-
-const AppointmentTabs: React.FC<AppointmentTabsProps> = ({ appointmentServiceTypes }) => {
+/**
+ * By default, this component shows just a table of sheduled appoingments. If the config option
+ * `showUnscheduledAppointmentsTab` or `showEarlyAppointmentsTab` is enabled (or both), then it shows tabs
+ * to render the respective tables.
+ */
+const AppointmentTabs: React.FC<{}> = () => {
   const { t } = useTranslation();
-  const { showUnscheduledAppointmentsTab } = useConfig<ConfigObject>();
+  const { showUnscheduledAppointmentsTab, showEarlyAppointmentsTab } = useConfig<ConfigObject>();
   const [activeTabIndex, setActiveTabIndex] = useState(0);
 
   const handleTabChange = ({ selectedIndex }: { selectedIndex: number }) => {
     setActiveTabIndex(selectedIndex);
   };
 
+  type TabLabelAndComponent = {
+    label: string;
+    component: React.ReactNode;
+  };
+
+  const tabsToShow: TabLabelAndComponent[] = [
+    { label: t('scheduled', 'Scheduled'), component: <ScheduledAppointments /> },
+  ];
+
+  if (showUnscheduledAppointmentsTab) {
+    tabsToShow.push({ label: t('unscheduled', 'Unscheduled'), component: <UnscheduledAppointments /> });
+  }
+
+  if (showEarlyAppointmentsTab) {
+    tabsToShow.push({ label: t('early', 'Early'), component: <EarlyAppointments /> });
+  }
+
+  // only show tabs if there are more than 1, otherwise just show <ScheduledAppointments />
   return (
     <div className={styles.appointmentList} data-testid="appointment-list">
-      {showUnscheduledAppointmentsTab ? (
+      {tabsToShow.length > 1 ? (
         <div className={styles.tabs}>
           <Tabs selectedIndex={activeTabIndex} onChange={handleTabChange}>
             <TabList style={{ paddingLeft: '1rem' }} aria-label="Appointment tabs" contained>
-              <Tab className={styles.tab}>{t('scheduled', 'Scheduled')}</Tab>
-              <Tab className={styles.tab}>{t('unscheduled', 'Unscheduled')}</Tab>
+              {tabsToShow.map((tab) => (
+                <Tab key={tab.label} className={styles.tab}>
+                  {tab.label}
+                </Tab>
+              ))}
             </TabList>
             <TabPanels>
-              <TabPanel className={styles.tabPanel}>
-                <ScheduledAppointments appointmentServiceTypes={appointmentServiceTypes} />
-              </TabPanel>
-              <TabPanel className={styles.tabPanel}>
-                <UnscheduledAppointments />
-              </TabPanel>
+              {tabsToShow.map((tab) => (
+                <TabPanel key={tab.label} className={styles.tabPanel}>
+                  {tab.component}
+                </TabPanel>
+              ))}
             </TabPanels>
           </Tabs>
         </div>
       ) : (
-        <ScheduledAppointments appointmentServiceTypes={appointmentServiceTypes} />
+        <ScheduledAppointments />
       )}
     </div>
   );

package/src/appointments/common-components/appointments-actions.component.tsx

@@ -1,45 +1,42 @@
 import React from 'react';
-import dayjs from 'dayjs';
-import isToday from 'dayjs/plugin/isToday';
-import utc from 'dayjs/plugin/utc';
 import { Button } from '@carbon/react';
-import { TaskComplete } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
 import { navigate, showModal, useConfig } from '@openmrs/esm-framework';
 import { type Appointment, AppointmentStatus } from '../../types';
 import { type ConfigObject } from '../../config-schema';
-import { useTodaysVisits } from '../../hooks/useTodaysVisits';
 import CheckInButton from './checkin-button.component';
 import styles from './appointments-actions.scss';
 
-dayjs.extend(utc);
-dayjs.extend(isToday);
-
 interface AppointmentsActionsProps {
   appointment: Appointment;
+  hasActiveVisit: boolean;
+  mutateVisits: () => void;
 }
 
-const AppointmentsActions: React.FC<AppointmentsActionsProps> = ({ appointment }) => {
+const AppointmentsActions: React.FC<AppointmentsActionsProps> = ({ appointment, hasActiveVisit, mutateVisits }) => {
   const { t } = useTranslation();
   const { checkInButton, checkOutButton } = useConfig<ConfigObject>();
-  const { visits, mutateVisit } = useTodaysVisits(); // TODO doesn't work if visit didn't start today?  what about inpatient?
+
   const patientUuid = appointment.patient.uuid;
-  const visitDate = dayjs(appointment.startDateTime);
-  const hasActiveVisitToday = visits?.some(
-    (visit) => visit?.patient?.uuid === patientUuid && visit?.startDatetime && !visit?.stopDatetime,
-  );
-  const isTodaysAppointment = visitDate.isToday();
+
   const isCheckedIn = appointment.status === AppointmentStatus.CHECKEDIN;
   const isCompleted = appointment.status === AppointmentStatus.COMPLETED;
   const isCancelled = appointment.status === AppointmentStatus.CANCELLED;
+  const isScheduled = appointment.status === AppointmentStatus.SCHEDULED;
 
   const handleCheckout = () => {
     if (checkOutButton.customUrl) {
-      navigate({ to: checkOutButton.customUrl, templateParams: { patientUuid, appointmentUuid: appointment.uuid } });
+      navigate({
+        to: checkOutButton.customUrl,
+        templateParams: {
+          patientUuid,
+          appointmentUuid: appointment.uuid,
+        },
+      });
     } else {
       const dispose = showModal('end-appointment-modal', {
         closeModal: () => {
-          mutateVisit();
+          mutateVisits();
           dispose();
         },
         patientUuid,
@@ -48,39 +45,34 @@ const AppointmentsActions: React.FC<AppointmentsActionsProps> = ({ appointment }
     }
   };
 
-  const renderVisitStatus = () => {
-    switch (true) {
-      case isCancelled:
-        return (
-          <Button kind="danger--ghost" iconDescription={t('cancelled', 'Cancelled')} size="sm">
-            {t('cancelled', 'Cancelled')}
-          </Button>
-        );
-      case isCompleted:
-        return (
-          <Button kind="ghost" renderIcon={TaskComplete} iconDescription={t('checkedOut', 'Checked out')} size="sm">
-            {t('checkedOut', 'Checked out')}
-          </Button>
-        );
-      case checkOutButton.enabled && isCheckedIn:
-        return (
-          <Button onClick={handleCheckout} kind="danger--tertiary" size="sm">
-            {t('checkOut', 'Check out')}
-          </Button>
-        );
-      case checkInButton.enabled && (!hasActiveVisitToday || checkInButton.showIfActiveVisit) && isTodaysAppointment: {
-        return <CheckInButton patientUuid={patientUuid} appointment={appointment} />;
-      }
-      default:
-        return null;
+  const renderActions = () => {
+    if (isCancelled || isCompleted) {
+      return null;
     }
+
+    if (checkOutButton.enabled && isCheckedIn) {
+      return (
+        <Button onClick={handleCheckout} kind="danger--tertiary" size="sm">
+          {t('checkOut', 'Check out')}
+        </Button>
+      );
+    }
+
+    if (isScheduled && checkInButton.enabled) {
+      return (
+        <CheckInButton
+          patientUuid={patientUuid}
+          appointment={appointment}
+          hasActiveVisit={hasActiveVisit}
+          mutateVisits={mutateVisits}
+        />
+      );
+    }
+
+    return null;
   };
 
-  return (
-    <div className={styles.container}>
-      <>{renderVisitStatus()}</>
-    </div>
-  );
+  return <div className={styles.container}>{renderActions()}</div>;
 };
 
 export default AppointmentsActions;

package/src/appointments/common-components/appointments-actions.test.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
-import { useTodaysVisits } from '../../hooks/useTodaysVisits';
 import { type ConfigObject, configSchema } from '../../config-schema';
 import { type Appointment, AppointmentKind, AppointmentStatus } from '../../types';
 import AppointmentActions from './appointments-actions.component';
+import { changeAppointmentStatus } from '../../patient-appointments/patient-appointments.resource';
+import userEvent from '@testing-library/user-event';
+
+jest.mock('../../patient-appointments/patient-appointments.resource');
+const mockChangeAppointmentStatus = changeAppointmentStatus as jest.Mock;
 
 const appointment: Appointment = {
   uuid: '7cd38a6d-377e-491b-8284-b04cf8b8c6d8',
@@ -51,168 +55,117 @@ const appointment: Appointment = {
 };
 
 const defaultProps = {
-  visits: [],
   appointment: appointment,
-  scheduleType: 'Pending',
-  mutate: () => {},
+  hasActiveVisit: false,
 };
 
 const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
-const mockUseTodaysVisits = jest.mocked(useTodaysVisits);
-
-jest.mock('../../hooks/useTodaysVisits', () => ({
-  ...jest.requireActual('../../hooks/useTodaysVisits'),
-  useTodaysVisits: jest.fn(),
-}));
 
 describe('AppointmentActions', () => {
   afterAll(() => {
     jest.useRealTimers();
   });
 
-  it('renders the check in button when appointment is today and the patient has not checked in and check in button enabled', () => {
+  it('renders the check in button when appointment is scheduled and check in button is enabled', () => {
     appointment.status = AppointmentStatus.SCHEDULED;
 
     mockUseConfig.mockReturnValue({
       ...getDefaultsFromConfigSchema(configSchema),
-      checkInButton: { enabled: true, showIfActiveVisit: false, customUrl: '' },
+      checkInButton: { enabled: true, customUrl: '' },
       checkOutButton: { enabled: true, customUrl: '' },
     });
 
-    mockUseTodaysVisits.mockReturnValue({
-      visits: [],
-      error: null,
-      isLoading: false,
-      mutateVisit: jest.fn(),
-    });
-
-    const props = { ...defaultProps };
-    render(<AppointmentActions {...props} />);
+    render(<AppointmentActions {...defaultProps} />);
 
     expect(screen.getByText(/check in/i)).toBeInTheDocument();
   });
 
-  it('does not render the check in button when appointment is today and the patient has not checked in but the check-in button is disabled', () => {
+  it('does not render the check in button when appointment is scheduled but the check-in button is disabled', () => {
     appointment.status = AppointmentStatus.SCHEDULED;
 
     mockUseConfig.mockReturnValue({
       ...getDefaultsFromConfigSchema(configSchema),
-      checkInButton: { enabled: false, showIfActiveVisit: false, customUrl: '' },
+      checkInButton: { enabled: false, customUrl: '' },
       checkOutButton: { enabled: true, customUrl: '' },
     });
 
-    mockUseTodaysVisits.mockReturnValue({
-      visits: [],
-      error: null,
-      isLoading: false,
-      mutateVisit: jest.fn(),
-    });
-
-    const props = { ...defaultProps };
-    render(<AppointmentActions {...props} />);
+    render(<AppointmentActions {...defaultProps} />);
 
     expect(screen.queryByText(/check in/i)).not.toBeInTheDocument();
   });
 
-  it('renders the checked out button when the patient has checked out', () => {
+  it('does not render any action buttons when the appointment is completed', () => {
     appointment.status = AppointmentStatus.COMPLETED;
 
     mockUseConfig.mockReturnValue({
       ...getDefaultsFromConfigSchema(configSchema),
-      checkInButton: { enabled: true, showIfActiveVisit: false, customUrl: '' },
+      checkInButton: { enabled: true, customUrl: '' },
       checkOutButton: { enabled: true, customUrl: '' },
     });
 
-    mockUseTodaysVisits.mockReturnValue({
-      visits: [
-        {
-          patient: { uuid: '8673ee4f-e2ab-4077-ba55-4980f408773e' },
-          startDatetime: new Date().toISOString(),
-          stopDatetime: new Date().toISOString(),
-          uuid: '',
-          encounters: [],
-          visitType: {
-            uuid: '',
-            display: 'Facility Visit',
-          },
-        },
-      ],
-      error: null,
-      isLoading: false,
-      mutateVisit: jest.fn(),
+    render(<AppointmentActions {...defaultProps} />);
+
+    expect(screen.queryByText(/check in/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/check out/i)).not.toBeInTheDocument();
+  });
+
+  it('does not render any action buttons when the appointment is missed', () => {
+    appointment.status = AppointmentStatus.MISSED;
+
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+      checkInButton: { enabled: true, customUrl: '' },
+      checkOutButton: { enabled: true, customUrl: '' },
     });
 
-    const props = { ...defaultProps };
-    render(<AppointmentActions {...props} />);
+    render(<AppointmentActions {...defaultProps} />);
 
-    expect(screen.getByText('Checked out')).toBeInTheDocument();
+    expect(screen.queryByText(/check in/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/check out/i)).not.toBeInTheDocument();
   });
 
-  it('renders the check out button when the patient has an active visit and today is the appointment date and the check out button enabled', () => {
+  it('renders the check out button when the appointment status is checked in and the check out button is enabled', () => {
     appointment.status = AppointmentStatus.CHECKEDIN;
 
     mockUseConfig.mockReturnValue({
       ...getDefaultsFromConfigSchema(configSchema),
-      checkInButton: { enabled: true, showIfActiveVisit: false, customUrl: '' },
+      checkInButton: { enabled: true, customUrl: '' },
       checkOutButton: { enabled: true, customUrl: '' },
     });
 
-    mockUseTodaysVisits.mockReturnValue({
-      visits: [
-        {
-          patient: { uuid: '8673ee4f-e2ab-4077-ba55-4980f408773e' },
-          startDatetime: new Date().toISOString(),
-          stopDatetime: null,
-          uuid: '',
-          encounters: [],
-          visitType: {
-            uuid: '',
-            display: 'Facility Visit',
-          },
-        },
-      ],
-      error: null,
-      isLoading: false,
-      mutateVisit: jest.fn(),
-    });
-
-    const props = { ...defaultProps, scheduleType: 'Scheduled' };
-    render(<AppointmentActions {...props} />);
+    render(<AppointmentActions {...defaultProps} />);
 
     expect(screen.getByText(/check out/i)).toBeInTheDocument();
   });
 
-  it('does not render check out button when the patient has an active visit and today is the appointment date but the check out button is disabled', () => {
+  it('does not render the check out button when the appointment status is checked in but the check out button is disabled', () => {
     appointment.status = AppointmentStatus.CHECKEDIN;
 
     mockUseConfig.mockReturnValue({
       ...getDefaultsFromConfigSchema(configSchema),
-      checkInButton: { enabled: true, showIfActiveVisit: false, customUrl: '' },
+      checkInButton: { enabled: true, customUrl: '' },
       checkOutButton: { enabled: false, customUrl: '' },
     });
 
-    mockUseTodaysVisits.mockReturnValue({
-      visits: [
-        {
-          patient: { uuid: '8673ee4f-e2ab-4077-ba55-4980f408773e' },
-          startDatetime: new Date().toISOString(),
-          stopDatetime: null,
-          uuid: '',
-          encounters: [],
-          visitType: {
-            uuid: '',
-            display: 'Facility Visit',
-          },
-        },
-      ],
-      error: null,
-      isLoading: false,
-      mutateVisit: jest.fn(),
+    render(<AppointmentActions {...defaultProps} />);
+
+    expect(screen.queryByText(/check out/i)).not.toBeInTheDocument();
+  });
+
+  it('calls changeAppointmentStatus when active visit exists and check-in clicked', async () => {
+    appointment.status = AppointmentStatus.SCHEDULED;
+
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+      checkInButton: { enabled: true, customUrl: '' },
     });
 
-    const props = { ...defaultProps, scheduleType: 'Scheduled' };
-    render(<AppointmentActions {...props} />);
+    mockChangeAppointmentStatus.mockResolvedValue({});
+    render(<AppointmentActions {...defaultProps} hasActiveVisit={true} />);
 
-    expect(screen.queryByText(/check out/i)).not.toBeInTheDocument();
+    const btn = screen.getByRole('button', { name: /check in/i });
+    await userEvent.click(btn);
+
+    expect(mockChangeAppointmentStatus).toHaveBeenCalledWith('CheckedIn', appointment.uuid);
   });
 });