@windstream/react-shared-components 0.2.71 → 0.2.73

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

@@ -106,7 +106,7 @@ describe("AnchoredBottomBanner", () => {
       <AnchoredBottomBanner backgroundColor="blue" />
     );
     expect(
-      container.querySelector(".bg-bg-fill-brand-supporting")
+      container.querySelector(".bg-bg-fill-brand-info")
     ).toBeInTheDocument();
   });
 
@@ -306,6 +306,7 @@ describe("AnchoredBottomBanner scheduledMessages", () => {
             scheduledStart: "2026-05-18",
             scheduleEnd: "2026-05-20",
             daysToShow: ["ALL"],
+            enableCountdownTimer: true,
             countdownStartDateTime: "2026-05-19T11:00:00Z",
             countdownEndDateTime: "2026-05-19T13:00:00Z",
             ctaButtonLabel: "Flash sale",
@@ -327,6 +328,7 @@ describe("AnchoredBottomBanner scheduledMessages", () => {
           {
             scheduledStart: "2026-05-17",
             scheduleEnd: "2026-05-19",
+            enableCountdownTimer: true,
             countdownEndDateTime: "2026-05-19T13:00:00Z",
             ctaButtonLabel: "Last day",
           },
@@ -383,6 +385,7 @@ describe("AnchoredBottomBanner scheduledMessages", () => {
             scheduledStart: "2026-05-18",
             scheduleEnd: "2026-05-20",
             daysToShow: ["TUE"],
+            enableCountdownTimer: true,
             countdownEndDateTime: "2026-05-19T13:00:00Z",
             ctaButtonLabel: "Tuesday deal",
           },
@@ -403,6 +406,7 @@ describe("AnchoredBottomBanner scheduledMessages", () => {
           {
             scheduledStart: "2026-05-18",
             scheduleEnd: "2026-05-20",
+            enableCountdownTimer: true,
             countdownEndDateTime: "2026-05-19T12:00:10Z",
             ctaButtonLabel: "Active message",
           },
@@ -414,6 +418,87 @@ describe("AnchoredBottomBanner scheduledMessages", () => {
     expect(screen.getByText(/00H : 00M : 10/)).toBeInTheDocument();
   });
 
+  it("does not show the countdown when the active message disables the timer", () => {
+    render(
+      <AnchoredBottomBanner
+        ctaButtonLabel="Default label"
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-18",
+            scheduleEnd: "2026-05-20",
+            enableCountdownTimer: false,
+            countdownEndDateTime: "2026-05-19T13:00:00Z",
+            ctaButtonLabel: "No timer message",
+          },
+        ]}
+      />
+    );
+    expect(screen.getByText("No timer message")).toBeInTheDocument();
+    expect(screen.queryByText(/H :/)).not.toBeInTheDocument();
+  });
+
+  it("does not show the active message's countdown when the flag is unset", () => {
+    render(
+      <AnchoredBottomBanner
+        ctaButtonLabel="Default label"
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-18",
+            scheduleEnd: "2026-05-20",
+            countdownEndDateTime: "2026-05-19T13:00:00Z",
+            ctaButtonLabel: "Unset timer message",
+          },
+        ]}
+      />
+    );
+    expect(screen.getByText("Unset timer message")).toBeInTheDocument();
+    expect(screen.queryByText(/H :/)).not.toBeInTheDocument();
+  });
+
+  it("does not inherit the parent's enableCountdownTimer for an active message", () => {
+    render(
+      <AnchoredBottomBanner
+        ctaButtonLabel="Default label"
+        enableCountdownTimer={true}
+        countdownEndDateTime="2026-05-19T13:00:00Z"
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-18",
+            scheduleEnd: "2026-05-20",
+            enableCountdownTimer: false,
+            countdownEndDateTime: "2026-05-19T13:00:00Z",
+            ctaButtonLabel: "Active message",
+          },
+        ]}
+      />
+    );
+    // The parent timer is enabled, but the active message disables it -> no countdown.
+    expect(screen.getByText("Active message")).toBeInTheDocument();
+    expect(screen.queryByText(/H :/)).not.toBeInTheDocument();
+  });
+
+  it("keeps the message active after its countdown ends, hiding only the countdown", () => {
+    render(
+      <AnchoredBottomBanner
+        ctaButtonLabel="Default label"
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-18",
+            scheduleEnd: "2026-05-20",
+            enableCountdownTimer: true,
+            // Countdown already ended (11:00Z) while now is 12:00Z, but the
+            // display window (05-18..05-20) is still open.
+            countdownEndDateTime: "2026-05-19T11:00:00Z",
+            ctaButtonLabel: "Still showing message",
+          },
+        ]}
+      />
+    );
+    expect(screen.getByText("Still showing message")).toBeInTheDocument();
+    expect(screen.queryByText("Default label")).not.toBeInTheDocument();
+    expect(screen.queryByText(/H :/)).not.toBeInTheDocument();
+  });
+
   it("selects the first message whose window contains today", () => {
     render(
       <AnchoredBottomBanner
@@ -441,6 +526,48 @@ describe("AnchoredBottomBanner scheduledMessages", () => {
     expect(screen.queryByText("Past message")).not.toBeInTheDocument();
     expect(screen.queryByText("Future message")).not.toBeInTheDocument();
   });
+
+  it("uses the active message's background, not the parent's", () => {
+    const { container } = render(
+      <AnchoredBottomBanner
+        backgroundColor="navy"
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-18",
+            scheduleEnd: "2026-05-20",
+            backgroundColor: "green",
+            ctaButtonLabel: "Active message",
+          },
+        ]}
+      />
+    );
+    expect(container.querySelector(".bg-bg-fill-success")).toBeInTheDocument();
+    expect(
+      container.querySelector(".bg-bg-fill-inverse")
+    ).not.toBeInTheDocument();
+  });
+
+  it("uses the default background when the active message has none", () => {
+    const { container } = render(
+      <AnchoredBottomBanner
+        backgroundColor="navy"
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-18",
+            scheduleEnd: "2026-05-20",
+            ctaButtonLabel: "Active message",
+          },
+        ]}
+      />
+    );
+    // No override on the message -> same default as a parent with no background.
+    expect(
+      container.querySelector(".bg-bg-fill-inverse")
+    ).not.toBeInTheDocument();
+    expect(
+      container.querySelector(".bg-bg-fill-brand-accent")
+    ).toBeInTheDocument();
+  });
 });
 
 describe("AnchoredBottomBanner scheduling timezone (America/New_York)", () => {

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

@@ -113,23 +113,16 @@ function dayMatches(daysToShow: string[] | undefined, nowMs: number): boolean {
   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.
+// Active = today is within [scheduledStart, scheduleEnd] and allowed by
+// daysToShow. The countdown is independent: it hides once its own end passes
+// (see the `countdown` memo), but the message itself stays active across its
+// whole display window.
 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)
-  );
+  return afterStart && beforeEnd && dayMatches(message.daysToShow, nowMs);
 }
 
 function formatCountdown(totalSeconds: number) {
@@ -159,22 +152,12 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
   const backGroundColorClasses = {
     navy: "bg-bg-fill-inverse",
     green: "bg-bg-fill-success",
-    blue: "bg-bg-fill-brand-supporting",
+    blue: "bg-bg-fill-brand-info",
     purple: "bg-bg-fill-brand-tertiary",
     yellow: "bg-bg-fill-brand-accent",
     white: "bg-white",
   };
 
-  const bgClass = backgroundColor
-    ? backGroundColorClasses[backgroundColor]
-    : "bg-bg-fill-brand-accent";
-
-  const isLightBackground =
-    backgroundColor === "yellow" ||
-    backgroundColor === "white" ||
-    !backgroundColor;
-  const textColorClass = isLightBackground ? "text-text-primary" : "text-white";
-
   const [nowMs, setNowMs] = useState(() => Date.now());
   const intervalRef = useRef<number | null>(null);
 
@@ -198,7 +181,14 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
     // records the pre-mount hasActiveMessage:false fallback.
     if (!hasMounted) return;
     onResolved?.({ hasActiveMessage, activeMessage, applicableWeekday });
-  }, [hasMounted, hasActiveMessage, activeMessage, applicableWeekday, onResolved]);
+  }, [
+    hasMounted,
+    hasActiveMessage,
+    activeMessage,
+    applicableWeekday,
+    scheduledMessages,
+    onResolved,
+  ]);
 
   // Latest display-window end, so we keep ticking to let messages activate/expire.
   const scheduleMaxEndMs = useMemo(() => {
@@ -217,6 +207,13 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
     ? activeMessage?.countdownEndDateTime
     : countdownEndDateTime;
 
+  // The timer flag is never inherited: an active message uses its own
+  // enableCountdownTimer (undefined = off, same as the banner level); otherwise
+  // the banner's top-level flag applies.
+  const effectiveEnableCountdownTimer = hasActiveMessage
+    ? activeMessage?.enableCountdownTimer
+    : enableCountdownTimer;
+
   const endMs = useMemo(
     () => parseCountdownDateTime(effectiveCountdownEndDateTime),
     [effectiveCountdownEndDateTime]
@@ -227,8 +224,9 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
   );
 
   const isTimerValid = useMemo(() => {
-    // Active messages always enable the timer; default uses enableCountdownTimer.
-    if (!hasActiveMessage && !enableCountdownTimer) return false;
+    // Timer shows only when explicitly enabled for the resolved source
+    // (active message's own flag, or the banner's flag when none is active).
+    if (!effectiveEnableCountdownTimer) return false;
     if (endMs === undefined) return false;
     if (effectiveCountdownStartDateTime && startMs === undefined) return false;
     if (startMs !== undefined && startMs >= endMs) {
@@ -240,8 +238,7 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
     }
     return true;
   }, [
-    hasActiveMessage,
-    enableCountdownTimer,
+    effectiveEnableCountdownTimer,
     endMs,
     startMs,
     effectiveCountdownStartDateTime,
@@ -309,6 +306,20 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
     ? activeMessage?.ctaButtonTarget
     : ctaButtonTarget;
 
+  // Active message owns its background; when unset it uses the same default as
+  // the parent-with-no-background (bg-fill-brand-accent), not the parent's color.
+  const effectiveBackgroundColor = hasActiveMessage
+    ? activeMessage?.backgroundColor
+    : backgroundColor;
+  const bgClass = effectiveBackgroundColor
+    ? backGroundColorClasses[effectiveBackgroundColor]
+    : "bg-bg-fill-brand-accent";
+  const isLightBackground =
+    effectiveBackgroundColor === "yellow" ||
+    effectiveBackgroundColor === "white" ||
+    !effectiveBackgroundColor;
+  const textColorClass = isLightBackground ? "text-text-primary" : "text-white";
+
   return (
     <section id={anchorId}>
       <div

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

@@ -25,10 +25,14 @@ export interface ScheduledMessage {
   scheduleEnd?: string;
   // Weekdays the message may show on within the window. "ALL" (or empty) = every day.
   daysToShow?: ScheduledMessageDay[];
+  // Per-message timer toggle. The message never inherits the banner's
+  // enableCountdownTimer; the countdown shows only when this is explicitly true.
+  enableCountdownTimer?: boolean;
   // Countdown timer window (full timestamps).
   countdownStartDateTime?: string;
   countdownEndDateTime?: string;
   iconName?: string;
+  backgroundColor?: AnchoredBottomBannerProps["backgroundColor"];
   ctaButtonLabel?: string;
   ctaSuffixText?: string;
   ctaButtonLink?: string;

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

@@ -86,16 +86,16 @@ describe("ProductCard", () => {
 
     it("renders plan name", () => {
       render(<ProductCard {...defaultProps} />);
-      expect(
-        screen.getByRole("heading", { level: 3 })
-      ).toHaveTextContent("Kinetic 500");
+      expect(screen.getByRole("heading", { level: 3 })).toHaveTextContent(
+        "Kinetic 500"
+      );
     });
 
     it("renders plan subtext", () => {
       render(<ProductCard {...defaultProps} />);
-      expect(
-        screen.getByRole("heading", { level: 3 })
-      ).toHaveTextContent("Up to 500 Mbps");
+      expect(screen.getByRole("heading", { level: 3 })).toHaveTextContent(
+        "Up to 500 Mbps"
+      );
     });
 
     it("renders price dollar sign", () => {
@@ -126,6 +126,45 @@ describe("ProductCard", () => {
     });
   });
 
+  describe("Business theme", () => {
+    it("uses the semantic brand token for the plan name and lowercases it by default", () => {
+      render(<ProductCard {...defaultProps} />);
+      const heading = screen.getByRole("heading", { level: 3 });
+      // Color is driven by the themeable token, not a hardcoded hex.
+      expect(heading.className).toContain("text-text-brand");
+      expect(heading.className).toContain("lowercase");
+      expect(heading.className).not.toContain("[#0393BA]");
+    });
+
+    it("keeps the authored casing in business mode (color stays theme-driven)", () => {
+      render(<ProductCard {...defaultProps} enableBusinessSettings={true} />);
+      const heading = screen.getByRole("heading", { level: 3 });
+      // Still the semantic brand token — the business teal comes from the
+      // data-theme scope, not a card-level class.
+      expect(heading.className).toContain("text-text-brand");
+      expect(heading.className).not.toContain("lowercase");
+      expect(heading.className).not.toContain("[#0393BA]");
+    });
+
+    it("never hardcodes a hex accent on the plan name", () => {
+      render(<ProductCard {...defaultProps} enableBusinessSettings={true} />);
+      const heading = screen.getByRole("heading", { level: 3 });
+      expect(heading.className).not.toMatch(/#[0-9a-fA-F]{6}/);
+    });
+
+    it("keeps the dark (highlighted) accent regardless of business mode", () => {
+      render(
+        <ProductCard
+          {...defaultProps}
+          theme="dark"
+          enableBusinessSettings={true}
+        />
+      );
+      const heading = screen.getByRole("heading", { level: 3 });
+      expect(heading.className).toContain("text-text-accent-on-bg-inverse");
+    });
+  });
+
   describe("Price Suffix", () => {
     it("renders priceSuffixBottom when provided", () => {
       render(
@@ -250,9 +289,9 @@ describe("ProductCard", () => {
       const dollar = screen.getByText("$100");
       expect(dollar).toHaveClass("label3");
       // The surrounding text keeps the parent body3 weight (not label3).
-      expect(
-        screen.getByText(/prepaid Mastercard®/)
-      ).not.toHaveClass("label3");
+      expect(screen.getByText(/prepaid Mastercard®/)).not.toHaveClass(
+        "label3"
+      );
     });
   });
 

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

@@ -54,6 +54,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
   priceSuffixBottom,
   hasAnyBadge = false,
   twoColumn = false,
+  enableBusinessSettings = false,
 }) => {
   const [internalExpanded, setInternalExpanded] = useState(false);
   // Use parent state if provided, otherwise use internal state
@@ -116,7 +117,8 @@ export const ProductCard: React.FC<ProductCardProps> = ({
               as="h3"
               className={cx(
                 planNameClass,
-                "whitespace-normal lowercase",
+                "whitespace-normal",
+                !enableBusinessSettings && "lowercase",
                 isDark ? "text-text-accent-on-bg-inverse" : "text-text-brand"
               )}
             >

package/src/contentful/blocks/cards/product-card/types.ts

@@ -26,7 +26,7 @@ export interface ProductCardProps {
   onToggleExpand?: () => void;
   ctaText?: string;
   cta?: ButtonProps;
-  onCtaClick: () => void;
+  onCtaClick: (event: React.MouseEvent<HTMLElement>) => void;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
   /** True when any card in the set has a best-value badge, so non-badge cards
    *  reserve the banner height and stay vertically aligned. */
@@ -35,4 +35,5 @@ export interface ProductCardProps {
    *  compact mobile typography below `md`. One-column stacks keep the standard
    *  sizes at every breakpoint. */
   twoColumn?: boolean;
+  enableBusinessSettings?: boolean;
 }

package/src/contentful/blocks/carousel/helper.test.tsx

@@ -31,12 +31,14 @@ jest.mock("@shared/contentful/blocks/cards/product-card", () => ({
     onCtaClick,
     onToggleExpand,
     isExpanded,
+    enableBusinessSettings,
   }: any) => (
     <div
       data-testid="product-card"
       data-plan={planName}
       data-speed={speed}
       data-expanded={isExpanded}
+      data-business={enableBusinessSettings ? "true" : "false"}
     >
       {planName}
       <button onClick={onCtaClick} data-testid="product-cta">
@@ -329,15 +331,54 @@ describe("ProductCardCarousel", () => {
     expect(toggleButtons[0]).toBeInTheDocument();
   });
 
-  it("handles CTA click on product card", () => {
+  it("fires onProductCardCtaClick with the product item and click event", () => {
+    const onProductCardCtaClick = jest.fn();
+    const fields = createProductFields([sampleProduct]);
+    render(
+      <ProductCardCarousel
+        fields={fields}
+        onProductCardCtaClick={onProductCardCtaClick}
+      />
+    );
+    const ctaButton = screen.getByTestId("product-cta");
+    fireEvent.click(ctaButton);
+    expect(onProductCardCtaClick).toHaveBeenCalledTimes(1);
+    expect(onProductCardCtaClick.mock.calls[0][0]).toEqual(
+      expect.objectContaining({ sys: { id: "prod-1" } })
+    );
+    // Second argument is the originating click event.
+    expect(onProductCardCtaClick.mock.calls[0][1]).toBeDefined();
+  });
+
+  it("handles CTA click when no onProductCardCtaClick is provided", () => {
     const fields = createProductFields([sampleProduct]);
     render(<ProductCardCarousel fields={fields} />);
     const ctaButton = screen.getByTestId("product-cta");
     fireEvent.click(ctaButton);
-    // handleCtaClick just returns; no error
+    // No handler wired; click is a no-op and must not throw.
     expect(ctaButton).toBeInTheDocument();
   });
 
+  it("defaults product cards to the non-business theme", () => {
+    const fields = createProductFields([sampleProduct]);
+    render(<ProductCardCarousel fields={fields} />);
+    expect(screen.getAllByTestId("product-card")[0]).toHaveAttribute(
+      "data-business",
+      "false"
+    );
+  });
+
+  it("forwards enableBusinessSettings to the product cards", () => {
+    const fields = createProductFields([sampleProduct]);
+    render(
+      <ProductCardCarousel fields={fields} enableBusinessSettings={true} />
+    );
+    expect(screen.getAllByTestId("product-card")[0]).toHaveAttribute(
+      "data-business",
+      "true"
+    );
+  });
+
   it("handles toggle expand for mobile cards in carousel mode", () => {
     const items = Array.from({ length: 4 }, (_, i) => ({
       ...sampleProduct,

package/src/contentful/blocks/carousel/helper.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import {
   CarouselWithProductCards,
   CarouselWithTestimonialCards,
+  ProductCardFields,
   TabSwitchProps,
 } from "./types";
 
@@ -17,11 +18,18 @@ function ProductCardPanel({
   fields,
   renderCheckPlans,
   isVisible = true,
+  onProductCardCtaClick,
+  enableBusinessSettings = false,
 }: {
   fields: CarouselWithProductCards;
   onModalButtonClick?: (id?: string) => void;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
   isVisible?: boolean;
+  onProductCardCtaClick?: (
+    item: ProductCardFields,
+    event: React.MouseEvent<HTMLElement>
+  ) => void;
+  enableBusinessSettings?: boolean;
 }) {
   const itemsExpanded = fields?.items?.items?.[0]?.benefitsExpanded || false;
   const [desktopExpanded, setDesktopExpanded] = useState(itemsExpanded);
@@ -284,8 +292,8 @@ function ProductCardPanel({
       setDesktopExpanded(prev => !prev);
     };
 
-    const handleCtaClick = () => {
-      return;
+    const handleCtaClick = (event: React.MouseEvent<HTMLElement>) => {
+      onProductCardCtaClick?.(item as ProductCardFields, event);
     };
 
     return (
@@ -331,6 +339,7 @@ function ProductCardPanel({
           priceSuffixBottom={item?.priceSuffixBottom}
           hasAnyBadge={hasAnyBadge}
           twoColumn={twoColumn}
+          enableBusinessSettings={enableBusinessSettings}
         />
       </div>
     );
@@ -425,12 +434,19 @@ export function ProductCardCarousel({
   renderCheckPlans,
   activeTab,
   tabs,
+  onProductCardCtaClick,
+  enableBusinessSettings = false,
 }: {
   fields: CarouselWithProductCards;
   onModalButtonClick?: (id?: string) => void;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
   activeTab?: string;
   tabs?: string[];
+  onProductCardCtaClick?: (
+    item: ProductCardFields,
+    event: React.MouseEvent<HTMLElement>
+  ) => void;
+  enableBusinessSettings?: boolean;
 }) {
   const allItems = fields?.items?.items || [];
 
@@ -456,6 +472,8 @@ export function ProductCardCarousel({
                 fields={tabFields as CarouselWithProductCards}
                 renderCheckPlans={renderCheckPlans}
                 isVisible={tab === activeTab}
+                onProductCardCtaClick={onProductCardCtaClick}
+                enableBusinessSettings={enableBusinessSettings}
               />
             </div>
           );
@@ -465,7 +483,12 @@ export function ProductCardCarousel({
   }
 
   return (
-    <ProductCardPanel fields={fields} renderCheckPlans={renderCheckPlans} />
+    <ProductCardPanel
+      fields={fields}
+      renderCheckPlans={renderCheckPlans}
+      onProductCardCtaClick={onProductCardCtaClick}
+      enableBusinessSettings={enableBusinessSettings}
+    />
   );
 }
 

package/src/contentful/blocks/carousel/index.test.tsx

@@ -8,8 +8,16 @@ import { fireEvent, render, screen } from "@testing-library/react";
 
 // Mock helper components
 jest.mock("./helper", () => ({
-  ProductCardCarousel: ({ fields }: any) => (
-    <div data-testid="product-card-carousel">{fields?.title}</div>
+  ProductCardCarousel: ({ fields, onProductCardCtaClick }: any) => (
+    <div data-testid="product-card-carousel">
+      {fields?.title}
+      <button
+        data-testid="mock-cta"
+        onClick={e => onProductCardCtaClick?.({ sys: { id: "prod-1" } }, e)}
+      >
+        cta
+      </button>
+    </div>
   ),
   TestimonialCarousel: ({ fields }: any) => (
     <div data-testid="testimonial-carousel">{fields?.title}</div>
@@ -200,6 +208,68 @@ describe("Carousel", () => {
     });
   });
 
+  describe("analytics", () => {
+    it("forwards onProductCardCtaClick with the item and click event", () => {
+      const onProductCardCtaClick = jest.fn();
+      render(
+        <Carousel
+          {...defaultProps}
+          hasProductCards={true}
+          onProductCardCtaClick={onProductCardCtaClick}
+        />
+      );
+      fireEvent.click(screen.getByTestId("mock-cta"));
+      expect(onProductCardCtaClick).toHaveBeenCalledTimes(1);
+      expect(onProductCardCtaClick.mock.calls[0][0]).toEqual({
+        sys: { id: "prod-1" },
+      });
+      // Second argument is the originating click event (needed by consumers to
+      // dispatch their own click analytics from the clicked element).
+      expect(onProductCardCtaClick.mock.calls[0][1]).toBeDefined();
+    });
+
+    it("attaches productCardsRef to the product-card container", () => {
+      const ref = React.createRef<HTMLDivElement>();
+      render(
+        <Carousel
+          {...defaultProps}
+          hasProductCards={true}
+          productCardsRef={ref}
+        />
+      );
+      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+      expect(ref.current).toContainElement(
+        screen.getByTestId("product-card-carousel")
+      );
+    });
+  });
+
+  describe("business theme", () => {
+    it("does not scope the business theme by default", () => {
+      const { container } = render(
+        <Carousel {...defaultProps} hasProductCards={true} />
+      );
+      expect(
+        container.querySelector('[data-theme="business-rebrand"]')
+      ).not.toBeInTheDocument();
+    });
+
+    it("scopes the product cards to the business-rebrand theme when enabled", () => {
+      const { container } = render(
+        <Carousel
+          {...defaultProps}
+          hasProductCards={true}
+          enableBusinessSettings={true}
+        />
+      );
+      const scope = container.querySelector('[data-theme="business-rebrand"]');
+      expect(scope).toBeInTheDocument();
+      expect(scope).toContainElement(
+        screen.getByTestId("product-card-carousel")
+      );
+    });
+  });
+
   describe("testimonial cards", () => {
     it("renders TestimonialCarousel when hasTestimonialCards is true", () => {
       render(<Carousel {...defaultProps} hasTestimonialCards={true} />);