@umituz/react-native-subscription 2.10.16 → 2.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.10.16",
+  "version": "2.11.1",
   "description": "Complete subscription management with RevenueCat, paywall UI, and credits system for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -42,14 +42,14 @@
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
     "react-native-purchases": ">=7.0.0",
-    "react-native-safe-area-context": ">=4.0.0"
+    "react-native-safe-area-context": ">=5.0.0"
   },
   "devDependencies": {
-    "@umituz/react-native-design-system": "latest",
-    "@umituz/react-native-firebase": "latest",
-    "@umituz/react-native-legal": "latest",
-    "@umituz/react-native-localization": "latest",
-    "@umituz/react-native-sentry": "latest",
+    "@umituz/react-native-design-system": "^2.1.3",
+    "@umituz/react-native-firebase": "*",
+    "@umituz/react-native-legal": "*",
+    "@umituz/react-native-localization": "*",
+    "@umituz/react-native-sentry": "*",
     "@tanstack/react-query": "^5.0.0",
     "expo-constants": "~16.0.0",
     "expo-linear-gradient": "~15.0.0",
@@ -58,7 +58,7 @@
     "@types/react": "~19.1.10",
     "react": "19.1.0",
     "react-native": "0.81.5",
-    "react-native-safe-area-context": "^4.0.0",
+    "react-native-safe-area-context": "^5.0.0",
     "typescript": "~5.9.2"
   },
   "publishConfig": {

package/src/index.ts

@@ -334,6 +334,9 @@ export {
 export { useRevenueCat } from "./revenuecat/presentation/hooks/useRevenueCat";
 export type { UseRevenueCatResult } from "./revenuecat/presentation/hooks/useRevenueCat";
 
+export { useCustomerInfo } from "./revenuecat/presentation/hooks/useCustomerInfo";
+export type { UseCustomerInfoResult } from "./revenuecat/presentation/hooks/useCustomerInfo";
+
 export {
   useInitializeSubscription,
   useSubscriptionPackages,

package/src/infrastructure/repositories/CreditsRepository.ts

@@ -40,7 +40,7 @@ export class CreditsRepository extends BaseRepository {
   }
 
   async getCredits(userId: string): Promise<CreditsResult> {
-    const db = this.getDb();
+    const db = getFirestore();
     if (!db) {
       return {
         success: false,

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

@@ -12,17 +12,14 @@ interface PaywallHeaderProps {
   title: string;
   subtitle?: string;
   onClose: () => void;
-  variant?: "bottom-sheet" | "fullscreen" | "dialog";
 }
 
 export const PaywallHeader: React.FC<PaywallHeaderProps> = React.memo(
-  ({ title, subtitle, onClose, variant = "bottom-sheet" }) => {
+  ({ title, subtitle, onClose }) => {
     const tokens = useAppDesignTokens();
 
-    const containerStyle = variant === "fullscreen" ? styles.containerFullscreen : styles.container;
-
     return (
-      <View style={containerStyle}>
+      <View style={styles.container}>
         <View style={styles.titleContainer}>
           <AtomicText
             type="headlineLarge"
@@ -58,14 +55,6 @@ PaywallHeader.displayName = "PaywallHeader";
 
 const styles = StyleSheet.create({
   container: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "flex-start",
-    paddingHorizontal: 24,
-    paddingTop: 8,
-    paddingBottom: 16,
-  },
-  containerFullscreen: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "flex-start",

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

@@ -5,7 +5,7 @@
 
 import React, { useEffect } from "react";
 import { View, StyleSheet } from "react-native";
-import { BaseModal, useResponsive } from "@umituz/react-native-design-system";
+import { BaseModal } from "@umituz/react-native-design-system";
 import type { PurchasesPackage } from "react-native-purchases";
 import { usePaywall } from "../../hooks/usePaywall";
 import { PaywallHeader } from "./PaywallHeader";
@@ -80,8 +80,6 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
     processingText,
   } = props;
 
-  const { modalLayout } = useResponsive();
-
   const {
     activeTab,
     selectedCreditsPackageId,
@@ -102,12 +100,11 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
       console.log("[PaywallModal] State:", {
         visible,
         activeTab,
-        modalLayout,
         creditsPackagesCount: creditsPackages?.length ?? 0,
         subscriptionPackagesCount: subscriptionPackages?.length ?? 0,
       });
     }
-  }, [visible, activeTab, modalLayout, creditsPackages?.length, subscriptionPackages?.length]);
+  }, [visible, activeTab, creditsPackages?.length, subscriptionPackages?.length]);
 
   return (
     <BaseModal visible={visible} onClose={onClose}>
@@ -116,7 +113,6 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
           title={title}
           subtitle={subtitle}
           onClose={onClose}
-          variant="fullscreen"
         />
 
         <PaywallTabBar

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

@@ -5,7 +5,7 @@
 
 import React from "react";
 import { View, StyleSheet, ScrollView } from "react-native";
-import { useAppDesignTokens, BaseModal, useResponsive } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, BaseModal } from "@umituz/react-native-design-system";
 import type { PurchasesPackage } from "react-native-purchases";
 
 import { SubscriptionModalHeader } from "./SubscriptionModalHeader";
@@ -66,7 +66,6 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
   } = props;
 
   const tokens = useAppDesignTokens();
-  const { modalLayout } = useResponsive();
 
   const {
     selectedPkg,
@@ -85,7 +84,6 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
       visible,
       isLoading,
       packagesCount: packages?.length ?? 0,
-      modalLayout,
       selectedPkg: selectedPkg?.identifier ?? null,
       isProcessing,
     });
@@ -98,15 +96,11 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
           title={title}
           subtitle={subtitle}
           onClose={onClose}
-          variant="fullscreen"
         />
 
         <ScrollView
           style={styles.scrollView}
-          contentContainerStyle={[
-            styles.scrollContent,
-            { paddingHorizontal: modalLayout.horizontalPadding }
-          ]}
+          contentContainerStyle={styles.scrollContent}
           showsVerticalScrollIndicator={false}
           bounces={false}
         >

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

@@ -11,14 +11,12 @@ interface SubscriptionModalHeaderProps {
     title: string;
     subtitle?: string;
     onClose: () => void;
-    variant?: "bottom-sheet" | "fullscreen" | "dialog";
 }
 
 export const SubscriptionModalHeader: React.FC<SubscriptionModalHeaderProps> = ({
     title,
     subtitle,
     onClose,
-    variant = "bottom-sheet",
 }) => {
     const tokens = useAppDesignTokens();
 

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

@@ -0,0 +1,129 @@
+/**
+ * useCustomerInfo Hook
+ * Fetches and manages RevenueCat CustomerInfo with real-time updates
+ *
+ * BEST PRACTICE: Always get expiration date from CustomerInfo (source of truth)
+ * Never calculate expiration dates client-side (purchaseDate + 1 year is WRONG)
+ *
+ * This hook provides:
+ * - Initial fetch from SDK cache (instant, no network)
+ * - Real-time listener for updates (renewals, purchases, restore)
+ * - Automatic cleanup on unmount
+ * - SDK caches CustomerInfo and fetches every ~5 minutes
+ *
+ * @see https://www.revenuecat.com/docs/customers/customer-info
+ */
+
+import { useEffect, useState, useCallback } from "react";
+import Purchases, { type CustomerInfo } from "react-native-purchases";
+import { addPackageBreadcrumb, trackPackageError } from "@umituz/react-native-sentry";
+
+export interface UseCustomerInfoResult {
+  /** Current CustomerInfo from RevenueCat SDK */
+  customerInfo: CustomerInfo | null;
+  /** Loading state (only true on initial fetch) */
+  loading: boolean;
+  /** Error message if fetch failed */
+  error: string | null;
+  /** Manually refetch CustomerInfo (usually not needed, listener handles updates) */
+  refetch: () => Promise<void>;
+  /** Whether SDK is currently fetching */
+  isFetching: boolean;
+}
+
+/**
+ * Hook to get CustomerInfo from RevenueCat SDK
+ *
+ * Features:
+ * - SDK cache: First call returns cached data (instant)
+ * - Auto-updates: Listener triggers on renewals, purchases, restore
+ * - Network fetch: SDK fetches every ~5 minutes in background
+ * - Grace periods: Expiration dates include grace period automatically
+ *
+ * @example
+ * ```typescript
+ * const { customerInfo, loading } = useCustomerInfo();
+ *
+ * // Check premium status
+ * const isPremium = !!customerInfo?.entitlements.active['premium'];
+ *
+ * // Get expiration date (ALWAYS from CustomerInfo, NEVER calculate!)
+ * const expiresAt = customerInfo?.entitlements.active['premium']?.expirationDate;
+ *
+ * // Check will renew
+ * const willRenew = customerInfo?.entitlements.active['premium']?.willRenew;
+ * ```
+ *
+ * @returns CustomerInfo and loading state
+ */
+export function useCustomerInfo(): UseCustomerInfoResult {
+  const [customerInfo, setCustomerInfo] = useState<CustomerInfo | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [isFetching, setIsFetching] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchCustomerInfo = useCallback(async () => {
+    try {
+      setIsFetching(true);
+      setError(null);
+
+      addPackageBreadcrumb("subscription", "Fetching CustomerInfo", {});
+
+      // SDK returns cached data instantly if available
+      // Network fetch happens in background automatically
+      const info = await Purchases.getCustomerInfo();
+
+      setCustomerInfo(info);
+
+      addPackageBreadcrumb("subscription", "CustomerInfo fetched", {
+        hasActiveEntitlements: Object.keys(info.entitlements.active).length > 0,
+        latestExpiration: info.latestExpirationDate || "none",
+      });
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error ? err.message : "Failed to fetch customer info";
+      setError(errorMessage);
+
+      trackPackageError(
+        err instanceof Error ? err : new Error(String(err)),
+        {
+          packageName: "subscription",
+          operation: "fetch_customer_info",
+        }
+      );
+    } finally {
+      setLoading(false);
+      setIsFetching(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    // Initial fetch
+    fetchCustomerInfo();
+
+    // Listen for real-time updates (renewals, purchases, restore)
+    const listener = (info: CustomerInfo) => {
+      addPackageBreadcrumb("subscription", "CustomerInfo updated via listener", {
+        hasActiveEntitlements: Object.keys(info.entitlements.active).length > 0,
+      });
+
+      setCustomerInfo(info);
+      setError(null);
+    };
+
+    Purchases.addCustomerInfoUpdateListener(listener);
+
+    // Cleanup listener on unmount
+    return () => {
+      Purchases.removeCustomerInfoUpdateListener(listener);
+    };
+  }, [fetchCustomerInfo]);
+
+  return {
+    customerInfo,
+    loading,
+    error,
+    refetch: fetchCustomerInfo,
+    isFetching,
+  };
+}

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

@@ -10,7 +10,6 @@ import { SubscriptionManager } from "../../infrastructure/managers/SubscriptionM
 import {
   trackPackageError,
   addPackageBreadcrumb,
-  trackPackageEvent,
 } from "@umituz/react-native-sentry";
 
 /**
@@ -112,7 +111,7 @@ export const usePurchasePackage = (userId: string | undefined) => {
         throw new Error("User not authenticated");
       }
 
-      trackPackageEvent("subscription", "purchase_started", {
+      addPackageBreadcrumb("subscription", "Purchase started", {
         packageId: pkg.identifier,
         userId,
       });
@@ -125,7 +124,7 @@ export const usePurchasePackage = (userId: string | undefined) => {
       const success = await SubscriptionManager.purchasePackage(pkg);
 
       if (success) {
-        trackPackageEvent("subscription", "purchase_success", {
+        addPackageBreadcrumb("subscription", "Purchase success", {
           packageId: pkg.identifier,
           userId,
         });
@@ -135,7 +134,7 @@ export const usePurchasePackage = (userId: string | undefined) => {
           userId,
         });
       } else {
-        trackPackageEvent("subscription", "purchase_cancelled", {
+        addPackageBreadcrumb("subscription", "Purchase cancelled", {
           packageId: pkg.identifier,
           userId,
         });
@@ -178,7 +177,7 @@ export const useRestorePurchase = (userId: string | undefined) => {
         throw new Error("User not authenticated");
       }
 
-      trackPackageEvent("subscription", "restore_started", {
+      addPackageBreadcrumb("subscription", "Restore started", {
         userId,
       });
 
@@ -189,7 +188,7 @@ export const useRestorePurchase = (userId: string | undefined) => {
       const success = await SubscriptionManager.restore();
 
       if (success) {
-        trackPackageEvent("subscription", "restore_success", {
+        addPackageBreadcrumb("subscription", "Restore success", {
           userId,
         });