@kenyaemr/esm-appointments-app 8.0.1-pre.99 → 8.0.3-pre.131

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

@@ -176,7 +176,34 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
       },
       {
         path: ['appointmentDateTime.recurringPatternEndDate'],
-        message: 'A recurring appointment should have an end date',
+        message: t('recurringAppointmentShouldHaveEndDate', 'A recurring appointment should have an end date'),
+      },
+    )
+    .refine(
+      (formValues) => {
+        const { appointmentDateTime, dateAppointmentScheduled } = formValues;
+
+        const startDate = appointmentDateTime?.startDate;
+
+        if (!startDate || !dateAppointmentScheduled) return true;
+
+        const normalizeDate = (date: Date) => {
+          const normalizedDate = new Date(date);
+          normalizedDate.setHours(0, 0, 0, 0);
+          return normalizedDate;
+        };
+
+        const startDateObj = normalizeDate(startDate);
+        const scheduledDateObj = normalizeDate(dateAppointmentScheduled);
+
+        return scheduledDateObj <= startDateObj;
+      },
+      {
+        path: ['dateAppointmentScheduled'],
+        message: t(
+          'dateAppointmentIssuedCannotBeAfterAppointmentDate',
+          'Date appointment issued cannot be after the appointment date',
+        ),
       },
     );
 
@@ -463,33 +490,6 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
             />
           </ResponsiveWrapper>
         </section>
-        <section className={styles.formGroup}>
-          <span className={styles.heading}>{t('dateScheduled', 'Date appointment issued')}</span>
-          <ResponsiveWrapper>
-            <Controller
-              name="dateAppointmentScheduled"
-              control={control}
-              render={({ field: { onChange, value, ref }, fieldState }) => (
-                <DatePicker
-                  datePickerType="single"
-                  dateFormat={datePickerFormat}
-                  value={value}
-                  maxDate={new Date()}
-                  onChange={([date]) => onChange(date)}
-                  invalid={!!fieldState?.error?.message}
-                  invalidText={fieldState?.error?.message}>
-                  <DatePickerInput
-                    id="dateAppointmentScheduledPickerInput"
-                    labelText={t('dateScheduledDetail', 'Date appointment issued')}
-                    style={{ width: '100%' }}
-                    placeholder={datePickerPlaceHolder}
-                    ref={ref}
-                  />
-                </DatePicker>
-              )}
-            />
-          </ResponsiveWrapper>
-        </section>
         <section className={styles.formGroup}>
           <span className={styles.heading}>{t('service', 'Service')}</span>
           <ResponsiveWrapper>
@@ -535,7 +535,6 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
             />
           </ResponsiveWrapper>
         </section>
-
         <section className={styles.formGroup}>
           <span className={styles.heading}>{t('appointmentType_title', 'Appointment Type')}</span>
           <ResponsiveWrapper>
@@ -725,7 +724,7 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
                       <DatePicker
                         datePickerType="single"
                         dateFormat={datePickerFormat}
-                        value={value.startDate}
+                        value={value?.startDate}
                         onChange={([date]) => {
                           if (date) {
                             onChange({ ...value, startDate: date });
@@ -821,6 +820,36 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
             />
           </ResponsiveWrapper>
         </section>
+        <section className={styles.formGroup}>
+          <span className={styles.heading}>{t('dateScheduled', 'Date appointment issued')}</span>
+          <ResponsiveWrapper>
+            <Controller
+              name="dateAppointmentScheduled"
+              control={control}
+              render={({ field: { onChange, value, ref }, fieldState }) => (
+                <div style={{ width: '100%' }}>
+                  <DatePicker
+                    datePickerType="single"
+                    dateFormat={datePickerFormat}
+                    value={value}
+                    maxDate={new Date().toISOString()}
+                    onChange={([date]) => onChange(date)}
+                    invalid={!!fieldState?.error?.message}
+                    invalidText={fieldState?.error?.message}>
+                    <DatePickerInput
+                      id="dateAppointmentScheduledPickerInput"
+                      labelText={t('dateScheduledDetail', 'Date appointment issued')}
+                      style={{ width: '100%' }}
+                      placeholder={datePickerPlaceHolder}
+                      ref={ref}
+                    />
+                  </DatePicker>
+                  {fieldState?.error?.message && <div className={styles.errorMessage}>{fieldState.error.message}</div>}
+                </div>
+              )}
+            />
+          </ResponsiveWrapper>
+        </section>
 
         <section className={styles.formGroup}>
           <span className={styles.heading}>{t('note', 'Note')}</span>

package/src/form/appointments-form.scss

@@ -76,3 +76,12 @@ $openmrs-background-grey: #ededed;
   max-inline-size: fit-content;
   padding-top: layout.$spacing-03;
 }
+
+.errorMessage {
+  color: red;
+  font-size: 0.75rem;
+  margin-top: 0.25rem;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  text-align: left;
+}

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

@@ -2,13 +2,11 @@ import React, { useContext } from 'react';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { DatePicker, DatePickerInput, Dropdown } from '@carbon/react';
-import { Location } from '@carbon/react/icons';
-import { useSession } from '@openmrs/esm-framework';
+import { PageHeader, PageHeaderContent, AppointmentsPictogram } from '@openmrs/esm-framework';
+import { omrsDateFormat } from '../constants';
 import { useAppointmentServices } from '../hooks/useAppointmentService';
-import AppointmentsIllustration from './appointments-illustration.component';
-import styles from './appointments-header.scss';
 import SelectedDateContext from '../hooks/selectedDateContext';
-import { omrsDateFormat } from '../constants';
+import styles from './appointments-header.scss';
 
 interface AppointmentHeaderProps {
   title: string;
@@ -18,61 +16,46 @@ interface AppointmentHeaderProps {
 
 const AppointmentsHeader: React.FC<AppointmentHeaderProps> = ({ title, appointmentServiceType, onChange }) => {
   const { t } = useTranslation();
-  const session = useSession();
   const { selectedDate, setSelectedDate } = useContext(SelectedDateContext);
-  const location = session?.sessionLocation?.display;
   const { serviceTypes } = useAppointmentServices();
 
   return (
-    <div className={styles.header} data-testid="appointments-header">
-      <div className={styles['left-justified-items']}>
-        <AppointmentsIllustration />
-        <div className={styles['page-labels']}>
-          <p>{t('appointments', 'Appointments')}</p>
-          <p className={styles['page-name']}>{title}</p>
-        </div>
-      </div>
-      <div className={styles['right-justified-items']}>
-        <div className={styles['date-and-location']}>
-          <Location size={16} />
-          <span className={styles.value}>{location}</span>
-          <span className={styles.middot}>&middot;</span>
-          <DatePicker
-            onChange={([date]) => setSelectedDate(dayjs(date).startOf('day').format(omrsDateFormat))}
-            value={dayjs(selectedDate).format('DD MMM YYYY')}
-            dateFormat="d-M-Y"
-            datePickerType="single">
-            <DatePickerInput
-              style={{ cursor: 'pointer', backgroundColor: 'transparent', border: 'none', maxWidth: '10rem' }}
-              id="appointment-date-picker"
-              placeholder="DD-MMM-YYYY"
-              labelText=""
-              type="text"
-            />
-          </DatePicker>
-        </div>
-        <div className={styles.dropdownContainer}>
-          {typeof onChange === 'function' && (
-            <Dropdown
-              className={styles.dropdown}
-              aria-label="Select service type"
-              id="serviceDropdown"
-              selectedItem={
-                serviceTypes.find((service) => service.uuid === appointmentServiceType) || { name: 'All', uuid: '' }
-              }
-              items={[{ name: 'All', uuid: '' }, ...serviceTypes]}
-              itemToString={(item) => (item ? item.name : '')}
-              label={t('selectServiceType', 'Select service type')}
-              type="inline"
-              size="sm"
-              direction="bottom"
-              titleText={t('view', 'View')}
-              onChange={({ selectedItem }) => onChange(selectedItem?.uuid)}
-            />
-          )}
-        </div>
+    <PageHeader className={styles.header} data-testid="appointments-header">
+      <PageHeaderContent illustration={<AppointmentsPictogram />} title={title} />
+      <div className={styles.rightJustifiedItems}>
+        <DatePicker
+          dateFormat="d-M-Y"
+          datePickerType="single"
+          onChange={([date]) => setSelectedDate(dayjs(date).startOf('day').format(omrsDateFormat))}
+          value={dayjs(selectedDate).format('DD MMM YYYY')}>
+          <DatePickerInput
+            style={{ cursor: 'pointer', backgroundColor: 'transparent', border: 'none', maxWidth: '10rem' }}
+            id="appointment-date-picker"
+            labelText=""
+            placeholder="DD-MMM-YYYY"
+            type="text"
+          />
+        </DatePicker>
+        {typeof onChange === 'function' && (
+          <Dropdown
+            aria-label={t('selectServiceType', 'Select service type')}
+            className={styles.dropdown}
+            direction="bottom"
+            id="serviceDropdown"
+            items={[{ name: 'All', uuid: '' }, ...serviceTypes]}
+            itemToString={(item) => (item ? item.name : '')}
+            label={t('selectServiceType', 'Select service type')}
+            onChange={({ selectedItem }) => onChange(selectedItem?.uuid)}
+            selectedItem={
+              serviceTypes.find((service) => service.uuid === appointmentServiceType) || { name: 'All', uuid: '' }
+            }
+            size="sm"
+            titleText={t('view', 'View')}
+            type="inline"
+          />
+        )}
       </div>
-    </div>
+    </PageHeader>
   );
 };
 

package/src/header/appointments-header.scss

@@ -4,71 +4,22 @@
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
 .header {
-  @include type.type-style('body-compact-02');
-  color: $text-02;
-  height: layout.$spacing-12;
   background-color: $ui-02;
-  border-bottom: 1px solid $ui-03;
+  border: 1px solid $ui-03;
+  border-left: 0;
   display: flex;
   justify-content: space-between;
-}
-
-.left-justified-items {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.right-justified-items {
-  @include type.type-style('body-compact-02');
-  color: $text-02;
-  margin: layout.$spacing-03;
-}
-
-.page-name {
-  @include type.type-style('heading-04');
-}
-
-.page-labels {
-  margin: layout.$spacing-05 0;
-
-  p:first-of-type {
-    margin-bottom: layout.$spacing-02;
-  }
-}
-
-.date-and-location {
-  display: flex;
-  justify-content: flex-end;
   align-items: center;
+  padding-right: layout.$spacing-03;
 }
 
-.dropdownContainer {
+.rightJustifiedItems {
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-end;
   justify-content: flex-end;
-  margin-top: layout.$spacing-02;
-}
-
-.value {
-  margin-left: layout.$spacing-02;
-}
-
-.middot {
   margin: 0 layout.$spacing-03;
-}
-
-.view {
-  @include type.type-style('label-01');
-}
-
-.datePicker {
-  background-color: transparent;
-  width: layout.$spacing-13;
-  border: none;
-  & > input {
-    color: colors.$blue-10;
-  }
+  row-gap: layout.$spacing-01;
 }
 
 .dropdown {

package/src/helpers/excel.ts

@@ -1,21 +1,37 @@
-import { formatDate } from '@openmrs/esm-framework';
 import * as XLSX from 'xlsx';
+import { fetchCurrentPatient, formatDate, getConfig } from '@openmrs/esm-framework';
 import { type Appointment } from '../types';
+import { type ConfigObject } from '../config-schema';
+import { moduleName } from '../constants';
 
 /**
- * Downloads the provided appointments as an Excel file.
- * @param {Array<Appointment>} appointments - The list of appointments to download.
+ * Exports the provided appointments as an Excel spreadsheet.
+ * @param {Array<Appointment>} appointments - The list of appointments to export.
  * @param {string} [fileName] - The name of the downloaded file
  */
-export function downloadAppointmentsAsExcel(appointments: Array<Appointment>, fileName = 'Appointments') {
-  const appointmentsJSON = appointments?.map((appointment: Appointment) => ({
-    'Patient name': appointment.patient.name,
-    Gender: appointment.patient.gender === 'F' ? 'Female' : 'Male',
-    Age: appointment.patient.age,
-    Identifier: appointment.patient.identifier ?? '--',
-    'Appointment type': appointment.service?.name,
-    Date: formatDate(new Date(appointment.startDateTime), { mode: 'wide' }),
-  }));
+export async function exportAppointmentsToSpreadsheet(appointments: Array<Appointment>, fileName = 'Appointments') {
+  const config = await getConfig<ConfigObject>(moduleName);
+  const includePhoneNumbers = config.includePhoneNumberInExcelSpreadsheet ?? false;
+
+  const appointmentsJSON = await Promise.all(
+    appointments.map(async (appointment: Appointment) => {
+      const patientInfo = await fetchCurrentPatient(appointment.patient.uuid);
+      const phoneNumber =
+        includePhoneNumbers && patientInfo?.telecom
+          ? patientInfo.telecom.map((telecomObj) => telecomObj?.value).join(', ')
+          : '';
+
+      return {
+        'Patient name': appointment.patient.name,
+        Gender: appointment.patient.gender === 'F' ? 'Female' : 'Male',
+        Age: appointment.patient.age,
+        Identifier: appointment.patient.identifier ?? '--',
+        'Appointment type': appointment.service?.name,
+        Date: formatDate(new Date(appointment.startDateTime), { mode: 'wide' }),
+        ...(includePhoneNumbers ? { 'Telephone number': phoneNumber } : {}),
+      };
+    }),
+  );
 
   const worksheet = createWorksheet(appointmentsJSON);
   const workbook = createWorkbook(worksheet, 'Appointment list');
@@ -23,11 +39,11 @@ export function downloadAppointmentsAsExcel(appointments: Array<Appointment>, fi
 }
 
 /**
-Downloads unscheduled appointments as an Excel file.
-@param {Array<Object>} unscheduledAppointments - The list of unscheduled appointments to download.
+Exports unscheduled appointments as an Excel spreadsheet.
+@param {Array<Object>} unscheduledAppointments - The list of unscheduled appointments to export.
 @param {string} fileName - The name of the file to download. Defaults to 'Unscheduled appointments {current date and time}'.
 */
-export function downloadUnscheduledAppointments(
+export function exportUnscheduledAppointmentsToSpreadsheet(
   unscheduledAppointments: Array<any>,
   fileName = `Unscheduled appointments ${formatDate(new Date(), { year: true, time: true })}`,
 ) {

package/src/hooks/useClinicalMetrics.ts

@@ -45,11 +45,13 @@ export function useAllAppointmentsByDate() {
     openmrsFetch,
   );
 
-  const providersArray = data?.data?.filter(({ providers }) => providers !== null) ?? [];
-  const providersCount = uniqBy(
-    providersArray.map(({ providers }) => providers).flat(),
-    (provider) => provider.uuid,
-  ).length;
+  const providersArray = data?.data?.flatMap(({ providers }) => providers ?? []) ?? [];
+
+  const validProviders = providersArray.filter((provider) => provider.response === 'ACCEPTED');
+
+  const uniqueProviders = uniqBy(validProviders, (provider) => provider.uuid);
+  const providersCount = uniqueProviders.length;
+
   return {
     totalProviders: providersCount ? providersCount : 0,
     isLoading,

package/src/index.ts

@@ -7,7 +7,6 @@ import {
 } from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
 import { createDashboardLink } from './createDashboardLink.component';
-import { createDashboardLink as createPatientChartDashboardLink } from '@openmrs/esm-patient-common-lib';
 import { dashboardMeta, appointmentCalendarDashboardMeta, patientChartDashboardMeta } from './dashboard.meta';
 import {
   cancelledAppointmentsPanelConfigSchema,
@@ -22,10 +21,7 @@ import appointmentsDashboardComponent from './appointments.component';
 import homeAppointmentsComponent from './home/home-appointments.component';
 import appointmentsListComponent from './appointments/scheduled/appointments-list.component';
 import earlyAppointmentsComponent from './appointments/scheduled/early-appointments.component';
-import patientAppointmentsDetailedSummaryComponent from './patient-appointments/patient-appointments-detailed-summary.component';
-import patientAppointmentsOverviewComponent from './patient-appointments/patient-appointments-overview.component';
-import patientUpcomingAppointmentsComponent from './patient-appointments/patient-upcoming-appointments-card.component';
-import appointementsForm from './form/appointments-form.component';
+import appointmentsFormComponent from './form/appointments-form.component';
 import patientSearch from './patient-search/patient-search.component';
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
@@ -79,24 +75,30 @@ export const appointmentsList = getSyncLifecycle(appointmentsListComponent, opti
 
 export const earlyAppointments = getSyncLifecycle(earlyAppointmentsComponent, options);
 
-export const appointementForm = getSyncLifecycle(appointementsForm, options);
+export const appointmentsForm = getSyncLifecycle(appointmentsFormComponent, options);
 
 export const searchPatient = getSyncLifecycle(patientSearch, options);
 
 // t('Appointments', 'Appointments')
-export const patientAppointmentsSummaryDashboardLink = getSyncLifecycle(
-  createPatientChartDashboardLink({ ...patientChartDashboardMeta, moduleName }),
+export const patientAppointmentsSummaryDashboardLink = getAsyncLifecycle(async () => {
+  const commonLib = await import('@openmrs/esm-patient-common-lib');
+  return { default: commonLib.createDashboardLink({ ...patientChartDashboardMeta, moduleName }) };
+}, options);
+
+export const patientAppointmentsDetailedSummary = getAsyncLifecycle(
+  () => import('./patient-appointments/patient-appointments-detailed-summary.component'),
   options,
 );
 
-export const patientAppointmentsDetailedSummary = getSyncLifecycle(
-  patientAppointmentsDetailedSummaryComponent,
+export const patientAppointmentsOverview = getAsyncLifecycle(
+  () => import('./patient-appointments/patient-appointments-overview.component'),
   options,
 );
 
-export const patientAppointmentsOverview = getSyncLifecycle(patientAppointmentsOverviewComponent, options);
-
-export const patientUpcomingAppointmentsWidget = getSyncLifecycle(patientUpcomingAppointmentsComponent, options);
+export const patientUpcomingAppointmentsWidget = getAsyncLifecycle(
+  () => import('./patient-appointments/patient-upcoming-appointments-card.component'),
+  options,
+);
 
 export const patientAppointmentsCancelConfirmationDialog = getAsyncLifecycle(
   () => import('./patient-appointments/patient-appointments-cancel.modal'),

package/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"

package/src/routes.json

@@ -3,12 +3,6 @@
   "backendDependencies": {
     "webservices.rest": "^2.2.0"
   },
-  "modals": [
-    {
-      "name": "end-appointment-modal",
-      "component": "endAppointmentModal"
-    }
-  ],
   "extensions": [
     {
       "name": "home-appointments",
@@ -36,11 +30,7 @@
       "slot": "calendar-dashboard-slot",
       "component": "appointmentsCalendarDashboardLink"
     },
-    {
-      "name": "check-in-appointment-modal",
-      "slot": "todays-appointment-slot",
-      "component": "checkInModal"
-    },
+
     {
       "name": "todays-appointments-dashboard",
       "slot": "todays-appointment-slot",
@@ -111,13 +101,9 @@
       "component": "patientUpcomingAppointmentsWidget",
       "slot": "upcoming-appointment-slot"
     },
-    {
-      "name": "patient-appointment-cancel-confirmation-dialog",
-      "component": "patientAppointmentsCancelConfirmationDialog"
-    },
     {
       "name": "edit-appointments-form",
-      "component": "appointementForm",
+      "component": "appointmentsForm",
       "meta": {
         "title":{
           "key":"editAppointment",
@@ -131,7 +117,7 @@
    },
     {
       "name": "create-appointment",
-      "component": "appointementForm",
+      "component": "appointmentsForm",
       "meta": {
         "title": {
           "key":"appointmentForm",
@@ -141,7 +127,7 @@
     },
     {
       "name": "add-appointment",
-      "component": "appointementForm",
+      "component": "appointmentsForm",
       "meta": {
         "title": {
           "key": "createNewAppointment",
@@ -154,5 +140,15 @@
       "slot": "home-metrics-tiles-slot",
       "component": "homeAppointmentsTile"
     }
+  ],
+  "modals": [
+    {
+      "name": "end-appointment-modal",
+      "component": "endAppointmentModal"
+    },
+    {
+      "name": "patient-appointment-cancel-confirmation-dialog",
+      "component": "patientAppointmentsCancelConfirmationDialog"
+    }
   ]
 }

package/src/types/index.ts

@@ -27,7 +27,6 @@ export enum AppointmentKind {
   WALKIN = 'WalkIn',
   VIRTUAL = 'Virtual',
 }
-
 // TODO: remove interface elements that aren't actually present on the Appointment object returned from the Appointment API
 export interface Appointment {
   appointmentKind: AppointmentKind;

package/translations/am.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",
@@ -62,6 +62,7 @@
   "createNewAppointment": "Create new appointment",
   "date": "Date",
   "date&Time": "Date & time",
+  "dateAppointmentIssuedCannotBeAfterAppointmentDate": "Date appointment issued cannot be after the appointment date",
   "dateOfBirth": "Date of birth",
   "dateScheduled": "Date appointment issued",
   "dateScheduledDetail": "Date appointment issued",
@@ -89,7 +90,6 @@
   "filterTable": "Filter table",
   "gender": "Gender",
   "highestServiceVolume": "Highest volume service: {{time}}",
-  "home": "Home",
   "identifier": "Identifier",
   "invalidNumber": "Number is not valid",
   "invalidTime": "Invalid time",
@@ -99,6 +99,8 @@
   "location": "Location",
   "medications": "Medications",
   "missed": "Missed",
+  "next": "Next",
+  "nextMonth": "Next month",
   "nextPage": "Next page",
   "no": "No",
   "noAppointmentsToDisplay": "No appointments to display",
@@ -119,11 +121,14 @@
   "patientName": "Patient name",
   "patients": "Patients",
   "period": "Period",
+  "prev": "Prev",
+  "previousMonth": "Previous month",
   "previousPage": "Previous page",
   "provider": "Provider",
   "providers": "Providers",
   "providersBooked": "Providers booked: {{time}}",
   "recurringAppointment": "Recurring Appointment",
+  "recurringAppointmentShouldHaveEndDate": "A recurring appointment should have an end date",
   "repeatEvery": "Repeat every",
   "save": "Save",
   "saveAndClose": "Save and close",