@neowhale/storefront 0.1.0

package/dist/react/index.js

@@ -0,0 +1,657 @@
+import { WhaleClient } from '../chunk-PR4PUHVN.js';
+import { createContext, useContext, useRef, useCallback, useEffect, useMemo, useState } from 'react';
+import { usePathname } from 'next/navigation';
+import { createStore } from 'zustand/vanilla';
+import { persist } from 'zustand/middleware';
+import { useStore } from 'zustand';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var WhaleContext = createContext(null);
+function createCartStore(client, storagePrefix, onAddToCart, onRemoveFromCart) {
+  return createStore()(
+    persist(
+      (set, get) => ({
+        // ── Initial state ────────────────────────────────────────────────
+        cartId: null,
+        items: [],
+        itemCount: 0,
+        subtotal: 0,
+        taxAmount: 0,
+        total: 0,
+        taxBreakdown: [],
+        cartOpen: false,
+        cartLoading: false,
+        productImages: {},
+        addItemInFlight: false,
+        // ── Cart UI ──────────────────────────────────────────────────────
+        openCart: () => set({ cartOpen: true }),
+        closeCart: () => set({ cartOpen: false }),
+        toggleCart: () => set((s) => ({ cartOpen: !s.cartOpen })),
+        // ── Cart data ────────────────────────────────────────────────────
+        initCart: async () => {
+          const { cartId, syncCart } = get();
+          if (cartId) {
+            try {
+              await syncCart();
+            } catch {
+              const cart = await client.createCart();
+              applyCart(set, get, cart);
+            }
+            return;
+          }
+          try {
+            const cart = await client.createCart();
+            applyCart(set, get, cart);
+          } catch (err) {
+            console.error("[whale-storefront] initCart failed:", err);
+          }
+        },
+        syncCart: async () => {
+          const { cartId, productImages } = get();
+          if (!cartId) return;
+          try {
+            const cart = await client.getCart(cartId);
+            const items = (cart.items ?? []).map((item) => ({
+              ...item,
+              image_url: item.image_url || productImages[item.product_id] || null
+            }));
+            set({
+              items,
+              itemCount: cart.item_count ?? 0,
+              subtotal: cart.subtotal ?? 0,
+              taxAmount: cart.tax_amount ?? 0,
+              total: cart.total ?? 0,
+              taxBreakdown: cart.tax_breakdown ?? []
+            });
+          } catch (err) {
+            console.error("[whale-storefront] syncCart failed:", err);
+            throw err;
+          }
+        },
+        addItem: async (productId, quantity, tier, unitPrice, imageUrl, productName) => {
+          if (get().addItemInFlight) return;
+          set({ cartLoading: true, addItemInFlight: true });
+          try {
+            let { cartId } = get();
+            if (!cartId) {
+              await get().initCart();
+              cartId = get().cartId;
+            }
+            if (!cartId) throw new Error("Could not initialise cart");
+            if (imageUrl) {
+              set((s) => ({ productImages: { ...s.productImages, [productId]: imageUrl } }));
+            }
+            try {
+              await client.addToCart(cartId, productId, quantity, { tier, unitPrice });
+            } catch (err) {
+              const status = err.status;
+              if (status === 404 || status === 410) {
+                const newCart = await client.createCart();
+                set({ cartId: newCart.id });
+                await client.addToCart(newCart.id, productId, quantity, { tier, unitPrice });
+              } else {
+                throw err;
+              }
+            }
+            await get().syncCart();
+            onAddToCart?.(productId, productName || "", quantity, unitPrice || 0, tier);
+          } finally {
+            set({ cartLoading: false, addItemInFlight: false });
+          }
+        },
+        updateQuantity: async (itemId, quantity) => {
+          set({ cartLoading: true });
+          try {
+            const { cartId } = get();
+            if (!cartId) return;
+            await client.updateCartItem(cartId, itemId, quantity);
+            await get().syncCart();
+          } finally {
+            set({ cartLoading: false });
+          }
+        },
+        removeItem: async (itemId, productName) => {
+          set({ cartLoading: true });
+          try {
+            const { cartId, items } = get();
+            if (!cartId) return;
+            const item = items.find((i) => i.id === itemId);
+            await client.removeCartItem(cartId, itemId);
+            await get().syncCart();
+            if (item) {
+              onRemoveFromCart?.(item.product_id, productName || item.product_name);
+            }
+          } finally {
+            set({ cartLoading: false });
+          }
+        },
+        clearCart: () => {
+          set({
+            cartId: null,
+            items: [],
+            itemCount: 0,
+            subtotal: 0,
+            taxAmount: 0,
+            total: 0,
+            taxBreakdown: [],
+            productImages: {}
+          });
+        },
+        checkout: async (customerEmail, payment) => {
+          const { cartId } = get();
+          if (!cartId) throw new Error("No active cart");
+          set({ cartLoading: true });
+          try {
+            const order = await client.checkout(cartId, customerEmail, payment);
+            set({
+              cartId: null,
+              items: [],
+              itemCount: 0,
+              subtotal: 0,
+              taxAmount: 0,
+              total: 0,
+              taxBreakdown: [],
+              productImages: {},
+              cartOpen: false
+            });
+            return order;
+          } finally {
+            set({ cartLoading: false });
+          }
+        }
+      }),
+      // ── Persist config ─────────────────────────────────────────────────
+      {
+        name: `${storagePrefix}-cart`,
+        partialize: (state) => ({
+          cartId: state.cartId,
+          productImages: state.productImages
+        })
+      }
+    )
+  );
+}
+function applyCart(set, get, cart) {
+  const productImages = get().productImages;
+  const items = (cart.items ?? []).map((item) => ({
+    ...item,
+    image_url: item.image_url || productImages[item.product_id] || null
+  }));
+  set({
+    cartId: cart.id,
+    items,
+    itemCount: cart.item_count ?? 0,
+    subtotal: cart.subtotal ?? 0,
+    taxAmount: cart.tax_amount ?? 0,
+    total: cart.total ?? 0,
+    taxBreakdown: cart.tax_breakdown ?? []
+  });
+}
+function createAuthStore(client, storagePrefix) {
+  return createStore()(
+    persist(
+      (set, get) => ({
+        // ── Initial state ────────────────────────────────────────────────
+        customer: null,
+        sessionToken: null,
+        sessionExpiresAt: null,
+        authLoading: false,
+        // ── Actions ──────────────────────────────────────────────────────
+        sendOTP: async (email) => {
+          set({ authLoading: true });
+          try {
+            const res = await client.sendCode(email);
+            return res.sent;
+          } catch (err) {
+            const message = err instanceof Error ? err.message : "Could not send code";
+            throw new Error(message);
+          } finally {
+            set({ authLoading: false });
+          }
+        },
+        verifyOTP: async (email, code) => {
+          set({ authLoading: true });
+          try {
+            const res = await client.verifyCode(email, code);
+            client.setSessionToken(res.token_hash);
+            set({
+              sessionToken: res.token_hash,
+              sessionExpiresAt: new Date(Date.now() + 30 * 24 * 60 * 60 * 1e3).toISOString()
+            });
+            if (res.customer?.id) {
+              try {
+                const full = await client.getCustomer(res.customer.id);
+                set({ customer: full });
+              } catch {
+                set({ customer: res.customer });
+              }
+            }
+            return res.needs_profile ?? false;
+          } catch (err) {
+            const message = err instanceof Error ? err.message : "Verification failed";
+            throw new Error(message);
+          } finally {
+            set({ authLoading: false });
+          }
+        },
+        restoreSession: async () => {
+          const { sessionToken, sessionExpiresAt, customer } = get();
+          if (!sessionToken || !sessionExpiresAt) return;
+          if (new Date(sessionExpiresAt) <= /* @__PURE__ */ new Date()) {
+            client.setSessionToken(null);
+            set({ sessionToken: null, sessionExpiresAt: null, customer: null });
+            return;
+          }
+          client.setSessionToken(sessionToken);
+          if (customer?.id) {
+            try {
+              const fresh = await client.getCustomer(customer.id);
+              set({ customer: fresh });
+            } catch {
+              client.setSessionToken(null);
+              set({ sessionToken: null, sessionExpiresAt: null, customer: null });
+            }
+          }
+        },
+        isSessionValid: () => {
+          const { sessionToken, sessionExpiresAt } = get();
+          if (!sessionToken || !sessionExpiresAt) return false;
+          return new Date(sessionExpiresAt) > /* @__PURE__ */ new Date();
+        },
+        logout: () => {
+          client.setSessionToken(null);
+          set({ customer: null, sessionToken: null, sessionExpiresAt: null });
+        },
+        fetchCustomer: async (id) => {
+          try {
+            const customer = await client.getCustomer(id);
+            set({ customer });
+          } catch (err) {
+            console.error("[whale-storefront] fetchCustomer failed:", err);
+          }
+        }
+      }),
+      // ── Persist config ─────────────────────────────────────────────────
+      {
+        name: `${storagePrefix}-auth`,
+        partialize: (state) => ({
+          sessionToken: state.sessionToken,
+          sessionExpiresAt: state.sessionExpiresAt,
+          customer: state.customer ? {
+            id: state.customer.id,
+            email: state.customer.email,
+            first_name: state.customer.first_name,
+            last_name: state.customer.last_name,
+            phone: state.customer.phone,
+            loyalty_points: state.customer.loyalty_points,
+            loyalty_tier: state.customer.loyalty_tier,
+            total_spent: state.customer.total_spent,
+            total_orders: state.customer.total_orders
+          } : null
+        })
+      }
+    )
+  );
+}
+var SESSION_KEY_SUFFIX = "-analytics-session";
+function useAnalytics() {
+  const ctx = useContext(WhaleContext);
+  if (!ctx) throw new Error("useAnalytics must be used within <WhaleProvider>");
+  const { client, config } = ctx;
+  const sessionPromiseRef = useRef(null);
+  const sessionKey = `${config.storagePrefix}${SESSION_KEY_SUFFIX}`;
+  const getOrCreateSession = useCallback(async () => {
+    if (sessionPromiseRef.current) return sessionPromiseRef.current;
+    sessionPromiseRef.current = (async () => {
+      try {
+        const raw = localStorage.getItem(sessionKey);
+        if (raw) {
+          const stored = JSON.parse(raw);
+          if (Date.now() - stored.createdAt < config.sessionTtl) {
+            client.updateSession(stored.id, { last_active_at: (/* @__PURE__ */ new Date()).toISOString() }).catch(() => {
+            });
+            return stored.id;
+          }
+        }
+      } catch {
+      }
+      try {
+        const session = await client.createSession({
+          user_agent: navigator.userAgent,
+          referrer: document.referrer || void 0
+        });
+        if (session?.id) {
+          localStorage.setItem(sessionKey, JSON.stringify({ id: session.id, createdAt: Date.now() }));
+          return session.id;
+        }
+      } catch {
+      }
+      const fallbackId = `local-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+      localStorage.setItem(sessionKey, JSON.stringify({ id: fallbackId, createdAt: Date.now() }));
+      return fallbackId;
+    })();
+    sessionPromiseRef.current.finally(() => {
+      sessionPromiseRef.current = null;
+    });
+    return sessionPromiseRef.current;
+  }, [client, config.sessionTtl, sessionKey]);
+  const track = useCallback(
+    async (eventType, data = {}) => {
+      try {
+        const sessionId = await getOrCreateSession();
+        await client.trackEvent({ session_id: sessionId, event_type: eventType, event_data: data });
+      } catch {
+      }
+    },
+    [client, getOrCreateSession]
+  );
+  const linkCustomer = useCallback(
+    async (customerId) => {
+      try {
+        const sessionId = await getOrCreateSession();
+        if (sessionId.startsWith("local-")) return;
+        await client.updateSession(sessionId, { customer_id: customerId });
+      } catch {
+      }
+    },
+    [client, getOrCreateSession]
+  );
+  const trackPageView = useCallback(
+    (url, referrer) => {
+      track("page_view", { url, referrer });
+    },
+    [track]
+  );
+  const trackProductView = useCallback(
+    (productId, productName, category, price) => {
+      track("product_view", { product_id: productId, product_name: productName, category, price });
+    },
+    [track]
+  );
+  const trackCategoryView = useCallback(
+    (categoryId, categoryName) => {
+      track("category_view", { category_id: categoryId, category_name: categoryName });
+    },
+    [track]
+  );
+  const trackSearch = useCallback(
+    (query, resultCount) => {
+      track("search", { query, result_count: resultCount });
+    },
+    [track]
+  );
+  const trackBeginCheckout = useCallback(
+    (cartId, total, itemCount) => {
+      track("begin_checkout", { cart_id: cartId, total, item_count: itemCount });
+    },
+    [track]
+  );
+  const trackPurchase = useCallback(
+    (orderId, orderNumber, total) => {
+      track("purchase", { order_id: orderId, order_number: orderNumber, total });
+    },
+    [track]
+  );
+  const trackAddToCart = useCallback(
+    (productId, productName, quantity, price, tier) => {
+      track("add_to_cart", { product_id: productId, product_name: productName, quantity, price, tier });
+    },
+    [track]
+  );
+  const trackRemoveFromCart = useCallback(
+    (productId, productName) => {
+      track("remove_from_cart", { product_id: productId, product_name: productName });
+    },
+    [track]
+  );
+  return {
+    track,
+    trackPageView,
+    trackProductView,
+    trackCategoryView,
+    trackSearch,
+    trackBeginCheckout,
+    trackPurchase,
+    trackAddToCart,
+    trackRemoveFromCart,
+    linkCustomer,
+    getOrCreateSession
+  };
+}
+function useAuth() {
+  const ctx = useContext(WhaleContext);
+  if (!ctx) throw new Error("useAuth must be used within <WhaleProvider>");
+  return useStore(ctx.authStore, (s) => ({
+    customer: s.customer,
+    authLoading: s.authLoading,
+    sessionToken: s.sessionToken,
+    isAuthenticated: s.isSessionValid(),
+    sendCode: s.sendOTP,
+    verifyCode: s.verifyOTP,
+    restoreSession: s.restoreSession,
+    logout: s.logout,
+    fetchCustomer: s.fetchCustomer
+  }));
+}
+
+// src/react/components/analytics-tracker.tsx
+function AnalyticsTracker({ pathname }) {
+  const { trackPageView, linkCustomer } = useAnalytics();
+  const { customer } = useAuth();
+  const prevPathname = useRef(null);
+  const linkedCustomerId = useRef(null);
+  useEffect(() => {
+    if (pathname === prevPathname.current) return;
+    const referrer = prevPathname.current || (typeof document !== "undefined" ? document.referrer : "");
+    prevPathname.current = pathname;
+    trackPageView(pathname, referrer || void 0);
+  }, [pathname, trackPageView]);
+  useEffect(() => {
+    if (customer?.id && customer.id !== linkedCustomerId.current) {
+      linkedCustomerId.current = customer.id;
+      linkCustomer(customer.id);
+    }
+  }, [customer?.id, linkCustomer]);
+  return null;
+}
+function useCart() {
+  const ctx = useContext(WhaleContext);
+  if (!ctx) throw new Error("useCart must be used within <WhaleProvider>");
+  return useStore(ctx.cartStore, (s) => ({
+    cartId: s.cartId,
+    items: s.items,
+    itemCount: s.itemCount,
+    subtotal: s.subtotal,
+    taxAmount: s.taxAmount,
+    total: s.total,
+    taxBreakdown: s.taxBreakdown,
+    cartOpen: s.cartOpen,
+    cartLoading: s.cartLoading,
+    productImages: s.productImages,
+    addItem: s.addItem,
+    removeItem: s.removeItem,
+    updateQuantity: s.updateQuantity,
+    toggleCart: s.toggleCart,
+    openCart: s.openCart,
+    closeCart: s.closeCart,
+    initCart: s.initCart,
+    syncCart: s.syncCart,
+    clearCart: s.clearCart,
+    checkout: s.checkout
+  }));
+}
+function useCartItemCount() {
+  const ctx = useContext(WhaleContext);
+  if (!ctx) throw new Error("useCartItemCount must be used within <WhaleProvider>");
+  return useStore(ctx.cartStore, (s) => s.itemCount);
+}
+function useCartTotal() {
+  const ctx = useContext(WhaleContext);
+  if (!ctx) throw new Error("useCartTotal must be used within <WhaleProvider>");
+  return useStore(ctx.cartStore, (s) => s.total);
+}
+
+// src/react/components/cart-initializer.tsx
+function CartInitializer() {
+  const { cartId, syncCart } = useCart();
+  const initialized = useRef(false);
+  useEffect(() => {
+    if (initialized.current) return;
+    initialized.current = true;
+    if (cartId) {
+      syncCart().catch(() => {
+      });
+    }
+  }, []);
+  return null;
+}
+function AuthInitializer() {
+  const { restoreSession } = useAuth();
+  const restored = useRef(false);
+  useEffect(() => {
+    if (restored.current) return;
+    restored.current = true;
+    restoreSession();
+  }, []);
+  return null;
+}
+function WhaleProvider({
+  children,
+  products = [],
+  storeId,
+  apiKey,
+  gatewayUrl,
+  proxyPath,
+  mediaSigningSecret,
+  supabaseHost,
+  storagePrefix,
+  sessionTtl,
+  debug
+}) {
+  const pathname = usePathname();
+  const ctx = useMemo(() => {
+    const resolvedConfig = {
+      storeId,
+      apiKey,
+      gatewayUrl: gatewayUrl || "https://whale-gateway.fly.dev",
+      proxyPath: proxyPath || "/api/gw",
+      mediaSigningSecret: mediaSigningSecret || "",
+      supabaseHost: supabaseHost || "",
+      storagePrefix: storagePrefix || "whale",
+      sessionTtl: sessionTtl || 30 * 60 * 1e3,
+      debug: debug || false
+    };
+    const client = new WhaleClient({
+      storeId,
+      apiKey,
+      gatewayUrl: resolvedConfig.gatewayUrl,
+      proxyPath: resolvedConfig.proxyPath
+    });
+    const cartStore = createCartStore(client, resolvedConfig.storagePrefix);
+    const authStore = createAuthStore(client, resolvedConfig.storagePrefix);
+    return {
+      client,
+      config: resolvedConfig,
+      cartStore,
+      authStore,
+      products
+    };
+  }, [storeId, apiKey]);
+  const value = useMemo(
+    () => ({ ...ctx, products }),
+    [ctx, products]
+  );
+  return /* @__PURE__ */ jsxs(WhaleContext.Provider, { value, children: [
+    /* @__PURE__ */ jsx(AuthInitializer, {}),
+    /* @__PURE__ */ jsx(CartInitializer, {}),
+    /* @__PURE__ */ jsx(AnalyticsTracker, { pathname }),
+    children
+  ] });
+}
+function useProducts(opts) {
+  const ctx = useContext(WhaleContext);
+  if (!ctx) throw new Error("useProducts must be used within <WhaleProvider>");
+  const allProducts = ctx.products;
+  const products = useMemo(() => {
+    let result = allProducts;
+    if (opts?.categoryId) {
+      result = result.filter((p) => p.primary_category_id === opts.categoryId);
+    }
+    if (opts?.search) {
+      const q = opts.search.toLowerCase();
+      result = result.filter(
+        (p) => p.name.toLowerCase().includes(q) || p.description?.toLowerCase().includes(q) || p.slug.toLowerCase().includes(q)
+      );
+    }
+    return result;
+  }, [allProducts, opts?.categoryId, opts?.search]);
+  return {
+    products,
+    allProducts,
+    loading: false
+  };
+}
+function useProduct(slug) {
+  const ctx = useContext(WhaleContext);
+  if (!ctx) throw new Error("useProduct must be used within <WhaleProvider>");
+  const product = useMemo(() => {
+    if (!slug) return null;
+    return ctx.products.find((p) => p.slug === slug) ?? null;
+  }, [ctx.products, slug]);
+  return {
+    product,
+    loading: false
+  };
+}
+function useWhaleClient() {
+  const ctx = useContext(WhaleContext);
+  if (!ctx) throw new Error("useWhaleClient must be used within <WhaleProvider>");
+  return ctx.client;
+}
+function useCustomerOrders() {
+  const ctx = useContext(WhaleContext);
+  if (!ctx) throw new Error("useCustomerOrders must be used within <WhaleProvider>");
+  const customer = useStore(ctx.authStore, (s) => s.customer);
+  const [orders, setOrders] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const refresh = useCallback(async () => {
+    if (!customer?.id) {
+      setOrders([]);
+      return;
+    }
+    setLoading(true);
+    try {
+      const data = await ctx.client.getCustomerOrders(customer.id);
+      setOrders(data);
+    } catch {
+      setOrders([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [customer?.id, ctx.client]);
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+  return { orders, loading, refresh };
+}
+function useCustomerAnalytics() {
+  const ctx = useContext(WhaleContext);
+  if (!ctx) throw new Error("useCustomerAnalytics must be used within <WhaleProvider>");
+  const customer = useStore(ctx.authStore, (s) => s.customer);
+  const [analytics, setAnalytics] = useState(null);
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    if (!customer?.id) {
+      setAnalytics(null);
+      return;
+    }
+    setLoading(true);
+    const name = `${customer.first_name} ${customer.last_name}`.trim();
+    ctx.client.getCustomerAnalytics(customer.id, name || void 0).then(setAnalytics).catch(() => setAnalytics(null)).finally(() => setLoading(false));
+  }, [customer?.id, customer?.first_name, customer?.last_name, ctx.client]);
+  return { analytics, loading };
+}
+
+export { AnalyticsTracker, AuthInitializer, CartInitializer, WhaleContext, WhaleProvider, useAnalytics, useAuth, useCart, useCartItemCount, useCartTotal, useCustomerAnalytics, useCustomerOrders, useProduct, useProducts, useWhaleClient };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map