@namiml/expo-sdk 3.4.5-dev.202607100416 → 3.4.5-dev.202607101515

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@namiml/expo-sdk",
-  "version": "3.4.5-dev.202607100416",
+  "version": "3.4.5-dev.202607101515",
   "type": "module",
   "description": "Nami Expo SDK — paywall and subscription management for Expo apps",
   "main": "./dist/index.cjs",
@@ -29,8 +29,8 @@
     "prepublishOnly": "yarn clean && yarn build:prod"
   },
   "dependencies": {
-    "@namiml/expo-nami-iap": "3.4.5-dev.202607100416",
-    "@namiml/sdk-core": "3.4.5-dev.202607100416",
+    "@namiml/expo-nami-iap": "3.4.5-dev.202607101515",
+    "@namiml/sdk-core": "3.4.5-dev.202607101515",
     "react-native-qrcode-svg": "^6.3.21",
     "react-native-safe-area-context": "^5.6.0",
     "react-native-svg": "^15.15.4"

package/src/adapters/index.ts

@@ -5,6 +5,7 @@ import { ExpoUIAdapter } from './expo-ui.adapter';
 import { ExpoPurchaseAdapter } from './expo-purchase.adapter';
 
 export const expoUIAdapter = new ExpoUIAdapter();
+export const expoPurchaseAdapter = new ExpoPurchaseAdapter();
 let adaptersRegistered = false;
 
 export function registerExpoAdapters(): void {
@@ -18,7 +19,7 @@ export function registerExpoAdapters(): void {
       device: new ExpoDeviceAdapter(),
       ui: expoUIAdapter,
     });
-    registerPurchaseAdapter(new ExpoPurchaseAdapter());
+    registerPurchaseAdapter(expoPurchaseAdapter);
     adaptersRegistered = true;
   } catch (error) {
     logger.warn('[NamiExpo] Failed to register Expo adapters.', error);

package/src/components/NamiView.tsx

@@ -32,6 +32,7 @@ import { expoUIAdapter } from '../adapters';
 import { FocusProvider } from '../context/FocusContext';
 import { prewarmPaywallFonts, prepareAndLoadFontsWithTimeout } from '../utils/fonts';
 import { parseColor } from '../utils/styles';
+import { backfill as backfillProducts, collectSkuRefIds } from '../products/productStore';
 
 export interface NamiViewProps {
   /** Campaign placement label */
@@ -541,6 +542,11 @@ export const NamiView: React.FC<NamiViewProps> = ({
 
         prewarmPaywallFonts([paywall, ...flowPaywalls]);
 
+        const launchSkuRefIds = collectSkuRefIds(
+          [paywall, ...flowPaywalls].filter((item): item is IPaywall => item != null),
+        );
+        if (launchSkuRefIds.length) void backfillProducts(launchSkuRefIds);
+
         if (initialPaywall?.fonts) {
           void prepareAndLoadFontsWithTimeout(initialPaywall.fonts);
         }

package/src/components/elements/NamiSegmentPicker.tsx

@@ -3,6 +3,8 @@ import { ScrollView, StyleSheet, View } from 'react-native';
 import { applyStyles, focusedStyleOverrides, parseSize } from '../../utils/styles';
 import { NamiSegmentPickerItem } from './NamiSegmentPickerItem';
 import { FocusScope, useFocusEnabled } from '../../context/FocusContext';
+import { usePaywallContext } from '../../context/PaywallContext';
+import { resolveComponentSmartText, withOverrides } from '../../utils/rendering';
 
 interface Props {
   component: any;
@@ -18,6 +20,7 @@ export const NamiSegmentPicker: React.FC<Props> = ({
   parentDirection,
 }) => {
   const focusEnabled = useFocusEnabled();
+  const ctx = usePaywallContext();
 
   // NAM-1213 CTV: track whether any segment item currently holds remote focus so the
   // whole container can apply its focused visual treatment (focusedFillColor etc.).
@@ -35,7 +38,13 @@ export const NamiSegmentPicker: React.FC<Props> = ({
 
   const direction = component.direction ?? 'horizontal';
   const parentFormId = component.formId ?? component.id ?? '';
-  const segments = component.components ?? [];
+  const segments = (component.components ?? []).map((segment: any) => {
+    const smartTextSku = segment?.smartTextSku ?? segment?.sku;
+    const withConditions = segment?.conditionAttributes?.length
+      ? withOverrides(ctx, segment, smartTextSku)
+      : segment;
+    return resolveComponentSmartText(withConditions, ctx);
+  });
   const spacing = parseSize(component.spacing, scaleFactor) ?? 0;
 
   const inner = (

package/src/nami.ts

@@ -1,10 +1,25 @@
 import './adapters';
-import { Nami as CoreNami } from '@namiml/sdk-core';
+import { Nami as CoreNami, NamiPaywallManager, logger } from '@namiml/sdk-core';
+import { backfill, collectSkuRefIds, reset as resetProductStore } from './products/productStore';
 
 type ResettableCoreNami = typeof CoreNami & {
   reset?: () => Promise<void>;
 };
 
+/**
+ * Prefetch StoreKit/Play product details for every configured paywall's SKUs so that
+ * prices are available before any paywall mounts (mirrors the Apple SDK startup load).
+ * Fire-and-forget and error-safe: a failure here never blocks configure.
+ */
+export async function prefetchProducts(): Promise<void> {
+  try {
+    const ids = collectSkuRefIds(NamiPaywallManager.allPaywalls());
+    if (ids.length) await backfill(ids);
+  } catch (error) {
+    logger.warn('[NamiExpo] Product prefetch skipped.', error);
+  }
+}
+
 export class Nami {
   static get sdkVersion(): string {
     return CoreNami.sdkVersion();
@@ -15,10 +30,13 @@ export class Nami {
   }
 
   static async configure(config: Parameters<typeof CoreNami.configure>[0]) {
-    return CoreNami.configure(config);
+    const result = await CoreNami.configure(config);
+    void prefetchProducts();
+    return result;
   }
 
   static async reset(): Promise<void> {
+    resetProductStore();
     await (CoreNami as ResettableCoreNami).reset?.();
   }
 }

package/src/products/productStore.ts

@@ -0,0 +1,63 @@
+import type { IPaywall, NamiProductDetails } from '@namiml/sdk-core';
+import { NamiPaywallManager, logger } from '@namiml/sdk-core';
+import { expoPurchaseAdapter } from '../adapters';
+
+// Accumulated store product details, keyed by product_ref_id (== sku_ref_id).
+const productsById = new Map<string, NamiProductDetails>();
+
+// Serializes backfill runs so concurrent launches/prefetches don't double-fetch
+// or race the map (parity with the Apple SDK's backfillTaskLock).
+let pending: Promise<boolean> = Promise.resolve(false);
+
+/** Collect unique store product ids (sku_ref_id) from the given paywalls' sku menus. */
+export function collectSkuRefIds(paywalls: IPaywall[]): string[] {
+  const ids = new Set<string>();
+  for (const paywall of paywalls ?? []) {
+    for (const menu of paywall?.sku_menus ?? []) {
+      for (const sku of menu?.products ?? []) {
+        if (sku?.sku_ref_id) ids.add(sku.sku_ref_id);
+      }
+    }
+  }
+  return [...ids];
+}
+
+/**
+ * Fetch store product details for any of `skuRefIds` not already loaded, merge them into
+ * the accumulated set, and push the union to core via NamiPaywallManager.setProductDetails.
+ * Serialized; returns whether new products were added. Never throws.
+ */
+export function backfill(skuRefIds: string[]): Promise<boolean> {
+  pending = pending.then(() => backfillOnce(skuRefIds));
+  return pending;
+}
+
+async function backfillOnce(skuRefIds: string[]): Promise<boolean> {
+  const missing = [...new Set(skuRefIds)].filter((id) => id && !productsById.has(id));
+  if (!missing.length) return false;
+  try {
+    const products = await expoPurchaseAdapter.getProducts(missing);
+    let added = false;
+    for (const product of products ?? []) {
+      if (product?.product_ref_id) {
+        productsById.set(product.product_ref_id, product);
+        added = true;
+      }
+    }
+    if (added) {
+      NamiPaywallManager.setProductDetails([...productsById.values()]);
+    }
+    return added;
+  } catch (error) {
+    logger.warn('[NamiExpo] Failed to load store products.', error);
+    return false;
+  }
+}
+
+/** Clear accumulated products. Called on Nami.reset so reconfigure doesn't serve stale data. */
+export function reset(): void {
+  pending = pending.then(() => {
+    productsById.clear();
+    return false;
+  });
+}