@umituz/react-native-subscription 2.44.0 → 2.45.0

package/package.json

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

@@ -0,0 +1,115 @@
+/**
+ * PaywallScreen Render Item Component
+ * Separated for better maintainability
+ */
+
+import React from "react";
+import { View, ListRenderItem } from "react-native";
+import type { ImageSourcePropType } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { Image } from "expo-image";
+import { PlanCard } from "./PlanCard";
+import type { PaywallListItem } from "../utils/paywallLayoutUtils";
+import { paywallScreenStyles as styles } from "./PaywallScreen.styles";
+
+interface PaywallRenderItemProps {
+  item: PaywallListItem;
+  tokens: any;
+  translations: any;
+  heroImage?: ImageSourcePropType;
+  selectedPlanId?: string;
+  bestValueIdentifier?: string;
+  creditAmounts?: Record<string, number>;
+  creditsLabel?: string;
+  onSelectPlan?: (planId: string) => void;
+}
+
+export const PaywallRenderItem: React.FC<PaywallRenderItemProps> = React.memo(({
+  item,
+  tokens,
+  translations,
+  heroImage,
+  selectedPlanId,
+  bestValueIdentifier,
+  creditAmounts,
+  creditsLabel,
+  onSelectPlan,
+}) => {
+  if (!translations) return null;
+
+  switch (item.type) {
+    case 'HEADER':
+      return (
+        <View key="header">
+          {/* Hero Image */}
+          {heroImage && (
+            <View style={styles.heroContainer}>
+              <Image source={heroImage} style={styles.heroImage} contentFit="cover" transition={200} />
+            </View>
+          )}
+
+          {/* Header Text */}
+          <View style={styles.header}>
+            <AtomicText type="headlineLarge" 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>
+        </View>
+      );
+
+    case 'FEATURE_HEADER':
+      return (
+        <View key="feat-header" style={styles.sectionHeader}>
+          <AtomicText type="labelLarge" style={[styles.sectionTitle, { color: tokens.colors.textSecondary }]}>
+            {translations.featuresTitle || "WHAT'S INCLUDED"}
+          </AtomicText>
+        </View>
+      );
+
+    case 'FEATURE':
+      return (
+        <View key={`feat-${item.feature.text}`} style={[styles.featureRow, { marginHorizontal: 24, marginBottom: 16 }]}>
+          <View style={[styles.featureIcon, { backgroundColor: tokens.colors.primary }]}>
+            <AtomicIcon name={item.feature.icon} customSize={16} customColor={tokens.colors.onPrimary} />
+          </View>
+          <AtomicText type="bodyMedium" style={[styles.featureText, { color: tokens.colors.textPrimary }]}>
+            {item.feature.text}
+          </AtomicText>
+        </View>
+      );
+
+    case 'PLAN_HEADER':
+      return (
+        <View key="plan-header" style={styles.sectionHeader}>
+          <AtomicText type="labelLarge" style={[styles.sectionTitle, { color: tokens.colors.textSecondary }]}>
+            {translations.plansTitle || "CHOOSE YOUR PLAN"}
+          </AtomicText>
+        </View>
+      );
+
+    case 'PLAN': {
+      const pid = item.pkg.product.identifier;
+      return (
+        <PlanCard
+          key={pid}
+          pkg={item.pkg}
+          isSelected={selectedPlanId === pid}
+          badge={bestValueIdentifier === pid ? translations.bestValueBadgeText : undefined}
+          creditAmount={creditAmounts?.[pid]}
+          creditsLabel={creditsLabel}
+          onSelect={() => onSelectPlan?.(pid)}
+        />
+      );
+    }
+
+    default:
+      return null;
+  }
+});
+
+PaywallRenderItem.displayName = "PaywallRenderItem";

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

@@ -2,6 +2,7 @@
  * Paywall Screen Component
  *
  * Full-screen paywall with optimized FlatList for performance and modern design.
+ * Render logic separated to PaywallScreen.renderItem.tsx for better maintainability.
  */
 
 import React, { useCallback, useEffect, useMemo } from "react";
@@ -14,11 +15,9 @@ import {
   StatusBar,
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
-import { AtomicText, AtomicIcon, AtomicSpinner } from "@umituz/react-native-design-system/atoms";
+import { AtomicIcon, AtomicSpinner } from "@umituz/react-native-design-system/atoms";
 import { useSafeAreaInsets } from "@umituz/react-native-design-system/safe-area";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import { Image } from "expo-image";
-import { PlanCard } from "./PlanCard";
 import { paywallScreenStyles as styles } from "./PaywallScreen.styles";
 import { PaywallFooter } from "./PaywallFooter";
 import { usePaywallActions } from "../hooks/usePaywallActions";
@@ -28,6 +27,7 @@ import {
   type PaywallListItem
 } from "../utils/paywallLayoutUtils";
 import { hasItems } from "../../../shared/utils/arrayUtils";
+import { PaywallRenderItem } from "./PaywallScreen.renderItem";
 
 export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) => {
   const navigation = useNavigation();
@@ -115,7 +115,7 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
   // Prepare flat data for the list
   const flatData = useMemo(() => {
     const data: PaywallListItem[] = [];
-    
+
     // 1. Header (Hero, Title, Subtitle)
     data.push({ type: 'HEADER' });
 
@@ -139,82 +139,20 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
   }, [features, packages]);
 
   const renderItem: ListRenderItem<PaywallListItem> = useCallback(({ item }) => {
-    if (!translations) return null;
-    switch (item.type) {
-      case 'HEADER':
-        return (
-          <View key="header">
-            {/* Hero Image */}
-            {heroImage && (
-              <View style={styles.heroContainer}>
-                <Image source={heroImage} style={styles.heroImage} contentFit="cover" transition={200} />
-              </View>
-            )}
-
-            {/* Header Text */}
-            <View style={styles.header}>
-              <AtomicText type="headlineLarge" 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>
-          </View>
-        );
-
-      case 'FEATURE_HEADER':
-        return (
-          <View key="feat-header" style={styles.sectionHeader}>
-            <AtomicText type="labelLarge" style={[styles.sectionTitle, { color: tokens.colors.textSecondary }]}>
-              {translations.featuresTitle || "WHAT'S INCLUDED"}
-            </AtomicText>
-          </View>
-        );
-
-      case 'FEATURE':
-        return (
-          <View key={`feat-${item.feature.text}`} style={[styles.featureRow, { marginHorizontal: 24, marginBottom: 16 }]}>
-            <View style={[styles.featureIcon, { backgroundColor: tokens.colors.primary }]}>
-              <AtomicIcon name={item.feature.icon} customSize={16} customColor={tokens.colors.onPrimary} />
-            </View>
-            <AtomicText type="bodyMedium" style={[styles.featureText, { color: tokens.colors.textPrimary }]}>
-              {item.feature.text}
-            </AtomicText>
-          </View>
-        );
-
-      case 'PLAN_HEADER':
-        return (
-          <View key="plan-header" style={styles.sectionHeader}>
-            <AtomicText type="labelLarge" style={[styles.sectionTitle, { color: tokens.colors.textSecondary }]}>
-              {translations.plansTitle || "CHOOSE YOUR PLAN"}
-            </AtomicText>
-          </View>
-        );
-
-      case 'PLAN': {
-        const pid = item.pkg.product.identifier;
-        return (
-          <PlanCard
-            key={pid}
-            pkg={item.pkg}
-            isSelected={selectedPlanId === pid}
-            badge={bestValueIdentifier === pid ? translations.bestValueBadgeText : undefined}
-            creditAmount={creditAmounts?.[pid]}
-            creditsLabel={creditsLabel}
-            onSelect={() => setSelectedPlanId(pid)}
-          />
-        );
-      }
-
-      default:
-        return null;
-    }
-  }, [heroImage, translations, tokens, selectedPlanId, bestValueIdentifier, creditAmounts, creditsLabel, setSelectedPlanId]);
-
+    return (
+      <PaywallRenderItem
+        item={item}
+        tokens={tokens}
+        translations={translations}
+        heroImage={heroImage}
+        selectedPlanId={selectedPlanId}
+        bestValueIdentifier={bestValueIdentifier}
+        creditAmounts={creditAmounts}
+        creditsLabel={creditsLabel}
+        onSelectPlan={setSelectedPlanId}
+      />
+    );
+  }, [tokens, translations, heroImage, selectedPlanId, bestValueIdentifier, creditAmounts, creditsLabel, setSelectedPlanId]);
 
   // Performance Optimization: getItemLayout for FlatList
   const getItemLayout = useCallback((_data: ArrayLike<PaywallListItem> | null, index: number) => {
@@ -227,12 +165,13 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
     return `${item.type}-${index}`;
   }, []);
 
-  // Defensive check for translations moved to the end of hooks
+  // Defensive check for translations
   if (!translations) {
     if (__DEV__) console.warn("[PaywallScreen] Translations prop is missing");
     return null;
   }
 
+  // Loading state
   if (isSyncing) {
     return (
       <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary, paddingTop: insets.top }]}>
@@ -246,12 +185,12 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
   return (
     <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
       <StatusBar barStyle="light-content" />
-      
+
       {/* Absolute Close Button */}
-      <View style={{ 
-        position: 'absolute', 
-        top: Math.max(insets.top, 16), 
-        right: 0, 
+      <View style={{
+        position: 'absolute',
+        top: Math.max(insets.top, 16),
+        right: 0,
         zIndex: 10,
       }}>
         <TouchableOpacity
@@ -275,46 +214,29 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
         maxToRenderPerBatch={10}
         updateCellsBatchingPeriod={50}
         contentContainerStyle={[
-          styles.listContent, 
-          { 
+          styles.listContent,
+          {
             paddingTop: Math.max(insets.top, 20) + 40,
-            paddingBottom: 220 
+            paddingBottom: 220
           }
         ]}
         showsVerticalScrollIndicator={false}
       />
 
       {/* Fixed Footer */}
-      <View style={[
-        styles.stickyFooter, 
-        { 
-          backgroundColor: tokens.colors.backgroundPrimary,
-          paddingBottom: Math.max(insets.bottom, 24)
-        }
-      ]}>
-        <TouchableOpacity
-          onPress={handlePurchase}
-          disabled={isProcessing || !selectedPlanId}
-          style={[
-            styles.cta,
-            { backgroundColor: tokens.colors.primary },
-            (isProcessing || !selectedPlanId) && styles.ctaDisabled
-          ]}
-          activeOpacity={0.8}
-        >
-          <AtomicText type="titleLarge" style={[styles.ctaText, { color: tokens.colors.onPrimary }]}>
-            {isProcessing ? translations.processingText : translations.purchaseButtonText}
-          </AtomicText>
-        </TouchableOpacity>
-
-        <PaywallFooter
-          translations={translations}
-          legalUrls={legalUrls}
-          isProcessing={isProcessing}
-          onRestore={handleRestore}
-          onLegalClick={handleLegalUrl}
-        />
-      </View>
+      <PaywallFooter
+        translations={translations}
+        legalUrls={legalUrls}
+        isProcessing={isProcessing}
+        selectedPlanId={selectedPlanId}
+        packages={packages}
+        onPurchase={handlePurchase}
+        onRestore={handleRestore}
+        onLegalUrl={handleLegalUrl}
+        insets={insets}
+        tokens={tokens}
+        styles={styles}
+      />
     </View>
   );
 });

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

@@ -1,14 +1,19 @@
+/**
+ * Paywall Actions Hook
+ *
+ * Handles purchase and restore operations with premium verification.
+ * Ref management and success checking extracted to utilities.
+ */
+
 import { useState, useCallback, useRef, useMemo } from "react";
 import type { PurchasesPackage } from "react-native-purchases";
-import type { PurchaseSource } from "../../subscription/core/SubscriptionConstants";
-import { useSubscriptionStatus } from "../../subscription/presentation/useSubscriptionStatus";
-import { useCredits } from "../../credits/presentation/useCredits";
+import { usePremiumVerification } from "./usePaywallActions.utils";
 
 interface UsePaywallActionsParams {
   packages?: PurchasesPackage[];
   purchasePackage: (pkg: PurchasesPackage) => Promise<boolean>;
   restorePurchase: () => Promise<boolean>;
-  source?: PurchaseSource;
+  source?: string; // PurchaseSource
   onPurchaseSuccess?: () => void;
   onPurchaseError?: (error: Error | string) => void;
   onAuthRequired?: () => void;
@@ -30,34 +35,42 @@ export function usePaywallActions({
   const isProcessingRef = useRef(isProcessing);
   isProcessingRef.current = isProcessing;
 
-  const { refetch: refetchStatus } = useSubscriptionStatus();
-  const { refetch: refetchCredits } = useCredits();
-
-  const purchasePackageRef = useRef(purchasePackage);
-  const restorePurchaseRef = useRef(restorePurchase);
-  const onPurchaseSuccessRef = useRef(onPurchaseSuccess);
-  const onPurchaseErrorRef = useRef(onPurchaseError);
-  const onAuthRequiredRef = useRef(onAuthRequired);
-  const onCloseRef = useRef(onClose);
-  const packagesRef = useRef(packages);
-
-  purchasePackageRef.current = purchasePackage;
-  restorePurchaseRef.current = restorePurchase;
-  onPurchaseSuccessRef.current = onPurchaseSuccess;
-  onPurchaseErrorRef.current = onPurchaseError;
-  onAuthRequiredRef.current = onAuthRequired;
-  onCloseRef.current = onClose;
-  packagesRef.current = packages;
+  const { verifyPremiumStatus } = usePremiumVerification();
+
+  // Ref management
+  const callbacksRef = useRef({
+    purchasePackage,
+    restorePurchase,
+    onPurchaseSuccess,
+    onPurchaseError,
+    onAuthRequired,
+    onClose,
+    packages,
+  });
+
+  // Update refs
+  callbacksRef.current = {
+    purchasePackage,
+    restorePurchase,
+    onPurchaseSuccess,
+    onPurchaseError,
+    onAuthRequired,
+    onClose,
+    packages,
+  };
+
+  // ─────────────────────────────────────────────────────────────
+  // PURCHASE HANDLER
+  // ─────────────────────────────────────────────────────────────
 
   const handlePurchase = useCallback(async () => {
     const currentSelectedId = selectedPlanId;
     if (!currentSelectedId) return;
-
     if (isProcessingRef.current) return;
 
-    const pkg = packagesRef.current.find((p) => p.product.identifier === currentSelectedId);
+    const pkg = callbacksRef.current.packages.find((p) => p.product.identifier === currentSelectedId);
     if (!pkg) {
-      onPurchaseErrorRef.current?.(new Error(`Package not found: ${currentSelectedId}`));
+      callbacksRef.current.onPurchaseError?.(new Error(`Package not found: ${currentSelectedId}`));
       return;
     }
 
@@ -70,7 +83,7 @@ export function usePaywallActions({
     setIsProcessing(true);
 
     try {
-      const success = await purchasePackageRef.current(pkg);
+      const success = await callbacksRef.current.purchasePackage(pkg);
 
       if (__DEV__) {
         console.log('[usePaywallActions] ✅ Purchase completed', { success });
@@ -78,36 +91,17 @@ export function usePaywallActions({
 
       let isActuallySuccessful = success === true;
 
+      // Fallback verification if success is undefined
       if (success === undefined) {
-        if (__DEV__) {
-          console.log('[usePaywallActions] 🔍 Checking premium status as fallback...');
-        }
-
-        const [statusResult, creditsResult] = await Promise.all([
-          refetchStatus(),
-          refetchCredits()
-        ]);
-
-        const isSubscriptionPremium = statusResult.data?.isPremium ?? false;
-        const isCreditsPremium = creditsResult.data?.isPremium ?? false;
-
-        isActuallySuccessful = isSubscriptionPremium || isCreditsPremium;
-
-        if (__DEV__) {
-          console.log('[usePaywallActions] 📊 Fallback check result:', {
-            isSubscriptionPremium,
-            isCreditsPremium,
-            isActuallySuccessful
-          });
-        }
+        isActuallySuccessful = await verifyPremiumStatus();
       }
 
       if (isActuallySuccessful) {
         if (__DEV__) {
           console.log('[usePaywallActions] 🎉 Purchase successful, closing paywall');
         }
-        onPurchaseSuccessRef.current?.();
-        onCloseRef.current?.();
+        callbacksRef.current.onPurchaseSuccess?.();
+        callbacksRef.current.onClose?.();
       } else {
         if (__DEV__) {
           console.warn('[usePaywallActions] ⚠️ Purchase did not indicate success');
@@ -117,11 +111,15 @@ export function usePaywallActions({
       if (__DEV__) {
         console.error('[usePaywallActions] ❌ Purchase error:', error);
       }
-      onPurchaseErrorRef.current?.(error instanceof Error ? error : new Error(String(error)));
+      callbacksRef.current.onPurchaseError?.(error instanceof Error ? error : new Error(String(error)));
     } finally {
       setIsProcessing(false);
     }
-  }, [selectedPlanId, refetchStatus, refetchCredits]);
+  }, [selectedPlanId, verifyPremiumStatus]);
+
+  // ─────────────────────────────────────────────────────────────
+  // RESTORE HANDLER
+  // ─────────────────────────────────────────────────────────────
 
   const handleRestore = useCallback(async () => {
     if (isProcessingRef.current) return;
@@ -131,8 +129,9 @@ export function usePaywallActions({
     }
 
     setIsProcessing(true);
+
     try {
-      const success = await restorePurchaseRef.current();
+      const success = await callbacksRef.current.restorePurchase();
 
       if (__DEV__) {
         console.log('[usePaywallActions] ✅ Restore completed', { success });
@@ -140,20 +139,17 @@ export function usePaywallActions({
 
       let isActuallySuccessful = success === true;
 
+      // Fallback verification if success is undefined
       if (success === undefined) {
-        const [statusResult, creditsResult] = await Promise.all([
-          refetchStatus(),
-          refetchCredits()
-        ]);
-        isActuallySuccessful = (statusResult.data?.isPremium ?? false) || (creditsResult.data?.isPremium ?? false);
+        isActuallySuccessful = await verifyPremiumStatus();
       }
 
       if (isActuallySuccessful) {
         if (__DEV__) {
           console.log('[usePaywallActions] 🎉 Restore successful, closing paywall');
         }
-        onPurchaseSuccessRef.current?.();
-        onCloseRef.current?.();
+        callbacksRef.current.onPurchaseSuccess?.();
+        callbacksRef.current.onClose?.();
       } else {
         if (__DEV__) {
           console.warn('[usePaywallActions] ⚠️ Restore did not indicate success');
@@ -163,11 +159,15 @@ export function usePaywallActions({
       if (__DEV__) {
         console.error('[usePaywallActions] ❌ Restore error:', error);
       }
-      onPurchaseErrorRef.current?.(error instanceof Error ? error : new Error(String(error)));
+      callbacksRef.current.onPurchaseError?.(error instanceof Error ? error : new Error(String(error)));
     } finally {
       setIsProcessing(false);
     }
-  }, [refetchStatus, refetchCredits]);
+  }, [verifyPremiumStatus]);
+
+  // ─────────────────────────────────────────────────────────────
+  // RESET
+  // ─────────────────────────────────────────────────────────────
 
   const resetState = useCallback(() => {
     if (__DEV__) {
@@ -177,6 +177,10 @@ export function usePaywallActions({
     setIsProcessing(false);
   }, []);
 
+  // ─────────────────────────────────────────────────────────────
+  // RETURN
+  // ─────────────────────────────────────────────────────────────
+
   return useMemo(() => ({
     selectedPlanId,
     setSelectedPlanId,

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

@@ -0,0 +1,39 @@
+/**
+ * Paywall Actions Utilities
+ * Helper functions for paywall purchase/restore operations
+ */
+
+import { useSubscriptionStatus } from "../../subscription/presentation/useSubscriptionStatus";
+import { useCredits } from "../../credits/presentation/useCredits";
+
+export function usePremiumVerification() {
+  const { refetch: refetchStatus } = useSubscriptionStatus();
+  const { refetch: refetchCredits } = useCredits();
+
+  const verifyPremiumStatus = async (): Promise<boolean> => {
+    if (__DEV__) {
+      console.log('[PremiumVerification] 🔍 Checking premium status as fallback...');
+    }
+
+    const [statusResult, creditsResult] = await Promise.all([
+      refetchStatus(),
+      refetchCredits()
+    ]);
+
+    const isSubscriptionPremium = statusResult.data?.isPremium ?? false;
+    const isCreditsPremium = creditsResult.data?.isPremium ?? false;
+    const isActuallySuccessful = isSubscriptionPremium || isCreditsPremium;
+
+    if (__DEV__) {
+      console.log('[PremiumVerification] 📊 Fallback check result:', {
+        isSubscriptionPremium,
+        isCreditsPremium,
+        isActuallySuccessful
+      });
+    }
+
+    return isActuallySuccessful;
+  };
+
+  return { verifyPremiumStatus };
+}