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

package/src/PaywallCache.ts

@@ -0,0 +1,358 @@
+/**
+ * PaywallCache - Smart caching layer for React Native
+ * Uses AsyncStorage for metadata and RNFS for asset caching
+ * Supports server-provided cache configuration
+ */
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import RNFS from 'react-native-fs';
+
+export interface CacheConfig {
+  enabled: boolean;
+  maxCacheAge: number; // milliseconds
+  backgroundUpdateEnabled: boolean;
+  preloadAssets: boolean;
+}
+
+export const DEFAULT_CACHE_CONFIG: CacheConfig = {
+  enabled: true,
+  maxCacheAge: 604800000, // 7 days
+  backgroundUpdateEnabled: true,
+  preloadAssets: true,
+};
+
+export interface CachedPaywall {
+  paywall: {
+    id: string;
+    identifier: string;
+    name: string;
+    configuration: any;
+    version: number;
+  };
+  version: number;
+  cachedAt: number;
+  expiresAt: number;
+  etag?: string;
+  isFallback?: boolean;
+}
+
+// Track background updates in progress
+const backgroundUpdateInProgress = new Set<string>();
+
+export class PaywallCache {
+  private config: CacheConfig;
+  private cacheDir: string;
+  private fallbackCache: Map<string, CachedPaywall> = new Map();
+
+  constructor(config: Partial<CacheConfig> = {}) {
+    this.config = { ...DEFAULT_CACHE_CONFIG, ...config };
+    this.cacheDir = `${RNFS.CachesDirectoryPath}/billdog_paywalls`;
+    
+    // Create cache directory
+    RNFS.mkdir(this.cacheDir).catch(() => {
+      // Directory might already exist
+    });
+  }
+
+  // MARK: - Configuration
+
+  /**
+   * Update cache configuration from server response
+   */
+  configureFromServer(serverConfig: CacheConfig): void {
+    this.config = { ...this.config, ...serverConfig };
+    console.log('[PaywallCache] Configured from server:', this.config);
+  }
+
+  /**
+   * Get current cache configuration
+   */
+  getConfig(): CacheConfig {
+    return { ...this.config };
+  }
+
+  // MARK: - Paywall Caching
+
+  async get(identifier: string): Promise<CachedPaywall | null> {
+    if (!this.config.enabled) {
+      // Still return fallback if available
+      return this.fallbackCache.get(identifier) || null;
+    }
+
+    try {
+      const key = `paywall:${identifier}`;
+      const cachedJson = await AsyncStorage.getItem(key);
+
+      if (!cachedJson) {
+        console.log(`[PaywallCache] MISS: ${identifier}`);
+        // Return fallback if available
+        return this.fallbackCache.get(identifier) || null;
+      }
+
+      const cached: CachedPaywall = JSON.parse(cachedJson);
+
+      // Check expiration (unless it's a fallback)
+      if (!cached.isFallback && Date.now() > cached.expiresAt) {
+        console.log(`[PaywallCache] EXPIRED: ${identifier}`);
+        await this.delete(identifier);
+        // Return fallback if available
+        return this.fallbackCache.get(identifier) || null;
+      }
+
+      console.log(`[PaywallCache] HIT: ${identifier} (v${cached.version})${cached.isFallback ? ' (fallback)' : ''}`);
+      return cached;
+    } catch (error) {
+      console.error(`[PaywallCache] ERROR reading cache:`, error);
+      return this.fallbackCache.get(identifier) || null;
+    }
+  }
+
+  async set(identifier: string, paywall: CachedPaywall): Promise<void> {
+    if (!this.config.enabled && !paywall.isFallback) return;
+
+    try {
+      // Calculate expiration using server-provided maxCacheAge
+      const cacheEntry: CachedPaywall = {
+        ...paywall,
+        cachedAt: Date.now(),
+        expiresAt: Date.now() + this.config.maxCacheAge,
+      };
+
+      const key = `paywall:${identifier}`;
+      const cachedJson = JSON.stringify(cacheEntry);
+      await AsyncStorage.setItem(key, cachedJson);
+      console.log(`[PaywallCache] CACHED: ${identifier} (v${paywall.version}) TTL: ${this.config.maxCacheAge / 1000}s`);
+    } catch (error) {
+      console.error(`[PaywallCache] ERROR writing cache:`, error);
+    }
+  }
+
+  /**
+   * Set a fallback paywall that will never be cleared
+   */
+  async setFallback(identifier: string, paywall: CachedPaywall): Promise<void> {
+    const fallbackPaywall: CachedPaywall = {
+      ...paywall,
+      isFallback: true,
+      expiresAt: Date.now() + (365 * 24 * 60 * 60 * 1000), // 1 year
+    };
+    
+    // Store in memory for fast access
+    this.fallbackCache.set(identifier, fallbackPaywall);
+    
+    // Also persist to storage
+    await this.set(identifier, fallbackPaywall);
+    console.log(`[PaywallCache] FALLBACK SET: ${identifier}`);
+  }
+
+  async delete(identifier: string, includeFallback: boolean = false): Promise<void> {
+    try {
+      // Check if it's a fallback and skip if not forcing
+      if (!includeFallback) {
+        const key = `paywall:${identifier}`;
+        const cachedJson = await AsyncStorage.getItem(key);
+        if (cachedJson) {
+          const cached: CachedPaywall = JSON.parse(cachedJson);
+          if (cached.isFallback) {
+            console.log(`[PaywallCache] SKIP DELETE FALLBACK: ${identifier}`);
+            return;
+          }
+        }
+      }
+
+      const key = `paywall:${identifier}`;
+      await AsyncStorage.removeItem(key);
+      
+      if (includeFallback) {
+        this.fallbackCache.delete(identifier);
+      }
+      
+      console.log(`[PaywallCache] DELETED: ${identifier}`);
+    } catch (error) {
+      console.error(`[PaywallCache] ERROR deleting cache:`, error);
+    }
+  }
+
+  // MARK: - Background Updates
+
+  /**
+   * Check if background update is needed and trigger if enabled
+   */
+  shouldTriggerBackgroundUpdate(identifier: string): boolean {
+    if (!this.config.backgroundUpdateEnabled) return false;
+    if (backgroundUpdateInProgress.has(identifier)) return false;
+    return true;
+  }
+
+  markBackgroundUpdateStarted(identifier: string): void {
+    backgroundUpdateInProgress.add(identifier);
+  }
+
+  markBackgroundUpdateCompleted(identifier: string): void {
+    backgroundUpdateInProgress.delete(identifier);
+  }
+
+  // MARK: - Asset Caching
+
+  async cacheAsset(url: string): Promise<string | null> {
+    if (!this.config.preloadAssets) return null;
+
+    try {
+      const fileName = url.split('/').pop() || 'asset';
+      const localPath = `${this.cacheDir}/${fileName}`;
+
+      // Check if already cached
+      const exists = await RNFS.exists(localPath);
+      if (exists) {
+        console.log(`[PaywallCache] Asset already cached: ${fileName}`);
+        return localPath;
+      }
+
+      // Download and cache
+      const result = await RNFS.downloadFile({
+        fromUrl: url,
+        toFile: localPath,
+      }).promise;
+
+      if (result.statusCode === 200) {
+        console.log(`[PaywallCache] Asset cached: ${fileName}`);
+        return localPath;
+      } else {
+        console.error(`[PaywallCache] Asset download failed: ${result.statusCode}`);
+        return null;
+      }
+    } catch (error) {
+      console.error(`[PaywallCache] Asset caching error:`, error);
+      return null;
+    }
+  }
+
+  /**
+   * Preload all assets from a paywall configuration
+   */
+  async preloadPaywallAssets(configuration: any): Promise<void> {
+    if (!this.config.preloadAssets) return;
+
+    const assetUrls = this.extractAssetUrls(configuration);
+    console.log(`[PaywallCache] Preloading ${assetUrls.length} assets`);
+
+    await Promise.all(assetUrls.map(url => this.cacheAsset(url)));
+  }
+
+  private extractAssetUrls(config: any): string[] {
+    const urls: string[] = [];
+    
+    const traverse = (obj: any) => {
+      if (!obj || typeof obj !== 'object') return;
+      
+      if (typeof obj.src === 'string' && obj.src.startsWith('http')) {
+        urls.push(obj.src);
+      }
+      if (typeof obj.imageUrl === 'string' && obj.imageUrl.startsWith('http')) {
+        urls.push(obj.imageUrl);
+      }
+      if (typeof obj.backgroundImage === 'string' && obj.backgroundImage.startsWith('http')) {
+        urls.push(obj.backgroundImage);
+      }
+      
+      Object.values(obj).forEach(traverse);
+    };
+    
+    traverse(config);
+    return [...new Set(urls)]; // Remove duplicates
+  }
+
+  async getCachedAssetPath(url: string): Promise<string | null> {
+    try {
+      const fileName = url.split('/').pop() || 'asset';
+      const localPath = `${this.cacheDir}/${fileName}`;
+
+      const exists = await RNFS.exists(localPath);
+      return exists ? localPath : null;
+    } catch (error) {
+      console.error(`[PaywallCache] Error checking cached asset:`, error);
+      return null;
+    }
+  }
+
+  // MARK: - Cache Management
+
+  /**
+   * Clear regular cache (preserves fallbacks)
+   */
+  async clearAll(): Promise<void> {
+    try {
+      // Clear AsyncStorage keys (skip fallbacks)
+      const keys = await AsyncStorage.getAllKeys();
+      const paywallKeys = keys.filter((key) => key.startsWith('paywall:'));
+      
+      for (const key of paywallKeys) {
+        const cachedJson = await AsyncStorage.getItem(key);
+        if (cachedJson) {
+          const cached: CachedPaywall = JSON.parse(cachedJson);
+          if (!cached.isFallback) {
+            await AsyncStorage.removeItem(key);
+          }
+        }
+      }
+
+      // Clear file cache
+      const files = await RNFS.readDir(this.cacheDir);
+      await Promise.all(files.map((file) => RNFS.unlink(file.path)));
+
+      console.log('[PaywallCache] Cache cleared (fallbacks preserved)');
+    } catch (error) {
+      console.error('[PaywallCache] Error clearing cache:', error);
+    }
+  }
+
+  /**
+   * Clear all cache including fallbacks
+   */
+  async clearAllIncludingFallbacks(): Promise<void> {
+    try {
+      const keys = await AsyncStorage.getAllKeys();
+      const paywallKeys = keys.filter((key) => key.startsWith('paywall:'));
+      await AsyncStorage.multiRemove(paywallKeys);
+
+      const files = await RNFS.readDir(this.cacheDir);
+      await Promise.all(files.map((file) => RNFS.unlink(file.path)));
+
+      this.fallbackCache.clear();
+
+      console.log('[PaywallCache] All cache cleared including fallbacks');
+    } catch (error) {
+      console.error('[PaywallCache] Error clearing cache:', error);
+    }
+  }
+
+  async getStats(): Promise<{ 
+    paywallCount: number; 
+    assetCount: number; 
+    fallbackCount: number;
+    config: CacheConfig;
+  }> {
+    try {
+      const keys = await AsyncStorage.getAllKeys();
+      const paywallKeys = keys.filter((key) => key.startsWith('paywall:'));
+
+      const files = await RNFS.readDir(this.cacheDir);
+      const assetCount = files.length;
+
+      return { 
+        paywallCount: paywallKeys.length, 
+        assetCount,
+        fallbackCount: this.fallbackCache.size,
+        config: this.config,
+      };
+    } catch (error) {
+      console.error('[PaywallCache] Error getting stats:', error);
+      return { 
+        paywallCount: 0, 
+        assetCount: 0, 
+        fallbackCount: 0,
+        config: this.config,
+      };
+    }
+  }
+}

package/src/PaywallStateManager.ts

@@ -0,0 +1,154 @@
+/**
+ * PaywallStateManager — element state for React Native paywall components.
+ *
+ * Parity with `io.billdog.compose.ui.PaywallStateManager` (Android) and
+ * `PaywallStateManager.shared` (iOS): a key→value store with per-key subscriptions,
+ * following the `element:{componentId}.{property}` convention, plus the paywall-wide
+ * `products.selectedIndex` key that drives selection-reactive Dynamic Values.
+ *
+ * WHY THIS EXISTS: 27 RN component files already called a `stateManager` prop
+ * (`updateState`, `subscribeToState`, `getState`, `setState`, `subscribe`) — but
+ * nothing ever PROVIDED one, and every call site optional-chains
+ * (`stateManager?.updateState?.(...)`). So the entire cross-component state protocol
+ * was dead code that failed silently: toggles could not drive visibility, tabs could
+ * not be driven externally, and product selection was invisible outside the products
+ * component. This is the missing implementation, not a new abstraction.
+ *
+ * Usage:
+ *   PaywallStateManager.shared.setState('element:slider_1.currentValue', 75);
+ *   const v = PaywallStateManager.shared.getState<number>('element:slider_1.currentValue');
+ */
+import { isDeepEqual } from './valueUtils';
+
+export type StateListener = (value: any) => void;
+export type Unsubscribe = () => void;
+
+export class PaywallStateManager {
+  /**
+   * Paywall-wide key holding the live product selection.
+   *
+   * Deliberately NOT `element:{id}.selectedIndex` — that form is scoped to a single
+   * products component, while Dynamic Values need one well-known key to react to. The
+   * name matches the variable key the DV bag emits (`products.selectedIndex`), so an
+   * authored condition and the state driving it are spelled identically.
+   *
+   * Parity: Android `PaywallStateManager.SELECTED_INDEX_KEY`, iOS
+   * `PaywallView.selectedIndexStateKey`.
+   */
+  static readonly SELECTED_INDEX_KEY = 'products.selectedIndex';
+
+  /** Shared instance. Native uses a singleton (Kotlin `object` / Swift `.shared`); the
+   *  class stays exported so tests can build an isolated store. */
+  static readonly shared = new PaywallStateManager();
+
+  private state = new Map<string, any>();
+  private listeners = new Map<string, Set<StateListener>>();
+
+  /** Read the current value, or `defaultValue` when unset. */
+  getState<T = any>(key: string, defaultValue?: T): T | undefined {
+    const v = this.state.get(key);
+    return v === undefined ? defaultValue : (v as T);
+  }
+
+  /**
+   * Write a value and notify subscribers.
+   *
+   * The structural-equality guard is load-bearing, not an optimisation: components
+   * write their state in an effect keyed on that same state, so an unconditional
+   * notify would loop (write → notify → setState → effect → write). Android relies on
+   * the identical guard.
+   */
+  setState(key: string, value: any): void {
+    if (this.state.has(key) && isDeepEqual(this.state.get(key), value)) return;
+    this.state.set(key, value);
+    this.notify(key, value);
+  }
+
+  /** Alias for {@link setState} — the name 53 existing call sites use (web-builder parity). */
+  updateState(key: string, value: any): void {
+    this.setState(key, value);
+  }
+
+  /** Alias for {@link getState} — used by the component test suite. */
+  getValue<T = any>(key: string, defaultValue?: T): T | undefined {
+    return this.getState<T>(key, defaultValue);
+  }
+
+  /** Alias for {@link setState} — used by the component test suite. */
+  setValue(key: string, value: any): void {
+    this.setState(key, value);
+  }
+
+  /**
+   * Subscribe to a key. Returns an unsubscribe function — components return it
+   * directly from `useEffect`, so it MUST be callable and idempotent.
+   */
+  subscribe(key: string, listener: StateListener): Unsubscribe {
+    let set = this.listeners.get(key);
+    if (!set) {
+      set = new Set();
+      this.listeners.set(key, set);
+    }
+    set.add(listener);
+    return () => {
+      const current = this.listeners.get(key);
+      if (!current) return;
+      current.delete(listener);
+      if (current.size === 0) this.listeners.delete(key);
+    };
+  }
+
+  /** Alias for {@link subscribe} — the name 14 existing call sites use. */
+  subscribeToState(key: string, listener: StateListener): Unsubscribe {
+    return this.subscribe(key, listener);
+  }
+
+  /**
+   * Clear all state AND subscriptions, for a fresh paywall presentation.
+   *
+   * ORDERING TRAP (React-specific, inverted from the native SDKs): child effects run
+   * BEFORE parent effects, so calling this from a mount effect in PaywallView would
+   * wipe the subscriptions its children registered moments earlier, leaving every
+   * component permanently deaf. PaywallView therefore resets during its first render —
+   * before any child mounts. See the ref-guarded reset there.
+   */
+  clearAll(): void {
+    this.state.clear();
+    this.listeners.clear();
+  }
+
+  /** Clear state for one component (`element:{componentId}.*`). */
+  clearComponent(componentId: string): void {
+    const prefix = `element:${componentId}.`;
+    for (const key of Array.from(this.state.keys())) {
+      if (key.startsWith(prefix)) {
+        this.state.delete(key);
+        this.listeners.delete(key);
+      }
+    }
+  }
+
+  /** Snapshot of all state (debugging / diagnostics). */
+  getAllState(): Record<string, any> {
+    return Object.fromEntries(this.state);
+  }
+
+  private notify(key: string, value: any): void {
+    const set = this.listeners.get(key);
+    if (!set) return;
+    // Copy before iterating: a listener may unsubscribe (or subscribe) while running,
+    // which would otherwise mutate the Set mid-iteration.
+    for (const listener of Array.from(set)) {
+      try {
+        listener(value);
+      } catch (err) {
+        // One misbehaving component must not take down the paywall render or starve
+        // the remaining listeners of this update.
+        console.warn(`[BillDog] state listener for "${key}" threw:`, err);
+      }
+    }
+  }
+}
+
+/** Shared instance — the one PaywallView threads through the component tree. */
+export const paywallStateManager = PaywallStateManager.shared;