@windstream/react-shared-components 0.1.20 → 0.1.21

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

@@ -1,356 +1,356 @@
-"use client";
-
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import {
-  CarouselWithProductCards,
-  CarouselWithTestimonialCards,
-  TabSwitchProps,
-} from "./types";
-
-import { Button } from "@shared/components/button";
-import { MaterialIcon } from "@shared/components/material-icon";
-import { ProductCard } from "@shared/contentful/blocks/cards/product-card";
-import { TestimonialCard } from "@shared/contentful/blocks/cards/testimonial-card";
-import { CheckPlansProps } from "@shared/types/micro-components";
-import { cx } from "@shared/utils";
-
-export function ProductCardCarousel({
-  fields,
-  renderCheckPlans,
-}: {
-  fields: CarouselWithProductCards;
-  onModalButtonClick?: (id?: string) => void;
-  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
-}) {
-  const itemsExpanded = fields?.items?.items?.[0]?.benefitsExpanded || false;
-  const [desktopExpanded, setDesktopExpanded] = useState(itemsExpanded);
-  const [mobileExpandedStates, setMobileExpandedStates] = useState<
-    Record<number, boolean>
-  >({});
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const items = fields?.items?.items || [];
-  const isCarousel = items.length > 2;
-  const cardsRef = useRef<(HTMLDivElement | null)[]>([]);
-
-  const prevSlide = useCallback(() => {
-    if (!isCarousel) return;
-    setCurrentIndex(prev => (prev + 3) % items.length);
-  }, [isCarousel, items.length]);
-
-  const nextSlide = useCallback(() => {
-    if (!isCarousel) return;
-    setCurrentIndex(prev => (prev - 3 + items.length) % items.length);
-  }, [isCarousel, items.length]);
-
-  // Equalize card heights
-  useEffect(() => {
-    if (!isCarousel) return;
-
-    const equalizeHeights = () => {
-      const cards = cardsRef.current.filter(Boolean) as HTMLDivElement[];
-      if (cards.length === 0) return;
-
-      // Reset heights first
-      cards.forEach(card => {
-        card.style.height = "auto";
-      });
-
-      // Find the tallest card
-      const maxHeight = Math.max(...cards.map(card => card.offsetHeight));
-
-      // Set all cards to the max height
-      cards.forEach(card => {
-        card.style.height = `${maxHeight}px`;
-      });
-    };
-
-    // Run on mount and when expanded state changes
-    equalizeHeights();
-
-    // Re-run after a short delay due to dynamic content
-    const timeoutId = setTimeout(equalizeHeights, 100);
-
-    return () => clearTimeout(timeoutId);
-  }, [isCarousel, desktopExpanded, items.length]);
-
-  if (!items.length && !fields?.title) {
-    return null;
-  }
-
-  const renderCard = (
-    item: any,
-    globalIndex: number,
-    isMobileView: boolean = false
-  ) => {
-    const planContent = item?.speed?.split("|");
-    const planName = planContent?.[0] || "";
-    const planSubtext = planContent?.[1] || "";
-    const priceCents = item?.priceSuffix?.split("/")?.[0] || "00";
-    const formattedPrice = `${item?.price || "0"}.${priceCents}`;
-    const features = item?.benefits?.items || [];
-    const bestValue = item?.highlighted || false;
-    const rawBadge = item?.giftRewards?.list?.items || [];
-    const innerBadge = {
-      badgeText: item.innerBadge || "",
-      badgeIcon: item.innerBadgeIcon?.url || "",
-    };
-
-    // Mobile: individual card state, Desktop: shared state
-    const isExpanded = isMobileView
-      ? mobileExpandedStates[globalIndex] || false
-      : desktopExpanded;
-
-    const handleToggle = () => {
-      if (isMobileView) {
-        setMobileExpandedStates(prev => ({
-          ...prev,
-          [globalIndex]: !prev[globalIndex],
-        }));
-      } else {
-        setDesktopExpanded(!desktopExpanded);
-      }
-    };
-
-    const handleCtaClick = () => {
-      return;
-    };
-
-    return (
-      <div
-        ref={
-          !isMobileView
-            ? el => {
-                if (el && !cardsRef.current.includes(el)) {
-                  cardsRef.current[globalIndex] = el;
-                }
-              }
-            : undefined
-        }
-        key={globalIndex}
-        className={cx(
-          isMobileView
-            ? "mx-auto w-full max-w-[392px]"
-            : "w-[392px] flex-shrink-0"
-        )}
-      >
-        <ProductCard
-          planName={planName}
-          planSubtext={planSubtext}
-          speed={item?.speed || ""}
-          techType={item?.techType || ""}
-          ismaxSpeed={item?.ismaxSpeed || ""}
-          price={formattedPrice}
-          description={item?.productCardDescription || ""}
-          giftBadge={rawBadge}
-          innerBadge={innerBadge}
-          theme={item?.highlighted ? "dark" : "light"}
-          bestValue={bestValue}
-          bestValueText={item?.topBadgeText || "best value"}
-          featuresTitle={item?.benefitsTitle}
-          features={features}
-          isExpanded={isExpanded}
-          onToggleExpand={handleToggle}
-          ctaText={item?.cta?.buttonLabel || "Select plan"}
-          onCtaClick={handleCtaClick}
-          renderCheckPlans={renderCheckPlans}
-          cta={item.cta}
-          hostType="smb"
-        />
-      </div>
-    );
-  };
-
-  // For infinite scroll with peeking, starting in the middle of the repeated array
-  const displayItems = [...items, ...items, ...items, ...items, ...items];
-  const offset = items.length * 2;
-
-  return !isCarousel ? (
-    <div className="flex w-full max-w-[1280px] flex-wrap justify-center gap-8 px-4">
-      {items.map((item, index) => renderCard(item, index))}
-    </div>
-  ) : (
-    <>
-      {/* Mobile/Tablet View: Vertical Stack */}
-      <div className="flex flex-col gap-6 md:hidden">
-        {items.map((item, index) => renderCard(item, index, true))}
-      </div>
-
-      {/* Desktop View: Horizontal Carousel */}
-      <div className="relative hidden w-full md:block">
-        {/* Navigation Arrows */}
-        <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">
-          <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>
-
-          <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>
-        </div>
-
-        {/* Carousel Window */}
-        <div className="mx-auto max-w-[1280px] overflow-hidden">
-          <div
-            className="flex items-stretch gap-4 pb-4 transition-transform duration-500 ease-in-out"
-            style={{
-              transform: `translateX(calc(-${offset + currentIndex} * (392px + 12px)))`,
-            }}
-          >
-            {displayItems.map((item, index) => renderCard(item, index, false))}
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
-
-export const TestimonialCarousel: React.FC<{
-  fields: CarouselWithTestimonialCards;
-}> = ({ fields }) => {
-  const testimonials = fields?.items?.items || [];
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const timeoutRef = useRef<ReturnType<typeof setInterval> | null>(null);
-
-  const nextSlide = useCallback(() => {
-    if (testimonials.length === 0) return;
-    setCurrentIndex(prev => (prev + 1) % testimonials.length);
-  }, [testimonials.length]);
-
-  const prevSlide = useCallback(() => {
-    if (testimonials.length === 0) return;
-    setCurrentIndex(prev => (prev === 0 ? testimonials.length - 1 : prev - 1));
-  }, [testimonials.length]);
-
-  // Auto-scroll logic
-  useEffect(() => {
-    if (testimonials.length === 0) return;
-
-    timeoutRef.current = setInterval(() => {
-      nextSlide();
-    }, 8000); // 5 seconds per slide
-
-    return () => {
-      if (timeoutRef.current) clearInterval(timeoutRef.current);
-    };
-  }, [nextSlide, testimonials.length]);
-
-  if (!testimonials || testimonials.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="relative mx-auto max-w-[1280px] overflow-hidden md:px-24">
-      {/* Navigation Overlay - Left (Hidden on mobile) */}
-      <Button
-        onClick={prevSlide}
-        className="group absolute left-4 top-1/2 z-20 hidden h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white p-2 text-text shadow-md transition-colors hover:bg-gray-100 md:flex"
-        aria-label="Previous"
-      >
-        <MaterialIcon name="arrow_back" size={24} />
-      </Button>
-
-      {/* Slider Track Wrapper */}
-      <div className="grid grid-cols-1 justify-items-center">
-        {/* Slides */}
-        {testimonials.map((item, index) => {
-          let offset = index - currentIndex;
-          const len = testimonials.length;
-          if (offset > len / 2) offset -= len;
-          if (offset < -len / 2) offset += len;
-
-          const isActive = offset === 0;
-
-          return (
-            <div
-              key={index}
-              className={cx(
-                "col-start-1 row-start-1 w-full md:max-w-[815px]",
-                // Mobile: only show active card
-                isActive ? "opacity-100" : "opacity-0",
-                // Desktop: show active and peeking cards
-                "md:opacity-100"
-              )}
-              style={{
-                transform: `translateX(${isActive ? "0%" : offset * 105 + "%"})`,
-                zIndex: isActive ? 10 : 5,
-                visibility: Math.abs(offset) > 1 ? "hidden" : "visible",
-                transition: "all 0.5s ease-in-out",
-              }}
-            >
-              <TestimonialCard
-                {...item}
-                isActive={isActive}
-                className="h-full"
-              />
-            </div>
-          );
-        })}
-      </div>
-
-      {/* Navigation Overlay - Right (Hidden on mobile) */}
-      <Button
-        onClick={nextSlide}
-        className="group absolute right-4 top-1/2 z-20 hidden h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white p-2 text-text shadow-md transition-colors hover:bg-gray-100 md:flex"
-        aria-label="Next"
-      >
-        <MaterialIcon name="arrow_forward" size={24} />
-      </Button>
-
-      {/* Dots (Hidden on mobile) */}
-      <div className="mt-8 hidden justify-center gap-2 md:flex">
-        {testimonials.map((_, idx) => (
-          <button
-            key={idx}
-            onClick={() => setCurrentIndex(idx)}
-            className={cx(
-              "h-2 w-2 rounded-full transition-all duration-300",
-              currentIndex === idx
-                ? "w-6 bg-white"
-                : "bg-white/40 hover:bg-white/60"
-            )}
-            aria-label={`Go to slide ${idx + 1}`}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export const TabSwitch: React.FC<TabSwitchProps> = ({
-  tabs,
-  activeTab,
-  onChange,
-  className,
-}) => {
-  return (
-    <div
-      className={cx(
-        "mx-auto flex w-fit rounded-2xl bg-bg-surface-active p-1",
-        className
-      )}
-    >
-      {tabs.map(tab => (
-        <button
-          key={tab}
-          onClick={() => onChange(tab)}
-          className={cx(
-            "min-w-[160px] whitespace-nowrap rounded-2xl bg-bg-surface-active px-4 py-2.5 text-label1 font-black transition-all duration-300",
-            activeTab === tab
-              ? "bg-bg-fill-brand text-white shadow-md"
-              : "text-text-info hover:bg-bg-surface-hover"
-          )}
-        >
-          {tab}
-        </button>
-      ))}
-    </div>
-  );
-};
+"use client";
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  CarouselWithProductCards,
+  CarouselWithTestimonialCards,
+  TabSwitchProps,
+} from "./types";
+
+import { Button } from "@shared/components/button";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { ProductCard } from "@shared/contentful/blocks/cards/product-card";
+import { TestimonialCard } from "@shared/contentful/blocks/cards/testimonial-card";
+import { CheckPlansProps } from "@shared/types/micro-components";
+import { cx } from "@shared/utils";
+
+export function ProductCardCarousel({
+  fields,
+  renderCheckPlans,
+}: {
+  fields: CarouselWithProductCards;
+  onModalButtonClick?: (id?: string) => void;
+  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
+}) {
+  const itemsExpanded = fields?.items?.items?.[0]?.benefitsExpanded || false;
+  const [desktopExpanded, setDesktopExpanded] = useState(itemsExpanded);
+  const [mobileExpandedStates, setMobileExpandedStates] = useState<
+    Record<number, boolean>
+  >({});
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const items = fields?.items?.items || [];
+  const isCarousel = items.length > 2;
+  const cardsRef = useRef<(HTMLDivElement | null)[]>([]);
+
+  const prevSlide = useCallback(() => {
+    if (!isCarousel) return;
+    setCurrentIndex(prev => (prev + 3) % items.length);
+  }, [isCarousel, items.length]);
+
+  const nextSlide = useCallback(() => {
+    if (!isCarousel) return;
+    setCurrentIndex(prev => (prev - 3 + items.length) % items.length);
+  }, [isCarousel, items.length]);
+
+  // Equalize card heights
+  useEffect(() => {
+    if (!isCarousel) return;
+
+    const equalizeHeights = () => {
+      const cards = cardsRef.current.filter(Boolean) as HTMLDivElement[];
+      if (cards.length === 0) return;
+
+      // Reset heights first
+      cards.forEach(card => {
+        card.style.height = "auto";
+      });
+
+      // Find the tallest card
+      const maxHeight = Math.max(...cards.map(card => card.offsetHeight));
+
+      // Set all cards to the max height
+      cards.forEach(card => {
+        card.style.height = `${maxHeight}px`;
+      });
+    };
+
+    // Run on mount and when expanded state changes
+    equalizeHeights();
+
+    // Re-run after a short delay due to dynamic content
+    const timeoutId = setTimeout(equalizeHeights, 100);
+
+    return () => clearTimeout(timeoutId);
+  }, [isCarousel, desktopExpanded, items.length]);
+
+  if (!items.length && !fields?.title) {
+    return null;
+  }
+
+  const renderCard = (
+    item: any,
+    globalIndex: number,
+    isMobileView: boolean = false
+  ) => {
+    const planContent = item?.speed?.split("|");
+    const planName = planContent?.[0] || "";
+    const planSubtext = planContent?.[1] || "";
+    const priceCents = item?.priceSuffix?.split("/")?.[0] || "00";
+    const formattedPrice = `${item?.price || "0"}.${priceCents}`;
+    const features = item?.benefits?.items || [];
+    const bestValue = item?.highlighted || false;
+    const rawBadge = item?.giftRewards?.list?.items || [];
+    const innerBadge = {
+      badgeText: item.innerBadge || "",
+      badgeIcon: item.innerBadgeIcon?.url || "",
+    };
+
+    // Mobile: individual card state, Desktop: shared state
+    const isExpanded = isMobileView
+      ? mobileExpandedStates[globalIndex] || false
+      : desktopExpanded;
+
+    const handleToggle = () => {
+      if (isMobileView) {
+        setMobileExpandedStates(prev => ({
+          ...prev,
+          [globalIndex]: !prev[globalIndex],
+        }));
+      } else {
+        setDesktopExpanded(!desktopExpanded);
+      }
+    };
+
+    const handleCtaClick = () => {
+      return;
+    };
+
+    return (
+      <div
+        ref={
+          !isMobileView
+            ? el => {
+                if (el && !cardsRef.current.includes(el)) {
+                  cardsRef.current[globalIndex] = el;
+                }
+              }
+            : undefined
+        }
+        key={globalIndex}
+        className={cx(
+          isMobileView
+            ? "mx-auto w-full max-w-[392px]"
+            : "w-[392px] flex-shrink-0"
+        )}
+      >
+        <ProductCard
+          planName={planName}
+          planSubtext={planSubtext}
+          speed={item?.speed || ""}
+          techType={item?.techType || ""}
+          ismaxSpeed={item?.ismaxSpeed || ""}
+          price={formattedPrice}
+          description={item?.productCardDescription || ""}
+          giftBadge={rawBadge}
+          innerBadge={innerBadge}
+          theme={item?.highlighted ? "dark" : "light"}
+          bestValue={bestValue}
+          bestValueText={item?.topBadgeText || "best value"}
+          featuresTitle={item?.benefitsTitle}
+          features={features}
+          isExpanded={isExpanded}
+          onToggleExpand={handleToggle}
+          ctaText={item?.cta?.buttonLabel || "Select plan"}
+          onCtaClick={handleCtaClick}
+          renderCheckPlans={renderCheckPlans}
+          cta={item.cta}
+          hostType="smb"
+        />
+      </div>
+    );
+  };
+
+  // For infinite scroll with peeking, starting in the middle of the repeated array
+  const displayItems = [...items, ...items, ...items, ...items, ...items];
+  const offset = items.length * 2;
+
+  return !isCarousel ? (
+    <div className="flex w-full max-w-[1280px] flex-wrap justify-center gap-8 px-4">
+      {items.map((item, index) => renderCard(item, index))}
+    </div>
+  ) : (
+    <>
+      {/* Mobile/Tablet View: Vertical Stack */}
+      <div className="flex flex-col gap-6 md:hidden">
+        {items.map((item, index) => renderCard(item, index, true))}
+      </div>
+
+      {/* Desktop View: Horizontal Carousel */}
+      <div className="relative hidden w-full md:block">
+        {/* Navigation Arrows */}
+        <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">
+          <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>
+
+          <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>
+        </div>
+
+        {/* Carousel Window */}
+        <div className="mx-auto max-w-[1280px] overflow-hidden">
+          <div
+            className="flex items-stretch gap-4 pb-4 transition-transform duration-500 ease-in-out"
+            style={{
+              transform: `translateX(calc(-${offset + currentIndex} * (392px + 12px)))`,
+            }}
+          >
+            {displayItems.map((item, index) => renderCard(item, index, false))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export const TestimonialCarousel: React.FC<{
+  fields: CarouselWithTestimonialCards;
+}> = ({ fields }) => {
+  const testimonials = fields?.items?.items || [];
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const timeoutRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const nextSlide = useCallback(() => {
+    if (testimonials.length === 0) return;
+    setCurrentIndex(prev => (prev + 1) % testimonials.length);
+  }, [testimonials.length]);
+
+  const prevSlide = useCallback(() => {
+    if (testimonials.length === 0) return;
+    setCurrentIndex(prev => (prev === 0 ? testimonials.length - 1 : prev - 1));
+  }, [testimonials.length]);
+
+  // Auto-scroll logic
+  useEffect(() => {
+    if (testimonials.length === 0) return;
+
+    timeoutRef.current = setInterval(() => {
+      nextSlide();
+    }, 8000); // 5 seconds per slide
+
+    return () => {
+      if (timeoutRef.current) clearInterval(timeoutRef.current);
+    };
+  }, [nextSlide, testimonials.length]);
+
+  if (!testimonials || testimonials.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="relative mx-auto max-w-[1280px] overflow-hidden md:px-24">
+      {/* Navigation Overlay - Left (Hidden on mobile) */}
+      <Button
+        onClick={prevSlide}
+        className="group absolute left-4 top-1/2 z-20 hidden h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white p-2 text-text shadow-md transition-colors hover:bg-gray-100 md:flex"
+        aria-label="Previous"
+      >
+        <MaterialIcon name="arrow_back" size={24} />
+      </Button>
+
+      {/* Slider Track Wrapper */}
+      <div className="grid grid-cols-1 justify-items-center">
+        {/* Slides */}
+        {testimonials.map((item, index) => {
+          let offset = index - currentIndex;
+          const len = testimonials.length;
+          if (offset > len / 2) offset -= len;
+          if (offset < -len / 2) offset += len;
+
+          const isActive = offset === 0;
+
+          return (
+            <div
+              key={index}
+              className={cx(
+                "col-start-1 row-start-1 w-full md:max-w-[815px]",
+                // Mobile: only show active card
+                isActive ? "opacity-100" : "opacity-0",
+                // Desktop: show active and peeking cards
+                "md:opacity-100"
+              )}
+              style={{
+                transform: `translateX(${isActive ? "0%" : offset * 105 + "%"})`,
+                zIndex: isActive ? 10 : 5,
+                visibility: Math.abs(offset) > 1 ? "hidden" : "visible",
+                transition: "all 0.5s ease-in-out",
+              }}
+            >
+              <TestimonialCard
+                {...item}
+                isActive={isActive}
+                className="h-full"
+              />
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Navigation Overlay - Right (Hidden on mobile) */}
+      <Button
+        onClick={nextSlide}
+        className="group absolute right-4 top-1/2 z-20 hidden h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white p-2 text-text shadow-md transition-colors hover:bg-gray-100 md:flex"
+        aria-label="Next"
+      >
+        <MaterialIcon name="arrow_forward" size={24} />
+      </Button>
+
+      {/* Dots (Hidden on mobile) */}
+      <div className="mt-8 hidden justify-center gap-2 md:flex">
+        {testimonials.map((_, idx) => (
+          <button
+            key={idx}
+            onClick={() => setCurrentIndex(idx)}
+            className={cx(
+              "h-2 w-2 rounded-full transition-all duration-300",
+              currentIndex === idx
+                ? "w-6 bg-white"
+                : "bg-white/40 hover:bg-white/60"
+            )}
+            aria-label={`Go to slide ${idx + 1}`}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const TabSwitch: React.FC<TabSwitchProps> = ({
+  tabs,
+  activeTab,
+  onChange,
+  className,
+}) => {
+  return (
+    <div
+      className={cx(
+        "mx-auto flex w-fit rounded-2xl bg-bg-surface-active p-1",
+        className
+      )}
+    >
+      {tabs.map(tab => (
+        <button
+          key={tab}
+          onClick={() => onChange(tab)}
+          className={cx(
+            "min-w-[160px] whitespace-nowrap rounded-2xl bg-bg-surface-active px-4 py-2.5 text-label1 font-black transition-all duration-300",
+            activeTab === tab
+              ? "bg-bg-fill-brand text-white shadow-md"
+              : "text-text-info hover:bg-bg-surface-hover"
+          )}
+        >
+          {tab}
+        </button>
+      ))}
+    </div>
+  );
+};