@windstream/react-shared-components 0.2.57 → 0.2.58

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

@@ -45,6 +45,13 @@ jest.mock("@shared/utils/contentful/to-document", () => ({
   toDocument: (json: any) => json,
 }));
 
+jest.mock("@shared/components/next-image", () => ({
+  NextImage: ({ src, alt, ...props }: any) => (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img src={src} alt={alt} data-testid="banner-image" {...props} />
+  ),
+}));
+
 describe("CartRetentionBanner", () => {
   const defaultFields: TypeCartRetentionBannerFields = {
     entryTitle: "Cart Banner",
@@ -406,4 +413,82 @@ describe("CartRetentionBanner", () => {
       expect(screen.queryByTestId("rich-text")).not.toBeInTheDocument();
     });
   });
+
+  describe("image and layout options", () => {
+    it("does not render an image when none is provided", () => {
+      render(<CartRetentionBanner fields={defaultFields} isInPopupContainer={true} />);
+      expect(screen.queryByTestId("banner-image")).not.toBeInTheDocument();
+    });
+
+    it("renders the image when provided", () => {
+      const fields = {
+        ...defaultFields,
+        image: "https://example.com/image.jpg",
+        imageAltText: "Promo image",
+      };
+      render(<CartRetentionBanner fields={fields} isInPopupContainer={true} />);
+      const image = screen.getByTestId("banner-image");
+      expect(image).toHaveAttribute("src", "https://example.com/image.jpg");
+      expect(image).toHaveAttribute("alt", "Promo image");
+    });
+
+    it("lays the image out beside the text for left/right imagePosition", () => {
+      const fields = {
+        ...defaultFields,
+        image: "https://example.com/image.jpg",
+        imagePosition: "left" as const,
+      };
+      render(<CartRetentionBanner fields={fields} isInPopupContainer={true} />);
+      expect(
+        document.querySelector(".cart-retention-banner-image")
+      ).toBeInTheDocument();
+    });
+
+    it("applies the backgroundColor class to the popup container", () => {
+      const fields = { ...defaultFields, backgroundColor: "navy" as const };
+      render(<CartRetentionBanner fields={fields} isInPopupContainer={true} />);
+      const popupBody = document.querySelector(".pop-up-body");
+      expect(popupBody?.className).toContain("bg-[#00002D]");
+    });
+
+    it("passes the backgroundColor class through to the Modal", () => {
+      const fields = { ...defaultFields, backgroundColor: "cream500" as const };
+      render(<CartRetentionBanner fields={fields} />);
+      expect(screen.getByTestId("modal")).toBeInTheDocument();
+    });
+
+    it("does not render an accent shape when imageAccentColor is not provided", () => {
+      const fields = {
+        ...defaultFields,
+        image: "https://example.com/image.jpg",
+        imagePosition: "left" as const,
+      };
+      render(<CartRetentionBanner fields={fields} isInPopupContainer={true} />);
+      expect(document.querySelector(".shape-bg-svg")).not.toBeInTheDocument();
+    });
+
+    it("renders the accent shape behind the side-image layout when imageAccentColor is supported", () => {
+      const fields = {
+        ...defaultFields,
+        image: "https://example.com/image.jpg",
+        imagePosition: "left" as const,
+        imageAccentColor: "yellow" as const,
+      };
+      render(<CartRetentionBanner fields={fields} isInPopupContainer={true} />);
+      const shape = document.querySelector(".shape-bg-svg");
+      expect(shape).toBeInTheDocument();
+      expect(shape?.getAttribute("class")).toContain("text-[#F5FF1E]");
+    });
+
+    it("does not render an accent shape for a color ShapeBackgroundWrapper doesn't support", () => {
+      const fields = {
+        ...defaultFields,
+        image: "https://example.com/image.jpg",
+        imagePosition: "right" as const,
+        imageAccentColor: "cream500" as const,
+      };
+      render(<CartRetentionBanner fields={fields} isInPopupContainer={true} />);
+      expect(document.querySelector(".shape-bg-svg")).not.toBeInTheDocument();
+    });
+  });
 });

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

@@ -3,12 +3,46 @@
 import { useEffect, useState } from "react";
 import type { TypeCartRetentionBannerFields } from "./types";
 
+import { NextImage } from "@shared/components/next-image";
 import { Text } from "@shared/components/text";
 import { Button } from "@shared/contentful/blocks/button";
 import { Modal } from "@shared/contentful/blocks/modal";
+import { ShapeBackgroundWrapper } from "@shared/contentful/blocks/shape-background-wrapper";
 import { renderContentfulRichText } from "@shared/hooks/contentful/use-contentful-rich-text";
+import { cx } from "@shared/utils";
 import { toDocument } from "@shared/utils/contentful/to-document";
 
+// Literal Tailwind classes (JIT only picks up literal tokens found in source).
+const backgroundColorClassMap: Record<
+  NonNullable<TypeCartRetentionBannerFields["backgroundColor"]>,
+  string
+> = {
+  white: "bg-white",
+  navy: "bg-[#00002D] text-white",
+  green: "bg-[#26B170] text-white",
+  blue: "bg-[#07B2E2] text-white",
+  purple: "bg-[#931D69] text-white",
+  yellow: "bg-[#F5FF1E]",
+  cream500: "bg-[#FFFEEF]",
+  gray100: "bg-bg-fill-secondary",
+  transparent: "",
+};
+
+// ShapeBackgroundWrapper only supports this subset of the accent color palette.
+const shapeBackgroundThemeKeys = [
+  "blue",
+  "green",
+  "yellow",
+  "purple",
+  "white",
+  "navy",
+] as const;
+type ShapeBackgroundThemeKey = (typeof shapeBackgroundThemeKeys)[number];
+const isShapeBackgroundThemeKey = (
+  color?: TypeCartRetentionBannerFields["imageAccentColor"]
+): color is ShapeBackgroundThemeKey =>
+  !!color && (shapeBackgroundThemeKeys as readonly string[]).includes(color);
+
 const CartRetentionBanner: React.FC<{
   fields: TypeCartRetentionBannerFields;
   sys?: any;
@@ -25,7 +59,27 @@ const CartRetentionBanner: React.FC<{
   checkShouldShowBanner,
   onBannerShown,
 }) => {
-  const { anchorId, mainHeading, description, cta } = fields;
+  const {
+    anchorId,
+    mainHeading,
+    description,
+    cta,
+    image,
+    imageAltText,
+    imagePosition = "center",
+    backgroundColor,
+    imageAccentColor,
+    showImageAsIcon = false,
+    Logo,
+  } = fields;
+
+  const hasSideImage = Boolean(image) && imagePosition !== "center";
+  const isRightSide = imagePosition === "right";
+  const backgroundColorClassName = backgroundColor
+    ? (backgroundColorClassMap[backgroundColor] ?? "")
+    : "";
+  // Decorative shape sits behind the whole card, both layouts.
+  const showAccentShape = isShapeBackgroundThemeKey(imageAccentColor);
 
   const [modalOpen, setModalOpen] = useState<boolean>(false);
 
@@ -50,30 +104,167 @@ const CartRetentionBanner: React.FC<{
     onContinueCheckout?.();
   };
 
+  const renderLogo = () => {
+    if (!Logo) return null;
+
+    return (
+      <div className="cart-retention-banner-logo relative mx-auto mb-4 h-12 w-40">
+        <NextImage
+          src={Logo}
+          alt={mainHeading ?? ""}
+          fill={true}
+          sizes="160px"
+          className="object-contain"
+        />
+      </div>
+    );
+  };
+
+  const renderImage = () => {
+    if (!image) return null;
+
+    if (showImageAsIcon) {
+      return (
+        <div className="cart-retention-banner-image relative mx-auto mb-4 h-[87px] w-[93px] overflow-hidden md:h-[193px] md:w-[207px]">
+          <NextImage
+            src={image}
+            alt={imageAltText ?? ""}
+            fill={true}
+            sizes="(min-width: 768px) 207px, 93px"
+            className="object-contain"
+          />
+        </div>
+      );
+    }
+
+    if (hasSideImage) {
+      // Mobile: full-width photo on top. md+: fixed 358px column filling the modal's height.
+      return (
+        <div className="cart-retention-banner-image relative md:h-full">
+          <div className="relative h-[258px] w-full overflow-hidden rounded-[20px] md:h-[400px]">
+            <NextImage
+              src={image}
+              alt={imageAltText ?? ""}
+              fill={true}
+              sizes="(min-width: 768px) 314px, 100vw"
+              className="object-cover object-top"
+            />
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="cart-retention-banner-image relative mb-4 aspect-[2/1] w-full overflow-hidden rounded-[20px]">
+        <NextImage
+          src={image}
+          alt={imageAltText ?? ""}
+          fill={true}
+          sizes="(min-width: 640px) 400px, 90vw"
+          className="object-cover"
+        />
+      </div>
+    );
+  };
+
+  const renderTextContent = () => (
+    <>
+      <Text
+        className={cx(
+          "heading2",
+          hasSideImage ? "text-center md:text-left" : "text-center"
+        )}
+      >
+        {mainHeading || "Welcome back. Let's finish your order"}
+      </Text>
+      {description &&
+        renderContentfulRichText(
+          toDocument(description?.json),
+          false,
+          cx("body2", hasSideImage ? "text-center md:text-left" : "text-center")
+        )}
+      <div
+        className={cx(
+          "flex w-full pt-5",
+          hasSideImage ? "justify-center md:justify-start" : "justify-center"
+        )}
+      >
+        <Button
+          onClick={continueCheckout}
+          buttonLabel={cta?.buttonLabel ?? "Continue checkout"}
+          disableAnimation={cta?.disableAnimation ?? true}
+          animationType={cta?.animationType}
+          fullWidth={true}
+        />
+      </div>
+    </>
+  );
+
+  const bodyContent = hasSideImage ? (
+    <>
+      {renderLogo()}
+      <div
+        className={cx(
+          "flex flex-col md:grid md:gap-6",
+          isRightSide ? "md:grid-cols-[1fr_314px]" : "md:grid-cols-[314px_1fr]"
+        )}
+      >
+        <div
+          className={cx(
+            "order-1",
+            isRightSide && "md:order-2",
+            "md:max-w-[314px]",
+            showImageAsIcon && "flex items-center justify-center"
+          )}
+        >
+          {renderImage()}
+        </div>
+        <div
+          className={cx(
+            "order-2 flex flex-col justify-center gap-8 pt-5 md:gap-10 md:pt-0",
+            isRightSide ? "md:order-1" : ""
+          )}
+        >
+          {renderTextContent()}
+        </div>
+      </div>
+    </>
+  ) : (
+    <>
+      {renderLogo()}
+      {renderImage()}
+      {renderTextContent()}
+    </>
+  );
+
+  const wrappedBodyContent = (
+    <ShapeBackgroundWrapper
+      path="path5"
+      fill={imageAccentColor as ShapeBackgroundThemeKey}
+      background="transparent"
+      className={cx(
+        "rounded-3xl px-6 pb-8 md:p-6",
+        showImageAsIcon && "md:!py-[95px]",
+        Logo ? "pt-6" : "pt-13"
+      )}
+      show={showAccentShape}
+    >
+      {bodyContent}
+    </ShapeBackgroundWrapper>
+  );
+
   if (isInPopupContainer) {
     return (
       <div
-        className="pop-up-body mb-5 mt-10 w-full"
+        className={cx(
+          "pop-up-body w-full",
+          hasSideImage ? "overflow-hidden" : "mb-5 mt-10",
+          backgroundColorClassName
+        )}
         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 text-center"
-          )}
-        <div className="flex w-full justify-center">
-          <Button
-            onClick={continueCheckout}
-            buttonLabel={cta?.buttonLabel ?? "Continue checkout"}
-            disableAnimation={cta?.disableAnimation ?? true}
-            animationType={cta?.animationType}
-          />
-        </div>
+        {wrappedBodyContent}
       </div>
     );
   }
@@ -83,28 +274,20 @@ const CartRetentionBanner: React.FC<{
         size="sm"
         isOpen={modalOpen}
         onRequestClose={handleClose}
-        bodyClassName="flex items-center justify-center"
+        bodyClassName={cx(
+          hasSideImage
+            ? cx("overflow-hidden md:!max-w-[828px]", !showAccentShape && "p-0")
+            : "flex items-center justify-center",
+          "min-[370px] p-[0px]",
+          backgroundColorClassName
+        )}
         type="cart-retention-banner"
       >
-        <div className="pop-up-body mb-5 mt-10 w-full">
-          <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 text-center"
-            )}
-          <div className="flex w-full justify-center">
-            <Button
-              onClick={continueCheckout}
-              buttonLabel={cta?.buttonLabel ?? "Continue checkout"}
-              disableAnimation={cta?.disableAnimation ?? true}
-              animationType={cta?.animationType}
-            />
-          </div>
-        </div>
+        {hasSideImage ? (
+          wrappedBodyContent
+        ) : (
+          <div className="pop-up-body mb-5 w-full">{wrappedBodyContent}</div>
+        )}
       </Modal>
     </section>
   );

package/src/contentful/blocks/cart-retention-banner/types.ts

@@ -1,5 +1,28 @@
 import type { AnimationType } from "@shared/components/animation-wrapper";
 
+export type CartRetentionBannerImagePosition = "left" | "right" | "center";
+
+export type CartRetentionBannerBackgroundColor =
+  | "white"
+  | "navy"
+  | "green"
+  | "blue"
+  | "purple"
+  | "yellow"
+  | "cream500"
+  | "gray100"
+  | "transparent";
+
+export type CartRetentionBannerImageAccentColor =
+  | "white"
+  | "navy"
+  | "green"
+  | "blue"
+  | "purple"
+  | "yellow"
+  | "cream500"
+  | "gray100";
+
 export interface TypeCartRetentionBannerFields {
   entryTitle?: string;
   anchorId?: string;
@@ -13,6 +36,17 @@ export interface TypeCartRetentionBannerFields {
     animationType?: AnimationType | AnimationType[];
     [key: string]: any;
   };
+  /** Image URL rendered alongside the banner content. */
+  image?: string;
+  imageAltText?: string;
+  /** Position of the image relative to the text content; "center" (default) preserves the original image-above-heading layout. */
+  imagePosition?: CartRetentionBannerImagePosition;
+  /** Background color token applied to the banner/modal content area. */
+  backgroundColor?: CartRetentionBannerBackgroundColor;
+  /** Accent color for the decorative shape peeking from behind the image's outer corner; omit for no accent. */
+  imageAccentColor?: CartRetentionBannerImageAccentColor;
+  Logo?: string;
+  showImageAsIcon?: boolean;
 }
 
 export type TypeCartRetentionBanner = TypeCartRetentionBannerFields;

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

@@ -59,7 +59,13 @@ export const Modal: React.FC<ExtendedModalProps> = props => {
             <Dialog.Content
               onOpenAutoFocus={e => e.preventDefault()}
               className={cx(
-                "relative mx-auto w-full rounded-modal bg-bg p-[25px] shadow-drop focus:outline-none",
+                // `rounded-modal` isn't a registered Tailwind token - use an explicit radius.
+                "relative mx-auto w-full overflow-hidden rounded-[24px] shadow-drop focus:outline-none",
+                // Only fall back to the default surface color / padding when
+                // the caller hasn't supplied its own override (avoids two
+                // competing `bg-*`/`p-*` classes racing on CSS order).
+                !/(^|\s)bg-/.test(bodyClassName ?? "") && "bg-bg",
+                !/(^|\s)p-/.test(bodyClassName ?? "") && "p-[25px]",
                 bodyClassName
               )}
               style={{ maxWidth: sizeToPixel[size || "lg"] }}
@@ -68,12 +74,17 @@ export const Modal: React.FC<ExtendedModalProps> = props => {
                 <Dialog.Close asChild={true}>
                   <Button
                     showButtonAs="unstyled"
-                    buttonClassName="absolute right-0 top-0 mr-2 mt-2 bg-bg"
+                    // Pin icon color: button always sits on a light bg-bg
+                    // square, so it must not inherit a light text color (e.g.
+                    // text-white) from a dark bodyClassName like navy.
+                    // z-10: keeps the button clickable above positioned body
+                    // content (e.g. ShapeBackgroundWrapper's decorative layer).
+                    buttonClassName="absolute right-0 top-0 z-10 mr-2 mt-2"
                   >
                     <MaterialIcon name="close" />
                   </Button>
                 </Dialog.Close>
-                <div className="custom-modal-body max-h-[85vh] overflow-visible">
+                <div className="custom-modal-body max-h-[85vh] overflow-y-auto scroll-smooth [scrollbar-color:rgba(0,0,0,0.2)_transparent] [scrollbar-width:thin] [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-black/20 hover:[&::-webkit-scrollbar-thumb]:bg-black/30 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:w-1.5">
                   {title ? (
                     <Text
                       className={cx(

package/src/contentful/blocks/shape-background-wrapper/index.test.tsx

@@ -130,9 +130,25 @@ describe("ShapeBackgroundWrapper", () => {
       expect(svgs[0]).toHaveAttribute("height", "3666");
     });
 
+    it("renders both mobile and desktop path5 SVGs when path='path5'", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper path="path5" background="white">
+          <span>Path5</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svgs = container.querySelectorAll("svg");
+      expect(svgs).toHaveLength(2);
+      expect(svgs[0]).toHaveAttribute("width", "367");
+      expect(svgs[0]).toHaveAttribute("height", "644");
+      expect(svgs[0]).toHaveClass("md:hidden");
+      expect(svgs[1]).toHaveAttribute("width", "367");
+      expect(svgs[1]).toHaveAttribute("height", "448");
+      expect(svgs[1]).toHaveClass("md:block");
+    });
+
     it("does not render SVG for unrecognized path value", () => {
       const { container } = render(
-        <ShapeBackgroundWrapper path={"path5" as any} background="white">
+        <ShapeBackgroundWrapper path={"path6" as any} background="white">
           <span>Unknown</span>
         </ShapeBackgroundWrapper>
       );

package/src/contentful/blocks/shape-background-wrapper/index.tsx

@@ -118,6 +118,36 @@ export const ShapeBackgroundWrapper: React.FC<ShapeBackgroundWrapperProps> = ({
           <path d="M1662.93 3664.31C2153.52 3637.23 2442.1 3474.65 2872.31 2646.41C3278.25 1865.1 4009.1 647.091 3634.26 264.381C3417.79 27.9951 3025.37 31.7826 2716.76 13.902C2511.72 8.81709 2327.31 8.87474 2126.55 0.512528C2060.73 -2.00052 2040.7 85.9483 2101.3 114.088C2417.76 260.743 2628.86 431.51 2731.94 722.143C2940.79 1225.9 2508.91 2178.82 2150.63 2656.7C1779.64 3169.63 1293.64 3217.84 798.345 3136.04C534.128 3085.8 291.072 2986.98 92.1133 2864.4C33.4593 2828.06 -29.3236 2901.01 15.967 2953.13C371.841 3364.12 1128.29 3656.09 1663.56 3665.34" />
         </svg>
       )}
+      {path === "path5" && (
+        // Exact Figma export, cropped via viewBox at 0,0 (no translate hack needed);
+        // mobile/desktop swap via CSS breakpoint since the crop window differs by height.
+        <>
+          <svg
+            className={`shape-bg-svg pointer-events-none absolute left-0 top-0 z-0 block md:hidden ${variantClass} fill-current ${fillClass}`}
+            width="367"
+            height="644"
+            viewBox="0 0 367 644"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path d="M-2083.1 549.586C-1857.78 764.836 -1656.5 828.759 -1081.83 673.557C-539.683 527.203 347.968 344.365 364.89 7.43135C381.862 -193.724 210.008 -373.544 84.6305 -523.879C-1.85227 -620.854 -81.806 -706.094 -164.9 -802.494C-192.25 -834.002 -242.154 -805.661 -229.077 -765.61C-160.659 -556.59 -149.205 -385.975 -240.751 -214.056C-386.348 97.8893 -1020.17 305.621 -1399.44 344.278C-1800.65 392.049 -2033.89 187.954 -2210.22 -76.0251C-2301.18 -219.67 -2360.21 -374.3 -2388.99 -518.696C-2397.38 -561.352 -2458.78 -559.193 -2463.58 -515.969C-2501.97 -175.709 -2310.97 298.878 -2083.31 550.316" />
+          </svg>
+          <svg
+            className={`shape-bg-svg pointer-events-none absolute left-0 top-0 z-0 hidden md:block ${variantClass} fill-current ${fillClass}`}
+            width="367"
+            height="448"
+            viewBox="0 0 367 448"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path d="M-2083.1 549.587C-1857.78 764.837 -1656.5 828.759 -1081.83 673.557C-539.682 527.203 347.968 344.365 364.89 7.43156C381.863 -193.724 210.008 -373.543 84.6307 -523.879C-1.85203 -620.854 -81.8058 -706.094 -164.9 -802.494C-192.249 -834.001 -242.154 -805.661 -229.077 -765.609C-160.658 -556.59 -149.205 -385.975 -240.751 -214.056C-386.348 97.8895 -1020.17 305.621 -1399.44 344.278C-1800.65 392.049 -2033.89 187.954 -2210.22 -76.0249C-2301.18 -219.669 -2360.21 -374.3 -2388.99 -518.696C-2397.38 -561.352 -2458.78 -559.193 -2463.58 -515.969C-2501.97 -175.709 -2310.97 298.879 -2083.31 550.317" />
+          </svg>
+        </>
+      )}
 
       <div className="shape-bg-content relative z-[1]">{children}</div>
     </div>

package/src/contentful/index.ts

@@ -98,6 +98,11 @@ export type { EmailInputBlockProps } from "./blocks/email-input-block/types";
 
 export { default as CartRetentionBanner } from "./blocks/cart-retention-banner";
 export type { TypeCartRetentionBannerFields as CartRetentionBannerProps } from "./blocks/cart-retention-banner/types";
+export type {
+  CartRetentionBannerImagePosition,
+  CartRetentionBannerBackgroundColor,
+  CartRetentionBannerImageAccentColor,
+} from "./blocks/cart-retention-banner/types";
 
 export { IframeEmbed } from "./blocks/iframe-embed";
 export type { IframeEmbedProps } from "./blocks/iframe-embed/types";