@umituz/react-native-subscription 2.20.7 → 2.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.20.7",
+  "version": "2.21.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

@@ -13,7 +13,7 @@ import { usePaywallActions } from "../hooks/usePaywallActions";
 import type { PaywallContainerProps } from "./PaywallContainer.types";
 
 export const PaywallContainer: React.FC<PaywallContainerProps> = (props) => {
-  const { userId, isAnonymous: _isAnonymous = false, translations, mode = "subscription", legalUrls, features, heroImage, bestValueIdentifier, creditsLabel, creditAmounts, packageFilterConfig, source, onPurchaseSuccess, onPurchaseError, onAuthRequired, visible, onClose } = props;
+  const { userId, translations, mode = "subscription", legalUrls, features, heroImage, bestValueIdentifier, creditsLabel, creditAmounts, packageFilterConfig, source, onPurchaseSuccess, onPurchaseError, onAuthRequired, visible, onClose } = props;
 
   const { showPaywall, closePaywall, currentSource } = usePaywallVisibility();
   const isVisible = visible ?? showPaywall;

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

@@ -12,6 +12,9 @@ import type { SubscriptionFeature, PaywallTranslations, PaywallLegalUrls } from
 import { paywallModalStyles as styles } from "./PaywallModal.styles";
 import { PaywallFeatures } from "./PaywallFeatures";
 import { PaywallFooter } from "./PaywallFooter";
+import { usePurchaseLoadingStore, selectIsPurchasing } from "../../../presentation/stores";
+
+declare const __DEV__: boolean;
 
 export interface PaywallModalProps {
   visible: boolean;
@@ -33,21 +36,61 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
   const { visible, onClose, translations, packages = [], features = [], isLoading = false, legalUrls = {}, bestValueIdentifier, creditAmounts, creditsLabel, heroImage, onPurchase, onRestore } = props;
   const tokens = useAppDesignTokens();
   const [selectedPlanId, setSelectedPlanId] = useState<string | null>(null);
-  const [isProcessing, setIsProcessing] = useState(false);
+  const [isLocalProcessing, setIsLocalProcessing] = useState(false);
+
+  // Global purchase loading state (for auto-execution after auth)
+  const isGlobalPurchasing = usePurchaseLoadingStore(selectIsPurchasing);
+  const { startPurchase, endPurchase } = usePurchaseLoadingStore();
+
+  // Combined processing state
+  const isProcessing = isLocalProcessing || isGlobalPurchasing;
 
   const handlePurchase = useCallback(async () => {
     if (!selectedPlanId || !onPurchase) return;
-    setIsProcessing(true);
+
+    if (__DEV__) {
+      console.log("[PaywallModal] handlePurchase starting:", { selectedPlanId });
+    }
+
+    setIsLocalProcessing(true);
+    startPurchase(selectedPlanId, "manual");
+
     try {
       const pkg = packages.find((p) => p.product.identifier === selectedPlanId);
-      if (pkg) await onPurchase(pkg);
-    } finally { setIsProcessing(false); }
-  }, [selectedPlanId, packages, onPurchase]);
+      if (pkg) {
+        if (__DEV__) {
+          console.log("[PaywallModal] Calling onPurchase:", { productId: pkg.product.identifier });
+        }
+        await onPurchase(pkg);
+        if (__DEV__) {
+          console.log("[PaywallModal] onPurchase completed");
+        }
+      }
+    } finally {
+      setIsLocalProcessing(false);
+      endPurchase();
+      if (__DEV__) {
+        console.log("[PaywallModal] handlePurchase finished");
+      }
+    }
+  }, [selectedPlanId, packages, onPurchase, startPurchase, endPurchase]);
 
   const handleRestore = useCallback(async () => {
     if (!onRestore || isProcessing) return;
-    setIsProcessing(true);
-    try { await onRestore(); } finally { setIsProcessing(false); }
+
+    if (__DEV__) {
+      console.log("[PaywallModal] handleRestore starting");
+    }
+
+    setIsLocalProcessing(true);
+    try {
+      await onRestore();
+      if (__DEV__) {
+        console.log("[PaywallModal] handleRestore completed");
+      }
+    } finally {
+      setIsLocalProcessing(false);
+    }
   }, [onRestore, isProcessing]);
 
   const handleLegalUrl = useCallback(async (url: string | undefined) => {

package/src/index.ts

@@ -32,9 +32,13 @@ export * from "./presentation/components/details/PremiumDetailsCard";
 export * from "./presentation/components/details/PremiumStatusBadge";
 export * from "./presentation/components/sections/SubscriptionSection";
 export * from "./presentation/components/feedback/PaywallFeedbackModal";
+export * from "./presentation/components/overlay";
 export * from "./presentation/screens/SubscriptionDetailScreen";
 export * from "./presentation/types/SubscriptionDetailTypes";
 
+// Presentation Layer - Stores
+export * from "./presentation/stores";
+
 // Credits Domain
 export type {
   CreditType,

package/src/presentation/components/overlay/PurchaseLoadingOverlay.tsx

@@ -0,0 +1,63 @@
+/**
+ * Purchase Loading Overlay
+ * Full-screen overlay shown during purchase operations
+ * Locks the UI and shows a spinner with optional message
+ */
+
+import React from "react";
+import { View, Modal, StyleSheet } from "react-native";
+import { AtomicSpinner, AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import { usePurchaseLoadingStore, selectIsPurchasing } from "../../stores";
+
+export interface PurchaseLoadingOverlayProps {
+  /** Loading message to display */
+  loadingText?: string;
+}
+
+export const PurchaseLoadingOverlay: React.FC<PurchaseLoadingOverlayProps> = React.memo(
+  ({ loadingText }) => {
+    const tokens = useAppDesignTokens();
+    const isPurchasing = usePurchaseLoadingStore(selectIsPurchasing);
+
+    if (!isPurchasing) return null;
+
+    return (
+      <Modal visible transparent animationType="fade" statusBarTranslucent>
+        <View style={[styles.container, { backgroundColor: "rgba(0, 0, 0, 0.7)" }]}>
+          <View style={[styles.content, { backgroundColor: tokens.colors.surface }]}>
+            <AtomicSpinner size="lg" color="primary" />
+            {loadingText && (
+              <AtomicText
+                type="bodyLarge"
+                style={[styles.text, { color: tokens.colors.textPrimary }]}
+              >
+                {loadingText}
+              </AtomicText>
+            )}
+          </View>
+        </View>
+      </Modal>
+    );
+  }
+);
+
+PurchaseLoadingOverlay.displayName = "PurchaseLoadingOverlay";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  content: {
+    paddingHorizontal: 32,
+    paddingVertical: 24,
+    borderRadius: 16,
+    alignItems: "center",
+    minWidth: 200,
+  },
+  text: {
+    marginTop: 16,
+    textAlign: "center",
+  },
+});

package/src/presentation/components/overlay/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Overlay Components
+ */
+
+export { PurchaseLoadingOverlay, type PurchaseLoadingOverlayProps } from "./PurchaseLoadingOverlay";

package/src/presentation/hooks/useSavedPurchaseAutoExecution.ts

@@ -7,6 +7,7 @@ import { useEffect, useRef, useCallback } from "react";
 import { getSavedPurchase, clearSavedPurchase } from "./useAuthAwarePurchase";
 import { usePremium } from "./usePremium";
 import { SubscriptionManager } from "../../revenuecat";
+import { usePurchaseLoadingStore } from "../stores";
 
 declare const __DEV__: boolean;
 
@@ -26,6 +27,7 @@ export const useSavedPurchaseAutoExecution = (
 ): UseSavedPurchaseAutoExecutionResult => {
   const { userId, isAnonymous, onSuccess, onError } = params;
   const { purchasePackage } = usePremium(userId);
+  const { startPurchase, endPurchase } = usePurchaseLoadingStore();
 
   const prevIsAnonymousRef = useRef<boolean | undefined>(undefined);
   const isExecutingRef = useRef(false);
@@ -36,7 +38,8 @@ export const useSavedPurchaseAutoExecution = (
 
     if (__DEV__) {
       console.log(
-        "[SavedPurchaseAutoExecution] Waiting for RevenueCat initialization..."
+        "[SavedPurchaseAutoExecution] Waiting for RevenueCat initialization...",
+        { userId: userId.slice(0, 8), productId: savedPurchase.pkg.product.identifier }
       );
     }
 
@@ -60,16 +63,26 @@ export const useSavedPurchaseAutoExecution = (
 
         if (__DEV__) {
           console.log(
-            "[SavedPurchaseAutoExecution] RevenueCat ready, executing purchase:",
-            pkg.product.identifier
+            "[SavedPurchaseAutoExecution] RevenueCat ready, starting purchase...",
+            { productId: pkg.product.identifier, userId: userId.slice(0, 8) }
           );
         }
 
+        // Start global loading state
+        startPurchase(pkg.product.identifier, "auto-execution");
+
         try {
+          if (__DEV__) {
+            console.log("[SavedPurchaseAutoExecution] Calling purchasePackage...");
+          }
+
           const success = await purchasePackage(pkg);
 
           if (__DEV__) {
-            console.log("[SavedPurchaseAutoExecution] Purchase result:", success);
+            console.log("[SavedPurchaseAutoExecution] Purchase completed:", {
+              success,
+              productId: pkg.product.identifier
+            });
           }
 
           if (success && onSuccess) {
@@ -77,13 +90,22 @@ export const useSavedPurchaseAutoExecution = (
           }
         } catch (error) {
           if (__DEV__) {
-            console.error("[SavedPurchaseAutoExecution] Purchase failed:", error);
+            console.error("[SavedPurchaseAutoExecution] Purchase error:", {
+              error,
+              productId: pkg.product.identifier
+            });
           }
           if (onError && error instanceof Error) {
             onError(error);
           }
         } finally {
+          // End global loading state
+          endPurchase();
           isExecutingRef.current = false;
+
+          if (__DEV__) {
+            console.log("[SavedPurchaseAutoExecution] Purchase flow finished");
+          }
         }
 
         return;
@@ -99,7 +121,7 @@ export const useSavedPurchaseAutoExecution = (
     }
     clearSavedPurchase();
     isExecutingRef.current = false;
-  }, [userId, purchasePackage, onSuccess, onError]);
+  }, [userId, purchasePackage, onSuccess, onError, startPurchase, endPurchase]);
 
   useEffect(() => {
     const isAuthenticated = !!userId && !isAnonymous;
@@ -110,7 +132,7 @@ export const useSavedPurchaseAutoExecution = (
     const becameAuthenticated = wasAnonymous && isAuthenticated;
 
     if (__DEV__) {
-      console.log("[SavedPurchaseAutoExecution] Check:", {
+      console.log("[SavedPurchaseAutoExecution] Auth state check:", {
         userId: userId?.slice(0, 8),
         prevIsAnonymous,
         isAnonymous,
@@ -118,11 +140,15 @@ export const useSavedPurchaseAutoExecution = (
         wasAnonymous,
         becameAuthenticated,
         hasSavedPurchase: !!savedPurchase,
+        savedProductId: savedPurchase?.pkg.product.identifier,
         willExecute: becameAuthenticated && !!savedPurchase && !isExecutingRef.current,
       });
     }
 
     if (becameAuthenticated && savedPurchase && !isExecutingRef.current) {
+      if (__DEV__) {
+        console.log("[SavedPurchaseAutoExecution] Triggering auto-execution...");
+      }
       executeWithWait();
     }
 

package/src/presentation/stores/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Presentation Layer - Stores
+ */
+
+export {
+  usePurchaseLoadingStore,
+  selectIsPurchasing,
+  selectPurchasingProductId,
+  selectPurchaseSource,
+  type PurchaseLoadingState,
+  type PurchaseLoadingActions,
+  type PurchaseLoadingStore,
+} from "./purchaseLoadingStore";

package/src/presentation/stores/purchaseLoadingStore.ts

@@ -0,0 +1,73 @@
+/**
+ * Purchase Loading Store
+ * Global state for tracking purchase loading across the app
+ * Used by both PaywallModal and useSavedPurchaseAutoExecution
+ */
+
+import { create } from "zustand";
+
+declare const __DEV__: boolean;
+
+export interface PurchaseLoadingState {
+  /** Whether a purchase is in progress */
+  isPurchasing: boolean;
+  /** Product identifier being purchased */
+  purchasingProductId: string | null;
+  /** Source of the purchase (manual, auto-execution, etc.) */
+  purchaseSource: "manual" | "auto-execution" | null;
+}
+
+export interface PurchaseLoadingActions {
+  /** Start purchase loading state */
+  startPurchase: (productId: string, source: "manual" | "auto-execution") => void;
+  /** End purchase loading state */
+  endPurchase: () => void;
+  /** Reset all state */
+  reset: () => void;
+}
+
+export type PurchaseLoadingStore = PurchaseLoadingState & PurchaseLoadingActions;
+
+const initialState: PurchaseLoadingState = {
+  isPurchasing: false,
+  purchasingProductId: null,
+  purchaseSource: null,
+};
+
+export const usePurchaseLoadingStore = create<PurchaseLoadingStore>((set) => ({
+  ...initialState,
+
+  startPurchase: (productId, source) => {
+    if (__DEV__) {
+      console.log("[PurchaseLoadingStore] startPurchase:", { productId, source });
+    }
+    set({
+      isPurchasing: true,
+      purchasingProductId: productId,
+      purchaseSource: source,
+    });
+  },
+
+  endPurchase: () => {
+    if (__DEV__) {
+      console.log("[PurchaseLoadingStore] endPurchase");
+    }
+    set({
+      isPurchasing: false,
+      purchasingProductId: null,
+      purchaseSource: null,
+    });
+  },
+
+  reset: () => {
+    if (__DEV__) {
+      console.log("[PurchaseLoadingStore] reset");
+    }
+    set(initialState);
+  },
+}));
+
+// Selectors for optimized re-renders
+export const selectIsPurchasing = (state: PurchaseLoadingStore) => state.isPurchasing;
+export const selectPurchasingProductId = (state: PurchaseLoadingStore) => state.purchasingProductId;
+export const selectPurchaseSource = (state: PurchaseLoadingStore) => state.purchaseSource;

package/src/revenuecat/infrastructure/services/PurchaseHandler.ts

@@ -65,11 +65,26 @@ export async function handlePurchase(
 
     try {
         if (__DEV__) {
-            console.log('[DEBUG PurchaseHandler] Calling Purchases.purchasePackage...');
+            console.log('[DEBUG PurchaseHandler] Calling Purchases.purchasePackage...', {
+                productId: pkg.product.identifier,
+                packageIdentifier: pkg.identifier,
+                offeringIdentifier: pkg.offeringIdentifier,
+                timestamp: new Date().toISOString()
+            });
         }
+
+        const startTime = Date.now();
         const purchaseResult = await Purchases.purchasePackage(pkg);
+        const duration = Date.now() - startTime;
         const customerInfo = purchaseResult.customerInfo;
 
+        if (__DEV__) {
+            console.log('[DEBUG PurchaseHandler] Purchases.purchasePackage returned', {
+                duration: `${duration}ms`,
+                productId: pkg.product.identifier
+            });
+        }
+
         if (__DEV__) {
             console.log('[DEBUG PurchaseHandler] Purchase completed', {
                 productId: pkg.product.identifier,