@umituz/react-native-subscription 3.1.20 → 3.1.22

package/package.json

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { View, TouchableOpacity } from "react-native";
-import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { AtomicText, AtomicSpinner } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import type { PaywallTranslations, PaywallLegalUrls } from "../entities/types";
 import { paywallScreenStyles as styles } from "./PaywallScreen.styles";
@@ -9,21 +9,47 @@ interface PaywallFooterProps {
   translations: PaywallTranslations;
   legalUrls: PaywallLegalUrls;
   isProcessing: boolean;
+  onPurchase?: () => void | Promise<void>;
   onRestore?: () => Promise<void | boolean>;
   onLegalClick: (url: string | undefined) => void;
+  purchaseButtonText?: string;
 }
 
 export const PaywallFooter: React.FC<PaywallFooterProps> = React.memo(({
   translations,
   legalUrls,
   isProcessing,
+  onPurchase,
   onRestore,
   onLegalClick,
+  purchaseButtonText,
 }) => {
   const tokens = useAppDesignTokens();
-  
+
   return (
     <View style={styles.footer}>
+      {/* Purchase Button */}
+      {onPurchase && (
+        <TouchableOpacity
+          onPress={onPurchase}
+          disabled={isProcessing}
+          style={[
+            styles.purchaseButton,
+            isProcessing && styles.ctaDisabled,
+            { backgroundColor: tokens.colors.primary }
+          ]}
+        >
+          {isProcessing ? (
+            <AtomicSpinner size="sm" />
+          ) : (
+            <AtomicText type="body" style={[styles.purchaseButtonText, { color: tokens.colors.textPrimary }]}>
+              {purchaseButtonText || translations.purchaseButtonText}
+            </AtomicText>
+          )}
+        </TouchableOpacity>
+      )}
+
+      {/* Restore Button */}
       {onRestore && (
         <TouchableOpacity onPress={onRestore} disabled={isProcessing} style={[styles.restoreButton, isProcessing && styles.ctaDisabled]}>
           <AtomicText type="bodySmall" style={[styles.footerLink, { color: tokens.colors.textSecondary }]}>
@@ -31,6 +57,8 @@ export const PaywallFooter: React.FC<PaywallFooterProps> = React.memo(({
           </AtomicText>
         </TouchableOpacity>
       )}
+
+      {/* Legal Links */}
       <View style={styles.legalRow}>
         {legalUrls.termsUrl && (
           <TouchableOpacity onPress={() => onLegalClick(legalUrls.termsUrl)}>

package/src/domains/paywall/components/PaywallScreen.styles.ts

@@ -123,9 +123,43 @@ export const paywallScreenStyles = StyleSheet.create({
 
   // Footer Links
   footer: {
-    marginTop: 16,
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingHorizontal: 24,
+    paddingTop: 20,
+    paddingBottom: 40,
+    borderTopWidth: 1,
+    borderTopColor: "rgba(255, 255, 255, 0.08)",
+    ...Platform.select({
+      ios: {
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: -4 },
+        shadowOpacity: 0.1,
+        shadowRadius: 12,
+      },
+      android: {
+        elevation: 8,
+      },
+    }),
+  },
+  purchaseButton: {
+    borderRadius: 18,
+    height: 60,
+    justifyContent: "center",
     alignItems: "center",
-    gap: 12,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 6,
+    marginBottom: 16,
+  },
+  purchaseButtonText: {
+    fontWeight: "700",
+    letterSpacing: 0.5,
+    fontSize: 16,
   },
   restoreButton: {
     paddingVertical: 4,

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

@@ -75,6 +75,7 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
     selectedPlanId,
     setSelectedPlanId,
     isProcessing,
+    handlePurchase,
     handleRestore,
     resetState
   } = usePaywallActions({
@@ -88,19 +89,23 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
     onClose: handleClose
   });
 
+  // Cleanup on unmount only - resetState is stable from useCallback
   useEffect(() => {
     return () => {
       if (__DEV__) console.log('[PaywallScreen] 🧹 Cleanup: resetting state');
       resetState();
     };
-  }, [resetState]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   // Auto-select first package
   useEffect(() => {
     if (hasItems(packages) && !selectedPlanId) {
       setSelectedPlanId(packages[0].product.identifier);
     }
-  }, [packages, selectedPlanId, setSelectedPlanId]);
+    // setSelectedPlanId is stable from useState, packages.length is sufficient
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [packages?.length, selectedPlanId]);
 
   const handleLegalUrl = useCallback(async (url: string | undefined) => {
     if (!url) return;
@@ -227,6 +232,7 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
         translations={translations}
         legalUrls={legalUrls}
         isProcessing={isProcessing}
+        onPurchase={handlePurchase}
         onRestore={handleRestore}
         onLegalClick={handleLegalUrl}
       />

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

@@ -5,7 +5,7 @@
  * Handlers extracted to separate modules for better maintainability.
  */
 
-import { useState, useRef, useMemo } from "react";
+import { useState, useRef, useMemo, useCallback } from "react";
 import type { UsePaywallActionsParams } from "./usePaywallActions.types";
 import { usePurchaseHandler } from "./usePaywallPurchase";
 import { useRestoreHandler } from "./usePaywallRestore";
@@ -59,14 +59,14 @@ export function usePaywallActions({
     callbacksRef,
   });
 
-  // Reset state
-  const resetState = () => {
+  // Reset state - memoized with useCallback to prevent infinite loops
+  const resetState = useCallback(() => {
     if (__DEV__) {
       console.log('[usePaywallActions] 🧹 Resetting state');
     }
     setSelectedPlanId(null);
     setIsProcessing(false);
-  };
+  }, []);
 
   // Return API
   return useMemo(() => ({
@@ -76,5 +76,5 @@ export function usePaywallActions({
     handlePurchase,
     handleRestore,
     resetState,
-  }), [selectedPlanId, isProcessing, handlePurchase, handleRestore]);
+  }), [selectedPlanId, isProcessing, handlePurchase, handleRestore, resetState]);
 }