@umituz/react-native-subscription 2.16.8 → 2.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.16.8",
+  "version": "2.17.0",
   "description": "Complete subscription management with RevenueCat, paywall UI, and credits system for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/domains/paywall/components/PaywallContainer.tsx

@@ -1,8 +1,9 @@
 /**
  * PaywallContainer Component
+ * Uses centralized pending purchase state - no local auth handling
  */
 
-import React, { useEffect, useMemo, useRef } from "react";
+import React, { useMemo } from "react";
 import { usePaywallVisibility } from "../../../presentation/hooks/usePaywallVisibility";
 import { useSubscriptionPackages } from "../../../revenuecat/presentation/hooks/useSubscriptionPackages";
 import { filterPackagesByMode } from "../../../utils/packageFilter";
@@ -11,46 +12,29 @@ import { PaywallModal } from "./PaywallModal";
 import { usePaywallActions } from "../hooks/usePaywallActions";
 import type { PaywallContainerProps } from "./PaywallContainer.types";
 
-
-
 export const PaywallContainer: React.FC<PaywallContainerProps> = (props) => {
-  const { userId, isAnonymous = false, translations, mode = "subscription", legalUrls, features, heroImage, bestValueIdentifier, creditsLabel, creditAmounts, packageFilterConfig, onPurchaseSuccess, onPurchaseError, onAuthRequired, visible, onClose } = props;
-  
+  const { userId, isAnonymous = false, translations, mode = "subscription", legalUrls, features, heroImage, bestValueIdentifier, creditsLabel, creditAmounts, packageFilterConfig, source = "inApp", onPurchaseSuccess, onPurchaseError, onAuthRequired, visible, onClose } = props;
+
   const { showPaywall, closePaywall } = usePaywallVisibility();
   const isVisible = visible ?? showPaywall;
   const handleClose = onClose ?? closePaywall;
 
   const { data: allPackages = [], isLoading } = useSubscriptionPackages(userId ?? undefined);
-  const { handlePurchase, handleRestore, pendingPackage, setPendingPackage, purchasePackage } = usePaywallActions({
-    userId: userId ?? undefined, isAnonymous, onPurchaseSuccess, onPurchaseError, onAuthRequired, onClose: handleClose
+  const { handlePurchase, handleRestore } = usePaywallActions({
+    userId: userId ?? undefined,
+    isAnonymous,
+    source,
+    onPurchaseSuccess,
+    onPurchaseError,
+    onAuthRequired,
+    onClose: handleClose,
   });
 
-  const wasAnonymousRef = useRef(isAnonymous);
   const { filteredPackages, computedCreditAmounts } = useMemo(() => ({
     filteredPackages: filterPackagesByMode(allPackages, mode, packageFilterConfig),
     computedCreditAmounts: mode !== "subscription" && !creditAmounts ? createCreditAmountsFromPackages(allPackages) : creditAmounts
   }), [allPackages, mode, packageFilterConfig, creditAmounts]);
 
-  // Auto-purchase after auth
-  useEffect(() => {
-    const wasAuth = wasAnonymousRef.current && !isAnonymous;
-    wasAnonymousRef.current = isAnonymous;
-
-    if (wasAuth && pendingPackage && userId) {
-      (async () => {
-        try {
-          const res = await purchasePackage(pendingPackage);
-          if (res.success) {
-            onPurchaseSuccess?.();
-            handleClose();
-          }
-        } catch (err: any) {
-          onPurchaseError?.(err.message || String(err));
-        } finally { setPendingPackage(null); }
-      })();
-    }
-  }, [isAnonymous, userId, pendingPackage, purchasePackage, onPurchaseSuccess, onPurchaseError, handleClose, setPendingPackage]);
-
   if (!isVisible) return null;
 
   return (

package/src/domains/paywall/components/PaywallContainer.types.ts

@@ -30,6 +30,8 @@ export interface PaywallContainerProps {
   readonly creditAmounts?: Record<string, number>;
   /** Custom filter config for package categorization */
   readonly packageFilterConfig?: PackageFilterConfig;
+  /** Source of the paywall - affects pending purchase handling */
+  readonly source?: "postOnboarding" | "inApp";
   /** Callback when purchase succeeds */
   readonly onPurchaseSuccess?: () => void;
   /** Callback when purchase fails */

package/src/domains/paywall/hooks/usePaywallActions.ts

@@ -1,13 +1,15 @@
-import { useCallback, useState } from "react";
+import { useCallback } from "react";
 import type { PurchasesPackage } from "react-native-purchases";
 import { usePurchasePackage } from "../../../revenuecat/presentation/hooks/usePurchasePackage";
 import { useRestorePurchase } from "../../../revenuecat/presentation/hooks/useRestorePurchase";
+import { usePendingPurchase } from "../../../presentation/hooks/usePendingPurchase";
 
 declare const __DEV__: boolean;
 
 interface UsePaywallActionsProps {
   userId?: string;
   isAnonymous: boolean;
+  source?: "postOnboarding" | "inApp";
   onPurchaseSuccess?: () => void;
   onPurchaseError?: (error: string) => void;
   onAuthRequired?: () => void;
@@ -17,6 +19,7 @@ interface UsePaywallActionsProps {
 export const usePaywallActions = ({
   userId,
   isAnonymous,
+  source = "inApp",
   onPurchaseSuccess,
   onPurchaseError,
   onAuthRequired,
@@ -24,18 +27,18 @@ export const usePaywallActions = ({
 }: UsePaywallActionsProps) => {
   const { mutateAsync: purchasePackage } = usePurchasePackage(userId);
   const { mutateAsync: restorePurchases } = useRestorePurchase(userId);
-  const [pendingPackage, setPendingPackage] = useState<PurchasesPackage | null>(null);
+  const { pendingPackage, setPendingPurchase, clearPendingPurchase } = usePendingPurchase();
 
   const handlePurchase = useCallback(async (pkg: PurchasesPackage) => {
     if (isAnonymous) {
-      if (__DEV__) console.log("[PaywallActions] Anonymous user, storing package:", pkg.identifier);
-      setPendingPackage(pkg);
+      if (__DEV__) console.log("[PaywallActions] Anonymous user, storing package:", pkg.product.identifier, "source:", source);
+      setPendingPurchase(pkg, source);
       onAuthRequired?.();
       return;
     }
 
     try {
-      if (__DEV__) console.log("[PaywallActions] Purchase started:", pkg.identifier);
+      if (__DEV__) console.log("[PaywallActions] Purchase started:", pkg.product.identifier);
       const res = await purchasePackage(pkg);
       if (res.success) {
         onPurchaseSuccess?.();
@@ -44,7 +47,7 @@ export const usePaywallActions = ({
     } catch (err: any) {
       onPurchaseError?.(err.message || String(err));
     }
-  }, [isAnonymous, purchasePackage, onClose, onPurchaseSuccess, onPurchaseError, onAuthRequired]);
+  }, [isAnonymous, source, purchasePackage, onClose, onPurchaseSuccess, onPurchaseError, onAuthRequired, setPendingPurchase]);
 
   const handleRestore = useCallback(async () => {
     try {
@@ -59,5 +62,5 @@ export const usePaywallActions = ({
     }
   }, [restorePurchases, onClose, onPurchaseSuccess, onPurchaseError]);
 
-  return { handlePurchase, handleRestore, pendingPackage, setPendingPackage, purchasePackage };
+  return { handlePurchase, handleRestore, pendingPackage, clearPendingPurchase, purchasePackage };
 };

package/src/presentation/hooks/index.ts

@@ -8,7 +8,8 @@ export * from "./useDeductCredit";
 export * from "./useInitializeCredits";
 export * from "./useDevTestCallbacks";
 export * from "./useFeatureGate";
-export * from "./usePaywallOperations";
+export * from "./usePendingPurchase";
+export * from "./useCompletePendingPurchase";
 export * from "./usePaywallVisibility";
 export * from "./usePremium";
 export * from "./usePremiumGate";

package/src/presentation/hooks/useCompletePendingPurchase.ts

@@ -0,0 +1,127 @@
+/**
+ * Complete Pending Purchase Hook
+ * Centralized hook for completing pending purchases after authentication
+ * This is the SINGLE source of truth for post-auth purchase completion
+ */
+
+import { useCallback, useRef, useEffect } from "react";
+import { usePurchasePackage } from "../../revenuecat/presentation/hooks/usePurchasePackage";
+import { usePendingPurchase, pendingPurchaseControl } from "./usePendingPurchase";
+import { usePaywallVisibility } from "./usePaywallVisibility";
+
+declare const __DEV__: boolean;
+
+export interface UseCompletePendingPurchaseProps {
+  userId: string | undefined;
+  isAnonymous: boolean;
+  onPurchaseSuccess?: () => void;
+  onPurchaseError?: (error: string) => void;
+}
+
+export interface UseCompletePendingPurchaseResult {
+  completePendingPurchase: () => Promise<boolean>;
+  hasPendingPurchase: boolean;
+}
+
+export function useCompletePendingPurchase({
+  userId,
+  isAnonymous,
+  onPurchaseSuccess,
+  onPurchaseError,
+}: UseCompletePendingPurchaseProps): UseCompletePendingPurchaseResult {
+  const { mutateAsync: purchasePackage } = usePurchasePackage(userId);
+  const { clearPendingPurchase, hasPendingPurchase } = usePendingPurchase();
+  const { closePaywall } = usePaywallVisibility();
+
+  const wasAnonymousRef = useRef(isAnonymous);
+  const isProcessingRef = useRef(false);
+
+  const completePendingPurchase = useCallback(async (): Promise<boolean> => {
+    // Get current state directly to avoid stale closure
+    const currentState = pendingPurchaseControl.get();
+
+    if (!currentState.package) {
+      if (__DEV__) console.log("[CompletePendingPurchase] No pending package");
+      return false;
+    }
+
+    if (!userId) {
+      if (__DEV__) console.log("[CompletePendingPurchase] No userId");
+      return false;
+    }
+
+    if (isProcessingRef.current) {
+      if (__DEV__) console.log("[CompletePendingPurchase] Already processing");
+      return false;
+    }
+
+    isProcessingRef.current = true;
+    const pkg = currentState.package;
+    const source = currentState.source;
+
+    if (__DEV__) {
+      console.log("[CompletePendingPurchase] Completing purchase:", {
+        identifier: pkg.product.identifier,
+        source,
+        userId,
+      });
+    }
+
+    // Clear pending BEFORE purchase to prevent double processing
+    clearPendingPurchase();
+
+    try {
+      const result = await purchasePackage(pkg);
+
+      if (result.success) {
+        if (__DEV__) console.log("[CompletePendingPurchase] Purchase SUCCESS");
+        onPurchaseSuccess?.();
+        closePaywall();
+        return true;
+      } else {
+        if (__DEV__) console.log("[CompletePendingPurchase] Purchase FAILED");
+        onPurchaseError?.("Purchase failed");
+        return false;
+      }
+    } catch (err: any) {
+      if (__DEV__) console.error("[CompletePendingPurchase] Purchase ERROR:", err);
+      onPurchaseError?.(err.message || String(err));
+      return false;
+    } finally {
+      isProcessingRef.current = false;
+    }
+  }, [userId, purchasePackage, clearPendingPurchase, closePaywall, onPurchaseSuccess, onPurchaseError]);
+
+  // Auto-complete when user transitions from anonymous to authenticated
+  useEffect(() => {
+    const wasAnonymous = wasAnonymousRef.current;
+    const isNowAuthenticated = userId && !isAnonymous;
+    wasAnonymousRef.current = isAnonymous;
+
+    if (__DEV__) {
+      console.log("[CompletePendingPurchase] Auth state check:", {
+        wasAnonymous,
+        isNowAuthenticated,
+        hasPending: pendingPurchaseControl.hasPending(),
+        pendingId: pendingPurchaseControl.get().package?.product.identifier,
+      });
+    }
+
+    // Only trigger if user just authenticated AND there's a pending purchase
+    if (wasAnonymous && isNowAuthenticated && pendingPurchaseControl.hasPending()) {
+      if (__DEV__) {
+        console.log("[CompletePendingPurchase] Auth completed, auto-completing purchase");
+      }
+
+      // Small delay to ensure all state is settled
+      setTimeout(() => {
+        completePendingPurchase();
+      }, 300);
+    }
+  }, [userId, isAnonymous, completePendingPurchase]);
+
+  return {
+    completePendingPurchase,
+    hasPendingPurchase,
+  };
+}

package/src/presentation/hooks/usePendingPurchase.ts

@@ -0,0 +1,88 @@
+/**
+ * Pending Purchase Hook
+ * Centralized global state for pending package purchase
+ * Used by both post-onboarding paywall and in-app paywall
+ */
+
+import { useCallback, useSyncExternalStore } from "react";
+import type { PurchasesPackage } from "react-native-purchases";
+
+type Listener = () => void;
+
+interface PendingPurchaseState {
+  package: PurchasesPackage | null;
+  source: "postOnboarding" | "inApp" | null;
+}
+
+let state: PendingPurchaseState = {
+  package: null,
+  source: null,
+};
+
+const listeners = new Set<Listener>();
+
+const subscribe = (listener: Listener): (() => void) => {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+};
+
+const getSnapshot = (): PendingPurchaseState => state;
+
+const setState = (newState: Partial<PendingPurchaseState>): void => {
+  state = { ...state, ...newState };
+  listeners.forEach((listener) => listener());
+};
+
+/**
+ * Direct pending purchase control for non-React contexts
+ */
+export const pendingPurchaseControl = {
+  set: (pkg: PurchasesPackage, source: "postOnboarding" | "inApp") => {
+    if (__DEV__) {
+      console.log("[PendingPurchase] Setting pending package:", {
+        identifier: pkg.product.identifier,
+        source,
+      });
+    }
+    setState({ package: pkg, source });
+  },
+  clear: () => {
+    if (__DEV__) {
+      console.log("[PendingPurchase] Clearing pending package");
+    }
+    setState({ package: null, source: null });
+  },
+  get: () => state,
+  hasPending: () => state.package !== null,
+};
+
+export interface UsePendingPurchaseResult {
+  pendingPackage: PurchasesPackage | null;
+  pendingSource: "postOnboarding" | "inApp" | null;
+  setPendingPurchase: (pkg: PurchasesPackage, source: "postOnboarding" | "inApp") => void;
+  clearPendingPurchase: () => void;
+  hasPendingPurchase: boolean;
+}
+
+export function usePendingPurchase(): UsePendingPurchaseResult {
+  const currentState = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+  const setPendingPurchase = useCallback(
+    (pkg: PurchasesPackage, source: "postOnboarding" | "inApp") => {
+      pendingPurchaseControl.set(pkg, source);
+    },
+    []
+  );
+
+  const clearPendingPurchase = useCallback(() => {
+    pendingPurchaseControl.clear();
+  }, []);
+
+  return {
+    pendingPackage: currentState.package,
+    pendingSource: currentState.source,
+    setPendingPurchase,
+    clearPendingPurchase,
+    hasPendingPurchase: currentState.package !== null,
+  };
+}

package/src/presentation/hooks/paywall/index.ts

@@ -1,3 +0,0 @@
-export * from "./types";
-export * from "./usePaywallRefs";
-export * from "./usePaywallOperations";

package/src/presentation/hooks/paywall/types.ts

@@ -1,29 +0,0 @@
-import type { PurchasesPackage } from "react-native-purchases";
-
-export type PurchaseSource = "inApp" | "postOnboarding" | null;
-
-export interface PaywallOperationsProps {
-  userId: string | undefined;
-  isAnonymous: boolean;
-  onPaywallClose?: () => void;
-  onPurchaseSuccess?: () => void;
-  onAuthRequired?: () => void;
-}
-
-export interface PaywallOperationsResult {
-  pendingPackage: PurchasesPackage | null;
-  handlePurchase: (pkg: PurchasesPackage) => Promise<boolean>;
-  handleRestore: () => Promise<boolean>;
-  handleInAppPurchase: (pkg: PurchasesPackage) => Promise<boolean>;
-  handleInAppRestore: () => Promise<boolean>;
-  completePendingPurchase: () => Promise<boolean>;
-  clearPendingPackage: () => void;
-}
-
-export interface PaywallRefs {
-  userIdRef: React.MutableRefObject<string | undefined>;
-  isAnonymousRef: React.MutableRefObject<boolean>;
-  purchasePackageRef: React.MutableRefObject<(pkg: PurchasesPackage) => Promise<boolean>>;
-  closePaywallRef: React.MutableRefObject<() => void>;
-  onPurchaseSuccessRef: React.MutableRefObject<(() => void) | undefined>;
-}

package/src/presentation/hooks/paywall/usePaywallOperations.ts

@@ -1,139 +0,0 @@
-import { useState, useCallback } from "react";
-import { Alert } from "react-native";
-import { useLocalization } from "@umituz/react-native-localization";
-import type { PurchasesPackage } from "react-native-purchases";
-import { usePremium } from "../usePremium";
-import { usePaywallRefs } from "./usePaywallRefs";
-import type {
-  PurchaseSource,
-  PaywallOperationsProps,
-  PaywallOperationsResult,
-} from "./types";
-
-const RERENDER_DELAY_MS = 100;
-
-export function usePaywallOperations({
-  userId,
-  isAnonymous,
-  onPaywallClose: _onPaywallClose,
-  onPurchaseSuccess,
-  onAuthRequired,
-}: PaywallOperationsProps): PaywallOperationsResult {
-  const { t } = useLocalization();
-  const { purchasePackage, restorePurchase, closePaywall } = usePremium(userId);
-
-  const [pendingPackage, setPendingPackage] = useState<PurchasesPackage | null>(null);
-  const [pendingSource, setPendingSource] = useState<PurchaseSource>(null);
-
-  const refs = usePaywallRefs({
-    userId,
-    isAnonymous,
-    purchasePackage,
-    closePaywall,
-    onPurchaseSuccess,
-  });
-
-  const isAuthenticated = useCallback((): boolean => {
-    return !!refs.userIdRef.current && !refs.isAnonymousRef.current;
-  }, [refs]);
-
-  const showError = useCallback(() => {
-    Alert.alert(t("premium.purchaseError"), t("premium.purchaseErrorMessage"));
-  }, [t]);
-
-  const handlePurchase = useCallback(
-    async (pkg: PurchasesPackage): Promise<boolean> => {
-      if (!isAuthenticated()) {
-        setPendingPackage(pkg);
-        setPendingSource("postOnboarding");
-        onAuthRequired?.();
-        return false;
-      }
-      const success = await purchasePackage(pkg);
-      if (success) onPurchaseSuccess?.();
-      else showError();
-      return success;
-    },
-    [isAuthenticated, purchasePackage, onPurchaseSuccess, onAuthRequired, showError]
-  );
-
-  const handleRestore = useCallback(async (): Promise<boolean> => {
-    const success = await restorePurchase();
-    Alert.alert(
-      success ? t("premium.restoreSuccess") : t("premium.restoreError"),
-      success ? t("premium.restoreMessage") : t("premium.restoreErrorMessage")
-    );
-    if (success) onPurchaseSuccess?.();
-    return success;
-  }, [restorePurchase, onPurchaseSuccess, t]);
-
-  const handleInAppPurchase = useCallback(
-    async (pkg: PurchasesPackage): Promise<boolean> => {
-      if (!isAuthenticated()) {
-        setPendingPackage(pkg);
-        setPendingSource("inApp");
-        onAuthRequired?.();
-        return false;
-      }
-      const success = await purchasePackage(pkg);
-      if (success) closePaywall();
-      else showError();
-      return success;
-    },
-    [isAuthenticated, purchasePackage, closePaywall, onAuthRequired, showError]
-  );
-
-  const handleInAppRestore = useCallback(async (): Promise<boolean> => {
-    const success = await restorePurchase();
-    Alert.alert(
-      success ? t("premium.restoreSuccess") : t("premium.restoreError"),
-      success ? t("premium.restoreMessage") : t("premium.restoreErrorMessage")
-    );
-    if (success) closePaywall();
-    return success;
-  }, [restorePurchase, closePaywall, t]);
-
-  const completePendingPurchase = useCallback(async (): Promise<boolean> => {
-    if (!pendingPackage) {
-      if (__DEV__) console.log("[usePaywallOperations] No pending package");
-      return false;
-    }
-
-    const pkg = pendingPackage;
-    const source = pendingSource;
-    setPendingPackage(null);
-    setPendingSource(null);
-
-    await new Promise((resolve) => setTimeout(resolve, RERENDER_DELAY_MS));
-
-    if (__DEV__) {
-      console.log("[usePaywallOperations] Completing:", pkg.identifier, source);
-    }
-
-    const success = await refs.purchasePackageRef.current(pkg);
-
-    if (success) {
-      source === "inApp"
-        ? refs.closePaywallRef.current()
-        : refs.onPurchaseSuccessRef.current?.();
-    } else {
-      showError();
-    }
-    return success;
-  }, [pendingPackage, pendingSource, refs, showError]);
-
-  const clearPendingPackage = useCallback(() => {
-    setPendingPackage(null);
-    setPendingSource(null);
-  }, []);
-
-  return {
-    pendingPackage,
-    handlePurchase,
-    handleRestore,
-    handleInAppPurchase,
-    handleInAppRestore,
-    completePendingPurchase,
-    clearPendingPackage,
-  };
-}

package/src/presentation/hooks/paywall/usePaywallRefs.ts

@@ -1,53 +0,0 @@
-import { useRef, useEffect } from "react";
-import type { PurchasesPackage } from "react-native-purchases";
-import type { PaywallRefs } from "./types";
-
-interface UsePaywallRefsProps {
-  userId: string | undefined;
-  isAnonymous: boolean;
-  purchasePackage: (pkg: PurchasesPackage) => Promise<boolean>;
-  closePaywall: () => void;
-  onPurchaseSuccess?: () => void;
-}
-
-export function usePaywallRefs({
-  userId,
-  isAnonymous,
-  purchasePackage,
-  closePaywall,
-  onPurchaseSuccess,
-}: UsePaywallRefsProps): PaywallRefs {
-  const userIdRef = useRef(userId);
-  const isAnonymousRef = useRef(isAnonymous);
-  const purchasePackageRef = useRef(purchasePackage);
-  const closePaywallRef = useRef(closePaywall);
-  const onPurchaseSuccessRef = useRef(onPurchaseSuccess);
-
-  useEffect(() => {
-    userIdRef.current = userId;
-  }, [userId]);
-
-  useEffect(() => {
-    isAnonymousRef.current = isAnonymous;
-  }, [isAnonymous]);
-
-  useEffect(() => {
-    purchasePackageRef.current = purchasePackage;
-  }, [purchasePackage]);
-
-  useEffect(() => {
-    closePaywallRef.current = closePaywall;
-  }, [closePaywall]);
-
-  useEffect(() => {
-    onPurchaseSuccessRef.current = onPurchaseSuccess;
-  }, [onPurchaseSuccess]);
-
-  return {
-    userIdRef,
-    isAnonymousRef,
-    purchasePackageRef,
-    closePaywallRef,
-    onPurchaseSuccessRef,
-  };
-}

package/src/presentation/hooks/usePaywallOperations.ts

@@ -1,5 +0,0 @@
-export {
-  usePaywallOperations,
-  type PaywallOperationsProps as UsePaywallOperationsProps,
-  type PaywallOperationsResult as UsePaywallOperationsResult,
-} from "./paywall";