From 42c3c4b634d09573a288f88285184eef6b78b79a Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Sat, 21 Sep 2024 20:08:34 +0300
Subject: [PATCH] (fix) Fix Appointments calendar navigation

---
 .../calendar/appointments-calendar-view.component.tsx |  2 +-
 .../src/calendar/header/calendar-header.component.tsx | 11 ++++++-----
 .../monthly/monthly-workload-view.component.tsx       |  6 +++---
 packages/esm-appointments-app/src/constants.ts        |  2 +-
 .../src/metrics/metrics-header.component.tsx          |  7 +++----
 packages/esm-appointments-app/translations/en.json    |  2 +-
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/esm-appointments-app/src/calendar/appointments-calendar-view.component.tsx b/packages/esm-appointments-app/src/calendar/appointments-calendar-view.component.tsx
index 650e9c347..af6901140 100644
--- a/packages/esm-appointments-app/src/calendar/appointments-calendar-view.component.tsx
+++ b/packages/esm-appointments-app/src/calendar/appointments-calendar-view.component.tsx
@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import dayjs from 'dayjs';
+import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 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 { useParams } from 'react-router-dom';
 import { omrsDateFormat } from '../constants';
 
 const AppointmentsCalendarView: React.FC = () => {
diff --git a/packages/esm-appointments-app/src/calendar/header/calendar-header.component.tsx b/packages/esm-appointments-app/src/calendar/header/calendar-header.component.tsx
index 591616d5d..f537a9e87 100644
--- a/packages/esm-appointments-app/src/calendar/header/calendar-header.component.tsx
+++ b/packages/esm-appointments-app/src/calendar/header/calendar-header.component.tsx
@@ -1,17 +1,18 @@
 import React, { useContext } from 'react';
+import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@carbon/react';
 import { ArrowLeft } from '@carbon/react/icons';
 import { navigate } from '@openmrs/esm-framework';
 import { spaHomePage } from '../../constants';
-import styles from './calendar-header.scss';
 import SelectedDateContext from '../../hooks/selectedDateContext';
-import dayjs from 'dayjs';
+import styles from './calendar-header.scss';
 
 const CalendarHeader: React.FC = () => {
   const { t } = useTranslation();
   const { selectedDate } = useContext(SelectedDateContext);
-  const backButtonOnClick = () => {
+
+  const handleClick = () => {
     navigate({ to: `${spaHomePage}/appointments/${dayjs(selectedDate).format('YYYY-MM-DD')}` });
   };
 
@@ -20,10 +21,10 @@ const CalendarHeader: React.FC = () => {
       <div className={styles.titleContainer}>
         <Button
           className={styles.backButton}
+          iconDescription={t('back', 'Back')}
           kind="ghost"
-          onClick={backButtonOnClick}
+          onClick={handleClick}
           renderIcon={ArrowLeft}
-          iconDescription={t('back', 'Back')}
           size="lg">
           <span>{t('back', 'Back')}</span>
         </Button>
diff --git a/packages/esm-appointments-app/src/calendar/monthly/monthly-workload-view.component.tsx b/packages/esm-appointments-app/src/calendar/monthly/monthly-workload-view.component.tsx
index 6b9c80ae2..044b0da07 100644
--- a/packages/esm-appointments-app/src/calendar/monthly/monthly-workload-view.component.tsx
+++ b/packages/esm-appointments-app/src/calendar/monthly/monthly-workload-view.component.tsx
@@ -1,14 +1,14 @@
 import React, { useContext, useMemo } from 'react';
 import classNames from 'classnames';
 import dayjs, { type Dayjs } from 'dayjs';
+import { User } from '@carbon/react/icons';
 import { navigate, useLayoutType } from '@openmrs/esm-framework';
-import { isSameMonth } from '../../helpers';
 import { spaHomePage } from '../../constants';
-import styles from './monthly-view-workload.scss';
+import { isSameMonth } from '../../helpers';
 import { type DailyAppointmentsCountByService } from '../../types';
 import SelectedDateContext from '../../hooks/selectedDateContext';
-import { User } from '@carbon/react/icons';
 import MonthlyWorkloadViewExpanded from './monthly-workload-view-expanded.component';
+import styles from './monthly-view-workload.scss';
 
 export interface MonthlyWorkloadViewProps {
   events: Array<DailyAppointmentsCountByService>;
diff --git a/packages/esm-appointments-app/src/constants.ts b/packages/esm-appointments-app/src/constants.ts
index 5cd36ccc7..377a28b21 100644
--- a/packages/esm-appointments-app/src/constants.ts
+++ b/packages/esm-appointments-app/src/constants.ts
@@ -1,6 +1,6 @@
 export const spaRoot = window['getOpenmrsSpaBase'];
 export const basePath = '/appointments';
-export const spaHomePage = ` ${window.getOpenmrsSpaBase()}home`;
+export const spaHomePage = `${window.spaBase}/home`;
 export const omrsDateFormat = 'YYYY-MM-DDTHH:mm:ss.SSSZZ';
 export const appointmentLocationTagName = 'Appointment Location';
 
diff --git a/packages/esm-appointments-app/src/metrics/metrics-header.component.tsx b/packages/esm-appointments-app/src/metrics/metrics-header.component.tsx
index 5c2fb6eeb..8b2a915e6 100644
--- a/packages/esm-appointments-app/src/metrics/metrics-header.component.tsx
+++ b/packages/esm-appointments-app/src/metrics/metrics-header.component.tsx
@@ -1,14 +1,13 @@
 import React, { useContext } from 'react';
 import dayjs from 'dayjs';
 import isToday from 'dayjs/plugin/isToday';
-import { launchWorkspace } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import { Calendar, Hospital } from '@carbon/react/icons';
 import { Button } from '@carbon/react';
-import { ExtensionSlot, isDesktop, navigate, useLayoutType } from '@openmrs/esm-framework';
+import { ExtensionSlot, isDesktop, launchWorkspace, navigate, useLayoutType } from '@openmrs/esm-framework';
 import { spaHomePage } from '../constants';
-import styles from './metrics-header.scss';
 import SelectedDateContext from '../hooks/selectedDateContext';
+import styles from './metrics-header.scss';
 
 dayjs.extend(isToday);
 
@@ -39,7 +38,7 @@ const MetricsHeader: React.FC = () => {
           onClick={() =>
             navigate({ to: `${spaHomePage}/appointments/calendar/${dayjs(selectedDate).format('YYYY-MM-DD')}` })
           }>
-          {t('appointmentsCalendar', 'Appointments Calendar')}
+          {t('appointmentsCalendar', 'Appointments calendar')}
         </Button>
         <ExtensionSlot
           name="patient-search-button-slot"
diff --git a/packages/esm-appointments-app/translations/en.json b/packages/esm-appointments-app/translations/en.json
index 16bb21e71..a913a658b 100644
--- a/packages/esm-appointments-app/translations/en.json
+++ b/packages/esm-appointments-app/translations/en.json
@@ -27,7 +27,7 @@
   "appointments": "Appointments",
   "Appointments": "Appointments",
   "appointments_lower": "appointments",
-  "appointmentsCalendar": "Appointments Calendar",
+  "appointmentsCalendar": "Appointments calendar",
   "appointmentScheduled": "Appointment scheduled",
   "appointmentService": "Appointment service",
   "appointmentServiceCreate": "Appointment service created successfully",