@neowhale/storefront 0.2.19 → 0.2.20

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-D1XVKpFt.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-BSO263Uv.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-DZwpn_x2.cjs';
+import { P as PixelManager } from '../pixel-manager-DJ9m2FaQ.cjs';
 
 interface WhaleProviderProps extends WhaleStorefrontConfig {
     children: ReactNode;
@@ -257,6 +257,8 @@ declare function useCheckout(): {
         billing_address?: Address;
         shipping_method_id?: string;
         coupon_code?: string;
+        loyalty_reward_id?: string;
+        selected_product_id?: string;
     }) => Promise<CheckoutSession>;
     updateSession: (params: {
         customer_email?: string;
@@ -265,7 +267,10 @@ declare function useCheckout(): {
         shipping_method_id?: string;
         coupon_code?: string;
     }) => Promise<CheckoutSession>;
-    complete: (payment?: PaymentData) => Promise<Order>;
+    complete: (payment?: PaymentData, opts?: {
+        loyalty_reward_id?: string;
+        selected_product_id?: string;
+    }) => Promise<Order>;
     reset: () => void;
 };
 
@@ -308,6 +313,7 @@ declare function useLoyalty(): {
         success: boolean;
         points_remaining: number;
     }>;
+    fetchProductsByCategory: (category: string, locationId: string, tier?: string) => Promise<Product[]>;
 };
 
 declare function useReviews(productId: string | null | undefined): {
@@ -431,8 +437,13 @@ interface SectionTheme {
     fontDisplay?: string;
     fontBody?: string;
 }
+interface ClickTrackingContext {
+    gatewayUrl?: string;
+    code?: string;
+}
 interface SectionData {
     store?: {
+        id?: string;
         name?: string | null;
         logo_url?: string | null;
         tagline?: string | null;
@@ -444,11 +455,16 @@ interface SectionData {
         viewer_url?: string | null;
         document_name: string;
     } | null;
+    gatewayUrl?: string;
+    landing_page?: {
+        slug?: string;
+    } | null;
 }
-declare function SectionRenderer({ section, data, theme, }: {
+declare function SectionRenderer({ section, data, theme, tracking, }: {
     section: LandingSection;
     data: SectionData;
     theme: SectionTheme;
+    tracking?: ClickTrackingContext;
 }): react_jsx_runtime.JSX.Element;
 
 /**
@@ -495,4 +511,4 @@ declare function FingerprintCollector(): null;
 
 declare function SessionRecorderComponent(): null;
 
-export { AnalyticsTracker, type AuthActions, AuthInitializer, type AuthState, type AuthStore, BehavioralTrackerComponent, type CartActions, CartInitializer, type CartState, type CartStore, FingerprintCollector, LandingPage, type LandingPageProps, PixelInitializer, QRLandingPage, type QRLandingPageProps, type SearchParams, SectionRenderer, type SectionTheme, SessionRecorderComponent, WhaleContext, type WhaleContextValue, WhaleProvider, type WhaleProviderProps, useAnalytics, useAuth, useCart, useCartItemCount, useCartTotal, useCategories, useCheckout, useCoupons, useCustomerAnalytics, useCustomerOrders, useDeals, useLocations, useLoyalty, useProduct, useProducts, useRecommendations, useReferral, useReviews, useSearch, useShipping, useWhaleClient, useWishlist };
+export { AnalyticsTracker, type AuthActions, AuthInitializer, type AuthState, type AuthStore, BehavioralTrackerComponent, type CartActions, CartInitializer, type CartState, type CartStore, type ClickTrackingContext, FingerprintCollector, LandingPage, type LandingPageProps, PixelInitializer, QRLandingPage, type QRLandingPageProps, type SearchParams, SectionRenderer, type SectionTheme, SessionRecorderComponent, WhaleContext, type WhaleContextValue, WhaleProvider, type WhaleProviderProps, useAnalytics, useAuth, useCart, useCartItemCount, useCartTotal, useCategories, useCheckout, useCoupons, useCustomerAnalytics, useCustomerOrders, useDeals, useLocations, useLoyalty, useProduct, useProducts, useRecommendations, useReferral, useReviews, useSearch, useShipping, useWhaleClient, useWishlist };

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-D1XVKpFt.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-BSO263Uv.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-C6PAp7vQ.js';
+import { P as PixelManager } from '../pixel-manager-BcL95odX.js';
 
 interface WhaleProviderProps extends WhaleStorefrontConfig {
     children: ReactNode;
@@ -257,6 +257,8 @@ declare function useCheckout(): {
         billing_address?: Address;
         shipping_method_id?: string;
         coupon_code?: string;
+        loyalty_reward_id?: string;
+        selected_product_id?: string;
     }) => Promise<CheckoutSession>;
     updateSession: (params: {
         customer_email?: string;
@@ -265,7 +267,10 @@ declare function useCheckout(): {
         shipping_method_id?: string;
         coupon_code?: string;
     }) => Promise<CheckoutSession>;
-    complete: (payment?: PaymentData) => Promise<Order>;
+    complete: (payment?: PaymentData, opts?: {
+        loyalty_reward_id?: string;
+        selected_product_id?: string;
+    }) => Promise<Order>;
     reset: () => void;
 };
 
@@ -308,6 +313,7 @@ declare function useLoyalty(): {
         success: boolean;
         points_remaining: number;
     }>;
+    fetchProductsByCategory: (category: string, locationId: string, tier?: string) => Promise<Product[]>;
 };
 
 declare function useReviews(productId: string | null | undefined): {
@@ -431,8 +437,13 @@ interface SectionTheme {
     fontDisplay?: string;
     fontBody?: string;
 }
+interface ClickTrackingContext {
+    gatewayUrl?: string;
+    code?: string;
+}
 interface SectionData {
     store?: {
+        id?: string;
         name?: string | null;
         logo_url?: string | null;
         tagline?: string | null;
@@ -444,11 +455,16 @@ interface SectionData {
         viewer_url?: string | null;
         document_name: string;
     } | null;
+    gatewayUrl?: string;
+    landing_page?: {
+        slug?: string;
+    } | null;
 }
-declare function SectionRenderer({ section, data, theme, }: {
+declare function SectionRenderer({ section, data, theme, tracking, }: {
     section: LandingSection;
     data: SectionData;
     theme: SectionTheme;
+    tracking?: ClickTrackingContext;
 }): react_jsx_runtime.JSX.Element;
 
 /**
@@ -495,4 +511,4 @@ declare function FingerprintCollector(): null;
 
 declare function SessionRecorderComponent(): null;
 
-export { AnalyticsTracker, type AuthActions, AuthInitializer, type AuthState, type AuthStore, BehavioralTrackerComponent, type CartActions, CartInitializer, type CartState, type CartStore, FingerprintCollector, LandingPage, type LandingPageProps, PixelInitializer, QRLandingPage, type QRLandingPageProps, type SearchParams, SectionRenderer, type SectionTheme, SessionRecorderComponent, WhaleContext, type WhaleContextValue, WhaleProvider, type WhaleProviderProps, useAnalytics, useAuth, useCart, useCartItemCount, useCartTotal, useCategories, useCheckout, useCoupons, useCustomerAnalytics, useCustomerOrders, useDeals, useLocations, useLoyalty, useProduct, useProducts, useRecommendations, useReferral, useReviews, useSearch, useShipping, useWhaleClient, useWishlist };
+export { AnalyticsTracker, type AuthActions, AuthInitializer, type AuthState, type AuthStore, BehavioralTrackerComponent, type CartActions, CartInitializer, type CartState, type CartStore, type ClickTrackingContext, FingerprintCollector, LandingPage, type LandingPageProps, PixelInitializer, QRLandingPage, type QRLandingPageProps, type SearchParams, SectionRenderer, type SectionTheme, SessionRecorderComponent, WhaleContext, type WhaleContextValue, WhaleProvider, type WhaleProviderProps, useAnalytics, useAuth, useCart, useCartItemCount, useCartTotal, useCategories, useCheckout, useCoupons, useCustomerAnalytics, useCustomerOrders, useDeals, useLocations, useLoyalty, useProduct, useProducts, useRecommendations, useReferral, useReviews, useSearch, useShipping, useWhaleClient, useWishlist };

package/dist/react/index.js

@@ -1,5 +1,5 @@
 import { PixelManager } from '../chunk-PXS2DPVL.js';
-import { resilientSend, WhaleClient } from '../chunk-XHWAUMWS.js';
+import { resilientSend, WhaleClient } from '../chunk-3Q7CPJBA.js';
 import { createContext, useContext, useRef, useCallback, useEffect, useState, useMemo } from 'react';
 import { usePathname } from 'next/navigation';
 import { createStore } from 'zustand/vanilla';
@@ -1859,12 +1859,12 @@ function useCheckout() {
       setLoading(false);
     }
   }, [ctx.client, session]);
-  const complete = useCallback(async (payment) => {
+  const complete = useCallback(async (payment, opts) => {
     if (!session) throw new Error("No active checkout session");
     setLoading(true);
     setError(null);
     try {
-      const order = await ctx.client.completeCheckout(session.id, payment);
+      const order = await ctx.client.completeCheckout(session.id, payment, opts);
       setSession(null);
       return order;
     } catch (err) {
@@ -2018,7 +2018,11 @@ function useLoyalty() {
     await refresh();
     return result;
   }, [customer?.id, ctx.client, refresh]);
-  return { account, rewards, transactions, loading, error, refresh, redeemReward };
+  const fetchProductsByCategory = useCallback(async (category, locationId, tier) => {
+    const res = await ctx.client.listLoyaltyProducts({ category, location_id: locationId, tier });
+    return res.data;
+  }, [ctx.client]);
+  return { account, rewards, transactions, loading, error, refresh, redeemReward, fetchProductsByCategory };
 }
 function useReviews(productId) {
   const ctx = useContext(WhaleContext);
@@ -2409,16 +2413,27 @@ function useReferral() {
     referredBy: status?.referred_by ?? null
   };
 }
+function trackClick(tracking, label, url, position) {
+  if (!tracking?.gatewayUrl || !tracking?.code) return;
+  const body = JSON.stringify({ label, url, position });
+  if (typeof navigator !== "undefined" && navigator.sendBeacon) {
+    navigator.sendBeacon(
+      `${tracking.gatewayUrl}/q/${encodeURIComponent(tracking.code)}/click`,
+      new Blob([body], { type: "application/json" })
+    );
+  }
+}
 function SectionRenderer({
   section,
   data,
-  theme
+  theme,
+  tracking
 }) {
   const [showCOA, setShowCOA] = useState(false);
   const el = (() => {
     switch (section.type) {
       case "hero":
-        return /* @__PURE__ */ jsx(HeroSection, { section, theme });
+        return /* @__PURE__ */ jsx(HeroSection, { section, theme, tracking });
       case "text":
         return /* @__PURE__ */ jsx(TextSection, { section, theme });
       case "image":
@@ -2428,15 +2443,17 @@ function SectionRenderer({
       case "gallery":
         return /* @__PURE__ */ jsx(GallerySection, { section, theme });
       case "cta":
-        return /* @__PURE__ */ jsx(CTASection, { section, theme });
+        return /* @__PURE__ */ jsx(CTASection, { section, theme, tracking });
       case "stats":
         return /* @__PURE__ */ jsx(StatsSection, { section, theme });
       case "product_card":
-        return /* @__PURE__ */ jsx(ProductCardSection, { section, data, theme });
+        return /* @__PURE__ */ jsx(ProductCardSection, { section, data, theme, tracking });
       case "coa_viewer":
-        return /* @__PURE__ */ jsx(COAViewerSection, { section, data, theme, onShowCOA: () => setShowCOA(true) });
+        return /* @__PURE__ */ jsx(COAViewerSection, { section, data, theme, onShowCOA: () => setShowCOA(true), tracking });
       case "social_links":
         return /* @__PURE__ */ jsx(SocialLinksSection, { section, theme });
+      case "lead_capture":
+        return /* @__PURE__ */ jsx(LeadCaptureSection, { section, data, theme });
       case "divider":
         return /* @__PURE__ */ jsx(DividerSection, { theme });
       default:
@@ -2448,7 +2465,7 @@ function SectionRenderer({
     showCOA && data?.coa && /* @__PURE__ */ jsx(COAModal, { coa: data.coa, theme, onClose: () => setShowCOA(false) })
   ] });
 }
-function HeroSection({ section, theme }) {
+function HeroSection({ section, theme, tracking }) {
   const { title, subtitle, background_image, cta_text, cta_url } = section.content;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -2490,6 +2507,7 @@ function HeroSection({ section, theme }) {
             "a",
             {
               href: cta_url,
+              onClick: () => trackClick(tracking, cta_text, cta_url),
               style: {
                 display: "inline-block",
                 padding: "0.875rem 2rem",
@@ -2575,7 +2593,7 @@ function GallerySection({ section, theme }) {
     }
   ) }, i)) }) });
 }
-function CTASection({ section, theme }) {
+function CTASection({ section, theme, tracking }) {
   const { buttons } = section.content;
   if (!buttons || buttons.length === 0) return null;
   return /* @__PURE__ */ jsx("div", { style: { padding: "2rem 1.5rem", maxWidth: 480, margin: "0 auto", display: "flex", flexDirection: "column", gap: "0.75rem" }, children: buttons.map((btn, i) => {
@@ -2584,6 +2602,7 @@ function CTASection({ section, theme }) {
       "a",
       {
         href: btn.url,
+        onClick: () => trackClick(tracking, btn.text, btn.url, i),
         style: {
           display: "block",
           width: "100%",
@@ -2655,7 +2674,7 @@ function StatsSection({ section, theme }) {
     }, children: stat.label })
   ] }, i)) }) });
 }
-function ProductCardSection({ section, data, theme }) {
+function ProductCardSection({ section, data, theme, tracking }) {
   const product = data?.product;
   const c = section.content;
   const name = c.name || product?.name || "";
@@ -2671,6 +2690,7 @@ function ProductCardSection({ section, data, theme }) {
         "a",
         {
           href: url,
+          onClick: () => trackClick(tracking, "View Product", url),
           style: {
             display: "block",
             width: "100%",
@@ -2695,7 +2715,8 @@ function COAViewerSection({
   section,
   data,
   theme,
-  onShowCOA
+  onShowCOA,
+  tracking
 }) {
   const coa = data?.coa;
   const c = section.content;
@@ -2716,10 +2737,200 @@ function COAViewerSection({
     display: "block",
     boxSizing: "border-box"
   };
+  const buttonLabel = c.button_text || "View Lab Results";
   if (coa.viewer_url) {
-    return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 480, margin: "0 auto" }, children: /* @__PURE__ */ jsx("a", { href: coa.viewer_url, target: "_blank", rel: "noopener noreferrer", style: buttonStyle, children: c.button_text || "View Lab Results" }) });
+    return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 480, margin: "0 auto" }, children: /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: coa.viewer_url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        onClick: () => trackClick(tracking, buttonLabel, coa.viewer_url),
+        style: buttonStyle,
+        children: buttonLabel
+      }
+    ) });
   }
-  return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 480, margin: "0 auto" }, children: /* @__PURE__ */ jsx("button", { onClick: onShowCOA, style: buttonStyle, children: c.button_text || "View Lab Results" }) });
+  return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 480, margin: "0 auto" }, children: /* @__PURE__ */ jsx("button", { onClick: () => {
+    trackClick(tracking, buttonLabel, coa.url);
+    onShowCOA();
+  }, style: buttonStyle, children: buttonLabel }) });
+}
+function LeadCaptureSection({ section, data, theme }) {
+  const c = section.content;
+  const [firstName, setFirstName] = useState("");
+  const [email, setEmail] = useState("");
+  const [status, setStatus] = useState("idle");
+  const [errorMsg, setErrorMsg] = useState("");
+  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;
+  async function handleSubmit(e) {
+    e.preventDefault();
+    if (!email || !storeId) return;
+    setStatus("loading");
+    setErrorMsg("");
+    try {
+      const res = await fetch(`${gatewayUrl}/v1/stores/${storeId}/storefront/leads`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          email,
+          first_name: firstName || void 0,
+          source: c.source || "landing_page",
+          landing_page_slug: slug || void 0,
+          tags: c.tags || void 0
+        })
+      });
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        throw new Error(body?.error?.message || "Something went wrong. Please try again.");
+      }
+      setStatus("success");
+    } catch (err) {
+      setErrorMsg(err instanceof Error ? err.message : "Something went wrong. Please try again.");
+      setStatus("error");
+    }
+  }
+  const heading = c.heading || "get 10% off your first visit.";
+  const subtitle = c.subtitle || "drop your email and we will send you the code.";
+  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.";
+  const inputStyle = {
+    flex: 1,
+    minWidth: 0,
+    padding: "0.875rem 1rem",
+    background: theme.surface,
+    border: `1px solid ${theme.fg}15`,
+    color: theme.fg,
+    fontSize: "0.95rem",
+    fontWeight: 300,
+    outline: "none",
+    boxSizing: "border-box",
+    fontFamily: "inherit",
+    transition: "border-color 0.2s"
+  };
+  return /* @__PURE__ */ jsxs("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: status === "success" ? /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
+      /* @__PURE__ */ jsx("h2", { style: {
+        fontSize: "clamp(1.5rem, 5vw, 2rem)",
+        fontWeight: 300,
+        fontFamily: theme.fontDisplay || "inherit",
+        margin: "0 0 0.75rem",
+        lineHeight: 1.2,
+        letterSpacing: "-0.02em",
+        color: theme.fg
+      }, children: successHeading }),
+      /* @__PURE__ */ jsx("p", { style: {
+        fontSize: "0.9rem",
+        color: `${theme.fg}99`,
+        margin: "0 0 1.5rem",
+        lineHeight: 1.6,
+        fontWeight: 300
+      }, children: successMessage }),
+      c.coupon_code && /* @__PURE__ */ jsx("div", { style: {
+        display: "inline-block",
+        padding: "0.75rem 2rem",
+        background: `${theme.fg}08`,
+        border: `1px dashed ${theme.fg}30`,
+        fontSize: "clamp(1.25rem, 4vw, 1.75rem)",
+        fontWeight: 500,
+        fontFamily: "monospace",
+        letterSpacing: "0.12em",
+        color: theme.accent
+      }, children: c.coupon_code })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", marginBottom: "clamp(1.5rem, 4vw, 2rem)" }, children: [
+        /* @__PURE__ */ jsx("h2", { style: {
+          fontSize: "clamp(1.5rem, 5vw, 2.25rem)",
+          fontWeight: 300,
+          fontFamily: theme.fontDisplay || "inherit",
+          margin: "0 0 0.5rem",
+          lineHeight: 1.15,
+          letterSpacing: "-0.02em",
+          color: theme.fg
+        }, children: heading }),
+        /* @__PURE__ */ jsx("p", { style: {
+          fontSize: "0.85rem",
+          color: theme.accent,
+          margin: 0,
+          lineHeight: 1.6,
+          textTransform: "uppercase",
+          letterSpacing: "0.15em"
+        }, children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.75rem", flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              placeholder: "First name",
+              value: firstName,
+              onChange: (e) => setFirstName(e.target.value),
+              style: inputStyle
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "email",
+              placeholder: "Email address",
+              value: email,
+              onChange: (e) => setEmail(e.target.value),
+              required: true,
+              style: inputStyle
+            }
+          )
+        ] }),
+        status === "error" && errorMsg && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.8rem", color: "#e55", margin: 0, fontWeight: 400 }, children: errorMsg }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "submit",
+            disabled: status === "loading",
+            style: {
+              width: "100%",
+              padding: "0.875rem",
+              background: theme.fg,
+              color: theme.bg,
+              border: "none",
+              fontSize: "0.85rem",
+              fontWeight: 500,
+              cursor: status === "loading" ? "wait" : "pointer",
+              letterSpacing: "0.08em",
+              textTransform: "uppercase",
+              fontFamily: "inherit",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "0.5rem",
+              opacity: status === "loading" ? 0.7 : 1,
+              transition: "opacity 0.2s"
+            },
+            children: [
+              status === "loading" && /* @__PURE__ */ jsx("span", { style: {
+                display: "inline-block",
+                width: 16,
+                height: 16,
+                border: `2px solid ${theme.bg}40`,
+                borderTopColor: theme.bg,
+                borderRadius: "50%",
+                animation: "lc-spin 0.8s linear infinite"
+              } }),
+              buttonText
+            ]
+          }
+        )
+      ] })
+    ] }) })
+  ] });
 }
 function SocialLinksSection({ section, theme }) {
   const { links } = section.content;
@@ -2842,15 +3053,16 @@ function QRLandingPage({
   const logoUrl = data.qr_code.logo_url || data.store?.logo_url;
   const storeName = data.store?.name;
   const sorted = [...sections].sort((a, b) => a.order - b.order);
+  const tracking = { gatewayUrl, code };
   return /* @__PURE__ */ jsxs("div", { style: { minHeight: "100dvh", background: theme.bg, color: theme.fg, fontFamily }, children: [
     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: storeName || "Store", style: { height: 40, objectFit: "contain" } }) }),
     sorted.map((section) => {
-      const defaultRenderer = () => /* @__PURE__ */ jsx(SectionRenderer, { section, data, theme }, section.id);
+      const defaultRenderer = () => /* @__PURE__ */ jsx(SectionRenderer, { section, data, theme, tracking }, section.id);
       if (renderSection) {
         return /* @__PURE__ */ jsx("div", { children: renderSection(section, defaultRenderer) }, section.id);
       }
-      return /* @__PURE__ */ jsx(SectionRenderer, { section, data, theme }, section.id);
+      return /* @__PURE__ */ jsx(SectionRenderer, { section, data, theme, tracking }, section.id);
     }),
     storeName && /* @__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: [
       storeName,
@@ -3100,10 +3312,11 @@ 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, renderSection });
+  return /* @__PURE__ */ jsx(PageLayout, { data, gatewayUrl, renderSection });
 }
 function PageLayout({
   data,
+  gatewayUrl,
   renderSection
 }) {
   const { landing_page: lp, store } = data;
@@ -3119,15 +3332,16 @@ 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 } };
   return /* @__PURE__ */ jsxs("div", { style: { minHeight: "100dvh", background: theme.bg, color: theme.fg, fontFamily }, children: [
     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, theme }, section.id);
+      const defaultRenderer = () => /* @__PURE__ */ jsx(SectionRenderer, { section, data: sectionData, theme }, section.id);
       if (renderSection) {
         return /* @__PURE__ */ jsx("div", { children: renderSection(section, defaultRenderer) }, section.id);
       }
-      return /* @__PURE__ */ jsx(SectionRenderer, { section, data, theme }, section.id);
+      return /* @__PURE__ */ jsx(SectionRenderer, { section, data: sectionData, theme }, 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 ",