@umituz/react-native-subscription 2.14.27 → 2.14.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.14.27",
+  "version": "2.14.28",
   "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/index.ts

@@ -174,6 +174,9 @@ export {
   type SubscriptionDetailTranslations,
   type DevTestActions,
   type DevToolsConfig,
+  type UpgradeBenefit,
+  type UpgradePromptConfig,
+  type UpgradePromptProps,
 } from "./presentation/screens/SubscriptionDetailScreen";
 
 export type {

package/src/presentation/hooks/useSubscriptionSettingsConfig.ts

@@ -42,6 +42,7 @@ export const useSubscriptionSettingsConfig = (
     currentLanguage = "en",
     translations,
     getCreditLimit,
+    upgradePrompt,
   } = params;
 
   // Internal hooks
@@ -147,6 +148,7 @@ export const useSubscriptionSettingsConfig = (
           upgradeButton: translations.upgradeButton,
         },
         onUpgrade: openPaywall,
+        upgradePrompt,
       },
     }),
     [
@@ -160,6 +162,7 @@ export const useSubscriptionSettingsConfig = (
       willRenew,
       creditsArray,
       openPaywall,
+      upgradePrompt,
     ]
   );
 

package/src/presentation/screens/SubscriptionDetailScreen.tsx

@@ -6,10 +6,13 @@
 
 import React, { useMemo } from "react";
 import { StyleSheet, View } from "react-native";
-import { useAppDesignTokens, ScreenLayout } from "@umituz/react-native-design-system";
+import {
+  useAppDesignTokens,
+  ScreenLayout,
+} from "@umituz/react-native-design-system";
 import { SubscriptionHeader } from "./components/SubscriptionHeader";
 import { CreditsList } from "./components/CreditsList";
-import { SubscriptionActions } from "./components/SubscriptionActions";
+import { UpgradePrompt } from "./components/UpgradePrompt";
 import { DevTestSection } from "./components/DevTestSection";
 import type { SubscriptionDetailScreenProps } from "../types/SubscriptionDetailTypes";
 
@@ -19,14 +22,17 @@ export type {
   SubscriptionDetailScreenProps,
   DevTestActions,
   DevToolsConfig,
+  UpgradeBenefit,
+  UpgradePromptConfig,
+  UpgradePromptProps,
 } from "../types/SubscriptionDetailTypes";
 
-export const SubscriptionDetailScreen: React.FC<SubscriptionDetailScreenProps> = ({
-  config,
-}) => {
+export const SubscriptionDetailScreen: React.FC<
+  SubscriptionDetailScreenProps
+> = ({ config }) => {
   const tokens = useAppDesignTokens();
-  const showCredits = config.credits && config.credits.length > 0;
-  const showUpgradeButton = !config.isPremium && config.onUpgrade;
+  const showCredits = config.isPremium && config.credits && config.credits.length > 0;
+  const showUpgradePrompt = !config.isPremium && config.upgradePrompt;
 
   const styles = useMemo(
     () =>
@@ -62,38 +68,42 @@ export const SubscriptionDetailScreen: React.FC<SubscriptionDetailScreenProps> =
         ) : undefined
       }
     >
-      <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}
-        />
+      {config.isPremium ? (
+        <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}
+          {showCredits && (
+            <CreditsList
+              credits={config.credits!}
+              title={
+                config.translations.usageTitle || config.translations.creditsTitle
+              }
+              description={config.translations.creditsResetInfo}
+              remainingLabel={config.translations.remainingLabel}
+            />
+          )}
+        </View>
+      ) : (
+        showUpgradePrompt && (
+          <UpgradePrompt
+            title={config.upgradePrompt!.title}
+            subtitle={config.upgradePrompt!.subtitle}
+            benefits={config.upgradePrompt!.benefits}
+            upgradeButtonLabel={config.translations.upgradeButton}
+            onUpgrade={config.onUpgrade}
           />
-        )}
-      </View>
+        )
+      )}
 
       <View style={styles.spacer} />
-
-      {showUpgradeButton && (
-        <SubscriptionActions
-          isPremium={config.isPremium}
-          upgradeButtonLabel={config.translations.upgradeButton}
-          onUpgrade={config.onUpgrade}
-        />
-      )}
     </ScreenLayout>
   );
 };

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

@@ -0,0 +1,140 @@
+/**
+ * Upgrade Prompt Component
+ * Displays premium benefits for free users to encourage upgrade
+ */
+
+import React, { useMemo } from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import {
+  useAppDesignTokens,
+  AtomicText,
+  AtomicIcon,
+} from "@umituz/react-native-design-system";
+import type { UpgradePromptProps } from "../../types/SubscriptionDetailTypes";
+
+export const UpgradePrompt: React.FC<UpgradePromptProps> = ({
+  title,
+  subtitle,
+  benefits,
+  upgradeButtonLabel,
+  onUpgrade,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          gap: tokens.spacing.lg,
+        },
+        header: {
+          alignItems: "center",
+          gap: tokens.spacing.md,
+          paddingVertical: tokens.spacing.md,
+        },
+        iconContainer: {
+          width: 64,
+          height: 64,
+          borderRadius: 32,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: tokens.colors.primaryContainer,
+        },
+        title: {
+          fontWeight: "700",
+          textAlign: "center",
+        },
+        subtitle: {
+          textAlign: "center",
+          lineHeight: 22,
+        },
+        benefitsCard: {
+          borderRadius: tokens.borderRadius.lg,
+          padding: tokens.spacing.lg,
+          gap: tokens.spacing.md,
+          backgroundColor: tokens.colors.surface,
+        },
+        benefitItem: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: tokens.spacing.md,
+        },
+        benefitIconWrapper: {
+          width: 32,
+          height: 32,
+          borderRadius: 16,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: tokens.colors.primaryContainer,
+        },
+        benefitText: {
+          flex: 1,
+        },
+        upgradeButton: {
+          paddingVertical: tokens.spacing.lg,
+          borderRadius: tokens.borderRadius.lg,
+          alignItems: "center",
+          backgroundColor: tokens.colors.primary,
+        },
+        buttonText: {
+          color: tokens.colors.onPrimary,
+          fontWeight: "700",
+        },
+      }),
+    [tokens]
+  );
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <View style={styles.iconContainer}>
+          <AtomicIcon name="Sparkles" customSize={32} color="primary" />
+        </View>
+        <AtomicText
+          type="headlineSmall"
+          style={[styles.title, { color: tokens.colors.textPrimary }]}
+        >
+          {title}
+        </AtomicText>
+        {subtitle && (
+          <AtomicText
+            type="bodyMedium"
+            style={[styles.subtitle, { color: tokens.colors.textSecondary }]}
+          >
+            {subtitle}
+          </AtomicText>
+        )}
+      </View>
+
+      {benefits && benefits.length > 0 && (
+        <View style={styles.benefitsCard}>
+          {benefits.map((benefit, index) => (
+            <View key={index} style={styles.benefitItem}>
+              <View style={styles.benefitIconWrapper}>
+                <AtomicIcon
+                  name={benefit.icon || "Check"}
+                  customSize={16}
+                  color="primary"
+                />
+              </View>
+              <AtomicText
+                type="bodyMedium"
+                style={[styles.benefitText, { color: tokens.colors.textPrimary }]}
+              >
+                {benefit.text}
+              </AtomicText>
+            </View>
+          ))}
+        </View>
+      )}
+
+      {onUpgrade && upgradeButtonLabel && (
+        <TouchableOpacity style={styles.upgradeButton} onPress={onUpgrade}>
+          <AtomicText type="titleMedium" style={styles.buttonText}>
+            {upgradeButtonLabel}
+          </AtomicText>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};

package/src/presentation/types/SubscriptionDetailTypes.ts

@@ -40,6 +40,19 @@ export interface DevToolsConfig {
   title?: string;
 }
 
+/** Benefit item for upgrade prompt */
+export interface UpgradeBenefit {
+  icon?: string;
+  text: string;
+}
+
+/** Upgrade prompt configuration */
+export interface UpgradePromptConfig {
+  title: string;
+  subtitle?: string;
+  benefits?: UpgradeBenefit[];
+}
+
 /** Configuration for subscription detail screen */
 export interface SubscriptionDetailConfig {
   statusType: SubscriptionStatusType;
@@ -54,6 +67,7 @@ export interface SubscriptionDetailConfig {
   onManageSubscription?: () => void;
   onUpgrade?: () => void;
   devTools?: DevToolsConfig;
+  upgradePrompt?: UpgradePromptConfig;
 }
 
 /** Props for subscription detail screen */
@@ -111,3 +125,12 @@ export interface DevTestSectionProps {
   actions: DevTestActions;
   title?: string;
 }
+
+/** Props for upgrade prompt component */
+export interface UpgradePromptProps {
+  title: string;
+  subtitle?: string;
+  benefits?: UpgradeBenefit[];
+  upgradeButtonLabel?: string;
+  onUpgrade?: () => void;
+}

package/src/presentation/types/SubscriptionSettingsTypes.ts

@@ -4,9 +4,12 @@
  */
 
 import type { SubscriptionStatusType } from "../../domain/entities/SubscriptionStatus";
-import type { SubscriptionDetailConfig } from "./SubscriptionDetailTypes";
+import type {
+  SubscriptionDetailConfig,
+  UpgradePromptConfig,
+} from "./SubscriptionDetailTypes";
 
-export type { SubscriptionStatusType };
+export type { SubscriptionStatusType, UpgradePromptConfig };
 
 /** Configuration for settings list item */
 export interface SubscriptionSettingsItemConfig {
@@ -64,4 +67,6 @@ export interface UseSubscriptionSettingsConfigParams {
   translations: SubscriptionSettingsTranslations;
   /** Credit limit calculator */
   getCreditLimit?: (currentCredits: number) => number;
+  /** Upgrade prompt configuration for free users */
+  upgradePrompt?: UpgradePromptConfig;
 }