@kenyaemr/esm-appointments-app 8.1.1-pre.124 → 8.1.2-pre.152

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-appointments-app",
-  "version": "8.1.1-pre.124",
+  "version": "8.1.2-pre.152",
   "description": "Appointments front-end module for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-appointments-app.js",
   "main": "src/index.ts",
@@ -37,14 +37,14 @@
     "url": "https://github.com/openmrs/openmrs-esm-patient-management/issues"
   },
   "dependencies": {
-    "@carbon/react": "~1.37.0",
+    "@carbon/react": "^1.71.0",
     "formik": "^2.2.9",
     "lodash-es": "^4.17.15",
     "yup": "^0.32.11"
   },
   "peerDependencies": {
-    "@openmrs/esm-framework": "5.x",
-    "@openmrs/esm-patient-common-lib": "8.x",
+    "@openmrs/esm-framework": "6.x",
+    "@openmrs/esm-patient-common-lib": "9.x",
     "react": "18.x",
     "react-i18next": "11.x",
     "react-router-dom": "6.x",
@@ -53,5 +53,5 @@
   "devDependencies": {
     "webpack": "^5.74.0"
   },
-  "stableVersion": "8.1.0"
+  "stableVersion": "8.0.2"
 }

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

@@ -13,8 +13,8 @@ interface AppointmentTabsProps {
 
 const AppointmentTabs: React.FC<AppointmentTabsProps> = ({ appointmentServiceType }) => {
   const { t } = useTranslation();
-  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);
   const { showUnscheduledAppointmentsTab } = useConfig<ConfigObject>();
+  const [activeTabIndex, setActiveTabIndex] = useState(0);
 
   const handleTabChange = ({ selectedIndex }: { selectedIndex: number }) => {
     setActiveTabIndex(selectedIndex);

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

@@ -44,7 +44,6 @@ import { type ConfigObject } from '../../config-schema';
 import { getPageSizes, useAppointmentSearchResults } from '../utils';
 import AppointmentActions from './appointments-actions.component';
 import AppointmentDetails from '../details/appointment-details.component';
-import PatientSearch from '../../patient-search/patient-search.component';
 import styles from './appointments-table.scss';
 
 dayjs.extend(utc);

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

@@ -62,11 +62,15 @@ const mockAppointments = [
   },
 ] as unknown as Array<Appointment>;
 
-const mockExportAppointmentsToSpreadsheet = jest.mocked(exportAppointmentsToSpreadsheet);
 const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
+const mockExportAppointmentsToSpreadsheet = jest.mocked(exportAppointmentsToSpreadsheet);
 
-jest.mock('../../helpers/excel');
-jest.mock('../../hooks/useOverlay');
+jest.mock('../../helpers/excel', () => {
+  return {
+    ...jest.requireActual('../../helpers/excel'),
+    exportAppointmentsToSpreadsheet: jest.fn(),
+  };
+});
 
 describe('AppointmentsTable', () => {
   beforeEach(() => {

package/src/appointments/common-components/checkin-button.component.tsx

@@ -31,7 +31,11 @@ const CheckInButton: React.FC<CheckInButtonProps> = ({ appointment, patientUuid
                     to: checkInButton.customUrl,
                     templateParams: { patientUuid: appointment.patient.uuid, appointmentUuid: appointment.uuid },
                   })
-                : launchWorkspace('start-visit-workspace-form', { patientUuid: patientUuid, showPatientHeader: true })
+                : launchWorkspace('start-visit-workspace-form', {
+                    patientUuid: patientUuid,
+                    showPatientHeader: true,
+                    openedFrom: 'appointments-check-in',
+                  })
             }>
             {t('checkIn', 'Check in')}
           </Button>

package/src/appointments/common-components/end-appointment.modal.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { showSnackbar, updateVisit, useVisit } from '@openmrs/esm-framework';
 import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { showSnackbar, updateVisit, useVisit } from '@openmrs/esm-framework';
 import { changeAppointmentStatus } from '../../patient-appointments/patient-appointments.resource';
 import { useMutateAppointments } from '../../form/appointments-form.resource';
 
@@ -68,7 +68,7 @@ const EndAppointmentModal: React.FC<EndAppointmentModalProps> = ({ patientUuid,
       .finally(() => {
         closeModal();
       });
-  }, [activeVisit, mutate, mutateAppointments, closeModal, patientUuid, appointmentUuid]);
+  }, [activeVisit, appointmentUuid, closeModal, mutate, mutateAppointments, t]);
 
   return (
     <div>

package/src/appointments/scheduled/scheduled-appointments.component.tsx

@@ -35,7 +35,7 @@ const ScheduledAppointments: React.FC<ScheduledAppointmentsProps> = ({ appointme
   // t('checkedIn', 'Checked in');
   // t('expected', 'Expected');
 
-  const [currentTab, setCurrentTab] = useState<string>(null);
+  const [currentTab, setCurrentTab] = useState(null);
   const [dateType, setDateType] = useState<DateType>('today');
   const scheduledAppointmentPanels = useConnectedExtensions(scheduledAppointmentsPanelsSlot);
   const { allowedExtensions, showExtension, hideExtension } = useAllowedExtensions();

package/src/appointments/unscheduled/unscheduled-appointments.component.tsx

@@ -1,20 +1,20 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
+  Button,
   DataTable,
-  TableContainer,
+  DataTableSkeleton,
+  Pagination,
   Table,
+  TableBody,
+  TableCell,
+  TableContainer,
   TableHead,
   TableHeader,
   TableRow,
-  TableBody,
-  TableCell,
   TableToolbar,
   TableToolbarContent,
   TableToolbarSearch,
-  Pagination,
-  DataTableSkeleton,
-  Button,
 } from '@carbon/react';
 import { Download } from '@carbon/react/icons';
 import { ConfigurableLink, useConfig, usePagination } from '@openmrs/esm-framework';

package/src/appointments/unscheduled/unscheduled-appointments.test.tsx

@@ -3,18 +3,28 @@ import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
 import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
 import { type ConfigObject, configSchema } from '../../config-schema';
+import { exportUnscheduledAppointmentsToSpreadsheet } from '../../helpers/excel';
 import { getByTextWithMarkup } from 'tools';
 import { useUnscheduledAppointments } from '../../hooks/useUnscheduledAppointments';
-import { exportUnscheduledAppointmentsToSpreadsheet } from '../../helpers/excel';
 import UnscheduledAppointments from './unscheduled-appointments.component';
 
 const mockExportUnscheduledAppointmentsToSpreadsheet = jest.mocked(exportUnscheduledAppointmentsToSpreadsheet);
 const mockUseUnscheduledAppointments = jest.mocked(useUnscheduledAppointments);
 const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
 
-jest.mock('../../helpers/excel');
-jest.mock('../../hooks/useOverlay');
-jest.mock('../../hooks/useUnscheduledAppointments');
+jest.mock('../../helpers/excel', () => {
+  return {
+    ...jest.requireActual('../../helpers/excel'),
+    exportUnscheduledAppointmentsToSpreadsheet: jest.fn(),
+  };
+});
+
+jest.mock('../../hooks/useUnscheduledAppointments', () => {
+  return {
+    ...jest.requireActual('../../hooks/useUnscheduledAppointments'),
+    useUnscheduledAppointments: jest.fn(),
+  };
+});
 
 const mockUnscheduledAppointments = [
   {
@@ -45,6 +55,11 @@ describe('UnscheduledAppointments', () => {
       ...getDefaultsFromConfigSchema(configSchema),
       customPatientChartUrl: 'someUrl',
     });
+    mockUseUnscheduledAppointments.mockReturnValue({
+      isLoading: false,
+      data: mockUnscheduledAppointments,
+      error: null,
+    });
   });
 
   it('renders the component correctly', async () => {

package/src/appointments.component.tsx

@@ -1,19 +1,19 @@
 import React, { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+import { omrsDateFormat } from './constants';
 import AppointmentTabs from './appointments/appointment-tabs.component';
 import AppointmentsHeader from './header/appointments-header.component';
 import AppointmentMetrics from './metrics/appointments-metrics.component';
-import { useParams } from 'react-router-dom';
 import SelectedDateContext from './hooks/selectedDateContext';
-import { omrsDateFormat } from './constants';
 
 const Appointments: React.FC = () => {
   const { t } = useTranslation();
-  const [appointmentServiceType, setAppointmentServiceType] = useState<string>('');
-  const [selectedDate, setSelectedDate] = useState<string>(dayjs().startOf('day').format(omrsDateFormat));
+  const [appointmentServiceType, setAppointmentServiceType] = useState('');
+  const [selectedDate, setSelectedDate] = useState(dayjs().startOf('day').format(omrsDateFormat));
 
-  let params = useParams();
+  const params = useParams();
 
   useEffect(() => {
     if (params.date) {
@@ -30,9 +30,9 @@ const Appointments: React.FC = () => {
   return (
     <SelectedDateContext.Provider value={{ selectedDate, setSelectedDate }}>
       <AppointmentsHeader
-        title={t('appointments', 'Appointments')}
         appointmentServiceType={appointmentServiceType}
         onChange={setAppointmentServiceType}
+        title={t('appointments', 'Appointments')}
       />
       <AppointmentMetrics appointmentServiceType={appointmentServiceType} />
       <AppointmentTabs appointmentServiceType={appointmentServiceType} />

package/src/appointments.test.tsx

@@ -2,14 +2,24 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import Appointments from './appointments.component';
 
+// TODO: Tweak the ExtensionSlot stub in the framework to not return a function. Functions are not valid React children.
 describe('Appointments', () => {
   it('renders the appointments dashboard', async () => {
     render(<Appointments />);
 
     await screen.findByText(/^appointments$/i);
+
     expect(screen.getByRole('button', { name: /appointments calendar/i })).toBeInTheDocument();
     expect(screen.getByPlaceholderText(/dd-mmm-yyyy/i)).toBeInTheDocument();
-    expect(screen.getByRole('combobox', { name: /view/i })).toBeInTheDocument();
+    expect(
+      screen.getByRole('combobox', {
+        name: /select service type/i,
+      }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('listbox', { name: /view/i })).toBeInTheDocument();
     expect(screen.getByText(/appointment metrics/i)).toBeInTheDocument();
+    expect(screen.getByText(/scheduled appointments/i)).toBeInTheDocument();
+    expect(screen.getByText(/highest volume service/i)).toBeInTheDocument();
+    expect(screen.getByText(/providers booked/i)).toBeInTheDocument();
   });
 });

package/src/calendar/appointments-calendar-view.component.tsx

@@ -2,16 +2,16 @@ import React, { useEffect, useState } from 'react';
 import dayjs from 'dayjs';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { omrsDateFormat } from '../constants';
 import { useAppointmentsCalendar } from '../hooks/useAppointmentsCalendar';
 import AppointmentsHeader from '../header/appointments-header.component';
 import CalendarHeader from './header/calendar-header.component';
 import MonthlyCalendarView from './monthly/monthly-calendar-view.component';
 import SelectedDateContext from '../hooks/selectedDateContext';
-import { omrsDateFormat } from '../constants';
 
 const AppointmentsCalendarView: React.FC = () => {
   const { t } = useTranslation();
-  const [selectedDate, setSelectedDate] = useState<string>(dayjs().startOf('day').format(omrsDateFormat));
+  const [selectedDate, setSelectedDate] = useState(dayjs().startOf('day').format(omrsDateFormat));
   const { calendarEvents } = useAppointmentsCalendar(dayjs(selectedDate).toISOString(), 'monthly');
 
   let params = useParams();

package/src/calendar/monthly/monthly-workload-view.component.tsx

@@ -25,7 +25,7 @@ const MonthlyWorkloadView: React.FC<MonthlyWorkloadViewProps> = ({ dateTime, eve
       events?.find(
         (event) => dayjs(event.appointmentDate)?.format('YYYY-MM-DD') === dayjs(dateTime)?.format('YYYY-MM-DD'),
       ),
-    [events],
+    [dateTime, events],
   );
 
   const visibleServices = useMemo(() => {
@@ -34,7 +34,7 @@ const MonthlyWorkloadView: React.FC<MonthlyWorkloadViewProps> = ({ dateTime, eve
       return currentData.services.slice(0, layout === 'small-desktop' ? 2 : 4);
     }
     return [];
-  }, [currentData, showAllServices, layout, currentData]);
+  }, [currentData, showAllServices, layout]);
 
   const hasHiddenServices = useMemo(() => {
     if (currentData?.services) {
@@ -42,7 +42,7 @@ const MonthlyWorkloadView: React.FC<MonthlyWorkloadViewProps> = ({ dateTime, eve
       return layout === 'small-desktop' ? currentData.services.length > 2 : currentData.services.length > 4;
     }
     return false;
-  }, [layout, currentData, currentData]);
+  }, [currentData?.services, layout, showAllServices]);
 
   const navigateToAppointmentsByDate = (serviceUuid: string) => {
     navigate({ to: `${spaHomePage}/appointments/${dayjs(dateTime).format('YYYY-MM-DD')}/${serviceUuid}` });
@@ -61,8 +61,8 @@ const MonthlyWorkloadView: React.FC<MonthlyWorkloadViewProps> = ({ dateTime, eve
             },
       )}>
       {isSameMonth(dateTime, dayjs(selectedDate)) && (
-        <p>
-          <div className={classNames(styles.totals)}>
+        <div>
+          <span className={classNames(styles.totals)}>
             {currentData?.services ? (
               <div role="button" tabIndex={0}>
                 <User size={16} />
@@ -72,7 +72,7 @@ const MonthlyWorkloadView: React.FC<MonthlyWorkloadViewProps> = ({ dateTime, eve
               <div />
             )}
             <b className={styles.calendarDate}>{dateTime.format('D')}</b>
-          </div>
+          </span>
           {currentData?.services && (
             <div className={styles.currentData}>
               {visibleServices.map(({ serviceName, serviceUuid, count }, i) => (
@@ -100,7 +100,7 @@ const MonthlyWorkloadView: React.FC<MonthlyWorkloadViewProps> = ({ dateTime, eve
               )}
             </div>
           )}
-        </p>
+        </div>
       )}
     </div>
   );

package/src/config-schema.ts

@@ -1,22 +1,11 @@
-import { Type, restBaseUrl, validators } from '@openmrs/esm-framework';
-import { spaHomePage } from './constants';
+import { Type, validators } from '@openmrs/esm-framework';
 
 export const configSchema = {
-  includePhoneNumberInExcelSpreadsheet: {
-    _type: Type.Boolean,
-    _description: 'Whether to include phone numbers in the exported Excel spreadsheet',
-    _default: false,
-  },
   allowAllDayAppointments: {
     _type: Type.Boolean,
     _description: 'Whether to allow scheduling of all-day appointments (vs appointments with start time and end time)',
     _default: false,
   },
-  appointmentsBaseUrl: {
-    _type: Type.String,
-    _description: 'Configurable alternative URL for the Appointments UI. Eg, the Bahmni Appointments UI URL',
-    _default: `${spaHomePage}`,
-  },
   appointmentStatuses: {
     _type: Type.Array,
     _description: 'Configurable appointment status (status of appointments)',
@@ -27,11 +16,6 @@ export const configSchema = {
     _description: 'Configurable appointment types (types of appointments)',
     _default: ['Scheduled'],
   },
-  bahmniAppointmentsUiBaseUrl: {
-    _type: Type.String,
-    _description: 'Configurable base URL that points to the Bahmni Appointments UI',
-    _default: '/appointments',
-  },
   checkInButton: {
     enabled: {
       _type: Type.Boolean,
@@ -61,13 +45,6 @@ export const configSchema = {
       _default: '',
     },
   },
-  concepts: {
-    visitQueueNumberAttributeUuid: {
-      _type: Type.String,
-      _description: 'The UUID of the visit attribute that contains the visit queue number.',
-      _default: 'c61ce16f-272a-41e7-9924-4c555d0932c5',
-    },
-  },
   customPatientChartUrl: {
     _type: Type.String,
     _description: `Template URL that will be used when clicking on the patient name in the queues table.
@@ -76,57 +53,26 @@ export const configSchema = {
     _default: '${openmrsSpaBase}/patient/${patientUuid}/chart',
     _validators: [validators.isUrlWithTemplateParameters(['patientUuid'])],
   },
-  daysOfTheWeek: {
-    _type: Type.Array,
-    _description: 'Configurable days of the week',
-    _default: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
-  },
-  defaultFacilityUrl: {
-    _type: Type.String,
-    _default: `${restBaseUrl}/kenyaemr/default-facility`,
-    _description: 'Custom URL to load default facility if it is not in the session',
-  },
-  fullViewPrivilege: {
-    _type: Type.String,
-    _description: 'Name of the privilege to display the full view of the Appointments dashboard widget.',
-    _default: "Today's Appointments Widget: Display Full View",
-  },
-  hiddenFormFields: {
-    _type: Type.Array,
-    _description: 'Array of form controls to be hidden on form load',
-    _default: [],
+  includePhoneNumberInExcelSpreadsheet: {
+    _type: Type.Boolean,
+    _description: 'Whether to include phone numbers in the exported Excel spreadsheet',
+    _default: false,
   },
   patientIdentifierType: {
     _type: Type.String,
     _description: 'The name of the patient identifier type to be used for the patient identifier field',
     _default: '',
   },
-  showServiceQueueFields: {
-    _type: Type.Boolean,
-    _description: 'Whether start visit form should display service queue fields`',
-    _default: false,
-  },
   showUnscheduledAppointmentsTab: {
     _type: Type.Boolean,
     _description:
       'Whether to show the Unscheduled Appointments tab. Note that configuring this to true requires a custom unscheduledAppointment endpoint not currently available',
     _default: false,
   },
-  useBahmniAppointmentsUI: {
-    _type: Type.Boolean,
-    _description: 'Open links in Bahmni Appointments UI instead of O3 UI',
-    _default: false,
-  },
-  useFullViewPrivilege: {
-    _type: Type.Boolean,
-    _description: "If set to 'false', will always display the full view, disregarding any privilege",
-    _default: false,
-  },
 };
 
 export interface ConfigObject {
   allowAllDayAppointments: boolean;
-  appointmentComments: Array<string>;
   appointmentStatuses: Array<string>;
   appointmentTypes: Array<string>;
   checkInButton: {
@@ -138,18 +84,8 @@ export interface ConfigObject {
     enabled: boolean;
     customUrl: string;
   };
-  concepts: {
-    visitQueueNumberAttributeUuid: string;
-  };
   customPatientChartUrl: string;
-  daysOfTheWeek: Array<string>;
-  defaultFacilityUrl: string;
-  fullViewPrivilege: string;
-  hiddenFormFields: Array<string>;
+  includePhoneNumberInExcelSpreadsheet: boolean;
   patientIdentifierType: string;
-  showServiceQueueFields: boolean;
   showUnscheduledAppointmentsTab: boolean;
-  useBahmniAppointmentsUI: boolean;
-  useFullViewPrivilege: boolean;
-  includePhoneNumberInExcelSpreadsheet: boolean;
 }