@neowhale/storefront 0.2.57 → 0.2.59

package/dist/react/index.js

@@ -2304,6 +2304,8 @@ function HeroSection({ section, theme, tracking, onEvent, data }) {
           onSubmit: handleSubmit,
           successHeading: c.inline_form.success_heading || "you're in.",
           successMessage: c.inline_form.success_message || "check your inbox.",
+          successCtaText: c.inline_form.success_cta_text,
+          successCtaUrl: c.inline_form.success_cta_url,
           submitText: c.inline_form.button_text || "send my code",
           theme,
           onEvent,
@@ -2335,12 +2337,36 @@ function HeroSection({ section, theme, tracking, onEvent, data }) {
     ] })
   ] });
 }
-function HeroInlineForm({ ctaText, formOpen, setFormOpen, firstName, setFirstName, email, setEmail, status, errorMsg, onSubmit, successHeading, successMessage, submitText, theme, onEvent, tracking }) {
+function HeroInlineForm({ ctaText, formOpen, setFormOpen, firstName, setFirstName, email, setEmail, status, errorMsg, onSubmit, successHeading, successMessage, successCtaText, successCtaUrl, submitText, theme, onEvent, tracking }) {
   const formMaxW = "min(480px, 90vw)";
   if (status === "success") {
     return /* @__PURE__ */ jsxs("div", { style: { maxWidth: formMaxW, margin: "0 auto", padding: "1.5rem 2rem", background: `${theme.fg}06`, border: `1px solid ${theme.fg}10` }, children: [
       /* @__PURE__ */ jsx("p", { style: { fontSize: "clamp(1rem, 3vw, 1.25rem)", fontWeight: 300, color: theme.fg, margin: "0 0 0.375rem", fontFamily: theme.fontDisplay || "inherit" }, children: successHeading }),
-      /* @__PURE__ */ jsx("p", { style: { fontSize: "0.85rem", color: `${theme.fg}70`, margin: 0, lineHeight: 1.5 }, children: successMessage })
+      /* @__PURE__ */ jsx("p", { style: { fontSize: "0.85rem", color: `${theme.fg}70`, margin: 0, lineHeight: 1.5 }, children: successMessage }),
+      successCtaUrl && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            window.location.href = successCtaUrl;
+            onEvent?.("cta_click", { label: successCtaText || "shop now", url: successCtaUrl });
+          },
+          style: {
+            marginTop: "1rem",
+            width: "100%",
+            padding: "0.875rem",
+            background: theme.accent || theme.fg,
+            color: "#fff",
+            border: "none",
+            fontSize: "0.85rem",
+            fontWeight: 500,
+            cursor: "pointer",
+            letterSpacing: "0.08em",
+            textTransform: "uppercase",
+            fontFamily: "inherit"
+          },
+          children: successCtaText || "shop now"
+        }
+      )
     ] });
   }
   if (!formOpen) {
@@ -2863,6 +2889,25 @@ function COAModal({ coa, theme, onClose }) {
     /* @__PURE__ */ 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] = useState("");
@@ -2871,6 +2916,41 @@ function LeadCaptureSection({ section, data, theme, onEvent }) {
   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;
@@ -2879,11 +2959,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`, {
@@ -2905,7 +2981,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) {
@@ -2926,6 +3003,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,
@@ -3019,7 +3112,8 @@ function LeadCaptureSection({ section, data, theme, onEvent }) {
             animation: "lc-spin 0.8s linear infinite"
           } }),
           buttonText
-        ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { ref: turnstileRef, style: { display: "none" } })
       ] })
     ] })
   ] });