@umituz/react-native-subscription 2.14.16 → 2.14.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.14.16",
+  "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",

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/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",
-    },
-});