@umituz/react-native-subscription 2.2.22 → 2.2.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.2.22",
+  "version": "2.2.24",
   "description": "Complete subscription management with RevenueCat, paywall UI, and credits system for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -27,28 +27,33 @@
     "url": "git+https://github.com/umituz/react-native-subscription.git"
   },
   "peerDependencies": {
-    "react": ">=18.2.0",
-    "react-native": ">=0.74.0",
-    "react-native-purchases": ">=8.0.0",
-    "react-native-safe-area-context": ">=4.0.0",
     "@tanstack/react-query": ">=5.0.0",
-    "@umituz/react-native-firestore": "*",
     "@umituz/react-native-design-system-atoms": "*",
     "@umituz/react-native-design-system-theme": "*",
+    "@umituz/react-native-firestore": "*",
     "@umituz/react-native-legal": "*",
+    "expo-constants": ">=18.0.0",
     "firebase": ">=10.0.0",
-    "expo-constants": ">=18.0.0"
+    "react": ">=18.2.0",
+    "react-native": ">=0.74.0",
+    "react-native-purchases": ">=8.0.0",
+    "react-native-safe-area-context": ">=4.0.0"
   },
   "devDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "@types/node": "^25.0.3",
     "@types/react": "~19.1.0",
-    "typescript": "~5.9.2",
-    "react-native": "~0.76.0",
+    "@umituz/react-native-design-system-atoms": "^1.19.0",
     "@umituz/react-native-design-system-theme": "latest",
     "@umituz/react-native-firestore": "latest",
-    "@tanstack/react-query": "^5.0.0",
-    "firebase": "^11.0.0",
+    "@umituz/react-native-legal": "^2.1.2",
+    "@umituz/react-native-localization": "^3.5.8",
     "expo-constants": "~18.0.0",
-    "react-native-purchases": "~9.6.0"
+    "firebase": "^11.0.0",
+    "react-native": "~0.76.0",
+    "react-native-purchases": "~9.6.0",
+    "react-native-safe-area-context": "^5.6.2",
+    "typescript": "~5.9.2"
   },
   "publishConfig": {
     "access": "public"
@@ -58,4 +63,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/src/presentation/components/paywall/SubscriptionModal.tsx

@@ -3,7 +3,7 @@
  * Orchestrates subscription flow using decomposed components
  */
 
-import React, { useState, useCallback } from "react";
+import React from "react";
 import { View, StyleSheet, ScrollView } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
@@ -14,6 +14,7 @@ import { SubscriptionModalOverlay, SubscriptionModalVariant } from "./Subscripti
 import { PaywallFeaturesList } from "./PaywallFeaturesList";
 import { SubscriptionPackageList } from "./SubscriptionPackageList";
 import { SubscriptionFooter } from "./SubscriptionFooter";
+import { useSubscriptionModal } from "../../hooks/useSubscriptionModal";
 
 export interface SubscriptionModalProps {
   visible: boolean;
@@ -64,37 +65,17 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
   } = props;
 
   const tokens = useAppDesignTokens();
-  const [selectedPkg, setSelectedPkg] = useState<PurchasesPackage | null>(null);
-  const [isProcessing, setIsProcessing] = useState(false);
-
-  if (__DEV__ && visible) {
-    console.log("[SubscriptionModal] Props Info:", {
-      packagesCount: packages.length,
-      featuresCount: features.length,
-      variant,
-      hasPrivacyUrl: !!privacyUrl,
-    });
-  }
-
-  const handlePurchase = useCallback(async () => {
-    if (!selectedPkg || isProcessing) return;
-    setIsProcessing(true);
-    try {
-      if (await onPurchase(selectedPkg)) onClose();
-    } finally {
-      setIsProcessing(false);
-    }
-  }, [selectedPkg, isProcessing, onPurchase, onClose]);
-
-  const handleRestore = useCallback(async () => {
-    if (isProcessing) return;
-    setIsProcessing(true);
-    try {
-      if (await onRestore()) onClose();
-    } finally {
-      setIsProcessing(false);
-    }
-  }, [isProcessing, onRestore, onClose]);
+  const {
+    selectedPkg,
+    setSelectedPkg,
+    isProcessing,
+    handlePurchase,
+    handleRestore,
+  } = useSubscriptionModal({
+    onPurchase,
+    onRestore,
+    onClose,
+  });
 
   if (!visible) return null;
 

package/src/presentation/hooks/useSubscriptionModal.ts

@@ -0,0 +1,45 @@
+import { useState, useCallback } from "react";
+import type { PurchasesPackage } from "react-native-purchases";
+
+interface UseSubscriptionModalProps {
+    onPurchase: (pkg: PurchasesPackage) => Promise<boolean>;
+    onRestore: () => Promise<boolean>;
+    onClose: () => void;
+}
+
+export const useSubscriptionModal = ({
+    onPurchase,
+    onRestore,
+    onClose,
+}: UseSubscriptionModalProps) => {
+    const [selectedPkg, setSelectedPkg] = useState<PurchasesPackage | null>(null);
+    const [isProcessing, setIsProcessing] = useState(false);
+
+    const handlePurchase = useCallback(async () => {
+        if (!selectedPkg || isProcessing) return;
+        setIsProcessing(true);
+        try {
+            if (await onPurchase(selectedPkg)) onClose();
+        } finally {
+            setIsProcessing(false);
+        }
+    }, [selectedPkg, isProcessing, onPurchase, onClose]);
+
+    const handleRestore = useCallback(async () => {
+        if (isProcessing) return;
+        setIsProcessing(true);
+        try {
+            if (await onRestore()) onClose();
+        } finally {
+            setIsProcessing(false);
+        }
+    }, [isProcessing, onRestore, onClose]);
+
+    return {
+        selectedPkg,
+        setSelectedPkg,
+        isProcessing,
+        handlePurchase,
+        handleRestore,
+    };
+};