@appfunnel-dev/sdk 2.0.0-canary.2 → 2.0.0-canary.4

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkZ3TWO2PW_cjs = require('./chunk-Z3TWO2PW.cjs');
+var chunkJSRKA375_cjs = require('./chunk-JSRKA375.cjs');
 var chunkLJYLGLFS_cjs = require('./chunk-LJYLGLFS.cjs');
 var React = require('react');
 var ReactDOM = require('react-dom');
@@ -452,9 +452,9 @@ function LocaleProvider({
   override,
   children
 }) {
-  const [locale, setLocale] = React.useState(() => chunkZ3TWO2PW_cjs.resolveLocale(config, detected, override));
+  const [locale, setLocale] = React.useState(() => chunkJSRKA375_cjs.resolveLocale(config, detected, override));
   React.useEffect(() => {
-    setLocale(chunkZ3TWO2PW_cjs.resolveLocale(config, detected, override));
+    setLocale(chunkJSRKA375_cjs.resolveLocale(config, detected, override));
   }, [config, detected, override]);
   const value = React.useMemo(
     () => ({ locale, setLocale, config, catalog }),
@@ -526,7 +526,7 @@ function useTranslation() {
     fmt,
     locale,
     setLocale,
-    dir: chunkZ3TWO2PW_cjs.isRtl(locale) ? "rtl" : "ltr",
+    dir: chunkJSRKA375_cjs.isRtl(locale) ? "rtl" : "ltr",
     locales: config?.supported ?? [locale]
   };
 }
@@ -547,13 +547,13 @@ function useProduct(id) {
   const catalog = useCatalog();
   const locale = useActiveLocale();
   const resolved = id ? catalog.get(id) : void 0;
-  return React.useMemo(() => resolved ? chunkZ3TWO2PW_cjs.formatProduct(resolved, locale) : void 0, [resolved, locale]);
+  return React.useMemo(() => resolved ? chunkJSRKA375_cjs.formatProduct(resolved, locale) : void 0, [resolved, locale]);
 }
 function useProducts() {
   const catalog = useCatalog();
   const locale = useActiveLocale();
   return React.useMemo(
-    () => Array.from(catalog.values()).map((r) => chunkZ3TWO2PW_cjs.formatProduct(r, locale)),
+    () => Array.from(catalog.values()).map((r) => chunkJSRKA375_cjs.formatProduct(r, locale)),
     [catalog, locale]
   );
 }
@@ -634,10 +634,10 @@ function FunnelView({
     [pages]
   );
   const seedRef = React.useRef(null);
-  if (seedRef.current === null) seedRef.current = chunkZ3TWO2PW_cjs.bucketingSeed(funnel.context);
+  if (seedRef.current === null) seedRef.current = chunkJSRKA375_cjs.bucketingSeed(funnel.context);
   const seed = seedRef.current;
   const experiments = React.useMemo(
-    () => chunkZ3TWO2PW_cjs.resolveExperiments(pages, funnel.experiments, seed),
+    () => chunkJSRKA375_cjs.resolveExperiments(pages, funnel.experiments, seed),
     [pages, funnel.experiments, seed]
   );
   const toSlot = React.useCallback((k) => experiments.slotOf[k] ?? k, [experiments]);
@@ -656,8 +656,8 @@ function FunnelView({
     if (!initialKey || initialKey === start) return start ? [start] : [];
     const target = toSlot(initialKey);
     const page2 = flowPages.find((p) => p.key === target);
-    const guard = chunkZ3TWO2PW_cjs.entryGuard(page2?.meta);
-    const ok = page2 && (!guard || chunkZ3TWO2PW_cjs.evaluateGate(guard, funnel.snapshot()));
+    const guard = chunkJSRKA375_cjs.entryGuard(page2?.meta);
+    const ok = page2 && (!guard || chunkJSRKA375_cjs.evaluateGate(guard, funnel.snapshot()));
     const first = ok ? target : start;
     return first ? [first] : [];
   });
@@ -665,7 +665,7 @@ function FunnelView({
   const index = history.length - 1;
   const startKey = history[0];
   const total = React.useMemo(
-    () => chunkZ3TWO2PW_cjs.expectedPathLength(flow, startKey, funnel.snapshot()),
+    () => chunkJSRKA375_cjs.expectedPathLength(flow, startKey, funnel.snapshot()),
     // currentKey in deps: re-trace as each step's answers settle the branch.
     [flow, startKey, currentKey, funnel]
   );
@@ -700,7 +700,7 @@ function FunnelView({
   usePageExitTimer(tracker, currentKey);
   const [isNavigating, startNav] = React.useTransition();
   const next = React.useCallback(() => {
-    const target = chunkZ3TWO2PW_cjs.nextPage(flow, currentKey, funnel.snapshot());
+    const target = chunkJSRKA375_cjs.nextPage(flow, currentKey, funnel.snapshot());
     const resolved = target ? toSlot(target) : target;
     if (resolved) startNav(() => setHistory((h) => [...h, resolved]));
   }, [flow, currentKey, funnel, toSlot]);
@@ -724,7 +724,7 @@ function FunnelView({
     [loaders, toRenderKey]
   );
   const nextCandidates = React.useMemo(
-    () => [...new Set(chunkZ3TWO2PW_cjs.outgoingKeys(flow, currentKey).map(toRenderKey))],
+    () => [...new Set(chunkJSRKA375_cjs.outgoingKeys(flow, currentKey).map(toRenderKey))],
     [flow, currentKey, toRenderKey]
   );
   React.useEffect(() => {
@@ -1103,6 +1103,14 @@ function driverWithEmail(driver, getEmail) {
     renderInline: driver.renderInline ? (req, cb) => driver.renderInline(enrich(req), cb) : void 0
   };
 }
+function driverWithCatalog(driver, catalog) {
+  const enrich = (req) => req.catalogKey !== void 0 ? req : { ...req, catalogKey: catalog.get(req.product)?.catalogKey };
+  return {
+    ...driver,
+    start: (req) => driver.start(enrich(req)),
+    renderInline: driver.renderInline ? (req, cb) => driver.renderInline(enrich(req), cb) : void 0
+  };
+}
 var DriverContext = React.createContext(null);
 function CheckoutDriverProvider({
   driver,
@@ -1117,12 +1125,25 @@ var FALLBACK_DRIVER = createMockDriver();
 function useCheckout(opts = {}) {
   const driver = useDriver();
   const tracker = useTrackerRef();
+  const catalog = useCatalog();
   const nav = useNavigation();
   const [status, setStatus] = React.useState("idle");
   const [error, setError] = React.useState(null);
   const intent = opts.intent ?? "purchase";
   const kind = opts.kind;
   const advance = opts.advanceOnSuccess ?? true;
+  const productFacts = React.useCallback(
+    (product) => {
+      const resolved = product ? catalog.get(product) : void 0;
+      return {
+        productId: resolved?.catalogKey ?? product,
+        amount: resolved ? resolved.priceMinor / 100 : void 0,
+        currency: resolved?.currency,
+        isSubscription: resolved ? resolved.period !== "one-time" : kind === "subscription" || kind === "upgrade"
+      };
+    },
+    [catalog, kind]
+  );
   const recovering = React.useRef(false);
   const failRef = React.useRef(() => {
   });
@@ -1130,18 +1151,24 @@ function useCheckout(opts = {}) {
     async () => ({ ok: false })
   );
   const succeed = React.useCallback(
-    (result) => {
+    (result, product) => {
       setStatus("success");
+      const { productId, isSubscription } = productFacts(product);
+      const amount = result.amountMinor != null ? result.amountMinor / 100 : void 0;
       tracker.track("purchase.complete", {
-        amount: result.amountMinor != null ? result.amountMinor / 100 : void 0,
+        amount,
         currency: result.currency,
+        productId,
         eventId: result.eventId
         // server-minted (browser↔CAPI dedup); undefined if none
       });
+      if (isSubscription) {
+        tracker.track("subscription.created", { amount, currency: result.currency, productId, eventId: result.eventId });
+      }
       opts.onSuccess?.(result);
       if (advance) nav.next();
     },
-    [tracker, nav, advance, opts]
+    [tracker, nav, advance, opts, productFacts]
   );
   const succeedRef = React.useRef(succeed);
   succeedRef.current = succeed;
@@ -1149,11 +1176,18 @@ function useCheckout(opts = {}) {
     (product, surface) => {
       setStatus("loading");
       setError(null);
-      tracker.track("checkout.start", { productId: product, surface });
+      const { productId, amount, currency } = productFacts(product);
+      tracker.track("checkout.start", { productId, amount, currency, surface, eventId: newEventId() });
     },
-    [tracker]
+    [tracker, productFacts]
+  );
+  const paymentAdded = React.useCallback(
+    (product) => {
+      const { productId, amount, currency } = productFacts(product);
+      tracker.track("checkout.payment_added", { productId, amount, currency, eventId: newEventId() });
+    },
+    [tracker, productFacts]
   );
-  const paymentAdded = React.useCallback(() => tracker.track("checkout.payment_added", {}), [tracker]);
   const hostInSheet = (surface) => surface === "sheet" || chunkLJYLGLFS_cjs.isInlineSurface(surface) && !!chunkLJYLGLFS_cjs.PROVIDER_PROFILES[driver.provider]?.surfaces.sheet;
   const startRecovery = (product, surface) => {
     recovering.current = true;
@@ -1164,9 +1198,9 @@ function useCheckout(opts = {}) {
         surface: "sheet",
         intent,
         kind,
-        onSuccess: (r) => succeedRef.current(r),
+        onSuccess: (r) => succeedRef.current(r, product),
         onError: (e) => failRef.current(e, product),
-        onPaymentAdded: () => paymentAdded()
+        onPaymentAdded: () => paymentAdded(product)
       });
     } else {
       void attemptRef.current(product, surface);
@@ -1220,7 +1254,7 @@ function useCheckout(opts = {}) {
     begin(product, surface);
     try {
       const result = await driver.start({ product, intent, surface, kind });
-      if (result.ok) succeedRef.current(result);
+      if (result.ok) succeedRef.current(result, product);
       else failRef.current(result.error ?? chunkLJYLGLFS_cjs.checkoutError("unknown", "Checkout failed"), product);
       return result;
     } catch (e) {
@@ -1239,9 +1273,9 @@ function useCheckout(opts = {}) {
         recovering.current = false;
         begin(product, surface);
       },
-      onSuccess: (result) => succeedRef.current(result),
+      onSuccess: (result) => succeedRef.current(result, product),
       onError: (err) => failRef.current(err, product),
-      onPaymentAdded: () => paymentAdded()
+      onPaymentAdded: () => paymentAdded(product)
     }),
     [begin, paymentAdded]
   );
@@ -2572,12 +2606,15 @@ function FunnelProvider({
       const value2 = s.get("user.email");
       return typeof value2 === "string" && /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(value2) ? value2 : void 0;
     };
+    const catalog = chunkJSRKA375_cjs.buildCatalog(products ?? []);
     return {
       funnel: createFunnel(s, ctx, busTracker, experiments ?? []),
       store: s,
       context: ctx,
-      catalog: chunkZ3TWO2PW_cjs.buildCatalog(products ?? []),
-      driver: driverWithEmail(checkout ?? createMockDriver(), emailForCheckout),
+      catalog,
+      // Slot → catalog-key resolution wraps the email-enriching driver, so the wire charges the real
+      // catalog key while pages + analytics keep the durable SLOT identity (req.product).
+      driver: driverWithCatalog(driverWithEmail(checkout ?? createMockDriver(), emailForCheckout), catalog),
       tracker: busTracker,
       bus
     };
@@ -2849,7 +2886,8 @@ function createFunnelTree({
   config,
   pages,
   layout,
-  checkoutDriver
+  checkoutDriver,
+  messages
 }) {
   return function tree(opts) {
     const mode = opts.mode ?? "live";
@@ -2882,6 +2920,7 @@ function createFunnelTree({
       children: React.createElement(FunnelProvider, {
         config,
         products: opts.products ?? [],
+        messages: opts.messages ?? messages,
         locale: opts.locale,
         tracker,
         checkout,
@@ -3045,111 +3084,111 @@ function Script({
 
 Object.defineProperty(exports, "assignVariant", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.assignVariant; }
+  get: function () { return chunkJSRKA375_cjs.assignVariant; }
 });
 Object.defineProperty(exports, "bucketingSeed", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.bucketingSeed; }
+  get: function () { return chunkJSRKA375_cjs.bucketingSeed; }
 });
 Object.defineProperty(exports, "buildCatalog", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.buildCatalog; }
+  get: function () { return chunkJSRKA375_cjs.buildCatalog; }
 });
 Object.defineProperty(exports, "compileManifest", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.compileManifest; }
+  get: function () { return chunkJSRKA375_cjs.compileManifest; }
 });
 Object.defineProperty(exports, "currencyExponent", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.currencyExponent; }
+  get: function () { return chunkJSRKA375_cjs.currencyExponent; }
 });
 Object.defineProperty(exports, "defineFunnel", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.defineFunnel; }
+  get: function () { return chunkJSRKA375_cjs.defineFunnel; }
 });
 Object.defineProperty(exports, "definePage", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.definePage; }
+  get: function () { return chunkJSRKA375_cjs.definePage; }
 });
 Object.defineProperty(exports, "entryGuard", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.entryGuard; }
+  get: function () { return chunkJSRKA375_cjs.entryGuard; }
 });
 Object.defineProperty(exports, "evaluateCondition", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.evaluateCondition; }
+  get: function () { return chunkJSRKA375_cjs.evaluateCondition; }
 });
 Object.defineProperty(exports, "evaluateGate", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.evaluateGate; }
+  get: function () { return chunkJSRKA375_cjs.evaluateGate; }
 });
 Object.defineProperty(exports, "expectedPathLength", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.expectedPathLength; }
+  get: function () { return chunkJSRKA375_cjs.expectedPathLength; }
 });
 Object.defineProperty(exports, "fnv1a", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.fnv1a; }
+  get: function () { return chunkJSRKA375_cjs.fnv1a; }
 });
 Object.defineProperty(exports, "formatMoney", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.formatMoney; }
+  get: function () { return chunkJSRKA375_cjs.formatMoney; }
 });
 Object.defineProperty(exports, "formatProduct", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.formatProduct; }
+  get: function () { return chunkJSRKA375_cjs.formatProduct; }
 });
 Object.defineProperty(exports, "hashToUnit", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.hashToUnit; }
+  get: function () { return chunkJSRKA375_cjs.hashToUnit; }
 });
 Object.defineProperty(exports, "isRtl", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.isRtl; }
+  get: function () { return chunkJSRKA375_cjs.isRtl; }
 });
 Object.defineProperty(exports, "isVariantKey", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.isVariantKey; }
+  get: function () { return chunkJSRKA375_cjs.isVariantKey; }
 });
 Object.defineProperty(exports, "nextPage", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.nextPage; }
+  get: function () { return chunkJSRKA375_cjs.nextPage; }
 });
 Object.defineProperty(exports, "outgoingKeys", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.outgoingKeys; }
+  get: function () { return chunkJSRKA375_cjs.outgoingKeys; }
 });
 Object.defineProperty(exports, "pageMeta", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.pageMeta; }
+  get: function () { return chunkJSRKA375_cjs.pageMeta; }
 });
 Object.defineProperty(exports, "parseSlotKey", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.parseSlotKey; }
+  get: function () { return chunkJSRKA375_cjs.parseSlotKey; }
 });
 Object.defineProperty(exports, "pickByWeight", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.pickByWeight; }
+  get: function () { return chunkJSRKA375_cjs.pickByWeight; }
 });
 Object.defineProperty(exports, "resolveExperiments", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.resolveExperiments; }
+  get: function () { return chunkJSRKA375_cjs.resolveExperiments; }
 });
 Object.defineProperty(exports, "resolveLocale", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.resolveLocale; }
+  get: function () { return chunkJSRKA375_cjs.resolveLocale; }
 });
 Object.defineProperty(exports, "resolveProduct", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.resolveProduct; }
+  get: function () { return chunkJSRKA375_cjs.resolveProduct; }
 });
 Object.defineProperty(exports, "resolveRoute", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.resolveRoute; }
+  get: function () { return chunkJSRKA375_cjs.resolveRoute; }
 });
 Object.defineProperty(exports, "validateExperiments", {
   enumerable: true,
-  get: function () { return chunkZ3TWO2PW_cjs.validateExperiments; }
+  get: function () { return chunkJSRKA375_cjs.validateExperiments; }
 });
 Object.defineProperty(exports, "INLINE_SURFACES", {
   enumerable: true,