@umituz/react-native-subscription 2.11.7 → 2.11.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.11.7",
+  "version": "2.11.8",
   "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/presentation/components/details/CreditRow.tsx

@@ -0,0 +1,83 @@
+/**
+ * Credit Row Component
+ * Displays credit information with progress bar
+ */
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+
+export interface CreditRowProps {
+  label: string;
+  current: number;
+  total: number;
+  remainingLabel?: string;
+}
+
+export const CreditRow: React.FC<CreditRowProps> = ({
+  label,
+  current,
+  total,
+  remainingLabel = "remaining",
+}) => {
+  const tokens = useAppDesignTokens();
+  const percentage = total > 0 ? (current / total) * 100 : 0;
+  const isLow = percentage <= 20;
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={[styles.label, { color: tokens.colors.text }]}>
+          {label}
+        </Text>
+        <Text
+          style={[
+            styles.count,
+            { color: isLow ? tokens.colors.warning : tokens.colors.textSecondary },
+          ]}
+        >
+          {current} / {total} {remainingLabel}
+        </Text>
+      </View>
+      <View
+        style={[styles.progressBar, { backgroundColor: tokens.colors.surfaceSecondary }]}
+      >
+        <View
+          style={[
+            styles.progressFill,
+            {
+              width: `${percentage}%`,
+              backgroundColor: isLow ? tokens.colors.warning : tokens.colors.primary,
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 4,
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  label: {
+    fontSize: 13,
+  },
+  count: {
+    fontSize: 12,
+  },
+  progressBar: {
+    height: 6,
+    borderRadius: 3,
+    overflow: "hidden",
+  },
+  progressFill: {
+    height: "100%",
+    borderRadius: 3,
+  },
+});

package/src/presentation/components/details/DetailRow.tsx

@@ -0,0 +1,53 @@
+/**
+ * Detail Row Component
+ * Displays a single detail row with label and value
+ */
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+
+export interface DetailRowProps {
+  label: string;
+  value: string;
+  highlight?: boolean;
+}
+
+export const DetailRow: React.FC<DetailRowProps> = ({
+  label,
+  value,
+  highlight = false,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.container}>
+      <Text style={[styles.label, { color: tokens.colors.textSecondary }]}>
+        {label}
+      </Text>
+      <Text
+        style={[
+          styles.value,
+          { color: highlight ? tokens.colors.warning : tokens.colors.text },
+        ]}
+      >
+        {value}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  label: {
+    fontSize: 14,
+  },
+  value: {
+    fontSize: 14,
+    fontWeight: "500",
+  },
+});

package/src/presentation/components/details/PremiumDetailsCard.tsx

@@ -7,45 +7,12 @@
 import React from "react";
 import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
-import {
-  PremiumStatusBadge,
-  type SubscriptionStatusType,
-} from "./PremiumStatusBadge";
+import { PremiumStatusBadge } from "./PremiumStatusBadge";
+import { DetailRow } from "./DetailRow";
+import { CreditRow } from "./CreditRow";
+import type { PremiumDetailsCardProps } from "./PremiumDetailsCardTypes";
 
-export interface CreditInfo {
-  id: string;
-  label: string;
-  current: number;
-  total: number;
-}
-
-export interface PremiumDetailsTranslations {
-  title: string;
-  statusLabel: string;
-  expiresLabel: string;
-  purchasedLabel: string;
-  creditsTitle?: string;
-  remainingLabel?: string;
-  manageButton?: string;
-  upgradeButton?: string;
-  lifetimeLabel?: string;
-  statusActive?: string;
-  statusExpired?: string;
-  statusFree?: string;
-}
-
-export interface PremiumDetailsCardProps {
-  statusType: SubscriptionStatusType;
-  isPremium: boolean;
-  expirationDate?: string | null;
-  purchaseDate?: string | null;
-  isLifetime?: boolean;
-  daysRemaining?: number | null;
-  credits?: CreditInfo[];
-  translations: PremiumDetailsTranslations;
-  onManageSubscription?: () => void;
-  onUpgrade?: () => void;
-}
+export type { CreditInfo, PremiumDetailsTranslations, PremiumDetailsCardProps } from "./PremiumDetailsCardTypes";
 
 export const PremiumDetailsCard: React.FC<PremiumDetailsCardProps> = ({
   statusType,
@@ -82,7 +49,6 @@ export const PremiumDetailsCard: React.FC<PremiumDetailsCardProps> = ({
             <DetailRow
               label={translations.statusLabel}
               value={translations.lifetimeLabel || "Lifetime"}
-              tokens={tokens}
             />
           ) : (
             <>
@@ -95,14 +61,12 @@ export const PremiumDetailsCard: React.FC<PremiumDetailsCardProps> = ({
                     daysRemaining !== undefined &&
                     daysRemaining <= 7
                   }
-                  tokens={tokens}
                 />
               )}
               {purchaseDate && (
                 <DetailRow
                   label={translations.purchasedLabel}
                   value={purchaseDate}
-                  tokens={tokens}
                 />
               )}
             </>
@@ -126,7 +90,6 @@ export const PremiumDetailsCard: React.FC<PremiumDetailsCardProps> = ({
               current={credit.current}
               total={credit.total}
               remainingLabel={translations.remainingLabel}
-              tokens={tokens}
             />
           ))}
         </View>
@@ -163,84 +126,6 @@ export const PremiumDetailsCard: React.FC<PremiumDetailsCardProps> = ({
   );
 };
 
-interface DetailRowProps {
-  label: string;
-  value: string;
-  highlight?: boolean;
-  tokens: ReturnType<typeof useAppDesignTokens>;
-}
-
-const DetailRow: React.FC<DetailRowProps> = ({
-  label,
-  value,
-  highlight = false,
-  tokens,
-}) => (
-  <View style={styles.detailRow}>
-    <Text style={[styles.detailLabel, { color: tokens.colors.textSecondary }]}>
-      {label}
-    </Text>
-    <Text
-      style={[
-        styles.detailValue,
-        { color: highlight ? tokens.colors.warning : tokens.colors.text },
-      ]}
-    >
-      {value}
-    </Text>
-  </View>
-);
-
-interface CreditRowProps {
-  label: string;
-  current: number;
-  total: number;
-  remainingLabel?: string;
-  tokens: ReturnType<typeof useAppDesignTokens>;
-}
-
-const CreditRow: React.FC<CreditRowProps> = ({
-  label,
-  current,
-  total,
-  remainingLabel = "remaining",
-  tokens,
-}) => {
-  const percentage = total > 0 ? (current / total) * 100 : 0;
-  const isLow = percentage <= 20;
-
-  return (
-    <View style={styles.creditRow}>
-      <View style={styles.creditHeader}>
-        <Text style={[styles.creditLabel, { color: tokens.colors.text }]}>
-          {label}
-        </Text>
-        <Text
-          style={[
-            styles.creditCount,
-            { color: isLow ? tokens.colors.warning : tokens.colors.textSecondary },
-          ]}
-        >
-          {current} / {total} {remainingLabel}
-        </Text>
-      </View>
-      <View
-        style={[styles.progressBar, { backgroundColor: tokens.colors.surfaceSecondary }]}
-      >
-        <View
-          style={[
-            styles.progressFill,
-            {
-              width: `${percentage}%`,
-              backgroundColor: isLow ? tokens.colors.warning : tokens.colors.primary,
-            },
-          ]}
-        />
-      </View>
-    </View>
-  );
-};
-
 const styles = StyleSheet.create({
   card: {
     borderRadius: 12,
@@ -264,46 +149,11 @@ const styles = StyleSheet.create({
     fontWeight: "600",
     marginBottom: 4,
   },
-  detailRow: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-  },
-  detailLabel: {
-    fontSize: 14,
-  },
-  detailValue: {
-    fontSize: 14,
-    fontWeight: "500",
-  },
   creditsSection: {
     gap: 8,
     paddingTop: 12,
     borderTopWidth: 1,
   },
-  creditRow: {
-    gap: 4,
-  },
-  creditHeader: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-  },
-  creditLabel: {
-    fontSize: 13,
-  },
-  creditCount: {
-    fontSize: 12,
-  },
-  progressBar: {
-    height: 6,
-    borderRadius: 3,
-    overflow: "hidden",
-  },
-  progressFill: {
-    height: "100%",
-    borderRadius: 3,
-  },
   actionsSection: {
     gap: 8,
   },

package/src/presentation/components/details/PremiumDetailsCardTypes.ts

@@ -0,0 +1,41 @@
+/**
+ * Premium Details Card Types
+ * Type definitions for premium subscription details display
+ */
+
+import type { SubscriptionStatusType } from "./PremiumStatusBadge";
+
+export interface CreditInfo {
+  id: string;
+  label: string;
+  current: number;
+  total: number;
+}
+
+export interface PremiumDetailsTranslations {
+  title: string;
+  statusLabel: string;
+  expiresLabel: string;
+  purchasedLabel: string;
+  creditsTitle?: string;
+  remainingLabel?: string;
+  manageButton?: string;
+  upgradeButton?: string;
+  lifetimeLabel?: string;
+  statusActive?: string;
+  statusExpired?: string;
+  statusFree?: string;
+}
+
+export interface PremiumDetailsCardProps {
+  statusType: SubscriptionStatusType;
+  isPremium: boolean;
+  expirationDate?: string | null;
+  purchaseDate?: string | null;
+  isLifetime?: boolean;
+  daysRemaining?: number | null;
+  credits?: CreditInfo[];
+  translations: PremiumDetailsTranslations;
+  onManageSubscription?: () => void;
+  onUpgrade?: () => void;
+}

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

@@ -4,24 +4,14 @@
  */
 
 import React from "react";
-import { View, StyleSheet, TouchableOpacity, Linking } from "react-native";
+import { View, TouchableOpacity, Linking } from "react-native";
 import { AtomicText } from "@umituz/react-native-design-system";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import type { PaywallLegalFooterProps } from "./PaywallLegalFooterTypes";
+import { DEFAULT_TERMS } from "./PaywallLegalFooterTypes";
+import { styles } from "./PaywallLegalFooterStyles";
 
-interface PaywallLegalFooterProps {
-  termsText?: string;
-  privacyUrl?: string;
-  termsUrl?: string;
-  privacyText?: string;
-  termsOfServiceText?: string;
-  showRestoreButton?: boolean;
-  restoreButtonText?: string;
-  onRestore?: () => void;
-  isProcessing?: boolean;
-}
-
-const DEFAULT_TERMS =
-  "Payment will be charged to your account. Subscription automatically renews unless cancelled.";
+export type { PaywallLegalFooterProps } from "./PaywallLegalFooterTypes";
 
 export const PaywallLegalFooter: React.FC<PaywallLegalFooterProps> = React.memo(
   ({
@@ -153,50 +143,3 @@ export const PaywallLegalFooter: React.FC<PaywallLegalFooterProps> = React.memo(
 );
 
 PaywallLegalFooter.displayName = "PaywallLegalFooter";
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: "center",
-    paddingHorizontal: 24,
-    paddingBottom: 24,
-    paddingTop: 8,
-    width: "100%",
-  },
-  termsText: {
-    textAlign: "center",
-    fontSize: 10,
-    lineHeight: 14,
-    marginBottom: 16,
-    opacity: 0.7,
-  },
-  legalLinksWrapper: {
-    width: "100%",
-    alignItems: "center",
-  },
-  legalLinksContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-    borderRadius: 20,
-    backgroundColor: "rgba(255, 255, 255, 0.03)",
-    borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.05)",
-  },
-  linkItem: {
-    paddingVertical: 2,
-  },
-  linkText: {
-    fontSize: 11,
-    fontWeight: "500",
-    letterSpacing: 0.3,
-  },
-  dot: {
-    width: 3,
-    height: 3,
-    borderRadius: 1.5,
-    marginHorizontal: 12,
-    opacity: 0.3,
-  },
-});

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

@@ -0,0 +1,53 @@
+/**
+ * Paywall Legal Footer Styles
+ * StyleSheet definitions for paywall legal footer
+ */
+
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    paddingHorizontal: 24,
+    paddingBottom: 24,
+    paddingTop: 8,
+    width: "100%",
+  },
+  termsText: {
+    textAlign: "center",
+    fontSize: 10,
+    lineHeight: 14,
+    marginBottom: 16,
+    opacity: 0.7,
+  },
+  legalLinksWrapper: {
+    width: "100%",
+    alignItems: "center",
+  },
+  legalLinksContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 20,
+    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.05)",
+  },
+  linkItem: {
+    paddingVertical: 2,
+  },
+  linkText: {
+    fontSize: 11,
+    fontWeight: "500",
+    letterSpacing: 0.3,
+  },
+  dot: {
+    width: 3,
+    height: 3,
+    borderRadius: 1.5,
+    marginHorizontal: 12,
+    opacity: 0.3,
+  },
+});

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

@@ -0,0 +1,19 @@
+/**
+ * Paywall Legal Footer Types
+ * Type definitions for paywall legal footer
+ */
+
+export interface PaywallLegalFooterProps {
+  termsText?: string;
+  privacyUrl?: string;
+  termsUrl?: string;
+  privacyText?: string;
+  termsOfServiceText?: string;
+  showRestoreButton?: boolean;
+  restoreButtonText?: string;
+  onRestore?: () => void;
+  isProcessing?: boolean;
+}
+
+export const DEFAULT_TERMS =
+  "Payment will be charged to your account. Subscription automatically renews unless cancelled.";

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

@@ -3,7 +3,7 @@
  * Displays paywall with Credits and Subscription tabs
  */
 
-import React, { useEffect } from "react";
+import React from "react";
 import { View, StyleSheet } from "react-native";
 import { BaseModal } from "@umituz/react-native-design-system";
 import type { PurchasesPackage } from "react-native-purchases";

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

@@ -108,10 +108,6 @@ const styles = StyleSheet.create({
         borderRadius: 16,
         alignItems: "center",
         justifyContent: "center",
-        shadowColor: "#000",
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.2,
-        shadowRadius: 8,
         elevation: 4,
     },
     restoreButton: {

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

@@ -4,25 +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";
 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 }) => {
@@ -147,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/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
+  });
+};

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

@@ -4,219 +4,12 @@
  * Generic hooks for 100+ apps
  */
 
-import { useQuery, 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";
-
-/**
- * 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;
-
-const STALE_TIME = 5 * 60 * 1000; // 5 minutes
-const GC_TIME = 30 * 60 * 1000; // 30 minutes
-
-/**
- * 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",
-        }
-      );
-    },
-  });
-};
-
-/**
- * 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
-  });
-};
-
-/**
- * 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",
-        }
-      );
-    },
-  });
-};
-
-/**
- * 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",
-        }
-      );
-    },
-  });
-};
+export {
+  SUBSCRIPTION_QUERY_KEYS,
+  STALE_TIME,
+  GC_TIME,
+} from "./subscriptionQueryKeys";
+export { useInitializeSubscription } from "./useInitializeSubscription";
+export { useSubscriptionPackages } from "./useSubscriptionPackages";
+export { usePurchasePackage } from "./usePurchasePackage";
+export { useRestorePurchase } from "./useRestorePurchase";