@umituz/react-native-subscription 2.14.82 → 2.14.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.14.82",
+  "version": "2.14.83",
   "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,190 +1,57 @@
 /**
  * PaywallContainer Component
- * Package-driven paywall with mode-based filtering
- * Mode: credits | subscription | hybrid
  */
 
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import type { PurchasesPackage } from "react-native-purchases";
+import React, { useEffect, useMemo, useRef } from "react";
 import { usePaywallVisibility } from "../../../presentation/hooks/usePaywallVisibility";
 import { useSubscriptionPackages } from "../../../revenuecat/presentation/hooks/useSubscriptionPackages";
-import { usePurchasePackage } from "../../../revenuecat/presentation/hooks/usePurchasePackage";
-import { useRestorePurchase } from "../../../revenuecat/presentation/hooks/useRestorePurchase";
-import { SubscriptionManager } from "../../../revenuecat/infrastructure/managers/SubscriptionManager";
 import { filterPackagesByMode } from "../../../utils/packageFilter";
 import { createCreditAmountsFromPackages } from "../../../utils/creditMapper";
 import { PaywallModal } from "./PaywallModal";
+import { usePaywallActions } from "../hooks/usePaywallActions";
 import type { PaywallContainerProps } from "./PaywallContainer.types";
 
-declare const __DEV__: boolean;
 
-export const PaywallContainer: React.FC<PaywallContainerProps> = ({
-  userId,
-  isAnonymous = false,
-  translations,
-  mode = "subscription",
-  legalUrls,
-  features,
-  heroImage,
-  bestValueIdentifier,
-  creditsLabel,
-  creditAmounts,
-  packageFilterConfig,
-  onPurchaseSuccess,
-  onPurchaseError,
-  onAuthRequired,
-  visible,
-  onClose,
-}) => {
-  const { showPaywall: globalShowPaywall, closePaywall: globalClosePaywall } = usePaywallVisibility();
-  
-  const isVisible = visible !== undefined ? visible : globalShowPaywall;
-  const handleClose = onClose !== undefined ? onClose : globalClosePaywall;
 
-  const { data: allPackages = [], isLoading, isFetching, status, error } = useSubscriptionPackages(userId ?? undefined);
-  const { mutateAsync: purchasePackage } = usePurchasePackage(userId ?? undefined);
-  const { mutateAsync: restorePurchases } = useRestorePurchase(userId ?? undefined);
+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;
   
-  // Store pending package for post-auth purchase
-  const [pendingPackage, setPendingPackage] = useState<PurchasesPackage | null>(null);
-  const wasAnonymousRef = useRef(isAnonymous);
+  const { showPaywall, closePaywall } = usePaywallVisibility();
+  const isVisible = visible ?? showPaywall;
+  const handleClose = onClose ?? closePaywall;
 
-  const { filteredPackages, computedCreditAmounts } = useMemo(() => {
-    const filtered = filterPackagesByMode(allPackages, mode, packageFilterConfig);
-    const computed = mode !== "subscription" && !creditAmounts
-      ? createCreditAmountsFromPackages(allPackages)
-      : creditAmounts;
-    
-    return { filteredPackages: filtered, computedCreditAmounts: computed };
-  }, [allPackages, mode, packageFilterConfig, creditAmounts]);
+  const { data: allPackages = [], isLoading } = useSubscriptionPackages(userId ?? undefined);
+  const { handlePurchase, handleRestore, pendingPackage, setPendingPackage, purchasePackage } = usePaywallActions({
+    userId: userId ?? undefined, isAnonymous, onPurchaseSuccess, onPurchaseError, onAuthRequired, onClose: handleClose
+  });
 
-  useEffect(() => {
-    if (__DEV__ && isVisible) {
-      console.log("[PaywallContainer] Paywall opened:", {
-        userId,
-        isAnonymous,
-        mode,
-        isConfigured: SubscriptionManager.isConfigured(),
-        isInitialized: SubscriptionManager.isInitialized(),
-        allPackagesCount: allPackages.length,
-        filteredPackagesCount: filteredPackages.length,
-        computedCreditAmounts,
-        isLoading,
-        isFetching,
-        status,
-        error: error?.message ?? null,
-      });
-    }
-  }, [isVisible, userId, isAnonymous, mode, allPackages.length, filteredPackages.length, isLoading, isFetching, status, error]);
+  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 when user authenticates after selecting a package
+  // Auto-purchase after auth
   useEffect(() => {
-    const wasAnonymous = wasAnonymousRef.current;
+    const wasAuth = wasAnonymousRef.current && !isAnonymous;
     wasAnonymousRef.current = isAnonymous;
 
-    if (__DEV__) {
-      console.log("[PaywallContainer] Auth state check:", {
-        wasAnonymous,
-        isAnonymous,
-        hasPendingPackage: !!pendingPackage,
-        userId,
-        pendingPkgId: pendingPackage?.identifier,
-      });
-    }
-
-    // If user was anonymous, now authenticated, and has pending package
-    if (wasAnonymous && !isAnonymous && pendingPackage && userId) {
-      if (__DEV__) {
-        console.log("[PaywallContainer] User authenticated, auto-purchasing pending package:", pendingPackage.identifier);
-      }
-
-      // Execute the purchase
+    if (wasAuth && pendingPackage && userId) {
       (async () => {
         try {
-          const result = await purchasePackage(pendingPackage);
-          if (result.success) {
-            if (__DEV__) {
-              console.log("[PaywallContainer] Auto-purchase successful");
-            }
+          const res = await purchasePackage(pendingPackage);
+          if (res.success) {
             onPurchaseSuccess?.();
             handleClose();
           }
-        } catch (err) {
-          const message = err instanceof Error ? err.message : String(err);
-          if (__DEV__) {
-            console.error("[PaywallContainer] Auto-purchase failed:", message);
-          }
-          onPurchaseError?.(message);
-        } finally {
-          setPendingPackage(null);
-        }
+        } catch (err: any) {
+          onPurchaseError?.(err.message || String(err));
+        } finally { setPendingPackage(null); }
       })();
     }
-  }, [isAnonymous, userId, pendingPackage, purchasePackage, onPurchaseSuccess, onPurchaseError, handleClose]);
-
-  const handlePurchase = useCallback(
-    async (pkg: PurchasesPackage) => {
-      // Auth gating: require authentication for anonymous users
-      if (isAnonymous) {
-        if (__DEV__) {
-          console.log("[PaywallContainer] Anonymous user, storing package and requiring auth:", pkg.identifier);
-          console.log("[PaywallContainer] onAuthRequired is defined:", !!onAuthRequired);
-        }
-        // Store package for auto-purchase after auth
-        setPendingPackage(pkg);
-        // Don't close paywall - keep it open so user can purchase after auth
-        onAuthRequired?.();
-        return;
-      }
-
-      try {
-        if (__DEV__) {
-          console.log("[PaywallContainer] Purchase started:", pkg.identifier);
-        }
-        const result = await purchasePackage(pkg);
-        if (result.success) {
-          if (__DEV__) {
-            console.log("[PaywallContainer] Purchase successful");
-          }
-          onPurchaseSuccess?.();
-          handleClose();
-        }
-      } catch (err) {
-        const message = err instanceof Error ? err.message : String(err);
-        if (__DEV__) {
-          console.error("[PaywallContainer] Purchase failed:", message);
-        }
-        onPurchaseError?.(message);
-      }
-    },
-    [isAnonymous, purchasePackage, handleClose, onPurchaseSuccess, onPurchaseError, onAuthRequired, setPendingPackage]
-  );
-
-  const handleRestore = useCallback(async () => {
-    try {
-      if (__DEV__) {
-        console.log("[PaywallContainer] Restore started");
-      }
-      const result = await restorePurchases();
-      if (result.success) {
-        if (__DEV__) {
-          console.log("[PaywallContainer] Restore successful");
-        }
-        onPurchaseSuccess?.();
-        handleClose();
-      }
-    } catch (err) {
-      const message = err instanceof Error ? err.message : String(err);
-      if (__DEV__) {
-        console.error("[PaywallContainer] Restore failed:", message);
-      }
-      onPurchaseError?.(message);
-    }
-  }, [restorePurchases, handleClose, onPurchaseSuccess, onPurchaseError]);
+  }, [isAnonymous, userId, pendingPackage, purchasePackage, onPurchaseSuccess, onPurchaseError, handleClose, setPendingPackage]);
 
-  if (!isVisible) {
-    return null;
-  }
+  if (!isVisible) return null;
 
   return (
     <PaywallModal

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { View } from "react-native";
+import { AtomicText, AtomicIcon, useAppDesignTokens } from "@umituz/react-native-design-system";
+import type { SubscriptionFeature } from "../entities";
+import { paywallModalStyles as styles } from "./PaywallModal.styles";
+
+export const PaywallFeatures: React.FC<{ features: SubscriptionFeature[] }> = ({ features }) => {
+  const tokens = useAppDesignTokens();
+  if (!features.length) return null;
+
+  return (
+    <View style={[styles.features, { backgroundColor: tokens.colors.surfaceSecondary }]}>
+      {features.map((feature, idx) => (
+        <View key={idx} style={styles.featureRow}>
+          <View style={[styles.featureIcon, { backgroundColor: tokens.colors.primaryLight }]}>
+            <AtomicIcon name={feature.icon} customSize={16} customColor={tokens.colors.primary} />
+          </View>
+          <AtomicText type="bodyMedium" style={[styles.featureText, { color: tokens.colors.textPrimary }]}>
+            {feature.text}
+          </AtomicText>
+        </View>
+      ))}
+    </View>
+  );
+};

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

@@ -1,98 +1,51 @@
-/**
- * Paywall Footer
- * Action button and legal links
- */
-
 import React from "react";
-import { View, TouchableOpacity, StyleSheet, Linking } from "react-native";
-import { AtomicText, AtomicButton, useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, TouchableOpacity } from "react-native";
+import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import type { PaywallTranslations, PaywallLegalUrls } from "../entities";
+import { paywallModalStyles as styles } from "./PaywallModal.styles";
 
 interface PaywallFooterProps {
-    isProcessing: boolean;
-    isDisabled: boolean;
-    purchaseButtonText: string;
-    processingText: string;
-    restoreButtonText: string;
-    privacyText?: string;
-    termsText?: string;
-    privacyUrl?: string;
-    termsUrl?: string;
-    onPurchase: () => void;
-    onRestore: () => void;
+  translations: PaywallTranslations;
+  legalUrls: PaywallLegalUrls;
+  isProcessing: boolean;
+  onRestore?: () => Promise<void | boolean>;
+  onLegalClick: (url: string | undefined) => void;
 }
 
-export const PaywallFooter: React.FC<PaywallFooterProps> = React.memo(
-    ({
-        isProcessing,
-        isDisabled,
-        purchaseButtonText,
-        processingText,
-        restoreButtonText,
-        privacyText,
-        termsText,
-        privacyUrl,
-        termsUrl,
-        onPurchase,
-        onRestore,
-    }) => {
-        const tokens = useAppDesignTokens();
-
-        const handleOpenUrl = (url?: string) => {
-            if (url) Linking.openURL(url);
-        };
-
-        return (
-            <View style={styles.container}>
-                <AtomicButton
-                    title={isProcessing ? processingText : purchaseButtonText}
-                    onPress={onPurchase}
-                    disabled={isDisabled || isProcessing}
-                    variant="primary"
-                    size="lg"
-                    style={styles.purchaseButton}
-                />
-
-                <View style={styles.linksRow}>
-                    {termsText && termsUrl && (
-                        <TouchableOpacity onPress={() => handleOpenUrl(termsUrl)}>
-                            <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary }}>
-                                {termsText}
-                            </AtomicText>
-                        </TouchableOpacity>
-                    )}
-
-                    <TouchableOpacity onPress={onRestore}>
-                        <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary }}>
-                            {restoreButtonText}
-                        </AtomicText>
-                    </TouchableOpacity>
-
-                    {privacyText && privacyUrl && (
-                        <TouchableOpacity onPress={() => handleOpenUrl(privacyUrl)}>
-                            <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary }}>
-                                {privacyText}
-                            </AtomicText>
-                        </TouchableOpacity>
-                    )}
-                </View>
-            </View>
-        );
-    }
-);
-
-PaywallFooter.displayName = "PaywallFooter";
-
-const styles = StyleSheet.create({
-    container: {
-        paddingHorizontal: 24,
-        paddingBottom: 32,
-    },
-    purchaseButton: {
-        marginBottom: 16,
-    },
-    linksRow: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        paddingHorizontal: 8,
-    },
-});
+export const PaywallFooter: React.FC<PaywallFooterProps> = ({
+  translations,
+  legalUrls,
+  isProcessing,
+  onRestore,
+  onLegalClick,
+}) => {
+  const tokens = useAppDesignTokens();
+  
+  return (
+    <View style={styles.footer}>
+      {onRestore && (
+        <TouchableOpacity onPress={onRestore} disabled={isProcessing} style={[styles.restoreButton, isProcessing && styles.restoreButtonDisabled]}>
+          <AtomicText type="bodySmall" style={[styles.footerLink, { color: tokens.colors.textSecondary }]}>
+            {isProcessing ? translations.processingText : translations.restoreButtonText}
+          </AtomicText>
+        </TouchableOpacity>
+      )}
+      <View style={styles.legalRow}>
+        {legalUrls.termsUrl && (
+          <TouchableOpacity onPress={() => onLegalClick(legalUrls.termsUrl)}>
+            <AtomicText type="bodySmall" style={[styles.footerLink, { color: tokens.colors.textSecondary }]}>
+              {translations.termsOfServiceText}
+            </AtomicText>
+          </TouchableOpacity>
+        )}
+        {legalUrls.privacyUrl && (
+          <TouchableOpacity onPress={() => onLegalClick(legalUrls.privacyUrl)}>
+            <AtomicText type="bodySmall" style={[styles.footerLink, { color: tokens.colors.textSecondary }]}>
+              {translations.privacyText}
+            </AtomicText>
+          </TouchableOpacity>
+        )}
+      </View>
+    </View>
+  );
+};

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

@@ -1,7 +1,5 @@
 /**
  * Paywall Modal
- * Renders packages passed from PaywallContainer
- * Filtering is handled by PaywallContainer based on mode
  */
 
 import React, { useState, useCallback } from "react";
@@ -12,6 +10,8 @@ import type { PurchasesPackage } from "react-native-purchases";
 import { PlanCard } from "./PlanCard";
 import type { SubscriptionFeature, PaywallTranslations, PaywallLegalUrls } from "../entities";
 import { paywallModalStyles as styles } from "./PaywallModal.styles";
+import { PaywallFeatures } from "./PaywallFeatures";
+import { PaywallFooter } from "./PaywallFooter";
 
 export interface PaywallModalProps {
   visible: boolean;
@@ -30,22 +30,7 @@ export interface PaywallModalProps {
 }
 
 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 { 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);
@@ -56,41 +41,24 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
     try {
       const pkg = packages.find((p) => p.product.identifier === selectedPlanId);
       if (pkg) await onPurchase(pkg);
-    } finally {
-      setIsProcessing(false);
-    }
+    } finally { setIsProcessing(false); }
   }, [selectedPlanId, packages, onPurchase]);
 
   const handleRestore = useCallback(async () => {
     if (!onRestore || isProcessing) return;
     setIsProcessing(true);
-    try {
-      await onRestore();
-    } finally {
-      setIsProcessing(false);
-    }
+    try { await onRestore(); } finally { setIsProcessing(false); }
   }, [onRestore, isProcessing]);
 
   const handleLegalUrl = useCallback(async (url: string | undefined) => {
     if (!url) return;
-    try {
-      const supported = await Linking.canOpenURL(url);
-      if (supported) await Linking.openURL(url);
-    } catch {
-      // Silent fail
-    }
+    try { if (await Linking.canOpenURL(url)) await Linking.openURL(url); } catch { /* Silent fail */ }
   }, []);
 
-  const isPurchaseDisabled = !selectedPlanId;
-
   return (
     <BaseModal visible={visible} onClose={onClose} contentStyle={styles.modalContent}>
       <View style={[styles.container, { backgroundColor: tokens.colors.surface }]}>
-        <TouchableOpacity
-          onPress={onClose}
-          style={[styles.closeBtn, { backgroundColor: tokens.colors.surfaceSecondary }]}
-          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-        >
+        <TouchableOpacity onPress={onClose} style={[styles.closeBtn, { backgroundColor: tokens.colors.surfaceSecondary }]} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
           <AtomicIcon name="close-outline" size="md" customColor={tokens.colors.textPrimary} />
         </TouchableOpacity>
 
@@ -102,35 +70,14 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
           )}
 
           <View style={styles.header}>
-            <AtomicText type="headlineMedium" style={[styles.title, { color: tokens.colors.textPrimary }]}>
-              {translations.title}
-            </AtomicText>
-            {translations.subtitle && (
-              <AtomicText type="bodyMedium" style={[styles.subtitle, { color: tokens.colors.textSecondary }]}>
-                {translations.subtitle}
-              </AtomicText>
-            )}
+            <AtomicText type="headlineMedium" style={[styles.title, { color: tokens.colors.textPrimary }]}>{translations.title}</AtomicText>
+            {translations.subtitle && <AtomicText type="bodyMedium" style={[styles.subtitle, { color: tokens.colors.textSecondary }]}>{translations.subtitle}</AtomicText>}
           </View>
 
-          {features.length > 0 && (
-            <View style={[styles.features, { backgroundColor: tokens.colors.surfaceSecondary }]}>
-              {features.map((feature, idx) => (
-                <View key={idx} style={styles.featureRow}>
-                  <View style={[styles.featureIcon, { backgroundColor: tokens.colors.primaryLight }]}>
-                    <AtomicIcon name={feature.icon} customSize={16} customColor={tokens.colors.primary} />
-                  </View>
-                  <AtomicText type="bodyMedium" style={[styles.featureText, { color: tokens.colors.textPrimary }]}>
-                    {feature.text}
-                  </AtomicText>
-                </View>
-              ))}
-            </View>
-          )}
+          <PaywallFeatures features={features} />
 
           {isLoading ? (
-            <View style={styles.loading}>
-              <AtomicSpinner size="lg" color="primary" text={translations.loadingText} />
-            </View>
+            <View style={styles.loading}><AtomicSpinner size="lg" color="primary" text={translations.loadingText} /></View>
           ) : (
             <View style={styles.plans}>
               {packages.map((pkg) => (
@@ -149,12 +96,8 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
 
           <TouchableOpacity
             onPress={handlePurchase}
-            disabled={isPurchaseDisabled || isProcessing}
-            style={[
-              styles.cta,
-              { backgroundColor: tokens.colors.primary },
-              (isPurchaseDisabled || isProcessing) && styles.ctaDisabled,
-            ]}
+            disabled={!selectedPlanId || isProcessing}
+            style={[styles.cta, { backgroundColor: tokens.colors.primary }, (!selectedPlanId || isProcessing) && styles.ctaDisabled]}
             activeOpacity={0.8}
           >
             <AtomicText type="titleLarge" style={[styles.ctaText, { color: tokens.colors.onPrimary }]}>
@@ -162,35 +105,7 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
             </AtomicText>
           </TouchableOpacity>
 
-          <View style={styles.footer}>
-            {onRestore && (
-              <TouchableOpacity
-                onPress={handleRestore}
-                disabled={isProcessing}
-                style={[styles.restoreButton, isProcessing && styles.restoreButtonDisabled]}
-              >
-                <AtomicText type="bodySmall" style={[styles.footerLink, { color: tokens.colors.textSecondary }]}>
-                  {isProcessing ? translations.processingText : translations.restoreButtonText}
-                </AtomicText>
-              </TouchableOpacity>
-            )}
-            <View style={styles.legalRow}>
-              {legalUrls.termsUrl && (
-                <TouchableOpacity onPress={() => handleLegalUrl(legalUrls.termsUrl)}>
-                  <AtomicText type="bodySmall" style={[styles.footerLink, { color: tokens.colors.textSecondary }]}>
-                    {translations.termsOfServiceText}
-                  </AtomicText>
-                </TouchableOpacity>
-              )}
-              {legalUrls.privacyUrl && (
-                <TouchableOpacity onPress={() => handleLegalUrl(legalUrls.privacyUrl)}>
-                  <AtomicText type="bodySmall" style={[styles.footerLink, { color: tokens.colors.textSecondary }]}>
-                    {translations.privacyText}
-                  </AtomicText>
-                </TouchableOpacity>
-              )}
-            </View>
-          </View>
+          <PaywallFooter translations={translations} legalUrls={legalUrls} isProcessing={isProcessing} onRestore={onRestore ? handleRestore : undefined} onLegalClick={handleLegalUrl} />
         </ScrollView>
       </View>
     </BaseModal>

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

@@ -0,0 +1,63 @@
+import { useCallback, useState } from "react";
+import type { PurchasesPackage } from "react-native-purchases";
+import { usePurchasePackage } from "../../../revenuecat/presentation/hooks/usePurchasePackage";
+import { useRestorePurchase } from "../../../revenuecat/presentation/hooks/useRestorePurchase";
+
+declare const __DEV__: boolean;
+
+interface UsePaywallActionsProps {
+  userId?: string;
+  isAnonymous: boolean;
+  onPurchaseSuccess?: () => void;
+  onPurchaseError?: (error: string) => void;
+  onAuthRequired?: () => void;
+  onClose: () => void;
+}
+
+export const usePaywallActions = ({
+  userId,
+  isAnonymous,
+  onPurchaseSuccess,
+  onPurchaseError,
+  onAuthRequired,
+  onClose,
+}: UsePaywallActionsProps) => {
+  const { mutateAsync: purchasePackage } = usePurchasePackage(userId);
+  const { mutateAsync: restorePurchases } = useRestorePurchase(userId);
+  const [pendingPackage, setPendingPackage] = useState<PurchasesPackage | null>(null);
+
+  const handlePurchase = useCallback(async (pkg: PurchasesPackage) => {
+    if (isAnonymous) {
+      if (__DEV__) console.log("[PaywallActions] Anonymous user, storing package:", pkg.identifier);
+      setPendingPackage(pkg);
+      onAuthRequired?.();
+      return;
+    }
+
+    try {
+      if (__DEV__) console.log("[PaywallActions] Purchase started:", pkg.identifier);
+      const res = await purchasePackage(pkg);
+      if (res.success) {
+        onPurchaseSuccess?.();
+        onClose();
+      }
+    } catch (err: any) {
+      onPurchaseError?.(err.message || String(err));
+    }
+  }, [isAnonymous, purchasePackage, onClose, onPurchaseSuccess, onPurchaseError, onAuthRequired]);
+
+  const handleRestore = useCallback(async () => {
+    try {
+      if (__DEV__) console.log("[PaywallActions] Restore started");
+      const res = await restorePurchases();
+      if (res.success) {
+        onPurchaseSuccess?.();
+        onClose();
+      }
+    } catch (err: any) {
+      onPurchaseError?.(err.message || String(err));
+    }
+  }, [restorePurchases, onClose, onPurchaseSuccess, onPurchaseError]);
+
+  return { handlePurchase, handleRestore, pendingPackage, setPendingPackage, purchasePackage };
+};