@appfunnel-dev/sdk 0.6.0 → 0.7.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 } = chunkEVUYCLVY_cjs.useFunnelContext();
   const subscribe = react.useCallback(
     (cb) => variableStore.subscribe(cb, { prefix: "user." }),
     [variableStore]
@@ -67,14 +164,14 @@ function useUser() {
         variableStore.set("user.name", name);
       },
       setDateOfBirth(dateOfBirth) {
-        variableStore.set("user.dateOfBirth", dateOfBirth);
+        variableStore.set("user.dateOfBirth", toISODate(dateOfBirth));
       }
     }),
     [variables, variableStore]
   );
 }
 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 +188,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 +228,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 +241,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 +294,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 +316,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,7 +334,7 @@ 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);
@@ -341,7 +359,7 @@ var PAYMENT_KEYS = [
   "payment.customerId"
 ];
 function usePayment() {
-  const { variableStore } = chunkBUF5FDKC_cjs.useFunnelContext();
+  const { variableStore } = chunkEVUYCLVY_cjs.useFunnelContext();
   const subscribe = react.useCallback(
     (cb) => variableStore.subscribe(cb, { keys: PAYMENT_KEYS }),
     [variableStore]
@@ -386,7 +404,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 +440,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 +538,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,16 +560,16 @@ 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()
@@ -474,7 +581,7 @@ var InnerPaymentForm = react.forwardRef(
     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) {
@@ -614,7 +721,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(() => {
@@ -751,7 +858,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 +915,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;