feat: adds end timestamp to maintenance banner

.env.development

@@ -36,6 +36,7 @@ FEATURE_LANGUAGE_FACET='true'
 IS_MAINTENANCE_ALERT_ENABLED=''
 MAINTENANCE_ALERT_MESSAGE=''
 MAINTENANCE_ALERT_START_TIMESTAMP=''
+MAINTENANCE_ALERT_END_TIMESTAMP=''
 HOTJAR_APP_ID=''
 HOTJAR_VERSION=6
 HOTJAR_DEBUG=''

.env.development-stage

@@ -36,6 +36,7 @@ FEATURE_LANGUAGE_FACET='true'
 IS_MAINTENANCE_ALERT_ENABLED=''
 MAINTENANCE_ALERT_MESSAGE=''
 MAINTENANCE_ALERT_START_TIMESTAMP=''
+MAINTENANCE_ALERT_END_TIMESTAMP=''
 HOTJAR_APP_ID=''
 HOTJAR_VERSION=6
 HOTJAR_DEBUG=''

src/components/app/Layout.test.jsx

@@ -80,26 +80,43 @@ describe('Layout', () => {
       isSystemMaintenanceAlertOpen: false,
       maintenanceMessage: undefined,
       maintenanceStartTimestamp: undefined,
+      maintenanceEndTimestamp: undefined,
     },
     {
       isSystemMaintenanceAlertOpen: true,
       maintenanceMessage: 'Hello World!',
       maintenanceStartTimestamp: undefined,
+      maintenanceEndTimestamp: undefined,
     },
     {
       isSystemMaintenanceAlertOpen: true,
       maintenanceMessage: 'Hello World!',
       maintenanceStartTimestamp: dayjs().subtract(1, 'm').toISOString(),
+      maintenanceEndTimestamp: dayjs().add(2, 'm').toISOString(),
     },
     {
       isSystemMaintenanceAlertOpen: false,
       maintenanceMessage: 'Hello World!',
-      maintenanceStartTimestamp: dayjs().add(1, 'm').toISOString(),
+      maintenanceStartTimestamp: dayjs().subtract(1, 'm').toISOString(),
+      maintenanceEndTimestamp: dayjs().add(2, 'm').toISOString(),
+    },
+    {
+      isSystemMaintenanceAlertOpen: true,
+      maintenanceMessage: 'Hello World!',
+      maintenanceStartTimestamp: undefined,
+      maintenanceEndTimestamp: dayjs().add(2, 'm').toISOString(),
+    },
+    {
+      isSystemMaintenanceAlertOpen: true,
+      maintenanceMessage: 'Hello World!',
+      maintenanceStartTimestamp: dayjs().subtract(1, 'm').toISOString(),
+      maintenanceEndTimestamp: undefined,
     },
   ])('renders with enterprise customer (%s)', ({
     isSystemMaintenanceAlertOpen,
     maintenanceMessage,
     maintenanceStartTimestamp,
+    maintenanceEndTimestamp,
   }) => {
     if (maintenanceMessage) {
       mergeConfig({
@@ -113,6 +130,12 @@ describe('Layout', () => {
       });
     }
 
+    if (maintenanceEndTimestamp) {
+      mergeConfig({
+        MAINTENANCE_ALERT_END_TIMESTAMP: maintenanceEndTimestamp ?? '',
+      });
+    }
+
     renderWithRouterProvider({
       path: '/:enterpriseSlug',
       element: <LayoutWrapper />,

src/components/app/data/utils.js

@@ -3,7 +3,12 @@
 
 import { POLICY_TYPES } from '../../enterprise-user-subsidy/enterprise-offers/data/constants';
 import { LICENSE_STATUS } from '../../enterprise-user-subsidy/data/constants';
-import { getBrandColorsFromCSSVariables, isDefinedAndNotNull, isTodayWithinDateThreshold } from '../../../utils/common';
+import {
+  getBrandColorsFromCSSVariables,
+  isDefinedAndNotNull,
+  isTodayBetweenDates,
+  isTodayWithinDateThreshold,
+} from '../../../utils/common';
 import { COURSE_STATUSES, SUBSIDY_TYPE } from '../../../constants';
 import { LATE_ENROLLMENTS_BUFFER_DAYS } from '../../../config/constants';
 import {
@@ -34,15 +39,20 @@
     return false;
   }
   const startTimestamp = config.MAINTENANCE_ALERT_START_TIMESTAMP;
-
-  // Given no start timestamp, the system maintenance alert should be open, as
-  // it's enabled and has a message.
-  if (!startTimestamp) {
-    return true;
+  const endTimestamp = config.MAINTENANCE_ALERT_END_TIMESTAMP;
+  if (startTimestamp && endTimestamp) {
+    return isTodayBetweenDates({ startDate: startTimestamp, endDate: endTimestamp });
+  }
+  if (startTimestamp) {
+    return dayjs().isAfter(dayjs(startTimestamp));
+  }
+  if (endTimestamp) {
+    return dayjs().isBefore(dayjs(endTimestamp));
   }
 
-  // Otherwise, check whether today's date is after the defined start date.
-  return dayjs().isAfter(dayjs(startTimestamp));
+  // Given no start timestamp and no end timestamp, the system maintenance alert should be open, as
+  // it's enabled and has a message.
+  return true;
 }
 
 /**

src/index.jsx

@@ -42,6 +42,7 @@ initialize({
         IS_MAINTENANCE_ALERT_ENABLED: process.env.IS_MAINTENANCE_ALERT_ENABLED || null,
         MAINTENANCE_ALERT_MESSAGE: process.env.MAINTENANCE_ALERT_MESSAGE || null,
         MAINTENANCE_ALERT_START_TIMESTAMP: process.env.MAINTENANCE_ALERT_START_TIMESTAMP || null,
+        MAINTENANCE_ALERT_END_TIMESTAMP: process.env.MAINTENANCE_ALERT_END_TIMESTAMP || null,
         ENABLE_SKILLS_QUIZ: process.env.ENABLE_SKILLS_QUIZ || false,
         ENABLE_NOTICES: process.env.ENABLE_NOTICES || null,
         LEARNER_SUPPORT_URL: process.env.LEARNER_SUPPORT_URL || null,

src/utils/common.js

@@ -145,6 +145,13 @@ export function isTodayWithinDateThreshold({ date, days }) {
   return today.isBetween(offsetDays, dateToCheck);
 }
 
+export function isTodayBetweenDates({ startDate, endDate }) {
+  const today = dayjs();
+  const formattedStartDate = dayjs(startDate);
+  const formattedEndDate = dayjs(endDate);
+  return today.isBetween(formattedStartDate, formattedEndDate);
+}
+
 /**
  * Returns a formatted date in the following format:
  *