@billdog.io/react-native 1.0.0-beta.2

package/src/VariableResolver.ts

@@ -0,0 +1,516 @@
+/**
+ * Client-side variable resolver for React Native
+ * Resolves ${variable} and {{variable}} placeholders at runtime
+ * Supports localization integration for localized variables
+ */
+
+import { LocalizationResolver } from './LocalizationResolver';
+import { PaywallConfiguration, PaywallComponent } from './types';
+import { processXFlowTags } from './xFlowTags';
+import { applyFilterChain } from './filters';
+import { ProductVariableProvider, PackageInput, TrialEligibilityInput } from './ProductVariableProvider';
+import { userSeedBucket } from './murmur';
+
+/**
+ * Get device locale with safe fallback for React Native
+ */
+function deviceLocale(): string {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().locale;
+  } catch {
+    return 'en';
+  }
+}
+
+/** Properties eligible for localization (matches Android/iOS LOCALIZABLE_PROPERTIES) */
+const LOCALIZABLE_PROPERTIES = new Set([
+  'text', 'title', 'subtitle', 'label', 'placeholder',
+  'buttonText', 'ctaText', 'description', 'content',
+  'headerText', 'footerText', 'disclaimer',
+]);
+
+export interface DeviceInfo {
+  osName?: string;
+  osVersion?: string;
+  platform?: string;
+  deviceModel?: string;
+  screenWidth?: number;
+  screenHeight?: number;
+  locale?: string;
+  timezone?: string;
+  interfaceStyle?: 'light' | 'dark' | 'unspecified';
+  batteryLevel?: number;
+  isLowPowerMode?: boolean;
+  networkType?: string;
+  carrierName?: string;
+}
+
+export class VariableResolver {
+  private allVariables: Record<string, any>;
+  private localizationResolver?: LocalizationResolver;
+  private variableLocalizations?: Record<string, Record<string, string>>;
+  private currentLocale?: string;
+
+  constructor(
+    configVariables?: Record<string, string> | null,
+    runtimeVariables: Record<string, any> = {},
+    localizationResolver?: LocalizationResolver,
+    variableLocalizations?: Record<string, Record<string, string>>,
+    currentLocale?: string
+  ) {
+    this.allVariables = {
+      ...configVariables,
+      ...runtimeVariables,
+    };
+    this.localizationResolver = localizationResolver;
+    this.variableLocalizations = variableLocalizations;
+    this.currentLocale = currentLocale;
+  }
+
+  /**
+   * Resolve a single string with variables
+   */
+  resolve(text?: string | null): string {
+    if (!text) return text ?? '';
+
+    let result = text;
+
+    // Local copy — xFlow assigns must not leak across resolve() calls
+    let resolveVars = { ...this.allVariables };
+
+    // Process xFlow {% %} tags before {{ }} interpolation
+    if (result.includes('{%')) {
+      const xFlowResult = processXFlowTags(result, resolveVars);
+      result = xFlowResult.text;
+      // Merge assigned variables into local context only
+      resolveVars = { ...resolveVars, ...xFlowResult.variables };
+    }
+
+    // Resolve ${variable} syntax
+    result = result.replace(/\$\{([\w.]+)\}/g, (_, varName) => {
+      return this.resolveVariablePath(varName, resolveVars);
+    });
+
+    // Resolve {{ variable }} and {{ variable | filter: arg }} syntax
+    result = result.replace(
+      /\{\{\s*([\w.]+)(?:\s*\|\s*(.+?))?\s*\}\}/g,
+      (match, varName, filterChain) => {
+        const name = varName.trim();
+        if (!filterChain) {
+          return this.resolveVariablePath(name, resolveVars);
+        }
+        // Filter chains operate on the raw value, bypassing localization.
+        const raw = this.resolveRawValue(name, resolveVars);
+        if (raw === undefined) return match;
+        let value: any = raw;
+        try {
+          value = applyFilterChain(raw, filterChain.trim());
+        } catch (error) {
+          console.warn('[VariableResolver] Filter chain failed:', error);
+        }
+        return value !== undefined && value !== null ? String(value) : match;
+      },
+    );
+
+    return result;
+  }
+
+  /**
+   * Resolve a variable path to its raw (un-stringified) value.
+   * Flat-key-first (grammar §4): a literal key matching the whole path wins.
+   * Returns undefined when unresolved.
+   */
+  private resolveRawValue(path: string, from: Record<string, any>): any {
+    if (path in from) return from[path];
+    const parts = path.split('.');
+    let current: any = from[parts[0]];
+    for (let i = 1; i < parts.length; i++) {
+      if (current && typeof current === 'object') {
+        current = current[parts[i]];
+      } else {
+        return undefined;
+      }
+    }
+    return current;
+  }
+
+  /**
+   * Resolve nested variable paths like "offering.monthly"
+   */
+  private resolveVariablePath(path: string, from?: Record<string, any>): string {
+    const vars = from ?? this.allVariables;
+
+    // Priority 1: Check variableLocalizations[path][locale]
+    if (this.variableLocalizations && this.currentLocale) {
+      const localeMap = this.variableLocalizations[path];
+      if (localeMap) {
+        const localizedValue = localeMap[this.currentLocale]
+          ?? localeMap[this.currentLocale.split('-')[0]]
+          ?? localeMap[this.currentLocale.split('_')[0]];
+        if (localizedValue !== undefined) {
+          return localizedValue;
+        }
+      }
+    }
+
+    // Priority 2: Direct lookup
+    if (path in vars) {
+      return String(vars[path]);
+    }
+
+    // Priority 3: Try nested path resolution
+    const parts = path.split('.');
+    let current: any = undefined;
+
+    for (const part of parts) {
+      if (current === undefined) {
+        current = vars[part];
+      } else if (typeof current === 'object' && current !== null) {
+        current = current[part];
+      } else {
+        current = undefined;
+        break;
+      }
+    }
+
+    if (current !== undefined) {
+      return String(current);
+    }
+
+    // Return empty string for unresolved variables to match the unified parity
+    // contract: iOS VariableResolver.swift:177 and Android
+    // VariableResolver.kt:147 both substitute "". A `${path}` placeholder is
+    // editor-mode behavior and must not leak into runtime — an unresolved
+    // variable would otherwise render as literal `${user.name}` on-device.
+    //
+    // This fix existed in the legacy packages/react-native resolver and was
+    // lost when the thin bridge replaced it (ba6a68d86); the conformance
+    // corpus caught the regression. Warn rather than log so unresolved
+    // variables stay visible in production, matching both native SDKs.
+    console.warn(`[VariableResolver] Variable not resolved: ${path} — substituting empty string`);
+    return '';
+  }
+
+  /**
+   * Resolve all text properties in a component
+   * Applies localization for LOCALIZABLE_PROPERTIES (matching Android/iOS parity)
+   */
+  resolveComponent(component: PaywallComponent): PaywallComponent {
+    if (!component) return component;
+
+    const resolvedComponent = { ...component };
+
+    // Resolve properties
+    if (component.properties) {
+      const resolvedProperties: Record<string, any> = {};
+      for (const [key, value] of Object.entries(component.properties)) {
+        if (typeof value === 'string') {
+          const variableResolved = this.resolve(value);
+          // Apply localization for localizable properties (matching Android/iOS)
+          if (this.localizationResolver
+            && LOCALIZABLE_PROPERTIES.has(key)
+            && !this.localizationResolver.isBaseLocale()) {
+            resolvedProperties[key] = this.localizationResolver.resolve(
+              `${component.id}.${key}`,
+              variableResolved
+            );
+          } else {
+            resolvedProperties[key] = variableResolved;
+          }
+        } else {
+          resolvedProperties[key] = value;
+        }
+      }
+      resolvedComponent.properties = resolvedProperties;
+    }
+
+    // Recursively resolve children
+    if (component.children && Array.isArray(component.children)) {
+      resolvedComponent.children = component.children.map((child: PaywallComponent) =>
+        this.resolveComponent(child)
+      );
+    }
+
+    return resolvedComponent;
+  }
+
+  /**
+   * Resolve all components in a configuration
+   */
+  resolveConfiguration(config: PaywallConfiguration): PaywallConfiguration {
+    if (!config) return config;
+
+    const resolvedConfig = { ...config };
+
+    if (config.components && Array.isArray(config.components)) {
+      resolvedConfig.components = config.components.map((comp: PaywallComponent) =>
+        this.resolveComponent(comp)
+      );
+    }
+
+    return resolvedConfig;
+  }
+
+  // ─── Device Variable Builder (single source of truth) ──────────────────────
+
+  /**
+   * Build device variable map from DeviceInfo — single source of truth.
+   * Used by withDeviceInfo(), withFullContext(), withProducts().
+   * Maps RN DeviceInfo field names to canonical SDK key names.
+   */
+  static buildDeviceVariables(deviceInfo: DeviceInfo): Record<string, any> {
+    const vars: Record<string, any> = {};
+
+    // Flat keys for direct access (canonical names matching Android/iOS)
+    if (deviceInfo.osName) vars['device.osName'] = deviceInfo.osName;
+    if (deviceInfo.osVersion) vars['device.osVersion'] = deviceInfo.osVersion;
+    if (deviceInfo.platform) vars['device.platform'] = deviceInfo.platform;
+    if (deviceInfo.deviceModel) vars['device.deviceModel'] = deviceInfo.deviceModel;
+    if (deviceInfo.screenWidth !== undefined) vars['device.screenWidth'] = deviceInfo.screenWidth;
+    if (deviceInfo.screenHeight !== undefined) vars['device.screenHeight'] = deviceInfo.screenHeight;
+    if (deviceInfo.locale) vars['device.locale'] = deviceInfo.locale;
+    if (deviceInfo.timezone) vars['device.timezone'] = deviceInfo.timezone;
+    if (deviceInfo.interfaceStyle) vars['device.interfaceStyle'] = deviceInfo.interfaceStyle;
+    if (deviceInfo.batteryLevel !== undefined) vars['device.batteryLevel'] = deviceInfo.batteryLevel;
+    // Map RN field name to canonical SDK key name
+    if (deviceInfo.isLowPowerMode !== undefined) vars['device.isLowPowerModeEnabled'] = deviceInfo.isLowPowerMode;
+    if (deviceInfo.networkType) vars['device.radioType'] = deviceInfo.networkType;
+    if (deviceInfo.carrierName) vars['device.carrierName'] = deviceInfo.carrierName;
+
+    // Nested object for dot-path resolution (includes screenWidth/Height)
+    vars.device = {
+      osName: deviceInfo.osName,
+      osVersion: deviceInfo.osVersion,
+      platform: deviceInfo.platform,
+      deviceModel: deviceInfo.deviceModel,
+      locale: deviceInfo.locale,
+      timezone: deviceInfo.timezone,
+      interfaceStyle: deviceInfo.interfaceStyle,
+      screenWidth: deviceInfo.screenWidth,
+      screenHeight: deviceInfo.screenHeight,
+    };
+
+    return vars;
+  }
+
+  // ─── Factory Methods ───────────────────────────────────────────────────────
+
+  /**
+   * Create resolver with offering variables injected
+   */
+  static withOfferings(
+    config: PaywallConfiguration,
+    offerings: Record<string, string>
+  ): VariableResolver {
+    return new VariableResolver(
+      config.variables,
+      offerings,
+      LocalizationResolver.fromConfiguration(config),
+      config.variableLocalizations,
+      deviceLocale()
+    );
+  }
+
+  /**
+   * Create resolver with device info variables
+   * Maps device info to namespaced variables (device.*)
+   */
+  static withDeviceInfo(
+    config: PaywallConfiguration,
+    deviceInfo: DeviceInfo
+  ): VariableResolver {
+    return new VariableResolver(
+      config.variables,
+      VariableResolver.buildDeviceVariables(deviceInfo),
+      LocalizationResolver.fromConfiguration(config),
+      config.variableLocalizations,
+      deviceInfo.locale ?? deviceLocale()
+    );
+  }
+
+  /**
+   * Create resolver with localization support
+   */
+  static withLocalization(
+    config: PaywallConfiguration,
+    locale?: string
+  ): VariableResolver {
+    const locResolver = locale
+      ? LocalizationResolver.withLocale(config, locale)
+      : LocalizationResolver.withDeviceLocale(config);
+
+    return new VariableResolver(
+      config.variables,
+      {},
+      locResolver,
+      config.variableLocalizations,
+      locale ?? deviceLocale()
+    );
+  }
+
+  /**
+   * Create resolver with full context (offerings, device info, localization)
+   */
+  static withFullContext(
+    config: PaywallConfiguration,
+    offerings: Record<string, string>,
+    deviceInfo: DeviceInfo
+  ): VariableResolver {
+    const runtimeVars = {
+      ...VariableResolver.buildDeviceVariables(deviceInfo),
+      ...offerings,
+    };
+
+    return new VariableResolver(
+      config.variables,
+      runtimeVars,
+      LocalizationResolver.withDeviceLocale(config),
+      config.variableLocalizations,
+      deviceInfo.locale ?? deviceLocale()
+    );
+  }
+
+  /**
+   * Create resolver with user eligibility variables
+   * Enables {{user.isEligibleForIntro}}, {{user.hasUsedTrial}}, etc.
+   */
+  static withEligibility(
+    config: PaywallConfiguration,
+    isEligibleForIntro: boolean = true,
+    hasUsedTrial: boolean = false,
+    isEligibleForPromo: boolean = false
+  ): VariableResolver {
+    const eligibilityVars: Record<string, any> = {
+      'user.isEligibleForIntro': isEligibleForIntro,
+      'user.hasUsedTrial': hasUsedTrial,
+      'user.isEligibleForPromo': isEligibleForPromo,
+      user: {
+        isEligibleForIntro,
+        hasUsedTrial,
+        isEligibleForPromo,
+      },
+    };
+
+    return new VariableResolver(
+      config.variables,
+      eligibilityVars,
+      LocalizationResolver.fromConfiguration(config),
+      config.variableLocalizations,
+      deviceLocale()
+    );
+  }
+
+  /**
+   * Create resolver with product/package variables
+   * Enables {{product.price}}, {{selectedProduct.*}}, {{products.N.*}},
+   * {{primary.*}}, {{monthly.*}}, etc. (40+ variable keys per package)
+   *
+   * Delegates to ProductVariableProvider for full parity with Android.
+   */
+  static withProducts(
+    config: PaywallConfiguration,
+    packages: PackageInput[],
+    selectedIndex: number = 0,
+    trialEligibility?: Record<string, TrialEligibilityInput>,
+    deviceInfo?: DeviceInfo
+  ): VariableResolver {
+    const provider = new ProductVariableProvider(packages, trialEligibility);
+    const productVars: Record<string, any> = {};
+
+    // Selected product → product.* prefix
+    Object.assign(productVars, provider.getVariablesForProduct(selectedIndex));
+
+    // selectedProduct.* mirror
+    Object.assign(productVars, provider.getSelectedProductVariables(selectedIndex));
+
+    // products.N.* indexed access
+    Object.assign(productVars, provider.getAllProductVariables());
+    productVars['packages.count'] = packages.length;
+
+    // Convenience aliases (primary.*, secondary.*, monthly.*, annual.*, etc.)
+    Object.assign(productVars, provider.getConvenienceVariables());
+
+    // Add device info if provided — use canonical buildDeviceVariables
+    if (deviceInfo) {
+      Object.assign(productVars, VariableResolver.buildDeviceVariables(deviceInfo));
+    }
+
+    return new VariableResolver(
+      config.variables,
+      productVars,
+      LocalizationResolver.fromConfiguration(config),
+      config.variableLocalizations,
+      deviceInfo?.locale ?? deviceLocale()
+    );
+  }
+
+  /**
+   * Create resolver with an Offering's packages
+   * Convenience wrapper around withProducts
+   */
+  static withOffering(
+    config: PaywallConfiguration,
+    offering: { packages: PackageInput[] },
+    selectedIndex: number = 0,
+    trialEligibility?: Record<string, TrialEligibilityInput>,
+    deviceInfo?: DeviceInfo
+  ): VariableResolver {
+    return VariableResolver.withProducts(config, offering.packages, selectedIndex, trialEligibility, deviceInfo);
+  }
+
+  /**
+   * Build the FULL render-time variable bag (device + product/offer/user) — the
+   * React-Native analog of iOS/Android `VariableResolver.withOffering(...).variables`.
+   * Fed to `processFullComponent` so Dynamic Values conditions on
+   * `products.*` / `selectedProduct.*` / `offer.*` / `user.*` actually resolve on
+   * RN (previously the render bag was device + `config.variables` only, so every
+   * product/user DV condition silently rendered `default`).
+   *
+   * `selectedIndex` is 0 for now — parity with the native Phase-2 render pass,
+   * which is not yet selection-reactive (Phase 2b). `appUserId`/`customerInfo` are
+   * passed in by the caller (`BillDog.getAppUserId()` + `customerInfoEmitter.latest`,
+   * both sync) to avoid a VariableResolver→BillDog import cycle.
+   */
+  static buildRenderVariables(
+    config: PaywallConfiguration,
+    deviceInfo: DeviceInfo,
+    opts?: {
+      selectedIndex?: number;
+      appUserId?: string | null;
+      customerInfo?: {
+        entitlements?: Array<{ identifier: string; isActive: boolean }>;
+        activeSubscriptions?: string[];
+      } | null;
+    }
+  ): Record<string, any> {
+    const selectedIndex = opts?.selectedIndex ?? 0;
+    const bag: Record<string, any> = { ...VariableResolver.buildDeviceVariables(deviceInfo) };
+
+    const packages = (config as any).packages as PackageInput[] | undefined;
+    if (Array.isArray(packages) && packages.length > 0) {
+      const provider = new ProductVariableProvider(packages, (config as any).trialEligibility);
+      Object.assign(bag, provider.getVariablesForProduct(selectedIndex)); // product.* (+ user.isEligibleForIntro/hasUsedTrial)
+      Object.assign(bag, provider.getSelectedProductVariables(selectedIndex)); // selectedProduct.*
+      Object.assign(bag, provider.getAllProductVariables()); // products.N.*
+      Object.assign(bag, provider.getConvenienceVariables()); // primary.*/secondary.*/…
+      bag['packages.count'] = packages.length;
+      bag['products.selectedIndex'] = selectedIndex;
+    }
+
+    // user.seed — deterministic A/B bucket (canonical murmur; parity with native).
+    if (opts?.appUserId) bag['user.seed'] = userSeedBucket(opts.appUserId);
+
+    // user.subscription — active entitlement tier, from the SYNC-cached CustomerInfo
+    // (may be null on cold start; best-effort, same async limitation as iOS Phase 2).
+    // Sorted for cross-platform determinism with iOS/Android.
+    const customer = opts?.customerInfo;
+    if (customer) {
+      const active = (customer.entitlements ?? []).filter((e) => e.isActive).map((e) => e.identifier).sort();
+      bag['user.subscription'] = active[0] ?? '';
+      bag['user.hasActiveSubscription'] = (customer.activeSubscriptions?.length ?? 0) > 0 || active.length > 0;
+      bag['user.activeEntitlements'] = active.join(',');
+    }
+
+    return bag;
+  }
+}