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

package/dist/WebViewPaywall.js

@@ -0,0 +1,360 @@
+"use strict";
+/**
+ * WebViewPaywall — Optional WebView-based paywall component for the
+ * React Native SDK.
+ *
+ * The default React Native paywall path is native (`PaywallView` →
+ * `ComponentRenderer`). This component is the WebView alternative that
+ * loads the same unified renderer bundle iOS / Android / Flutter use,
+ * so paywalls visually match across all platforms at the cost of one
+ * extra `react-native-webview` dependency.
+ *
+ * Android parity reference:
+ *   - `BillDogWebViewPaywall` (Android, billdog-paywalls-webview module)
+ *   - Canonical message protocol:
+ *       packages/paywall-renderer/src/native/messageProtocol.ts
+ *   - postMessage events handled here mirror the protocol's
+ *     OutboundMessageType union: purchase / restore / close / open_url /
+ *     track / state_changed / error / ready.
+ *
+ * Architecture choice: URL-based loading (same as Flutter) rather than
+ * bundled HTML asset. The renderer is served by the `render-paywall`
+ * edge function at `https://api.billdog.io/v1/render-paywall?...`,
+ * and the paywall config is delivered to the renderer via the JS
+ * bridge function `window.loadPaywallData(...)` — same contract as
+ * the Flutter SDK uses (packages/flutter/lib/src/widgets/paywall_view.dart).
+ *
+ * Bundling the HTML as a static asset requires a metro.config.js change
+ * (`assetExts: ['html', ...]` + `metro-html-loader`). URL-based avoids
+ * that and is the simpler MVP. If first-paint latency becomes a problem,
+ * a future revision can switch to local-asset loading.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebViewPaywall = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const BillDogConfiguration_1 = require("./BillDogConfiguration");
+// Lazily resolve the `react-native-webview` module. Importing it at the top
+// level runs its native-module lookup (`TurboModuleRegistry.getEnforcing(
+// 'RNCWebViewModule')`) at SDK-load time, which THROWS an Invariant Violation
+// and crashes the host app when the peer isn't fully linked (e.g. old-arch
+// RN 0.73 quirk) — even for apps using only the NATIVE paywall path. Deferring
+// the require to render time keeps `import '@billdog.io/react-native'` safe.
+let _WebView;
+function loadWebView() {
+    var _a;
+    if (_WebView === undefined) {
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            _WebView = (_a = require('react-native-webview').default) !== null && _a !== void 0 ? _a : null;
+        }
+        catch {
+            _WebView = null;
+        }
+    }
+    return _WebView;
+}
+const LocalizationResolver_1 = require("./LocalizationResolver");
+const BillDog_1 = require("./BillDog");
+const WebViewPaywall = ({ paywallIdentifier, apiKey, customerId, modal = true, visible = true, locale, onReady, onPurchase, onRestore, onDismiss, onOpenUrl, onTrackEvent, onError, onExecuteAction, }) => {
+    const webViewRef = (0, react_1.useRef)(null);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [errorState, setErrorState] = (0, react_1.useState)(null);
+    // Resolve the effective locale once per render-input change. Precedence
+    // mirrors Android `WebViewPaywallActivity.effectiveLocale()`:
+    // explicit prop > runtime override > device locale > "en".
+    const effectiveLocale = react_1.default.useMemo(() => (locale === null || locale === void 0 ? void 0 : locale.trim()) || LocalizationResolver_1.LocalizationResolver.getEffectiveLocale(), [locale]);
+    // Build the renderer URL once per identifier/customer/locale change.
+    // `locale` is seeded as a query param so the renderer resolves the
+    // correct language on first paint (no flash of base-locale text) —
+    // the seed-before-load half of the Android bridge contract.
+    const rendererUrl = react_1.default.useMemo(() => {
+        const base = BillDogConfiguration_1.BillDogConfiguration.resolveEndpoint('render-paywall');
+        const params = new URLSearchParams({
+            paywall_identifier: paywallIdentifier,
+            api_key: apiKey,
+        });
+        if (customerId)
+            params.set('customer_id', customerId);
+        if (effectiveLocale)
+            params.set('locale', effectiveLocale);
+        return `${base}?${params.toString()}`;
+    }, [paywallIdentifier, apiKey, customerId, effectiveLocale]);
+    // Reset state when the identifier changes (consumer may swap paywalls).
+    (0, react_1.useEffect)(() => {
+        setIsLoading(true);
+        setErrorState(null);
+    }, [paywallIdentifier]);
+    /**
+     * Push `config:locale` into the renderer via a canonical `state_set`
+     * envelope. Mirrors Android `WebViewPaywallActivity.sendLocaleUpdate`
+     * (kt:1103-1120) — the renderer's inbound bridge (`window.billdog.receive`)
+     * routes `state_set` into `GlobalStateStore`, which `useLocalization`
+     * subscribes to. Tolerates both bridge globals (`window.billdog` and the
+     * older `window.paywallBridge`).
+     */
+    const sendLocaleUpdate = (0, react_1.useCallback)((loc) => {
+        if (!webViewRef.current || !loc)
+            return;
+        const envelope = JSON.stringify({
+            version: 1,
+            type: 'state_set',
+            payload: { key: 'config:locale', value: loc },
+        });
+        const js = `(function(){
+      try {
+        if (window.billdog && window.billdog.receive) {
+          window.billdog.receive(${JSON.stringify(envelope)});
+        } else if (window.paywallBridge && window.paywallBridge.setState) {
+          window.paywallBridge.setState('config:locale', ${JSON.stringify(loc)});
+        }
+      } catch (e) {}
+    })(); true;`;
+        webViewRef.current.injectJavaScript(js);
+    }, []);
+    const handleMessage = (0, react_1.useCallback)((event) => {
+        var _a, _b, _c, _d, _e, _f;
+        let message;
+        try {
+            message = JSON.parse(event.nativeEvent.data);
+        }
+        catch (parseErr) {
+            const err = parseErr instanceof Error ? parseErr : new Error(String(parseErr));
+            onError === null || onError === void 0 ? void 0 : onError(err);
+            return;
+        }
+        // Validate envelope. Older renderer builds (pre-protocol-unification)
+        // may post flat objects without the `protocol` field; tolerate both.
+        const type = (_a = message === null || message === void 0 ? void 0 : message.type) !== null && _a !== void 0 ? _a : '';
+        const payload = ((_b = message === null || message === void 0 ? void 0 : message.payload) !== null && _b !== void 0 ? _b : {});
+        switch (type) {
+            case 'ready':
+                setIsLoading(false);
+                // Runtime half of the locale bridge: push `config:locale` into
+                // the renderer's GlobalStateStore via a `state_set` envelope so
+                // the active locale is applied even if the renderer ignored the
+                // URL `locale` query param. Mirrors Android
+                // `WebViewPaywallActivity.sendLocaleUpdate` (kt:1103-1120).
+                sendLocaleUpdate(effectiveLocale);
+                onReady === null || onReady === void 0 ? void 0 : onReady();
+                break;
+            case 'purchase': {
+                const productIdentifier = (_d = (_c = payload.productIdentifier) !== null && _c !== void 0 ? _c : payload.product_id) !== null && _d !== void 0 ? _d : '';
+                if (productIdentifier)
+                    onPurchase === null || onPurchase === void 0 ? void 0 : onPurchase(productIdentifier);
+                break;
+            }
+            case 'restore':
+                onRestore === null || onRestore === void 0 ? void 0 : onRestore();
+                break;
+            case 'close':
+                onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+                break;
+            case 'open_url': {
+                const url = payload.url;
+                if (url)
+                    onOpenUrl === null || onOpenUrl === void 0 ? void 0 : onOpenUrl(url);
+                break;
+            }
+            case 'track': {
+                const eventName = payload.eventName;
+                const properties = payload.properties;
+                if (eventName)
+                    onTrackEvent === null || onTrackEvent === void 0 ? void 0 : onTrackEvent(eventName, properties);
+                break;
+            }
+            case 'error': {
+                const msg = (_f = (_e = payload.message) !== null && _e !== void 0 ? _e : payload.error) !== null && _f !== void 0 ? _f : 'Unknown renderer error';
+                const err = new Error(msg);
+                setErrorState(err);
+                onError === null || onError === void 0 ? void 0 : onError(err);
+                break;
+            }
+            case 'execute_action': {
+                const paywallId = payload.paywallId;
+                const componentId = payload.componentId;
+                const actionType = payload.actionType;
+                const idempotencyKey = payload.idempotencyKey;
+                if (componentId && actionType) {
+                    const executePromise = onExecuteAction
+                        ? onExecuteAction(paywallId !== null && paywallId !== void 0 ? paywallId : null, componentId, actionType, idempotencyKey !== null && idempotencyKey !== void 0 ? idempotencyKey : null)
+                        : BillDog_1.BillDog.executeAction(paywallId !== null && paywallId !== void 0 ? paywallId : null, componentId, actionType, idempotencyKey !== null && idempotencyKey !== void 0 ? idempotencyKey : null);
+                    executePromise
+                        .then((result) => {
+                        const resultObj = {
+                            actionType,
+                            componentId,
+                            success: true,
+                            data: result,
+                            idempotencyKey: idempotencyKey !== null && idempotencyKey !== void 0 ? idempotencyKey : null,
+                        };
+                        if (webViewRef.current) {
+                            const js = `window.dispatchEvent(new CustomEvent('billdog:execute_action_result', { detail: ${JSON.stringify(resultObj)} })); true;`;
+                            webViewRef.current.injectJavaScript(js);
+                        }
+                    })
+                        .catch((err) => {
+                        const resultObj = {
+                            actionType,
+                            componentId,
+                            success: false,
+                            error: err.message || 'Action execution failed',
+                            idempotencyKey: idempotencyKey !== null && idempotencyKey !== void 0 ? idempotencyKey : null,
+                        };
+                        if (webViewRef.current) {
+                            const js = `window.dispatchEvent(new CustomEvent('billdog:execute_action_result', { detail: ${JSON.stringify(resultObj)} })); true;`;
+                            webViewRef.current.injectJavaScript(js);
+                        }
+                    });
+                }
+                break;
+            }
+            case 'state_changed':
+                // No-op — exposed for state-driven flows; consumer can hook
+                // via a future onStateChange prop if needed.
+                break;
+            default:
+                // Unknown message types are logged for debugging but don't
+                // surface as errors — the protocol may add new types over time.
+                if (__DEV__) {
+                    // eslint-disable-next-line no-console
+                    console.log('[WebViewPaywall] unknown message type:', type, payload);
+                }
+        }
+    }, [
+        effectiveLocale,
+        sendLocaleUpdate,
+        onReady,
+        onPurchase,
+        onRestore,
+        onDismiss,
+        onOpenUrl,
+        onTrackEvent,
+        onError,
+        onExecuteAction,
+    ]);
+    /**
+     * Public method for the consumer to push updated state into the
+     * renderer (e.g. after entitlement change). Mirrors the
+     * `paywallBridge.setState(...)` global exposed by the renderer in
+     * native-SDK mode.
+     */
+    const injectState = (0, react_1.useCallback)((key, value) => {
+        if (!webViewRef.current)
+            return;
+        const js = `window.paywallBridge && window.paywallBridge.setState && window.paywallBridge.setState(${JSON.stringify(key)}, ${JSON.stringify(value)}); true;`;
+        webViewRef.current.injectJavaScript(js);
+    }, []);
+    // Surface the method via a forwardRef-style imperative handle could
+    // be added; for the MVP we keep the API prop-only.
+    void injectState;
+    const WebViewComponent = loadWebView();
+    const content = (<react_native_1.View style={styles.container}>
+      {isLoading && !errorState && (<react_native_1.View style={styles.loadingContainer}>
+          <react_native_1.ActivityIndicator size="large"/>
+        </react_native_1.View>)}
+      {errorState && (<react_native_1.View style={styles.errorContainer}>
+          <react_native_1.Text style={styles.errorText}>Failed to load paywall</react_native_1.Text>
+          <react_native_1.Text style={styles.errorDetails}>{errorState.message}</react_native_1.Text>
+        </react_native_1.View>)}
+      {!errorState && !WebViewComponent && (<react_native_1.View style={styles.errorContainer}>
+          <react_native_1.Text style={styles.errorText}>WebView unavailable</react_native_1.Text>
+          <react_native_1.Text style={styles.errorDetails}>
+            react-native-webview is not linked. Use the native paywall path or add the peer dependency.
+          </react_native_1.Text>
+        </react_native_1.View>)}
+      {!errorState && WebViewComponent && (<WebViewComponent ref={webViewRef} source={{ uri: rendererUrl }} onMessage={handleMessage} onError={(syntheticEvent) => {
+                var _a;
+                const { nativeEvent } = syntheticEvent;
+                const err = new Error((_a = nativeEvent.description) !== null && _a !== void 0 ? _a : 'WebView load error');
+                setErrorState(err);
+                onError === null || onError === void 0 ? void 0 : onError(err);
+            }} onHttpError={(syntheticEvent) => {
+                const { nativeEvent } = syntheticEvent;
+                const err = new Error(`WebView HTTP ${nativeEvent.statusCode}`);
+                setErrorState(err);
+                onError === null || onError === void 0 ? void 0 : onError(err);
+            }} style={styles.webView} javaScriptEnabled domStorageEnabled scrollEnabled showsVerticalScrollIndicator={false} 
+        // The renderer manages its own viewport; don't intercept taps.
+        originWhitelist={['*']}/>)}
+    </react_native_1.View>);
+    if (modal) {
+        return (<react_native_1.Modal visible={visible} animationType="slide" onRequestClose={() => onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss()}>
+        {content}
+      </react_native_1.Modal>);
+    }
+    return content;
+};
+exports.WebViewPaywall = WebViewPaywall;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#fff',
+    },
+    webView: {
+        flex: 1,
+        backgroundColor: 'transparent',
+    },
+    loadingContainer: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'rgba(255, 255, 255, 0.95)',
+        zIndex: 1,
+    },
+    errorContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 24,
+    },
+    errorText: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        marginBottom: 8,
+        color: '#333',
+    },
+    errorDetails: {
+        fontSize: 13,
+        color: '#666',
+        textAlign: 'center',
+    },
+});
+exports.default = exports.WebViewPaywall;

package/dist/animations/presets.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Shared Animation Preset Definitions
+ * Platform-agnostic animation configurations that can be executed on any SDK
+ */
+export interface AnimationKeyframe {
+    offset: number;
+    opacity?: number;
+    scale?: number;
+    scaleX?: number;
+    scaleY?: number;
+    translateX?: number | string;
+    translateY?: number | string;
+    rotate?: number;
+    skewX?: number;
+    skewY?: number;
+}
+export interface AnimationPresetConfig {
+    name: string;
+    category: 'enter' | 'exit' | 'loop' | 'attention' | 'interaction';
+    keyframes: AnimationKeyframe[];
+    defaultDuration: number;
+    defaultDelay: number;
+    defaultEasing: EasingType;
+    defaultIterations: number;
+    defaultDirection: AnimationDirection;
+    description: string;
+}
+export type EasingType = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+export type AnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+/**
+ * Animation Presets - Shared across all SDKs
+ */
+export declare const ANIMATION_PRESETS: Record<string, AnimationPresetConfig>;
+/**
+ * Get preset by name
+ */
+export declare function getAnimationPreset(name: string): AnimationPresetConfig | undefined;
+/**
+ * Get all presets by category
+ */
+export declare function getPresetsByCategory(category: AnimationPresetConfig['category']): AnimationPresetConfig[];
+/**
+ * List all available preset names
+ */
+export declare function getAvailablePresetNames(): string[];
+/**
+ * Easing cubic-bezier mappings for CSS/platform conversion
+ */
+export declare const EASING_CURVES: Record<EasingType, [number, number, number, number]>;