@neowhale/storefront 0.2.19 → 0.2.20

package/dist/react/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunk7KXJLHGA_cjs = require('../chunk-7KXJLHGA.cjs');
-var chunkCQCCXDUS_cjs = require('../chunk-CQCCXDUS.cjs');
+var chunkVAA2KKCH_cjs = require('../chunk-VAA2KKCH.cjs');
 var react = require('react');
 var navigation = require('next/navigation');
 var vanilla = require('zustand/vanilla');
@@ -1027,7 +1027,7 @@ function BehavioralTrackerComponent({ pathname }) {
       const baseUrl = config.proxyPath;
       const endpoint = `${baseUrl}/v1/stores/${config.storeId}/storefront/behavioral`;
       const sendBatch = async (batch) => {
-        await chunkCQCCXDUS_cjs.resilientSend(endpoint, batch, {
+        await chunkVAA2KKCH_cjs.resilientSend(endpoint, batch, {
           "Content-Type": "application/json",
           "x-api-key": config.apiKey
         });
@@ -1213,7 +1213,7 @@ function FingerprintCollector() {
     collectFingerprint().then(async (fp) => {
       const baseUrl = config.proxyPath;
       const url = `${baseUrl}/v1/stores/${config.storeId}/storefront/fingerprints`;
-      await chunkCQCCXDUS_cjs.resilientSend(url, fp, {
+      await chunkVAA2KKCH_cjs.resilientSend(url, fp, {
         "Content-Type": "application/json",
         "x-api-key": config.apiKey
       }).catch(() => {
@@ -1594,7 +1594,7 @@ function SessionRecorderComponent() {
       const sid = sessionId;
       const recorder = new SessionRecorder({
         sendChunk: async (events, sequence) => {
-          await chunkCQCCXDUS_cjs.resilientSend(url, {
+          await chunkVAA2KKCH_cjs.resilientSend(url, {
             session_id: sid,
             visitor_id: visitorId,
             events,
@@ -1673,7 +1673,7 @@ function WhaleProvider({
       trackingEnabled: trackingEnabled ?? envBool("NEXT_PUBLIC_TRACKING_ENABLED") ?? true,
       recordingRate: recordingRate ?? envNumber("NEXT_PUBLIC_RECORDING_RATE") ?? 0.1
     };
-    const client = new chunkCQCCXDUS_cjs.WhaleClient({
+    const client = new chunkVAA2KKCH_cjs.WhaleClient({
       storeId,
       apiKey,
       gatewayUrl: resolvedConfig.gatewayUrl,
@@ -1861,12 +1861,12 @@ function useCheckout() {
       setLoading(false);
     }
   }, [ctx.client, session]);
-  const complete = react.useCallback(async (payment) => {
+  const complete = react.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) {
@@ -2020,7 +2020,11 @@ function useLoyalty() {
     await refresh();
     return result;
   }, [customer?.id, ctx.client, refresh]);
-  return { account, rewards, transactions, loading, error, refresh, redeemReward };
+  const fetchProductsByCategory = react.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 = react.useContext(WhaleContext);
@@ -2411,16 +2415,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] = react.useState(false);
   const el = (() => {
     switch (section.type) {
       case "hero":
-        return /* @__PURE__ */ jsxRuntime.jsx(HeroSection, { section, theme });
+        return /* @__PURE__ */ jsxRuntime.jsx(HeroSection, { section, theme, tracking });
       case "text":
         return /* @__PURE__ */ jsxRuntime.jsx(TextSection, { section, theme });
       case "image":
@@ -2430,15 +2445,17 @@ function SectionRenderer({
       case "gallery":
         return /* @__PURE__ */ jsxRuntime.jsx(GallerySection, { section, theme });
       case "cta":
-        return /* @__PURE__ */ jsxRuntime.jsx(CTASection, { section, theme });
+        return /* @__PURE__ */ jsxRuntime.jsx(CTASection, { section, theme, tracking });
       case "stats":
         return /* @__PURE__ */ jsxRuntime.jsx(StatsSection, { section, theme });
       case "product_card":
-        return /* @__PURE__ */ jsxRuntime.jsx(ProductCardSection, { section, data, theme });
+        return /* @__PURE__ */ jsxRuntime.jsx(ProductCardSection, { section, data, theme, tracking });
       case "coa_viewer":
-        return /* @__PURE__ */ jsxRuntime.jsx(COAViewerSection, { section, data, theme, onShowCOA: () => setShowCOA(true) });
+        return /* @__PURE__ */ jsxRuntime.jsx(COAViewerSection, { section, data, theme, onShowCOA: () => setShowCOA(true), tracking });
       case "social_links":
         return /* @__PURE__ */ jsxRuntime.jsx(SocialLinksSection, { section, theme });
+      case "lead_capture":
+        return /* @__PURE__ */ jsxRuntime.jsx(LeadCaptureSection, { section, data, theme });
       case "divider":
         return /* @__PURE__ */ jsxRuntime.jsx(DividerSection, { theme });
       default:
@@ -2450,7 +2467,7 @@ function SectionRenderer({
     showCOA && data?.coa && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
     "div",
@@ -2492,6 +2509,7 @@ function HeroSection({ section, theme }) {
             "a",
             {
               href: cta_url,
+              onClick: () => trackClick(tracking, cta_text, cta_url),
               style: {
                 display: "inline-block",
                 padding: "0.875rem 2rem",
@@ -2577,7 +2595,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__ */ jsxRuntime.jsx("div", { style: { padding: "2rem 1.5rem", maxWidth: 480, margin: "0 auto", display: "flex", flexDirection: "column", gap: "0.75rem" }, children: buttons.map((btn, i) => {
@@ -2586,6 +2604,7 @@ function CTASection({ section, theme }) {
       "a",
       {
         href: btn.url,
+        onClick: () => trackClick(tracking, btn.text, btn.url, i),
         style: {
           display: "block",
           width: "100%",
@@ -2657,7 +2676,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 || "";
@@ -2673,6 +2692,7 @@ function ProductCardSection({ section, data, theme }) {
         "a",
         {
           href: url,
+          onClick: () => trackClick(tracking, "View Product", url),
           style: {
             display: "block",
             width: "100%",
@@ -2697,7 +2717,8 @@ function COAViewerSection({
   section,
   data,
   theme,
-  onShowCOA
+  onShowCOA,
+  tracking
 }) {
   const coa = data?.coa;
   const c = section.content;
@@ -2718,10 +2739,200 @@ function COAViewerSection({
     display: "block",
     boxSizing: "border-box"
   };
+  const buttonLabel = c.button_text || "View Lab Results";
   if (coa.viewer_url) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "1.5rem", maxWidth: 480, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: coa.viewer_url, target: "_blank", rel: "noopener noreferrer", style: buttonStyle, children: c.button_text || "View Lab Results" }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "1.5rem", maxWidth: 480, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: coa.viewer_url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        onClick: () => trackClick(tracking, buttonLabel, coa.viewer_url),
+        style: buttonStyle,
+        children: buttonLabel
+      }
+    ) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "1.5rem", maxWidth: 480, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onShowCOA, style: buttonStyle, children: c.button_text || "View Lab Results" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "1.5rem", maxWidth: 480, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.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] = react.useState("");
+  const [email, setEmail] = react.useState("");
+  const [status, setStatus] = react.useState("idle");
+  const [errorMsg, setErrorMsg] = react.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__ */ 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.jsx("div", { style: {
+      background: theme.surface,
+      border: `1px solid ${theme.fg}12`,
+      padding: "clamp(2rem, 6vw, 3rem)"
+    }, children: status === "success" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center" }, children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", marginBottom: "clamp(1.5rem, 4vw, 2rem)" }, children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { style: {
+          fontSize: "0.85rem",
+          color: theme.accent,
+          margin: 0,
+          lineHeight: 1.6,
+          textTransform: "uppercase",
+          letterSpacing: "0.15em"
+        }, children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "0.75rem", flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              placeholder: "First name",
+              value: firstName,
+              onChange: (e) => setFirstName(e.target.value),
+              style: inputStyle
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "email",
+              placeholder: "Email address",
+              value: email,
+              onChange: (e) => setEmail(e.target.value),
+              required: true,
+              style: inputStyle
+            }
+          )
+        ] }),
+        status === "error" && errorMsg && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.8rem", color: "#e55", margin: 0, fontWeight: 400 }, children: errorMsg }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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;
@@ -2844,15 +3055,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__ */ 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: storeName || "Store", style: { height: 40, objectFit: "contain" } }) }),
     sorted.map((section) => {
-      const defaultRenderer = () => /* @__PURE__ */ jsxRuntime.jsx(SectionRenderer, { section, data, theme }, section.id);
+      const defaultRenderer = () => /* @__PURE__ */ jsxRuntime.jsx(SectionRenderer, { section, data, theme, tracking }, section.id);
       if (renderSection) {
         return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderSection(section, defaultRenderer) }, section.id);
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(SectionRenderer, { section, data, theme }, section.id);
+      return /* @__PURE__ */ jsxRuntime.jsx(SectionRenderer, { section, data, theme, tracking }, section.id);
     }),
     storeName && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "2rem 1.5rem", borderTop: `1px solid ${theme.surface}`, textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { fontSize: "0.75rem", color: theme.muted, margin: 0 }, children: [
       storeName,
@@ -3102,10 +3314,11 @@ 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, renderSection });
+  return /* @__PURE__ */ jsxRuntime.jsx(PageLayout, { data, gatewayUrl, renderSection });
 }
 function PageLayout({
   data,
+  gatewayUrl,
   renderSection
 }) {
   const { landing_page: lp, store } = data;
@@ -3121,15 +3334,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__ */ 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" } }) }),
     sorted.map((section) => {
-      const defaultRenderer = () => /* @__PURE__ */ jsxRuntime.jsx(SectionRenderer, { section, data, theme }, section.id);
+      const defaultRenderer = () => /* @__PURE__ */ jsxRuntime.jsx(SectionRenderer, { section, data: sectionData, theme }, section.id);
       if (renderSection) {
         return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderSection(section, defaultRenderer) }, section.id);
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(SectionRenderer, { section, data, theme }, section.id);
+      return /* @__PURE__ */ jsxRuntime.jsx(SectionRenderer, { section, data: sectionData, theme }, section.id);
     }),
     store?.name && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "2rem 1.5rem", borderTop: `1px solid ${theme.surface}`, textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { fontSize: "0.75rem", color: theme.muted, margin: 0 }, children: [
       "Powered by ",