@windstream/react-shared-components 0.2.73 → 0.2.75

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", () => {

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

@@ -46,10 +46,14 @@ function ProductCardPanel({
   // When any card is flagged best-value, every card reserves the banner height
   // so plan name/price stay aligned across a two-column row.
   const hasAnyBadge = items.some((item: any) => item?.highlighted);
+  const hasAnyGift = items.some(
+    (item: any) => (item?.giftRewards?.list?.items?.length ?? 0) > 0
+  );
   const showArrows = fields?.showArrows !== false && isCarousel;
   const cardsRef = useRef<(HTMLDivElement | null)[]>([]);
   const windowRef = useRef<HTMLDivElement | null>(null);
   const mobileGridRef = useRef<HTMLDivElement | null>(null);
+  const panelRef = useRef<HTMLDivElement | null>(null);
   const touchStartX = useRef<number>(0);
 
   // Determine how many cards fit so we never scroll past the last card
@@ -176,16 +180,13 @@ function ProductCardPanel({
   }, [isCarousel, isVisible, desktopExpanded, items.length]);
 
   // Two-column mobile: match each card's sections to the tallest card in the
-  // same row (pair) so section spacing and the CTA align per row. Desktop keeps
+  // same row (pair) so section spacing aligns per row. The gift slot is handled
+  // separately (panel-wide) so it sizes to the real gift content. Desktop keeps
   // its fixed section heights and is left untouched.
   useEffect(() => {
     if (!twoColumn || !isVisible) return;
 
-    const selectors = [
-      "[data-pc-header]",
-      "[data-pc-description]",
-      "[data-pc-gift]",
-    ];
+    const selectors = ["[data-pc-header]", "[data-pc-description]"];
 
     const clear = () => {
       const grid = mobileGridRef.current;
@@ -193,35 +194,20 @@ function ProductCardPanel({
       selectors.forEach(sel =>
         grid.querySelectorAll<HTMLElement>(sel).forEach(el => {
           el.style.removeProperty("min-height");
-          el.style.removeProperty("display");
         })
       );
     };
 
     // `important` is required because Tailwind utilities are generated with
     // !important in this project (tailwind.config `important: true`).
-    const equalizePairs = (sel: string, collapseEmpty = false) => {
+    const equalizePairs = (sel: string) => {
       const grid = mobileGridRef.current;
       if (!grid) return;
       const els = Array.from(grid.querySelectorAll<HTMLElement>(sel));
       // Reset before measuring so a previous pass doesn't inflate the result.
-      els.forEach(el => {
-        el.style.removeProperty("min-height");
-        el.style.removeProperty("display");
-      });
+      els.forEach(el => el.style.removeProperty("min-height"));
       for (let i = 0; i < els.length; i += 2) {
         const pair = els.slice(i, i + 2);
-        // Collapse a row (or lone trailing card) whose gift slots are all empty
-        // so no space is reserved when the row has no gift.
-        if (
-          collapseEmpty &&
-          pair.every(el => el.hasAttribute("data-pc-gift-empty"))
-        ) {
-          pair.forEach(el =>
-            el.style.setProperty("display", "none", "important")
-          );
-          continue;
-        }
         if (pair.length < 2) break;
         const max = Math.max(
           ...pair.map(el => el.getBoundingClientRect().height)
@@ -240,7 +226,6 @@ function ProductCardPanel({
       }
       equalizePairs("[data-pc-header]");
       equalizePairs("[data-pc-description]");
-      equalizePairs("[data-pc-gift]", true);
     };
 
     const rafId = requestAnimationFrame(equalize);
@@ -257,6 +242,83 @@ function ProductCardPanel({
     };
   }, [twoColumn, isVisible, desktopExpanded, items.length]);
 
+  // Size the gift-reward slot per visual row so the Select plan CTA sits
+  // directly below the gift badge, while staying aligned only with the cards
+  // that sit next to it (same row). Cards are grouped by their on-screen row,
+  // so a giftless row never borrows the gift height of another row in the same
+  // tab: desktop equalizes the single row of cards; two-column mobile equalizes
+  // each pair; a row whose slots are all empty collapses so its CTA sits flush
+  // with the description. When the tab has no gift at all, `hasAnyGift` omits
+  // the slot entirely.
+  useEffect(() => {
+    if (!isVisible) return;
+
+    const root = panelRef.current;
+
+    const reset = () => {
+      if (!root) return;
+      root.querySelectorAll<HTMLElement>("[data-pc-gift]").forEach(el => {
+        el.style.removeProperty("min-height");
+        el.style.removeProperty("display");
+      });
+    };
+
+    const equalizeGiftSlots = () => {
+      if (!root) return;
+      reset();
+      const els = Array.from(
+        root.querySelectorAll<HTMLElement>("[data-pc-gift]")
+      ).filter(el => el.offsetParent !== null);
+      if (els.length === 0) return;
+
+      // Group slots by the top of their owning card so each visual row (the
+      // cards that sit next to each other) is equalized independently.
+      const tolerance = 4;
+      const rows: { top: number; els: HTMLElement[] }[] = [];
+      els.forEach(el => {
+        const card = (el.closest("article") as HTMLElement) || el;
+        const top = card.getBoundingClientRect().top;
+        const row = rows.find(r => Math.abs(r.top - top) <= tolerance);
+        if (row) {
+          row.els.push(el);
+        } else {
+          rows.push({ top, els: [el] });
+        }
+      });
+
+      rows.forEach(({ els: rowEls }) => {
+        // Collapse a row whose slots are all empty so no space is reserved.
+        if (rowEls.every(el => el.hasAttribute("data-pc-gift-empty"))) {
+          rowEls.forEach(el =>
+            el.style.setProperty("display", "none", "important")
+          );
+          return;
+        }
+        const max = Math.max(
+          ...rowEls.map(el => el.getBoundingClientRect().height)
+        );
+        if (max <= 0) return;
+        rowEls.forEach(el =>
+          el.style.setProperty("min-height", `${max}px`, "important")
+        );
+      });
+    };
+
+    equalizeGiftSlots();
+    const rafId = requestAnimationFrame(equalizeGiftSlots);
+    const t1 = setTimeout(equalizeGiftSlots, 150);
+    const t2 = setTimeout(equalizeGiftSlots, 500);
+    window.addEventListener("resize", equalizeGiftSlots);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      clearTimeout(t1);
+      clearTimeout(t2);
+      window.removeEventListener("resize", equalizeGiftSlots);
+      reset();
+    };
+  }, [isVisible, desktopExpanded, items.length]);
+
   if (!items.length && !fields?.title) {
     return null;
   }
@@ -338,6 +400,7 @@ function ProductCardPanel({
           cta={item.cta}
           priceSuffixBottom={item?.priceSuffixBottom}
           hasAnyBadge={hasAnyBadge}
+          hasAnyGift={hasAnyGift}
           twoColumn={twoColumn}
           enableBusinessSettings={enableBusinessSettings}
         />
@@ -345,87 +408,91 @@ function ProductCardPanel({
     );
   };
 
-  return !isCarousel ? (
-    <div
-      ref={mobileGridRef}
-      className={cx(
-        "w-full max-w-[1280px] gap-4",
-        twoColumn
-          ? "grid grid-cols-2 md:flex md:flex-wrap md:justify-center"
-          : "flex flex-wrap justify-center"
-      )}
-    >
-      {items.map((item, index) => renderCard(item, index, twoColumn))}
-    </div>
-  ) : (
-    <>
-      {/* Mobile/Tablet View: Vertical Stack (or two-column grid) */}
-      <div
-        ref={mobileGridRef}
-        className={cx(
-          "md:hidden",
-          twoColumn ? "grid grid-cols-2 gap-4" : "flex flex-col gap-6"
-        )}
-      >
-        {items.map((item, index) => renderCard(item, index, true))}
-      </div>
-
-      {/* Desktop View: Horizontal Carousel */}
-      <div className="relative hidden w-full md:block">
-        {/* Navigation Arrows */}
-        {showArrows && (
-          <div className="pointer-events-none absolute -left-16 -right-16 top-[50%] z-30 flex -translate-y-1/2 justify-between px-4 md:px-10">
-            {currentIndex > 0 ? (
-              <Button
-                onClick={prevSlide}
-                className="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full border border-gray-100 bg-white p-2 text-text shadow-cardDrop transition-all hover:bg-gray-50"
-                aria-label="Previous"
-              >
-                <MaterialIcon name="arrow_back" size={24} />
-              </Button>
-            ) : (
-              <span className="h-12 w-12" aria-hidden="true" />
-            )}
-
-            {currentIndex < maxIndex ? (
-              <Button
-                onClick={nextSlide}
-                className="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full border border-gray-100 bg-white p-2 text-text shadow-cardDrop transition-all hover:bg-gray-50"
-                aria-label="Next"
-              >
-                <MaterialIcon name="arrow_forward" size={24} />
-              </Button>
-            ) : (
-              <span className="h-12 w-12" aria-hidden="true" />
-            )}
-          </div>
-        )}
-
-        {/* Carousel Window */}
+  return (
+    <div ref={panelRef} style={{ display: "contents" }}>
+      {!isCarousel ? (
         <div
-          ref={windowRef}
-          className="mx-auto max-w-[1280px] select-none overflow-hidden"
-          onTouchStart={handleTouchStart}
-          onTouchMove={handleTouchMove}
-          onTouchEnd={handleTouchEnd}
-          onTouchCancel={handleTouchEnd}
+          ref={mobileGridRef}
+          className={cx(
+            "w-full max-w-[1280px] gap-4",
+            twoColumn
+              ? "grid grid-cols-2 md:flex md:flex-wrap md:justify-center"
+              : "flex flex-wrap justify-center"
+          )}
         >
+          {items.map((item, index) => renderCard(item, index, twoColumn))}
+        </div>
+      ) : (
+        <>
+          {/* Mobile/Tablet View: Vertical Stack (or two-column grid) */}
           <div
+            ref={mobileGridRef}
             className={cx(
-              "ml-8 flex items-stretch gap-4 pb-4",
-              isSwiping
-                ? "transition-none"
-                : "transition-transform duration-500 ease-in-out"
+              "md:hidden",
+              twoColumn ? "grid grid-cols-2 gap-4" : "flex flex-col gap-6"
             )}
-            style={{
-              transform: `translateX(calc(-${currentIndex} * (392px + 16px) + ${swipeOffset}px))`,
-            }}
           >
-            {items.map((item, index) => renderCard(item, index, false))}
+            {items.map((item, index) => renderCard(item, index, true))}
           </div>
-        </div>
-      </div>
-    </>
+
+          {/* Desktop View: Horizontal Carousel */}
+          <div className="relative hidden w-full md:block">
+            {/* Navigation Arrows */}
+            {showArrows && (
+              <div className="pointer-events-none absolute -left-16 -right-16 top-[50%] z-30 flex -translate-y-1/2 justify-between px-4 md:px-10">
+                {currentIndex > 0 ? (
+                  <Button
+                    onClick={prevSlide}
+                    className="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full border border-gray-100 bg-white p-2 text-text shadow-cardDrop transition-all hover:bg-gray-50"
+                    aria-label="Previous"
+                  >
+                    <MaterialIcon name="arrow_back" size={24} />
+                  </Button>
+                ) : (
+                  <span className="h-12 w-12" aria-hidden="true" />
+                )}
+
+                {currentIndex < maxIndex ? (
+                  <Button
+                    onClick={nextSlide}
+                    className="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full border border-gray-100 bg-white p-2 text-text shadow-cardDrop transition-all hover:bg-gray-50"
+                    aria-label="Next"
+                  >
+                    <MaterialIcon name="arrow_forward" size={24} />
+                  </Button>
+                ) : (
+                  <span className="h-12 w-12" aria-hidden="true" />
+                )}
+              </div>
+            )}
+
+            {/* Carousel Window */}
+            <div
+              ref={windowRef}
+              className="mx-auto max-w-[1280px] select-none overflow-hidden"
+              onTouchStart={handleTouchStart}
+              onTouchMove={handleTouchMove}
+              onTouchEnd={handleTouchEnd}
+              onTouchCancel={handleTouchEnd}
+            >
+              <div
+                className={cx(
+                  "ml-8 flex items-stretch gap-4 pb-4",
+                  isSwiping
+                    ? "transition-none"
+                    : "transition-transform duration-500 ease-in-out"
+                )}
+                style={{
+                  transform: `translateX(calc(-${currentIndex} * (392px + 16px) + ${swipeOffset}px))`,
+                }}
+              >
+                {items.map((item, index) => renderCard(item, index, false))}
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
   );
 }