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

package/dist/PaywallCache.js

@@ -0,0 +1,293 @@
+"use strict";
+/**
+ * PaywallCache - Smart caching layer for React Native
+ * Uses AsyncStorage for metadata and RNFS for asset caching
+ * Supports server-provided cache configuration
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaywallCache = exports.DEFAULT_CACHE_CONFIG = void 0;
+const async_storage_1 = __importDefault(require("@react-native-async-storage/async-storage"));
+const react_native_fs_1 = __importDefault(require("react-native-fs"));
+exports.DEFAULT_CACHE_CONFIG = {
+    enabled: true,
+    maxCacheAge: 604800000, // 7 days
+    backgroundUpdateEnabled: true,
+    preloadAssets: true,
+};
+// Track background updates in progress
+const backgroundUpdateInProgress = new Set();
+class PaywallCache {
+    constructor(config = {}) {
+        this.fallbackCache = new Map();
+        this.config = { ...exports.DEFAULT_CACHE_CONFIG, ...config };
+        this.cacheDir = `${react_native_fs_1.default.CachesDirectoryPath}/billdog_paywalls`;
+        // Create cache directory
+        react_native_fs_1.default.mkdir(this.cacheDir).catch(() => {
+            // Directory might already exist
+        });
+    }
+    // MARK: - Configuration
+    /**
+     * Update cache configuration from server response
+     */
+    configureFromServer(serverConfig) {
+        this.config = { ...this.config, ...serverConfig };
+        console.log('[PaywallCache] Configured from server:', this.config);
+    }
+    /**
+     * Get current cache configuration
+     */
+    getConfig() {
+        return { ...this.config };
+    }
+    // MARK: - Paywall Caching
+    async get(identifier) {
+        if (!this.config.enabled) {
+            // Still return fallback if available
+            return this.fallbackCache.get(identifier) || null;
+        }
+        try {
+            const key = `paywall:${identifier}`;
+            const cachedJson = await async_storage_1.default.getItem(key);
+            if (!cachedJson) {
+                console.log(`[PaywallCache] MISS: ${identifier}`);
+                // Return fallback if available
+                return this.fallbackCache.get(identifier) || null;
+            }
+            const cached = 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, paywall) {
+        if (!this.config.enabled && !paywall.isFallback)
+            return;
+        try {
+            // Calculate expiration using server-provided maxCacheAge
+            const cacheEntry = {
+                ...paywall,
+                cachedAt: Date.now(),
+                expiresAt: Date.now() + this.config.maxCacheAge,
+            };
+            const key = `paywall:${identifier}`;
+            const cachedJson = JSON.stringify(cacheEntry);
+            await async_storage_1.default.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, paywall) {
+        const fallbackPaywall = {
+            ...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, includeFallback = false) {
+        try {
+            // Check if it's a fallback and skip if not forcing
+            if (!includeFallback) {
+                const key = `paywall:${identifier}`;
+                const cachedJson = await async_storage_1.default.getItem(key);
+                if (cachedJson) {
+                    const cached = JSON.parse(cachedJson);
+                    if (cached.isFallback) {
+                        console.log(`[PaywallCache] SKIP DELETE FALLBACK: ${identifier}`);
+                        return;
+                    }
+                }
+            }
+            const key = `paywall:${identifier}`;
+            await async_storage_1.default.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) {
+        if (!this.config.backgroundUpdateEnabled)
+            return false;
+        if (backgroundUpdateInProgress.has(identifier))
+            return false;
+        return true;
+    }
+    markBackgroundUpdateStarted(identifier) {
+        backgroundUpdateInProgress.add(identifier);
+    }
+    markBackgroundUpdateCompleted(identifier) {
+        backgroundUpdateInProgress.delete(identifier);
+    }
+    // MARK: - Asset Caching
+    async cacheAsset(url) {
+        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 react_native_fs_1.default.exists(localPath);
+            if (exists) {
+                console.log(`[PaywallCache] Asset already cached: ${fileName}`);
+                return localPath;
+            }
+            // Download and cache
+            const result = await react_native_fs_1.default.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) {
+        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)));
+    }
+    extractAssetUrls(config) {
+        const urls = [];
+        const traverse = (obj) => {
+            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) {
+        try {
+            const fileName = url.split('/').pop() || 'asset';
+            const localPath = `${this.cacheDir}/${fileName}`;
+            const exists = await react_native_fs_1.default.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() {
+        try {
+            // Clear AsyncStorage keys (skip fallbacks)
+            const keys = await async_storage_1.default.getAllKeys();
+            const paywallKeys = keys.filter((key) => key.startsWith('paywall:'));
+            for (const key of paywallKeys) {
+                const cachedJson = await async_storage_1.default.getItem(key);
+                if (cachedJson) {
+                    const cached = JSON.parse(cachedJson);
+                    if (!cached.isFallback) {
+                        await async_storage_1.default.removeItem(key);
+                    }
+                }
+            }
+            // Clear file cache
+            const files = await react_native_fs_1.default.readDir(this.cacheDir);
+            await Promise.all(files.map((file) => react_native_fs_1.default.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() {
+        try {
+            const keys = await async_storage_1.default.getAllKeys();
+            const paywallKeys = keys.filter((key) => key.startsWith('paywall:'));
+            await async_storage_1.default.multiRemove(paywallKeys);
+            const files = await react_native_fs_1.default.readDir(this.cacheDir);
+            await Promise.all(files.map((file) => react_native_fs_1.default.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() {
+        try {
+            const keys = await async_storage_1.default.getAllKeys();
+            const paywallKeys = keys.filter((key) => key.startsWith('paywall:'));
+            const files = await react_native_fs_1.default.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,
+            };
+        }
+    }
+}
+exports.PaywallCache = PaywallCache;

package/dist/PaywallStateManager.d.ts

@@ -0,0 +1,62 @@
+export type StateListener = (value: any) => void;
+export type Unsubscribe = () => void;
+export declare 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: PaywallStateManager;
+    private state;
+    private listeners;
+    /** Read the current value, or `defaultValue` when unset. */
+    getState<T = any>(key: string, defaultValue?: T): T | undefined;
+    /**
+     * 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;
+    /** Alias for {@link setState} — the name 53 existing call sites use (web-builder parity). */
+    updateState(key: string, value: any): void;
+    /** Alias for {@link getState} — used by the component test suite. */
+    getValue<T = any>(key: string, defaultValue?: T): T | undefined;
+    /** Alias for {@link setState} — used by the component test suite. */
+    setValue(key: string, value: any): void;
+    /**
+     * 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;
+    /** Alias for {@link subscribe} — the name 14 existing call sites use. */
+    subscribeToState(key: string, listener: StateListener): Unsubscribe;
+    /**
+     * 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;
+    /** Clear state for one component (`element:{componentId}.*`). */
+    clearComponent(componentId: string): void;
+    /** Snapshot of all state (debugging / diagnostics). */
+    getAllState(): Record<string, any>;
+    private notify;
+}
+/** Shared instance — the one PaywallView threads through the component tree. */
+export declare const paywallStateManager: PaywallStateManager;

package/dist/PaywallStateManager.js

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.paywallStateManager = exports.PaywallStateManager = void 0;
+/**
+ * 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');
+ */
+const valueUtils_1 = require("./valueUtils");
+class PaywallStateManager {
+    constructor() {
+        this.state = new Map();
+        this.listeners = new Map();
+    }
+    /** Read the current value, or `defaultValue` when unset. */
+    getState(key, defaultValue) {
+        const v = this.state.get(key);
+        return v === undefined ? defaultValue : v;
+    }
+    /**
+     * 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, value) {
+        if (this.state.has(key) && (0, valueUtils_1.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, value) {
+        this.setState(key, value);
+    }
+    /** Alias for {@link getState} — used by the component test suite. */
+    getValue(key, defaultValue) {
+        return this.getState(key, defaultValue);
+    }
+    /** Alias for {@link setState} — used by the component test suite. */
+    setValue(key, value) {
+        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, listener) {
+        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, listener) {
+        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() {
+        this.state.clear();
+        this.listeners.clear();
+    }
+    /** Clear state for one component (`element:{componentId}.*`). */
+    clearComponent(componentId) {
+        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() {
+        return Object.fromEntries(this.state);
+    }
+    notify(key, value) {
+        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);
+            }
+        }
+    }
+}
+exports.PaywallStateManager = 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`.
+ */
+PaywallStateManager.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. */
+PaywallStateManager.shared = new PaywallStateManager();
+/** Shared instance — the one PaywallView threads through the component tree. */
+exports.paywallStateManager = PaywallStateManager.shared;

package/dist/PaywallView.d.ts

@@ -0,0 +1,42 @@
+/**
+ * PaywallView - Main React Native component for rendering paywalls
+ *
+ * Credentials and API base URL are resolved from BillDogConfiguration.
+ * Pass an `apiKey` prop only for backward compatibility.
+ */
+import React from 'react';
+import { PaywallConfiguration } from './types';
+interface PaywallViewProps {
+    /**
+     * Paywall identifier to fetch from API
+     */
+    paywallIdentifier?: string;
+    /**
+     * Direct configuration (skips API fetch)
+     */
+    configuration?: PaywallConfiguration;
+    /**
+     * @deprecated Use BillDogConfiguration.configure({ apiKey }) instead
+     */
+    apiKey?: string;
+    /**
+     * Called when user interacts with buttons
+     */
+    onButtonPress?: (componentId: string, action: string) => void;
+    /**
+     * Called when paywall is dismissed
+     */
+    onDismiss?: () => void;
+    /**
+     * Loading component (optional)
+     */
+    LoadingComponent?: React.ComponentType;
+    /**
+     * Error component (optional)
+     */
+    ErrorComponent?: React.ComponentType<{
+        error: Error;
+    }>;
+}
+export declare const PaywallView: React.FC<PaywallViewProps>;
+export {};