@windstream/react-shared-components 0.2.57 → 0.2.59

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";

package/src/utils/index.ts

@@ -27,6 +27,11 @@ export type {
 } from "../types/utm";
 export { UTM_PARAM_NAMES } from "../types/utm";
 
+export {
+  buildWifiGrantRedirectUrl,
+  redirectToWifiGrantUrl,
+} from "./wifi-grant-redirect";
+
 // Contentful utilities (server-safe, no "use client")
 export { toDocument } from "./contentful/to-document";
 export {

package/src/utils/wifi-grant-redirect.ts

@@ -0,0 +1,49 @@
+/**
+ * Wifi Grant Redirect Helpers
+ *
+ * Builds the captive-portal redirect URL for Wi-Fi splash pages (e.g. /free-public-wifi).
+ * The portal controller appends base_grant_url to the page URL; continue_url always
+ * points at the fixed success page below (not read from the portal's query params).
+ */
+
+const WIFI_GRANT_CONTINUE_URL = "https://www.gokinetic.com/free-public-wifi/success";
+const ALLOWED_BASE_GRANT_PROTOCOL = "https:";
+// Cisco Meraki captive-portal domain; grant URLs use a per-node subdomain (e.g. n143.network-auth.com).
+const ALLOWED_BASE_GRANT_DOMAIN = "network-auth.com";
+
+// Restricts redirects to the known captive-portal domain to prevent open redirect via base_grant_url.
+function getSafeBaseGrantUrl(rawBaseGrantUrl: string): URL | null {
+  try {
+    const parsed = new URL(rawBaseGrantUrl);
+    if (parsed.protocol !== ALLOWED_BASE_GRANT_PROTOCOL) return null;
+    const { hostname } = parsed;
+    const isAllowedHost =
+      hostname === ALLOWED_BASE_GRANT_DOMAIN ||
+      hostname.endsWith(`.${ALLOWED_BASE_GRANT_DOMAIN}`);
+    if (!isAllowedHost) return null;
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+
+export function buildWifiGrantRedirectUrl(): string | null {
+  if (typeof window === "undefined") return null;
+  const params = new URLSearchParams(window.location.search);
+  const baseGrantUrl = params.get("base_grant_url");
+  if (!baseGrantUrl) return null;
+
+  const safeBaseGrantUrl = getSafeBaseGrantUrl(baseGrantUrl);
+  if (!safeBaseGrantUrl) return null;
+
+  safeBaseGrantUrl.searchParams.set("continue_url", WIFI_GRANT_CONTINUE_URL);
+  safeBaseGrantUrl.searchParams.set("duration", "86400");
+  return safeBaseGrantUrl.toString();
+}
+
+export function redirectToWifiGrantUrl(): boolean {
+  const redirectUrl = buildWifiGrantRedirectUrl();
+  if (!redirectUrl) return false;
+  window.location.href = redirectUrl;
+  return true;
+}