@windstream/react-shared-components 0.2.57 → 0.2.59

package/package.json

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

package/src/components/brand-button/index.tsx

@@ -48,8 +48,8 @@ export const BrandButton = forwardRef<
     const getVariantClasses = () => {
       const baseClasses = cx(
         sizeToClassNames(size),
-        "rounded-button overflow-visible flex lg:inline-flex px-15 gap-2 items-center justify-center text-center outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer transition-colors duration-200 align-top whitespace-nowrap",
-        fullWidth ? "w-full" : "w-full lg:w-auto"
+        "rounded-button overflow-visible flex px-15 gap-2 items-center justify-center text-center outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer transition-colors duration-200 align-top whitespace-nowrap",
+        fullWidth ? "w-full" : "lg:inline-flex w-full lg:w-auto"
       );
 
       const variantClasses: Record<ButtonVariantsT, string> = {

package/src/components/next-image/index.tsx

@@ -6,7 +6,7 @@ import NextJsImageImport, {
   type ImageProps as NextImageProps,
 } from "next/image";
 
-import { cx } from "@shared/utils";
+import { cx } from "@shared/utils/cx";
 
 // Handle CJS/ESM interop: when bundled as ESM and consumed by Webpack,
 // the default import may resolve to { default: Component } (or be doubly

package/src/components/video-link/contentful-video-embed.tsx

@@ -2,7 +2,7 @@ import React, { useRef } from "react";
 import { VideoEmbedProps } from "./types";
 
 import { useFullscreenToggle } from "@shared/hooks/use-fullscreen-toggle";
-import { cx } from "@shared/utils";
+import { cx } from "@shared/utils/cx";
 
 export const ContentfulVideoEmbed: React.FC<VideoEmbedProps> = props => {
   const {

package/src/components/video-link/index.tsx

@@ -11,7 +11,7 @@ import {
   useVideoAnalytics,
   VideoProvider,
 } from "@shared/hooks/use-video-analytics";
-import { cx } from "@shared/utils";
+import { cx } from "@shared/utils/cx";
 
 // Derives a stable id for the Contentful-hosted case, which has no natural
 // provider id the way a YouTube/Vimeo URL does.

package/src/components/video-link/vimeo-embed.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo, useRef } from "react";
 import { VideoEmbedProps } from "./types";
 
-import { cx } from "@shared/utils";
 import Player from "@vimeo/player";
+import { cx } from "@shared/utils/cx";
 
 const extractVimeoIdandHash = (href: string) => {
   // Strip query parameters and fragments

package/src/components/video-link/youtube-embed.tsx

@@ -3,7 +3,7 @@ import { VideoEmbedProps } from "./types";
 import { loadYoutubeIframeApi } from "./youtube-iframe-api-loader";
 
 import { useFullscreenToggle } from "@shared/hooks/use-fullscreen-toggle";
-import { cx } from "@shared/utils";
+import { cx } from "@shared/utils/cx";
 
 // import styles from "./styles.module.scss";
 

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

@@ -13,6 +13,7 @@ import type { IconName } from "@shared/components/material-icon/types";
 import { Text } from "@shared/components/text";
 import { cx } from "@shared/utils";
 import { buildPreservedQueryHref } from "@shared/utils/utm";
+import { redirectToWifiGrantUrl } from "@shared/utils/wifi-grant-redirect";
 
 const textVariantClasses: Record<string, string> = {
   primary_brand: "text-text-brand",
@@ -114,13 +115,22 @@ export const Button: React.FC<ButtonProps> = props => {
     }
   }
 
+  // Self-contained: reads base_grant_url/user_continue_url and redirects, no host wiring needed.
+  function handleWifiGrantRedirect() {
+    if (preDefinedFunctionExecution === "wifi grant redirect") {
+      redirectToWifiGrantUrl();
+    }
+  }
+
   function linkClick(event: React.MouseEvent<HTMLAnchorElement>) {
     handleModalClick(event);
+    handleWifiGrantRedirect();
     onClick?.(event);
   }
 
   function buttonClick(event: React.MouseEvent<HTMLButtonElement>) {
     handleModalClick(event);
+    handleWifiGrantRedirect();
     onClick?.(event);
   }
 
@@ -309,6 +319,7 @@ export const Button: React.FC<ButtonProps> = props => {
     <AnimationWrapper
       disableAnimation={disableAnimation}
       animationType={animationType}
+      className={cx(fullWidth && "w-full")}
     >
       {CTA}
     </AnimationWrapper>

package/src/contentful/blocks/cart-retention-banner/CartRetentionBanner.stories.tsx

@@ -21,7 +21,7 @@ const meta: Meta<typeof CartRetentionBanner> = {
     fields: {
       control: { type: "object" },
       description:
-        "Content fields including anchorId, mainHeading, description (rich-text), and cta.buttonLabel",
+        "Content fields including anchorId, mainHeading, description (rich-text), cta.buttonLabel, image, imageAltText, imagePosition (left | right | center), backgroundColor, and imageAccentColor",
     },
     isInPopupContainer: {
       control: { type: "boolean" },
@@ -166,3 +166,91 @@ export const WithDescription: Story = {
     },
   },
 };
+
+// Image aligned to the left of the text content
+export const ImageLeft: Story = {
+  args: {
+    isInPopupContainer: true,
+    fields: {
+      entryTitle: "Cart Retention Banner",
+      anchorId: "cart-retention-image-left",
+      mainHeading: "Your offer just got better",
+      description: {
+        json: {
+          nodeType: "document",
+          data: {},
+          content: [
+            {
+              nodeType: "paragraph",
+              data: {},
+              content: [
+                {
+                  nodeType: "text",
+                  value:
+                    "Get up to an additional $10/mo. off your plan, and up to a $200 prepaid Mastercard\u00ae with this online only offer.",
+                  marks: [],
+                  data: {},
+                },
+              ],
+            },
+          ],
+        },
+      },
+      image: "https://picsum.photos/280/280",
+      imageAltText: "Customer using a laptop",
+      imagePosition: "left",
+      backgroundColor: "white",
+      cta: {
+        buttonLabel: "Claim offer now",
+      },
+    },
+  },
+};
+
+// Image aligned to the right of the text content
+export const ImageRight: Story = {
+  args: {
+    ...ImageLeft.args,
+    fields: {
+      ...ImageLeft.args?.fields,
+      anchorId: "cart-retention-image-right",
+      imagePosition: "right",
+    },
+  },
+};
+
+// Image centered above the heading (default layout when an image is present)
+export const ImageCenter: Story = {
+  args: {
+    ...ImageLeft.args,
+    fields: {
+      ...ImageLeft.args?.fields,
+      anchorId: "cart-retention-image-center",
+      imagePosition: "center",
+    },
+  },
+};
+
+// Configurable background color
+export const WithBackgroundColor: Story = {
+  args: {
+    ...ImageLeft.args,
+    fields: {
+      ...ImageLeft.args?.fields,
+      anchorId: "cart-retention-background-color",
+      backgroundColor: "navy",
+    },
+  },
+};
+
+// Decorative accent color peeking from behind the image's outer corner
+export const WithImageAccentColor: Story = {
+  args: {
+    ...ImageLeft.args,
+    fields: {
+      ...ImageLeft.args?.fields,
+      anchorId: "cart-retention-image-accent-color",
+      imageAccentColor: "yellow",
+    },
+  },
+};

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/dynamic-form/form-field.tsx

@@ -116,7 +116,7 @@ export const FormFieldElement: React.FC<FormFieldElementProps> = props => {
     } else if (fieldType === "Imageupload") {
       const nextFiles = Array.isArray(event) ? event : [];
       context?.setFiles(nextFiles);
-      updateFormData(fieldId!, nextFiles);
+      updateFormData("files", nextFiles);
       return;
     } else {
       const { name, value } = event.target;