@umituz/react-native-subscription 2.11.6 → 2.11.8

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

@@ -4,26 +4,18 @@
  */
 
 import React from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
-import type { PurchasesPackage } from "react-native-purchases";
+import { View, TouchableOpacity } from "react-native";
 import { AtomicText } from "@umituz/react-native-design-system";
 import { useAppDesignTokens, withAlpha } from "@umituz/react-native-design-system";
 import { formatPrice } from "../../../utils/priceUtils";
 import { useLocalization } from "@umituz/react-native-localization";
 import { BestValueBadge } from "./BestValueBadge";
-
 import { getPeriodLabel, isYearlyPackage } from "../../../utils/packagePeriodUtils";
-// @ts-ignore
 import { LinearGradient } from "expo-linear-gradient";
+import type { SubscriptionPlanCardProps } from "./SubscriptionPlanCardTypes";
+import { styles } from "./SubscriptionPlanCardStyles";
 
-interface SubscriptionPlanCardProps {
-  package: PurchasesPackage;
-  isSelected: boolean;
-  onSelect: () => void;
-  isBestValue?: boolean;
-  /** Optional: Number of credits/generations included with this package */
-  creditAmount?: number;
-}
+export type { SubscriptionPlanCardProps } from "./SubscriptionPlanCardTypes";
 
 export const SubscriptionPlanCard: React.FC<SubscriptionPlanCardProps> =
   React.memo(({ package: pkg, isSelected, onSelect, isBestValue = false, creditAmount }) => {
@@ -148,59 +140,4 @@ export const SubscriptionPlanCard: React.FC<SubscriptionPlanCardProps> =
   });
 
 
-SubscriptionPlanCard.displayName = "SubscriptionPlanCard";
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 16,
-    position: "relative",
-    overflow: "hidden", // Important for gradient borders/corners
-  },
-  gradientWrapper: {
-    flex: 1,
-    padding: 18,
-  },
-  content: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-  },
-  leftSection: {
-    flexDirection: "row",
-    alignItems: "center",
-    flex: 1,
-  },
-  radio: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    borderWidth: 2,
-    alignItems: "center",
-    justifyContent: "center",
-    marginRight: 16,
-  },
-  radioInner: {
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-  },
-  textContainer: {
-    flex: 1,
-  },
-  title: {
-    fontWeight: "600",
-    marginBottom: 2,
-  },
-  creditBadge: {
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    borderRadius: 12,
-    marginBottom: 4,
-  },
-  rightSection: {
-    alignItems: "flex-end",
-  },
-  price: {
-    fontWeight: "700",
-  },
-});
+SubscriptionPlanCard.displayName = "SubscriptionPlanCard";

package/src/presentation/components/paywall/SubscriptionPlanCardStyles.ts

@@ -0,0 +1,61 @@
+/**
+ * Subscription Plan Card Styles
+ * StyleSheet definitions for subscription plan card
+ */
+
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  container: {
+    borderRadius: 16,
+    position: "relative",
+    overflow: "hidden",
+  },
+  gradientWrapper: {
+    flex: 1,
+    padding: 18,
+  },
+  content: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  leftSection: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+  },
+  radio: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 16,
+  },
+  radioInner: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+  },
+  textContainer: {
+    flex: 1,
+  },
+  title: {
+    fontWeight: "600",
+    marginBottom: 2,
+  },
+  creditBadge: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 12,
+    marginBottom: 4,
+  },
+  rightSection: {
+    alignItems: "flex-end",
+  },
+  price: {
+    fontWeight: "700",
+  },
+});

package/src/presentation/components/paywall/SubscriptionPlanCardTypes.ts

@@ -0,0 +1,15 @@
+/**
+ * Subscription Plan Card Types
+ * Type definitions for subscription plan display
+ */
+
+import type { PurchasesPackage } from "react-native-purchases";
+
+export interface SubscriptionPlanCardProps {
+  package: PurchasesPackage;
+  isSelected: boolean;
+  onSelect: () => void;
+  isBestValue?: boolean;
+  /** Optional: Number of credits/generations included with this package */
+  creditAmount?: number;
+}

package/src/presentation/hooks/useDeductCredit.ts

@@ -5,6 +5,7 @@
  * Generic and reusable - uses module-level repository.
  */
 
+import { useCallback } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import type { CreditType, UserCredits } from "../../domain/entities/Credits";
 import { getCreditsRepository } from "../../infrastructure/repositories/CreditsRepositoryProvider";
@@ -78,7 +79,7 @@ export const useDeductCredit = ({
     },
   });
 
-  const deductCredit = async (creditType: CreditType): Promise<boolean> => {
+  const deductCredit = useCallback(async (creditType: CreditType): Promise<boolean> => {
     try {
       const result = await mutation.mutateAsync(creditType);
 
@@ -93,7 +94,7 @@ export const useDeductCredit = ({
     } catch {
       return false;
     }
-  };
+  }, [mutation, onCreditsExhausted]);
 
   return {
     deductCredit,
@@ -135,14 +136,14 @@ export const useInitializeCredits = ({
     },
   });
 
-  const initializeCredits = async (purchaseId?: string): Promise<boolean> => {
+  const initializeCredits = useCallback(async (purchaseId?: string): Promise<boolean> => {
     try {
       const result = await mutation.mutateAsync(purchaseId);
       return result.success;
     } catch {
       return false;
     }
-  };
+  }, [mutation]);
 
   return {
     initializeCredits,

package/src/presentation/hooks/usePremiumWithConfig.ts

@@ -7,6 +7,7 @@
 
 import { useCallback } from "react";
 import type { PurchasesPackage } from "react-native-purchases";
+import type { UserCredits } from "../../domain/entities/Credits";
 import { useCredits } from "./useCredits";
 import { useInitializeCredits } from "./useDeductCredit";
 import {
@@ -27,7 +28,7 @@ export interface UsePremiumWithConfigResult {
   isPremium: boolean;
   isLoading: boolean;
   packages: PurchasesPackage[];
-  credits: any; // UserCredits from subscription package
+  credits: UserCredits | null;
   showPaywall: boolean;
   purchasePackage: (pkg: PurchasesPackage) => Promise<boolean>;
   restorePurchase: () => Promise<boolean>;

package/src/presentation/hooks/useSubscriptionModal.ts

@@ -23,7 +23,7 @@ export const useSubscriptionModal = ({
         } finally {
             setIsProcessing(false);
         }
-    }, [selectedPkg, isProcessing, onPurchase, onClose]);
+    }, [selectedPkg, onPurchase, onClose]);
 
     const handleRestore = useCallback(async () => {
         if (isProcessing) return;
@@ -33,7 +33,7 @@ export const useSubscriptionModal = ({
         } finally {
             setIsProcessing(false);
         }
-    }, [isProcessing, onRestore, onClose]);
+    }, [onRestore, onClose]);
 
     return {
         selectedPkg,

package/src/revenuecat/presentation/hooks/subscriptionQueryKeys.ts

@@ -0,0 +1,16 @@
+/**
+ * Subscription Query Keys
+ * TanStack Query keys and constants for subscription state
+ */
+
+/**
+ * Query keys for TanStack Query
+ */
+export const SUBSCRIPTION_QUERY_KEYS = {
+  packages: ["subscription", "packages"] as const,
+  initialized: (userId: string) =>
+    ["subscription", "initialized", userId] as const,
+} as const;
+
+export const STALE_TIME = 5 * 60 * 1000; // 5 minutes
+export const GC_TIME = 30 * 60 * 1000; // 30 minutes

package/src/revenuecat/presentation/hooks/useInitializeSubscription.ts

@@ -0,0 +1,56 @@
+/**
+ * Initialize Subscription Hook
+ * TanStack mutation for initializing RevenueCat
+ */
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { SubscriptionManager } from "../../infrastructure/managers/SubscriptionManager";
+import {
+  trackPackageError,
+  addPackageBreadcrumb,
+} from "@umituz/react-native-sentry";
+import { SUBSCRIPTION_QUERY_KEYS } from "./subscriptionQueryKeys";
+
+/**
+ * Initialize subscription with RevenueCat
+ */
+export const useInitializeSubscription = (userId: string | undefined) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async () => {
+      if (!userId) {
+        throw new Error("User not authenticated");
+      }
+
+      addPackageBreadcrumb("subscription", "Initialize mutation started", {
+        userId,
+      });
+
+      return SubscriptionManager.initialize(userId);
+    },
+    onSuccess: () => {
+      if (userId) {
+        queryClient.invalidateQueries({
+          queryKey: SUBSCRIPTION_QUERY_KEYS.packages,
+        });
+
+        addPackageBreadcrumb(
+          "subscription",
+          "Initialize mutation success - packages invalidated",
+          { userId }
+        );
+      }
+    },
+    onError: (error) => {
+      trackPackageError(
+        error instanceof Error ? error : new Error(String(error)),
+        {
+          packageName: "subscription",
+          operation: "initialize_mutation",
+          userId: userId ?? "NO_USER",
+        }
+      );
+    },
+  });
+};

package/src/revenuecat/presentation/hooks/usePurchasePackage.ts

@@ -0,0 +1,79 @@
+/**
+ * Purchase Package Hook
+ * TanStack mutation for purchasing subscription packages
+ */
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { PurchasesPackage } from "react-native-purchases";
+import { SubscriptionManager } from "../../infrastructure/managers/SubscriptionManager";
+import {
+  trackPackageError,
+  addPackageBreadcrumb,
+} from "@umituz/react-native-sentry";
+import { SUBSCRIPTION_QUERY_KEYS } from "./subscriptionQueryKeys";
+
+/**
+ * Purchase a subscription package
+ */
+export const usePurchasePackage = (userId: string | undefined) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (pkg: PurchasesPackage) => {
+      if (!userId) {
+        throw new Error("User not authenticated");
+      }
+
+      addPackageBreadcrumb("subscription", "Purchase started", {
+        packageId: pkg.identifier,
+        userId,
+      });
+
+      addPackageBreadcrumb("subscription", "Purchase mutation started", {
+        packageId: pkg.identifier,
+        userId,
+      });
+
+      const success = await SubscriptionManager.purchasePackage(pkg);
+
+      if (success) {
+        addPackageBreadcrumb("subscription", "Purchase success", {
+          packageId: pkg.identifier,
+          userId,
+        });
+
+        addPackageBreadcrumb("subscription", "Purchase mutation success", {
+          packageId: pkg.identifier,
+          userId,
+        });
+      } else {
+        addPackageBreadcrumb("subscription", "Purchase cancelled", {
+          packageId: pkg.identifier,
+          userId,
+        });
+
+        addPackageBreadcrumb("subscription", "Purchase mutation failed", {
+          packageId: pkg.identifier,
+          userId,
+        });
+      }
+
+      return success;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: SUBSCRIPTION_QUERY_KEYS.packages,
+      });
+    },
+    onError: (error) => {
+      trackPackageError(
+        error instanceof Error ? error : new Error(String(error)),
+        {
+          packageName: "subscription",
+          operation: "purchase_mutation",
+          userId: userId ?? "NO_USER",
+        }
+      );
+    },
+  });
+};

package/src/revenuecat/presentation/hooks/useRestorePurchase.ts

@@ -0,0 +1,68 @@
+/**
+ * Restore Purchase Hook
+ * TanStack mutation for restoring previous purchases
+ */
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { SubscriptionManager } from "../../infrastructure/managers/SubscriptionManager";
+import {
+  trackPackageError,
+  addPackageBreadcrumb,
+} from "@umituz/react-native-sentry";
+import { SUBSCRIPTION_QUERY_KEYS } from "./subscriptionQueryKeys";
+
+/**
+ * Restore previous purchases
+ */
+export const useRestorePurchase = (userId: string | undefined) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async () => {
+      if (!userId) {
+        throw new Error("User not authenticated");
+      }
+
+      addPackageBreadcrumb("subscription", "Restore started", {
+        userId,
+      });
+
+      addPackageBreadcrumb("subscription", "Restore mutation started", {
+        userId,
+      });
+
+      const success = await SubscriptionManager.restore();
+
+      if (success) {
+        addPackageBreadcrumb("subscription", "Restore success", {
+          userId,
+        });
+
+        addPackageBreadcrumb("subscription", "Restore mutation success", {
+          userId,
+        });
+      } else {
+        addPackageBreadcrumb("subscription", "Restore mutation failed", {
+          userId,
+        });
+      }
+
+      return success;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: SUBSCRIPTION_QUERY_KEYS.packages,
+      });
+    },
+    onError: (error) => {
+      trackPackageError(
+        error instanceof Error ? error : new Error(String(error)),
+        {
+          packageName: "subscription",
+          operation: "restore_mutation",
+          userId: userId ?? "NO_USER",
+        }
+      );
+    },
+  });
+};

package/src/revenuecat/presentation/hooks/useSubscriptionPackages.ts

@@ -0,0 +1,44 @@
+/**
+ * Subscription Packages Hook
+ * TanStack query for fetching available packages
+ */
+
+import { useQuery } from "@tanstack/react-query";
+import { SubscriptionManager } from "../../infrastructure/managers/SubscriptionManager";
+import { addPackageBreadcrumb } from "@umituz/react-native-sentry";
+import {
+  SUBSCRIPTION_QUERY_KEYS,
+  STALE_TIME,
+  GC_TIME,
+} from "./subscriptionQueryKeys";
+
+/**
+ * Fetch available subscription packages
+ */
+export const useSubscriptionPackages = (userId: string | undefined) => {
+  return useQuery({
+    queryKey: [...SUBSCRIPTION_QUERY_KEYS.packages, userId] as const,
+    queryFn: async () => {
+      addPackageBreadcrumb("subscription", "Fetch packages query started", {
+        userId: userId ?? "NO_USER",
+      });
+
+      // Skip if already initialized for this specific user
+      if (!userId || !SubscriptionManager.isInitializedForUser(userId)) {
+        await SubscriptionManager.initialize(userId);
+      }
+
+      const packages = await SubscriptionManager.getPackages();
+
+      addPackageBreadcrumb("subscription", "Fetch packages query success", {
+        userId: userId ?? "NO_USER",
+        count: packages.length,
+      });
+
+      return packages;
+    },
+    staleTime: STALE_TIME,
+    gcTime: GC_TIME,
+    enabled: !!userId, // Only run when userId is available
+  });
+};