(fix) O3-3879: Localize the monthly calendar header text (#1293)

* (chore): Update month text based on locale

* Fixup

* Misc fixes

---------

Co-authored-by: Dennis Kigen <[email protected]>

packages/esm-appointments-app/src/calendar/header/calendar-header.component.tsx

@@ -19,6 +19,7 @@ const CalendarHeader: React.FC = () => {
     <div className={styles.calendarHeaderContainer}>
       <div className={styles.titleContainer}>
         <Button
+          className={styles.backButton}
           kind="ghost"
           onClick={backButtonOnClick}
           renderIcon={ArrowLeft}

packages/esm-appointments-app/src/calendar/header/calendar-header.scss

@@ -24,6 +24,18 @@
   align-items: center;
 }
 
+.backButton {
+  svg {
+    order: 1;
+    margin-right: layout.$spacing-03;
+    margin-left: 0 !important;
+  }
+
+  span {
+    order: 2;
+  }
+}
+
 // Overriding styles for RTL support
 html[dir='rtl'] {
   .titleContent {

packages/esm-appointments-app/src/calendar/monthly/days-of-week.component.tsx

@@ -1,15 +1,17 @@
-import dayjs from 'dayjs';
 import React from 'react';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
 import styles from './days-of-week.scss';
 
-interface DaysOfWeekProp {
+interface DaysOfWeekProps {
   dayOfWeek: string;
 }
-const DaysOfWeekCard: React.FC<DaysOfWeekProp> = ({ dayOfWeek }) => {
+
+const DaysOfWeekCard: React.FC<DaysOfWeekProps> = ({ dayOfWeek }) => {
   const isToday = dayjs(new Date()).format('ddd').toUpperCase() === dayOfWeek;
   return (
     <div tabIndex={0} role="button" className={styles.tileContainer}>
-      <span className={isToday ? styles.bold : ''}>{dayOfWeek}</span>
+      <span className={classNames({ [styles.bold]: isToday })}>{dayOfWeek}</span>
     </div>
   );
 };

packages/esm-appointments-app/src/calendar/monthly/days-of-week.scss

@@ -10,6 +10,11 @@
   width: 100%;
   align-items: center;
   border: 1px solid colors.$gray-20;
+  border-right: none;
+
+  &:last-child {
+    border-right: 1px solid colors.$gray-20;
+  }
 
   & > span {
     font-size: layout.$spacing-05;

packages/esm-appointments-app/src/calendar/monthly/monthly-calendar-view.component.tsx

@@ -4,9 +4,9 @@ import isBetween from 'dayjs/plugin/isBetween';
 import { type DailyAppointmentsCountByService } from '../../types';
 import { monthDays } from '../../helpers';
 import MonthlyViewWorkload from './monthly-workload-view.component';
-import MonthlyHeader from './monthly-header.module';
-import styles from '../appointments-calendar-view-view.scss';
+import MonthlyHeader from './monthly-header.component';
 import SelectedDateContext from '../../hooks/selectedDateContext';
+import styles from '../appointments-calendar-view-view.scss';
 
 dayjs.extend(isBetween);
 

packages/esm-appointments-app/src/calendar/monthly/monthly-header.component.tsx

@@ -0,0 +1,49 @@
+import React, { useCallback, useContext } from 'react';
+import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+import { formatDate } from '@openmrs/esm-framework';
+import { omrsDateFormat } from '../../constants';
+import DaysOfWeekCard from './days-of-week.component';
+import SelectedDateContext from '../../hooks/selectedDateContext';
+import styles from './monthly-header.scss';
+
+const DAYS_IN_WEEK = ['SUN', 'MON', 'TUE', 'WED', 'THUR', 'FRI', 'SAT'];
+
+const MonthlyHeader: React.FC = () => {
+  const { t } = useTranslation();
+  const { selectedDate, setSelectedDate } = useContext(SelectedDateContext);
+
+  const handleSelectPrevMonth = useCallback(() => {
+    setSelectedDate(dayjs(selectedDate).subtract(1, 'month').format(omrsDateFormat));
+  }, [selectedDate, setSelectedDate]);
+
+  const handleSelectNextMonth = useCallback(() => {
+    setSelectedDate(dayjs(selectedDate).add(1, 'month').format(omrsDateFormat));
+  }, [selectedDate, setSelectedDate]);
+
+  return (
+    <>
+      <div className={styles.container}>
+        <Button
+          aria-label={t('previousMonth', 'Previous month')}
+          kind="tertiary"
+          onClick={handleSelectPrevMonth}
+          size="sm">
+          {t('prev', 'Prev')}
+        </Button>
+        <span>{formatDate(new Date(selectedDate), { day: false, time: false, noToday: true })}</span>
+        <Button aria-label={t('nextMonth', 'Next month')} kind="tertiary" onClick={handleSelectNextMonth} size="sm">
+          {t('next', 'Next')}
+        </Button>
+      </div>
+      <div className={styles.workLoadCard}>
+        {DAYS_IN_WEEK.map((day) => (
+          <DaysOfWeekCard key={day} dayOfWeek={day} />
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default MonthlyHeader;

packages/esm-appointments-app/src/calendar/monthly/monthly-view-workload.scss

@@ -13,10 +13,6 @@
   text-align: right;
   @include type.type-style('body-compact-02');
 
-  &:nth-child(-n + 7) {
-    border-top: 1px solid colors.$gray-20;
-  }
-
   &:nth-child(7n) {
     border-right: 1px solid colors.$gray-20;
   }

packages/esm-appointments-app/translations/en.json

@@ -100,6 +100,8 @@
   "location": "Location",
   "medications": "Medications",
   "missed": "Missed",
+  "next": "Next",
+  "nextMonth": "Next month",
   "nextPage": "Next page",
   "no": "No",
   "noAppointmentsToDisplay": "No appointments to display",
@@ -120,6 +122,8 @@
   "patientName": "Patient name",
   "patients": "Patients",
   "period": "Period",
+  "prev": "Prev",
+  "previousMonth": "Previous month",
   "previousPage": "Previous page",
   "provider": "Provider",
   "providers": "Providers",