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

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

@@ -1,18 +1,13 @@
 @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;
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .widgetCard {
   border: 1px solid $ui-03;
   max-width: 60rem;
   margin: auto;
-  margin-top: spacing.$spacing-05;
+  margin-top: layout.$spacing-05;
 }
 
 .productiveHeading01 {
@@ -31,35 +26,35 @@ $color-blue-10: #edf5ff;
 }
 
 .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-top: 1px solid colors.$blue-30;
+  border-bottom: 1px solid colors.$blue-30;
+  border-left: 1px solid colors.$blue-30;
   border-right: none;
-  border-radius: spacing.$spacing-02 0 0px spacing.$spacing-02;
+  border-radius: layout.$spacing-02 0 0px layout.$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-top: 1px solid colors.$blue-30;
+  border-bottom: 1px solid colors.$blue-30;
+  border-right: 1px solid colors.$blue-30;
   border-left: none;
-  border-radius: 0px spacing.$spacing-02 spacing.$spacing-02 0px;
+  border-radius: 0px layout.$spacing-02 layout.$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;
+  background-color: colors.$blue-10;
+  color: colors.$blue-60;
+  border-color: colors.$blue-60;
+  border-right: 1px solid colors.$blue-60;
 }
 
 .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;
+  background-color: colors.$blue-10;
+  color: colors.$blue-60;
+  border-color: colors.$blue-60;
+  border-left: 1px solid colors.$blue-60;
 }
 
 .contentSwitcherWrapper > div > button[aria-selected='true']:focus {
@@ -68,16 +63,16 @@ $color-blue-10: #edf5ff;
 
 .divider {
   width: 1px;
-  height: spacing.$spacing-05;
+  height: layout.$spacing-05;
   color: colors.$gray-20;
-  margin: 0 spacing.$spacing-05;
+  margin: 0 layout.$spacing-05;
 }
 
 .content {
   @include type.type-style('heading-compact-01');
   color: $text-02;
-  margin-top: spacing.$spacing-05;
-  margin-bottom: spacing.$spacing-03;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
 }
 
 .tile {

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { openmrsFetch } from '@openmrs/esm-framework';
+import { type FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
 import { mockAppointmentsData } from '__mocks__';
 import { mockPatient, patientChartBasePath, renderWithSwr, waitForLoadingToFinish } from 'tools';
+import { type AppointmentsFetchResponse } from '../types';
 import AppointmentsBase from './patient-appointments-base.component';
 
 const testProps = {
@@ -11,18 +12,21 @@ const testProps = {
   patientUuid: mockPatient.id,
 };
 
-const mockOpenmrsFetch = openmrsFetch as jest.Mock;
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
 
 describe('AppointmensOverview', () => {
   it('renders an empty state if appointments data is unavailable', async () => {
-    mockOpenmrsFetch.mockReturnValueOnce({ data: [] });
+    mockOpenmrsFetch.mockResolvedValueOnce({
+      data: [],
+    } as unknown as FetchResponse<AppointmentsFetchResponse>);
 
-    renderAppointments();
+    renderWithSwr(<AppointmentsBase {...testProps} />);
 
     await waitForLoadingToFinish();
 
     expect(screen.getByRole('heading', { name: /appointments/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /add/i })).toBeInTheDocument();
+    expect(screen.getByText(/there are no upcoming appointments to display for this patient/i)).toBeInTheDocument();
   });
 
   it('renders an error state if there was a problem fetching appointments data', async () => {
@@ -36,7 +40,7 @@ describe('AppointmensOverview', () => {
 
     mockOpenmrsFetch.mockRejectedValueOnce(error);
 
-    renderAppointments();
+    renderWithSwr(<AppointmentsBase {...testProps} />);
 
     await waitForLoadingToFinish();
 
@@ -51,9 +55,11 @@ describe('AppointmensOverview', () => {
   it(`renders a tabular overview of the patient's appointment schedule if available`, async () => {
     const user = userEvent.setup();
 
-    mockOpenmrsFetch.mockReturnValueOnce(mockAppointmentsData);
+    mockOpenmrsFetch.mockResolvedValueOnce({
+      ...mockAppointmentsData,
+    } as unknown as FetchResponse<AppointmentsFetchResponse>);
 
-    renderAppointments();
+    renderWithSwr(<AppointmentsBase {...testProps} />);
 
     await waitForLoadingToFinish();
 
@@ -85,7 +91,3 @@ describe('AppointmensOverview', () => {
     expect(nextPageButton).toBeDisabled();
   });
 });
-
-function renderAppointments() {
-  renderWithSwr(<AppointmentsBase {...testProps} />);
-}

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

@@ -1,4 +1,3 @@
-@use '@carbon/styles/scss/type';
 @use '@carbon/colors';
 @use '@carbon/layout';
 
@@ -7,9 +6,9 @@
 }
 
 .patientAvatar {
-  width: 5rem;
-  height: 5rem;
-  margin: 1rem;
+  width: layout.$spacing-11;
+  height: layout.$spacing-11;
+  margin: layout.$spacing-05;
   border-radius: 1px;
 }
 
@@ -22,6 +21,6 @@
 // Overriding styles for RTL support
 html[dir='rtl'] {
   .titleContent {
-    margin-left: 1rem;
+    margin-left: layout.$spacing-05;
   }
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { usePatient, useLayoutType, isDesktop, WorkspaceOverlay } from '@openmrs/esm-framework';
+import { usePatient, useLayoutType, isDesktop, WorkspaceContainer } from '@openmrs/esm-framework';
 import PatientAppointmentsBase from './patient-appointments-base.component';
 import { useParams } from 'react-router-dom';
 import PatientAppointmentContext, { PatientAppointmentContextTypes } from '../hooks/patientAppointmentContext';
@@ -26,7 +26,7 @@ const PatientAppointmentsOverview: React.FC = () => {
       <div className={styles.patientAppointmentsOverview}>
         <PatientAppointmentsHeader patient={response.patient} />
         <PatientAppointmentsBase patientUuid={response.patient.id} />
-        <WorkspaceOverlay contextKey={`patient/${params.patientUuid}`} />
+        <WorkspaceContainer overlay contextKey={`patient/${params.patientUuid}`} />
       </div>
     </PatientAppointmentContext.Provider>
   );

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

@@ -1,4 +1,3 @@
-@use '@carbon/styles/scss/type';
 @use '@carbon/colors';
 @use '@carbon/layout';
 

package/src/patient-appointments/patient-appointments.resource.ts

@@ -51,7 +51,7 @@ export function usePatientAppointments(patientUuid: string, startDate: string, a
 
   return {
     data: data ? { pastAppointments, upcomingAppointments, todaysAppointments } : null,
-    isError: error,
+    error,
     isLoading,
     isValidating,
     mutate,

package/src/patient-appointments/patient-upcoming-appointments-card.component.tsx

@@ -33,7 +33,7 @@ const PatientUpcomingAppointmentsCard: React.FC<PatientUpcomingAppointmentsProps
 
   const ac = useMemo<AbortController>(() => new AbortController(), []);
   useEffect(() => () => ac.abort(), [ac]);
-  const { data: appointmentsData, isError, isLoading } = usePatientAppointments(patientUuid, startDate, ac);
+  const { data: appointmentsData, error, isLoading } = usePatientAppointments(patientUuid, startDate, ac);
 
   const todaysAppointments = appointmentsData?.todaysAppointments?.length ? appointmentsData?.todaysAppointments : [];
   const futureAppointments = appointmentsData?.upcomingAppointments?.length
@@ -49,8 +49,8 @@ const PatientUpcomingAppointmentsCard: React.FC<PatientUpcomingAppointmentsProps
     setUpcomingAppointment(appointment);
   };
 
-  if (isError) {
-    return <ErrorState headerTitle={headerTitle} error={isError} />;
+  if (error) {
+    return <ErrorState headerTitle={headerTitle} error={error} />;
   }
   if (isLoading) {
     return (

package/src/patient-appointments/patient-upcoming-appointments-card.scss

@@ -1,28 +1,29 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .container {
-  margin: spacing.$spacing-05;
+  margin: layout.$spacing-05;
 
   & section {
-    margin: spacing.$spacing-05 0;
+    margin: layout.$spacing-05 0;
   }
 }
 
 .sectionTitle {
   @include type.type-style('heading-compact-02');
   color: $text-02;
-  margin: 0 0 spacing.$spacing-03 0;
+  margin: 0 0 layout.$spacing-03 0;
 }
+
 .checkbox {
   &:not(:first-child) {
-    margin: 0rem 0rem;
+    margin: 0;
   }
 }
 
 .input {
-  margin: 0rem 1rem 1rem;
+  margin: 0 layout.$spacing-05 layout.$spacing-05;
 }
 
 .headerLabel {
@@ -36,11 +37,11 @@
 }
 
 .structuredList {
-  padding: 0.5rem 0.5rem 0.5rem;
+  padding: layout.$spacing-03 layout.$spacing-03 layout.$spacing-03;
 }
 
 .inlineNotification {
   width: 100%;
   max-width: unset;
-  padding: '0rem';
+  padding: 0;
 }

package/src/patient-search/patient-search.scss

@@ -1,23 +1,24 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/colors';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .padded {
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
 }
 
-[data-extension-id='patient-search-bar'] {
-  & > div {
-    width: 100%;
+.searchBarWrapper {
+  [data-extension-id='patient-search-bar'] {
+    & > div {
+      width: 100%;
 
-    & input {
-      background-color: $ui-02;
-      border-bottom: none;
-      min-height: spacing.$spacing-09;
-    }
+      & input {
+        background-color: $ui-02;
+        border-bottom: none;
+        min-height: layout.$spacing-09;
+      }
 
-    & button {
-      height: spacing.$spacing-09;
+      & button {
+        height: layout.$spacing-09;
+      }
     }
   }
 }

package/src/routes.json

@@ -148,6 +148,11 @@
           "default": "Create new appointment"
         }
       }
+    },
+    {
+      "name": "home-appointments-tile",
+      "slot": "home-metrics-tiles-slot",
+      "component": "homeAppointmentsTile"
     }
   ]
 }

package/src/types/index.ts

@@ -61,6 +61,7 @@ export interface Appointment {
 export interface AppointmentsFetchResponse {
   data: Array<Appointment>;
 }
+
 export interface AppointmentService {
   appointmentServiceId: number;
   creatorName: string;
@@ -133,6 +134,7 @@ export interface AppointmentPayload {
   uuid?: string;
   providerUuid?: string | OpenmrsResource;
 }
+
 export interface AppointmentCountMap {
   allAppointmentsCount: number;
   missedAppointmentsCount;
@@ -144,6 +146,7 @@ export interface AppointmentSummary {
   appointmentService: OpenmrsResource;
   appointmentCountMap: Record<string, AppointmentCountMap>;
 }
+
 export interface Provider {
   uuid: string;
   display: string;
@@ -158,6 +161,7 @@ export enum DurationPeriod {
   weekly,
   daily,
 }
+
 export interface Identifier {
   identifier: string;
   identifierName?: string;

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

@@ -1,7 +1,8 @@
-@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;
   border-bottom: 1px solid colors.$gray-20;
@@ -11,6 +12,7 @@
   cursor: pointer;
   text-align: right;
   @include type.type-style('body-compact-02');
+
   &:nth-child(-n + 7) {
     border-top: 1px solid colors.$gray-20;
   }
@@ -32,10 +34,12 @@
   &-current {
     color: colors.$black;
   }
+
   &:hover {
     background-color: colors.$blue-30-hover;
     color: colors.$white;
   }
+
   &-active {
     background-color: colors.$magenta-30;
     color: colors.$white;
@@ -57,18 +61,20 @@
   display: list-item;
 
   span:not(:first-child) {
-    margin: 0rem 0.75rem;
+    margin: 0 layout.$spacing-04;
   }
 }
+
 .identifierTag {
   display: flex;
   align-items: center;
 }
+
 .weekly-cell {
   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 {
@@ -97,6 +103,7 @@
     }
   }
 }
+
 .selectedDate {
   background-color: #005d5d;
   height: 100%;
@@ -114,7 +121,7 @@
   grid-template-columns: 4fr 1fr;
   justify-content: flex-start;
   text-align: left;
-  margin: 0.125rem;
+  margin: layout.$spacing-01;
   @include type.type-style('label-01');
   color: #020f1b;
   cursor: pointer;
@@ -171,11 +178,13 @@
 .wrapper {
   position: relative;
 }
+
 .monthlyCalendar {
   display: grid;
   grid-template-columns: repeat(7, minmax(0px, 1fr));
   grid-template-rows: repeat(6, minmax(0px, 1fr));
 }
+
 .selectedDate {
   background-color: red;
 }
@@ -183,6 +192,7 @@
 .calendarViewContainer {
   margin: 5px;
 }
+
 .backgroundColor {
   margin: 1px 0 0;
   transition: width 0.24s ease-in-out;
@@ -190,6 +200,7 @@
   min-height: calc(100vh - 80px);
   background-color: colors.$white;
 }
+
 .container {
   display: flex;
   justify-content: center;
@@ -197,10 +208,12 @@
   width: 100%;
   height: layout.$spacing-06;
 }
+
 .workLoadCard {
   display: flex;
   color: colors.$black;
 }
+
 .activeWorkloadCard {
   background-color: colors.$blue-10;
 
@@ -208,12 +221,14 @@
     color: colors.$blue-60;
   }
 }
+
 .workLoadContainer {
   display: flex;
   flex-direction: column;
   background-color: white;
-  padding-bottom: 1rem;
+  padding-bottom: layout.$spacing-05;
 }
+
 .headerContainer {
   display: flex;
   justify-content: center;

package/src/workload/monthly-view-workload/monthlyWorkCard.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import classNames from 'classnames';
-import styles from './monthly-workload.scss';
+import dayjs, { type Dayjs } from 'dayjs';
 import { useLayoutType } from '@openmrs/esm-framework';
 import { isSameMonth } from '../../helpers';
-import dayjs, { type Dayjs } from 'dayjs';
+import styles from './monthly-workload.scss';
 
 interface MonthlyWorkloadComponentProps {
   date: Dayjs;

package/src/workload/workload.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 *;
 
 .workLoadCard {
   display: flex;
@@ -18,7 +18,7 @@
   display: flex;
   flex-direction: column;
   background-color: white;
-  padding-bottom: 1rem;
+  padding-bottom: layout.$spacing-05;
 }
 
 .cardContainer {
@@ -28,7 +28,7 @@
 }
 
 .tileContainer {
-  padding: 0.5rem;
+  padding: layout.$spacing-03;
   flex: 1;
   display: flex;
   align-items: center;

package/translations/am.json

@@ -129,6 +129,7 @@
   "saveAndClose": "Save and close",
   "scheduled": "Scheduled",
   "scheduledAppointments": "Scheduled appointments",
+  "scheduledForToday": "Scheduled For Today",
   "selectALocation": "Select a location",
   "selectAppointmentStatus": "Select status",
   "selectAppointmentType": "Select an appointment type",
@@ -147,6 +148,7 @@
   "time": "Time",
   "today": "Today",
   "todays": "Today's",
+  "type": "Type",
   "unscheduled": "Unscheduled",
   "unscheduledAppointments": "Unscheduled appointments",
   "unscheduledAppointments_lower": "unscheduled appointments",

package/translations/ar.json

@@ -129,6 +129,7 @@
   "saveAndClose": "Save and close",
   "scheduled": "مجدول",
   "scheduledAppointments": "المواعيد المجدولة",
+  "scheduledForToday": "Scheduled For Today",
   "selectALocation": "Select a location",
   "selectAppointmentStatus": "اختر الحالة",
   "selectAppointmentType": "اختر نوع الموعد",
@@ -147,6 +148,7 @@
   "time": "الوقت",
   "today": "اليوم",
   "todays": "Today's",
+  "type": "Type",
   "unscheduled": "غير مجدول",
   "unscheduledAppointments": "المواعيد غير المجدولة",
   "unscheduledAppointments_lower": "مواعيد غير مجدولة",

package/translations/en.json

@@ -129,6 +129,7 @@
   "saveAndClose": "Save and close",
   "scheduled": "Scheduled",
   "scheduledAppointments": "Scheduled appointments",
+  "scheduledForToday": "Scheduled For Today",
   "selectALocation": "Select a location",
   "selectAppointmentStatus": "Select status",
   "selectAppointmentType": "Select an appointment type",
@@ -147,6 +148,7 @@
   "time": "Time",
   "today": "Today",
   "todays": "Today's",
+  "type": "Type",
   "unscheduled": "Unscheduled",
   "unscheduledAppointments": "Unscheduled appointments",
   "unscheduledAppointments_lower": "unscheduled appointments",

package/translations/es.json

@@ -129,6 +129,7 @@
   "saveAndClose": "Save and close",
   "scheduled": "Programada",
   "scheduledAppointments": "Citas programadas",
+  "scheduledForToday": "Scheduled For Today",
   "selectALocation": "Select a location",
   "selectAppointmentStatus": "Seleccionar estado",
   "selectAppointmentType": "Seleccionar tipo de cita",
@@ -147,6 +148,7 @@
   "time": "Tiempo",
   "today": "Hoy",
   "todays": "Today's",
+  "type": "Type",
   "unscheduled": "No programada",
   "unscheduledAppointments": "Citas no programadas",
   "unscheduledAppointments_lower": "citas no programadas",