rampkit-expo-dev 0.0.52 → 0.0.53

package/android/src/main/java/expo/modules/rampkit/RampKitModule.kt

@@ -42,6 +42,7 @@ class RampKitModule : Module(), PurchasesUpdatedListener {
   private val INSTALL_DATE_KEY = "rk_install_date"
   private val LAUNCH_COUNT_KEY = "rk_launch_count"
   private val LAST_LAUNCH_KEY = "rk_last_launch"
+  private val ORIGINAL_TXN_PREFIX = "rk_orig_txn_"
 
   private var billingClient: BillingClient? = null
   private var appId: String? = null
@@ -247,7 +248,7 @@ class RampKitModule : Module(), PurchasesUpdatedListener {
           val acknowledgePurchaseParams = AcknowledgePurchaseParams.newBuilder()
             .setPurchaseToken(purchase.purchaseToken)
             .build()
-          
+
           billingClient?.acknowledgePurchase(acknowledgePurchaseParams) { result ->
             if (result.responseCode == BillingClient.BillingResponseCode.OK) {
               Log.d(TAG, "Purchase acknowledged")
@@ -257,53 +258,93 @@ class RampKitModule : Module(), PurchasesUpdatedListener {
 
         // Get product details for price info
         coroutineScope.launch {
-          val productDetails = getProductDetails(purchase.products.firstOrNull() ?: "")
-          
+          val productId = purchase.products.firstOrNull() ?: ""
+          val productDetails = getProductDetails(productId)
+
+          // Determine originalTransactionId for subscription tracking
+          // For Android, we store the first orderId for each product as the "original"
+          val originalTransactionId = getOrStoreOriginalTransactionId(productId, purchase.orderId)
+          val isRenewal = originalTransactionId != purchase.orderId
+
+          // Determine event type (matching iOS SDK logic)
+          val eventName: String
+          val isTrial: Boolean
+          val isIntroOffer: Boolean
+
+          // Check for free trial or intro offer
+          val subscriptionOffer = productDetails?.subscriptionOfferDetails?.firstOrNull()
+          val firstPricingPhase = subscriptionOffer?.pricingPhases?.pricingPhaseList?.firstOrNull()
+          val hasFreeTrial = firstPricingPhase?.priceAmountMicros == 0L
+
+          when {
+            // Subscription renewal
+            isRenewal && purchase.isAutoRenewing -> {
+              eventName = "subscription_renewed"
+              isTrial = false
+              isIntroOffer = false
+            }
+            // Trial started (free trial)
+            hasFreeTrial && !isRenewal -> {
+              eventName = "trial_started"
+              isTrial = true
+              isIntroOffer = true
+            }
+            // Regular purchase
+            else -> {
+              eventName = "purchase_completed"
+              isTrial = false
+              isIntroOffer = false
+            }
+          }
+
           val properties = mutableMapOf<String, Any?>(
-            "productId" to purchase.products.firstOrNull(),
+            "productId" to productId,
             "transactionId" to purchase.orderId,
-            "originalTransactionId" to purchase.orderId,
+            "originalTransactionId" to originalTransactionId,
             "purchaseToken" to purchase.purchaseToken,
             "purchaseDate" to getIso8601Timestamp(purchase.purchaseTime),
             "quantity" to purchase.quantity,
-            "isAutoRenewing" to purchase.isAutoRenewing
+            "isAutoRenewing" to purchase.isAutoRenewing,
+            "isTrial" to isTrial,
+            "isIntroOffer" to isIntroOffer
           )
 
           productDetails?.let { details ->
-            val pricingPhase = details.subscriptionOfferDetails?.firstOrNull()?.pricingPhases?.pricingPhaseList?.firstOrNull()
-              ?: details.oneTimePurchaseOfferDetails?.let { oneTime ->
-                object {
-                  val priceAmountMicros = oneTime.priceAmountMicros
-                  val priceCurrencyCode = oneTime.priceCurrencyCode
-                  val formattedPrice = oneTime.formattedPrice
-                }
+            properties["productType"] = if (details.productType == BillingClient.ProductType.SUBS) "auto_renewable" else "non_consumable"
+
+            // Get pricing info
+            val oneTimePurchase = details.oneTimePurchaseOfferDetails
+            val subscriptionOfferDetails = details.subscriptionOfferDetails?.firstOrNull()
+
+            if (oneTimePurchase != null) {
+              properties["amount"] = oneTimePurchase.priceAmountMicros / 1_000_000.0
+              properties["currency"] = oneTimePurchase.priceCurrencyCode
+              properties["priceFormatted"] = oneTimePurchase.formattedPrice
+            } else if (subscriptionOfferDetails != null) {
+              // For subscriptions, get the base pricing phase (not the free trial phase)
+              val basePricingPhase = subscriptionOfferDetails.pricingPhases.pricingPhaseList
+                .firstOrNull { it.priceAmountMicros > 0 }
+                ?: subscriptionOfferDetails.pricingPhases.pricingPhaseList.lastOrNull()
+
+              basePricingPhase?.let { phase ->
+                properties["amount"] = phase.priceAmountMicros / 1_000_000.0
+                properties["currency"] = phase.priceCurrencyCode
+                properties["priceFormatted"] = phase.formattedPrice
+                properties["subscriptionPeriod"] = formatBillingPeriod(phase.billingPeriod)
               }
 
-            if (pricingPhase != null) {
-              properties["price"] = when (pricingPhase) {
-                is ProductDetails.PricingPhase -> pricingPhase.priceAmountMicros / 1_000_000.0
-                else -> (pricingPhase as? Any)?.let { 
-                  (it.javaClass.getMethod("getPriceAmountMicros").invoke(it) as Long) / 1_000_000.0 
-                }
-              }
-              properties["currency"] = when (pricingPhase) {
-                is ProductDetails.PricingPhase -> pricingPhase.priceCurrencyCode
-                else -> (pricingPhase as? Any)?.let {
-                  it.javaClass.getMethod("getPriceCurrencyCode").invoke(it) as String
-                }
-              }
-              properties["localizedPrice"] = when (pricingPhase) {
-                is ProductDetails.PricingPhase -> pricingPhase.formattedPrice
-                else -> (pricingPhase as? Any)?.let {
-                  it.javaClass.getMethod("getFormattedPrice").invoke(it) as String
-                }
+              // Offer type detection
+              val freeTrialPhase = subscriptionOfferDetails.pricingPhases.pricingPhaseList
+                .firstOrNull { it.priceAmountMicros == 0L }
+              if (freeTrialPhase != null) {
+                properties["offerType"] = "introductory"
               }
             }
+
             properties["localizedName"] = details.name
-            properties["productType"] = details.productType
           }
 
-          sendPurchaseEvent(appId, userId, "purchase_completed", properties)
+          sendPurchaseEvent(appId, userId, eventName, properties)
         }
       }
       Purchase.PurchaseState.PENDING -> {
@@ -312,6 +353,36 @@ class RampKitModule : Module(), PurchasesUpdatedListener {
     }
   }
 
+  /**
+   * Get or store the original transaction ID for a product.
+   * This enables subscription renewal tracking by comparing subsequent orderIds
+   * to the original orderId for the same product.
+   */
+  private fun getOrStoreOriginalTransactionId(productId: String, currentOrderId: String?): String? {
+    if (currentOrderId == null) return null
+
+    val key = ORIGINAL_TXN_PREFIX + productId
+    val storedOriginal = prefs.getString(key, null)
+
+    return if (storedOriginal != null) {
+      // Return the stored original
+      storedOriginal
+    } else {
+      // This is the first purchase for this product, store it as original
+      prefs.edit().putString(key, currentOrderId).apply()
+      currentOrderId
+    }
+  }
+
+  /**
+   * Format Google Play billing period to ISO 8601 duration format
+   * Input format: P1W, P1M, P3M, P6M, P1Y
+   */
+  private fun formatBillingPeriod(billingPeriod: String): String {
+    // Google Play already uses ISO 8601 format, just return it
+    return billingPeriod
+  }
+
   private suspend fun getProductDetails(productId: String): ProductDetails? {
     if (productId.isEmpty()) return null
     val client = billingClient ?: return null

package/build/RampKit.d.ts

@@ -68,7 +68,8 @@ export declare class RampKitCore {
      */
     trackCtaTap(buttonId: string, buttonText?: string): void;
     /**
-     * Cleanup SDK resources
+     * Reset the SDK state and re-initialize
+     * Call this when a user logs out or when you need to clear all cached state
      */
-    cleanup(): Promise<void>;
+    reset(): Promise<void>;
 }

package/build/RampKit.js

@@ -209,6 +209,13 @@ class RampKitCore {
             const rampkitContext = this.deviceInfo
                 ? (0, DeviceInfoCollector_1.buildRampKitContext)(this.deviceInfo)
                 : undefined;
+            // Extract navigation data for spatial layout-based navigation
+            const navigation = data.navigation
+                ? {
+                    mainFlow: data.navigation.mainFlow || [],
+                    screenPositions: data.navigation.screenPositions,
+                }
+                : undefined;
             // Track onboarding started event
             const onboardingId = data.onboardingId || data.id || "unknown";
             EventManager_1.eventManager.trackOnboardingStarted(onboardingId, screens.length);
@@ -229,6 +236,7 @@ class RampKitCore {
                 variables,
                 requiredScripts,
                 rampkitContext,
+                navigation,
                 onOnboardingFinished: (payload) => {
                     var _a;
                     // Track onboarding completed
@@ -290,18 +298,34 @@ class RampKitCore {
     // StoreKit 2 (iOS) and Google Play Billing (Android) transaction observers.
     // No manual tracking is needed.
     /**
-     * Cleanup SDK resources
+     * Reset the SDK state and re-initialize
+     * Call this when a user logs out or when you need to clear all cached state
      */
-    async cleanup() {
+    async reset() {
+        if (!this.config) {
+            console.warn("[RampKit] Reset: No config found, cannot re-initialize");
+            return;
+        }
+        console.log("[RampKit] Reset: Clearing SDK state...");
         // Stop transaction observer
         await RampKitNative_1.TransactionObserver.stop();
+        // Remove app state listener
         if (this.appStateSubscription) {
             this.appStateSubscription.remove();
             this.appStateSubscription = null;
         }
+        // Reset event manager state
         EventManager_1.eventManager.reset();
+        // Reset session
         (0, DeviceInfoCollector_1.resetSession)();
+        // Clear local state
+        this.userId = null;
+        this.deviceInfo = null;
+        this.onboardingData = null;
         this.initialized = false;
+        console.log("[RampKit] Reset: Re-initializing SDK...");
+        // Re-initialize with stored config
+        await this.init(this.config);
     }
 }
 exports.RampKitCore = RampKitCore;

package/build/RampkitOverlay.d.ts

@@ -1,4 +1,4 @@
-import { RampKitContext } from "./types";
+import { RampKitContext, NavigationData } from "./types";
 export declare const injectedHardening = "\n(function(){\n  try {\n    var meta = document.querySelector('meta[name=\"viewport\"]');\n    if (!meta) { meta = document.createElement('meta'); meta.name = 'viewport'; document.head.appendChild(meta); }\n    meta.setAttribute('content','width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover');\n    var style = document.createElement('style');\n    style.textContent='html,body{overflow-x:hidden!important;} html,body,*{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;-ms-user-select:none!important;touch-action: pan-y;} *{-webkit-tap-highlight-color: rgba(0,0,0,0)!important;} ::selection{background: transparent!important;} ::-moz-selection{background: transparent!important;} a,img{-webkit-user-drag:none!important;user-drag:none!important;-webkit-touch-callout:none!important} input,textarea{caret-color:transparent!important;-webkit-user-select:none!important;user-select:none!important}';\n    document.head.appendChild(style);\n    var prevent=function(e){e.preventDefault&&e.preventDefault();};\n    document.addEventListener('gesturestart',prevent,{passive:false});\n    document.addEventListener('gesturechange',prevent,{passive:false});\n    document.addEventListener('gestureend',prevent,{passive:false});\n    document.addEventListener('dblclick',prevent,{passive:false});\n    document.addEventListener('wheel',function(e){ if(e.ctrlKey) e.preventDefault(); },{passive:false});\n    document.addEventListener('touchmove',function(e){ if(e.scale && e.scale !== 1) e.preventDefault(); },{passive:false});\n    document.addEventListener('selectstart',prevent,{passive:false,capture:true});\n    document.addEventListener('contextmenu',prevent,{passive:false,capture:true});\n    document.addEventListener('copy',prevent,{passive:false,capture:true});\n    document.addEventListener('cut',prevent,{passive:false,capture:true});\n    document.addEventListener('paste',prevent,{passive:false,capture:true});\n    document.addEventListener('dragstart',prevent,{passive:false,capture:true});\n    // Belt-and-suspenders: aggressively clear any attempted selection\n    var clearSel=function(){\n      try{var sel=window.getSelection&&window.getSelection(); if(sel&&sel.removeAllRanges) sel.removeAllRanges();}catch(_){} }\n    document.addEventListener('selectionchange',clearSel,{passive:true,capture:true});\n    document.onselectstart=function(){ clearSel(); return false; };\n    try{ document.documentElement.style.webkitUserSelect='none'; document.documentElement.style.userSelect='none'; }catch(_){ }\n    try{ document.body.style.webkitUserSelect='none'; document.body.style.userSelect='none'; }catch(_){ }\n    var __selTimer = setInterval(clearSel, 160);\n    window.addEventListener('pagehide',function(){ try{ clearInterval(__selTimer); }catch(_){} });\n    // Continuously enforce no-select on all elements and new nodes\n    var enforceNoSelect = function(el){\n      try{\n        el.style && (el.style.webkitUserSelect='none', el.style.userSelect='none', el.style.webkitTouchCallout='none');\n        el.setAttribute && (el.setAttribute('unselectable','on'), el.setAttribute('contenteditable','false'));\n      }catch(_){}\n    }\n    try{\n      var all=document.getElementsByTagName('*');\n      for(var i=0;i<all.length;i++){ enforceNoSelect(all[i]); }\n      var obs = new MutationObserver(function(muts){\n        for(var j=0;j<muts.length;j++){\n          var m=muts[j];\n          if(m.type==='childList'){\n            m.addedNodes && m.addedNodes.forEach && m.addedNodes.forEach(function(n){ if(n && n.nodeType===1){ enforceNoSelect(n); var q=n.getElementsByTagName? n.getElementsByTagName('*'): []; for(var k=0;k<q.length;k++){ enforceNoSelect(q[k]); }}});\n          } else if(m.type==='attributes'){\n            enforceNoSelect(m.target);\n          }\n        }\n      });\n      obs.observe(document.documentElement,{ childList:true, subtree:true, attributes:true, attributeFilter:['contenteditable','style'] });\n    }catch(_){ }\n  } catch(_) {}\n})(); true;\n";
 export declare const injectedNoSelect = "\n(function(){\n  try {\n    if (window.__rkNoSelectApplied) return true;\n    window.__rkNoSelectApplied = true;\n    var style = document.getElementById('rk-no-select-style');\n    if (!style) {\n      style = document.createElement('style');\n      style.id = 'rk-no-select-style';\n      style.innerHTML = \"\n        * {\n          user-select: none !important;\n          -webkit-user-select: none !important;\n          -webkit-touch-callout: none !important;\n        }\n        ::selection {\n          background: transparent !important;\n        }\n      \";\n      document.head.appendChild(style);\n    }\n    var prevent = function(e){ if(e && e.preventDefault) e.preventDefault(); return false; };\n    document.addEventListener('contextmenu', prevent, { passive: false, capture: true });\n    document.addEventListener('selectstart', prevent, { passive: false, capture: true });\n  } catch (_) {}\n  true;\n})();\n";
 export declare const injectedVarsHandler = "\n(function(){\n  try {\n    if (window.__rkVarsHandlerApplied) return true;\n    window.__rkVarsHandlerApplied = true;\n    \n    // Handler function that updates variables and notifies the page\n    window.__rkHandleVarsUpdate = function(vars) {\n      if (!vars || typeof vars !== 'object') return;\n      // Update the global variables object\n      window.__rampkitVariables = vars;\n      // Dispatch a custom event that the page's JS can listen to for re-rendering\n      try {\n        document.dispatchEvent(new CustomEvent('rampkit:vars-updated', { detail: vars }));\n      } catch(e) {}\n      // Also try calling a global handler if the page defined one\n      try {\n        if (typeof window.onRampkitVarsUpdate === 'function') {\n          window.onRampkitVarsUpdate(vars);\n        }\n      } catch(e) {}\n    };\n    \n    // Listen for message events from React Native\n    document.addEventListener('message', function(event) {\n      try {\n        var data = event.data;\n        if (data && data.type === 'rampkit:variables' && data.vars) {\n          window.__rkHandleVarsUpdate(data.vars);\n        }\n      } catch(e) {}\n    }, false);\n    \n    // Also listen on window for compatibility\n    window.addEventListener('message', function(event) {\n      try {\n        var data = event.data;\n        if (data && data.type === 'rampkit:variables' && data.vars) {\n          window.__rkHandleVarsUpdate(data.vars);\n        }\n      } catch(e) {}\n    }, false);\n  } catch (_) {}\n  true;\n})();\n";
@@ -16,6 +16,7 @@ export declare function showRampkitOverlay(opts: {
     variables?: Record<string, any>;
     requiredScripts?: string[];
     rampkitContext?: RampKitContext;
+    navigation?: NavigationData;
     onClose?: () => void;
     onOnboardingFinished?: (payload?: any) => void;
     onShowPaywall?: (payload?: any) => void;
@@ -39,6 +40,7 @@ declare function Overlay(props: {
     variables?: Record<string, any>;
     requiredScripts?: string[];
     rampkitContext?: RampKitContext;
+    navigation?: NavigationData;
     prebuiltDocs?: string[];
     onRequestClose: () => void;
     onOnboardingFinished?: (payload?: any) => void;

package/build/RampkitOverlay.js

@@ -572,7 +572,7 @@ function showRampkitOverlay(opts) {
         return; // already visible
     // Always build fresh docs to ensure templates are resolved with current context
     const prebuiltDocs = undefined;
-    sibling = new react_native_root_siblings_1.default(((0, jsx_runtime_1.jsx)(Overlay, { onboardingId: opts.onboardingId, screens: opts.screens, variables: opts.variables, requiredScripts: opts.requiredScripts, rampkitContext: opts.rampkitContext, prebuiltDocs: prebuiltDocs, onRequestClose: () => {
+    sibling = new react_native_root_siblings_1.default(((0, jsx_runtime_1.jsx)(Overlay, { onboardingId: opts.onboardingId, screens: opts.screens, variables: opts.variables, requiredScripts: opts.requiredScripts, rampkitContext: opts.rampkitContext, navigation: opts.navigation, prebuiltDocs: prebuiltDocs, onRequestClose: () => {
             var _a;
             activeCloseHandler = null;
             hideRampkitOverlay();
@@ -1025,6 +1025,133 @@ function Overlay(props) {
     const lastVarsSendTimeRef = (0, react_1.useRef)([]);
     // Stale value window in milliseconds - matches iOS SDK (600ms)
     const STALE_VALUE_WINDOW_MS = 600;
+    // ============================================================================
+    // Navigation Resolution Helpers (matches iOS SDK behavior)
+    // ============================================================================
+    /**
+     * Resolve `__continue__` to the actual target screen ID using navigation data
+     * @param fromScreenId - The current screen ID
+     * @returns The target screen ID, or null if at the end of the flow or should use fallback
+     */
+    const resolveContinue = (fromScreenId) => {
+        const navigation = props.navigation;
+        // If no navigation data, fall back to array order
+        if (!(navigation === null || navigation === void 0 ? void 0 : navigation.mainFlow) || navigation.mainFlow.length === 0) {
+            console.log("[RampKit] 🧭 No navigation.mainFlow, using array order for __continue__");
+            return null; // Will use fallback
+        }
+        const { mainFlow, screenPositions } = navigation;
+        // Check if current screen is in the main flow
+        const currentFlowIndex = mainFlow.indexOf(fromScreenId);
+        if (currentFlowIndex !== -1) {
+            // Navigate to next screen in main flow
+            const nextFlowIndex = currentFlowIndex + 1;
+            if (nextFlowIndex < mainFlow.length) {
+                const nextScreenId = mainFlow[nextFlowIndex];
+                console.log(`[RampKit] 🧭 __continue__ resolved via mainFlow: ${fromScreenId} → ${nextScreenId} (flow index ${currentFlowIndex} → ${nextFlowIndex})`);
+                return nextScreenId;
+            }
+            else {
+                console.log(`[RampKit] 🧭 __continue__: at end of mainFlow (index ${currentFlowIndex})`);
+                return null;
+            }
+        }
+        // Current screen is NOT in mainFlow (it's a variant screen)
+        // Find the appropriate next main screen based on X position
+        if (screenPositions) {
+            const currentPosition = screenPositions[fromScreenId];
+            if (currentPosition) {
+                console.log(`[RampKit] 🧭 Current screen '${fromScreenId}' is a variant (row: ${currentPosition.row}, x: ${currentPosition.x})`);
+                // Find the main flow screen that comes AFTER this X position
+                // (the screen with the smallest X that is > currentPosition.x)
+                let bestCandidate = null;
+                for (const mainScreenId of mainFlow) {
+                    const mainPos = screenPositions[mainScreenId];
+                    if (mainPos && mainPos.x > currentPosition.x) {
+                        if (!bestCandidate || mainPos.x < bestCandidate.x) {
+                            bestCandidate = { screenId: mainScreenId, x: mainPos.x };
+                        }
+                    }
+                }
+                if (bestCandidate) {
+                    console.log(`[RampKit] 🧭 __continue__ from variant: ${fromScreenId} → ${bestCandidate.screenId} (next main screen at x:${bestCandidate.x})`);
+                    return bestCandidate.screenId;
+                }
+                else {
+                    console.log("[RampKit] 🧭 __continue__ from variant: no main screen to the right, end of flow");
+                    return null;
+                }
+            }
+        }
+        // Position data not available for current screen, fall back to array
+        console.log(`[RampKit] 🧭 Screen '${fromScreenId}' not found in positions, using array fallback`);
+        return null;
+    };
+    /**
+     * Resolve `__goBack__` to the actual target screen ID using navigation data
+     * @param fromScreenId - The current screen ID
+     * @returns The target screen ID, or null if at the start of the flow or should use fallback
+     */
+    const resolveGoBack = (fromScreenId) => {
+        const navigation = props.navigation;
+        // If no navigation data, fall back to array order
+        if (!(navigation === null || navigation === void 0 ? void 0 : navigation.mainFlow) || navigation.mainFlow.length === 0) {
+            console.log("[RampKit] 🧭 No navigation.mainFlow, using array order for __goBack__");
+            return null; // Will use fallback
+        }
+        const { mainFlow, screenPositions } = navigation;
+        // Check if current screen is in the main flow
+        const currentFlowIndex = mainFlow.indexOf(fromScreenId);
+        if (currentFlowIndex !== -1) {
+            // Navigate to previous screen in main flow
+            const prevFlowIndex = currentFlowIndex - 1;
+            if (prevFlowIndex >= 0) {
+                const prevScreenId = mainFlow[prevFlowIndex];
+                console.log(`[RampKit] 🧭 __goBack__ resolved via mainFlow: ${fromScreenId} → ${prevScreenId} (flow index ${currentFlowIndex} → ${prevFlowIndex})`);
+                return prevScreenId;
+            }
+            else {
+                console.log(`[RampKit] 🧭 __goBack__: at start of mainFlow (index ${currentFlowIndex})`);
+                return null;
+            }
+        }
+        // Current screen is NOT in mainFlow (it's a variant screen)
+        // Go back to the main flow screen at or before this X position
+        if (screenPositions) {
+            const currentPosition = screenPositions[fromScreenId];
+            if (currentPosition) {
+                console.log(`[RampKit] 🧭 Current screen '${fromScreenId}' is a variant (row: ${currentPosition.row}, x: ${currentPosition.x})`);
+                // Find the main flow screen that is at or before this X position
+                // (the screen with the largest X that is <= currentPosition.x)
+                let bestCandidate = null;
+                for (const mainScreenId of mainFlow) {
+                    const mainPos = screenPositions[mainScreenId];
+                    if (mainPos && mainPos.x <= currentPosition.x) {
+                        if (!bestCandidate || mainPos.x > bestCandidate.x) {
+                            bestCandidate = { screenId: mainScreenId, x: mainPos.x };
+                        }
+                    }
+                }
+                if (bestCandidate) {
+                    console.log(`[RampKit] 🧭 __goBack__ from variant: ${fromScreenId} → ${bestCandidate.screenId} (main screen at x:${bestCandidate.x})`);
+                    return bestCandidate.screenId;
+                }
+                else {
+                    console.log("[RampKit] 🧭 __goBack__ from variant: no main screen to the left, start of flow");
+                    return null;
+                }
+            }
+        }
+        // Position data not available for current screen, fall back to array
+        console.log(`[RampKit] 🧭 Screen '${fromScreenId}' not found in positions, using array fallback`);
+        return null;
+    };
+    /**
+     * Get the screen index for a given screen ID
+     */
+    const getScreenIndex = (screenId) => {
+        return props.screens.findIndex((s) => s.id === screenId);
+    };
     // Fade-in when overlay becomes visible
     react_1.default.useEffect(() => {
         if (visible && !isClosing) {
@@ -1217,6 +1344,57 @@ function Overlay(props) {
       }
     })();`;
     }
+    // Build a script that updates the onboarding state
+    // This calls window.__rampkitUpdateOnboarding(index, screenId) to update
+    // onboarding.currentIndex, onboarding.progress, etc.
+    function buildOnboardingStateScript(screenIndex, screenId, totalScreens) {
+        return `(function() {
+      try {
+        // Set total screens global
+        window.RK_TOTAL_SCREENS = ${totalScreens};
+        
+        // Call the update function if it exists
+        if (typeof window.__rampkitUpdateOnboarding === 'function') {
+          window.__rampkitUpdateOnboarding(${screenIndex}, '${screenId}');
+          console.log('[RampKit] Called __rampkitUpdateOnboarding(${screenIndex}, ${screenId})');
+        }
+        
+        // Also dispatch a message event for any listeners
+        var payload = {
+          type: 'rampkit:onboarding-state',
+          currentIndex: ${screenIndex},
+          screenId: '${screenId}',
+          totalScreens: ${totalScreens}
+        };
+        
+        try {
+          document.dispatchEvent(new MessageEvent('message', { data: payload }));
+        } catch(e) {}
+        
+        // Also dispatch custom event
+        try {
+          document.dispatchEvent(new CustomEvent('rampkit:onboarding-state', { detail: payload }));
+        } catch(e) {}
+        
+      } catch(e) {
+        console.log('[RampKit] sendOnboardingState error:', e);
+      }
+    })();`;
+    }
+    // Send onboarding state to a WebView
+    function sendOnboardingStateToWebView(i) {
+        var _a;
+        const wv = webviewsRef.current[i];
+        if (!wv)
+            return;
+        const screenId = ((_a = props.screens[i]) === null || _a === void 0 ? void 0 : _a.id) || '';
+        const totalScreens = props.screens.length;
+        if (__DEV__) {
+            console.log("[Rampkit] sendOnboardingStateToWebView", i, { screenId, totalScreens });
+        }
+        // @ts-ignore: injectJavaScript exists on WebView instance
+        wv.injectJavaScript(buildOnboardingStateScript(i, screenId, totalScreens));
+    }
     function sendVarsToWebView(i, isInitialLoad = false) {
         const wv = webviewsRef.current[i];
         if (!wv)
@@ -1230,6 +1408,8 @@ function Overlay(props) {
         // This is more reliable as it doesn't depend on event listeners being set up
         // @ts-ignore: injectJavaScript exists on WebView instance
         wv.injectJavaScript(buildDirectVarsScript(varsRef.current));
+        // Also send onboarding state so templates like ${onboarding.progress} are resolved
+        sendOnboardingStateToWebView(i);
     }
     /**
      * Broadcast variables to all WebViews, optionally excluding one.
@@ -1326,8 +1506,24 @@ function Overlay(props) {
         }
     };
     const handleAdvance = (i, animation = "fade") => {
+        var _a;
+        const currentScreenId = (_a = props.screens[i]) === null || _a === void 0 ? void 0 : _a.id;
+        // Try to resolve using navigation data
+        if (currentScreenId) {
+            const resolvedId = resolveContinue(currentScreenId);
+            if (resolvedId) {
+                const targetIndex = getScreenIndex(resolvedId);
+                if (targetIndex >= 0 && targetIndex < props.screens.length) {
+                    navigateToIndex(targetIndex, animation);
+                    RampKitNative_1.Haptics.impactAsync("light").catch(() => { });
+                    return;
+                }
+            }
+        }
+        // Fallback to array order
         const last = props.screens.length - 1;
         if (i < last) {
+            console.log(`[RampKit] 🧭 __continue__ fallback to array index ${i + 1}`);
             navigateToIndex(i + 1, animation);
             RampKitNative_1.Haptics.impactAsync("light").catch(() => { });
         }
@@ -1338,6 +1534,29 @@ function Overlay(props) {
             handleRequestClose({ completed: true });
         }
     };
+    const handleGoBack = (i, animation = "fade") => {
+        var _a;
+        const currentScreenId = (_a = props.screens[i]) === null || _a === void 0 ? void 0 : _a.id;
+        // Try to resolve using navigation data
+        if (currentScreenId) {
+            const resolvedId = resolveGoBack(currentScreenId);
+            if (resolvedId) {
+                const targetIndex = getScreenIndex(resolvedId);
+                if (targetIndex >= 0 && targetIndex < props.screens.length) {
+                    navigateToIndex(targetIndex, animation);
+                    return;
+                }
+            }
+        }
+        // Fallback to array order
+        if (i > 0) {
+            console.log(`[RampKit] 🧭 __goBack__ fallback to array index ${i - 1}`);
+            navigateToIndex(i - 1, animation);
+        }
+        else {
+            handleRequestClose();
+        }
+    };
     async function handleNotificationPermissionRequest(payload) {
         var _a, _b;
         // Track that notification permission was requested
@@ -1541,12 +1760,7 @@ function Overlay(props) {
                                     if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:navigate") {
                                         const target = data === null || data === void 0 ? void 0 : data.targetScreenId;
                                         if (target === "__goBack__") {
-                                            if (i > 0) {
-                                                navigateToIndex(i - 1, (data === null || data === void 0 ? void 0 : data.animation) || "fade");
-                                            }
-                                            else {
-                                                handleRequestClose();
-                                            }
+                                            handleGoBack(i, (data === null || data === void 0 ? void 0 : data.animation) || "fade");
                                             return;
                                         }
                                         if (!target || target === "__continue__") {
@@ -1563,12 +1777,7 @@ function Overlay(props) {
                                         return;
                                     }
                                     if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:goBack") {
-                                        if (i > 0) {
-                                            navigateToIndex(i - 1, (data === null || data === void 0 ? void 0 : data.animation) || "fade");
-                                        }
-                                        else {
-                                            handleRequestClose();
-                                        }
+                                        handleGoBack(i, (data === null || data === void 0 ? void 0 : data.animation) || "fade");
                                         return;
                                     }
                                     if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:close") {
@@ -1621,23 +1830,13 @@ function Overlay(props) {
                                         return;
                                     }
                                     if (raw === "rampkit:goBack") {
-                                        if (i > 0) {
-                                            navigateToIndex(i - 1);
-                                        }
-                                        else {
-                                            handleRequestClose();
-                                        }
+                                        handleGoBack(i);
                                         return;
                                     }
                                     if (raw.startsWith("rampkit:navigate:")) {
                                         const target = raw.slice("rampkit:navigate:".length);
                                         if (target === "__goBack__") {
-                                            if (i > 0) {
-                                                navigateToIndex(i - 1);
-                                            }
-                                            else {
-                                                handleRequestClose();
-                                            }
+                                            handleGoBack(i);
                                             return;
                                         }
                                         if (!target || target === "__continue__") {

package/build/index.d.ts

@@ -11,5 +11,5 @@ export { default as RampKitNative } from "./RampKitNative";
 export type { NativeDeviceInfo, NativeLaunchData } from "./RampKitNative";
 export { Haptics, StoreReview, Notifications, TransactionObserver } from "./RampKitNative";
 export type { ImpactStyle, NotificationType, NotificationOptions, NotificationPermissionResult } from "./RampKitNative";
-export type { DeviceInfo, RampKitEvent, EventDevice, EventContext, RampKitConfig, RampKitEventName, RampKitContext, RampKitDeviceContext, RampKitUserContext, AppSessionStartedProperties, AppSessionEndedProperties, AppBackgroundedProperties, AppForegroundedProperties, OnboardingStartedProperties, OnboardingScreenViewedProperties, OnboardingQuestionAnsweredProperties, OnboardingCompletedProperties, OnboardingAbandonedProperties, ScreenViewProperties, CtaTapProperties, NotificationsPromptShownProperties, NotificationsResponseProperties, PaywallShownProperties, PaywallPrimaryActionTapProperties, PaywallClosedProperties, PurchaseStartedProperties, PurchaseCompletedProperties, PurchaseFailedProperties, } from "./types";
+export type { DeviceInfo, RampKitEvent, EventDevice, EventContext, RampKitConfig, RampKitEventName, RampKitContext, RampKitDeviceContext, RampKitUserContext, NavigationData, ScreenPosition, AppSessionStartedProperties, AppSessionEndedProperties, AppBackgroundedProperties, AppForegroundedProperties, OnboardingStartedProperties, OnboardingScreenViewedProperties, OnboardingQuestionAnsweredProperties, OnboardingCompletedProperties, OnboardingAbandonedProperties, ScreenViewProperties, CtaTapProperties, NotificationsPromptShownProperties, NotificationsResponseProperties, PaywallShownProperties, PaywallPrimaryActionTapProperties, PaywallClosedProperties, PurchaseStartedProperties, PurchaseCompletedProperties, PurchaseFailedProperties, } from "./types";
 export { SDK_VERSION, CAPABILITIES } from "./constants";

package/build/types.d.ts

@@ -229,3 +229,24 @@ export interface RampKitContext {
     device: RampKitDeviceContext;
     user: RampKitUserContext;
 }
+/**
+ * Navigation data structure from the editor's spatial layout
+ * This is exported alongside screens to enable proper navigation resolution
+ */
+export interface NavigationData {
+    /** Ordered array of screen IDs in the main flow (sorted by X position, main row only) */
+    mainFlow: string[];
+    /** Map of screen ID to position information */
+    screenPositions?: Record<string, ScreenPosition>;
+}
+/**
+ * Position information for a screen in the editor canvas
+ */
+export interface ScreenPosition {
+    /** X coordinate in the editor canvas */
+    x: number;
+    /** Y coordinate in the editor canvas */
+    y: number;
+    /** Row classification: "main" for main row screens, "variant" for screens below */
+    row: "main" | "variant";
+}

package/ios/RampKitModule.swift

@@ -458,63 +458,86 @@ public class RampKitModule: Module {
   @available(iOS 15.0, *)
   private func handleTransaction(_ transaction: Transaction) async {
     guard let appId = self.appId, let userId = self.userId else { return }
-    
-    // Determine event type based on transaction
+
+    let formatter = ISO8601DateFormatter()
+    formatter.formatOptions = [.withInternetDateTime, .withFractionalSeconds]
+
+    // Determine event type based on transaction (matching iOS SDK logic)
     let eventName: String
     var properties: [String: Any] = [:]
-    
-    switch transaction.revocationReason {
-    case .some(let reason):
-      eventName = "purchase_refunded"
-      properties["revocationReason"] = reason == .developerIssue ? "developer_issue" : "other"
-    case .none:
-      if transaction.isUpgraded {
-        eventName = "subscription_upgraded"
-      } else {
-        // Determine event based on product type
-        let productType = transaction.productType
-        if productType == .autoRenewable {
-          if transaction.originalID == transaction.id {
-            eventName = "purchase_completed"
-          } else {
-            eventName = "subscription_renewed"
-          }
-        } else {
-          eventName = "purchase_completed"
-        }
+
+    // Check revocation first (subscription_canceled)
+    if transaction.revocationDate != nil {
+      eventName = "subscription_canceled"
+      if let reason = transaction.revocationReason {
+        properties["revocationReason"] = reason == .developerIssue ? "developerIssue" : "other"
       }
+      properties["revocationDate"] = transaction.revocationDate.map { formatter.string(from: $0) }
     }
-    
-    // Build properties
+    // Check if this is a renewal (originalID != id)
+    else if transaction.originalID != transaction.id {
+      eventName = "subscription_renewed"
+    }
+    // Check if it's a trial or intro offer
+    else if let offerType = transaction.offerType, offerType == .introductory {
+      eventName = "trial_started"
+    }
+    // Default to purchase_completed
+    else {
+      eventName = "purchase_completed"
+    }
+
+    // Build properties (matching iOS SDK PurchaseEventDetails)
     properties["productId"] = transaction.productID
     properties["transactionId"] = String(transaction.id)
     properties["originalTransactionId"] = String(transaction.originalID)
-    properties["purchaseDate"] = ISO8601DateFormatter().string(from: transaction.purchaseDate)
-    
-    if let expirationDate = transaction.expirationDate {
-      properties["expirationDate"] = ISO8601DateFormatter().string(from: expirationDate)
-    }
-    
+    properties["purchaseDate"] = formatter.string(from: transaction.purchaseDate)
     properties["quantity"] = transaction.purchasedQuantity
     properties["productType"] = mapProductType(transaction.productType)
-    
-    // environment property is only available in iOS 16.0+
-    if #available(iOS 16.0, *) {
-      properties["environment"] = transaction.environment.rawValue
+
+    // Expiration date
+    if let expirationDate = transaction.expirationDate {
+      properties["expirationDate"] = formatter.string(from: expirationDate)
     }
-    
+
+    // Trial/intro offer detection
+    if let offerType = transaction.offerType {
+      properties["isTrial"] = offerType == .introductory
+      properties["isIntroOffer"] = offerType == .introductory
+      properties["offerType"] = formatOfferType(offerType)
+    }
+
+    // Offer ID
+    if let offerId = transaction.offerID {
+      properties["offerId"] = offerId
+    }
+
+    // Storefront country
+    properties["storefront"] = transaction.storefrontCountryCode
+
+    // Web order line item ID
     if let webOrderLineItemID = transaction.webOrderLineItemID {
       properties["webOrderLineItemId"] = webOrderLineItemID
     }
-    
+
+    // Environment (iOS 16+)
+    if #available(iOS 16.0, *) {
+      properties["environment"] = transaction.environment.rawValue
+    }
+
     // Get price info from product if available
     if let product = await getProduct(for: transaction.productID) {
-      properties["price"] = product.price
+      properties["amount"] = product.price
       properties["currency"] = product.priceFormatStyle.currencyCode
-      properties["localizedPrice"] = product.displayPrice
-      properties["localizedName"] = product.displayName
+      properties["priceFormatted"] = product.displayPrice
+
+      // Subscription-specific info
+      if let subscription = product.subscription {
+        properties["subscriptionPeriod"] = formatSubscriptionPeriod(subscription.subscriptionPeriod)
+        properties["subscriptionGroupId"] = subscription.subscriptionGroupID
+      }
     }
-    
+
     // Send event to backend
     await sendPurchaseEvent(
       appId: appId,
@@ -523,6 +546,36 @@ public class RampKitModule: Module {
       properties: properties
     )
   }
+
+  @available(iOS 15.0, *)
+  private func formatOfferType(_ offerType: Transaction.OfferType) -> String {
+    if offerType == .introductory {
+      return "introductory"
+    } else if offerType == .promotional {
+      return "promotional"
+    } else if offerType == .code {
+      return "code"
+    } else {
+      return "unknown"
+    }
+  }
+
+  @available(iOS 15.0, *)
+  private func formatSubscriptionPeriod(_ period: Product.SubscriptionPeriod) -> String {
+    // ISO 8601 duration format
+    let unit = period.unit
+    if unit == .day {
+      return "P\(period.value)D"
+    } else if unit == .week {
+      return "P\(period.value)W"
+    } else if unit == .month {
+      return "P\(period.value)M"
+    } else if unit == .year {
+      return "P\(period.value)Y"
+    } else {
+      return "P\(period.value)D"
+    }
+  }
   
   @available(iOS 15.0, *)
   private func getProduct(for productId: String) async -> Product? {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rampkit-expo-dev",
-  "version": "0.0.52",
+  "version": "0.0.53",
   "description": "The Expo SDK for RampKit. Build, test, and personalize app onboardings with instant updates.",
   "main": "build/index.js",
   "types": "build/index.d.ts",