@windstream/react-shared-components 0.1.45 → 0.1.47

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

@@ -1,85 +1,85 @@
-import React from "react";
-import { TabSwitch } from "../carousel/helper";
-import { ProductCardCarousel, TestimonialCarousel } from "./helper";
-import {
-  CarouselProps,
-  CarouselWithProductCards,
-  CarouselWithTestimonialCards,
-} from "./types";
-
-import { Text } from "@shared/components/text";
-
-export const Carousel: React.FC<CarouselProps> = ({
-  fields,
-  hasTestimonialCards,
-  hasProductCards,
-  disclaimerText,
-  backgroundColor,
-  activeTab,
-  setActiveTab,
-  tabs,
-  onModalButtonClick,
-  renderCheckPlans,
-  testimonialAutoScroll = true,
-  showSwitch = false,
-}) => {
-  const baseClass = hasProductCards
-    ? "px-3 py-9 md:py-20"
-    : hasTestimonialCards
-      ? "px-3 py-12 md:pt-20 md:pb-16"
-      : "";
-  return (
-    <div className={`${backgroundColor} ${baseClass} mx-auto overflow-hidden`}>
-      <div className="relative mx-auto flex max-w-[1280px] flex-col gap-8 overflow-visible md:gap-12">
-        <div>
-          <Text
-            as="h2"
-            className="heading2 text-text md:heading1 md:text-center"
-          >
-            {fields?.title}
-          </Text>
-          {fields?.subTitle && (
-            <Text as="h3" className="body1 px-4 pt-4 md:text-center">
-              {fields?.subTitle}
-            </Text>
-          )}
-        </div>
-        {showSwitch && hasProductCards && (
-          <div className="flex flex-col gap-8">
-            {showSwitch && hasProductCards && tabs.length > 1 && (
-              <TabSwitch
-                tabs={tabs}
-                activeTab={activeTab}
-                onChange={setActiveTab}
-              />
-            )}
-            {hasProductCards && (
-              <ProductCardCarousel
-                onModalButtonClick={onModalButtonClick}
-                renderCheckPlans={renderCheckPlans}
-                fields={fields as CarouselWithProductCards}
-              />
-            )}
-          </div>
-        )}
-        {hasTestimonialCards && (
-          <TestimonialCarousel
-            fields={fields as CarouselWithTestimonialCards}
-            autoScroll={testimonialAutoScroll}
-            autoScrollInterval={8000}
-          />
-        )}
-      </div>
-      {disclaimerText && (
-        <Text
-          as="div"
-          className="footnote mt-8 px-4 text-center text-text-secondary"
-        >
-          {disclaimerText}
-        </Text>
-      )}
-    </div>
-  );
-};
-
-export default Carousel;
+import React from "react";
+import { TabSwitch } from "../carousel/helper";
+import { ProductCardCarousel, TestimonialCarousel } from "./helper";
+import {
+  CarouselProps,
+  CarouselWithProductCards,
+  CarouselWithTestimonialCards,
+} from "./types";
+
+import { Text } from "@shared/components/text";
+
+export const Carousel: React.FC<CarouselProps> = ({
+  fields,
+  hasTestimonialCards,
+  hasProductCards,
+  disclaimerText,
+  backgroundColor,
+  activeTab,
+  setActiveTab,
+  tabs,
+  onModalButtonClick,
+  renderCheckPlans,
+  testimonialAutoScroll = true,
+  showSwitch = false,
+}) => {
+  const baseClass = hasProductCards
+    ? "px-3 py-9 md:py-20"
+    : hasTestimonialCards
+      ? "px-3 py-12 md:pt-20 md:pb-16"
+      : "";
+  return (
+    <div className={`${backgroundColor} ${baseClass} mx-auto overflow-hidden`}>
+      <div className="relative mx-auto flex max-w-[1280px] flex-col gap-8 overflow-visible md:gap-12">
+        <div>
+          <Text
+            as="h2"
+            className="heading2 text-text md:heading1 md:text-center"
+          >
+            {fields?.title}
+          </Text>
+          {fields?.subTitle && (
+            <Text as="h3" className="body1 px-4 pt-4 md:text-center">
+              {fields?.subTitle}
+            </Text>
+          )}
+        </div>
+        {showSwitch && hasProductCards && (
+          <div className="flex flex-col gap-8">
+            {showSwitch && hasProductCards && tabs.length > 1 && (
+              <TabSwitch
+                tabs={tabs}
+                activeTab={activeTab}
+                onChange={setActiveTab}
+              />
+            )}
+            {hasProductCards && (
+              <ProductCardCarousel
+                onModalButtonClick={onModalButtonClick}
+                renderCheckPlans={renderCheckPlans}
+                fields={fields as CarouselWithProductCards}
+              />
+            )}
+          </div>
+        )}
+        {hasTestimonialCards && (
+          <TestimonialCarousel
+            fields={fields as CarouselWithTestimonialCards}
+            autoScroll={testimonialAutoScroll}
+            autoScrollInterval={8000}
+          />
+        )}
+      </div>
+      {disclaimerText && (
+        <Text
+          as="div"
+          className="footnote mt-8 px-4 text-center text-text-secondary"
+        >
+          {disclaimerText}
+        </Text>
+      )}
+    </div>
+  );
+};
+
+export default Carousel;

package/src/contentful/blocks/carousel/types.ts

@@ -1,144 +1,144 @@
-import React, { ReactNode } from "react";
-
-import { CheckPlansProps } from "@shared/types/micro-components";
-
-export interface carouselFieldsInterface {
-  __typename: "ComponentCarousel";
-  sys: {
-    id: string;
-  };
-  entryName?: string;
-  anchorId?: string;
-  title?: string;
-  subTitle?: string;
-  rotationTiming?: number;
-  showArrows?: boolean;
-  autoRotate?: boolean;
-  initialSlideIndex?: number;
-  infiniteScroll?: boolean;
-  mobileNavigationType?: boolean;
-  disclaimerText?: {
-    json: any;
-  };
-  backgroundColor?: "blue" | "green" | "orange" | "purple" | "white";
-  items: {
-    items: Array<CarouselItemsType>;
-  };
-}
-
-export type CarouselItemsType =
-  | TestimonialCardFields
-  | ProductCardFields
-  | CardFields;
-
-export interface TestimonialCardFields {
-  __typename: "ComponentTestimonialCard";
-  sys: {
-    id: string;
-  };
-  title?: string;
-  author?: string;
-  role?: string;
-  rating?: number;
-  quote?: ReactNode;
-  authorImage?: {
-    url: string;
-    title?: string;
-    width?: number;
-    height?: number;
-  } | null;
-  avatarurl?: string;
-}
-
-export interface ProductCardFields {
-  __typename: "ComponentProductCard";
-  sys: {
-    id: string;
-  };
-  speed?: string;
-  price?: string;
-  priceSuffix?: string;
-  techType?: string;
-  highlighted?: boolean;
-  productCardDescription?: string;
-  benefitsTitle?: string;
-  benefitsExpanded?: boolean;
-  innerBadge?: string;
-  // GraphQL patterns for nested references
-  benefits?: {
-    items: Array<any>;
-  };
-  giftRewards?: {
-    list?: {
-      items: Array<any>;
-    };
-  };
-  cta?: {
-    buttonLabel?: string;
-    [key: string]: any;
-  };
-  innerBadgeIcon?: {
-    url: string;
-    [key: string]: any;
-  };
-}
-
-export interface CardFields {
-  __typename: "ComponentCard";
-  sys: {
-    id: string;
-  };
-  title?: string;
-  subtitle?: string;
-  eyebrow?: string;
-  body?: { json: any };
-  image?: { url: string; [key: string]: any };
-  cta?: { buttonLabel?: string; [key: string]: any };
-  ctaBottom?: { buttonLabel?: string; [key: string]: any };
-}
-
-export interface CarouselWithTestimonialCards
-  extends Omit<carouselFieldsInterface, "items"> {
-  items: {
-    items: TestimonialCardFields[];
-  };
-}
-
-export interface CarouselWithProductCards
-  extends Omit<carouselFieldsInterface, "items"> {
-  items: {
-    items: ProductCardFields[];
-  };
-}
-
-export const backgroundColorMap = {
-  blue: "bg-bg-fill-inverse",
-  green: "bg-border-success",
-  orange: "bg-orange-500",
-  purple: "bg-purple-500",
-  white: "bg-white",
-};
-
-export type CarouselProps = {
-  fields: carouselFieldsInterface;
-  hasTestimonialCards: boolean;
-  hasProductCards: boolean;
-  disclaimerText: ReactNode;
-  backgroundColor: string;
-  activeTab: string;
-  setActiveTab: (tab: string) => void;
-  tabs: string[];
-  showSwitch?: boolean;
-  testimonialAutoScroll?: boolean;
-  onModalButtonClick?: (id?: string) => void;
-  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
-};
-
-export interface TabSwitchProps {
-  tabs: string[];
-  activeTab: string;
-  onChange: (tab: string) => void;
-  className?: string;
-}
-
-export const DEFAULT_TABS = ["Business Ready", "Internet Only"];
+import React, { ReactNode } from "react";
+
+import { CheckPlansProps } from "@shared/types/micro-components";
+
+export interface carouselFieldsInterface {
+  __typename: "ComponentCarousel";
+  sys: {
+    id: string;
+  };
+  entryName?: string;
+  anchorId?: string;
+  title?: string;
+  subTitle?: string;
+  rotationTiming?: number;
+  showArrows?: boolean;
+  autoRotate?: boolean;
+  initialSlideIndex?: number;
+  infiniteScroll?: boolean;
+  mobileNavigationType?: boolean;
+  disclaimerText?: {
+    json: any;
+  };
+  backgroundColor?: "blue" | "green" | "orange" | "purple" | "white";
+  items: {
+    items: Array<CarouselItemsType>;
+  };
+}
+
+export type CarouselItemsType =
+  | TestimonialCardFields
+  | ProductCardFields
+  | CardFields;
+
+export interface TestimonialCardFields {
+  __typename: "ComponentTestimonialCard";
+  sys: {
+    id: string;
+  };
+  title?: string;
+  author?: string;
+  role?: string;
+  rating?: number;
+  quote?: ReactNode;
+  authorImage?: {
+    url: string;
+    title?: string;
+    width?: number;
+    height?: number;
+  } | null;
+  avatarurl?: string;
+}
+
+export interface ProductCardFields {
+  __typename: "ComponentProductCard";
+  sys: {
+    id: string;
+  };
+  speed?: string;
+  price?: string;
+  priceSuffix?: string;
+  techType?: string;
+  highlighted?: boolean;
+  productCardDescription?: string;
+  benefitsTitle?: string;
+  benefitsExpanded?: boolean;
+  innerBadge?: string;
+  // GraphQL patterns for nested references
+  benefits?: {
+    items: Array<any>;
+  };
+  giftRewards?: {
+    list?: {
+      items: Array<any>;
+    };
+  };
+  cta?: {
+    buttonLabel?: string;
+    [key: string]: any;
+  };
+  innerBadgeIcon?: {
+    url: string;
+    [key: string]: any;
+  };
+}
+
+export interface CardFields {
+  __typename: "ComponentCard";
+  sys: {
+    id: string;
+  };
+  title?: string;
+  subtitle?: string;
+  eyebrow?: string;
+  body?: { json: any };
+  image?: { url: string; [key: string]: any };
+  cta?: { buttonLabel?: string; [key: string]: any };
+  ctaBottom?: { buttonLabel?: string; [key: string]: any };
+}
+
+export interface CarouselWithTestimonialCards
+  extends Omit<carouselFieldsInterface, "items"> {
+  items: {
+    items: TestimonialCardFields[];
+  };
+}
+
+export interface CarouselWithProductCards
+  extends Omit<carouselFieldsInterface, "items"> {
+  items: {
+    items: ProductCardFields[];
+  };
+}
+
+export const backgroundColorMap = {
+  blue: "bg-bg-fill-inverse",
+  green: "bg-border-success",
+  orange: "bg-orange-500",
+  purple: "bg-purple-500",
+  white: "bg-white",
+};
+
+export type CarouselProps = {
+  fields: carouselFieldsInterface;
+  hasTestimonialCards: boolean;
+  hasProductCards: boolean;
+  disclaimerText: ReactNode;
+  backgroundColor: string;
+  activeTab: string;
+  setActiveTab: (tab: string) => void;
+  tabs: string[];
+  showSwitch?: boolean;
+  testimonialAutoScroll?: boolean;
+  onModalButtonClick?: (id?: string) => void;
+  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
+};
+
+export interface TabSwitchProps {
+  tabs: string[];
+  activeTab: string;
+  onChange: (tab: string) => void;
+  className?: string;
+}
+
+export const DEFAULT_TABS = ["Business Ready", "Internet Only"];

package/src/contentful/blocks/cartretentionbanner/CartRetentionBanner.tsx

@@ -0,0 +1,99 @@
+"use client";
+import { Text } from "@shared/components/text";
+import type { TypeCartRetentionBannerFields } from "./types";
+import { useEffect, useState } from "react";
+import { Button } from "@shared/components/button";
+import { Modal } from "@shared/components/modal";
+import { toDocument } from "@shared/utils/contentful/to-document";
+import { renderContentfulRichText } from "@shared/hooks/contentful/use-contentful-rich-text";
+
+
+const CartRetentionBanner: React.FC<{
+  fields: TypeCartRetentionBannerFields;
+  sys?: any;
+  isInPopupContainer?: boolean;
+  onClose?: () => void;
+  onContinueCheckout?: () => void;
+  checkShouldShowBanner?: () => boolean;
+  onBannerShown?: () => void;
+}> = ({ fields, isInPopupContainer = false, onClose, onContinueCheckout, checkShouldShowBanner, onBannerShown }) => {
+  const { anchorId, mainHeading, description, cta } = fields;
+
+  const [modalOpen, setModalOpen] = useState<boolean>(false);
+
+
+  useEffect(() => {
+    const checkRetentionCookie = () => {
+      if (checkShouldShowBanner?.() && !modalOpen) {
+        setModalOpen(true);
+        onBannerShown?.();
+      }
+    };
+    checkRetentionCookie();
+    const timeoutId = setTimeout(checkRetentionCookie, 100);
+    return () => clearTimeout(timeoutId);
+  }, []);
+
+  const handleClose = () => {
+    onClose?.();
+    setModalOpen(false);
+  };
+
+ const continueCheckout = () => {
+    onContinueCheckout?.();
+  };
+
+  if (isInPopupContainer) {
+    return (
+      <div className="mb-5 mt-10 flex w-full flex-col items-center justify-center">
+        <Text
+        className="heading5 lg:heading3 text-center">
+          {mainHeading || "Welcome back. Let’s finish your order"}
+        </Text>
+        {description &&
+            renderContentfulRichText(
+              toDocument(description?.json),
+              false,
+              "body1 my-4"
+            )
+          }
+          <Button
+            onClick={continueCheckout}
+          >
+            {cta?.buttonLabel ?? "Continue checkout"}
+          </Button>
+      </div>
+    );
+  }
+  return (
+    <section id={anchorId} data-testid="cart-retention-banner">
+      <Modal
+        size="sm"
+        isOpen={modalOpen}
+        onRequestClose={handleClose}
+        bodyClassName="flex items-center justify-center"
+      >
+        <div className="mb-5 mt-10 flex w-full flex-col items-center justify-center">
+           <Text
+        className="heading5 lg:heading3 text-center">
+            {mainHeading || "Welcome back. Let&apos;s finish your order"}
+          </Text>
+          {description &&
+            renderContentfulRichText(
+              toDocument(description?.json),
+              false,
+              "body1 my-4"
+            )
+          }
+          <Button
+            onClick={continueCheckout}
+          >
+            {cta?.buttonLabel ?? "Continue checkout"}
+          </Button>
+        </div>
+      </Modal>
+    </section>
+  );
+};
+
+export default CartRetentionBanner;

package/src/contentful/blocks/cartretentionbanner/types.ts

@@ -0,0 +1,11 @@
+export interface TypeCartRetentionBannerFields {
+  entryTitle?: string;
+  anchorId?: string;
+  mainHeading?: string;
+  description?: {
+    json: any;
+  }; 
+ cta?: { buttonLabel?: string; [key: string]: any };
+}
+
+export type TypeCartRetentionBanner = TypeCartRetentionBannerFields;

package/src/contentful/blocks/comparison-table/index.tsx

@@ -1,27 +1,27 @@
-import React from "react";
-import { ComparisonTableProps } from "./types";
-
-import { Text } from "@shared/components/text";
-
-export const ComparisonTable: React.FC<ComparisonTableProps> = ({
-  title,
-  disclaimer,
-  table,
-  maxWidth = true,
-}) => {
-  return (
-    <div className="component-container">
-      <div
-        className={`mx-5 mb-5 mt-8 lg:mt-10 ${maxWidth ? "max-w-120 xl:mx-auto" : ""}`}
-      >
-        <Text as="h2" className="heading2 lg:heading1 lg:text-center">
-          {title}
-        </Text>
-        <div className="comparison-table-container mt-20 xl:mt-10">{table}</div>
-        <Text as="div" className="micro mt-8 text-center">
-          {disclaimer}
-        </Text>
-      </div>
-    </div>
-  );
-};
+import React from "react";
+import { ComparisonTableProps } from "./types";
+
+import { Text } from "@shared/components/text";
+
+export const ComparisonTable: React.FC<ComparisonTableProps> = ({
+  title,
+  disclaimer,
+  table,
+  maxWidth = true,
+}) => {
+  return (
+    <div className="component-container">
+      <div
+        className={`mx-5 mb-5 mt-8 lg:mt-10 ${maxWidth ? "max-w-120 xl:mx-auto" : ""}`}
+      >
+        <Text as="h2" className="heading2 lg:heading1 lg:text-center">
+          {title}
+        </Text>
+        <div className="comparison-table-container mt-20 xl:mt-10">{table}</div>
+        <Text as="div" className="micro mt-8 text-center">
+          {disclaimer}
+        </Text>
+      </div>
+    </div>
+  );
+};

package/src/contentful/blocks/comparison-table/types.ts

@@ -1,6 +1,6 @@
-export type ComparisonTableProps = {
-  title?: string;
-  disclaimer?: React.ReactNode;
-  table: React.ReactNode;
-  maxWidth?: boolean;
-};
+export type ComparisonTableProps = {
+  title?: string;
+  disclaimer?: React.ReactNode;
+  table: React.ReactNode;
+  maxWidth?: boolean;
+};