@neowhale/storefront 0.2.28 → 0.2.30

package/dist/react/index.d.cts

@@ -1,11 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { F as WhaleStorefrontConfig, r as Product, P as PaymentData, O as Order, a as CartItem, T as TaxBreakdown, W as WhaleClient, f as Customer, E as EventType, g as CustomerAnalytics, d as CheckoutSession, A as Address, b as Category, c as CategoryTreeNode, l as LoyaltyAccount, m as LoyaltyReward, n as LoyaltyTransaction, v as Review, w as ReviewSummary, G as WishlistItem, R as Recommendation, k as Location, x as ShippingMethod, y as ShippingRate, D as DealValidation, C as Cart, H as ReferralStatus, I as ReferralEnrollment, i as LandingSection, Q as QRLandingData, h as LandingPageRenderData } from '../client-BWUWE_7m.cjs';
+import { F as WhaleStorefrontConfig, r as Product, P as PaymentData, O as Order, a as CartItem, T as TaxBreakdown, W as WhaleClient, f as Customer, E as EventType, g as CustomerAnalytics, d as CheckoutSession, A as Address, b as Category, c as CategoryTreeNode, l as LoyaltyAccount, m as LoyaltyReward, n as LoyaltyTransaction, v as Review, w as ReviewSummary, G as WishlistItem, R as Recommendation, k as Location, x as ShippingMethod, y as ShippingRate, D as DealValidation, C as Cart, H as ReferralStatus, I as ReferralEnrollment, i as LandingSection, Q as QRLandingData, h as LandingPageRenderData } from '../client-CwCSPAHp.cjs';
 import { ThemeTokens } from '@neowhale/ui';
 import * as zustand_middleware from 'zustand/middleware';
 import * as zustand from 'zustand';
-import { P as PixelManager } from '../pixel-manager-BRPU9JKk.cjs';
+import { P as PixelManager } from '../pixel-manager-ti1xc1eC.cjs';
 
 interface WhaleProviderProps extends WhaleStorefrontConfig {
     children: ReactNode;
@@ -429,8 +429,9 @@ interface LandingPageProps {
     renderSection?: (section: LandingSection, defaultRenderer: () => React.ReactNode) => React.ReactNode;
     onDataLoaded?: (data: LandingPageRenderData) => void;
     onError?: (error: Error) => void;
+    onEvent?: (event: string, data: Record<string, unknown>) => void;
 }
-declare function LandingPage({ slug, gatewayUrl, renderSection, onDataLoaded, onError, }: LandingPageProps): react_jsx_runtime.JSX.Element | null;
+declare function LandingPage({ slug, gatewayUrl, renderSection, onDataLoaded, onError, onEvent, }: LandingPageProps): react_jsx_runtime.JSX.Element | null;
 
 interface SectionTheme {
     bg: string;
@@ -464,11 +465,12 @@ interface SectionData {
         slug?: string;
     } | null;
 }
-declare function SectionRenderer({ section, data, theme, tracking, }: {
+declare function SectionRenderer({ section, data, theme, tracking, onEvent, }: {
     section: LandingSection;
     data: SectionData;
     theme: SectionTheme;
     tracking?: ClickTrackingContext;
+    onEvent?: (event: string, data: Record<string, unknown>) => void;
 }): react_jsx_runtime.JSX.Element;
 
 /**

package/dist/react/index.d.ts

@@ -1,11 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { F as WhaleStorefrontConfig, r as Product, P as PaymentData, O as Order, a as CartItem, T as TaxBreakdown, W as WhaleClient, f as Customer, E as EventType, g as CustomerAnalytics, d as CheckoutSession, A as Address, b as Category, c as CategoryTreeNode, l as LoyaltyAccount, m as LoyaltyReward, n as LoyaltyTransaction, v as Review, w as ReviewSummary, G as WishlistItem, R as Recommendation, k as Location, x as ShippingMethod, y as ShippingRate, D as DealValidation, C as Cart, H as ReferralStatus, I as ReferralEnrollment, i as LandingSection, Q as QRLandingData, h as LandingPageRenderData } from '../client-BWUWE_7m.js';
+import { F as WhaleStorefrontConfig, r as Product, P as PaymentData, O as Order, a as CartItem, T as TaxBreakdown, W as WhaleClient, f as Customer, E as EventType, g as CustomerAnalytics, d as CheckoutSession, A as Address, b as Category, c as CategoryTreeNode, l as LoyaltyAccount, m as LoyaltyReward, n as LoyaltyTransaction, v as Review, w as ReviewSummary, G as WishlistItem, R as Recommendation, k as Location, x as ShippingMethod, y as ShippingRate, D as DealValidation, C as Cart, H as ReferralStatus, I as ReferralEnrollment, i as LandingSection, Q as QRLandingData, h as LandingPageRenderData } from '../client-CwCSPAHp.js';
 import { ThemeTokens } from '@neowhale/ui';
 import * as zustand_middleware from 'zustand/middleware';
 import * as zustand from 'zustand';
-import { P as PixelManager } from '../pixel-manager-CJaD49Xb.js';
+import { P as PixelManager } from '../pixel-manager-LiLpBmPy.js';
 
 interface WhaleProviderProps extends WhaleStorefrontConfig {
     children: ReactNode;
@@ -429,8 +429,9 @@ interface LandingPageProps {
     renderSection?: (section: LandingSection, defaultRenderer: () => React.ReactNode) => React.ReactNode;
     onDataLoaded?: (data: LandingPageRenderData) => void;
     onError?: (error: Error) => void;
+    onEvent?: (event: string, data: Record<string, unknown>) => void;
 }
-declare function LandingPage({ slug, gatewayUrl, renderSection, onDataLoaded, onError, }: LandingPageProps): react_jsx_runtime.JSX.Element | null;
+declare function LandingPage({ slug, gatewayUrl, renderSection, onDataLoaded, onError, onEvent, }: LandingPageProps): react_jsx_runtime.JSX.Element | null;
 
 interface SectionTheme {
     bg: string;
@@ -464,11 +465,12 @@ interface SectionData {
         slug?: string;
     } | null;
 }
-declare function SectionRenderer({ section, data, theme, tracking, }: {
+declare function SectionRenderer({ section, data, theme, tracking, onEvent, }: {
     section: LandingSection;
     data: SectionData;
     theme: SectionTheme;
     tracking?: ClickTrackingContext;
+    onEvent?: (event: string, data: Record<string, unknown>) => void;
 }): react_jsx_runtime.JSX.Element;
 
 /**

package/dist/react/index.js

@@ -1,4 +1,4 @@
-import { PixelManager } from '../chunk-PXS2DPVL.js';
+import { PixelManager } from '../chunk-MZO7BCGU.js';
 import { resilientSend, WhaleClient } from '../chunk-WNZOA4FB.js';
 import { createContext, useContext, useRef, useCallback, useEffect, useState, useMemo } from 'react';
 import { usePathname } from 'next/navigation';
@@ -2452,6 +2452,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] = useState(0);
+  const raf = useRef(0);
+  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 = useRef(null);
+  const [visible, setVisible] = useState(false);
+  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__ */ jsxs("span", { ref, children: [
+    prefix,
+    display,
+    suffix
+  ] });
+}
+function AnimatedText({ text }) {
+  const parts = text.split(NUM_PATTERN);
+  return /* @__PURE__ */ jsx(Fragment, { children: parts.map(
+    (part, i) => NUM_PATTERN.test(part) ? /* @__PURE__ */ 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 });
@@ -2466,13 +2528,14 @@ function SectionRenderer({
   section,
   data,
   theme,
-  tracking
+  tracking,
+  onEvent
 }) {
   const [showCOA, setShowCOA] = useState(false);
   const el = (() => {
     switch (section.type) {
       case "hero":
-        return /* @__PURE__ */ jsx(HeroSection, { section, theme, tracking });
+        return /* @__PURE__ */ jsx(HeroSection, { section, theme, tracking, onEvent });
       case "text":
         return /* @__PURE__ */ jsx(TextSection, { section, theme });
       case "image":
@@ -2482,7 +2545,7 @@ function SectionRenderer({
       case "gallery":
         return /* @__PURE__ */ jsx(GallerySection, { section, theme });
       case "cta":
-        return /* @__PURE__ */ jsx(CTASection, { section, theme, tracking });
+        return /* @__PURE__ */ jsx(CTASection, { section, theme, tracking, onEvent });
       case "stats":
         return /* @__PURE__ */ jsx(StatsSection, { section, theme });
       case "product_card":
@@ -2492,7 +2555,7 @@ function SectionRenderer({
       case "social_links":
         return /* @__PURE__ */ jsx(SocialLinksSection, { section, theme });
       case "lead_capture":
-        return /* @__PURE__ */ jsx(LeadCaptureSection, { section, data, theme });
+        return /* @__PURE__ */ jsx(LeadCaptureSection, { section, data, theme, onEvent });
       case "divider":
         return /* @__PURE__ */ jsx(DividerSection, { theme });
       default:
@@ -2504,7 +2567,7 @@ function SectionRenderer({
     showCOA && data?.coa && /* @__PURE__ */ jsx(COAModal, { coa: data.coa, theme, onClose: () => setShowCOA(false) })
   ] });
 }
-function HeroSection({ section, theme, tracking }) {
+function HeroSection({ section, theme, tracking, onEvent }) {
   const { title, subtitle, background_image, cta_text, cta_url } = section.content;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -2533,7 +2596,7 @@ function HeroSection({ section, theme, tracking }) {
             lineHeight: 1.15,
             letterSpacing: "-0.02em",
             color: theme.fg
-          }, children: title }),
+          }, children: /* @__PURE__ */ jsx(AnimatedText, { text: title }) }),
           subtitle && /* @__PURE__ */ jsx("p", { style: {
             fontSize: "0.85rem",
             color: theme.accent,
@@ -2546,7 +2609,10 @@ function HeroSection({ section, theme, tracking }) {
             "a",
             {
               href: cta_url,
-              onClick: () => trackClick(tracking, cta_text, cta_url),
+              onClick: () => {
+                trackClick(tracking, cta_text, cta_url);
+                onEvent?.("cta_click", { label: cta_text, url: cta_url });
+              },
               style: {
                 display: "inline-block",
                 padding: "0.875rem 2rem",
@@ -2632,7 +2698,7 @@ function GallerySection({ section, theme }) {
     }
   ) }, i)) }) });
 }
-function CTASection({ section, theme, tracking }) {
+function CTASection({ section, theme, tracking, onEvent }) {
   const { title, subtitle, buttons } = section.content;
   if (!buttons || buttons.length === 0) return null;
   return /* @__PURE__ */ jsxs("div", { style: { padding: "2rem 1.5rem", maxWidth: 480, margin: "0 auto", display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
@@ -2661,7 +2727,10 @@ function CTASection({ section, theme, tracking }) {
         "a",
         {
           href: btn.url,
-          onClick: () => trackClick(tracking, btn.text, btn.url, i),
+          onClick: () => {
+            trackClick(tracking, btn.text, btn.url, i);
+            onEvent?.("cta_click", { label: btn.text, url: btn.url });
+          },
           style: {
             display: "block",
             width: "100%",
@@ -2702,7 +2771,7 @@ function StatsSection({ section, theme }) {
           letterSpacing: "0.15em",
           color: `${theme.fg}66`
         }, children: stat.label }),
-        /* @__PURE__ */ jsx("span", { style: { fontSize: 14, fontWeight: 300, color: `${theme.fg}CC` }, children: stat.value })
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 14, fontWeight: 300, color: `${theme.fg}CC` }, children: /* @__PURE__ */ jsx(AnimatedText, { text: stat.value }) })
       ] }),
       i < stats.length - 1 && /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${theme.fg}0A`, margin: 0 } })
     ] }, i)) });
@@ -2723,7 +2792,7 @@ function StatsSection({ section, theme }) {
       fontWeight: 300,
       lineHeight: 1,
       color: theme.fg
-    }, children: stat.value }),
+    }, children: /* @__PURE__ */ jsx(AnimatedText, { text: stat.value }) }),
     /* @__PURE__ */ jsx("div", { style: {
       fontSize: 11,
       fontWeight: 500,
@@ -2816,7 +2885,7 @@ function COAViewerSection({
     onShowCOA();
   }, style: buttonStyle, children: buttonLabel }) });
 }
-function LeadCaptureSection({ section, data, theme }) {
+function LeadCaptureSection({ section, data, theme, onEvent }) {
   const c = section.content;
   const [firstName, setFirstName] = useState("");
   const [email, setEmail] = useState("");
@@ -2853,6 +2922,7 @@ function LeadCaptureSection({ section, data, theme }) {
         throw new Error(body?.error?.message || "Something went wrong. Please try again.");
       }
       setStatus("success");
+      onEvent?.("lead", { email, first_name: firstName || void 0, source: c.source || "landing_page", landing_page_slug: slug || void 0 });
     } catch (err) {
       setErrorMsg(err instanceof Error ? err.message : "Something went wrong. Please try again.");
       setStatus("error");
@@ -3389,7 +3459,8 @@ function LandingPage({
   gatewayUrl = "https://whale-gateway.fly.dev",
   renderSection,
   onDataLoaded,
-  onError
+  onError,
+  onEvent
 }) {
   const [state, setState] = useState("loading");
   const [data, setData] = useState(null);
@@ -3437,12 +3508,13 @@ function LandingPage({
   if (state === "expired") return /* @__PURE__ */ jsx(DefaultExpired2, {});
   if (state === "error") return /* @__PURE__ */ jsx(DefaultError2, { message: errorMsg });
   if (!data) return null;
-  return /* @__PURE__ */ jsx(PageLayout, { data, gatewayUrl, renderSection });
+  return /* @__PURE__ */ jsx(PageLayout, { data, gatewayUrl, renderSection, onEvent });
 }
 function PageLayout({
   data,
   gatewayUrl,
-  renderSection
+  renderSection,
+  onEvent
 }) {
   const { landing_page: lp, store } = data;
   const theme = {
@@ -3462,11 +3534,11 @@ function PageLayout({
     lp.custom_css && /* @__PURE__ */ jsx("style", { children: lp.custom_css }),
     logoUrl && /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx("img", { src: logoUrl, alt: store?.name || "Store", style: { height: 40, objectFit: "contain" } }) }),
     sorted.map((section) => {
-      const defaultRenderer = () => /* @__PURE__ */ jsx(SectionRenderer, { section, data: sectionData, theme }, section.id);
+      const defaultRenderer = () => /* @__PURE__ */ jsx(SectionRenderer, { section, data: sectionData, theme, onEvent }, section.id);
       if (renderSection) {
         return /* @__PURE__ */ jsx("div", { children: renderSection(section, defaultRenderer) }, section.id);
       }
-      return /* @__PURE__ */ jsx(SectionRenderer, { section, data: sectionData, theme }, section.id);
+      return /* @__PURE__ */ jsx(SectionRenderer, { section, data: sectionData, theme, onEvent }, section.id);
     }),
     store?.name && /* @__PURE__ */ jsx("div", { style: { padding: "2rem 1.5rem", borderTop: `1px solid ${theme.surface}`, textAlign: "center" }, children: /* @__PURE__ */ jsxs("p", { style: { fontSize: "0.75rem", color: theme.muted, margin: 0 }, children: [
       "Powered by ",