@mysuperwall/react-native 0.0.0-stage → 1.2.0

package/src/models/manifest.ts

@@ -0,0 +1,81 @@
+export interface ManifestCondition {
+  field: string;
+  operator: string;
+  value: any;
+}
+
+export interface ManifestVariant {
+  variantId?: string;
+  variantLabel?: string;
+  variant: string;
+  weight: number;
+  paywallId: string | null;
+}
+
+export interface ManifestRule {
+  experimentId?: string;
+  experimentVersion?: string;
+  audienceId?: string;
+  id: string;
+  name: string;
+  priority: number;
+  matchType: 'all' | 'any';
+  conditions: ManifestCondition[];
+  holdoutPercentage: number;
+  paywallId: string | null;
+  variants: ManifestVariant[];
+}
+
+export interface ManifestTrigger {
+  experimentId?: string;
+  experimentVersion?: string;
+  audienceId?: string;
+  id: string;
+  key: string;
+  prewarmPriority?: number;
+  holdoutPercentage?: number;
+  paywallId: string | null;
+  variants: ManifestVariant[];
+  rules: ManifestRule[];
+  dismissAction?: {
+    type: string;
+    followUpPaywallId?: string | null;
+  };
+}
+
+export interface ManifestPaywallProduct {
+  productId: string;
+  variableName?: string;
+}
+
+export interface FollowUpRule {
+  enabled?: boolean;
+  actionType?: string;
+  triggerKey?: string;
+  delayMs?: number;
+  oncePerSession?: boolean;
+  cooldownMs?: number;
+  maxChainDepth?: number;
+  skipIfPremium?: boolean;
+  preventRepeatPaywall?: boolean;
+}
+
+export interface ManifestPaywall {
+  publishedVersion?: number;
+  id: string;
+  name: string;
+  templateKey: string;
+  contentJson?: { followUpRules?: Record<string, FollowUpRule> };
+  html: string;
+  productIds: string[];
+  products: ManifestPaywallProduct[];
+}
+
+export interface PaywallManifest {
+  ok: boolean;
+  notModified?: boolean;
+  hash?: string;
+  appId?: string;
+  triggers: ManifestTrigger[];
+  paywalls: Record<string, ManifestPaywall>;
+}

package/src/models/paywall.ts

@@ -0,0 +1,40 @@
+import { FollowUpRule, ManifestPaywallProduct } from './manifest';
+
+export interface ExperimentContext {
+  experimentId: string;
+  experimentVersion: string;
+  audienceId: string;
+  variantId: string;
+  variantLabel: string;
+  paywallId: string;
+  paywallVersion: number;
+}
+
+export interface PaywallData {
+  attributionScope?: string;
+  presentationId?: string;
+  followUpRules?: Record<string, FollowUpRule>;
+  dismissFollowUpPaywallId?: string;
+  experimentContext?: ExperimentContext;
+  attributionUserId?: string;
+  id: string;
+  name: string;
+  html: string;
+  productIds: string[];
+  products: ManifestPaywallProduct[];
+  triggerKey?: string;
+  abVariant?: string;
+}
+
+export interface PaywallResult {
+  show: boolean;
+  paywall: PaywallData | null;
+  reason: string;
+}
+
+export interface PaywallCallbackActions {
+  onPurchase?: (productId: string) => void | Promise<void>;
+  onRestore?: () => void | Promise<void>;
+  onDismiss?: () => void | Promise<void>;
+  onOpenUrl?: (url: string) => void | Promise<void>;
+}

package/src/services/anonymousIdentity.ts

@@ -0,0 +1,28 @@
+interface IdentityStorage {
+  getItem(key: string): Promise<string | null>;
+  setItem(key: string, value: string): Promise<void>;
+}
+
+/** Stable installation identity, isolated by server and application. */
+export class AnonymousIdentity {
+  private static identities = new Map<string, Promise<string>>();
+  static get(scope: string): Promise<string> {
+    const existing = this.identities.get(scope);
+    if (existing) return existing;
+    const identity = this.load(scope);
+    this.identities.set(scope, identity);
+    return identity;
+  }
+  private static async load(scope: string): Promise<string> {
+    const key = '@mysuperwall_anonymous_v1:' + encodeURIComponent(scope);
+    let storage: IdentityStorage | undefined;
+    try { storage = require('@react-native-async-storage/async-storage').default; } catch (_) {}
+    try {
+      const saved = await storage?.getItem(key);
+      if (saved?.startsWith('anon_')) return saved;
+    } catch (_) {}
+    const identity = 'anon_' + Date.now().toString(36) + Math.random().toString(36).slice(2);
+    try { await storage?.setItem(key, identity); } catch (_) {}
+    return identity;
+  }
+}

package/src/services/followUpService.ts

@@ -0,0 +1,21 @@
+import { FollowUpRule } from '../models/manifest';
+
+/** Session-scoped policy; all timers and reservations are invalidated on identity/config changes. */
+export class FollowUpService {
+  private used = new Map<string, number>();
+  private timers = new Set<ReturnType<typeof setTimeout>>();
+  cancel(): void { this.timers.forEach(clearTimeout); this.timers.clear(); }
+  reset(): void { this.cancel(); this.used.clear(); }
+  schedule(key: string, rule: FollowUpRule, depth: number, premium: boolean, run: () => void): boolean {
+    const number = (value: unknown, fallback: number, max: number) =>
+      typeof value === 'number' && Number.isFinite(value) ? Math.max(0, Math.min(max, Math.floor(value))) : fallback;
+    if (!rule.enabled || (rule.actionType || 'trigger') !== 'trigger' || !rule.triggerKey?.trim() ||
+        (rule.skipIfPremium && premium) || depth >= Math.max(1, number(rule.maxChainDepth, 2, 5))) return false;
+    const previous = this.used.get(key);
+    if (previous !== undefined && (rule.oncePerSession !== false || Date.now() - previous < number(rule.cooldownMs, 0, 86400000))) return false;
+    this.used.set(key, Date.now());
+    const timer = setTimeout(() => { this.timers.delete(timer); run(); }, number(rule.delayMs, 0, 10000));
+    this.timers.add(timer);
+    return true;
+  }
+}

package/src/services/manifestService.ts

@@ -0,0 +1,63 @@
+import { PaywallManifest } from '../models/manifest';
+
+export interface ManifestScope {
+  baseUrl: string; appKey?: string; bundleId?: string; platform?: string; lang?: string; substitutionData?: Record<string, unknown>;
+}
+
+export class ManifestService {
+  private scope = '';
+  private generation = 0;
+  public manifest: PaywallManifest | null = null;
+  private asyncStorage: any = null;
+  constructor() {
+    try { this.asyncStorage = require('@react-native-async-storage/async-storage').default; }
+    catch (_) { /* Memory-only operation remains supported. */ }
+  }
+  static scopeKey(options: ManifestScope): string {
+    return JSON.stringify([options.baseUrl.replace(/\/+$/, '') + '/', options.appKey || '',
+      options.bundleId || '', options.platform || 'ios', options.lang || 'en', JSON.stringify(options.substitutionData || {})]);
+  }
+  configure(options: ManifestScope): void {
+    const scope = ManifestService.scopeKey(options);
+    if (scope !== this.scope) { this.scope = scope; this.generation++; this.manifest = null; }
+  }
+  private key(scope: string): string { return '@mysuperwall_manifest_v2:' + encodeURIComponent(scope); }
+  async loadFromDisk(): Promise<PaywallManifest | null> {
+    const scope = this.scope, generation = this.generation;
+    if (!scope || !this.asyncStorage) return this.manifest;
+    try {
+      const raw = await this.asyncStorage.getItem(this.key(scope));
+      if (scope !== this.scope || generation !== this.generation) return null;
+      const parsed = raw ? JSON.parse(raw) : null;
+      this.manifest = parsed?.ok && parsed.paywalls && Array.isArray(parsed.triggers) ? parsed : null;
+    } catch (_) { /* Never adopt a legacy or malformed cache. */ }
+    return this.manifest;
+  }
+  async saveToDisk(manifest: PaywallManifest): Promise<void> {
+    const scope = this.scope;
+    if (!scope) return;
+    this.manifest = manifest;
+    try { await this.asyncStorage?.setItem(this.key(scope), JSON.stringify(manifest)); } catch (_) {}
+  }
+  async syncInBackground(options: ManifestScope): Promise<PaywallManifest | null> {
+    this.configure(options);
+    const scope = this.scope, generation = this.generation;
+    try {
+      const headers: Record<string, string> = { 'Content-Type': 'application/json' };
+      if (this.manifest?.hash) headers['If-None-Match'] = `"${this.manifest.hash}"`;
+      const response = await fetch(options.baseUrl.replace(/\/+$/, '') + '/paywall/manifest', {
+        method: 'POST', headers, body: JSON.stringify({ platform: options.platform || 'ios',
+          appKey: options.appKey, bundleId: options.platform === 'android' ? undefined : options.bundleId,
+          packageName: options.platform === 'android' ? options.bundleId : undefined, lang: options.lang || 'en', hash: this.manifest?.hash, substitutionData: options.substitutionData || {} })
+      });
+      if (scope !== this.scope || generation !== this.generation) return null;
+      if (response.status === 304) return this.manifest;
+      if (response.ok) {
+        const data: PaywallManifest = await response.json();
+        if (scope !== this.scope || generation !== this.generation) return null;
+        if (!data.notModified && data.ok && data.paywalls && Array.isArray(data.triggers)) await this.saveToDisk(data);
+      }
+    } catch (_) { /* Keep this scope's cache on transient failure. */ }
+    return scope === this.scope && generation === this.generation ? this.manifest : null;
+  }
+}

package/src/services/offlineEventQueue.ts

@@ -0,0 +1,88 @@
+function eventId(): string {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, char => {
+    const value = Math.floor(Math.random() * 16);
+    return (char === 'x' ? value : (value & 3) | 8).toString(16);
+  });
+}
+
+export class OfflineEventQueue {
+  private queueKey = '@mysuperwall_offline_event_queue_v1';
+  private asyncStorage: any = null;
+  private isFlushing = false;
+  private memoryQueue: Record<string, any>[] = [];
+  private mutation: Promise<unknown> = Promise.resolve();
+
+  constructor(scope?: string) {
+    if (scope) this.queueKey = '@mysuperwall_event_queue_v2:' + encodeURIComponent(scope);
+    try { this.asyncStorage = require('@react-native-async-storage/async-storage').default; }
+    catch (_) { this.asyncStorage = null; }
+  }
+
+  private serialized<T>(operation: () => Promise<T>): Promise<T> {
+    const next = this.mutation.then(operation, operation);
+    this.mutation = next.catch(() => undefined);
+    return next;
+  }
+
+  private async read(): Promise<Record<string, any>[]> {
+    if (!this.asyncStorage) return [...this.memoryQueue];
+    try {
+      const raw = await this.asyncStorage.getItem(this.queueKey);
+      const parsed = raw ? JSON.parse(raw) : [];
+      if (!Array.isArray(parsed)) return [];
+      const list = parsed.filter(item => item && typeof item === 'object').map(item =>
+        ({ ...item, eventId: item.eventId || eventId() }));
+      this.memoryQueue = list;
+      return list;
+    } catch (_) {
+      this.asyncStorage = null;
+      return [...this.memoryQueue];
+    }
+  }
+
+  private async write(list: Record<string, any>[]): Promise<void> {
+    this.memoryQueue = list;
+    if (this.asyncStorage) {
+      try { await this.asyncStorage.setItem(this.queueKey, JSON.stringify(list)); }
+      catch (_) { this.asyncStorage = null; }
+    }
+  }
+
+  async enqueue(event: Record<string, any>): Promise<void> {
+    // IDs and context are captured before asynchronous persistence, once per event.
+    const captured = JSON.parse(JSON.stringify({ ...event, eventId: event.eventId || eventId(),
+      timestamp: event.timestamp || new Date().toISOString() }));
+    await this.serialized(async () => {
+      const list = await this.read();
+      await this.write([...list, captured].slice(-200));
+    });
+  }
+
+  async flush(options: { baseUrl: string; appKey?: string; bundleId?: string; platform?: string }): Promise<void> {
+    if (this.isFlushing) return;
+    this.isFlushing = true;
+    try {
+      const batch = await this.serialized(async () => {
+        const list = await this.read();
+        await this.write(list); // Persist upgraded legacy IDs before the request.
+        return list.slice(0, 100);
+      });
+      if (!batch.length) return;
+      const base = options.baseUrl.endsWith('/') ? options.baseUrl : `${options.baseUrl}/`;
+      const response = await fetch(`${base}paywall/events/batch`, {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ platform: options.platform || 'react-native', appKey: options.appKey,
+          bundleId: options.platform === 'android' ? undefined : options.bundleId,
+          packageName: options.platform === 'android' ? options.bundleId : undefined, events: batch })
+      });
+      if (response.ok) {
+        const sent = new Set(batch.map(event => event.eventId));
+        await this.serialized(async () => {
+          const current = await this.read();
+          await this.write(current.filter(event => !sent.has(event.eventId)));
+        });
+      }
+    } catch (_) { /* Retain the original IDs for retry. */ }
+    finally { this.isFlushing = false; }
+  }
+}

package/src/ui/PaywallModal.tsx

@@ -0,0 +1,122 @@
+import React, { FC, useRef } from 'react';
+import { MySuperwall } from '../MySuperwall';
+import { Modal, StyleSheet, SafeAreaView } from 'react-native';
+import { PaywallData, PaywallCallbackActions } from '../models/paywall';
+
+export interface PaywallModalProps extends PaywallCallbackActions {
+  visible: boolean;
+  paywall: PaywallData | null;
+  onClose: () => void;
+}
+
+export const PaywallModal: FC<PaywallModalProps> = props => {
+  if (!props.visible || !props.paywall) return null;
+  // Remount the displayed session when HTML or attribution changes, even if the
+  // paywall ID stays the same. Freeze the payload to the HTML sent to WebView.
+  const captured: PaywallData = JSON.parse(JSON.stringify(props.paywall));
+  const sessionKey = JSON.stringify(captured);
+  return <PaywallModalContent key={sessionKey} {...props} paywall={captured} />;
+};
+
+const PaywallModalContent: FC<PaywallModalProps> = ({
+  visible,
+  paywall,
+  onClose,
+  onPurchase,
+  onRestore,
+  onDismiss,
+  onOpenUrl
+}) => {
+  const shown = useRef(false);
+  const dismissed = useRef(false);
+  if (!visible || !paywall) return null;
+  const track = (type: string, productId?: string) => {
+    void MySuperwall.shared.trackPaywallEvent(type, paywall, productId);
+  };
+  const dismiss = () => {
+    if (dismissed.current) return;
+    dismissed.current = true;
+    track('paywall_dismissed');
+    onClose();
+    void onDismiss?.();
+  };
+
+  let WebViewComponent: any = null;
+  try {
+    WebViewComponent = require('react-native-webview').WebView;
+  } catch (_) {
+    console.warn('[MySuperwall] react-native-webview is required to render paywalls.');
+    return null;
+  }
+
+  const injectedJavaScript = `
+    window.MySuperWall = {
+      postMessage: function(msg) {
+        if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
+          window.ReactNativeWebView.postMessage(typeof msg === 'string' ? msg : JSON.stringify(msg));
+        }
+      }
+    };
+    true;
+  `;
+
+  const handleMessage = (event: any) => {
+    try {
+      const data = JSON.parse(event.nativeEvent.data);
+      const action = typeof data.action === 'string' ? data.action : data.type;
+      const type = typeof action === 'string' ? action.toLowerCase() : '';
+
+      switch (type) {
+        case 'purchase': {
+          const productId = data.productId || data.product_id;
+          if (typeof productId === 'string' && productId.trim()) { track('purchase_started', productId); if (onPurchase) onPurchase(productId); }
+          break;
+        }
+        case 'restore': {
+          track('restore_started');
+          if (onRestore) onRestore();
+          break;
+        }
+        case 'close':
+        case 'dismiss': {
+          dismiss();
+          break;
+        }
+        case 'open_url':
+        case 'openurl': {
+          if (typeof data.url === 'string' && data.url.trim() && onOpenUrl) onOpenUrl(data.url);
+          break;
+        }
+      }
+    } catch (_) {}
+  };
+
+  return (
+    <Modal visible={visible} animationType="slide" transparent={false} onRequestClose={dismiss}>
+      <SafeAreaView style={styles.container}>
+        <WebViewComponent
+          originWhitelist={['*']}
+          source={{ html: paywall.html, baseUrl: 'https://mysuperwall.com' }}
+          injectedJavaScriptBeforeContentLoaded={injectedJavaScript}
+          onMessage={handleMessage}
+          onLoad={() => { if (!shown.current) { shown.current = true; track('paywall_shown'); } }}
+          style={styles.webview}
+          javaScriptEnabled={true}
+          domStorageEnabled={true}
+          bounces={false}
+        />
+      </SafeAreaView>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000000'
+  },
+  webview: {
+    flex: 1,
+    backgroundColor: 'transparent'
+  }
+});