@mysuperwall/react-native 0.0.0-stage → 1.1.0

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'
+  }
+});