@neowhale/storefront 0.2.56 → 0.2.58

package/dist/landing.global.js

@@ -1130,6 +1130,25 @@ var WhaleStorefront = (function (exports) {
   }
 
   // src/react/components/sections/lead-capture-section.tsx
+  var TURNSTILE_SITE_KEY = "0x4AAAAAACwmUPgmyfw6pWfT";
+  var TURNSTILE_SCRIPT_URL = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+  var turnstilePromise = null;
+  function loadTurnstileScript() {
+    if (turnstilePromise) return turnstilePromise;
+    if (typeof window !== "undefined" && window.turnstile) {
+      turnstilePromise = Promise.resolve();
+      return turnstilePromise;
+    }
+    turnstilePromise = new Promise((resolve, reject) => {
+      const script = document.createElement("script");
+      script.src = TURNSTILE_SCRIPT_URL;
+      script.async = true;
+      script.onload = () => resolve();
+      script.onerror = () => reject(new Error("Failed to load Turnstile script"));
+      document.head.appendChild(script);
+    });
+    return turnstilePromise;
+  }
   function LeadCaptureSection({ section, data, theme, onEvent }) {
     const c = section.content;
     const [firstName, setFirstName] = useState("");
@@ -1138,6 +1157,41 @@ var WhaleStorefront = (function (exports) {
     const [status, setStatus] = useState("idle");
     const [errorMsg, setErrorMsg] = useState("");
     const [serverMessage, setServerMessage] = useState(null);
+    const turnstileRef = useRef(null);
+    const turnstileToken = useRef(null);
+    const turnstileWidgetId = useRef(null);
+    const pendingSubmit = useRef(null);
+    const onTurnstileToken = useCallback((token) => {
+      turnstileToken.current = token;
+      if (pendingSubmit.current) {
+        const cb = pendingSubmit.current;
+        pendingSubmit.current = null;
+        cb();
+      }
+    }, []);
+    useEffect(() => {
+      if (typeof window === "undefined") return;
+      let widgetId = null;
+      loadTurnstileScript().then(() => {
+        const el = turnstileRef.current;
+        if (!el || !window.turnstile) return;
+        widgetId = window.turnstile.render(el, {
+          sitekey: TURNSTILE_SITE_KEY,
+          callback: onTurnstileToken,
+          "expired-callback": () => {
+            turnstileToken.current = null;
+          },
+          size: "invisible"
+        });
+        turnstileWidgetId.current = widgetId;
+      }).catch(() => {
+      });
+      return () => {
+        if (widgetId != null && window.turnstile) {
+          window.turnstile.remove(widgetId);
+        }
+      };
+    }, [onTurnstileToken]);
     const gatewayUrl = c.gateway_url || data.gatewayUrl || "https://whale-gateway.fly.dev";
     const storeId = c.store_id || data.store?.id;
     const slug = c.landing_page_slug || data.landing_page?.slug;
@@ -1146,11 +1200,7 @@ var WhaleStorefront = (function (exports) {
     const buttonText = c.button_text || "Claim My Discount";
     const successHeading = c.success_heading || "You\u2019re in!";
     const successMessage = c.success_message || "Check your inbox for the discount code.";
-    async function handleSubmit(e) {
-      e.preventDefault();
-      if (!email || !storeId) return;
-      setStatus("loading");
-      setErrorMsg("");
+    async function submitLead(cfToken) {
       const urlParams = typeof window !== "undefined" ? new URLSearchParams(window.location.search) : null;
       try {
         const res = await fetch(`${gatewayUrl}/v1/stores/${storeId}/storefront/leads`, {
@@ -1172,7 +1222,8 @@ var WhaleStorefront = (function (exports) {
             utm_source: urlParams?.get("utm_source") || void 0,
             utm_medium: urlParams?.get("utm_medium") || void 0,
             utm_campaign: urlParams?.get("utm_campaign") || void 0,
-            utm_content: urlParams?.get("utm_content") || void 0
+            utm_content: urlParams?.get("utm_content") || void 0,
+            cf_turnstile_response: cfToken || void 0
           })
         });
         if (!res.ok) {
@@ -1193,6 +1244,22 @@ var WhaleStorefront = (function (exports) {
         setStatus("error");
       }
     }
+    async function handleSubmit(e) {
+      e.preventDefault();
+      if (!email || !storeId) return;
+      setStatus("loading");
+      setErrorMsg("");
+      if (turnstileToken.current) {
+        return submitLead(turnstileToken.current);
+      }
+      const turnstile = window.turnstile;
+      if (turnstile && turnstileWidgetId.current != null) {
+        pendingSubmit.current = () => submitLead(turnstileToken.current);
+        turnstile.execute(turnstileWidgetId.current);
+      } else {
+        return submitLead(null);
+      }
+    }
     const inputStyle = {
       flex: 1,
       minWidth: 0,
@@ -1207,7 +1274,7 @@ var WhaleStorefront = (function (exports) {
       fontFamily: "inherit",
       transition: "border-color 0.2s"
     };
-    if (status === "success") return /* @__PURE__ */ jsx(SuccessState, { theme, heading: serverMessage?.heading || successHeading, message: serverMessage?.message || successMessage, couponCode: c.coupon_code });
+    if (status === "success") return /* @__PURE__ */ jsx(SuccessState, { theme, heading: serverMessage?.heading || successHeading, message: serverMessage?.message || successMessage, couponCode: c.coupon_code, ctaText: c.success_cta_text, ctaUrl: c.success_cta_url });
     return /* @__PURE__ */ jsx("div", { style: { padding: "3.5rem 1.5rem", maxWidth: 560, margin: "0 auto" }, children: [
       /* @__PURE__ */ jsx("style", { children: `@keyframes lc-spin { to { transform: rotate(360deg) } }` }),
       /* @__PURE__ */ jsx("div", { style: { background: theme.surface, border: `1px solid ${theme.fg}12`, padding: "clamp(2rem, 6vw, 3rem)" }, children: [
@@ -1286,12 +1353,13 @@ var WhaleStorefront = (function (exports) {
               animation: "lc-spin 0.8s linear infinite"
             } }),
             buttonText
-          ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { ref: turnstileRef, style: { display: "none" } })
         ] })
       ] })
     ] });
   }
-  function SuccessState({ theme, heading, message, couponCode }) {
+  function SuccessState({ theme, heading, message, couponCode, ctaText, ctaUrl }) {
     return /* @__PURE__ */ jsx("div", { style: { padding: "3.5rem 1.5rem", maxWidth: 560, margin: "0 auto" }, children: /* @__PURE__ */ jsx("div", { style: { background: theme.surface, border: `1px solid ${theme.fg}12`, padding: "clamp(2rem, 6vw, 3rem)", textAlign: "center" }, children: [
       /* @__PURE__ */ jsx("h2", { style: {
         fontSize: "clamp(1.5rem, 5vw, 2rem)",
@@ -1313,7 +1381,30 @@ var WhaleStorefront = (function (exports) {
         fontFamily: "monospace",
         letterSpacing: "0.12em",
         color: theme.accent
-      }, children: couponCode })
+      }, children: couponCode }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            window.location.href = ctaUrl || "/shop";
+          },
+          style: {
+            marginTop: "1.5rem",
+            width: "100%",
+            padding: "0.875rem",
+            background: theme.accent,
+            color: "#fff",
+            border: "none",
+            fontSize: "0.85rem",
+            fontWeight: 500,
+            cursor: "pointer",
+            letterSpacing: "0.08em",
+            textTransform: "uppercase",
+            fontFamily: "inherit"
+          },
+          children: ctaText || "shop now"
+        }
+      )
     ] }) });
   }
 

package/dist/react/index.cjs

@@ -2865,6 +2865,25 @@ function COAModal({ coa, theme, onClose }) {
     /* @__PURE__ */ jsxRuntime.jsx("iframe", { src: coa.url, style: { flex: 1, border: "none", background: "#fff" }, title: "Lab Results" })
   ] });
 }
+var TURNSTILE_SITE_KEY = "0x4AAAAAACwmUPgmyfw6pWfT";
+var TURNSTILE_SCRIPT_URL = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+var turnstilePromise = null;
+function loadTurnstileScript() {
+  if (turnstilePromise) return turnstilePromise;
+  if (typeof window !== "undefined" && window.turnstile) {
+    turnstilePromise = Promise.resolve();
+    return turnstilePromise;
+  }
+  turnstilePromise = new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = TURNSTILE_SCRIPT_URL;
+    script.async = true;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error("Failed to load Turnstile script"));
+    document.head.appendChild(script);
+  });
+  return turnstilePromise;
+}
 function LeadCaptureSection({ section, data, theme, onEvent }) {
   const c = section.content;
   const [firstName, setFirstName] = react.useState("");
@@ -2873,6 +2892,41 @@ function LeadCaptureSection({ section, data, theme, onEvent }) {
   const [status, setStatus] = react.useState("idle");
   const [errorMsg, setErrorMsg] = react.useState("");
   const [serverMessage, setServerMessage] = react.useState(null);
+  const turnstileRef = react.useRef(null);
+  const turnstileToken = react.useRef(null);
+  const turnstileWidgetId = react.useRef(null);
+  const pendingSubmit = react.useRef(null);
+  const onTurnstileToken = react.useCallback((token) => {
+    turnstileToken.current = token;
+    if (pendingSubmit.current) {
+      const cb = pendingSubmit.current;
+      pendingSubmit.current = null;
+      cb();
+    }
+  }, []);
+  react.useEffect(() => {
+    if (typeof window === "undefined") return;
+    let widgetId = null;
+    loadTurnstileScript().then(() => {
+      const el = turnstileRef.current;
+      if (!el || !window.turnstile) return;
+      widgetId = window.turnstile.render(el, {
+        sitekey: TURNSTILE_SITE_KEY,
+        callback: onTurnstileToken,
+        "expired-callback": () => {
+          turnstileToken.current = null;
+        },
+        size: "invisible"
+      });
+      turnstileWidgetId.current = widgetId;
+    }).catch(() => {
+    });
+    return () => {
+      if (widgetId != null && window.turnstile) {
+        window.turnstile.remove(widgetId);
+      }
+    };
+  }, [onTurnstileToken]);
   const gatewayUrl = c.gateway_url || data.gatewayUrl || "https://whale-gateway.fly.dev";
   const storeId = c.store_id || data.store?.id;
   const slug = c.landing_page_slug || data.landing_page?.slug;
@@ -2881,11 +2935,7 @@ function LeadCaptureSection({ section, data, theme, onEvent }) {
   const buttonText = c.button_text || "Claim My Discount";
   const successHeading = c.success_heading || "You\u2019re in!";
   const successMessage = c.success_message || "Check your inbox for the discount code.";
-  async function handleSubmit(e) {
-    e.preventDefault();
-    if (!email || !storeId) return;
-    setStatus("loading");
-    setErrorMsg("");
+  async function submitLead(cfToken) {
     const urlParams = typeof window !== "undefined" ? new URLSearchParams(window.location.search) : null;
     try {
       const res = await fetch(`${gatewayUrl}/v1/stores/${storeId}/storefront/leads`, {
@@ -2907,7 +2957,8 @@ function LeadCaptureSection({ section, data, theme, onEvent }) {
           utm_source: urlParams?.get("utm_source") || void 0,
           utm_medium: urlParams?.get("utm_medium") || void 0,
           utm_campaign: urlParams?.get("utm_campaign") || void 0,
-          utm_content: urlParams?.get("utm_content") || void 0
+          utm_content: urlParams?.get("utm_content") || void 0,
+          cf_turnstile_response: cfToken || void 0
         })
       });
       if (!res.ok) {
@@ -2928,6 +2979,22 @@ function LeadCaptureSection({ section, data, theme, onEvent }) {
       setStatus("error");
     }
   }
+  async function handleSubmit(e) {
+    e.preventDefault();
+    if (!email || !storeId) return;
+    setStatus("loading");
+    setErrorMsg("");
+    if (turnstileToken.current) {
+      return submitLead(turnstileToken.current);
+    }
+    const turnstile = window.turnstile;
+    if (turnstile && turnstileWidgetId.current != null) {
+      pendingSubmit.current = () => submitLead(turnstileToken.current);
+      turnstile.execute(turnstileWidgetId.current);
+    } else {
+      return submitLead(null);
+    }
+  }
   const inputStyle = {
     flex: 1,
     minWidth: 0,
@@ -2942,7 +3009,7 @@ function LeadCaptureSection({ section, data, theme, onEvent }) {
     fontFamily: "inherit",
     transition: "border-color 0.2s"
   };
-  if (status === "success") return /* @__PURE__ */ jsxRuntime.jsx(SuccessState, { theme, heading: serverMessage?.heading || successHeading, message: serverMessage?.message || successMessage, couponCode: c.coupon_code });
+  if (status === "success") return /* @__PURE__ */ jsxRuntime.jsx(SuccessState, { theme, heading: serverMessage?.heading || successHeading, message: serverMessage?.message || successMessage, couponCode: c.coupon_code, ctaText: c.success_cta_text, ctaUrl: c.success_cta_url });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "3.5rem 1.5rem", maxWidth: 560, margin: "0 auto" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@keyframes lc-spin { to { transform: rotate(360deg) } }` }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { background: theme.surface, border: `1px solid ${theme.fg}12`, padding: "clamp(2rem, 6vw, 3rem)" }, children: [
@@ -3021,12 +3088,13 @@ function LeadCaptureSection({ section, data, theme, onEvent }) {
             animation: "lc-spin 0.8s linear infinite"
           } }),
           buttonText
-        ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: turnstileRef, style: { display: "none" } })
       ] })
     ] })
   ] });
 }
-function SuccessState({ theme, heading, message, couponCode }) {
+function SuccessState({ theme, heading, message, couponCode, ctaText, ctaUrl }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "3.5rem 1.5rem", maxWidth: 560, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { background: theme.surface, border: `1px solid ${theme.fg}12`, padding: "clamp(2rem, 6vw, 3rem)", textAlign: "center" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
       fontSize: "clamp(1.5rem, 5vw, 2rem)",
@@ -3048,7 +3116,30 @@ function SuccessState({ theme, heading, message, couponCode }) {
       fontFamily: "monospace",
       letterSpacing: "0.12em",
       color: theme.accent
-    }, children: couponCode })
+    }, children: couponCode }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => {
+          window.location.href = ctaUrl || "/shop";
+        },
+        style: {
+          marginTop: "1.5rem",
+          width: "100%",
+          padding: "0.875rem",
+          background: theme.accent,
+          color: "#fff",
+          border: "none",
+          fontSize: "0.85rem",
+          fontWeight: 500,
+          cursor: "pointer",
+          letterSpacing: "0.08em",
+          textTransform: "uppercase",
+          fontFamily: "inherit"
+        },
+        children: ctaText || "shop now"
+      }
+    )
   ] }) });
 }
 var GOOGLE_G_LG = '<svg width="28" height="28" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59a14.5 14.5 0 010-9.18l-7.98-6.19a24.03 24.03 0 000 21.56l7.98-6.19z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/></svg>';