@appfunnel-dev/sdk 0.6.0 → 0.8.0

package/dist/index.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
-var chunkBUF5FDKC_cjs = require('./chunk-BUF5FDKC.cjs');
+var chunkXP44I2MU_cjs = require('./chunk-XP44I2MU.cjs');
+var chunkEVUYCLVY_cjs = require('./chunk-EVUYCLVY.cjs');
 var react = require('react');
 var stripeJs = require('@stripe/stripe-js');
 var reactStripeJs = require('@stripe/react-stripe-js');
@@ -14,7 +15,7 @@ function definePage(definition) {
   return definition;
 }
 function useVariable(id) {
-  const { variableStore } = chunkBUF5FDKC_cjs.useFunnelContext();
+  const { variableStore } = chunkEVUYCLVY_cjs.useFunnelContext();
   const subscribe = react.useCallback(
     (callback) => variableStore.subscribe(callback, { keys: [id] }),
     [variableStore, id]
@@ -31,7 +32,7 @@ function useVariable(id) {
   return [value, setValue];
 }
 function useVariables() {
-  const { variableStore } = chunkBUF5FDKC_cjs.useFunnelContext();
+  const { variableStore } = chunkEVUYCLVY_cjs.useFunnelContext();
   const subscribe = react.useCallback(
     (callback) => variableStore.subscribe(callback),
     [variableStore]
@@ -42,8 +43,104 @@ function useVariables() {
   );
   return react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 }
+
+// src/utils/date.ts
+function toISODate(input) {
+  if (!input || !input.trim()) return "";
+  const s = input.trim();
+  if (/^\d{4}-\d{2}-\d{2}$/.test(s)) return s;
+  if (/^\d{4}-\d{2}-\d{2}T/.test(s)) return s.slice(0, 10);
+  const sepMatch = s.match(/^(\d{1,2})[/\-.](\d{1,2})[/\-.](\d{4})$/);
+  if (sepMatch) {
+    const a = parseInt(sepMatch[1], 10);
+    const b = parseInt(sepMatch[2], 10);
+    const year = sepMatch[3];
+    let month;
+    let day;
+    if (a > 12 && b <= 12) {
+      day = a;
+      month = b;
+    } else if (b > 12 && a <= 12) {
+      month = a;
+      day = b;
+    } else {
+      month = a;
+      day = b;
+    }
+    if (month >= 1 && month <= 12 && day >= 1 && day <= 31) {
+      return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+    }
+  }
+  const ymdSlash = s.match(/^(\d{4})[/\-.](\d{1,2})[/\-.](\d{1,2})$/);
+  if (ymdSlash) {
+    const year = ymdSlash[1];
+    const month = parseInt(ymdSlash[2], 10);
+    const day = parseInt(ymdSlash[3], 10);
+    if (month >= 1 && month <= 12 && day >= 1 && day <= 31) {
+      return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+    }
+  }
+  if (/^\d{8}$/.test(s)) {
+    const a = parseInt(s.slice(0, 2), 10);
+    const b = parseInt(s.slice(2, 4), 10);
+    const year = s.slice(4, 8);
+    let month;
+    let day;
+    if (a > 12 && b <= 12) {
+      day = a;
+      month = b;
+    } else {
+      month = a;
+      day = b;
+    }
+    if (month >= 1 && month <= 12 && day >= 1 && day <= 31) {
+      return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+    }
+  }
+  throw new Error(
+    `[AppFunnel] Invalid date format: "${input}". Expected a date string like MM/DD/YYYY, DD/MM/YYYY, YYYY-MM-DD, or MMDDYYYY.`
+  );
+}
+function toISODateWithFormat(input, format) {
+  if (!input || !input.trim()) return "";
+  const s = input.trim();
+  if (/^\d{4}-\d{2}-\d{2}$/.test(s) || /^\d{4}-\d{2}-\d{2}T/.test(s)) {
+    return s.slice(0, 10);
+  }
+  const digits = s.replace(/[^\d]/g, "");
+  if (format === "YYYY-MM-DD") {
+    const m = s.match(/^(\d{4})[/\-.](\d{1,2})[/\-.](\d{1,2})$/);
+    if (m) return `${m[1]}-${m[2].padStart(2, "0")}-${m[3].padStart(2, "0")}`;
+    if (digits.length === 8) {
+      return `${digits.slice(0, 4)}-${digits.slice(4, 6)}-${digits.slice(6, 8)}`;
+    }
+  }
+  if (format === "MM/DD/YYYY") {
+    const m = s.match(/^(\d{1,2})[/\-.](\d{1,2})[/\-.](\d{4})$/);
+    if (m) return `${m[3]}-${m[1].padStart(2, "0")}-${m[2].padStart(2, "0")}`;
+    if (digits.length === 8) {
+      return `${digits.slice(4, 8)}-${digits.slice(0, 2)}-${digits.slice(2, 4)}`;
+    }
+  }
+  if (format === "DD/MM/YYYY") {
+    const m = s.match(/^(\d{1,2})[/\-.](\d{1,2})[/\-.](\d{4})$/);
+    if (m) return `${m[3]}-${m[2].padStart(2, "0")}-${m[1].padStart(2, "0")}`;
+    if (digits.length === 8) {
+      return `${digits.slice(4, 8)}-${digits.slice(2, 4)}-${digits.slice(0, 2)}`;
+    }
+  }
+  throw new Error(
+    `[AppFunnel] Invalid date format: "${input}". Expected format ${format} (e.g. ${{
+      "MM/DD/YYYY": "03/15/1990 or 03151990",
+      "DD/MM/YYYY": "15/03/1990 or 15031990",
+      "YYYY-MM-DD": "1990-03-15 or 19900315"
+    }[format]}).`
+  );
+}
+
+// src/hooks/useUser.ts
 function useUser() {
-  const { variableStore } = chunkBUF5FDKC_cjs.useFunnelContext();
+  const { variableStore, tracker } = chunkEVUYCLVY_cjs.useFunnelContext();
   const subscribe = react.useCallback(
     (cb) => variableStore.subscribe(cb, { prefix: "user." }),
     [variableStore]
@@ -60,6 +157,7 @@ function useUser() {
       stripeCustomerId: variables["user.stripeCustomerId"] || "",
       paddleCustomerId: variables["user.paddleCustomerId"] || "",
       dateOfBirth: variables["user.dateOfBirth"] || "",
+      marketingConsent: variables["user.marketingConsent"] === true,
       setEmail(email) {
         variableStore.set("user.email", email);
       },
@@ -67,14 +165,20 @@ function useUser() {
         variableStore.set("user.name", name);
       },
       setDateOfBirth(dateOfBirth) {
-        variableStore.set("user.dateOfBirth", dateOfBirth);
+        variableStore.set("user.dateOfBirth", toISODate(dateOfBirth));
+      },
+      setMarketingConsent(consent) {
+        variableStore.set("user.marketingConsent", consent);
+      },
+      identify(email) {
+        tracker.identify(email);
       }
     }),
-    [variables, variableStore]
+    [variables, variableStore, tracker]
   );
 }
 function useUserProperty(field) {
-  const { variableStore } = chunkBUF5FDKC_cjs.useFunnelContext();
+  const { variableStore } = chunkEVUYCLVY_cjs.useFunnelContext();
   const key = `user.${field}`;
   const subscribe = react.useCallback(
     (cb) => variableStore.subscribe(cb, { keys: [key] }),
@@ -91,47 +195,26 @@ function useUserProperty(field) {
   );
   return [value, setValue];
 }
-function useResponse(key) {
-  const { variableStore } = chunkBUF5FDKC_cjs.useFunnelContext();
-  const prefixedKey = `answers.${key}`;
+function useDateOfBirth(format = "MM/DD/YYYY") {
+  const { variableStore } = chunkEVUYCLVY_cjs.useFunnelContext();
+  const key = "user.dateOfBirth";
   const subscribe = react.useCallback(
-    (cb) => variableStore.subscribe(cb, { keys: [prefixedKey] }),
-    [variableStore, prefixedKey]
+    (cb) => variableStore.subscribe(cb, { keys: [key] }),
+    [variableStore]
   );
   const getSnapshot = react.useCallback(
-    () => variableStore.get(prefixedKey),
-    [variableStore, prefixedKey]
+    () => variableStore.get(key) || "",
+    [variableStore]
   );
   const value = react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   const setValue = react.useCallback(
-    (v) => variableStore.set(prefixedKey, v),
-    [variableStore, prefixedKey]
+    (v) => variableStore.set(key, toISODateWithFormat(v, format)),
+    [variableStore, format]
   );
   return [value, setValue];
 }
-function useResponses() {
-  const { variableStore } = chunkBUF5FDKC_cjs.useFunnelContext();
-  const subscribe = react.useCallback(
-    (cb) => variableStore.subscribe(cb, { prefix: "answers." }),
-    [variableStore]
-  );
-  const getSnapshot = react.useCallback(
-    () => variableStore.getState(),
-    [variableStore]
-  );
-  const variables = react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  return react.useMemo(() => {
-    const result = {};
-    for (const [key, value] of Object.entries(variables)) {
-      if (key.startsWith("answers.")) {
-        result[key.slice(8)] = value;
-      }
-    }
-    return result;
-  }, [variables]);
-}
 function useQueryParams() {
-  const { variableStore } = chunkBUF5FDKC_cjs.useFunnelContext();
+  const { variableStore } = chunkEVUYCLVY_cjs.useFunnelContext();
   const subscribe = react.useCallback(
     (cb) => variableStore.subscribe(cb, { prefix: "query." }),
     [variableStore]
@@ -152,7 +235,7 @@ function useQueryParams() {
   }, [variables]);
 }
 function useQueryParam(key) {
-  const { variableStore } = chunkBUF5FDKC_cjs.useFunnelContext();
+  const { variableStore } = chunkEVUYCLVY_cjs.useFunnelContext();
   const prefixedKey = `query.${key}`;
   const subscribe = react.useCallback(
     (cb) => variableStore.subscribe(cb, { keys: [prefixedKey] }),
@@ -165,7 +248,7 @@ function useQueryParam(key) {
   return react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 }
 function useData(key) {
-  const { variableStore } = chunkBUF5FDKC_cjs.useFunnelContext();
+  const { variableStore } = chunkEVUYCLVY_cjs.useFunnelContext();
   const prefixedKey = `data.${key}`;
   const subscribe = react.useCallback(
     (cb) => variableStore.subscribe(cb, { keys: [prefixedKey] }),
@@ -218,7 +301,7 @@ function detect24Hour(locale) {
   }
 }
 function useTranslation() {
-  const { i18n } = chunkBUF5FDKC_cjs.useFunnelContext();
+  const { i18n } = chunkEVUYCLVY_cjs.useFunnelContext();
   const subscribe = react.useCallback(
     (cb) => i18n.subscribe(cb),
     [i18n]
@@ -240,66 +323,8 @@ function useTranslation() {
   const availableLocales = i18n.getAvailableLocales();
   return { t, locale, setLocale, availableLocales };
 }
-function useNavigation() {
-  const { router, variableStore, tracker } = chunkBUF5FDKC_cjs.useFunnelContext();
-  react.useSyncExternalStore(
-    react.useCallback((cb) => router.subscribe(cb), [router]),
-    react.useCallback(() => router.getSnapshot(), [router]),
-    react.useCallback(() => router.getSnapshot(), [router])
-  );
-  const afterNavigate = react.useCallback((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()
-    });
-  }, [router, tracker, variableStore]);
-  const goToNextPage = react.useCallback(() => {
-    const previousPage = router.getCurrentPage();
-    if (previousPage) {
-      tracker.stopPageTracking();
-    }
-    const variables = variableStore.getState();
-    const nextKey = router.goToNextPage(variables);
-    if (nextKey) {
-      afterNavigate(nextKey);
-    }
-  }, [router, tracker, variableStore, afterNavigate]);
-  const goBack = react.useCallback(() => {
-    tracker.stopPageTracking();
-    const prevKey = router.goBack();
-    if (prevKey) {
-      afterNavigate(prevKey);
-    }
-  }, [router, tracker, afterNavigate]);
-  const goToPage = react.useCallback((pageKey) => {
-    tracker.stopPageTracking();
-    const key = router.goToPage(pageKey);
-    if (key) {
-      afterNavigate(key);
-    }
-  }, [router, tracker, afterNavigate]);
-  return {
-    goToNextPage,
-    goBack,
-    goToPage,
-    currentPage: router.getCurrentPage(),
-    pageHistory: router.getPageHistory(),
-    progress: router.getProgress()
-  };
-}
 function useProducts() {
-  const { products, variableStore, selectProduct: ctxSelect } = chunkBUF5FDKC_cjs.useFunnelContext();
+  const { products, variableStore, selectProduct: ctxSelect } = chunkEVUYCLVY_cjs.useFunnelContext();
   const subscribe = react.useCallback(
     (cb) => variableStore.subscribe(cb, { keys: ["products.selectedProductId"] }),
     [variableStore]
@@ -316,32 +341,19 @@ function useProducts() {
   return { products, selected, select };
 }
 function useTracking() {
-  const { tracker } = chunkBUF5FDKC_cjs.useFunnelContext();
+  const { tracker } = chunkEVUYCLVY_cjs.useFunnelContext();
   const track = react.useCallback(
     (eventName, data) => {
       tracker.track(eventName, data);
     },
     [tracker]
   );
-  const identify = react.useCallback(
-    (email) => {
-      tracker.identify(email);
-    },
-    [tracker]
-  );
-  return { track, identify };
+  return { track };
 }
-var PAYMENT_KEYS = [
-  "card.last4",
-  "card.brand",
-  "card.expMonth",
-  "card.expYear",
-  "payment.loading",
-  "payment.error",
-  "payment.customerId"
-];
+var API_BASE_URL = "https://api.appfunnel.net";
+var PAYMENT_KEYS = ["payment.loading", "payment.error"];
 function usePayment() {
-  const { variableStore } = chunkBUF5FDKC_cjs.useFunnelContext();
+  const { variableStore, products, campaignId, tracker } = chunkEVUYCLVY_cjs.useFunnelContext();
   const subscribe = react.useCallback(
     (cb) => variableStore.subscribe(cb, { keys: PAYMENT_KEYS }),
     [variableStore]
@@ -351,20 +363,258 @@ function usePayment() {
     [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;
-    const customerId = variables["payment.customerId"] || null;
-    return {
-      customerId,
-      isAuthorized: !!last4,
+  const purchase = react.useCallback(
+    async (productId, options) => {
+      console.log("[Purchase] Starting purchase for product:", productId);
+      if (globalThis.__APPFUNNEL_DEV__) {
+        console.log(
+          "[Purchase] Dev mode \u2014 simulating success (500ms delay)"
+        );
+        variableStore.set("payment.loading", true);
+        await new Promise((r) => setTimeout(r, 500));
+        variableStore.set("payment.error", "");
+        console.log("[Purchase] Dev mode \u2014 success");
+        options?.onSuccess?.();
+        return true;
+      }
+      const customerId = variableStore.get(
+        "user.stripeCustomerId"
+      );
+      console.log("[Purchase] Customer ID:", customerId || "(none)");
+      if (!customerId) {
+        const msg = "Please complete payment authorization first";
+        console.error("[Purchase] Failed:", msg);
+        variableStore.set("payment.error", msg);
+        options?.onError?.(msg);
+        return false;
+      }
+      const product = products.find((p) => p.id === productId);
+      console.log(
+        "[Purchase] Product found:",
+        product ? {
+          id: product.id,
+          name: product.name,
+          stripePriceId: product.stripePriceId
+        } : "(not found)"
+      );
+      if (!product?.stripePriceId) {
+        const msg = "Product not found or missing Stripe price";
+        console.error("[Purchase] Failed:", msg);
+        variableStore.set("payment.error", msg);
+        options?.onError?.(msg);
+        return false;
+      }
+      const trialPeriodDays = product.hasTrial ? product.trialDays : void 0;
+      const trialChargePriceId = product.paidTrial && product.trialStorePriceId ? product.trialStorePriceId : void 0;
+      console.log("[Purchase] Trial config:", {
+        trialPeriodDays,
+        trialChargePriceId,
+        hasTrial: product.hasTrial,
+        paidTrial: product.paidTrial
+      });
+      variableStore.set("payment.loading", true);
+      variableStore.set("payment.error", "");
+      const requestBody = {
+        campaignId,
+        sessionId: tracker.getSessionId(),
+        stripePriceId: product.stripePriceId,
+        trialPeriodDays,
+        trialChargePriceId
+      };
+      console.log(
+        "[Purchase] Sending request:",
+        `${API_BASE_URL}/campaign/${campaignId}/stripe/purchase`,
+        requestBody
+      );
+      try {
+        const response = await fetch(
+          `${API_BASE_URL}/campaign/${campaignId}/stripe/purchase`,
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(requestBody)
+          }
+        );
+        console.log("[Purchase] Response status:", response.status);
+        let result = await response.json();
+        console.log("[Purchase] Response body:", result);
+        if (!result.success && result.requiresAction) {
+          console.log(
+            "[Purchase] 3DS authentication required, loading Stripe..."
+          );
+          const { loadStripe: loadStripe2 } = await import('@stripe/stripe-js');
+          const stripeInstance = await loadStripe2(
+            result.publishableKey
+          );
+          if (!stripeInstance) {
+            const msg = "Failed to load payment processor";
+            console.error("[Purchase] Failed:", msg);
+            variableStore.set("payment.error", msg);
+            options?.onError?.(msg);
+            return false;
+          }
+          console.log(
+            "[Purchase] Confirming card payment with 3DS..."
+          );
+          const { error: confirmError, paymentIntent: confirmedPi } = await stripeInstance.confirmCardPayment(
+            result.clientSecret,
+            {
+              payment_method: result.paymentMethodId
+            }
+          );
+          if (confirmError || !confirmedPi || confirmedPi.status !== "succeeded") {
+            const msg = confirmError?.message || "Payment authentication failed";
+            console.error("[Purchase] 3DS failed:", msg);
+            variableStore.set("payment.error", msg);
+            options?.onError?.(msg);
+            return false;
+          }
+          console.log(
+            "[Purchase] 3DS succeeded, retrying purchase with confirmed PI:",
+            confirmedPi.id
+          );
+          const retryResponse = await fetch(
+            `${API_BASE_URL}/campaign/${campaignId}/stripe/purchase`,
+            {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                campaignId,
+                sessionId: tracker.getSessionId(),
+                stripePriceId: product.stripePriceId,
+                trialPeriodDays,
+                trialChargePriceId,
+                onSessionPiId: confirmedPi.id
+              })
+            }
+          );
+          result = await retryResponse.json();
+          console.log("[Purchase] Retry response:", result);
+        }
+        if (result.success) {
+          console.log("[Purchase] Success! Type:", result.type);
+          variableStore.set("payment.error", "");
+          if (result.type === "validate_only") {
+            console.log(
+              "[Purchase] Validate-only \u2014 setting card variables"
+            );
+            if (result.card) {
+              variableStore.setMany({
+                "card.last4": result.card.last4,
+                "card.brand": result.card.brand,
+                "card.expMonth": result.card.expMonth,
+                "card.expYear": result.card.expYear,
+                "card.funding": result.card.funding
+              });
+            }
+            if (result.eventId) {
+              console.log(
+                "[Purchase] Tracking purchase.complete (validate_only), eventId:",
+                result.eventId
+              );
+              tracker.track("purchase.complete", {
+                eventId: result.eventId,
+                amount: product.rawPrice ? product.rawPrice / 100 : 0,
+                currency: product.currencyCode || "USD"
+              });
+            }
+          } else if (result.type === "one_time") {
+            console.log(
+              "[Purchase] One-time charge \u2014 paymentIntentId:",
+              result.paymentIntentId
+            );
+            variableStore.set(
+              "stripe.paymentIntentId",
+              result.paymentIntentId
+            );
+            variableStore.set("payment.status", result.status);
+            if (result.eventId) {
+              console.log(
+                "[Purchase] Tracking purchase.complete (one_time), eventId:",
+                result.eventId
+              );
+              tracker.track("purchase.complete", {
+                eventId: result.eventId,
+                amount: product.rawPrice ? product.rawPrice / 100 : 0,
+                currency: product.currencyCode || "USD"
+              });
+            }
+          } else {
+            console.log(
+              "[Purchase] Subscription \u2014 subscriptionId:",
+              result.subscriptionId,
+              "status:",
+              result.status
+            );
+            variableStore.set(
+              "stripe.subscriptionId",
+              result.subscriptionId
+            );
+            variableStore.set("subscription.status", result.status);
+            if (result.trialCharge) {
+              console.log(
+                "[Purchase] Tracking trial charge purchase.complete"
+              );
+              tracker.track("purchase.complete", {
+                eventId: result.eventIds?.trialCharge,
+                amount: result.trialCharge.amount / 100,
+                currency: "USD"
+              });
+            }
+            if (result.eventIds?.subscription) {
+              console.log(
+                "[Purchase] Tracking subscription.created, eventId:",
+                result.eventIds.subscription
+              );
+              tracker.track("subscription.created", {
+                eventId: result.eventIds.subscription,
+                subscriptionId: result.subscriptionId,
+                status: result.status
+              });
+            }
+            if (result.eventIds?.firstPeriod) {
+              console.log(
+                "[Purchase] Tracking first-period purchase.complete, eventId:",
+                result.eventIds.firstPeriod
+              );
+              tracker.track("purchase.complete", {
+                eventId: result.eventIds.firstPeriod,
+                amount: product.rawPrice ? product.rawPrice / 100 : 0,
+                currency: product.currencyCode || "USD"
+              });
+            }
+          }
+          console.log("[Purchase] Calling onSuccess callback");
+          options?.onSuccess?.();
+          return true;
+        } else {
+          const msg = result.error || "Purchase failed";
+          console.error("[Purchase] Failed:", msg);
+          variableStore.set("payment.error", msg);
+          options?.onError?.(msg);
+          return false;
+        }
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : "Purchase failed";
+        console.error("[Purchase] Exception:", err);
+        variableStore.set("payment.error", msg);
+        options?.onError?.(msg);
+        return false;
+      } finally {
+        console.log("[Purchase] Done \u2014 setting loading to false");
+        variableStore.set("payment.loading", false);
+      }
+    },
+    [variableStore, products, campaignId, tracker]
+  );
+  return react.useMemo(
+    () => ({
       loading: !!variables["payment.loading"],
       error: variables["payment.error"] || null,
-      cardDetails: last4 ? { last4, brand, expMonth, expYear } : null
-    };
-  }, [variables]);
+      purchase
+    }),
+    [variables, purchase]
+  );
 }
 var DEVICE_KEYS = [
   "os.name",
@@ -386,7 +636,7 @@ var DEVICE_KEYS = [
   "browser.language"
 ];
 function useDeviceInfo() {
-  const { variableStore } = chunkBUF5FDKC_cjs.useFunnelContext();
+  const { variableStore } = chunkEVUYCLVY_cjs.useFunnelContext();
   const subscribe = react.useCallback(
     (cb) => variableStore.subscribe(cb, { keys: DEVICE_KEYS }),
     [variableStore]
@@ -422,6 +672,95 @@ function useDeviceInfo() {
     }
   }), [variables]);
 }
+function useSafeArea() {
+  const [insets, setInsets] = react.useState({ top: 0, right: 0, bottom: 0, left: 0 });
+  react.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const el = document.createElement("div");
+    el.style.cssText = [
+      "position:fixed",
+      "top:env(safe-area-inset-top,0px)",
+      "right:env(safe-area-inset-right,0px)",
+      "bottom:env(safe-area-inset-bottom,0px)",
+      "left:env(safe-area-inset-left,0px)",
+      "pointer-events:none",
+      "visibility:hidden",
+      "z-index:-1"
+    ].join(";");
+    document.body.appendChild(el);
+    function read() {
+      const style = getComputedStyle(el);
+      setInsets({
+        top: parseFloat(style.top) || 0,
+        right: parseFloat(style.right) || 0,
+        bottom: parseFloat(style.bottom) || 0,
+        left: parseFloat(style.left) || 0
+      });
+    }
+    read();
+    const observer = new ResizeObserver(read);
+    observer.observe(el);
+    window.addEventListener("resize", read);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", read);
+      el.remove();
+    };
+  }, []);
+  return insets;
+}
+function useKeyboard() {
+  const [state, setState] = react.useState({ isOpen: false, height: 0 });
+  const timeoutRef = react.useRef();
+  react.useEffect(() => {
+    if (typeof window === "undefined") return;
+    if ("virtualKeyboard" in navigator) {
+      const vk = navigator.virtualKeyboard;
+      vk.overlaysContent = true;
+      const handler = () => {
+        const h = vk.boundingRect.height;
+        setState((prev) => {
+          if (prev.height === h && prev.isOpen === h > 0) return prev;
+          return { isOpen: h > 0, height: h };
+        });
+      };
+      vk.addEventListener("geometrychange", handler);
+      handler();
+      return () => vk.removeEventListener("geometrychange", handler);
+    }
+    const vv = window.visualViewport;
+    if (!vv) return;
+    let layoutHeight = window.innerHeight;
+    function compute() {
+      const kbHeight = Math.max(0, layoutHeight - vv.height);
+      const h = kbHeight > 40 ? Math.round(kbHeight) : 0;
+      setState((prev) => {
+        if (prev.height === h && prev.isOpen === h > 0) return prev;
+        return { isOpen: h > 0, height: h };
+      });
+    }
+    function onViewportResize() {
+      compute();
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(compute, 1e3);
+    }
+    function onWindowResize() {
+      layoutHeight = window.innerHeight;
+      compute();
+    }
+    vv.addEventListener("resize", onViewportResize);
+    window.addEventListener("resize", onWindowResize);
+    window.addEventListener("orientationchange", onWindowResize);
+    compute();
+    return () => {
+      clearTimeout(timeoutRef.current);
+      vv.removeEventListener("resize", onViewportResize);
+      window.removeEventListener("resize", onWindowResize);
+      window.removeEventListener("orientationchange", onWindowResize);
+    };
+  }, []);
+  return state;
+}
 var PAGE_KEYS = [
   "page.currentId",
   "page.currentIndex",
@@ -431,7 +770,7 @@ var PAGE_KEYS = [
   "page.startedAt"
 ];
 function usePageData() {
-  const { variableStore } = chunkBUF5FDKC_cjs.useFunnelContext();
+  const { variableStore } = chunkEVUYCLVY_cjs.useFunnelContext();
   const subscribe = react.useCallback(
     (cb) => variableStore.subscribe(cb, { keys: PAGE_KEYS }),
     [variableStore]
@@ -453,28 +792,477 @@ function usePageData() {
 
 // src/hooks/useFunnel.ts
 function useFunnel() {
-  const { funnelId, campaignId, tracker } = chunkBUF5FDKC_cjs.useFunnelContext();
+  const { funnelId, campaignId, tracker } = chunkEVUYCLVY_cjs.useFunnelContext();
   return {
     funnelId,
     campaignId,
     sessionId: tracker.getSessionId(),
     variables: useVariables(),
     user: useUser(),
-    responses: useResponses(),
+    responses: chunkXP44I2MU_cjs.useResponses(),
     queryParams: useQueryParams(),
-    navigation: useNavigation(),
+    navigation: chunkXP44I2MU_cjs.useNavigation(),
     products: useProducts(),
     tracking: useTracking(),
     payment: usePayment()
   };
 }
-var API_BASE_URL = "https://api.appfunnel.net";
+var FONT = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+var inputStyle = (focused) => ({
+  width: "100%",
+  padding: "12px",
+  border: `1px solid ${focused ? "#666" : "#e0e0e0"}`,
+  borderRadius: "6px",
+  fontSize: "14px",
+  fontFamily: FONT,
+  outline: "none",
+  backgroundColor: "#fff",
+  boxSizing: "border-box",
+  transition: "border-color 0.15s"
+});
+var labelStyle = {
+  display: "block",
+  fontSize: "14px",
+  fontWeight: 500,
+  color: "#333",
+  marginBottom: "6px",
+  fontFamily: FONT
+};
+function CardBrandBadges() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "10px", fontWeight: 700, color: "#1a1f71", background: "#fff", border: "1px solid #e0e0e0", borderRadius: "3px", padding: "2px 4px", fontFamily: FONT }, children: "VISA" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "10px", fontWeight: 700, color: "#eb001b", background: "#fff", border: "1px solid #e0e0e0", borderRadius: "3px", padding: "2px 4px", fontFamily: FONT }, children: "MC" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "10px", fontWeight: 700, color: "#ff6000", background: "#fff", border: "1px solid #e0e0e0", borderRadius: "3px", padding: "2px 4px", fontFamily: FONT }, children: "DISC" })
+  ] });
+}
+function CvcIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "16", viewBox: "0 0 20 16", fill: "none", style: { opacity: 0.4 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "19", height: "15", rx: "2", stroke: "#888" }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "4", width: "20", height: "3", fill: "#888" }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "10", width: "8", height: "2", rx: "1", fill: "#ccc" }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: "14", y: "12", fontSize: "6", fill: "#888", fontFamily: FONT, children: "123" })
+  ] });
+}
+function DemoElementsForm({ onReady }) {
+  const [cardNumber, setCardNumber] = react.useState("");
+  const [expiry, setExpiry] = react.useState("");
+  const [cvc, setCvc] = react.useState("");
+  const [country, setCountry] = react.useState("Denmark");
+  const [focusedField, setFocusedField] = react.useState(null);
+  const readyFired = react.useRef(false);
+  react.useEffect(() => {
+    if (!readyFired.current) {
+      readyFired.current = true;
+      onReady?.();
+    }
+  }, [onReady]);
+  const formatCardNumber = (val) => {
+    const digits = val.replace(/\D/g, "").slice(0, 16);
+    return digits.replace(/(.{4})/g, "$1 ").trim();
+  };
+  const formatExpiry = (val) => {
+    const digits = val.replace(/\D/g, "").slice(0, 4);
+    if (digits.length > 2) return digits.slice(0, 2) + " / " + digits.slice(2);
+    return digits;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontFamily: FONT }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "14px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Card number" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            value: cardNumber,
+            onChange: (e) => setCardNumber(formatCardNumber(e.target.value)),
+            onFocus: () => setFocusedField("card"),
+            onBlur: () => setFocusedField(null),
+            placeholder: "1234 1234 1234 1234",
+            style: inputStyle(focusedField === "card")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", right: "12px", top: "50%", transform: "translateY(-50%)" }, children: /* @__PURE__ */ jsxRuntime.jsx(CardBrandBadges, {}) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px", marginBottom: "14px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Expiry date" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            value: expiry,
+            onChange: (e) => setExpiry(formatExpiry(e.target.value)),
+            onFocus: () => setFocusedField("expiry"),
+            onBlur: () => setFocusedField(null),
+            placeholder: "MM / YY",
+            style: inputStyle(focusedField === "expiry")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Security code" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              value: cvc,
+              onChange: (e) => setCvc(e.target.value.replace(/\D/g, "").slice(0, 4)),
+              onFocus: () => setFocusedField("cvc"),
+              onBlur: () => setFocusedField(null),
+              placeholder: "CVC",
+              style: inputStyle(focusedField === "cvc")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", right: "12px", top: "50%", transform: "translateY(-50%)" }, children: /* @__PURE__ */ jsxRuntime.jsx(CvcIcon, {}) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "14px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Country" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "select",
+        {
+          value: country,
+          onChange: (e) => setCountry(e.target.value),
+          onFocus: () => setFocusedField("country"),
+          onBlur: () => setFocusedField(null),
+          style: {
+            ...inputStyle(focusedField === "country"),
+            appearance: "none",
+            backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E")`,
+            backgroundRepeat: "no-repeat",
+            backgroundPosition: "right 12px center",
+            paddingRight: "32px"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Australia" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Austria" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Belgium" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Brazil" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Canada" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Denmark" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Finland" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { children: "France" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Germany" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Ireland" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Italy" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Japan" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Netherlands" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { children: "New Zealand" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Norway" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Poland" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Portugal" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Spain" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Sweden" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Switzerland" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { children: "United Kingdom" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { children: "United States" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "12px", color: "#6b7280", lineHeight: 1.5, margin: 0, fontFamily: FONT }, children: "By providing your card information, you allow the merchant to charge your card for future payments in accordance with their terms." })
+  ] });
+}
+function DemoEmbeddedForm({ product, onReady }) {
+  const readyFired = react.useRef(false);
+  const [email, setEmail] = react.useState("");
+  const [cardNumber, setCardNumber] = react.useState("");
+  const [expiry, setExpiry] = react.useState("");
+  const [cvc, setCvc] = react.useState("");
+  const [name, setName] = react.useState("");
+  const [country, setCountry] = react.useState("Denmark");
+  const [focusedField, setFocusedField] = react.useState(null);
+  react.useEffect(() => {
+    if (!readyFired.current) {
+      readyFired.current = true;
+      onReady?.();
+    }
+  }, [onReady]);
+  const formatCardNumber = (val) => {
+    const digits = val.replace(/\D/g, "").slice(0, 16);
+    return digits.replace(/(.{4})/g, "$1 ").trim();
+  };
+  const formatExpiry = (val) => {
+    const digits = val.replace(/\D/g, "").slice(0, 4);
+    if (digits.length > 2) return digits.slice(0, 2) + " / " + digits.slice(2);
+    return digits;
+  };
+  const embeddedInputStyle = (focused) => ({
+    width: "100%",
+    padding: "10px 12px",
+    border: "none",
+    borderBottom: `1px solid ${focused ? "#666" : "#e0e0e0"}`,
+    fontSize: "14px",
+    fontFamily: FONT,
+    outline: "none",
+    backgroundColor: "#fff",
+    boxSizing: "border-box"
+  });
+  const displayPrice = product?.hasTrial ? product.trialPrice : product?.price;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontFamily: FONT, border: "1px solid #e0e0e0", borderRadius: "12px", overflow: "hidden", background: "#fff" }, children: [
+    product && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "24px 20px", borderBottom: "1px solid #e0e0e0" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "14px", color: "#666", marginBottom: "4px" }, children: [
+        "Pay ",
+        product.displayName || product.name
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "28px", fontWeight: 700, color: "#333", marginBottom: "4px" }, children: [
+        product.currencyCode?.toUpperCase(),
+        displayPrice
+      ] }),
+      product.hasTrial && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "13px", color: "#666" }, children: [
+        "Then ",
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { textDecoration: "underline" }, children: [
+          product.currencyCode?.toUpperCase(),
+          product.price
+        ] }),
+        " every ",
+        product.period
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          style: {
+            marginTop: "12px",
+            padding: "6px 14px",
+            borderRadius: "6px",
+            border: "1px solid #e0e0e0",
+            backgroundColor: "#fff",
+            color: "#333",
+            fontSize: "13px",
+            cursor: "default",
+            fontFamily: FONT
+          },
+          children: "View details \u25BE"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "20px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "16px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { style: { ...labelStyle, fontSize: "13px", color: "#666" }, children: "Email" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "email",
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            onFocus: () => setFocusedField("email"),
+            onBlur: () => setFocusedField(null),
+            placeholder: "you@example.com",
+            style: embeddedInputStyle(focusedField === "email")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "16px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { style: { ...labelStyle, fontSize: "13px", color: "#666" }, children: "Card information" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { border: "1px solid #e0e0e0", borderRadius: "6px", overflow: "hidden" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "text",
+                value: cardNumber,
+                onChange: (e) => setCardNumber(formatCardNumber(e.target.value)),
+                onFocus: () => setFocusedField("card"),
+                onBlur: () => setFocusedField(null),
+                placeholder: "1234 1234 1234 1234",
+                style: { ...embeddedInputStyle(focusedField === "card"), padding: "12px" }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", right: "12px", top: "50%", transform: "translateY(-50%)" }, children: /* @__PURE__ */ jsxRuntime.jsx(CardBrandBadges, {}) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "text",
+                value: expiry,
+                onChange: (e) => setExpiry(formatExpiry(e.target.value)),
+                onFocus: () => setFocusedField("expiry"),
+                onBlur: () => setFocusedField(null),
+                placeholder: "MM / YY",
+                style: { ...embeddedInputStyle(focusedField === "expiry"), borderRight: "1px solid #e0e0e0", padding: "12px" }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "text",
+                  value: cvc,
+                  onChange: (e) => setCvc(e.target.value.replace(/\D/g, "").slice(0, 4)),
+                  onFocus: () => setFocusedField("cvc"),
+                  onBlur: () => setFocusedField(null),
+                  placeholder: "CVC",
+                  style: { ...embeddedInputStyle(focusedField === "cvc"), padding: "12px" }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", right: "12px", top: "50%", transform: "translateY(-50%)" }, children: /* @__PURE__ */ jsxRuntime.jsx(CvcIcon, {}) })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "16px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { style: { ...labelStyle, fontSize: "13px", color: "#666" }, children: "Cardholder name" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            value: name,
+            onChange: (e) => setName(e.target.value),
+            onFocus: () => setFocusedField("name"),
+            onBlur: () => setFocusedField(null),
+            placeholder: "Full name on card",
+            style: inputStyle(focusedField === "name")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { style: { ...labelStyle, fontSize: "13px", color: "#666" }, children: "Country or region" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "select",
+          {
+            value: country,
+            onChange: (e) => setCountry(e.target.value),
+            onFocus: () => setFocusedField("country"),
+            onBlur: () => setFocusedField(null),
+            style: {
+              ...inputStyle(focusedField === "country"),
+              appearance: "none",
+              backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E")`,
+              backgroundRepeat: "no-repeat",
+              backgroundPosition: "right 12px center",
+              paddingRight: "32px"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Australia" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Austria" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Belgium" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Brazil" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Canada" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Denmark" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Finland" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { children: "France" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Germany" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Ireland" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Italy" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Japan" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Netherlands" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { children: "New Zealand" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Norway" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Poland" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Portugal" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Spain" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Sweden" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Switzerland" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { children: "United Kingdom" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { children: "United States" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          disabled: true,
+          style: {
+            width: "100%",
+            padding: "14px",
+            borderRadius: "6px",
+            border: "none",
+            backgroundColor: "#0570de",
+            color: "#fff",
+            fontSize: "16px",
+            fontWeight: 600,
+            cursor: "default",
+            fontFamily: FONT,
+            opacity: 0.7
+          },
+          children: "Subscribe"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", marginTop: "12px", fontSize: "12px", color: "#aaa" }, children: [
+        "Powered by ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 700, letterSpacing: "-0.3px" }, children: "stripe" })
+      ] })
+    ] })
+  ] });
+}
+var DemoStripePaymentForm = react.forwardRef(
+  function DemoStripePaymentForm2({
+    productId,
+    mode = "checkout",
+    variant = "elements",
+    onSuccess,
+    onError,
+    onReady,
+    className
+  }, ref) {
+    const { variableStore, tracker, products } = chunkEVUYCLVY_cjs.useFunnelContext();
+    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 hasFiredStart = react.useRef(false);
+    react.useEffect(() => {
+      if (hasFiredStart.current) return;
+      hasFiredStart.current = true;
+      variableStore.set("payment.loading", false);
+      tracker.track("checkout.start", {
+        productId: product?.id,
+        priceId: product?.stripePriceId || product?.storePriceId,
+        productName: product?.displayName
+      });
+    }, [product, tracker, variableStore]);
+    const handleSubmit = react.useCallback(async () => {
+      variableStore.set("payment.loading", true);
+      await new Promise((r) => setTimeout(r, 800));
+      try {
+        tracker.track("checkout.payment_added");
+        if (validateOnly) {
+          variableStore.setMany({
+            "card.last4": "4242",
+            "card.brand": "visa",
+            "card.expMonth": 12,
+            "card.expYear": 2030,
+            "card.funding": "credit",
+            "payment.error": ""
+          });
+          onSuccess?.();
+          return;
+        }
+        variableStore.set("payment.error", "");
+        tracker.track("purchase.complete", {
+          amount: product?.rawPrice ? product.rawPrice / 100 : 0,
+          currency: product?.currencyCode || "USD"
+        });
+        onSuccess?.();
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : "An error occurred";
+        variableStore.set("payment.error", msg);
+        onError?.(msg);
+      } finally {
+        variableStore.set("payment.loading", false);
+      }
+    }, [validateOnly, variableStore, tracker, product, onSuccess, onError]);
+    react.useImperativeHandle(ref, () => ({ submit: handleSubmit }), [handleSubmit]);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: variant === "embedded" ? /* @__PURE__ */ jsxRuntime.jsx(DemoEmbeddedForm, { product, onReady }) : /* @__PURE__ */ jsxRuntime.jsx(DemoElementsForm, { onReady }) });
+  }
+);
+var API_BASE_URL2 = "https://api.appfunnel.net";
+var isDevMode = () => typeof globalThis !== "undefined" && !!globalThis.__APPFUNNEL_DEV__;
 var InnerPaymentForm = react.forwardRef(
   function InnerPaymentForm2({ paymentMode, validateOnly, onSuccess, onError, onReady, layout }, ref) {
     const stripe = reactStripeJs.useStripe();
     const elements = reactStripeJs.useElements();
     const [error, setError] = react.useState(null);
-    const { variableStore, campaignId, tracker, products } = chunkBUF5FDKC_cjs.useFunnelContext();
+    const { variableStore, campaignId, tracker, products } = chunkEVUYCLVY_cjs.useFunnelContext();
     const readyFired = react.useRef(false);
     react.useEffect(() => {
       if (stripe && elements && !readyFired.current) {
@@ -516,7 +1304,7 @@ var InnerPaymentForm = react.forwardRef(
             return;
           }
           const response2 = await fetch(
-            `${API_BASE_URL}/campaign/${campaignId}/stripe/validate-card`,
+            `${API_BASE_URL2}/campaign/${campaignId}/stripe/validate-card`,
             {
               method: "POST",
               headers: { "Content-Type": "application/json" },
@@ -557,7 +1345,7 @@ var InnerPaymentForm = react.forwardRef(
           return;
         }
         const response = await fetch(
-          `${API_BASE_URL}/campaign/${campaignId}/stripe/purchase`,
+          `${API_BASE_URL2}/campaign/${campaignId}/stripe/purchase`,
           {
             method: "POST",
             headers: { "Content-Type": "application/json" },
@@ -602,8 +1390,8 @@ var InnerPaymentForm = react.forwardRef(
     ] });
   }
 );
-var StripePaymentForm = react.forwardRef(
-  function StripePaymentForm2({
+var RealStripePaymentForm = react.forwardRef(
+  function RealStripePaymentForm2({
     productId,
     mode = "checkout",
     variant = "elements",
@@ -614,7 +1402,7 @@ var StripePaymentForm = react.forwardRef(
     appearance,
     layout
   }, ref) {
-    const { campaignId, tracker, variableStore, products } = chunkBUF5FDKC_cjs.useFunnelContext();
+    const { campaignId, tracker, variableStore, products } = chunkEVUYCLVY_cjs.useFunnelContext();
     const [email] = useVariable("user.email");
     const validateOnly = mode === "validate-only";
     const product = react.useMemo(() => {
@@ -642,7 +1430,7 @@ var StripePaymentForm = react.forwardRef(
         try {
           if (variant === "embedded") {
             const response = await fetch(
-              `${API_BASE_URL}/campaign/${campaignId}/stripe/checkout-session`,
+              `${API_BASE_URL2}/campaign/${campaignId}/stripe/checkout-session`,
               {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
@@ -668,7 +1456,7 @@ var StripePaymentForm = react.forwardRef(
               priceId: product.storePriceId
             };
             if (validateOnly) body.validateOnly = true;
-            const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+            const response = await fetch(`${API_BASE_URL2}${endpoint}`, {
               method: "POST",
               headers: { "Content-Type": "application/json" },
               body: JSON.stringify(body)
@@ -744,6 +1532,14 @@ var StripePaymentForm = react.forwardRef(
     ) }) });
   }
 );
+var StripePaymentForm = react.forwardRef(
+  function StripePaymentForm2(props, ref) {
+    if (isDevMode()) {
+      return /* @__PURE__ */ jsxRuntime.jsx(DemoStripePaymentForm, { ref, ...props });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(RealStripePaymentForm, { ref, ...props });
+  }
+);
 function PaddleCheckout({
   productId,
   mode = "overlay",
@@ -751,7 +1547,7 @@ function PaddleCheckout({
   onError,
   className
 }) {
-  const { variableStore, tracker, products } = chunkBUF5FDKC_cjs.useFunnelContext();
+  const { variableStore, tracker, products } = chunkEVUYCLVY_cjs.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"));
@@ -808,30 +1604,42 @@ function PaddleCheckout({
   return null;
 }
 
+Object.defineProperty(exports, "useNavigation", {
+  enumerable: true,
+  get: function () { return chunkXP44I2MU_cjs.useNavigation; }
+});
+Object.defineProperty(exports, "useResponse", {
+  enumerable: true,
+  get: function () { return chunkXP44I2MU_cjs.useResponse; }
+});
+Object.defineProperty(exports, "useResponses", {
+  enumerable: true,
+  get: function () { return chunkXP44I2MU_cjs.useResponses; }
+});
 Object.defineProperty(exports, "FunnelProvider", {
   enumerable: true,
-  get: function () { return chunkBUF5FDKC_cjs.FunnelProvider; }
+  get: function () { return chunkEVUYCLVY_cjs.FunnelProvider; }
 });
 Object.defineProperty(exports, "registerIntegration", {
   enumerable: true,
-  get: function () { return chunkBUF5FDKC_cjs.registerIntegration; }
+  get: function () { return chunkEVUYCLVY_cjs.registerIntegration; }
 });
 exports.PaddleCheckout = PaddleCheckout;
 exports.StripePaymentForm = StripePaymentForm;
 exports.defineConfig = defineConfig;
 exports.definePage = definePage;
 exports.useData = useData;
+exports.useDateOfBirth = useDateOfBirth;
 exports.useDeviceInfo = useDeviceInfo;
 exports.useFunnel = useFunnel;
+exports.useKeyboard = useKeyboard;
 exports.useLocale = useLocale;
-exports.useNavigation = useNavigation;
 exports.usePageData = usePageData;
 exports.usePayment = usePayment;
 exports.useProducts = useProducts;
 exports.useQueryParam = useQueryParam;
 exports.useQueryParams = useQueryParams;
-exports.useResponse = useResponse;
-exports.useResponses = useResponses;
+exports.useSafeArea = useSafeArea;
 exports.useTracking = useTracking;
 exports.useTranslation = useTranslation;
 exports.useUser = useUser;