@neowhale/storefront 0.2.29 → 0.2.31

package/dist/react/index.cjs

@@ -555,7 +555,9 @@ function useAnalytics() {
     /** Whether tracking is globally enabled for this storefront */
     trackingEnabled,
     /** Configured recording sample rate (0–1) for behavioral session replays */
-    recordingRate: config.recordingRate
+    recordingRate: config.recordingRate,
+    /** Stable visitor ID for cross-session attribution */
+    visitorId: getVisitorId(config.storagePrefix)
   };
 }
 function useAuth() {
@@ -2454,6 +2456,68 @@ function useReferral() {
     referredBy: status?.referred_by ?? null
   };
 }
+var NUM_PATTERN = /(\$?[\d,]+\.?\d*[+★%]?)/g;
+function easeOutQuart(t) {
+  return 1 - Math.pow(1 - t, 4);
+}
+function useCountUp(target, duration, start) {
+  const [value, setValue] = react.useState(0);
+  const raf = react.useRef(0);
+  react.useEffect(() => {
+    if (!start) return;
+    const t0 = performance.now();
+    function tick(now2) {
+      const elapsed = now2 - t0;
+      const progress = Math.min(elapsed / duration, 1);
+      setValue(Math.round(easeOutQuart(progress) * target));
+      if (progress < 1) raf.current = requestAnimationFrame(tick);
+    }
+    raf.current = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf.current);
+  }, [target, duration, start]);
+  return value;
+}
+function AnimatedNumber({ raw }) {
+  const ref = react.useRef(null);
+  const [visible, setVisible] = react.useState(false);
+  react.useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof IntersectionObserver === "undefined") {
+      setVisible(true);
+      return;
+    }
+    const obs = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) {
+        setVisible(true);
+        obs.disconnect();
+      }
+    }, { threshold: 0.3 });
+    obs.observe(el);
+    return () => obs.disconnect();
+  }, []);
+  const prefix = raw.startsWith("$") ? "$" : "";
+  const suffix = raw.match(/[+★%]$/)?.[0] || "";
+  const numeric = parseFloat(raw.replace(/[\$,+★%]/g, ""));
+  const hasCommas = raw.includes(",");
+  const decimals = raw.includes(".") ? raw.split(".")[1]?.replace(/[+★%]/g, "").length || 0 : 0;
+  const count = useCountUp(
+    decimals > 0 ? Math.round(numeric * Math.pow(10, decimals)) : numeric,
+    1400,
+    visible
+  );
+  const display = decimals > 0 ? (count / Math.pow(10, decimals)).toFixed(decimals) : hasCommas ? count.toLocaleString() : String(count);
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, children: [
+    prefix,
+    display,
+    suffix
+  ] });
+}
+function AnimatedText({ text }) {
+  const parts = text.split(NUM_PATTERN);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: parts.map(
+    (part, i) => NUM_PATTERN.test(part) ? /* @__PURE__ */ jsxRuntime.jsx(AnimatedNumber, { raw: part }, i) : part
+  ) });
+}
 function trackClick(tracking, label, url, position) {
   if (!tracking?.gatewayUrl || !tracking?.code) return;
   const body = JSON.stringify({ label, url, position });
@@ -2536,7 +2600,7 @@ function HeroSection({ section, theme, tracking, onEvent }) {
             lineHeight: 1.15,
             letterSpacing: "-0.02em",
             color: theme.fg
-          }, children: title }),
+          }, children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedText, { text: title }) }),
           subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
             fontSize: "0.85rem",
             color: theme.accent,
@@ -2711,7 +2775,7 @@ function StatsSection({ section, theme }) {
           letterSpacing: "0.15em",
           color: `${theme.fg}66`
         }, children: stat.label }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 14, fontWeight: 300, color: `${theme.fg}CC` }, children: stat.value })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 14, fontWeight: 300, color: `${theme.fg}CC` }, children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedText, { text: stat.value }) })
       ] }),
       i < stats.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${theme.fg}0A`, margin: 0 } })
     ] }, i)) });
@@ -2732,7 +2796,7 @@ function StatsSection({ section, theme }) {
       fontWeight: 300,
       lineHeight: 1,
       color: theme.fg
-    }, children: stat.value }),
+    }, children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedText, { text: stat.value }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
       fontSize: 11,
       fontWeight: 500,
@@ -2840,6 +2904,8 @@ function LeadCaptureSection({ section, data, theme, onEvent }) {
     if (!email || !storeId) return;
     setStatus("loading");
     setErrorMsg("");
+    const urlParams = typeof window !== "undefined" ? new URLSearchParams(window.location.search) : null;
+    const analyticsData = data.analyticsContext;
     try {
       const res = await fetch(`${gatewayUrl}/v1/stores/${storeId}/storefront/leads`, {
         method: "POST",
@@ -2854,7 +2920,13 @@ function LeadCaptureSection({ section, data, theme, onEvent }) {
             const t = [...c.tags || []];
             if (newsletterOptIn) t.push(c.newsletter_tag || "newsletter-subscriber");
             return t.length > 0 ? t : void 0;
-          })()
+          })(),
+          visitor_id: analyticsData?.visitorId || void 0,
+          session_id: analyticsData?.sessionId || void 0,
+          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
         })
       });
       if (!res.ok) {
@@ -3400,7 +3472,8 @@ function LandingPage({
   renderSection,
   onDataLoaded,
   onError,
-  onEvent
+  onEvent,
+  analyticsContext
 }) {
   const [state, setState] = react.useState("loading");
   const [data, setData] = react.useState(null);
@@ -3448,13 +3521,14 @@ function LandingPage({
   if (state === "expired") return /* @__PURE__ */ jsxRuntime.jsx(DefaultExpired2, {});
   if (state === "error") return /* @__PURE__ */ jsxRuntime.jsx(DefaultError2, { message: errorMsg });
   if (!data) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(PageLayout, { data, gatewayUrl, renderSection, onEvent });
+  return /* @__PURE__ */ jsxRuntime.jsx(PageLayout, { data, gatewayUrl, renderSection, onEvent, analyticsContext });
 }
 function PageLayout({
   data,
   gatewayUrl,
   renderSection,
-  onEvent
+  onEvent,
+  analyticsContext
 }) {
   const { landing_page: lp, store } = data;
   const theme = {
@@ -3469,7 +3543,7 @@ function PageLayout({
   const fontFamily = lp.font_family || theme.fontDisplay || "system-ui, -apple-system, sans-serif";
   const logoUrl = store?.logo_url;
   const sorted = [...lp.sections].sort((a, b) => a.order - b.order);
-  const sectionData = { ...data, gatewayUrl, landing_page: { slug: lp.slug } };
+  const sectionData = { ...data, gatewayUrl, landing_page: { slug: lp.slug }, analyticsContext };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { minHeight: "100dvh", background: theme.bg, color: theme.fg, fontFamily }, children: [
     lp.custom_css && /* @__PURE__ */ jsxRuntime.jsx("style", { children: lp.custom_css }),
     logoUrl && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "1.5rem", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoUrl, alt: store?.name || "Store", style: { height: 40, objectFit: "contain" } }) }),