@umituz/react-native-subscription 2.39.10 → 2.39.11

package/package.json

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

@@ -20,6 +20,7 @@ import { Image } from "expo-image";
 import { PlanCard } from "./PlanCard";
 import { paywallScreenStyles as styles } from "./PaywallScreen.styles";
 import { PaywallFooter } from "./PaywallFooter";
+import { PurchaseLoadingOverlay } from "../../subscription/presentation/components/overlay/PurchaseLoadingOverlay";
 import { usePaywallActions } from "../hooks/usePaywallActions";
 import { PaywallScreenProps } from "./PaywallScreen.types";
 import { 
@@ -50,7 +51,14 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
 
-  const { selectedPlanId, setSelectedPlanId, isProcessing, handlePurchase, handleRestore } = usePaywallActions({
+  const { 
+    selectedPlanId, 
+    setSelectedPlanId, 
+    isProcessing, 
+    handlePurchase, 
+    handleRestore,
+    resetState
+  } = usePaywallActions({
     packages,
     onPurchase,
     onRestore,
@@ -61,6 +69,13 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
     onClose
   });
 
+  // Reset state when screen is closed to avoid lockups
+  useEffect(() => {
+    return () => {
+      resetState();
+    };
+  }, [resetState]);
+
   // Auto-select first package
   useEffect(() => {
     if (packages.length > 0 && !selectedPlanId) {

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

@@ -6,13 +6,18 @@ import { formatPriceWithPeriod } from '../../../utils/priceUtils';
 import { PlanCardProps } from "./PlanCard.types";
 
 export const PlanCard: React.FC<PlanCardProps> = React.memo(
-  ({ pkg, isSelected, onSelect, badge, creditAmount, creditsLabel }) => {
+  ({ pkg, isSelected, onSelect, badge, creditAmount, creditsLabel, disabled }) => {
     const tokens = useAppDesignTokens();
     const title = pkg.product.title;
     const price = formatPriceWithPeriod(pkg.product.price, pkg.product.currencyCode, pkg.identifier);
 
     return (
-      <TouchableOpacity onPress={onSelect} activeOpacity={0.7} style={styles.touchable}>
+      <TouchableOpacity 
+        onPress={onSelect} 
+        disabled={disabled}
+        activeOpacity={0.7} 
+        style={[styles.touchable, disabled && { opacity: 0.8 }]}
+      >
         <View style={[styles.container, { 
           backgroundColor: tokens.colors.surface, 
           borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,

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

@@ -5,6 +5,7 @@ export interface PlanCardProps {
     isSelected: boolean;
     onSelect: () => void;
     badge?: string;
-    creditAmount?: number;
+    creditAmount?: number | null;
     creditsLabel?: string;
-}
+    disabled?: boolean;
+    }