react-native-purchases-ui 8.11.10 → 9.0.0

package/src/index.tsx

@@ -19,12 +19,13 @@ import {
 import React, { type ReactNode, useEffect, useState } from "react";
 import { shouldUsePreviewAPIMode } from "./utils/environment";
 import { previewNativeModuleRNCustomerCenter, previewNativeModuleRNPaywalls } from "./preview/nativeModules";
+import { PreviewPaywall } from "./preview/previewComponents";
 
 export { PAYWALL_RESULT } from "@revenuecat/purchases-typescript-internal";
 
 const LINKING_ERROR =
   `The package 'react-native-purchases-ui' doesn't seem to be linked. Make sure: \n\n` +
-  Platform.select({ios: "- You have run 'pod install'\n", default: ''}) +
+  '- You have run \'pod install\'\n' +
   '- You rebuilt the app after installing the package\n';
 
 
@@ -42,21 +43,118 @@ if (!RNCustomerCenter) {
   throw new Error(LINKING_ERROR);
 }
 
-const eventEmitter = new NativeEventEmitter(RNPaywalls);
-const customerCenterEventEmitter = new NativeEventEmitter(RNCustomerCenter);
+const NativePaywall = !usingPreviewAPIMode && UIManager.getViewManagerConfig('Paywall') != null 
+  ? requireNativeComponent<FullScreenPaywallViewProps>('Paywall')
+  : null;
 
-const InternalPaywall =
-  UIManager.getViewManagerConfig('Paywall') != null
-    ? requireNativeComponent<FullScreenPaywallViewProps>('Paywall')
-    : () => {
-      throw new Error(LINKING_ERROR);
-    };
-
-const InternalPaywallFooterView = UIManager.getViewManagerConfig('Paywall') != null
+const NativePaywallFooter = !usingPreviewAPIMode && UIManager.getViewManagerConfig('Paywall') != null 
   ? requireNativeComponent<InternalFooterPaywallViewProps>('RCPaywallFooterView')
-  : () => {
-    throw new Error(LINKING_ERROR);
-  };
+  : null;
+
+const eventEmitter = usingPreviewAPIMode ? null : new NativeEventEmitter(RNPaywalls);
+const customerCenterEventEmitter = usingPreviewAPIMode ? null : new NativeEventEmitter(RNCustomerCenter);
+
+const InternalPaywall: React.FC<FullScreenPaywallViewProps> = ({
+  style,
+  children,
+  options,
+  onPurchaseStarted,
+  onPurchaseCompleted,
+  onPurchaseError,
+  onPurchaseCancelled,
+  onRestoreStarted,
+  onRestoreCompleted,
+  onRestoreError,
+  onDismiss,
+}) => {
+  if (usingPreviewAPIMode) {
+    return (
+      <PreviewPaywall
+        offering={options?.offering}
+        displayCloseButton={options?.displayCloseButton}
+        fontFamily={options?.fontFamily}
+        onPurchaseStarted={onPurchaseStarted}
+        onPurchaseCompleted={onPurchaseCompleted}
+        onPurchaseError={onPurchaseError}
+        onPurchaseCancelled={onPurchaseCancelled}
+        onRestoreStarted={onRestoreStarted}
+        onRestoreCompleted={onRestoreCompleted}
+        onRestoreError={onRestoreError}
+        onDismiss={onDismiss}
+      />
+    );
+  } else if (!!NativePaywall) {
+    return (
+      <NativePaywall
+        style={style}
+        children={children}
+        options={options}
+        onPurchaseStarted={(event: any) => onPurchaseStarted && onPurchaseStarted(event.nativeEvent)}
+        onPurchaseCompleted={(event: any) => onPurchaseCompleted && onPurchaseCompleted(event.nativeEvent)}
+        onPurchaseError={(event: any) => onPurchaseError && onPurchaseError(event.nativeEvent)}
+        onPurchaseCancelled={() => onPurchaseCancelled && onPurchaseCancelled()}
+        onRestoreStarted={() => onRestoreStarted && onRestoreStarted()}
+        onRestoreCompleted={(event: any) => onRestoreCompleted && onRestoreCompleted(event.nativeEvent)}
+        onRestoreError={(event: any) => onRestoreError && onRestoreError(event.nativeEvent)}
+        onDismiss={() => onDismiss && onDismiss()}
+      />
+    );
+  }
+
+  throw new Error(LINKING_ERROR);
+};
+
+const InternalPaywallFooterView: React.FC<InternalFooterPaywallViewProps> = ({
+  style,
+  children,
+  options,
+  onPurchaseStarted,
+  onPurchaseCompleted,
+  onPurchaseError,
+  onPurchaseCancelled,
+  onRestoreStarted,
+  onRestoreCompleted,
+  onRestoreError,
+  onDismiss,
+  onMeasure,
+}) => {
+  if (usingPreviewAPIMode) {
+    return (
+      <PreviewPaywall
+        offering={options?.offering}
+        displayCloseButton={true}
+        fontFamily={options?.fontFamily}
+        onPurchaseStarted={onPurchaseStarted}
+        onPurchaseCompleted={onPurchaseCompleted}
+        onPurchaseError={onPurchaseError}
+        onPurchaseCancelled={onPurchaseCancelled}
+        onRestoreStarted={onRestoreStarted}
+        onRestoreCompleted={onRestoreCompleted}
+        onRestoreError={onRestoreError}
+        onDismiss={onDismiss}
+      />
+    );
+  } else if (!!NativePaywallFooter) {
+    return (
+      <NativePaywallFooter
+        style={style}
+        children={children}
+        options={options}
+        onPurchaseStarted={(event: any) => onPurchaseStarted && onPurchaseStarted(event.nativeEvent)}
+        onPurchaseCompleted={(event: any) => onPurchaseCompleted && onPurchaseCompleted(event.nativeEvent)}
+        onPurchaseError={(event: any) => onPurchaseError && onPurchaseError(event.nativeEvent)}
+        onPurchaseCancelled={() => onPurchaseCancelled && onPurchaseCancelled()}
+        onRestoreStarted={() => onRestoreStarted && onRestoreStarted()}
+        onRestoreCompleted={(event: any) => onRestoreCompleted && onRestoreCompleted(event.nativeEvent)}
+        onRestoreError={(event: any) => onRestoreError && onRestoreError(event.nativeEvent)}
+        onDismiss={() => onDismiss && onDismiss()}
+        onMeasure={onMeasure}
+      />
+    );
+  }
+
+  throw new Error(LINKING_ERROR);
+};
 
 export interface PresentPaywallParams {
   /**
@@ -302,19 +400,23 @@ export default class RevenueCatUI {
                                                                    onRestoreCompleted,
                                                                    onRestoreError,
                                                                    onDismiss,
-                                                                 }) => (
-    <InternalPaywall options={options}
-                     children={children}
-                     onPurchaseStarted={(event: any) => onPurchaseStarted && onPurchaseStarted(event.nativeEvent)}
-                     onPurchaseCompleted={(event: any) => onPurchaseCompleted && onPurchaseCompleted(event.nativeEvent)}
-                     onPurchaseError={(event: any) => onPurchaseError && onPurchaseError(event.nativeEvent)}
-                     onPurchaseCancelled={() => onPurchaseCancelled && onPurchaseCancelled()}
-                     onRestoreStarted={() => onRestoreStarted && onRestoreStarted()}
-                     onRestoreCompleted={(event: any) => onRestoreCompleted && onRestoreCompleted(event.nativeEvent)}
-                     onRestoreError={(event: any) => onRestoreError && onRestoreError(event.nativeEvent)}
-                     onDismiss={() => onDismiss && onDismiss()}
-                     style={[{flex: 1}, style]}/>
-  );
+                                                                 }) => {
+    return (
+      <InternalPaywall 
+        options={options}
+        children={children}
+        onPurchaseStarted={onPurchaseStarted}
+        onPurchaseCompleted={onPurchaseCompleted}
+        onPurchaseError={onPurchaseError}
+        onPurchaseCancelled={onPurchaseCancelled}
+        onRestoreStarted={onRestoreStarted}
+        onRestoreCompleted={onRestoreCompleted}
+        onRestoreError={onRestoreError}
+        onDismiss={onDismiss}
+        style={[{flex: 1}, style]}
+      />
+    );
+  };
 
   public static OriginalTemplatePaywallFooterContainerView: React.FC<FooterPaywallViewProps> = ({
                                                                                                   style,
@@ -345,13 +447,13 @@ export default class RevenueCatUI {
         setPaddingBottom(20 + bottom);
       };
 
-      const subscription = eventEmitter.addListener(
+      const subscription = eventEmitter?.addListener(
         'safeAreaInsetsDidChange',
         handleSafeAreaInsetsChange
       );
 
       return () => {
-        subscription.remove();
+        subscription?.remove();
       };
     }, []);
 
@@ -367,14 +469,14 @@ export default class RevenueCatUI {
             android: {marginTop: -20, height}
           })}
           options={options}
-          onPurchaseStarted={(event: any) => onPurchaseStarted && onPurchaseStarted(event.nativeEvent)}
-          onPurchaseCompleted={(event: any) => onPurchaseCompleted && onPurchaseCompleted(event.nativeEvent)}
-          onPurchaseError={(event: any) => onPurchaseError && onPurchaseError(event.nativeEvent)}
-          onPurchaseCancelled={() => onPurchaseCancelled && onPurchaseCancelled()}
-          onRestoreStarted={() => onRestoreStarted && onRestoreStarted()}
-          onRestoreCompleted={(event: any) => onRestoreCompleted && onRestoreCompleted(event.nativeEvent)}
-          onRestoreError={(event: any) => onRestoreError && onRestoreError(event.nativeEvent)}
-          onDismiss={() => onDismiss && onDismiss()}
+          onPurchaseStarted={onPurchaseStarted}
+          onPurchaseCompleted={onPurchaseCompleted}
+          onPurchaseError={onPurchaseError}
+          onPurchaseCancelled={onPurchaseCancelled}
+          onRestoreStarted={onRestoreStarted}
+          onRestoreCompleted={onRestoreCompleted}
+          onRestoreError={onRestoreError}
+          onDismiss={onDismiss}
           onMeasure={(event: any) => setHeight(event.nativeEvent.measurements.height)}
         />
       </View>
@@ -393,73 +495,89 @@ export default class RevenueCatUI {
       const callbacks = params.callbacks as CustomerCenterCallbacks;
 
       if (callbacks.onFeedbackSurveyCompleted) {
-        const subscription = customerCenterEventEmitter.addListener(
+        const subscription = customerCenterEventEmitter?.addListener(
           'onFeedbackSurveyCompleted',
           (event: { feedbackSurveyOptionId: string }) => callbacks.onFeedbackSurveyCompleted &&
             callbacks.onFeedbackSurveyCompleted(event)
         );
-        subscriptions.push(subscription);
+        if (subscription) {
+          subscriptions.push(subscription);
+        }
       }
 
       if (callbacks.onShowingManageSubscriptions) {
-        const subscription = customerCenterEventEmitter.addListener(
+        const subscription = customerCenterEventEmitter?.addListener(
           'onShowingManageSubscriptions',
           () => callbacks.onShowingManageSubscriptions && callbacks.onShowingManageSubscriptions()
         );
-        subscriptions.push(subscription);
+        if (subscription) {
+          subscriptions.push(subscription);
+        }
       }
 
       if (callbacks.onRestoreCompleted) {
-        const subscription = customerCenterEventEmitter.addListener(
+        const subscription = customerCenterEventEmitter?.addListener(
           'onRestoreCompleted',
           (event: { customerInfo: CustomerInfo }) => callbacks.onRestoreCompleted &&
             callbacks.onRestoreCompleted(event)
         );
-        subscriptions.push(subscription);
+        if (subscription) {
+          subscriptions.push(subscription);
+        }
       }
 
       if (callbacks.onRestoreFailed) {
-        const subscription = customerCenterEventEmitter.addListener(
+        const subscription = customerCenterEventEmitter?.addListener(
           'onRestoreFailed',
           (event: { error: PurchasesError }) => callbacks.onRestoreFailed &&
             callbacks.onRestoreFailed(event)
         );
-        subscriptions.push(subscription);
+        if (subscription) {
+          subscriptions.push(subscription);
+        }
       }
 
       if (callbacks.onRestoreStarted) {
-        const subscription = customerCenterEventEmitter.addListener(
+        const subscription = customerCenterEventEmitter?.addListener(
           'onRestoreStarted',
           () => callbacks.onRestoreStarted && callbacks.onRestoreStarted()
         );
-        subscriptions.push(subscription);
+        if (subscription) {
+          subscriptions.push(subscription);
+        }
       }
 
       if (callbacks.onRefundRequestStarted) {
-        const subscription = customerCenterEventEmitter.addListener(
+        const subscription = customerCenterEventEmitter?.addListener(
           'onRefundRequestStarted',
           (event: { productIdentifier: string }) => callbacks.onRefundRequestStarted &&
             callbacks.onRefundRequestStarted(event)
         );
-        subscriptions.push(subscription);
+        if (subscription) {
+          subscriptions.push(subscription);
+        }
       }
 
       if (callbacks.onRefundRequestCompleted) {
-        const subscription = customerCenterEventEmitter.addListener(
+        const subscription = customerCenterEventEmitter?.addListener(
           'onRefundRequestCompleted',
           (event: { productIdentifier: string; refundRequestStatus: REFUND_REQUEST_STATUS }) => callbacks.onRefundRequestCompleted &&
             callbacks.onRefundRequestCompleted(event)
         );
-        subscriptions.push(subscription);
+        if (subscription) {
+          subscriptions.push(subscription);
+        }
       }
 
       if (callbacks.onManagementOptionSelected) {
-        const subscription = customerCenterEventEmitter.addListener(
+        const subscription = customerCenterEventEmitter?.addListener(
           'onManagementOptionSelected',
           (event: CustomerCenterManagementOptionEvent) => callbacks.onManagementOptionSelected &&
             callbacks.onManagementOptionSelected(event)
         );
-        subscriptions.push(subscription);
+        if (subscription) {
+          subscriptions.push(subscription);
+        }
       }
 
       // Return a promise that resolves when the customer center is dismissed

package/src/preview/previewComponents.tsx

@@ -0,0 +1,171 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import {
+  type CustomerInfo,
+  type PurchasesError,
+  type PurchasesOffering,
+  type PurchasesPackage,
+  type PurchasesStoreTransaction,
+} from "@revenuecat/purchases-typescript-internal";
+
+export interface PreviewPaywallProps {
+  offering?: PurchasesOffering | null;
+  displayCloseButton?: boolean;
+  fontFamily?: string | null;
+  onPurchaseStarted?: ({packageBeingPurchased}: { packageBeingPurchased: PurchasesPackage }) => void;
+  onPurchaseCompleted?: ({
+                           customerInfo,
+                           storeTransaction
+                         }: { customerInfo: CustomerInfo, storeTransaction: PurchasesStoreTransaction }) => void;
+  onPurchaseError?: ({error}: { error: PurchasesError }) => void;
+  onPurchaseCancelled?: () => void;
+  onRestoreStarted?: () => void;
+  onRestoreCompleted?: ({customerInfo}: { customerInfo: CustomerInfo }) => void;
+  onRestoreError?: ({error}: { error: PurchasesError }) => void;
+  onDismiss?: () => void;
+}
+
+export const PreviewPaywall: React.FC<PreviewPaywallProps> = ({
+  displayCloseButton = true,
+  fontFamily,
+  onDismiss,
+}) => {
+  const handleClose = () => {
+    onDismiss?.();
+  };
+
+  const textStyle = fontFamily ? { fontFamily } : undefined;
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={[styles.title, textStyle]}>
+          Preview Paywall
+        </Text>
+        {displayCloseButton && (
+          <TouchableOpacity onPress={handleClose} style={styles.closeButton}>
+            <Text style={styles.closeButtonText}>✕</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+      
+      <View style={styles.content}>
+        <Text style={[styles.notSupportedMessage, textStyle]}>
+          Web paywalls are not supported yet.
+        </Text>
+        <Text style={[styles.fakeMessage, textStyle]}>
+          This is a fake preview implementation.
+        </Text>
+        <Text style={[styles.previewMode, textStyle]}>
+          Currently in preview mode
+        </Text>
+        
+        <TouchableOpacity style={styles.closePaywallButton} onPress={handleClose}>
+          <Text style={[styles.closePaywallButtonText, textStyle]}>
+            Close Paywall
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+    borderRadius: 12,
+    overflow: 'hidden',
+    maxWidth: 400,
+    maxHeight: 600,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 20,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333333',
+  },
+  closeButton: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    backgroundColor: '#f0f0f0',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  closeButtonText: {
+    fontSize: 16,
+    color: '#666666',
+  },
+  content: {
+    flex: 1,
+    padding: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  notSupportedMessage: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#333333',
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+  fakeMessage: {
+    fontSize: 16,
+    color: '#666666',
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  previewMode: {
+    fontSize: 14,
+    color: '#999999',
+    textAlign: 'center',
+    marginBottom: 32,
+  },
+  closePaywallButton: {
+    backgroundColor: '#007AFF',
+    padding: 16,
+    borderRadius: 8,
+    minWidth: 120,
+    alignItems: 'center',
+  },
+  closePaywallButtonText: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: '#ffffff',
+  },
+  description: {
+    fontSize: 16,
+    color: '#666666',
+    marginBottom: 20,
+    textAlign: 'center',
+  },
+  optionButton: {
+    backgroundColor: '#f8f9fa',
+    padding: 16,
+    borderRadius: 8,
+    marginBottom: 12,
+    alignItems: 'center',
+  },
+  optionButtonText: {
+    fontSize: 16,
+    color: '#333333',
+  },
+  footer: {
+    padding: 20,
+    borderTopWidth: 1,
+    borderTopColor: '#e0e0e0',
+  },
+  disclaimer: {
+    fontSize: 12,
+    color: '#999999',
+    textAlign: 'center',
+  },
+}); 

package/src/utils/environment.ts

@@ -1,18 +1,22 @@
-import { NativeModules } from "react-native";
+import { NativeModules, Platform } from "react-native";
 
 /**
  * Detects if the app is running in an environment where native modules are not available
- * (like Expo Go) or if the required native modules are missing.
+ * (like Expo Go or Web) or if the required native modules are missing.
  * 
  * @returns {boolean} True if the app is running in an environment where native modules are not available
- * (like Expo Go) or if the required native modules are missing.
+ * (like Expo Go or Web) or if the required native modules are missing.
  */
 export function shouldUsePreviewAPIMode(): boolean {
-  let usePreviewAPIMode = isExpoGo();
-  if (usePreviewAPIMode) {
+  if (isExpoGo()) {
     console.log('Expo Go app detected. Using RevenueCat in Preview API Mode.');
+    return true;
+  } else if (isWebPlatform()) {
+    console.log('Web platform detected. Using RevenueCat in Preview API Mode.');
+    return true;
+  } else {
+    return false;
   }
-  return usePreviewAPIMode;
 }
 
 declare global {
@@ -32,4 +36,11 @@ function isExpoGo(): boolean {
   }
 
   return !!globalThis.expo?.modules?.ExpoGo;
+}
+
+/**
+ * Detects if the app is running on web platform
+ */
+function isWebPlatform(): boolean {
+  return Platform.OS === 'web';
 }