@windstream/react-shared-components 0.2.74 → 0.2.75

package/src/contentful/blocks/carousel/Carousel.stories.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { Carousel } from "./index";
 import type { carouselFieldsInterface } from "./types";
 
@@ -31,7 +32,8 @@ const sampleProduct = (
   productCardDescription = "Reliable internet for your home.",
   giftRewards: { list: { items: Array<{ title: string; icon: string }> } } = {
     list: { items: [] },
-  }
+  },
+  productCategory?: string
 ) => ({
   __typename: "ComponentProductCard" as const,
   sys: { id },
@@ -41,6 +43,7 @@ const sampleProduct = (
   techType: "Fiber",
   highlighted,
   productCardDescription,
+  productCategory,
   benefitsTitle: "Plan benefits",
   benefitsExpanded: false,
   cta: { buttonLabel: "Select plan" },
@@ -83,8 +86,20 @@ const twoColumnFields: carouselFieldsInterface = {
           },
         }
       ),
-      sampleProduct("plan-3", "1 Gig", "69", false, "Good for most day-to-day internet uses including streaming video."),
-      sampleProduct("plan-4", "2 Gig", "89", false, "Worry-free internet for the whole home."),
+      sampleProduct(
+        "plan-3",
+        "1 Gig",
+        "69",
+        false,
+        "Good for most day-to-day internet uses including streaming video."
+      ),
+      sampleProduct(
+        "plan-4",
+        "2 Gig",
+        "89",
+        false,
+        "Worry-free internet for the whole home."
+      ),
     ],
   },
 };
@@ -106,3 +121,288 @@ export const TwoColumnProductCards: Story = {
   },
 };
 
+const mastercardGift = (amount: string) => ({
+  list: {
+    items: [
+      {
+        title: `|$${amount}| prepaid Mastercard®`,
+        icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='24' height='24' rx='4' fill='%23ffd200'/%3E%3C/svg%3E",
+      },
+    ],
+  },
+});
+
+const tabbedFields: carouselFieldsInterface = {
+  __typename: "ComponentCarousel",
+  sys: { id: "carousel-tabbed-gift" },
+  title: "fiber internet plans that fit your way of working",
+  twoColumn: false,
+  backgroundColor: "white",
+  items: {
+    items: [
+      // "Business Ready" tab — cards carry a gift badge, so the gift slot is
+      // reserved and the CTAs stay aligned.
+      sampleProduct(
+        "br-1",
+        "fiber 1 gig",
+        "99",
+        true,
+        "Fast, secure connectivity solution for growing teams.",
+        mastercardGift("100"),
+        "Business Ready"
+      ),
+      sampleProduct(
+        "br-2",
+        "fiber 2 gig",
+        "129",
+        false,
+        "Ultra-fast connectivity solution for high-traffic businesses.",
+        mastercardGift("200"),
+        "Business Ready"
+      ),
+      // "Internet Only" tab — no gift badges, so the gift slot must collapse and
+      // the CTA should sit flush with the description (the fix under test).
+      sampleProduct(
+        "io-1",
+        "fiber 300 mbps",
+        "49",
+        true,
+        "Ideal for guest Wi-Fi, multiple POS devices, video uploads and streaming.",
+        { list: { items: [] } },
+        "Internet Only"
+      ),
+    ],
+  },
+};
+
+const TabbedTemplate = () => {
+  const [activeTab, setActiveTab] = useState("Business Ready");
+  return (
+    <div style={{ width: "100%", maxWidth: 960 }}>
+      <Carousel
+        fields={tabbedFields}
+        hasProductCards={true}
+        hasTestimonialCards={false}
+        disclaimerText={
+          "Price includes a $5.00/mo credit with AutoPay, option to disable at the next step."
+        }
+        backgroundColor="bg-white"
+        showSwitch={true}
+        activeTab={activeTab}
+        setActiveTab={setActiveTab}
+        tabs={["Business Ready", "Internet Only"]}
+      />
+    </div>
+  );
+};
+
+/**
+ * Reproduces the reported gap: switching to the "Internet Only" tab (whose cards
+ * have no gift badge) must collapse the gift slot so the Select plan CTA sits
+ * flush with the description, while the "Business Ready" tab (gift badges
+ * present) keeps the slot reserved so CTAs stay aligned.
+ */
+export const TabbedGiftAlignment: Story = {
+  parameters: { layout: "fullscreen" },
+  render: () => <TabbedTemplate />,
+};
+
+const mixedGiftFields: carouselFieldsInterface = {
+  __typename: "ComponentCarousel",
+  sys: { id: "carousel-mixed-gift" },
+  title: "Mixed gift / no-gift cards",
+  subTitle: "The no-gift card reserves the gift height so both CTAs align.",
+  twoColumn: false,
+  backgroundColor: "white",
+  items: {
+    items: [
+      sampleProduct(
+        "mixed-1",
+        "fiber 1 gig",
+        "99",
+        true,
+        "Fast, secure connectivity solution for growing teams.",
+        mastercardGift("100")
+      ),
+      sampleProduct(
+        "mixed-2",
+        "fiber 2 gig",
+        "129",
+        false,
+        "Ultra-fast connectivity solution for high-traffic businesses."
+      ),
+    ],
+  },
+};
+
+/**
+ * One card has a single gift badge, the other has none. The no-gift card must
+ * reserve the gift-slot height so both Select plan CTAs sit at the same height,
+ * while the gift card's CTA sits directly below its badge (no over-reservation).
+ */
+export const MixedGiftAlignment: Story = {
+  parameters: { layout: "fullscreen" },
+  args: {
+    fields: mixedGiftFields,
+    hasProductCards: true,
+    hasTestimonialCards: false,
+    disclaimerText: null,
+    backgroundColor: "bg-white",
+    activeTab: "",
+    setActiveTab: () => {},
+    tabs: [],
+  },
+};
+
+const tabbedMixedFields: carouselFieldsInterface = {
+  __typename: "ComponentCarousel",
+  sys: { id: "carousel-tabbed-mixed-gift" },
+  title: "fiber internet plans that fit your way of working",
+  twoColumn: false,
+  backgroundColor: "white",
+  items: {
+    items: [
+      // "Business Ready" tab — one card has a gift badge, one does not. The
+      // no-gift card must reserve the gift height so both CTAs align.
+      sampleProduct(
+        "tm-br-1",
+        "fiber 1 gig",
+        "99",
+        true,
+        "Fast, secure connectivity solution for growing teams.",
+        mastercardGift("100"),
+        "Business Ready"
+      ),
+      sampleProduct(
+        "tm-br-2",
+        "fiber 2 gig",
+        "129",
+        false,
+        "Ultra-fast connectivity solution for high-traffic businesses.",
+        { list: { items: [] } },
+        "Business Ready"
+      ),
+      // "Internet Only" tab — neither card has a gift badge, so both gift slots
+      // collapse and both CTAs sit flush with the description (recalculated for
+      // this tab on switch).
+      sampleProduct(
+        "tm-io-1",
+        "fiber 300 mbps",
+        "49",
+        false,
+        "Ideal for guest Wi-Fi, multiple POS devices, video uploads and streaming.",
+        { list: { items: [] } },
+        "Internet Only"
+      ),
+      sampleProduct(
+        "tm-io-2",
+        "fiber 500 mbps",
+        "59",
+        true,
+        "Great for busy storefronts with several connected devices.",
+        { list: { items: [] } },
+        "Internet Only"
+      ),
+    ],
+  },
+};
+
+const TabbedMixedTemplate = () => {
+  const [activeTab, setActiveTab] = useState("Business Ready");
+  return (
+    <div style={{ width: "100%", maxWidth: 960 }}>
+      <Carousel
+        fields={tabbedMixedFields}
+        hasProductCards={true}
+        hasTestimonialCards={false}
+        disclaimerText={
+          "Price includes a $5.00/mo credit with AutoPay, option to disable at the next step."
+        }
+        backgroundColor="bg-white"
+        showSwitch={true}
+        activeTab={activeTab}
+        setActiveTab={setActiveTab}
+        tabs={["Business Ready", "Internet Only"]}
+      />
+    </div>
+  );
+};
+
+/**
+ * Tab-switch coverage: the "Business Ready" tab mixes one gift card with one
+ * no-gift card (the no-gift card reserves the gift height so both CTAs align),
+ * while the "Internet Only" tab has two no-gift cards (both gift slots collapse
+ * and the CTAs sit flush with the description). Switching tabs recalculates the
+ * gift-slot height for only the visible cards.
+ */
+export const TabbedMixedGiftAlignment: Story = {
+  parameters: { layout: "fullscreen" },
+  render: () => <TabbedMixedTemplate />,
+};
+
+const twoColumnRowGiftFields: carouselFieldsInterface = {
+  __typename: "ComponentCarousel",
+  sys: { id: "carousel-two-column-row-gift" },
+  title: "Two-column rows: per-row gift height",
+  subTitle:
+    "On mobile (resize below 768px) the giftless top row collapses while the gift row below reserves its own height.",
+  twoColumn: true,
+  backgroundColor: "white",
+  items: {
+    items: [
+      // Row 1 — both giftless: the gift slot must collapse so these CTAs sit
+      // flush with the description (they must NOT borrow row 2's gift height).
+      sampleProduct(
+        "row-1a",
+        "fiber 100 mbps",
+        "19",
+        false,
+        "Reliable support for essentials like email, browsing, and video chat."
+      ),
+      sampleProduct(
+        "row-1b",
+        "fiber 300 mbps",
+        "34",
+        false,
+        "Good for most day-to-day internet uses including streaming video."
+      ),
+      // Row 2 — both have a gift badge: this row reserves its own gift height.
+      sampleProduct(
+        "row-2a",
+        "fiber 1 gig",
+        "39",
+        false,
+        "Boosted speed and capacity for working from a home office.",
+        mastercardGift("100")
+      ),
+      sampleProduct(
+        "row-2b",
+        "fiber 2 gig",
+        "59",
+        false,
+        "Ultra-fast speeds for large smart homes.",
+        mastercardGift("200")
+      ),
+    ],
+  },
+};
+
+/**
+ * Two-column mobile regression guard: gift-slot height is equalized per row
+ * (the cards next to each other), never across the whole tab. Resize below
+ * 768px — row 1 (both giftless) collapses so its CTAs sit flush with the
+ * description, while row 2 (both with a gift) reserves only its own height.
+ */
+export const TwoColumnRowGiftAlignment: Story = {
+  parameters: { layout: "fullscreen" },
+  args: {
+    fields: twoColumnRowGiftFields,
+    hasProductCards: true,
+    hasTestimonialCards: false,
+    disclaimerText: null,
+    backgroundColor: "bg-white",
+    activeTab: "",
+    setActiveTab: () => {},
+    tabs: [],
+  },
+};

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

@@ -32,22 +32,34 @@ jest.mock("@shared/contentful/blocks/cards/product-card", () => ({
     onToggleExpand,
     isExpanded,
     enableBusinessSettings,
+    giftBadge,
+    hasAnyGift,
   }: any) => (
-    <div
+    <article
       data-testid="product-card"
       data-plan={planName}
       data-speed={speed}
       data-expanded={isExpanded}
       data-business={enableBusinessSettings ? "true" : "false"}
     >
-      {planName}
+      <div data-pc-header={true}>{planName}</div>
+      <div data-pc-description={true}>{speed}</div>
+      {giftBadge?.length ? (
+        <div data-pc-gift={true} data-testid="gift-slot" />
+      ) : hasAnyGift ? (
+        <div
+          data-pc-gift={true}
+          data-pc-gift-empty={true}
+          data-testid="gift-slot"
+        />
+      ) : null}
       <button onClick={onCtaClick} data-testid="product-cta">
         CTA
       </button>
       <button onClick={onToggleExpand} data-testid="product-toggle">
         Toggle
       </button>
-    </div>
+    </article>
   ),
 }));
 
@@ -591,6 +603,256 @@ describe("ProductCardCarousel", () => {
       removeSpy.mockRestore();
     });
   });
+
+  describe("swipe gestures (desktop carousel)", () => {
+    const makeCarousel = () => {
+      const items = Array.from({ length: 4 }, (_, i) => ({
+        ...sampleProduct,
+        sys: { id: `prod-${i}` },
+        speed: `${100 * (i + 1)} Mbps|Fiber`,
+      }));
+      const utils = render(
+        <ProductCardCarousel fields={createProductFields(items)} />
+      );
+      // computeMaxIndex relies on offsetWidth (mocked to 900); a resize makes
+      // sure maxIndex is computed so nextSlide/prevSlide can move.
+      fireEvent(window, new Event("resize"));
+      const windowEl = utils.container.querySelector(
+        ".select-none"
+      ) as HTMLElement;
+      const track = utils.container.querySelector(
+        '[style*="translateX"]'
+      ) as HTMLElement;
+      return { ...utils, windowEl, track };
+    };
+
+    it("advances to the next slide when swiped left past the threshold", () => {
+      const { windowEl, track } = makeCarousel();
+      expect(screen.queryByTestId("icon-arrow_back")).toBeNull();
+
+      fireEvent.touchStart(windowEl, { touches: [{ clientX: 500 }] });
+      fireEvent.touchMove(windowEl, { touches: [{ clientX: 300 }] });
+      // The track follows the finger while dragging (diff = -200).
+      expect(track.getAttribute("style")).toContain("-200px");
+
+      fireEvent.touchEnd(windowEl);
+      // nextSlide advanced the index, so the Previous arrow now shows.
+      expect(screen.queryByTestId("icon-arrow_back")).not.toBeNull();
+    });
+
+    it("returns to the previous slide when swiped right past the threshold", () => {
+      const { windowEl } = makeCarousel();
+      // Move forward first so there is a previous slide to return to.
+      fireEvent.touchStart(windowEl, { touches: [{ clientX: 500 }] });
+      fireEvent.touchMove(windowEl, { touches: [{ clientX: 300 }] });
+      fireEvent.touchEnd(windowEl);
+      expect(screen.queryByTestId("icon-arrow_back")).not.toBeNull();
+
+      fireEvent.touchStart(windowEl, { touches: [{ clientX: 300 }] });
+      fireEvent.touchMove(windowEl, { touches: [{ clientX: 600 }] });
+      fireEvent.touchEnd(windowEl);
+      // prevSlide returned to the first slide, hiding the Previous arrow.
+      expect(screen.queryByTestId("icon-arrow_back")).toBeNull();
+    });
+
+    it("snaps back without changing slides when the swipe is below the threshold", () => {
+      const { windowEl, track } = makeCarousel();
+      fireEvent.touchStart(windowEl, { touches: [{ clientX: 500 }] });
+      fireEvent.touchMove(windowEl, { touches: [{ clientX: 450 }] }); // diff -50
+      fireEvent.touchEnd(windowEl);
+      expect(screen.queryByTestId("icon-arrow_back")).toBeNull();
+      // Offset is reset to 0 after release.
+      expect(track.getAttribute("style")).toContain("+ 0px");
+    });
+
+    it("applies drag resistance at the first-slide boundary", () => {
+      const { windowEl, track } = makeCarousel();
+      // Dragging right while already at the first slide is damped (diff * 0.3).
+      fireEvent.touchStart(windowEl, { touches: [{ clientX: 100 }] });
+      fireEvent.touchMove(windowEl, { touches: [{ clientX: 300 }] }); // diff 200
+      expect(track.getAttribute("style")).toContain("60px");
+    });
+
+    it("ignores a touch move that is not preceded by a touch start", () => {
+      const { windowEl, track } = makeCarousel();
+      fireEvent.touchMove(windowEl, { touches: [{ clientX: 300 }] });
+      // No swipe offset is applied.
+      expect(track.getAttribute("style")).toContain("+ 0px");
+    });
+  });
+
+  describe("gift-slot per-row equalization", () => {
+    const mockRect = (el: Element, rect: { top?: number; height?: number }) => {
+      (el as HTMLElement).getBoundingClientRect = () =>
+        ({
+          top: rect.top ?? 0,
+          left: 0,
+          right: 0,
+          bottom: (rect.top ?? 0) + (rect.height ?? 0),
+          width: 0,
+          height: rect.height ?? 0,
+          x: 0,
+          y: 0,
+          toJSON: () => ({}),
+        }) as DOMRect;
+    };
+
+    const makeGrid = (
+      config: { gift: boolean; top: number; height: number }[]
+    ) => {
+      const items = config.map((c, i) => ({
+        ...sampleProduct,
+        sys: { id: `g-${i}` },
+        giftRewards: { list: { items: c.gift ? [{ title: "$100" }] : [] } },
+      }));
+      const { container } = render(
+        <ProductCardCarousel fields={createProductFields(items)} />
+      );
+      const grid = container.querySelector(".grid.grid-cols-2") as HTMLElement;
+      const articles = Array.from(grid.querySelectorAll("article"));
+      const slots = articles.map(
+        a => a.querySelector("[data-pc-gift]") as HTMLElement
+      );
+      articles.forEach((a, i) => mockRect(a, { top: config[i].top }));
+      slots.forEach((s, i) => {
+        mockRect(s, { height: config[i].height });
+        Object.defineProperty(s, "offsetParent", {
+          configurable: true,
+          get: () => document.body,
+        });
+      });
+      return { slots };
+    };
+
+    it("collapses a giftless row and never borrows another row's gift height", () => {
+      // Row 1 (both giftless) above Row 2 (both with a gift).
+      const { slots } = makeGrid([
+        { gift: false, top: 0, height: 20 },
+        { gift: false, top: 0, height: 20 },
+        { gift: true, top: 500, height: 76 },
+        { gift: true, top: 500, height: 76 },
+      ]);
+
+      fireEvent(window, new Event("resize"));
+
+      // Row 1 collapses instead of reserving the gift height.
+      expect(slots[0].style.display).toBe("none");
+      expect(slots[1].style.display).toBe("none");
+      expect(slots[0].style.minHeight).toBe("");
+      // Row 2 reserves only its own gift height.
+      expect(slots[2].style.minHeight).toBe("76px");
+      expect(slots[3].style.minHeight).toBe("76px");
+    });
+
+    it("reserves the tallest gift height within a mixed row so CTAs align", () => {
+      // Row 1 = gift + giftless; Row 2 = gift + gift.
+      const { slots } = makeGrid([
+        { gift: true, top: 0, height: 76 },
+        { gift: false, top: 0, height: 20 },
+        { gift: true, top: 500, height: 76 },
+        { gift: true, top: 500, height: 76 },
+      ]);
+
+      fireEvent(window, new Event("resize"));
+
+      // The giftless neighbour reserves the taller gift height (CTAs align).
+      expect(slots[0].style.minHeight).toBe("76px");
+      expect(slots[1].style.minHeight).toBe("76px");
+      expect(slots[1].style.display).not.toBe("none");
+    });
+  });
+
+  describe("two-column mobile section equalization", () => {
+    let originalMatchMedia: typeof window.matchMedia;
+
+    const setMatchMedia = (matches: boolean) => {
+      window.matchMedia = ((query: string) => ({
+        matches,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+      })) as any;
+    };
+
+    const mockHeight = (el: Element, height: number) => {
+      (el as HTMLElement).getBoundingClientRect = () =>
+        ({
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: height,
+          width: 0,
+          height,
+          x: 0,
+          y: 0,
+          toJSON: () => ({}),
+        }) as DOMRect;
+    };
+
+    beforeEach(() => {
+      originalMatchMedia = window.matchMedia;
+    });
+
+    afterEach(() => {
+      window.matchMedia = originalMatchMedia;
+    });
+
+    it("matches header and description heights within each row (pair)", () => {
+      setMatchMedia(true);
+      const items = Array.from({ length: 4 }, (_, i) => ({
+        ...sampleProduct,
+        sys: { id: `prod-${i}` },
+      }));
+      const { container } = render(
+        <ProductCardCarousel fields={createProductFields(items)} />
+      );
+      const grid = container.querySelector(".grid.grid-cols-2") as HTMLElement;
+      const headers = Array.from(
+        grid.querySelectorAll<HTMLElement>("[data-pc-header]")
+      );
+      const descriptions = Array.from(
+        grid.querySelectorAll<HTMLElement>("[data-pc-description]")
+      );
+      // Row 1 header heights 30/50 -> 50; Row 2 header heights 40/20 -> 40.
+      [30, 50, 40, 20].forEach((h, i) => mockHeight(headers[i], h));
+      // Row 1 descriptions 25/25 -> 25; Row 2 descriptions 10/60 -> 60.
+      [25, 25, 10, 60].forEach((h, i) => mockHeight(descriptions[i], h));
+
+      fireEvent(window, new Event("resize"));
+
+      expect(headers[0].style.minHeight).toBe("50px");
+      expect(headers[1].style.minHeight).toBe("50px");
+      expect(headers[2].style.minHeight).toBe("40px");
+      expect(headers[3].style.minHeight).toBe("40px");
+
+      expect(descriptions[0].style.minHeight).toBe("25px");
+      expect(descriptions[1].style.minHeight).toBe("25px");
+      expect(descriptions[2].style.minHeight).toBe("60px");
+      expect(descriptions[3].style.minHeight).toBe("60px");
+    });
+
+    it("clears section min-heights above the mobile breakpoint", () => {
+      setMatchMedia(false);
+      const items = Array.from({ length: 4 }, (_, i) => ({
+        ...sampleProduct,
+        sys: { id: `prod-${i}` },
+      }));
+      const { container } = render(
+        <ProductCardCarousel fields={createProductFields(items)} />
+      );
+      const grid = container.querySelector(".grid.grid-cols-2") as HTMLElement;
+      const header = grid.querySelector<HTMLElement>("[data-pc-header]")!;
+      header.style.setProperty("min-height", "123px");
+
+      fireEvent(window, new Event("resize"));
+
+      expect(header.style.minHeight).toBe("");
+    });
+  });
 });
 
 describe("TestimonialCarousel", () => {