@umituz/react-native-subscription 2.12.16 → 2.12.18

package/src/presentation/components/details/PremiumDetailsCard.tsx

@@ -5,8 +5,8 @@
  */
 
 import React from "react";
-import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
 import { PremiumStatusBadge } from "./PremiumStatusBadge";
 import { DetailRow } from "./DetailRow";
 import { CreditRow } from "./CreditRow";
@@ -33,14 +33,15 @@ export const PremiumDetailsCard: React.FC<PremiumDetailsCardProps> = ({
     <View style={[styles.card, { backgroundColor: tokens.colors.surface }]}>
       {(isPremium || showCredits) && (
         <View style={styles.header}>
-          <Text style={[styles.title, { color: tokens.colors.text }]}>
+          <AtomicText type="titleLarge" style={{ color: tokens.colors.textPrimary }}>
             {translations.title}
-          </Text>
+          </AtomicText>
           <PremiumStatusBadge
             status={statusType}
             activeLabel={translations.statusActive}
             expiredLabel={translations.statusExpired}
             noneLabel={translations.statusFree}
+            canceledLabel={translations.statusCanceled}
           />
         </View>
       )}
@@ -48,12 +49,12 @@ export const PremiumDetailsCard: React.FC<PremiumDetailsCardProps> = ({
       {!isPremium && !showCredits && (
         <View style={styles.freeUserHeader}>
           <View style={styles.freeUserTextContainer}>
-            <Text style={[styles.freeUserTitle, { color: tokens.colors.text }]}>
+            <AtomicText type="headlineSmall" style={{ color: tokens.colors.textPrimary, fontWeight: "700" }}>
               {translations.title}
-            </Text>
-            <Text style={[styles.freeUserDescription, { color: tokens.colors.textSecondary }]}>
-              Unlock all features and create unlimited magic
-            </Text>
+            </AtomicText>
+            <AtomicText type="bodyMedium" style={{ color: tokens.colors.textSecondary }}>
+              {translations.freeDescription}
+            </AtomicText>
           </View>
         </View>
       )}
@@ -94,9 +95,9 @@ export const PremiumDetailsCard: React.FC<PremiumDetailsCardProps> = ({
           style={[styles.creditsSection, { borderTopColor: tokens.colors.border }]}
         >
           {translations.creditsTitle && (
-            <Text style={[styles.sectionTitle, { color: tokens.colors.text }]}>
+            <AtomicText type="labelMedium" style={[styles.sectionTitle, { color: tokens.colors.textPrimary }]}>
               {translations.creditsTitle}
-            </Text>
+            </AtomicText>
           )}
           {credits.map((credit) => (
             <CreditRow
@@ -119,9 +120,9 @@ export const PremiumDetailsCard: React.FC<PremiumDetailsCardProps> = ({
             ]}
             onPress={onManageSubscription}
           >
-            <Text style={[styles.secondaryButtonText, { color: tokens.colors.text }]}>
+            <AtomicText type="labelLarge" style={{ color: tokens.colors.textPrimary }}>
               {translations.manageButton}
-            </Text>
+            </AtomicText>
           </TouchableOpacity>
         )}
         {!isPremium && onUpgrade && translations.upgradeButton && (
@@ -129,11 +130,12 @@ export const PremiumDetailsCard: React.FC<PremiumDetailsCardProps> = ({
             style={[styles.premiumButton, { backgroundColor: tokens.colors.primary }]}
             onPress={onUpgrade}
           >
-            <Text
-              style={[styles.premiumButtonText, { color: tokens.colors.onPrimary }]}
+            <AtomicText
+              type="titleMedium"
+              style={{ color: tokens.colors.onPrimary, fontWeight: "700" }}
             >
               {translations.upgradeButton}
-            </Text>
+            </AtomicText>
           </TouchableOpacity>
         )}
       </View>
@@ -152,41 +154,23 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     alignItems: "center",
   },
-  title: {
-    fontSize: 18,
-    fontWeight: "600",
-  },
   freeUserHeader: {
     marginBottom: 4,
   },
   freeUserTextContainer: {
     gap: 6,
   },
-  freeUserTitle: {
-    fontSize: 20,
-    fontWeight: "700",
-  },
-  freeUserDescription: {
-    fontSize: 15,
-    fontWeight: "400",
-    lineHeight: 20,
-  },
   premiumButton: {
     paddingVertical: 16,
     borderRadius: 12,
     alignItems: "center",
   },
-  premiumButtonText: {
-    fontSize: 16,
-    fontWeight: "700",
-  },
   detailsSection: {
     gap: 8,
   },
   sectionTitle: {
-    fontSize: 14,
-    fontWeight: "600",
     marginBottom: 4,
+    fontWeight: "600",
   },
   creditsSection: {
     gap: 8,
@@ -196,22 +180,9 @@ const styles = StyleSheet.create({
   actionsSection: {
     gap: 8,
   },
-  primaryButton: {
-    paddingVertical: 12,
-    borderRadius: 8,
-    alignItems: "center",
-  },
-  primaryButtonText: {
-    fontSize: 14,
-    fontWeight: "600",
-  },
   secondaryButton: {
     paddingVertical: 12,
     borderRadius: 8,
     alignItems: "center",
   },
-  secondaryButtonText: {
-    fontSize: 14,
-    fontWeight: "500",
-  },
 });

package/src/presentation/components/details/PremiumDetailsCardTypes.ts

@@ -14,6 +14,7 @@ export interface CreditInfo {
 
 export interface PremiumDetailsTranslations {
   title: string;
+  freeDescription?: string;
   statusLabel: string;
   expiresLabel: string;
   purchasedLabel: string;
@@ -22,9 +23,10 @@ export interface PremiumDetailsTranslations {
   manageButton?: string;
   upgradeButton?: string;
   lifetimeLabel?: string;
-  statusActive?: string;
-  statusExpired?: string;
-  statusFree?: string;
+  statusActive: string;
+  statusExpired: string;
+  statusFree: string;
+  statusCanceled: string;
 }
 
 export interface PremiumDetailsCardProps {

package/src/presentation/components/details/PremiumStatusBadge.tsx

@@ -6,15 +6,15 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
-import { SubscriptionStatusType } from "../../../domain/entities/SubscriptionStatus";
+import { SubscriptionStatusType } from "@domain/entities/SubscriptionStatus";
 export type { SubscriptionStatusType };
 
 export interface PremiumStatusBadgeProps {
   status: SubscriptionStatusType;
-  activeLabel?: string;
-  expiredLabel?: string;
-  noneLabel?: string;
-  canceledLabel?: string;
+  activeLabel: string;
+  expiredLabel: string;
+  noneLabel: string;
+  canceledLabel: string;
 }
 
 /**
@@ -22,10 +22,10 @@ export interface PremiumStatusBadgeProps {
  */
 export const PremiumStatusBadge: React.FC<PremiumStatusBadgeProps> = ({
   status,
-  activeLabel = "Active",
-  expiredLabel = "Expired",
-  noneLabel = "Free",
-  canceledLabel = "Canceled",
+  activeLabel,
+  expiredLabel,
+  noneLabel,
+  canceledLabel,
 }) => {
   const tokens = useAppDesignTokens();
 

package/src/presentation/hooks/useCreditChecker.ts

@@ -5,12 +5,12 @@
  */
 
 import { useMemo } from "react";
-import type { CreditType } from "../../domain/entities/Credits";
-import { getCreditsRepository } from "../../infrastructure/repositories/CreditsRepositoryProvider";
+import type { CreditType } from "@domain/entities/Credits";
+import { getCreditsRepository } from "@infrastructure/repositories/CreditsRepositoryProvider";
 import {
   createCreditChecker,
   type CreditCheckResult,
-} from "../../utils/creditChecker";
+} from "@utils/creditChecker";
 
 export interface UseCreditCheckerParams {
   getCreditType: (operationType: string) => CreditType;

package/src/presentation/hooks/useCredits.ts

@@ -6,11 +6,11 @@
  */
 
 import { useQuery } from "@tanstack/react-query";
-import type { UserCredits, CreditType } from "../../domain/entities/Credits";
+import type { UserCredits, CreditType } from "@domain/entities/Credits";
 import {
   getCreditsRepository,
   getCreditsConfig,
-} from "../../infrastructure/repositories/CreditsRepositoryProvider";
+} from "@infrastructure/repositories/CreditsRepositoryProvider";
 
 const CACHE_CONFIG = {
   staleTime: 30 * 1000,

package/src/presentation/hooks/useDeductCredit.ts

@@ -7,8 +7,8 @@
 
 import { useCallback } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import type { CreditType, UserCredits } from "../../domain/entities/Credits";
-import { getCreditsRepository } from "../../infrastructure/repositories/CreditsRepositoryProvider";
+import type { CreditType, UserCredits } from "@domain/entities/Credits";
+import { getCreditsRepository } from "@infrastructure/repositories/CreditsRepositoryProvider";
 import { creditsQueryKeys } from "./useCredits";
 
 export interface UseDeductCreditParams {

package/src/presentation/hooks/useDevTestCallbacks.ts

@@ -0,0 +1,143 @@
+/**
+ * Dev Test Callbacks Hook
+ * Provides test functions for subscription renewal testing
+ * Only used in __DEV__ mode
+ */
+
+import { useCallback } from "react";
+import { Alert } from "react-native";
+import { useAuth } from "@umituz/react-native-auth";
+import { getCreditsRepository } from "@infrastructure/repositories/CreditsRepositoryProvider";
+import { useCredits } from "./useCredits";
+import type { DevTestActions } from "@presentation/screens/components/DevTestSection";
+
+export const useDevTestCallbacks = (): DevTestActions | undefined => {
+  const { user } = useAuth();
+  const { credits, refetch } = useCredits({ userId: user?.uid });
+
+  const onTestRenewal = useCallback(async () => {
+    if (!user?.uid) {
+      Alert.alert("Error", "No user logged in");
+      return;
+    }
+
+    try {
+      const repository = getCreditsRepository();
+      const renewalId = `dev_renewal_${Date.now()}`;
+      const productId = "test_yearly_subscription";
+
+      if (__DEV__) {
+        console.log("🧪 [Dev Test] Simulating auto-renewal...", {
+          userId: user.uid,
+          renewalId,
+        });
+      }
+
+      const result = await repository.initializeCredits(
+        user.uid,
+        renewalId,
+        productId,
+      );
+
+      if (__DEV__) {
+        console.log("✅ [Dev Test] Renewal completed:", {
+          success: result.success,
+          textCredits: result.data?.textCredits,
+          imageCredits: result.data?.imageCredits,
+        });
+      }
+
+      await refetch();
+
+      Alert.alert(
+        "✅ Test Renewal Success",
+        `Credits Updated!\n\nText: ${result.data?.textCredits || 0}\nImage: ${result.data?.imageCredits || 0}\n\n(ACCUMULATE mode - credits added to existing)`,
+        [{ text: "OK" }],
+      );
+    } catch (error) {
+      if (__DEV__) {
+        console.error("❌ [Dev Test] Renewal failed:", error);
+      }
+      Alert.alert(
+        "Test Failed",
+        error instanceof Error ? error.message : "Unknown error",
+      );
+    }
+  }, [user?.uid, refetch]);
+
+  const onCheckCredits = useCallback(() => {
+    if (!credits) {
+      Alert.alert("Credits", "No credits data available");
+      return;
+    }
+
+    Alert.alert(
+      "📊 Current Credits",
+      `Text Generation: ${credits.textCredits}\nImage Generation: ${credits.imageCredits}\n\nPurchased: ${credits.purchasedAt?.toLocaleDateString() || "N/A"}`,
+      [{ text: "OK" }],
+    );
+  }, [credits]);
+
+  const onTestDuplicate = useCallback(async () => {
+    if (!user?.uid) {
+      Alert.alert("Error", "No user logged in");
+      return;
+    }
+
+    try {
+      const repository = getCreditsRepository();
+      const sameRenewalId = "dev_duplicate_test_12345";
+
+      if (__DEV__) {
+        console.log("🧪 [Dev Test] Testing duplicate protection...");
+      }
+
+      const result1 = await repository.initializeCredits(
+        user.uid,
+        sameRenewalId,
+        "test_product",
+      );
+      if (__DEV__) {
+        console.log("First call:", result1.data);
+      }
+
+      const result2 = await repository.initializeCredits(
+        user.uid,
+        sameRenewalId,
+        "test_product",
+      );
+      if (__DEV__) {
+        console.log("Second call:", result2.data);
+      }
+
+      await refetch();
+
+      const duplicateProtectionWorks =
+        result2.data?.textCredits === result1.data?.textCredits;
+
+      Alert.alert(
+        "Duplicate Test",
+        `First call: ${result1.success ? "✅ Added credits" : "❌ Failed"}\n\nSecond call: ${duplicateProtectionWorks ? "✅ Skipped (protection works!)" : "❌ Added again (protection failed!)"}`,
+        [{ text: "OK" }],
+      );
+    } catch (error) {
+      if (__DEV__) {
+        console.error("❌ [Dev Test] Duplicate test failed:", error);
+      }
+      Alert.alert(
+        "Test Failed",
+        error instanceof Error ? error.message : "Unknown error",
+      );
+    }
+  }, [user?.uid, refetch]);
+
+  if (!__DEV__) {
+    return undefined;
+  }
+
+  return {
+    onTestRenewal,
+    onCheckCredits,
+    onTestDuplicate,
+  };
+};

package/src/presentation/hooks/usePremiumWithConfig.ts

@@ -11,13 +11,13 @@
 
 import { useCallback } from "react";
 import type { PurchasesPackage } from "react-native-purchases";
-import type { UserCredits } from "../../domain/entities/Credits";
+import type { UserCredits } from "@domain/entities/Credits";
 import { useCredits } from "./useCredits";
 import {
   useSubscriptionPackages,
   usePurchasePackage,
   useRestorePurchase,
-} from "../../revenuecat/presentation/hooks/useSubscriptionQueries";
+} from "@revenuecat/presentation/hooks/useSubscriptionQueries";
 import { usePaywallVisibility } from "./usePaywallVisibility";
 
 export interface UsePremiumWithConfigParams {

package/src/presentation/hooks/useSubscription.ts

@@ -4,9 +4,9 @@
  */
 
 import { useState, useCallback } from 'react';
-import { getSubscriptionService } from '../../infrastructure/services/SubscriptionService';
-import type { SubscriptionStatus } from '../../domain/entities/SubscriptionStatus';
-import { isSubscriptionValid } from '../../domain/entities/SubscriptionStatus';
+import { getSubscriptionService } from '@infrastructure/services/SubscriptionService';
+import type { SubscriptionStatus } from '@domain/entities/SubscriptionStatus';
+import { isSubscriptionValid } from '@domain/entities/SubscriptionStatus';
 
 export interface UseSubscriptionResult {
   /** Current subscription status */

package/src/presentation/hooks/useSubscriptionDetails.ts

@@ -4,11 +4,11 @@
  */
 
 import { useMemo } from "react";
-import type { SubscriptionStatus } from "../../domain/entities/SubscriptionStatus";
+import type { SubscriptionStatus } from "@domain/entities/SubscriptionStatus";
 import {
   getDaysUntilExpiration,
   isSubscriptionExpired,
-} from "../../utils/dateValidationUtils";
+} from "@utils/dateValidationUtils";
 
 export interface SubscriptionDetails {
   /** Raw subscription status */

package/src/presentation/hooks/useUserTier.ts

@@ -27,8 +27,8 @@
  */
 
 import { useMemo } from 'react';
-import { getUserTierInfo } from '../../utils/tierUtils';
-import type { UserTierInfo } from '../../utils/types';
+import { getUserTierInfo } from '@utils/tierUtils';
+import type { UserTierInfo } from '@utils/types';
 
 export interface UseUserTierParams {
   /** Whether user is a guest */

package/src/presentation/hooks/useUserTierWithRepository.ts

@@ -25,7 +25,7 @@
 
 import { useEffect, useState, useCallback } from 'react';
 import { useUserTier, type UseUserTierParams } from './useUserTier';
-import type { ISubscriptionRepository } from '../../application/ports/ISubscriptionRepository';
+import type { ISubscriptionRepository } from '@application/ports/ISubscriptionRepository';
 
 /**
  * Auth provider interface

package/src/presentation/screens/SubscriptionDetailScreen.tsx

@@ -16,18 +16,19 @@ 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;
+    statusLabel: string;
+    statusActive: string;
+    statusExpired: string;
+    statusFree: string;
+    statusCanceled: string;
+    expiresLabel: string;
+    purchasedLabel: string;
+    lifetimeLabel: string;
+    creditsTitle: string;
+    remainingLabel: string;
     usageTitle?: string;
-    manageButton?: string;
-    upgradeButton?: string;
+    manageButton: string;
+    upgradeButton: string;
     creditsResetInfo?: string;
 }
 

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

@@ -4,8 +4,8 @@
  */
 
 import React from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, StyleSheet } from "react-native";
+import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
 
 interface CreditItemProps {
     label: string;
@@ -34,13 +34,13 @@ export const CreditItem: React.FC<CreditItemProps> = ({
     return (
         <View style={styles.container}>
             <View style={styles.header}>
-                <Text style={[styles.label, { color: tokens.colors.textPrimary }]}>
+                <AtomicText type="bodyMedium" style={[styles.label, { color: tokens.colors.textPrimary }]}>
                     {label}
-                </Text>
+                </AtomicText>
                 <View style={[styles.badge, { backgroundColor: tokens.colors.surfaceSecondary }]}>
-                    <Text style={[styles.count, { color: getColor() }]}>
+                    <AtomicText type="labelSmall" style={[styles.count, { color: getColor() }]}>
                         {current} / {total}
-                    </Text>
+                    </AtomicText>
                 </View>
             </View>
             <View
@@ -59,9 +59,9 @@ export const CreditItem: React.FC<CreditItemProps> = ({
                     ]}
                 />
             </View>
-            <Text style={[styles.remaining, { color: tokens.colors.textSecondary }]}>
+            <AtomicText type="bodySmall" style={[styles.remaining, { color: tokens.colors.textSecondary }]}>
                 {current} {remainingLabel}
-            </Text>
+            </AtomicText>
         </View>
     );
 };
@@ -76,7 +76,6 @@ const styles = StyleSheet.create({
         alignItems: "center",
     },
     label: {
-        fontSize: 15,
         fontWeight: "500",
     },
     badge: {
@@ -85,7 +84,6 @@ const styles = StyleSheet.create({
         borderRadius: 12,
     },
     count: {
-        fontSize: 13,
         fontWeight: "600",
     },
     progressBar: {
@@ -98,6 +96,5 @@ const styles = StyleSheet.create({
         borderRadius: 4,
     },
     remaining: {
-        fontSize: 12,
     },
 });

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

@@ -4,8 +4,8 @@
  */
 
 import React from "react";
-import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
 
 interface SubscriptionActionsProps {
     isPremium: boolean;
@@ -34,14 +34,12 @@ export const SubscriptionActions: React.FC<SubscriptionActionsProps> = ({
                     ]}
                     onPress={onManage}
                 >
-                    <Text
-                        style={[
-                            styles.secondaryButtonText,
-                            { color: tokens.colors.textPrimary },
-                        ]}
+                    <AtomicText
+                        type="titleMedium"
+                        style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}
                     >
                         {manageButtonLabel}
-                    </Text>
+                    </AtomicText>
                 </TouchableOpacity>
             )}
             {!isPremium && onUpgrade && upgradeButtonLabel && (
@@ -49,14 +47,12 @@ export const SubscriptionActions: React.FC<SubscriptionActionsProps> = ({
                     style={[styles.primaryButton, { backgroundColor: tokens.colors.primary }]}
                     onPress={onUpgrade}
                 >
-                    <Text
-                        style={[
-                            styles.primaryButtonText,
-                            { color: tokens.colors.onPrimary },
-                        ]}
+                    <AtomicText
+                        type="titleMedium"
+                        style={{ color: tokens.colors.onPrimary, fontWeight: "700" }}
                     >
                         {upgradeButtonLabel}
-                    </Text>
+                    </AtomicText>
                 </TouchableOpacity>
             )}
         </View>
@@ -73,17 +69,9 @@ const styles = StyleSheet.create({
         borderRadius: 12,
         alignItems: "center",
     },
-    primaryButtonText: {
-        fontSize: 16,
-        fontWeight: "700",
-    },
     secondaryButton: {
         paddingVertical: 16,
         borderRadius: 12,
         alignItems: "center",
     },
-    secondaryButtonText: {
-        fontSize: 16,
-        fontWeight: "600",
-    },
 });