@windstream/react-shared-components 0.2.61 → 0.2.62

package/src/contentful/blocks/anchored-bottom-banner/index.tsx

@@ -5,11 +5,15 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { AnchoredBottomBannerProps } from "./types";
+import { AnchoredBottomBannerProps, ScheduledMessage } from "./types";
 import Link from "next/link";
 
 import { MaterialIcon } from "@shared/components/material-icon";
 
+const DAY_MS = 24 * 60 * 60 * 1000;
+// Schedule windows and recurring weekdays are evaluated in this zone (DST-aware).
+const SCHEDULING_TIME_ZONE = "America/New_York";
+
 function parseCountdownDateTime(value?: string): number | undefined {
   if (!value) return undefined;
   const parsed = Date.parse(value);
@@ -20,6 +24,114 @@ function parseCountdownDateTime(value?: string): number | undefined {
   return parsed;
 }
 
+// Offset of the scheduling zone at an instant: (wall-clock read as UTC) - instant.
+function schedulingZoneOffsetMs(instantMs: number): number {
+  const parts = new Intl.DateTimeFormat("en-US", {
+    timeZone: SCHEDULING_TIME_ZONE,
+    hour12: false,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  }).formatToParts(new Date(instantMs));
+  const map: Record<string, string> = {};
+  for (const part of parts) map[part.type] = part.value;
+  const hour = map.hour === "24" ? "00" : map.hour;
+  const wallAsUtc = Date.UTC(
+    Number(map.year),
+    Number(map.month) - 1,
+    Number(map.day),
+    Number(hour),
+    Number(map.minute),
+    Number(map.second)
+  );
+  return wallAsUtc - instantMs;
+}
+
+// Absolute epoch ms for midnight of a calendar day in the scheduling zone.
+function schedulingZoneMidnightMs(
+  year: number,
+  month: number,
+  day: number
+): number {
+  const guess = Date.UTC(year, month - 1, day);
+  return guess - schedulingZoneOffsetMs(guess);
+}
+
+// Start of the scheduledStart calendar day in the scheduling zone.
+function parseDisplayStart(value?: string): number | undefined {
+  if (!value) return undefined;
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value.trim());
+  if (!match) {
+    const parsed = Date.parse(value);
+    return Number.isFinite(parsed) ? parsed : undefined;
+  }
+  return schedulingZoneMidnightMs(
+    Number(match[1]),
+    Number(match[2]),
+    Number(match[3])
+  );
+}
+
+// Exclusive end = start of the day AFTER scheduleEnd in the scheduling zone, so
+// scheduleEnd stays active through the whole America/New_York calendar day.
+function parseDisplayEnd(value?: string): number | undefined {
+  if (!value) return undefined;
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value.trim());
+  if (!match) {
+    const parsed = Date.parse(value);
+    return Number.isFinite(parsed) ? parsed + DAY_MS : undefined;
+  }
+  const next = new Date(
+    Date.UTC(Number(match[1]), Number(match[2]) - 1, Number(match[3]))
+  );
+  next.setUTCDate(next.getUTCDate() + 1);
+  return schedulingZoneMidnightMs(
+    next.getUTCFullYear(),
+    next.getUTCMonth() + 1,
+    next.getUTCDate()
+  );
+}
+
+// Weekday name (e.g. "TUESDAY") in the scheduling zone, DST-aware.
+function schedulingZoneWeekday(nowMs: number): string {
+  return new Intl.DateTimeFormat("en-US", {
+    timeZone: SCHEDULING_TIME_ZONE,
+    weekday: "long",
+  })
+    .format(new Date(nowMs))
+    .toUpperCase();
+}
+
+function dayMatches(daysToShow: string[] | undefined, nowMs: number): boolean {
+  if (!daysToShow || daysToShow.length === 0) return true;
+  const normalized = daysToShow.map(day => day.trim().toUpperCase());
+  if (normalized.includes("ALL")) return true;
+  const full = schedulingZoneWeekday(nowMs);
+  return normalized.includes(full) || normalized.includes(full.slice(0, 3));
+}
+
+// Active = today is within [scheduledStart, scheduleEnd], allowed by daysToShow,
+// and the message's countdown (when set) has not already ended. An expired
+// countdown makes the message inactive so it can't block another running one.
+function isMessageActive(message: ScheduledMessage, nowMs: number): boolean {
+  const startMs = parseDisplayStart(message.scheduledStart);
+  const endMs = parseDisplayEnd(message.scheduleEnd);
+  const afterStart = startMs === undefined || nowMs >= startMs;
+  const beforeEnd = endMs === undefined || nowMs < endMs;
+  const countdownEndMs = parseCountdownDateTime(message.countdownEndDateTime);
+  const countdownNotExpired =
+    countdownEndMs === undefined || nowMs < countdownEndMs;
+  return (
+    afterStart &&
+    beforeEnd &&
+    countdownNotExpired &&
+    dayMatches(message.daysToShow, nowMs)
+  );
+}
+
 function formatCountdown(totalSeconds: number) {
   const safeSeconds = Math.max(0, Math.floor(totalSeconds));
   const hours = Math.floor(safeSeconds / 3600);
@@ -41,6 +153,8 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
   enableCountdownTimer,
   countdownStartDateTime,
   countdownEndDateTime,
+  scheduledMessages,
+  onResolved,
 }) => {
   const backGroundColorClasses = {
     navy: "bg-bg-fill-inverse",
@@ -61,38 +175,70 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
     !backgroundColor;
   const textColorClass = isLightBackground ? "text-text-primary" : "text-white";
 
-  // Memoize parsed timestamps so they aren't re-parsed every second
+  const [nowMs, setNowMs] = useState(() => Date.now());
+  const intervalRef = useRef<number | null>(null);
+
+  // The message active for "now" (display window + daysToShow) wins.
+  const activeMessage = useMemo(
+    () => scheduledMessages?.find(message => isMessageActive(message, nowMs)),
+    [scheduledMessages, nowMs]
+  );
+  const hasActiveMessage = activeMessage !== undefined;
+
+  // Expose the resolved result so consumers (analytics) can read what showed.
+  const applicableWeekday = schedulingZoneWeekday(nowMs);
+  useEffect(() => {
+    onResolved?.({ hasActiveMessage, activeMessage, applicableWeekday });
+  }, [hasActiveMessage, activeMessage, applicableWeekday, onResolved]);
+
+  // Latest display-window end, so we keep ticking to let messages activate/expire.
+  const scheduleMaxEndMs = useMemo(() => {
+    if (!scheduledMessages?.length) return undefined;
+    const ends = scheduledMessages
+      .map(message => parseDisplayEnd(message.scheduleEnd))
+      .filter((value): value is number => value !== undefined);
+    return ends.length ? Math.max(...ends) : undefined;
+  }, [scheduledMessages]);
+
+  // Active message drives the countdown; dates are never inherited either way.
+  const effectiveCountdownStartDateTime = hasActiveMessage
+    ? activeMessage?.countdownStartDateTime
+    : countdownStartDateTime;
+  const effectiveCountdownEndDateTime = hasActiveMessage
+    ? activeMessage?.countdownEndDateTime
+    : countdownEndDateTime;
+
   const endMs = useMemo(
-    () => parseCountdownDateTime(countdownEndDateTime),
-    [countdownEndDateTime]
+    () => parseCountdownDateTime(effectiveCountdownEndDateTime),
+    [effectiveCountdownEndDateTime]
   );
   const startMs = useMemo(
-    () => parseCountdownDateTime(countdownStartDateTime),
-    [countdownStartDateTime]
+    () => parseCountdownDateTime(effectiveCountdownStartDateTime),
+    [effectiveCountdownStartDateTime]
   );
 
   const isTimerValid = useMemo(() => {
-    if (!enableCountdownTimer || endMs === undefined) return false;
-    if (countdownStartDateTime && startMs === undefined) return false;
+    // Active messages always enable the timer; default uses enableCountdownTimer.
+    if (!hasActiveMessage && !enableCountdownTimer) return false;
+    if (endMs === undefined) return false;
+    if (effectiveCountdownStartDateTime && startMs === undefined) return false;
     if (startMs !== undefined && startMs >= endMs) {
       console.error("Invalid countdown range: start must be before end", {
-        countdownStartDateTime,
-        countdownEndDateTime,
+        countdownStartDateTime: effectiveCountdownStartDateTime,
+        countdownEndDateTime: effectiveCountdownEndDateTime,
       });
       return false;
     }
     return true;
   }, [
+    hasActiveMessage,
     enableCountdownTimer,
     endMs,
     startMs,
-    countdownStartDateTime,
-    countdownEndDateTime,
+    effectiveCountdownStartDateTime,
+    effectiveCountdownEndDateTime,
   ]);
 
-  const [nowMs, setNowMs] = useState(() => Date.now());
-  const intervalRef = useRef<number | null>(null);
-
   const clearTimer = useCallback(() => {
     if (intervalRef.current !== null) {
       window.clearInterval(intervalRef.current);
@@ -101,22 +247,24 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
   }, []);
 
   useEffect(() => {
-    if (!isTimerValid) {
+    // Tick while the countdown runs, or while a schedule still has upcoming/active
+    // windows so the active message can change over time.
+    const countdownRunning =
+      isTimerValid && endMs !== undefined && nowMs < endMs;
+    const scheduleHasFuture =
+      scheduleMaxEndMs !== undefined && nowMs < scheduleMaxEndMs;
+
+    if (!countdownRunning && !scheduleHasFuture) {
       clearTimer();
       return;
     }
 
     intervalRef.current = window.setInterval(() => {
-      const now = Date.now();
-      // Auto-clear interval once countdown expires
-      if (endMs !== undefined && now >= endMs) {
-        clearTimer();
-      }
-      setNowMs(now);
+      setNowMs(Date.now());
     }, 1000);
 
     return clearTimer;
-  }, [isTimerValid, endMs, clearTimer]);
+  }, [isTimerValid, endMs, scheduleMaxEndMs, nowMs, clearTimer]);
 
   const countdown = useMemo(() => {
     if (!isTimerValid || endMs === undefined) {
@@ -134,6 +282,24 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
     };
   }, [isTimerValid, endMs, startMs, nowMs]);
 
+  // While a message is active it fully drives the content; each field is
+  // inherited from the message (even when unset) rather than the banner default.
+  const effectiveIconName = hasActiveMessage
+    ? activeMessage?.iconName
+    : iconName;
+  const effectiveCtaButtonLabel = hasActiveMessage
+    ? activeMessage?.ctaButtonLabel
+    : ctaButtonLabel;
+  const effectiveCtaSuffixText = hasActiveMessage
+    ? activeMessage?.ctaSuffixText
+    : ctaSuffixText;
+  const effectiveCtaButtonLink = hasActiveMessage
+    ? activeMessage?.ctaButtonLink
+    : ctaButtonLink;
+  const effectiveCtaButtonTarget = hasActiveMessage
+    ? activeMessage?.ctaButtonTarget
+    : ctaButtonTarget;
+
   return (
     <section id={anchorId}>
       <div
@@ -142,18 +308,18 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
         }`}
       >
         <Link
-          href={ctaButtonLink || "#"}
-          target={ctaButtonTarget || "_self"}
+          href={effectiveCtaButtonLink || "#"}
+          target={effectiveCtaButtonTarget || "_self"}
           className="max-w-screen-xl w-full transition-all"
         >
           <div className="flex flex-col items-center justify-center gap-1 text-center font-black">
             <div
               className={`${textColorClass} break-words text-body1 font-black leading-snug md:text-[18px]`}
             >
-              {iconName && (
+              {effectiveIconName && (
                 <MaterialIcon
                   name={
-                    iconName as React.ComponentProps<
+                    effectiveIconName as React.ComponentProps<
                       typeof MaterialIcon
                     >["name"]
                   }
@@ -168,8 +334,10 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
                 </span>
               )}
               {countdown.shouldShow ? " " : null}
-              {ctaButtonLabel && ctaButtonLabel}{" "}
-              {ctaSuffixText && <span className="ml-0.5">{ctaSuffixText}</span>}
+              {effectiveCtaButtonLabel && effectiveCtaButtonLabel}{" "}
+              {effectiveCtaSuffixText && (
+                <span className="ml-0.5">{effectiveCtaSuffixText}</span>
+              )}
             </div>
           </div>
         </Link>

package/src/contentful/blocks/anchored-bottom-banner/types.ts

@@ -1,3 +1,40 @@
+// Allowed values for a scheduled message's daysToShow.
+// "ALL" (or empty) = every day; full names or 3-letter abbreviations, uppercase.
+export type ScheduledMessageDay =
+  | "ALL"
+  | "SUNDAY"
+  | "MONDAY"
+  | "TUESDAY"
+  | "WEDNESDAY"
+  | "THURSDAY"
+  | "FRIDAY"
+  | "SATURDAY"
+  | "SUN"
+  | "MON"
+  | "TUE"
+  | "WED"
+  | "THU"
+  | "FRI"
+  | "SAT";
+
+export interface ScheduledMessage {
+  // Stable id for analytics (Contentful entry id or title).
+  id?: string;
+  // Date-only display window (scheduleEnd is inclusive of the whole end day).
+  scheduledStart?: string;
+  scheduleEnd?: string;
+  // Weekdays the message may show on within the window. "ALL" (or empty) = every day.
+  daysToShow?: ScheduledMessageDay[];
+  // Countdown timer window (full timestamps).
+  countdownStartDateTime?: string;
+  countdownEndDateTime?: string;
+  iconName?: string;
+  ctaButtonLabel?: string;
+  ctaSuffixText?: string;
+  ctaButtonLink?: string;
+  ctaButtonTarget?: string;
+}
+
 export interface AnchoredBottomBannerProps {
   ctaSuffixText?: string;
   backgroundColor?: "navy" | "yellow" | "green" | "purple" | "blue" | "white";
@@ -10,4 +47,13 @@ export interface AnchoredBottomBannerProps {
   enableCountdownTimer?: boolean;
   countdownStartDateTime?: string;
   countdownEndDateTime?: string;
+  // When a message is active for today, it drives the countdown + CTA content;
+  // otherwise the banner falls back to its own top-level values above.
+  scheduledMessages?: ScheduledMessage[];
+  // Fires with the resolved result so consumers (analytics) know what showed.
+  onResolved?: (result: {
+    hasActiveMessage: boolean;
+    activeMessage?: ScheduledMessage;
+    applicableWeekday: string;
+  }) => void;
 }

package/src/contentful/blocks/cards/product-card/index.tsx

@@ -102,7 +102,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
               as="p"
               className={cx(
                 "label3 text-wrap lowercase",
-                isDark ? "text-text-accent-on-bg-inverse" : "text-text-brand"
+                isDark ? "text-text-inverse" : "text-text"
               )}
             >
               {planSubtext}
@@ -275,7 +275,12 @@ export const ProductCard: React.FC<ProductCardProps> = ({
                       width={12}
                       height={12}
                     />
-                    <span className="footnote text-text">
+                    <span
+                      className={cx(
+                        "footnote",
+                        isDark ? "text-text-inverse" : "text-text"
+                      )}
+                    >
                       {innerBadge.badgeText.includes("|") ? (
                         <>
                           <span className="font-bold">

package/src/contentful/index.ts

@@ -88,7 +88,11 @@ export { DynamicTabs } from "./blocks/dynamic-tabs";
 export type { DynamicTabsT } from "./blocks/dynamic-tabs/types";
 
 export { AnchoredBottomBanner } from "./blocks/anchored-bottom-banner";
-export type { AnchoredBottomBannerProps } from "./blocks/anchored-bottom-banner/types";
+export type {
+  AnchoredBottomBannerProps,
+  ScheduledMessage,
+  ScheduledMessageDay,
+} from "./blocks/anchored-bottom-banner/types";
 
 export { default as CookieBanner } from "./blocks/cookiebanner";
 export type { TypeComponentRichTextFields as CookieBannerProps } from "./blocks/cookiebanner/type";