@windstream/react-shared-components 0.1.62 → 0.1.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.1.62",
+  "version": "0.1.64",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

package/src/contentful/blocks/blogs-grid-base/index.tsx

@@ -6,6 +6,7 @@ import { Text } from "@shared/components/text";
 import { BlogCard } from "@shared/contentful/blocks/cards/blog-card";
 
 export function BlogGridBase({
+  title = "recent articles",
   paginatedArticles,
   totalArticles,
   currentPage,
@@ -35,7 +36,7 @@ export function BlogGridBase({
       {/* Controls bar */}
       <div className="mx-auto flex max-w-[1200px] flex-wrap items-center justify-between gap-3 px-6 pb-6">
         <Text className="w-full text-center text-heading5 font-black lowercase text-text-secondary md:w-auto md:text-left">
-          recent articles
+          {title}
         </Text>
 
         {categoryOptions.length > 0 && (

package/src/contentful/blocks/blogs-grid-base/types.ts

@@ -16,6 +16,7 @@ export interface BlogCardProps {
 }
 
 export interface BlogGridBaseProps {
+  title?: string;
   paginatedArticles: BlogCardProps[];
   totalArticles: number;
   currentPage: number;

package/src/contentful/blocks/cart-retention-banner/index.tsx

@@ -1,97 +1,105 @@
-"use client";
-import { Text } from "@shared/components/text";
-import type { TypeCartRetentionBannerFields } from "./types";
-import { useEffect, useState } from "react";
-import { Button } from "@shared/contentful/blocks/button";
-import { Modal } from "@shared/contentful/blocks/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}
-            buttonLabel={cta?.buttonLabel ?? "Continue checkout"}
-          />
-      </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}
-            buttonLabel={cta?.buttonLabel ?? "Continue checkout"}
-          />
-        </div>
-      </Modal>
-    </section>
-  );
-};
-
-export default CartRetentionBanner;
+"use client";
+
+import { useEffect, useState } from "react";
+import type { TypeCartRetentionBannerFields } from "./types";
+
+import { Text } from "@shared/components/text";
+import { Button } from "@shared/contentful/blocks/button";
+import { Modal } from "@shared/contentful/blocks/modal";
+import { renderContentfulRichText } from "@shared/hooks/contentful/use-contentful-rich-text";
+import { toDocument } from "@shared/utils/contentful/to-document";
+
+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="pop-up-body mb-5 mt-10 flex w-full flex-col items-center justify-center"
+        data-section-type={"cart-retention-banner"}
+        data-section-index={"0"}
+      >
+        <Text className="heading5 text-center lg:heading3">
+          {mainHeading || "Welcome back. Let’s finish your order"}
+        </Text>
+        {description &&
+          renderContentfulRichText(
+            toDocument(description?.json),
+            false,
+            "body1 my-4"
+          )}
+        <Button
+          onClick={continueCheckout}
+          buttonLabel={cta?.buttonLabel ?? "Continue checkout"}
+        />
+      </div>
+    );
+  }
+  return (
+    <section id={anchorId} data-testid="cart-retention-banner">
+      <Modal
+        size="sm"
+        isOpen={modalOpen}
+        onRequestClose={handleClose}
+        bodyClassName="flex items-center justify-center"
+        type="cart-retention-banner"
+      >
+        <div className="pop-up-body mb-5 mt-10 flex w-full flex-col items-center justify-center">
+          <Text className="heading5 text-center lg:heading3">
+            {mainHeading || "Welcome back. Let&apos;s finish your order"}
+          </Text>
+          {description &&
+            renderContentfulRichText(
+              toDocument(description?.json),
+              false,
+              "body1 my-4"
+            )}
+          <Button
+            onClick={continueCheckout}
+            buttonLabel={cta?.buttonLabel ?? "Continue checkout"}
+          />
+        </div>
+      </Modal>
+    </section>
+  );
+};
+
+export default CartRetentionBanner;