@umituz/react-native-subscription 2.27.123 → 2.27.124

package/src/domains/subscription/presentation/screens/SubscriptionDetailScreen.tsx

@@ -1,90 +1,20 @@
-/**
- * Subscription Detail Screen
- * Composition of subscription components
- * No business logic - pure presentation
- */
-
 import React, { useMemo } from "react";
-import { StyleSheet, View } from "react-native";
-import {
-    useAppDesignTokens,
-    NavigationHeader,
-    AtomicIcon,
-} from "@umituz/react-native-design-system";
-import { Pressable } from "react-native";
+import { StyleSheet, View, Pressable } from "react-native";
+import { useAppDesignTokens, NavigationHeader, AtomicIcon } from "@umituz/react-native-design-system";
 import { ScreenLayout } from "../../../../shared/presentation";
 import { SubscriptionHeader } from "./components/SubscriptionHeader";
-import { CreditsList, type CreditItem } from "./components/CreditsList";
-import { UpgradePrompt, type Benefit } from "./components/UpgradePrompt";
-
-export interface SubscriptionDisplayFlags {
-  showHeader: boolean;
-  showCredits: boolean;
-  showUpgradePrompt: boolean;
-  showExpirationDate: boolean;
-}
-
-export interface SubscriptionDetailTranslations {
-  title: string;
-  statusActive: string;
-  statusExpired: string;
-  statusFree: string;
-  statusCanceled: string;
-  statusLabel: string;
-  lifetimeLabel: string;
-  expiresLabel: string;
-  purchasedLabel: string;
-  usageTitle?: string;
-  creditsTitle: string;
-  creditsResetInfo?: string;
-  remainingLabel?: string;
-  upgradeButton: string;
-}
-
-export interface UpgradePromptConfig {
-  title: string;
-  subtitle?: string;
-  benefits?: readonly Benefit[];
-  onUpgrade?: () => void;
-}
-
-export interface SubscriptionDetailConfig {
-  display: SubscriptionDisplayFlags;
-  statusType: "active" | "expired" | "none" | "canceled";
-  isLifetime: boolean;
-  expirationDate?: string;
-  purchaseDate?: string;
-  daysRemaining?: number | null;
-  credits?: readonly CreditItem[];
-  translations: SubscriptionDetailTranslations;
-  upgradePrompt?: UpgradePromptConfig;
-  onClose?: () => void;
-}
-
-export interface SubscriptionDetailScreenProps {
-  config: SubscriptionDetailConfig;
-}
+import { CreditsList } from "./components/CreditsList";
+import { UpgradePrompt } from "./components/UpgradePrompt";
+import { SubscriptionDetailScreenProps } from "./SubscriptionDetailScreen.types";
 
-export const SubscriptionDetailScreen: React.FC<
-  SubscriptionDetailScreenProps
-> = ({ config }) => {
+export const SubscriptionDetailScreen: React.FC<SubscriptionDetailScreenProps> = ({ config }) => {
   const tokens = useAppDesignTokens();
   const { showHeader, showCredits, showUpgradePrompt, showExpirationDate } = config.display;
 
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        content: {
-          flexGrow: 1,
-          padding: tokens.spacing.lg,
-          gap: tokens.spacing.lg,
-        },
-        cardsContainer: {
-          gap: tokens.spacing.xl,
-        },
-      }),
-    [tokens]
-  );
+  const styles = useMemo(() => StyleSheet.create({
+    content: { flexGrow: 1, padding: tokens.spacing.lg, gap: tokens.spacing.lg },
+    cardsContainer: { gap: tokens.spacing.xl }
+  }), [tokens]);
 
   return (
     <ScreenLayout
@@ -100,10 +30,7 @@ export const SubscriptionDetailScreen: React.FC<
             <Pressable
               onPress={config.onClose}
               style={({ pressed }) => ({
-                width: 44,
-                height: 44,
-                justifyContent: "center",
-                alignItems: "center",
+                width: 44, height: 44, justifyContent: "center", alignItems: "center",
                 backgroundColor: pressed ? tokens.colors.surfaceVariant : tokens.colors.surface,
                 borderRadius: tokens.radius.full,
               })}
@@ -126,18 +53,14 @@ export const SubscriptionDetailScreen: React.FC<
             translations={config.translations}
           />
         )}
-
         {showCredits && config.credits && (
           <CreditsList
-            credits={config.credits}
-            title={
-              config.translations.usageTitle || config.translations.creditsTitle
-            }
+            credits={config.credits as any}
+            title={config.translations.usageTitle || config.translations.creditsTitle}
             description={config.translations.creditsResetInfo}
             remainingLabel={config.translations.remainingLabel}
           />
         )}
-
         {showUpgradePrompt && config.upgradePrompt && (
           <UpgradePrompt
             title={config.upgradePrompt.title}
@@ -148,8 +71,6 @@ export const SubscriptionDetailScreen: React.FC<
           />
         )}
       </View>
-
-
     </ScreenLayout>
   );
 };

package/src/domains/subscription/presentation/screens/SubscriptionDetailScreen.types.ts

@@ -0,0 +1,47 @@
+export interface SubscriptionDisplayFlags {
+  showHeader: boolean;
+  showCredits: boolean;
+  showUpgradePrompt: boolean;
+  showExpirationDate: boolean;
+}
+
+export interface SubscriptionDetailTranslations {
+  title: string;
+  statusActive: string;
+  statusExpired: string;
+  statusFree: string;
+  statusCanceled: string;
+  statusLabel: string;
+  lifetimeLabel: string;
+  expiresLabel: string;
+  purchasedLabel: string;
+  usageTitle?: string;
+  creditsTitle: string;
+  creditsResetInfo?: string;
+  remainingLabel?: string;
+  upgradeButton: string;
+}
+
+export interface UpgradePromptConfig {
+  title: string;
+  subtitle?: string;
+  benefits?: readonly { icon?: string; text: string }[];
+  onUpgrade?: () => void;
+}
+
+export interface SubscriptionDetailConfig {
+  display: SubscriptionDisplayFlags;
+  statusType: "active" | "expired" | "none" | "canceled";
+  isLifetime: boolean;
+  expirationDate?: string;
+  purchaseDate?: string;
+  daysRemaining?: number | null;
+  credits?: readonly any[];
+  translations: SubscriptionDetailTranslations;
+  upgradePrompt?: UpgradePromptConfig;
+  onClose?: () => void;
+}
+
+export interface SubscriptionDetailScreenProps {
+  config: SubscriptionDetailConfig;
+}

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

@@ -1,150 +1,58 @@
-/**
- * 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";
-
-export interface Benefit {
-  icon?: string;
-  text: string;
-}
+import { useAppDesignTokens, AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
+import { UpgradePromptProps } from "./UpgradePrompt.types";
 
-export interface UpgradePromptProps {
-  title: string;
-  subtitle?: string;
-  benefits?: readonly Benefit[];
-  upgradeButtonLabel: string;
-  onUpgrade: () => void;
-}
-
-export const UpgradePrompt: React.FC<UpgradePromptProps> = ({
-  title,
-  subtitle,
-  benefits,
-  upgradeButtonLabel,
-  onUpgrade,
-}) => {
+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.radius.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.radius.lg,
-          alignItems: "center",
-          backgroundColor: tokens.colors.primary,
-        },
-        buttonText: {
-          color: tokens.colors.onPrimary,
-          fontWeight: "700",
-        },
-      }),
-    [tokens]
-  );
+  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.radius.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.radius.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 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 || "checkmark-circle-outline"}
-                  customSize={16}
-                  color="primary"
-                />
+                <AtomicIcon name={benefit.icon || "checkmark-circle-outline"} customSize={16} color="primary" />
               </View>
-              <AtomicText
-                type="bodyMedium"
-                style={[styles.benefitText, { color: tokens.colors.textPrimary }]}
-              >
-                {benefit.text}
-              </AtomicText>
+              <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>
+          <AtomicText type="titleMedium" style={styles.buttonText}>{upgradeButtonLabel}</AtomicText>
         </TouchableOpacity>
       )}
     </View>

package/src/domains/subscription/presentation/screens/components/UpgradePrompt.types.ts

@@ -0,0 +1,12 @@
+export interface Benefit {
+  icon?: string;
+  text: string;
+}
+
+export interface UpgradePromptProps {
+  title: string;
+  subtitle?: string;
+  benefits?: readonly Benefit[];
+  upgradeButtonLabel: string;
+  onUpgrade: () => void;
+}

package/src/domains/subscription/presentation/usePremium.ts

@@ -1,13 +1,5 @@
-/**
- * usePremium Hook
- *
- * Complete subscription management.
- * Auth info automatically read from @umituz/react-native-auth.
- */
-
 import { useCallback } from 'react';
 import type { PurchasesPackage } from 'react-native-purchases';
-import type { UserCredits } from '../../credits/core/Credits';
 import { useCredits } from '../../credits/presentation/useCredits';
 import { useSubscriptionStatus } from './useSubscriptionStatus';
 import {
@@ -17,21 +9,10 @@ import {
 } from '../infrastructure/hooks/useSubscriptionQueries';
 import { usePaywallVisibility } from './usePaywallVisibility';
 
-export interface UsePremiumResult {
-  isPremium: boolean;
-  isLoading: boolean;
-  packages: PurchasesPackage[];
-  credits: UserCredits | null;
-  showPaywall: boolean;
-  isSyncing: boolean;
-  purchasePackage: (pkg: PurchasesPackage) => Promise<boolean>;
-  restorePurchase: () => Promise<boolean>;
-  setShowPaywall: (show: boolean) => void;
-  closePaywall: () => void;
-  openPaywall: () => void;
-}
+import { UsePremiumResult } from './usePremium.types';
 
 export const usePremium = (): UsePremiumResult => {
+
   const { isPremium: subscriptionActive, isLoading: statusLoading } = useSubscriptionStatus();
   const { credits, isLoading: creditsLoading } = useCredits();
 
@@ -42,7 +23,7 @@ export const usePremium = (): UsePremiumResult => {
 
   const { showPaywall, setShowPaywall, closePaywall, openPaywall } = usePaywallVisibility();
  
-  const isPremium = subscriptionActive;
+  const isPremium = subscriptionActive || (credits?.isPremium ?? false);
   const isSyncing = subscriptionActive && credits !== null && !credits.isPremium;
 
   const handlePurchase = useCallback(

package/src/domains/subscription/presentation/usePremium.types.ts

@@ -0,0 +1,16 @@
+import type { PurchasesPackage } from 'react-native-purchases';
+import type { UserCredits } from '../../credits/core/Credits';
+
+export interface UsePremiumResult {
+  isPremium: boolean;
+  isLoading: boolean;
+  packages: PurchasesPackage[];
+  credits: UserCredits | null;
+  showPaywall: boolean;
+  isSyncing: boolean;
+  purchasePackage: (pkg: PurchasesPackage) => Promise<boolean>;
+  restorePurchase: () => Promise<boolean>;
+  setShowPaywall: (show: boolean) => void;
+  closePaywall: () => void;
+  openPaywall: () => void;
+}

package/src/domains/subscription/presentation/useSubscriptionStatus.ts

@@ -1,34 +1,20 @@
-/**
- * useSubscriptionStatus Hook
- *
- * Checks real subscription status from RevenueCat.
- * Auth info automatically read from @umituz/react-native-auth.
- */
-
-import { useQuery } from "@umituz/react-native-design-system";
-import {
-  useAuthStore,
-  selectUserId,
-} from "@umituz/react-native-auth";
+import { useQuery, useQueryClient } from "@umituz/react-native-design-system";
+import { useEffect } from "react";
+import { useAuthStore, selectUserId } from "@umituz/react-native-auth";
 import { SubscriptionManager } from "../infrastructure/managers/SubscriptionManager";
+import { subscriptionEventBus, SUBSCRIPTION_EVENTS } from "../../../shared/infrastructure/SubscriptionEventBus";
+import { SubscriptionStatusResult } from "./useSubscriptionStatus.types";
 
 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 const useSubscriptionStatus = (): SubscriptionStatusResult => {
   const userId = useAuthStore(selectUserId);
+  const queryClient = useQueryClient();
 
-  const { data, isLoading, error, refetch } = useQuery({
+  const { data, status, error, refetch } = useQuery({
     queryKey: subscriptionStatusQueryKeys.user(userId ?? ""),
     queryFn: async () => {
       if (!userId) {
@@ -43,9 +29,27 @@ export const useSubscriptionStatus = (): SubscriptionStatusResult => {
       }
     },
     enabled: !!userId && SubscriptionManager.isInitializedForUser(userId),
-
   });
 
+  useEffect(() => {
+    if (!userId) return;
+
+    const unsubscribe = subscriptionEventBus.on(
+      SUBSCRIPTION_EVENTS.PREMIUM_STATUS_CHANGED, 
+      (event: { userId: string; isPremium: boolean }) => {
+        if (event.userId === userId) {
+          queryClient.invalidateQueries({
+            queryKey: subscriptionStatusQueryKeys.user(userId),
+          });
+        }
+      }
+    );
+
+    return unsubscribe;
+  }, [userId, queryClient]);
+
+  const isLoading = status === "pending";
+
   return {
     isPremium: data?.isPremium ?? false,
     expirationDate: data?.expirationDate ?? null,
@@ -54,3 +58,7 @@ export const useSubscriptionStatus = (): SubscriptionStatusResult => {
     refetch,
   };
 };
+
+
+
+

package/src/domains/subscription/presentation/useSubscriptionStatus.types.ts

@@ -0,0 +1,7 @@
+export interface SubscriptionStatusResult {
+  isPremium: boolean;
+  expirationDate: Date | null;
+  isLoading: boolean;
+  error: Error | null;
+  refetch: () => void;
+}

package/src/domains/wallet/presentation/hooks/useProductMetadata.ts

@@ -1,10 +1,3 @@
-/**
- * useProductMetadata Hook
- *
- * TanStack Query hook for fetching product metadata.
- * Generic and reusable - uses config from ProductMetadataService.
- */
-
 import { useQuery } from "@umituz/react-native-design-system";
 import { useMemo } from "react";
 import type {
@@ -14,11 +7,6 @@ import type {
 } from "../../domain/types/wallet.types";
 import { ProductMetadataService } from "../../infrastructure/services/ProductMetadataService";
 
-const CACHE_CONFIG = {
-  staleTime: 5 * 60 * 1000, // 5 minutes
-  gcTime: 30 * 60 * 1000, // 30 minutes
-};
-
 export const productMetadataQueryKeys = {
   all: ["productMetadata"] as const,
   byType: (type: ProductType) => ["productMetadata", type] as const,
@@ -44,7 +32,6 @@ export function useProductMetadata({
   type,
   enabled = true,
 }: UseProductMetadataParams): UseProductMetadataResult {
-  // Memoize service to prevent recreation on every render
   const service = useMemo(
     () => new ProductMetadataService(config),
     [config]
@@ -54,7 +41,7 @@ export function useProductMetadata({
     ? productMetadataQueryKeys.byType(type)
     : productMetadataQueryKeys.all;
 
-  const { data, isLoading, error, refetch } = useQuery({
+  const { data, status, error, refetch } = useQuery({
     queryKey,
     queryFn: async () => {
       if (type) {
@@ -63,11 +50,10 @@ export function useProductMetadata({
       return service.getAll();
     },
     enabled,
-    staleTime: CACHE_CONFIG.staleTime,
-    gcTime: CACHE_CONFIG.gcTime,
   });
 
   const products = data ?? [];
+  const isLoading = status === "pending";
 
   const creditsPackages = products.filter((p) => p.type === "credits");
   const subscriptionPackages = products.filter((p) => p.type === "subscription");
@@ -81,3 +67,4 @@ export function useProductMetadata({
     subscriptionPackages,
   };
 }
+

package/src/domains/wallet/presentation/hooks/useTransactionHistory.ts

@@ -1,16 +1,6 @@
-/**
- * useTransactionHistory Hook
- *
- * TanStack Query hook for fetching credit transaction history.
- * Auth info automatically read from @umituz/react-native-auth.
- */
-
 import { useQuery } from "@umituz/react-native-design-system";
 import { useMemo } from "react";
-import {
-  useAuthStore,
-  selectUserId,
-} from "@umituz/react-native-auth";
+import { useAuthStore, selectUserId } from "@umituz/react-native-auth";
 import type {
   CreditLog,
   TransactionRepositoryConfig,
@@ -63,8 +53,6 @@ export function useTransactionHistory({
       return result.data ?? [];
     },
     enabled: !!userId,
-    staleTime: 0,
-    gcTime: 0,
   });
 
   const transactions = data ?? [];