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

package/dist/LocalizationResolver.js

@@ -0,0 +1,266 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LocalizationResolver = void 0;
+const react_native_1 = require("react-native");
+const BillDogConfiguration_1 = require("./BillDogConfiguration");
+/**
+ * Properties that can be localized
+ */
+const LOCALIZABLE_PROPERTIES = new Set([
+    'text', 'title', 'subtitle', 'label', 'placeholder',
+    'buttonText', 'ctaText', 'description', 'content',
+    'headerText', 'footerText', 'disclaimer'
+]);
+/**
+ * Right-to-left languages. CLDR-aligned 11-code set — kept identical to
+ * iOS `PaywallRenderer.swift rtlLocales` and Android
+ * `PaywallScreen.kt rtlLocales` so layout direction is consistent across
+ * every platform.
+ */
+const RTL_LOCALES = new Set([
+    'ar', 'he', 'fa', 'ur', 'ps', 'sd', 'yi', 'ku', 'ckb', 'dv', 'ug',
+]);
+/**
+ * Client-side localization resolver for React Native SDK
+ * Resolves localized text based on device locale with fallback to baseLocale
+ */
+class LocalizationResolver {
+    constructor(localizations, baseLocale = 'en', explicitLocale) {
+        this.localizations = localizations;
+        this.baseLocale = baseLocale;
+        // Priority: explicit locale > global config override > device locale
+        this.selectedLocale = explicitLocale !== null && explicitLocale !== void 0 ? explicitLocale : this.getEffectiveLocale();
+    }
+    /**
+     * Get the effective locale. Precedence mirrors Android
+     * `BillDogConfig.getEffectiveLocale` (BillDogConfig.kt:150-152):
+     *   runtime locale override > device locale > "en".
+     *
+     * Public + static so callers (e.g. WebViewPaywall's locale bridge) can
+     * resolve the active locale without constructing a resolver.
+     */
+    static getEffectiveLocale() {
+        const configOverride = BillDogConfiguration_1.BillDogConfiguration.getLocaleOverride();
+        if (configOverride && configOverride.trim()) {
+            return configOverride;
+        }
+        return LocalizationResolver.detectDeviceLocale();
+    }
+    /** Instance accessor — defers to the canonical static resolver. */
+    getEffectiveLocale() {
+        return LocalizationResolver.getEffectiveLocale();
+    }
+    /**
+     * Returns true when `locale`'s language belongs to a right-to-left
+     * script. Matches against the language portion only (e.g. `ar-EG` → `ar`),
+     * mirroring Android `PaywallScreen.kt:431-458`.
+     */
+    static isRtlLocale(locale) {
+        var _a, _b;
+        if (!locale)
+            return false;
+        const language = (_b = (_a = locale.split(/[-_]/)[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : '';
+        return RTL_LOCALES.has(language);
+    }
+    /** Detect the device locale from the platform native modules. */
+    static detectDeviceLocale() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        try {
+            if (react_native_1.Platform.OS === 'ios') {
+                return (((_c = (_b = (_a = react_native_1.NativeModules.SettingsManager) === null || _a === void 0 ? void 0 : _a.settings) === null || _b === void 0 ? void 0 : _b.AppleLocale) === null || _c === void 0 ? void 0 : _c.split('_')[0]) ||
+                    ((_g = (_f = (_e = (_d = react_native_1.NativeModules.SettingsManager) === null || _d === void 0 ? void 0 : _d.settings) === null || _e === void 0 ? void 0 : _e.AppleLanguages) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.split('-')[0]) ||
+                    'en');
+            }
+            else if (react_native_1.Platform.OS === 'android') {
+                return ((_j = (_h = react_native_1.NativeModules.I18nManager) === null || _h === void 0 ? void 0 : _h.localeIdentifier) === null || _j === void 0 ? void 0 : _j.split('_')[0]) || 'en';
+            }
+        }
+        catch {
+            // Fall through to default.
+        }
+        return 'en';
+    }
+    /**
+     * Set the active locale for resolution
+     */
+    setLocale(locale) {
+        this.selectedLocale = locale;
+    }
+    /**
+     * Get the currently selected locale
+     */
+    getSelectedLocale() {
+        return this.selectedLocale;
+    }
+    /**
+     * Get the base locale (source language)
+     */
+    getBaseLocale() {
+        return this.baseLocale;
+    }
+    /**
+     * Find the matching locale key using the canonical 4-step matcher.
+     * Mirrors Android `LocalizationResolver.findLocaleKey` (LocalizationResolver.kt:50-86)
+     * and iOS `LocalizationResolver.findLocaleKey` exactly:
+     *   1. exact match
+     *   2. case-insensitive match
+     *   3. separator-normalized match (en-US ↔ en_US)
+     *   4. language-only fallback (en-US → en, or en → first en-* regional)
+     */
+    findLocaleKey(locale) {
+        var _a;
+        if (!this.localizations || !locale)
+            return undefined;
+        const keys = Object.keys(this.localizations);
+        // Step 1: exact match
+        if (this.localizations[locale])
+            return locale;
+        // Step 2: case-insensitive match
+        const lower = locale.toLowerCase();
+        const ciMatch = keys.find(k => k.toLowerCase() === lower);
+        if (ciMatch)
+            return ciMatch;
+        // Step 3: separator-normalized match
+        const alt = locale.includes('-')
+            ? locale.replace(/-/g, '_')
+            : locale.replace(/_/g, '-');
+        if (alt !== locale) {
+            if (this.localizations[alt])
+                return alt;
+            const altLower = alt.toLowerCase();
+            const altMatch = keys.find(k => k.toLowerCase() === altLower);
+            if (altMatch)
+                return altMatch;
+        }
+        // Step 4: language-only fallback
+        const languageOnly = (_a = locale.split(/[-_]/)[0]) !== null && _a !== void 0 ? _a : '';
+        if (languageOnly) {
+            const langLower = languageOnly.toLowerCase();
+            // Prefer an exact-language key (e.g. "en") over a regional variant
+            const exactLang = keys.find(k => k.toLowerCase() === langLower);
+            if (exactLang)
+                return exactLang;
+            // Otherwise any regional variant matching the language
+            const regional = keys.find(k => { var _a; return ((_a = k.split(/[-_]/)[0]) !== null && _a !== void 0 ? _a : '').toLowerCase() === langLower; });
+            if (regional)
+                return regional;
+        }
+        return undefined;
+    }
+    /**
+     * Check if current locale is the base locale
+     */
+    isBaseLocale() {
+        return this.selectedLocale.toLowerCase() === this.baseLocale.toLowerCase();
+    }
+    /**
+     * Get available locales from the localization data
+     */
+    getAvailableLocales() {
+        const locales = new Set([this.baseLocale]);
+        if (this.localizations) {
+            Object.keys(this.localizations).forEach(key => locales.add(key));
+        }
+        return locales;
+    }
+    /**
+     * Resolve a localization key to its translated value
+     * Falls back to defaultValue if translation not found
+     */
+    resolve(key, defaultValue) {
+        // If selected locale is base locale, return default (original) value
+        if (this.isBaseLocale()) {
+            return defaultValue;
+        }
+        // Try to find translation for selected locale (case-insensitive)
+        const matchedKey = this.findLocaleKey(this.selectedLocale);
+        const translations = matchedKey ? this.localizations[matchedKey] : undefined;
+        const translated = translations === null || translations === void 0 ? void 0 : translations[key];
+        if (translated !== undefined) {
+            return translated;
+        }
+        // Log missing translation for debugging
+        console.debug(`[LocalizationResolver] Translation not found for key '${key}' in locale '${this.selectedLocale}', using default`);
+        return defaultValue;
+    }
+    /**
+     * Resolve a variable value with localization support
+     * Variable keys are prefixed with locale for lookup
+     */
+    resolveVariable(variableKey, defaultValue) {
+        var _a, _b;
+        if (this.isBaseLocale()) {
+            return defaultValue;
+        }
+        // Try locale-prefixed key first (e.g., "es.headline" for Spanish)
+        const localizedKey = `${this.selectedLocale}.${variableKey}`;
+        const matchedKey = this.findLocaleKey(this.selectedLocale);
+        const translations = matchedKey ? this.localizations[matchedKey] : undefined;
+        return ((_b = (_a = translations === null || translations === void 0 ? void 0 : translations[localizedKey]) !== null && _a !== void 0 ? _a : translations === null || translations === void 0 ? void 0 : translations[variableKey]) !== null && _b !== void 0 ? _b : defaultValue);
+    }
+    /**
+     * Resolve all localizable properties in a component.
+     *
+     * Lookup keys are componentId-prefixed (`<componentId>.<propertyName>`),
+     * matching the shape the dashboard `LocalizationPanel` writes and the
+     * Android `VariableResolver.resolveComponent` runtime path
+     * (VariableResolver.kt:124-156) + iOS `LocalizationResolver.swift:194-198`.
+     * Previously this looked up the source string itself as the key, which
+     * never matched the dashboard-authored translation maps.
+     */
+    resolveComponent(component) {
+        var _a, _b;
+        const resolvedProperties = {};
+        const componentId = (_a = component.id) !== null && _a !== void 0 ? _a : '';
+        for (const [key, value] of Object.entries(component.properties || {})) {
+            if (typeof value === 'string' && LOCALIZABLE_PROPERTIES.has(key)) {
+                const localizationKey = componentId ? `${componentId}.${key}` : key;
+                resolvedProperties[key] = this.resolve(localizationKey, value);
+            }
+            else {
+                resolvedProperties[key] = value;
+            }
+        }
+        // Recursively resolve children
+        const resolvedChildren = (_b = component.children) === null || _b === void 0 ? void 0 : _b.map(child => this.resolveComponent(child));
+        return {
+            ...component,
+            properties: resolvedProperties,
+            children: resolvedChildren,
+        };
+    }
+    /**
+     * Resolve all components in a configuration
+     */
+    resolveConfiguration(config) {
+        return {
+            ...config,
+            components: config.components.map(c => this.resolveComponent(c)),
+        };
+    }
+    // Factory Methods
+    /**
+     * Create resolver from PaywallConfiguration
+     * Respects global locale override from BillDogConfiguration
+     */
+    static fromConfiguration(config) {
+        var _a;
+        return new LocalizationResolver(config.localizations, (_a = config.baseLocale) !== null && _a !== void 0 ? _a : 'en');
+    }
+    /**
+     * Create resolver with device locale auto-detected
+     * Respects global locale override from BillDogConfiguration
+     */
+    static withDeviceLocale(config) {
+        var _a;
+        return new LocalizationResolver(config.localizations, (_a = config.baseLocale) !== null && _a !== void 0 ? _a : 'en');
+    }
+    /**
+     * Create resolver with specific locale (overrides global config)
+     */
+    static withLocale(config, locale) {
+        var _a;
+        return new LocalizationResolver(config.localizations, (_a = config.baseLocale) !== null && _a !== void 0 ? _a : 'en', locale);
+    }
+}
+exports.LocalizationResolver = LocalizationResolver;

package/dist/NativePaywallView.d.ts

@@ -0,0 +1,36 @@
+/**
+ * NativePaywallView — renders a BillDog paywall by embedding the NATIVE paywall view
+ * (SwiftUI/UIKit on iOS, Jetpack Compose on Android) via a legacy (Paper) native
+ * component (`BDPaywallView`). This is the thin-bridge "Option 2" inline path: the
+ * native BillDog SDK renders the paywall and handles purchases; this component only
+ * hosts it and forwards its events.
+ *
+ * The pure-JS `PaywallView`/`ComponentRenderer` and `WebViewPaywall` remain available
+ * as alternative rendering strategies (e.g. for environments without the native module).
+ */
+import React from 'react';
+import { type ViewStyle } from 'react-native';
+export interface NativePaywallViewProps {
+    /** Placement / paywall identifier to load. */
+    identifier: string;
+    style?: ViewStyle;
+    /** Fired after a completed purchase (productId + native result fields). */
+    onPurchase?: (productId: string, data?: Record<string, unknown>) => void;
+    onDismiss?: () => void;
+    onRestore?: () => void;
+    onOpenUrl?: (url: string) => void;
+    onTrackEvent?: (event: string, data?: Record<string, unknown>) => void;
+    onLoaded?: () => void;
+    onError?: (message: string) => void;
+    /** Rendered when the native paywall component is unavailable on this platform. */
+    fallback?: React.ReactNode;
+}
+/**
+ * Inline native paywall. Requires the `BDPaywallView` native component (iOS
+ * `BillDogPaywallViewManager`, Android `BillDogPaywallViewManager`). When it is not
+ * registered, renders `fallback` (or nothing) instead of crashing.
+ */
+export declare function NativePaywallView(props: NativePaywallViewProps): React.ReactElement | null;
+/** Whether the native paywall component is available on the current platform. */
+export declare const isNativePaywallAvailable: boolean;
+export default NativePaywallView;

package/dist/NativePaywallView.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isNativePaywallAvailable = void 0;
+exports.NativePaywallView = NativePaywallView;
+/**
+ * NativePaywallView — renders a BillDog paywall by embedding the NATIVE paywall view
+ * (SwiftUI/UIKit on iOS, Jetpack Compose on Android) via a legacy (Paper) native
+ * component (`BDPaywallView`). This is the thin-bridge "Option 2" inline path: the
+ * native BillDog SDK renders the paywall and handles purchases; this component only
+ * hosts it and forwards its events.
+ *
+ * The pure-JS `PaywallView`/`ComponentRenderer` and `WebViewPaywall` remain available
+ * as alternative rendering strategies (e.g. for environments without the native module).
+ */
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const COMPONENT_NAME = 'BDPaywallView';
+/** True only when the native view manager is actually registered on this platform. */
+const isNativeComponentAvailable = ((_a = react_native_1.UIManager.getViewManagerConfig) === null || _a === void 0 ? void 0 : _a.call(react_native_1.UIManager, COMPONENT_NAME)) != null;
+// Only bind the native component when it exists — requireNativeComponent otherwise
+// logs a hard error on some RN versions.
+const BDPaywallViewNative = isNativeComponentAvailable
+    ? (0, react_native_1.requireNativeComponent)(COMPONENT_NAME)
+    : null;
+/**
+ * Inline native paywall. Requires the `BDPaywallView` native component (iOS
+ * `BillDogPaywallViewManager`, Android `BillDogPaywallViewManager`). When it is not
+ * registered, renders `fallback` (or nothing) instead of crashing.
+ */
+function NativePaywallView(props) {
+    const { identifier, style, onPurchase, onDismiss, onRestore, onOpenUrl, onTrackEvent, onLoaded, onError, fallback, } = props;
+    if (BDPaywallViewNative == null) {
+        if (fallback != null)
+            return <>{fallback}</>;
+        if (__DEV__) {
+            return (<react_native_1.View style={[styles.fill, styles.center, style]}>
+          <react_native_1.Text style={styles.warn}>
+            BillDog: native paywall component &quot;{COMPONENT_NAME}&quot; is not registered
+            on {react_native_1.Platform.OS}. Ensure the native SDK is linked, or use PaywallView /
+            WebViewPaywall.
+          </react_native_1.Text>
+        </react_native_1.View>);
+        }
+        return null;
+    }
+    return (<BDPaywallViewNative paywallIdentifier={identifier} style={[styles.fill, style]} onLoaded={() => onLoaded === null || onLoaded === void 0 ? void 0 : onLoaded()} onError={(e) => { var _a, _b; return onError === null || onError === void 0 ? void 0 : onError((_b = (_a = e.nativeEvent) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : 'Unknown paywall error'); }} onPurchase={(e) => { var _a, _b, _c; return onPurchase === null || onPurchase === void 0 ? void 0 : onPurchase((_b = (_a = e.nativeEvent) === null || _a === void 0 ? void 0 : _a.productId) !== null && _b !== void 0 ? _b : '', (_c = e.nativeEvent) === null || _c === void 0 ? void 0 : _c.data); }} onDismiss={() => onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss()} onRestore={() => onRestore === null || onRestore === void 0 ? void 0 : onRestore()} onOpenUrl={(e) => { var _a, _b; return onOpenUrl === null || onOpenUrl === void 0 ? void 0 : onOpenUrl((_b = (_a = e.nativeEvent) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : ''); }} onTrackEvent={(e) => { var _a, _b, _c; return onTrackEvent === null || onTrackEvent === void 0 ? void 0 : onTrackEvent((_b = (_a = e.nativeEvent) === null || _a === void 0 ? void 0 : _a.event) !== null && _b !== void 0 ? _b : '', (_c = e.nativeEvent) === null || _c === void 0 ? void 0 : _c.data); }}/>);
+}
+/** Whether the native paywall component is available on the current platform. */
+exports.isNativePaywallAvailable = isNativeComponentAvailable;
+const styles = react_native_1.StyleSheet.create({
+    fill: { flex: 1 },
+    center: { alignItems: 'center', justifyContent: 'center', padding: 16 },
+    warn: { color: '#B00020', textAlign: 'center', fontSize: 13 },
+});
+exports.default = NativePaywallView;

package/dist/PaywallCache.d.ts

@@ -0,0 +1,74 @@
+/**
+ * PaywallCache - Smart caching layer for React Native
+ * Uses AsyncStorage for metadata and RNFS for asset caching
+ * Supports server-provided cache configuration
+ */
+export interface CacheConfig {
+    enabled: boolean;
+    maxCacheAge: number;
+    backgroundUpdateEnabled: boolean;
+    preloadAssets: boolean;
+}
+export declare const DEFAULT_CACHE_CONFIG: CacheConfig;
+export interface CachedPaywall {
+    paywall: {
+        id: string;
+        identifier: string;
+        name: string;
+        configuration: any;
+        version: number;
+    };
+    version: number;
+    cachedAt: number;
+    expiresAt: number;
+    etag?: string;
+    isFallback?: boolean;
+}
+export declare class PaywallCache {
+    private config;
+    private cacheDir;
+    private fallbackCache;
+    constructor(config?: Partial<CacheConfig>);
+    /**
+     * Update cache configuration from server response
+     */
+    configureFromServer(serverConfig: CacheConfig): void;
+    /**
+     * Get current cache configuration
+     */
+    getConfig(): CacheConfig;
+    get(identifier: string): Promise<CachedPaywall | null>;
+    set(identifier: string, paywall: CachedPaywall): Promise<void>;
+    /**
+     * Set a fallback paywall that will never be cleared
+     */
+    setFallback(identifier: string, paywall: CachedPaywall): Promise<void>;
+    delete(identifier: string, includeFallback?: boolean): Promise<void>;
+    /**
+     * Check if background update is needed and trigger if enabled
+     */
+    shouldTriggerBackgroundUpdate(identifier: string): boolean;
+    markBackgroundUpdateStarted(identifier: string): void;
+    markBackgroundUpdateCompleted(identifier: string): void;
+    cacheAsset(url: string): Promise<string | null>;
+    /**
+     * Preload all assets from a paywall configuration
+     */
+    preloadPaywallAssets(configuration: any): Promise<void>;
+    private extractAssetUrls;
+    getCachedAssetPath(url: string): Promise<string | null>;
+    /**
+     * Clear regular cache (preserves fallbacks)
+     */
+    clearAll(): Promise<void>;
+    /**
+     * Clear all cache including fallbacks
+     */
+    clearAllIncludingFallbacks(): Promise<void>;
+    getStats(): Promise<{
+        paywallCount: number;
+        assetCount: number;
+        fallbackCount: number;
+        config: CacheConfig;
+    }>;
+}