@kenyaemr/esm-appointments-app 7.0.3-pre.89 → 8.0.0

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

@@ -1,46 +1,47 @@
 import React from 'react';
+import { of } from 'rxjs';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { updateVisit, showSnackbar, useVisit } from '@openmrs/esm-framework';
+import { updateVisit, showSnackbar, useVisit, type VisitReturnType } from '@openmrs/esm-framework';
 import { changeAppointmentStatus } from '../../patient-appointments/patient-appointments.resource';
 import EndAppointmentModal from './end-appointment.modal';
 
 const closeModal = jest.fn();
+const mockUseVisit = jest.mocked(useVisit);
+const mockUpdateVisit = jest.mocked(updateVisit);
+
 jest.mock('../../patient-appointments/patient-appointments.resource', () => ({
   changeAppointmentStatus: jest.fn().mockResolvedValue({}),
 }));
 
-jest.mock('@openmrs/esm-framework', () => ({
-  useVisit: jest.fn(),
-  updateVisit: jest.fn().mockReturnValue({ toPromise: jest.fn().mockResolvedValue({}) }),
-  showSnackbar: jest.fn(),
-  parseDate: jest.fn(),
+jest.mock('../../form/appointments-form.resource', () => ({
+  useMutateAppointments: jest.fn().mockReturnValue({ mutateAppointments: jest.fn() }),
 }));
 
 describe('EndAppointmentModal', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
+  beforeEach(() => {
+    mockUpdateVisit.mockImplementation(() => of({}));
   });
 
-  it('has a cancel button that closes the model', async () => {
-    useVisit.mockReturnValue({});
+  it('has a cancel button that closes the modal', async () => {
     const user = userEvent.setup();
+
     render(<EndAppointmentModal appointmentUuid={'abc'} patientUuid={'123'} closeModal={closeModal} />);
+
     const cancelButton = screen.getByText('Cancel');
     await user.click(cancelButton);
     expect(closeModal).toHaveBeenCalled();
   });
 
   it('should update appointment status but not visit on submit if no active visit', async () => {
-    useVisit.mockReturnValue({});
     const user = userEvent.setup();
 
     render(<EndAppointmentModal appointmentUuid={'abc'} patientUuid={'123'} closeModal={closeModal} />);
 
     const submitButton = screen.getByRole('button', { name: /check out/i });
-    expect(submitButton).not.toBeDisabled();
-    await user.click(submitButton);
+    expect(submitButton).toBeEnabled();
 
+    await user.click(submitButton);
     expect(changeAppointmentStatus).toHaveBeenCalledWith('Completed', 'abc');
     expect(useVisit).toHaveBeenCalledWith('123');
     expect(updateVisit).not.toHaveBeenCalled();
@@ -54,18 +55,18 @@ describe('EndAppointmentModal', () => {
   });
 
   it('should update appointment status and visit on submit if active visit', async () => {
-    useVisit.mockReturnValue({
-      mutate: jest.fn(),
-      activeVisit: { location: { uuid: 'def' }, visitType: { uuid: 'ghi' }, startDatetime: new Date() },
-    });
     const user = userEvent.setup();
 
+    mockUseVisit.mockReturnValue({
+      activeVisit: { location: { uuid: 'def' }, visitType: { uuid: 'ghi' }, startDatetime: new Date() },
+      mutate: jest.fn(),
+    } as unknown as VisitReturnType);
+
     render(<EndAppointmentModal appointmentUuid={'abc'} patientUuid={'123'} closeModal={closeModal} />);
 
     const submitButton = screen.getByRole('button', { name: /check out/i });
-    expect(submitButton).not.toBeDisabled();
+    expect(submitButton).toBeEnabled();
     await user.click(submitButton);
-
     expect(changeAppointmentStatus).toHaveBeenCalledWith('Completed', 'abc');
     expect(useVisit).toHaveBeenCalledWith('123');
     expect(updateVisit).toHaveBeenCalled();

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

@@ -51,7 +51,7 @@ const AppointmentDetails: React.FC<AppointmentDetailsProps> = ({ appointment })
           )}
           {patient && patient?.telecom
             ? patient.telecom.map((contact, i) => (
-                <div className={styles.labelContainer}>
+                <div key={i} className={styles.labelContainer}>
                   <p className={styles.labelBold}>{t('Contact', 'Contact {{index}}', { index: i + 1 })}: </p>
                   <p className={styles.label}>{contact.value}</p>
                 </div>

package/src/appointments/details/appointment-details.scss

@@ -1,12 +1,12 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/layout';
+@use '@carbon/type';
 @use '@carbon/colors';
 
 .appointmentDetailsContainer {
   min-height: fit-content;
   background-color: colors.$white;
-  padding: spacing.$spacing-05;
-  margin: spacing.$spacing-03;
+  padding: layout.$spacing-05;
+  margin: layout.$spacing-03;
 }
 
 .title {
@@ -20,9 +20,9 @@
 }
 
 .tags {
-  margin-top: spacing.$spacing-05;
+  margin-top: layout.$spacing-05;
   display: flex;
-  column-gap: spacing.$spacing-03;
+  column-gap: layout.$spacing-03;
 
   & > div {
     margin: 0;
@@ -32,13 +32,13 @@
 .patientInfoGrid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
-  column-gap: spacing.$spacing-05;
-  margin-top: spacing.$spacing-05;
+  column-gap: layout.$spacing-05;
+  margin-top: layout.$spacing-05;
 }
 
 .gridTitle {
   @include type.type-style('label-02');
-  margin-bottom: spacing.$spacing-04;
+  margin-bottom: layout.$spacing-04;
   color: colors.$gray-70;
 }
 
@@ -50,7 +50,7 @@
 .historyGrid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  row-gap: spacing.$spacing-05;
+  row-gap: layout.$spacing-05;
 }
 
 .historyGridLabel {
@@ -59,13 +59,13 @@
 }
 .historyGridCount {
   @include type.type-style('heading-02');
-  margin-top: spacing.$spacing-01;
+  margin-top: layout.$spacing-01;
   color: colors.$blue-60;
 }
 
 .historyGridCountRed {
   @include type.type-style('heading-02');
-  margin-top: spacing.$spacing-01;
+  margin-top: layout.$spacing-01;
   color: colors.$red-60;
 }
 
@@ -73,7 +73,7 @@
   @include type.type-style('label-01');
   color: colors.$gray-70;
   font-weight: bold;
-  margin-right: spacing.$spacing-02;
+  margin-right: layout.$spacing-02;
 }
 
 .labelContainer {

package/src/appointments/details/appointment-details.test.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { usePatient } from '@openmrs/esm-framework';
+import { mockPatient } from 'tools';
+import type { AppointmentKind, AppointmentStatus, Appointment } from '../../types';
 import AppointmentDetails from './appointment-details.component';
-import { type Appointment } from '../../types';
 
 const appointment: Appointment = {
   uuid: '7cd38a6d-377e-491b-8284-b04cf8b8c6d8',
@@ -17,17 +19,17 @@ const appointment: Appointment = {
   service: {
     appointmentServiceId: 1,
     name: 'Outpatient',
-    description: null,
+    description: '',
     startTime: '',
     endTime: '',
     maxAppointmentsLimit: null,
-    durationMins: null,
+    durationMins: undefined,
     location: {
       uuid: '8d6c993e-c2cc-11de-8d13-0010c6dffd0f',
     },
     uuid: 'e2ec9cf0-ec38-4d2b-af6c-59c82fa30b90',
     initialAppointmentStatus: 'Scheduled',
-    creatorName: null,
+    creatorName: '',
   },
   provider: {
     uuid: 'f9badd80-ab76-11e2-9e96-0800200c9a66',
@@ -36,17 +38,20 @@ const appointment: Appointment = {
   location: { name: 'HIV Clinic', uuid: '2131aff8-2e2a-480a-b7ab-4ac53250262b' },
   startDateTime: 1630326900000,
   endDateTime: 1630327200000,
-  appointmentKind: 'WalkIn',
-  status: 'Scheduled',
+  appointmentKind: 'WalkIn' as AppointmentKind.WALKIN,
+  status: 'Scheduled' as AppointmentStatus.SCHEDULED,
   comments: 'Some comments',
   additionalInfo: null,
   providers: [{ uuid: '24252571-dd5a-11e6-9d9c-0242ac150002', display: 'Dr James Cook' }],
   recurring: false,
   voided: false,
+  dateAppointmentScheduled: '',
   teleconsultationLink: null,
   extensions: [],
 };
 
+const mockUsePatient = jest.mocked(usePatient);
+
 jest.mock('../../hooks/usePatientAppointmentHistory', () => ({
   usePatientAppointmentHistory: () => ({
     appointmentsCount: {
@@ -58,46 +63,42 @@ jest.mock('../../hooks/usePatientAppointmentHistory', () => ({
   }),
 }));
 
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
-  return {
-    ...originalModule,
-    usePatient: jest.fn().mockImplementation((...args) => ({
-      patient: {
-        birthDate: '22-Mar-2020',
-        telecom: [
-          {
-            uuid: 'tel-uuid-1',
-            value: '0899129989932',
-          },
-        ],
-      },
-    })),
-  };
-});
-
 test('renders appointment details correctly', async () => {
-  const { getByText } = render(<AppointmentDetails appointment={appointment} />);
-  expect(getByText(/Patient name/i)).toBeInTheDocument();
-  expect(getByText(/John Wilson/i)).toBeInTheDocument();
-  expect(getByText(/Age/i)).toBeInTheDocument();
-  expect(getByText(/34/i)).toBeInTheDocument();
-  expect(getByText(/Gender/i)).toBeInTheDocument();
-  expect(getByText(/Male/i)).toBeInTheDocument();
-  expect(getByText(/Date of birth/i)).toBeInTheDocument();
-  expect(getByText(/Date of birth/i)).toBeInTheDocument();
-  expect(getByText(/22-Mar-2020/i)).toBeInTheDocument();
-  expect(getByText(/Contact 1/i)).toBeInTheDocument();
-  expect(getByText(/0899129989932/i)).toBeInTheDocument();
-  expect(getByText(/Appointment Notes/i)).toBeInTheDocument();
-  expect(getByText(/Some comments/i)).toBeInTheDocument();
-  expect(getByText(/Appointment History/i)).toBeInTheDocument();
-  expect(getByText(/Completed/i)).toBeInTheDocument();
-  expect(getByText('1', { exact: true })).toBeInTheDocument();
-  expect(getByText(/Missed/i)).toBeInTheDocument();
-  expect(getByText('2', { exact: true })).toBeInTheDocument();
-  expect(getByText(/Cancelled/i)).toBeInTheDocument();
-  expect(getByText('3', { exact: true })).toBeInTheDocument();
-  expect(getByText(/Upcoming/i)).toBeInTheDocument();
-  expect(getByText('4', { exact: true })).toBeInTheDocument();
+  mockUsePatient.mockReturnValue({
+    error: null,
+    isLoading: false,
+    patientUuid: mockPatient.id,
+    patient: {
+      birthDate: '22-Mar-2020',
+      telecom: [
+        {
+          value: '0899129989932',
+        },
+      ],
+    },
+  });
+
+  render(<AppointmentDetails appointment={appointment} />);
+  expect(screen.getByText(/Patient name/i)).toBeInTheDocument();
+  expect(screen.getByText(/John Wilson/i)).toBeInTheDocument();
+  expect(screen.getByText(/Age/i)).toBeInTheDocument();
+  expect(screen.getByText(/34/i)).toBeInTheDocument();
+  expect(screen.getByText(/Gender/i)).toBeInTheDocument();
+  expect(screen.getByText(/Male/i)).toBeInTheDocument();
+  expect(screen.getByText(/Date of birth/i)).toBeInTheDocument();
+  expect(screen.getByText(/Date of birth/i)).toBeInTheDocument();
+  expect(screen.getByText(/22-Mar-2020/i)).toBeInTheDocument();
+  expect(screen.getByText(/Contact 1/i)).toBeInTheDocument();
+  expect(screen.getByText(/0899129989932/i)).toBeInTheDocument();
+  expect(screen.getByText(/Appointment Notes/i)).toBeInTheDocument();
+  expect(screen.getByText(/Some comments/i)).toBeInTheDocument();
+  expect(screen.getByText(/Appointment History/i)).toBeInTheDocument();
+  expect(screen.getByText(/Completed/i)).toBeInTheDocument();
+  expect(screen.getByText('1', { exact: true })).toBeInTheDocument();
+  expect(screen.getByText(/Missed/i)).toBeInTheDocument();
+  expect(screen.getByText('2', { exact: true })).toBeInTheDocument();
+  expect(screen.getByText(/Cancelled/i)).toBeInTheDocument();
+  expect(screen.getByText('3', { exact: true })).toBeInTheDocument();
+  expect(screen.getByText(/Upcoming/i)).toBeInTheDocument();
+  expect(screen.getByText('4', { exact: true })).toBeInTheDocument();
 });

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

@@ -12,8 +12,8 @@ import {
   useLayoutType,
   isDesktop,
 } from '@openmrs/esm-framework';
-import styles from './scheduled-appointments.scss';
 import SelectedDateContext from '../../hooks/selectedDateContext';
+import styles from './scheduled-appointments.scss';
 
 dayjs.extend(isSameOrBefore);
 

package/src/appointments/scheduled/scheduled-appointments.scss

@@ -1,4 +1,6 @@
+@use '@carbon/layout';
+
 .switcher {
-  margin: 1rem 0;
+  margin: layout.$spacing-05 0;
   max-width: 70%;
 }

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

@@ -1,49 +1,51 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
-import { getByTextWithMarkup } from '../../../../../tools/test-utils';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { type ConfigObject, configSchema } from '../../config-schema';
+import { getByTextWithMarkup } from 'tools';
 import { useUnscheduledAppointments } from '../../hooks/useUnscheduledAppointments';
 import { downloadUnscheduledAppointments } from '../../helpers/excel';
 import UnscheduledAppointments from './unscheduled-appointments.component';
 
-const mockDownloadAppointmentsAsExcel = downloadUnscheduledAppointments as jest.Mock;
-const mockUseUnscheduledAppointments = useUnscheduledAppointments as jest.Mock;
+const mockDownloadAppointmentsAsExcel = jest.mocked(downloadUnscheduledAppointments);
+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('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
-  return {
-    ...originalModule,
-    useConfig: jest.fn(() => ({
+const mockUnscheduledAppointments = [
+  {
+    age: 20,
+    dob: 1262304000,
+    dateTime: new Date(),
+    gender: 'M',
+    identifier: '1234-56-78',
+    name: 'Test Patient',
+    phoneNumber: '123-456-7890',
+    uuid: '1234',
+  },
+  {
+    age: 30,
+    dob: 1262304000,
+    dateTime: new Date(),
+    gender: 'F',
+    identifier: '2345-67-89',
+    name: 'Another Patient',
+    phoneNumber: '',
+    uuid: '5678',
+  },
+];
+
+describe('UnscheduledAppointments', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
       customPatientChartUrl: 'someUrl',
-    })),
-  };
-});
-
-describe('UnscheduledAppointments component', () => {
-  const mockUnscheduledAppointments = [
-    {
-      uuid: '1234',
-      name: 'Test Patient',
-      identifier: '1234-56-78',
-      gender: 'M',
-      phoneNumber: '123-456-7890',
-      age: 20,
-      dob: 1262304000,
-    },
-    {
-      uuid: '5678',
-      name: 'Another Patient',
-      identifier: '2345-67-89',
-      gender: 'F',
-      phoneNumber: '',
-      age: 30,
-      dob: 1262304000,
-    },
-  ];
+    });
+  });
 
   it('renders the component correctly', async () => {
     mockUseUnscheduledAppointments.mockReturnValue({
@@ -108,12 +110,9 @@ describe('UnscheduledAppointments component', () => {
     });
 
     render(<UnscheduledAppointments />);
-
     const downloadButton = await screen.findByText('Download');
     expect(downloadButton).toBeInTheDocument();
-
     await user.click(downloadButton);
-
     expect(mockDownloadAppointmentsAsExcel).toHaveBeenCalledWith(mockUnscheduledAppointments);
   });
 
@@ -125,7 +124,6 @@ describe('UnscheduledAppointments component', () => {
     });
 
     render(<UnscheduledAppointments />);
-
     expect(getByTextWithMarkup('There are no unscheduled appointments to display')).toBeInTheDocument();
   });
 });

package/src/appointments.component.tsx

@@ -4,7 +4,6 @@ import dayjs from 'dayjs';
 import AppointmentTabs from './appointments/appointment-tabs.component';
 import AppointmentsHeader from './header/appointments-header.component';
 import AppointmentMetrics from './metrics/appointments-metrics.component';
-import { WorkspaceOverlay } from '@openmrs/esm-framework';
 import { useParams } from 'react-router-dom';
 import SelectedDateContext from './hooks/selectedDateContext';
 import { omrsDateFormat } from './constants';

package/src/calendar/appointments-calendar-view-view.scss

@@ -1,7 +1,6 @@
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/spacing';
 @use '@carbon/colors';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .wrapper {
   position: relative;
@@ -13,7 +12,7 @@
 }
 
 .calendarViewContainer {
-  margin: spacing.$spacing-05;
+  margin: layout.$spacing-05;
 }
 .backgroundColor {
   margin: 1px 0 0;

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

@@ -4,7 +4,7 @@ import AppointmentsCalendarView from './appointments-calendar-view.component';
 
 describe('Appointment calendar view', () => {
   it('renders appointments in calendar view from appointments list', async () => {
-    renderAppointmentsCalendarListView();
+    render(<AppointmentsCalendarView />);
 
     const expectedTableRows = [
       /John Wilson 30-Aug-2021 03:35 03:35 Dr James Cook Outpatient Walk in appointments/,
@@ -16,7 +16,3 @@ describe('Appointment calendar view', () => {
     });
   });
 });
-
-function renderAppointmentsCalendarListView() {
-  render(<AppointmentsCalendarView />);
-}

package/src/calendar/header/calendar-header.scss

@@ -1,12 +1,12 @@
-@use '@carbon/styles/scss/type';
 @use '@carbon/colors';
-@use '@carbon/styles/scss/spacing';
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .titleContainer {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-left: 1rem;
+  margin-left: layout.$spacing-05;
 
   & > p {
     @include type.type-style('heading-02');
@@ -27,6 +27,6 @@
 // Overriding styles for RTL support
 html[dir='rtl'] {
   .titleContent {
-    margin-left: 1rem;
+    margin-left: layout.$spacing-05;
   }
 }

package/src/calendar/monthly/days-of-week.scss

@@ -1,7 +1,7 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .tileContainer {
   height: layout.$spacing-10;

package/src/calendar/monthly/monthly-view-workload.scss

@@ -1,7 +1,7 @@
-@use '@carbon/styles/scss/type';
 @use '@carbon/colors';
 @use '@carbon/layout';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .monthly-cell {
   border-left: 1px solid colors.$gray-20;
@@ -37,7 +37,7 @@
   display: list-item;
 
   span:not(:first-child) {
-    margin: 0rem 0.75rem;
+    margin: 0 layout.$spacing-04;
   }
 }
 
@@ -50,7 +50,7 @@
   position: relative;
   border-right: 1px solid colors.$gray-20;
   border-bottom: 1px solid colors.$gray-20;
-  min-height: 120px;
+  min-height: 7.5rem;
   color: colors.$white;
 
   .week-time {
@@ -84,7 +84,7 @@
   display: flex;
   flex-direction: column;
   align-items: start;
-  margin: 0.1rem 0.1rem 0.5rem 0.1rem;
+  margin: 0.1rem 0.1rem layout.$spacing-03 0.1rem;
 
   & > span {
     @include type.type-style('label-02');
@@ -93,8 +93,8 @@
 
 .serviceArea {
   width: 100%;
-  padding: 0.125rem;
-  margin-right: 0.5rem;
+  padding: layout.$spacing-01;
+  margin-right: layout.$spacing-03;
   display: grid;
   grid-template-columns: 4fr 1fr;
   justify-content: flex-start;
@@ -119,7 +119,7 @@
 }
 
 .totals {
-  padding: 0.125rem;
+  padding: layout.$spacing-01;
   display: grid;
   grid-template-columns: 4fr 1fr;
   justify-content: flex-start;
@@ -143,11 +143,11 @@
 }
 
 .smallDesktop {
-  height: 100px;
+  height: 6.25rem;
 }
 
 .largeDesktop {
-  height: 150px;
+  height: 9.375rem;
 }
 
 .red {