@umituz/react-native-subscription 2.14.15 → 2.14.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.14.15",
+  "version": "2.14.17",
   "description": "Complete subscription management with RevenueCat, paywall UI, and credits system for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -51,7 +51,8 @@
     "@types/react": "~19.1.10",
     "@typescript-eslint/eslint-plugin": "^8.50.1",
     "@typescript-eslint/parser": "^8.50.1",
-    "@umituz/react-native-auth": "^2.7.3",
+    "@umituz/react-native-auth": "*",
+    "@umituz/react-native-storage": "*",
     "@umituz/react-native-design-system": "*",
     "@umituz/react-native-firebase": "*",
     "@umituz/react-native-legal": "*",

package/src/index.ts

@@ -317,6 +317,13 @@ export {
   type UsePremiumResult,
 } from "./presentation/hooks/usePremium";
 
+export {
+  useSubscriptionStatus,
+  subscriptionStatusQueryKeys,
+  type SubscriptionStatusResult,
+  type UseSubscriptionStatusParams,
+} from "./presentation/hooks/useSubscriptionStatus";
+
 export {
   usePaywallOperations,
   type UsePaywallOperationsProps,

package/src/presentation/hooks/usePremium.ts

@@ -2,12 +2,16 @@
  * usePremium Hook
  * Complete subscription management for 100+ apps
  * Works for both authenticated and anonymous users
+ *
+ * IMPORTANT: isPremium is based on actual RevenueCat subscription status,
+ * NOT on whether credits document exists.
  */
 
 import { useCallback } from 'react';
 import type { PurchasesPackage } from 'react-native-purchases';
 import type { UserCredits } from '../../domain/entities/Credits';
 import { useCredits } from './useCredits';
+import { useSubscriptionStatus } from './useSubscriptionStatus';
 import {
   useSubscriptionPackages,
   usePurchasePackage,
@@ -54,6 +58,13 @@ export const usePremium = (userId?: string): UsePremiumResult => {
     console.log('[DEBUG usePremium] Hook called', { userId: userId || 'ANONYMOUS' });
   }
 
+  // Fetch real subscription status from RevenueCat
+  const { isPremium: subscriptionActive, isLoading: statusLoading } =
+    useSubscriptionStatus({
+      userId,
+      enabled: !!userId,
+    });
+
   // Fetch user credits (server state)
   const { credits, isLoading: creditsLoading } = useCredits({
     userId,
@@ -70,7 +81,8 @@ export const usePremium = (userId?: string): UsePremiumResult => {
       packagesCount: packages?.length || 0,
       packagesLoading,
       creditsLoading,
-      isPremium: credits !== null,
+      statusLoading,
+      isPremium: subscriptionActive,
     });
   }
 
@@ -82,8 +94,8 @@ export const usePremium = (userId?: string): UsePremiumResult => {
   const { showPaywall, setShowPaywall, closePaywall, openPaywall } =
     usePaywallVisibility();
 
-  // Premium status = has credits
-  const isPremium = credits !== null;
+  // Premium status = actual subscription status from RevenueCat
+  const isPremium = subscriptionActive;
 
   // Purchase handler with proper error handling
   const handlePurchase = useCallback(
@@ -117,6 +129,7 @@ export const usePremium = (userId?: string): UsePremiumResult => {
   return {
     isPremium,
     isLoading:
+      statusLoading ||
       creditsLoading ||
       packagesLoading ||
       purchaseMutation.isPending ||

package/src/presentation/hooks/useSubscriptionSettingsConfig.ts

@@ -4,9 +4,9 @@
  * Package-driven: all logic handled internally
  */
 
-import { useMemo, useCallback } from "react";
-import { Linking } from "react-native";
+import { useMemo } from "react";
 import { useCredits } from "./useCredits";
+import { useSubscriptionStatus } from "./useSubscriptionStatus";
 import { useCustomerInfo } from "../../revenuecat/presentation/hooks/useCustomerInfo";
 import { usePaywallVisibility } from "./usePaywallVisibility";
 import {
@@ -45,11 +45,15 @@ export const useSubscriptionSettingsConfig = (
 
   // Internal hooks
   const { credits } = useCredits({ userId, enabled: !!userId });
+  const { isPremium: subscriptionActive } = useSubscriptionStatus({
+    userId,
+    enabled: !!userId,
+  });
   const { customerInfo } = useCustomerInfo();
   const { openPaywall } = usePaywallVisibility();
 
-  // Premium status from credits
-  const isPremium = credits !== null;
+  // Premium status from actual RevenueCat subscription
+  const isPremium = subscriptionActive;
 
   // RevenueCat entitlement info
   const premiumEntitlement = customerInfo?.entitlements.active["premium"];
@@ -74,14 +78,8 @@ export const useSubscriptionSettingsConfig = (
     [expiresAtIso]
   );
 
-  // Subscription press handler
-  const handleSubscriptionPress = useCallback(() => {
-    if (isPremium) {
-      Linking.openURL("https://apps.apple.com/account/subscriptions");
-    } else {
-      openPaywall();
-    }
-  }, [isPremium, openPaywall]);
+  // Subscription press handler - always opens paywall for upgrade
+  const handleSubscriptionPress = openPaywall;
 
   // Status type
   const statusType: SubscriptionStatusType = isPremium ? "active" : "none";
@@ -140,7 +138,6 @@ export const useSubscriptionSettingsConfig = (
           manageButton: translations.manageButton,
           upgradeButton: translations.upgradeButton,
         },
-        onManageSubscription: handleSubscriptionPress,
         onUpgrade: openPaywall,
       },
     }),
@@ -154,7 +151,6 @@ export const useSubscriptionSettingsConfig = (
       daysRemaining,
       willRenew,
       creditsArray,
-      handleSubscriptionPress,
       openPaywall,
     ]
   );

package/src/presentation/hooks/useSubscriptionStatus.ts

@@ -0,0 +1,73 @@
+/**
+ * useSubscriptionStatus Hook
+ *
+ * TanStack Query hook for checking real subscription status from RevenueCat.
+ * This provides the actual premium status based on entitlements, not credits.
+ */
+
+import { useQuery } from "@tanstack/react-query";
+import { SubscriptionManager } from "../../revenuecat/infrastructure/managers/SubscriptionManager";
+
+declare const __DEV__: boolean;
+
+export const subscriptionStatusQueryKeys = {
+  all: ["subscriptionStatus"] as const,
+  user: (userId: string) => ["subscriptionStatus", userId] as const,
+};
+
+export interface SubscriptionStatusResult {
+  isPremium: boolean;
+  expirationDate: Date | null;
+  isLoading: boolean;
+  error: Error | null;
+  refetch: () => void;
+}
+
+export interface UseSubscriptionStatusParams {
+  userId: string | undefined;
+  enabled?: boolean;
+}
+
+/**
+ * Check real subscription status from RevenueCat
+ *
+ * @param userId - User ID
+ * @param enabled - Whether to enable the query
+ * @returns Subscription status with isPremium flag
+ */
+export const useSubscriptionStatus = ({
+  userId,
+  enabled = true,
+}: UseSubscriptionStatusParams): SubscriptionStatusResult => {
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: subscriptionStatusQueryKeys.user(userId ?? ""),
+    queryFn: async () => {
+      if (!userId) {
+        return { isPremium: false, expirationDate: null };
+      }
+
+      const status = await SubscriptionManager.checkPremiumStatus();
+
+      if (__DEV__) {
+        console.log("[useSubscriptionStatus] Status from RevenueCat", {
+          userId,
+          isPremium: status.isPremium,
+          expirationDate: status.expirationDate,
+        });
+      }
+
+      return status;
+    },
+    enabled: enabled && !!userId && SubscriptionManager.isInitialized(),
+    staleTime: 30 * 1000,
+    gcTime: 5 * 60 * 1000,
+  });
+
+  return {
+    isPremium: data?.isPremium ?? false,
+    expirationDate: data?.expirationDate ?? null,
+    isLoading,
+    error: error as Error | null,
+    refetch,
+  };
+};

package/src/presentation/screens/SubscriptionDetailScreen.tsx

@@ -4,8 +4,8 @@
  * No business logic - pure presentation
  */
 
-import React from "react";
-import { StyleSheet } from "react-native";
+import React, { useMemo } from "react";
+import { StyleSheet, View } from "react-native";
 import { useAppDesignTokens, ScreenLayout } from "@umituz/react-native-design-system";
 import { SubscriptionHeader } from "./components/SubscriptionHeader";
 import { CreditsList } from "./components/CreditsList";
@@ -59,6 +59,26 @@ export const SubscriptionDetailScreen: React.FC<
 > = ({ config }) => {
     const tokens = useAppDesignTokens();
     const showCredits = config.credits && config.credits.length > 0;
+    const showUpgradeButton = !config.isPremium && config.onUpgrade;
+
+    const styles = useMemo(
+        () =>
+            StyleSheet.create({
+                content: {
+                    flexGrow: 1,
+                    padding: tokens.spacing.lg,
+                    gap: tokens.spacing.lg,
+                },
+                cardsContainer: {
+                    gap: tokens.spacing.lg,
+                },
+                spacer: {
+                    flex: 1,
+                    minHeight: tokens.spacing.xl,
+                },
+            }),
+        [tokens]
+    );
 
     return (
         <ScreenLayout
@@ -75,41 +95,38 @@ export const SubscriptionDetailScreen: React.FC<
                 ) : undefined
             }
         >
-            <SubscriptionHeader
-                statusType={config.statusType}
-                isPremium={config.isPremium}
-                isLifetime={config.isLifetime}
-                expirationDate={config.expirationDate}
-                purchaseDate={config.purchaseDate}
-                daysRemaining={config.daysRemaining}
-                translations={config.translations}
-            />
+            <View style={styles.cardsContainer}>
+                <SubscriptionHeader
+                    statusType={config.statusType}
+                    isPremium={config.isPremium}
+                    isLifetime={config.isLifetime}
+                    expirationDate={config.expirationDate}
+                    purchaseDate={config.purchaseDate}
+                    daysRemaining={config.daysRemaining}
+                    translations={config.translations}
+                />
+
+                {showCredits && (
+                    <CreditsList
+                        credits={config.credits!}
+                        title={
+                            config.translations.usageTitle || config.translations.creditsTitle
+                        }
+                        description={config.translations.creditsResetInfo}
+                        remainingLabel={config.translations.remainingLabel}
+                    />
+                )}
+            </View>
+
+            <View style={styles.spacer} />
 
-            {showCredits && (
-                <CreditsList
-                    credits={config.credits!}
-                    title={
-                        config.translations.usageTitle || config.translations.creditsTitle
-                    }
-                    description={config.translations.creditsResetInfo}
-                    remainingLabel={config.translations.remainingLabel}
+            {showUpgradeButton && (
+                <SubscriptionActions
+                    isPremium={config.isPremium}
+                    upgradeButtonLabel={config.translations.upgradeButton}
+                    onUpgrade={config.onUpgrade}
                 />
             )}
-
-            <SubscriptionActions
-                isPremium={config.isPremium}
-                manageButtonLabel={config.translations.manageButton}
-                upgradeButtonLabel={config.translations.upgradeButton}
-                onManage={config.onManageSubscription}
-                onUpgrade={config.onUpgrade}
-            />
         </ScreenLayout>
     );
 };
-
-const styles = StyleSheet.create({
-  content: {
-    padding: 16,
-    gap: 16,
-  },
-});

package/src/presentation/screens/components/SubscriptionActions.tsx

@@ -1,77 +1,56 @@
 /**
  * Subscription Actions Component
- * Displays action buttons for subscription management
+ * Displays upgrade button for non-premium users
  */
 
-import React from "react";
+import React, { useMemo } from "react";
 import { View, StyleSheet, TouchableOpacity } from "react-native";
 import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
 
 interface SubscriptionActionsProps {
     isPremium: boolean;
-    manageButtonLabel?: string;
     upgradeButtonLabel?: string;
-    onManage?: () => void;
     onUpgrade?: () => void;
 }
 
 export const SubscriptionActions: React.FC<SubscriptionActionsProps> = ({
     isPremium,
-    manageButtonLabel,
     upgradeButtonLabel,
-    onManage,
     onUpgrade,
 }) => {
     const tokens = useAppDesignTokens();
 
+    const styles = useMemo(
+        () =>
+            StyleSheet.create({
+                container: {
+                    paddingBottom: tokens.spacing.xl,
+                },
+                primaryButton: {
+                    paddingVertical: tokens.spacing.md,
+                    borderRadius: tokens.borderRadius.lg,
+                    alignItems: "center",
+                    backgroundColor: tokens.colors.primary,
+                },
+                buttonText: {
+                    color: tokens.colors.onPrimary,
+                    fontWeight: "700",
+                },
+            }),
+        [tokens]
+    );
+
+    if (isPremium || !onUpgrade || !upgradeButtonLabel) {
+        return null;
+    }
+
     return (
         <View style={styles.container}>
-            {isPremium && onManage && manageButtonLabel && (
-                <TouchableOpacity
-                    style={[
-                        styles.secondaryButton,
-                        { backgroundColor: tokens.colors.surfaceSecondary },
-                    ]}
-                    onPress={onManage}
-                >
-                    <AtomicText
-                        type="titleMedium"
-                        style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}
-                    >
-                        {manageButtonLabel}
-                    </AtomicText>
-                </TouchableOpacity>
-            )}
-            {!isPremium && onUpgrade && upgradeButtonLabel && (
-                <TouchableOpacity
-                    style={[styles.primaryButton, { backgroundColor: tokens.colors.primary }]}
-                    onPress={onUpgrade}
-                >
-                    <AtomicText
-                        type="titleMedium"
-                        style={{ color: tokens.colors.onPrimary, fontWeight: "700" }}
-                    >
-                        {upgradeButtonLabel}
-                    </AtomicText>
-                </TouchableOpacity>
-            )}
+            <TouchableOpacity style={styles.primaryButton} onPress={onUpgrade}>
+                <AtomicText type="titleMedium" style={styles.buttonText}>
+                    {upgradeButtonLabel}
+                </AtomicText>
+            </TouchableOpacity>
         </View>
     );
 };
-
-const styles = StyleSheet.create({
-    container: {
-        gap: 12,
-        paddingBottom: 32,
-    },
-    primaryButton: {
-        paddingVertical: 16,
-        borderRadius: 12,
-        alignItems: "center",
-    },
-    secondaryButton: {
-        paddingVertical: 16,
-        borderRadius: 12,
-        alignItems: "center",
-    },
-});