@appfunnel-dev/sdk 0.1.0

package/dist/index.cjs

@@ -0,0 +1,660 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var stripeJs = require('@stripe/stripe-js');
+var reactStripeJs = require('@stripe/react-stripe-js');
+
+// src/config.ts
+function defineConfig(config) {
+  return config;
+}
+function definePage(definition) {
+  return definition;
+}
+function registerIntegration(id, loader) {
+}
+var FunnelContext = react.createContext(null);
+function useFunnelContext() {
+  const ctx = react.useContext(FunnelContext);
+  if (!ctx) {
+    throw new Error("useFunnelContext must be used within a <FunnelProvider>");
+  }
+  return ctx;
+}
+
+// src/hooks/useVariable.ts
+function useVariable(id) {
+  const { variableStore } = useFunnelContext();
+  const subscribe = react.useCallback(
+    (callback) => variableStore.subscribe(callback),
+    [variableStore]
+  );
+  const getSnapshot = react.useCallback(
+    () => variableStore.get(id),
+    [variableStore, id]
+  );
+  const value = react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const setValue = react.useCallback(
+    (v) => variableStore.set(id, v),
+    [variableStore, id]
+  );
+  return [value, setValue];
+}
+function useVariables() {
+  const { variableStore } = useFunnelContext();
+  const subscribe = react.useCallback(
+    (callback) => variableStore.subscribe(callback),
+    [variableStore]
+  );
+  const getSnapshot = react.useCallback(
+    () => variableStore.getState(),
+    [variableStore]
+  );
+  return react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+function useUser() {
+  const { variableStore, tracker } = useFunnelContext();
+  const subscribe = react.useCallback(
+    (cb) => variableStore.subscribe(cb),
+    [variableStore]
+  );
+  const getSnapshot = react.useCallback(
+    () => variableStore.getState(),
+    [variableStore]
+  );
+  const variables = react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return react.useMemo(() => ({
+    email: variables["user.email"] || "",
+    name: variables["user.name"] || "",
+    stripeCustomerId: variables["user.stripeCustomerId"] || "",
+    paddleCustomerId: variables["user.paddleCustomerId"] || "",
+    setEmail(email) {
+      variableStore.set("user.email", email);
+      tracker.identify(email);
+    },
+    setName(name) {
+      variableStore.set("user.name", name);
+    }
+  }), [variables, variableStore, tracker]);
+}
+function useUserVariable(field) {
+  const { variableStore } = useFunnelContext();
+  const key = `user.${field}`;
+  const subscribe = react.useCallback(
+    (cb) => variableStore.subscribe(cb),
+    [variableStore]
+  );
+  const getSnapshot = react.useCallback(
+    () => variableStore.get(key) || "",
+    [variableStore, key]
+  );
+  const value = react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const setValue = react.useCallback(
+    (v) => variableStore.set(key, v),
+    [variableStore, key]
+  );
+  return [value, setValue];
+}
+function useQueryParams() {
+  const { variableStore } = useFunnelContext();
+  const subscribe = react.useCallback(
+    (cb) => variableStore.subscribe(cb),
+    [variableStore]
+  );
+  const getSnapshot = react.useCallback(
+    () => variableStore.getState(),
+    [variableStore]
+  );
+  const variables = react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return react.useMemo(() => {
+    const params = {};
+    for (const [key, value] of Object.entries(variables)) {
+      if (key.startsWith("query.") && typeof value === "string") {
+        params[key.slice(6)] = value;
+      }
+    }
+    return params;
+  }, [variables]);
+}
+function useLocale() {
+  return react.useMemo(() => {
+    if (typeof navigator === "undefined") {
+      return {
+        locale: "en-US",
+        language: "en",
+        region: "US",
+        languages: ["en-US"],
+        timeZone: "UTC",
+        is24Hour: false
+      };
+    }
+    const locale = navigator.language || "en-US";
+    const [language, region] = locale.split("-");
+    const languages = [...navigator.languages || [locale]];
+    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+    const is24Hour = detect24Hour(locale);
+    return {
+      locale,
+      language: language || "en",
+      region: region?.toUpperCase() || "US",
+      languages,
+      timeZone,
+      is24Hour
+    };
+  }, []);
+}
+function detect24Hour(locale) {
+  try {
+    const formatted = new Intl.DateTimeFormat(locale, { hour: "numeric" }).format(/* @__PURE__ */ new Date());
+    return !formatted.match(/am|pm/i);
+  } catch {
+    return false;
+  }
+}
+function useTranslation() {
+  const { i18n } = useFunnelContext();
+  const subscribe = react.useCallback(
+    (cb) => i18n.subscribe(cb),
+    [i18n]
+  );
+  const getSnapshot = react.useCallback(
+    () => i18n.getLocale(),
+    [i18n]
+  );
+  const locale = react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const t = react.useCallback(
+    (key, params) => i18n.t(key, params),
+    [i18n, locale]
+    // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  const setLocale = react.useCallback(
+    (l) => i18n.setLocale(l),
+    [i18n]
+  );
+  const availableLocales = i18n.getAvailableLocales();
+  return { t, locale, setLocale, availableLocales };
+}
+function useNavigation() {
+  const { router, variableStore, tracker } = useFunnelContext();
+  const subscribe = react.useCallback(
+    (cb) => variableStore.subscribe(cb),
+    [variableStore]
+  );
+  const getSnapshot = react.useCallback(
+    () => variableStore.getState(),
+    [variableStore]
+  );
+  const variables = react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const goToNextPage = react.useCallback(() => {
+    const previousPage = router.getCurrentPage();
+    if (previousPage) {
+      tracker.stopPageTracking();
+    }
+    const nextKey = router.goToNextPage(variables);
+    if (nextKey) {
+      const nextPage = router.getCurrentPage();
+      if (nextPage) {
+        tracker.track("page.view", {
+          pageId: nextPage.key,
+          pageKey: nextPage.key,
+          pageName: nextPage.name
+        });
+        tracker.startPageTracking(nextPage.key);
+      }
+      variableStore.setMany({
+        "page.currentId": nextKey,
+        "page.currentIndex": router.getPageHistory().length,
+        "page.current": router.getPageHistory().length + 1,
+        "page.startedAt": Date.now(),
+        "page.timeOnCurrent": 0
+      });
+    }
+  }, [router, variables, tracker, variableStore]);
+  const goBack = react.useCallback(() => {
+    tracker.stopPageTracking();
+    const prevKey = router.goBack();
+    if (prevKey) {
+      const page = router.getCurrentPage();
+      if (page) {
+        tracker.track("page.view", {
+          pageId: page.key,
+          pageKey: page.key,
+          pageName: page.name
+        });
+        tracker.startPageTracking(page.key);
+      }
+      variableStore.setMany({
+        "page.currentId": prevKey,
+        "page.currentIndex": router.getPageHistory().length,
+        "page.current": router.getPageHistory().length + 1,
+        "page.startedAt": Date.now(),
+        "page.timeOnCurrent": 0
+      });
+    }
+  }, [router, tracker, variableStore]);
+  const goToPage = react.useCallback((pageKey) => {
+    tracker.stopPageTracking();
+    const key = router.goToPage(pageKey);
+    if (key) {
+      const page = router.getCurrentPage();
+      if (page) {
+        tracker.track("page.view", {
+          pageId: page.key,
+          pageKey: page.key,
+          pageName: page.name
+        });
+        tracker.startPageTracking(page.key);
+      }
+      variableStore.setMany({
+        "page.currentId": key,
+        "page.currentIndex": router.getPageHistory().length,
+        "page.current": router.getPageHistory().length + 1,
+        "page.startedAt": Date.now(),
+        "page.timeOnCurrent": 0
+      });
+    }
+  }, [router, tracker, variableStore]);
+  return {
+    goToNextPage,
+    goBack,
+    goToPage,
+    currentPage: router.getCurrentPage(),
+    pageHistory: router.getPageHistory(),
+    progress: router.getProgress()
+  };
+}
+function useProducts() {
+  const { products, variableStore, selectProduct: ctxSelect } = useFunnelContext();
+  const subscribe = react.useCallback(
+    (cb) => variableStore.subscribe(cb),
+    [variableStore]
+  );
+  const getSnapshot = react.useCallback(
+    () => variableStore.get("products.selectedProductId"),
+    [variableStore]
+  );
+  const selectedId = react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const selected = products.find((p) => p.id === selectedId) || null;
+  const select = react.useCallback((productId) => {
+    ctxSelect(productId);
+  }, [ctxSelect]);
+  return { products, selected, select };
+}
+function useTracking() {
+  const { tracker } = useFunnelContext();
+  const track = react.useCallback(
+    (eventName, data) => {
+      tracker.track(eventName, data);
+    },
+    [tracker]
+  );
+  const identify = react.useCallback(
+    (email) => {
+      tracker.identify(email);
+    },
+    [tracker]
+  );
+  return { track, identify };
+}
+function usePayment() {
+  const { variableStore, tracker } = useFunnelContext();
+  const subscribe = react.useCallback(
+    (cb) => variableStore.subscribe(cb),
+    [variableStore]
+  );
+  const getSnapshot = react.useCallback(
+    () => variableStore.getState(),
+    [variableStore]
+  );
+  const variables = react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return react.useMemo(() => {
+    const last4 = variables["card.last4"] || "";
+    const brand = variables["card.brand"] || "";
+    const expMonth = variables["card.expMonth"] || 0;
+    const expYear = variables["card.expYear"] || 0;
+    return {
+      customerId: tracker.getCustomerId(),
+      isAuthorized: !!last4,
+      loading: !!variables["payment.loading"],
+      error: variables["payment.error"] || null,
+      cardDetails: last4 ? { last4, brand, expMonth, expYear } : null
+    };
+  }, [variables, tracker]);
+}
+
+// src/hooks/useFunnel.ts
+function useFunnel() {
+  const { funnelId, campaignId, tracker } = useFunnelContext();
+  return {
+    funnelId,
+    campaignId,
+    sessionId: tracker.getSessionId(),
+    variables: useVariables(),
+    user: useUser(),
+    queryParams: useQueryParams(),
+    navigation: useNavigation(),
+    products: useProducts(),
+    tracking: useTracking(),
+    payment: usePayment()
+  };
+}
+function InnerPaymentForm({
+  paymentMode,
+  validateOnly,
+  onSuccess,
+  onError
+}) {
+  const stripe = reactStripeJs.useStripe();
+  const elements = reactStripeJs.useElements();
+  const [error, setError] = react.useState(null);
+  const { variableStore, campaignId, tracker, apiBaseUrl, products } = useFunnelContext();
+  const handleSubmit = react.useCallback(async () => {
+    if (!stripe || !elements) {
+      const msg = "Stripe not loaded";
+      setError(msg);
+      onError?.(msg);
+      return;
+    }
+    setError(null);
+    variableStore.set("payment.loading", true);
+    try {
+      const confirmFn = paymentMode === "setup" ? stripe.confirmSetup : stripe.confirmPayment;
+      const confirmResult = await confirmFn({
+        elements,
+        redirect: "if_required",
+        confirmParams: { return_url: window.location.href }
+      });
+      if (confirmResult.error) {
+        const msg = confirmResult.error.message || "Payment failed";
+        setError(msg);
+        variableStore.set("payment.error", msg);
+        onError?.(msg);
+        return;
+      }
+      tracker.track("checkout.payment_added");
+      if (validateOnly) {
+        const piId = "paymentIntent" in confirmResult ? confirmResult.paymentIntent : void 0;
+        if (!piId?.id) {
+          const msg = "PaymentIntent not found after confirmation";
+          setError(msg);
+          variableStore.set("payment.error", msg);
+          onError?.(msg);
+          return;
+        }
+        const response2 = await fetch(
+          `${apiBaseUrl}/campaign/${campaignId}/stripe/validate-card`,
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              campaignId,
+              sessionId: tracker.getSessionId(),
+              paymentIntentId: piId.id
+            })
+          }
+        );
+        const result2 = await response2.json();
+        if (!result2.success) {
+          const msg = result2.error || "Card validation failed";
+          setError(msg);
+          variableStore.set("payment.error", msg);
+          onError?.(msg);
+          return;
+        }
+        variableStore.setMany({
+          "card.last4": result2.card.last4,
+          "card.brand": result2.card.brand,
+          "card.expMonth": result2.card.expMonth,
+          "card.expYear": result2.card.expYear,
+          "card.funding": result2.card.funding,
+          "payment.error": ""
+        });
+        onSuccess?.();
+        return;
+      }
+      const paymentIntentId = "paymentIntent" in confirmResult ? confirmResult.paymentIntent?.id : void 0;
+      const selectedId = variableStore.get("products.selectedProductId");
+      const product = products.find((p) => p.id === selectedId);
+      if (!product?.stripePriceId) {
+        const msg = "No product selected or missing Stripe price";
+        setError(msg);
+        variableStore.set("payment.error", msg);
+        onError?.(msg);
+        return;
+      }
+      const variables = variableStore.getState();
+      await tracker.updateUserData(variables);
+      const response = await fetch(
+        `${apiBaseUrl}/campaign/${campaignId}/stripe/purchase`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            campaignId,
+            sessionId: tracker.getSessionId(),
+            stripePriceId: product.stripePriceId,
+            trialPeriodDays: product.hasTrial ? product.trialDays : void 0,
+            onSessionPiId: paymentMode === "payment" ? paymentIntentId : void 0
+          })
+        }
+      );
+      const result = await response.json();
+      if (result.success) {
+        variableStore.set("payment.error", "");
+        if (result.eventId || result.eventIds?.firstPeriod) {
+          tracker.track("purchase.complete", {
+            amount: product.rawPrice ? product.rawPrice / 100 : 0,
+            currency: product.currencyCode || "USD"
+          });
+        }
+        onSuccess?.();
+      } else {
+        const msg = result.error || "Failed to process payment";
+        setError(msg);
+        variableStore.set("payment.error", msg);
+        onError?.(msg);
+      }
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "An error occurred";
+      setError(msg);
+      variableStore.set("payment.error", msg);
+      onError?.(msg);
+    } finally {
+      variableStore.set("payment.loading", false);
+    }
+  }, [stripe, elements, paymentMode, validateOnly, variableStore, campaignId, tracker, apiBaseUrl, products, onSuccess, onError]);
+  react.useEffect(() => {
+    if (typeof window !== "undefined") {
+      window.__paymentElementSubmit = handleSubmit;
+    }
+    return () => {
+      if (typeof window !== "undefined") {
+        delete window.__paymentElementSubmit;
+      }
+    };
+  }, [handleSubmit]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactStripeJs.PaymentElement, { options: { layout: "tabs" } }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#ef4444", fontSize: "14px", marginTop: "12px" }, children: error })
+  ] });
+}
+function PaymentForm({
+  productId,
+  mode = "checkout",
+  onSuccess,
+  onError,
+  className,
+  appearance
+}) {
+  const { campaignId, tracker, variableStore, apiBaseUrl, products } = useFunnelContext();
+  const [email] = useVariable("user.email");
+  const validateOnly = mode === "validate-only";
+  const product = react.useMemo(() => {
+    if (productId) return products.find((p) => p.id === productId) || null;
+    const selectedId = variableStore.get("products.selectedProductId");
+    return products.find((p) => p.id === selectedId) || null;
+  }, [productId, products, variableStore]);
+  const paymentMode = react.useMemo(() => {
+    if (validateOnly) return "payment";
+    if (product?.hasTrial && !product.paidTrial) return "setup";
+    return "payment";
+  }, [product, validateOnly]);
+  const [stripePromise, setStripePromise] = react.useState(null);
+  const [clientSecret, setClientSecret] = react.useState(null);
+  const [error, setError] = react.useState(null);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const hasInitialized = react.useRef(false);
+  react.useEffect(() => {
+    if (!email || !campaignId || hasInitialized.current) return;
+    if (!product?.storePriceId) return;
+    hasInitialized.current = true;
+    setIsLoading(true);
+    variableStore.set("payment.loading", true);
+    const createIntent = async () => {
+      try {
+        const endpoint = paymentMode === "setup" ? `/campaign/${campaignId}/stripe/setup-intent` : `/campaign/${campaignId}/stripe/payment-intent`;
+        const body = {
+          campaignId,
+          sessionId: tracker.getSessionId(),
+          customerEmail: email,
+          priceId: product.storePriceId
+        };
+        if (validateOnly) body.validateOnly = true;
+        const response = await fetch(`${apiBaseUrl}${endpoint}`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(body)
+        });
+        const result = await response.json();
+        if (!result.success) {
+          throw new Error(result.error || "Failed to create intent");
+        }
+        setStripePromise(stripeJs.loadStripe(result.publishableKey));
+        setClientSecret(result.clientSecret);
+        variableStore.set("user.stripeCustomerId", result.customerId);
+        tracker.track("checkout.start", {
+          productId: product.id,
+          priceId: product.stripePriceId || product.storePriceId,
+          productName: product.displayName
+        });
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : "Failed to initialize payment";
+        setError(msg);
+        variableStore.set("payment.error", msg);
+      } finally {
+        setIsLoading(false);
+        variableStore.set("payment.loading", false);
+      }
+    };
+    createIntent();
+  }, [email, campaignId, product, paymentMode, validateOnly, tracker, variableStore, apiBaseUrl]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { padding: "20px", textAlign: "center", color: "#6b7280" }, children: "Loading payment form..." });
+  }
+  if (!email) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { padding: "20px", textAlign: "center", color: "#ef4444", fontSize: "14px" }, children: "Email is required to initialize payment" });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { padding: "20px", textAlign: "center", color: "#ef4444", fontSize: "14px" }, children: error });
+  }
+  if (!stripePromise || !clientSecret) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { padding: "20px", textAlign: "center", color: "#6b7280" }, children: "Initializing payment..." });
+  }
+  const defaultAppearance = {
+    theme: "stripe",
+    variables: { colorPrimary: "#3b82f6", borderRadius: "8px" }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(reactStripeJs.Elements, { stripe: stripePromise, options: { clientSecret, appearance: appearance || defaultAppearance }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    InnerPaymentForm,
+    {
+      paymentMode,
+      validateOnly,
+      onSuccess,
+      onError
+    }
+  ) }) });
+}
+function PaddleCheckout({
+  productId,
+  mode = "overlay",
+  onSuccess,
+  onError,
+  className
+}) {
+  const { variableStore, tracker, products } = useFunnelContext();
+  const containerRef = react.useRef(null);
+  const initializedRef = react.useRef(false);
+  const product = productId ? products.find((p) => p.id === productId) : products.find((p) => p.id === variableStore.get("products.selectedProductId"));
+  const handleCheckoutComplete = react.useCallback(() => {
+    tracker.track("purchase.complete", {
+      amount: product?.rawPrice ? product.rawPrice / 100 : 0,
+      currency: product?.currencyCode || "USD"
+    });
+    onSuccess?.();
+  }, [tracker, product, onSuccess]);
+  react.useEffect(() => {
+    if (initializedRef.current || !product?.paddlePriceId) return;
+    initializedRef.current = true;
+    if (!window.Paddle) {
+      onError?.("Paddle.js not loaded. Include the Paddle script in your HTML.");
+      return;
+    }
+    const email = variableStore.get("user.email") || "";
+    if (mode === "overlay") {
+      window.Paddle.Checkout.open({
+        items: [{ priceId: product.paddlePriceId, quantity: 1 }],
+        customer: email ? { email } : void 0,
+        successCallback: handleCheckoutComplete,
+        closeCallback: () => {
+        }
+      });
+    } else {
+      if (containerRef.current) {
+        window.Paddle.Checkout.open({
+          items: [{ priceId: product.paddlePriceId, quantity: 1 }],
+          customer: email ? { email } : void 0,
+          settings: {
+            displayMode: "inline",
+            frameTarget: containerRef.current.id || "paddle-checkout",
+            frameInitialHeight: 450,
+            frameStyle: "width: 100%; min-width: 312px; background-color: transparent; border: none;"
+          },
+          successCallback: handleCheckoutComplete
+        });
+      }
+    }
+    tracker.track("checkout.start", {
+      productId: product.id,
+      priceId: product.paddlePriceId,
+      productName: product.displayName
+    });
+  }, [product, mode, variableStore, tracker, handleCheckoutComplete, onError]);
+  if (!product) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { padding: "20px", textAlign: "center", color: "#ef4444", fontSize: "14px" }, children: "No product selected" });
+  }
+  if (mode === "inline") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, id: "paddle-checkout", className });
+  }
+  return null;
+}
+
+exports.PaddleCheckout = PaddleCheckout;
+exports.PaymentForm = PaymentForm;
+exports.defineConfig = defineConfig;
+exports.definePage = definePage;
+exports.registerIntegration = registerIntegration;
+exports.useFunnel = useFunnel;
+exports.useLocale = useLocale;
+exports.useNavigation = useNavigation;
+exports.usePayment = usePayment;
+exports.useProducts = useProducts;
+exports.useQueryParams = useQueryParams;
+exports.useTracking = useTracking;
+exports.useTranslation = useTranslation;
+exports.useUser = useUser;
+exports.useUserVariable = useUserVariable;
+exports.useVariable = useVariable;
+exports.useVariables = useVariables;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map