@umituz/react-native-subscription 2.0.0 → 2.1.1

package/package.json

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

@@ -124,6 +124,18 @@ export {
   type SubscriptionSectionConfig,
 } from "./presentation/components/sections/SubscriptionSection";
 
+// =============================================================================
+// PRESENTATION LAYER - Subscription Detail Screen
+// =============================================================================
+
+export {
+  SubscriptionDetailScreen,
+  type SubscriptionDetailScreenProps,
+  type SubscriptionDetailConfig,
+  type SubscriptionDetailTranslations,
+} from "./presentation/screens/SubscriptionDetailScreen";
+
+
 // =============================================================================
 // UTILS - Date & Price
 // =============================================================================

package/src/presentation/components/sections/SubscriptionSection.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from "react";
-import { View } from "react-native";
+import { View, TouchableOpacity } from "react-native";
 import type { StyleProp, ViewStyle } from "react-native";
 import {
   PremiumDetailsCard,
@@ -35,6 +35,8 @@ export interface SubscriptionSectionConfig {
   onManageSubscription?: () => void;
   /** Handler for upgrade button */
   onUpgrade?: () => void;
+  /** Handler for when section is tapped (navigate to detail screen) */
+  onPress?: () => void;
 }
 
 export interface SubscriptionSectionProps {
@@ -46,20 +48,32 @@ export const SubscriptionSection: React.FC<SubscriptionSectionProps> = ({
   config,
   containerStyle,
 }) => {
-  return (
-    <View style={containerStyle}>
-      <PremiumDetailsCard
-        statusType={config.statusType}
-        isPremium={config.isPremium}
-        expirationDate={config.expirationDate}
-        purchaseDate={config.purchaseDate}
-        isLifetime={config.isLifetime}
-        daysRemaining={config.daysRemaining}
-        credits={config.credits}
-        translations={config.translations}
-        onManageSubscription={config.onManageSubscription}
-        onUpgrade={config.onUpgrade}
-      />
-    </View>
+  const content = (
+    <PremiumDetailsCard
+      statusType={config.statusType}
+      isPremium={config.isPremium}
+      expirationDate={config.expirationDate}
+      purchaseDate={config.purchaseDate}
+      isLifetime={config.isLifetime}
+      daysRemaining={config.daysRemaining}
+      credits={config.credits}
+      translations={config.translations}
+      onManageSubscription={config.onManageSubscription}
+      onUpgrade={config.onUpgrade}
+    />
   );
+
+  if (config.onPress) {
+    return (
+      <TouchableOpacity
+        style={containerStyle}
+        onPress={config.onPress}
+        activeOpacity={0.7}
+      >
+        {content}
+      </TouchableOpacity>
+    );
+  }
+
+  return <View style={containerStyle}>{content}</View>;
 };

package/src/presentation/hooks/useFeatureGate.ts

@@ -28,6 +28,8 @@
 import { useCallback } from "react";
 import { useCredits } from "./useCredits";
 
+declare const __DEV__: boolean;
+
 export interface UseFeatureGateParams {
   /** User ID for credits check */
   userId: string | undefined;
@@ -66,12 +68,39 @@ export function useFeatureGate(
   // User is premium if they have credits
   const isPremium = credits !== null;
 
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    // eslint-disable-next-line no-console
+    console.log("[useFeatureGate] Hook state", {
+      userId,
+      isAuthenticated,
+      isPremium,
+      hasCredits: credits !== null,
+      isLoading,
+    });
+  }
+
   const requireFeature = useCallback(
     (action: () => void | Promise<void>) => {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        // eslint-disable-next-line no-console
+        console.log("[useFeatureGate] requireFeature() called", {
+          isAuthenticated,
+          isPremium,
+        });
+      }
+
       // Step 1: Check authentication
       if (!isAuthenticated) {
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+          // eslint-disable-next-line no-console
+          console.log("[useFeatureGate] NOT authenticated → showing auth modal");
+        }
         // After auth, re-check premium before executing
         onShowAuthModal(() => {
+          if (typeof __DEV__ !== "undefined" && __DEV__) {
+            // eslint-disable-next-line no-console
+            console.log("[useFeatureGate] Auth modal callback → executing action");
+          }
           // This callback runs after successful auth
           // The component will re-render with new auth state
           // and user can try the action again
@@ -82,11 +111,19 @@ export function useFeatureGate(
 
       // Step 2: Check premium (has credits from TanStack Query)
       if (!isPremium) {
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+          // eslint-disable-next-line no-console
+          console.log("[useFeatureGate] NOT premium → showing paywall");
+        }
         onShowPaywall();
         return;
       }
 
       // Step 3: User is authenticated and premium - execute action
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        // eslint-disable-next-line no-console
+        console.log("[useFeatureGate] PREMIUM user → executing action");
+      }
       action();
     },
     [isAuthenticated, isPremium, onShowAuthModal, onShowPaywall]

package/src/presentation/screens/SubscriptionDetailScreen.tsx

@@ -0,0 +1,101 @@
+/**
+ * Subscription Detail Screen
+ * Composition of subscription components
+ * No business logic - pure presentation
+ */
+
+import React from "react";
+import { ScrollView, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { SubscriptionHeader } from "./components/SubscriptionHeader";
+import { CreditsList } from "./components/CreditsList";
+import { SubscriptionActions } from "./components/SubscriptionActions";
+import type { SubscriptionStatusType } from "../components/details/PremiumStatusBadge";
+import type { CreditInfo } from "../components/details/PremiumDetailsCard";
+
+export interface SubscriptionDetailTranslations {
+    title: string;
+    statusLabel?: string;
+    statusActive?: string;
+    statusExpired?: string;
+    statusFree?: string;
+    expiresLabel?: string;
+    purchasedLabel?: string;
+    lifetimeLabel?: string;
+    creditsTitle?: string;
+    remainingLabel?: string;
+    usageTitle?: string;
+    manageButton?: string;
+    upgradeButton?: string;
+    creditsResetInfo?: string;
+}
+
+export interface SubscriptionDetailConfig {
+    statusType: SubscriptionStatusType;
+    isPremium: boolean;
+    expirationDate?: string | null;
+    purchaseDate?: string | null;
+    isLifetime?: boolean;
+    daysRemaining?: number | null;
+    credits?: CreditInfo[];
+    translations: SubscriptionDetailTranslations;
+    onManageSubscription?: () => void;
+    onUpgrade?: () => void;
+}
+
+export interface SubscriptionDetailScreenProps {
+    config: SubscriptionDetailConfig;
+}
+
+export const SubscriptionDetailScreen: React.FC<
+    SubscriptionDetailScreenProps
+> = ({ config }) => {
+    const tokens = useAppDesignTokens();
+    const showCredits = config.credits && config.credits.length > 0;
+
+    return (
+        <ScrollView
+            style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+            contentContainerStyle={styles.content}
+        >
+            <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}
+                />
+            )}
+
+            <SubscriptionActions
+                isPremium={config.isPremium}
+                manageButtonLabel={config.translations.manageButton}
+                upgradeButtonLabel={config.translations.upgradeButton}
+                onManage={config.onManageSubscription}
+                onUpgrade={config.onUpgrade}
+            />
+        </ScrollView>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    content: {
+        padding: 16,
+        gap: 16,
+    },
+});

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

@@ -0,0 +1,103 @@
+/**
+ * Credit Item Component
+ * Displays individual credit usage with progress bar
+ */
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+
+interface CreditItemProps {
+    label: string;
+    current: number;
+    total: number;
+    remainingLabel?: string;
+}
+
+export const CreditItem: React.FC<CreditItemProps> = ({
+    label,
+    current,
+    total,
+    remainingLabel = "remaining",
+}) => {
+    const tokens = useAppDesignTokens();
+    const percentage = total > 0 ? (current / total) * 100 : 0;
+    const isLow = percentage <= 20;
+    const isMedium = percentage > 20 && percentage <= 50;
+
+    const getColor = () => {
+        if (isLow) return tokens.colors.error;
+        if (isMedium) return tokens.colors.warning;
+        return tokens.colors.success;
+    };
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.header}>
+                <Text style={[styles.label, { color: tokens.colors.textPrimary }]}>
+                    {label}
+                </Text>
+                <View style={[styles.badge, { backgroundColor: tokens.colors.surfaceSecondary }]}>
+                    <Text style={[styles.count, { color: getColor() }]}>
+                        {current} / {total}
+                    </Text>
+                </View>
+            </View>
+            <View
+                style={[
+                    styles.progressBar,
+                    { backgroundColor: tokens.colors.surfaceSecondary },
+                ]}
+            >
+                <View
+                    style={[
+                        styles.progressFill,
+                        {
+                            width: `${percentage}%`,
+                            backgroundColor: getColor(),
+                        },
+                    ]}
+                />
+            </View>
+            <Text style={[styles.remaining, { color: tokens.colors.textSecondary }]}>
+                {current} {remainingLabel}
+            </Text>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        gap: 8,
+    },
+    header: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    label: {
+        fontSize: 15,
+        fontWeight: "500",
+    },
+    badge: {
+        paddingHorizontal: 12,
+        paddingVertical: 4,
+        borderRadius: 12,
+    },
+    count: {
+        fontSize: 13,
+        fontWeight: "600",
+    },
+    progressBar: {
+        height: 8,
+        borderRadius: 4,
+        overflow: "hidden",
+    },
+    progressFill: {
+        height: "100%",
+        borderRadius: 4,
+    },
+    remaining: {
+        fontSize: 12,
+    },
+});

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

@@ -0,0 +1,71 @@
+/**
+ * Credits List Component
+ * Displays list of credit usages
+ */
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { CreditItem } from "./CreditItem";
+import type { CreditInfo } from "../../components/details/PremiumDetailsCard";
+
+interface CreditsListProps {
+    credits: CreditInfo[];
+    title?: string;
+    description?: string;
+    remainingLabel?: string;
+}
+
+export const CreditsList: React.FC<CreditsListProps> = ({
+    credits,
+    title,
+    description,
+    remainingLabel,
+}) => {
+    const tokens = useAppDesignTokens();
+
+    return (
+        <View style={[styles.container, { backgroundColor: tokens.colors.surface }]}>
+            {title && (
+                <Text style={[styles.title, { color: tokens.colors.textPrimary }]}>
+                    {title}
+                </Text>
+            )}
+            {description && (
+                <Text style={[styles.description, { color: tokens.colors.textSecondary }]}>
+                    {description}
+                </Text>
+            )}
+            <View style={styles.list}>
+                {credits.map((credit) => (
+                    <CreditItem
+                        key={credit.id}
+                        label={credit.label}
+                        current={credit.current}
+                        total={credit.total}
+                        remainingLabel={remainingLabel}
+                    />
+                ))}
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: 16,
+        padding: 20,
+        gap: 16,
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: "700",
+    },
+    description: {
+        fontSize: 14,
+        marginTop: -8,
+    },
+    list: {
+        gap: 16,
+    },
+});

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

@@ -0,0 +1,89 @@
+/**
+ * Subscription Actions Component
+ * Displays action buttons for subscription management
+ */
+
+import React from "react";
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+
+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();
+
+    return (
+        <View style={styles.container}>
+            {isPremium && onManage && manageButtonLabel && (
+                <TouchableOpacity
+                    style={[
+                        styles.secondaryButton,
+                        { backgroundColor: tokens.colors.surfaceSecondary },
+                    ]}
+                    onPress={onManage}
+                >
+                    <Text
+                        style={[
+                            styles.secondaryButtonText,
+                            { color: tokens.colors.textPrimary },
+                        ]}
+                    >
+                        {manageButtonLabel}
+                    </Text>
+                </TouchableOpacity>
+            )}
+            {!isPremium && onUpgrade && upgradeButtonLabel && (
+                <TouchableOpacity
+                    style={[styles.primaryButton, { backgroundColor: tokens.colors.primary }]}
+                    onPress={onUpgrade}
+                >
+                    <Text
+                        style={[
+                            styles.primaryButtonText,
+                            { color: tokens.colors.onPrimary },
+                        ]}
+                    >
+                        {upgradeButtonLabel}
+                    </Text>
+                </TouchableOpacity>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        gap: 12,
+        paddingBottom: 32,
+    },
+    primaryButton: {
+        paddingVertical: 16,
+        borderRadius: 12,
+        alignItems: "center",
+    },
+    primaryButtonText: {
+        fontSize: 16,
+        fontWeight: "700",
+    },
+    secondaryButton: {
+        paddingVertical: 16,
+        borderRadius: 12,
+        alignItems: "center",
+    },
+    secondaryButtonText: {
+        fontSize: 16,
+        fontWeight: "600",
+    },
+});

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

@@ -0,0 +1,156 @@
+/**
+ * Subscription Header Component
+ * Displays status badge and subscription details
+ */
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import {
+    PremiumStatusBadge,
+    type SubscriptionStatusType,
+} from "../../components/details/PremiumStatusBadge";
+
+interface SubscriptionHeaderTranslations {
+    title: string;
+    statusLabel?: string;
+    statusActive?: string;
+    statusExpired?: string;
+    statusFree?: string;
+    expiresLabel?: string;
+    purchasedLabel?: string;
+    lifetimeLabel?: string;
+}
+
+interface SubscriptionHeaderProps {
+    statusType: SubscriptionStatusType;
+    isPremium: boolean;
+    isLifetime?: boolean;
+    expirationDate?: string | null;
+    purchaseDate?: string | null;
+    daysRemaining?: number | null;
+    translations: SubscriptionHeaderTranslations;
+}
+
+export const SubscriptionHeader: React.FC<SubscriptionHeaderProps> = ({
+    statusType,
+    isPremium,
+    isLifetime,
+    expirationDate,
+    purchaseDate,
+    daysRemaining,
+    translations,
+}) => {
+    const tokens = useAppDesignTokens();
+    const showExpiring =
+        daysRemaining !== null &&
+        daysRemaining !== undefined &&
+        daysRemaining <= 7;
+
+    return (
+        <View style={[styles.container, { backgroundColor: tokens.colors.surface }]}>
+            <View style={styles.header}>
+                <Text style={[styles.title, { color: tokens.colors.textPrimary }]}>
+                    {translations.title}
+                </Text>
+                <PremiumStatusBadge
+                    status={statusType}
+                    activeLabel={translations.statusActive}
+                    expiredLabel={translations.statusExpired}
+                    noneLabel={translations.statusFree}
+                />
+            </View>
+
+            {isPremium && (
+                <View style={styles.details}>
+                    {isLifetime ? (
+                        <DetailRow
+                            label={translations.statusLabel || "Subscription"}
+                            value={translations.lifetimeLabel || "Lifetime Access"}
+                            tokens={tokens}
+                        />
+                    ) : (
+                        <>
+                            {expirationDate && (
+                                <DetailRow
+                                    label={translations.expiresLabel || "Expires"}
+                                    value={expirationDate}
+                                    highlight={showExpiring}
+                                    tokens={tokens}
+                                />
+                            )}
+                            {purchaseDate && (
+                                <DetailRow
+                                    label={translations.purchasedLabel || "Purchased"}
+                                    value={purchaseDate}
+                                    tokens={tokens}
+                                />
+                            )}
+                        </>
+                    )}
+                </View>
+            )}
+        </View>
+    );
+};
+
+interface DetailRowProps {
+    label: string;
+    value: string;
+    highlight?: boolean;
+    tokens: ReturnType<typeof useAppDesignTokens>;
+}
+
+const DetailRow: React.FC<DetailRowProps> = ({
+    label,
+    value,
+    highlight,
+    tokens,
+}) => (
+    <View style={styles.row}>
+        <Text style={[styles.label, { color: tokens.colors.textSecondary }]}>
+            {label}
+        </Text>
+        <Text
+            style={[
+                styles.value,
+                { color: highlight ? tokens.colors.warning : tokens.colors.textPrimary },
+            ]}
+        >
+            {value}
+        </Text>
+    </View>
+);
+
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: 16,
+        padding: 20,
+        gap: 16,
+    },
+    header: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: "700",
+    },
+    details: {
+        gap: 12,
+        paddingTop: 12,
+    },
+    row: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    label: {
+        fontSize: 15,
+    },
+    value: {
+        fontSize: 15,
+        fontWeight: "600",
+    },
+});