@umituz/react-native-subscription 2.43.0 → 2.43.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.43.0",
+  "version": "2.43.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/domains/credits/application/CreditsInitializer.ts

@@ -5,7 +5,7 @@ import type { InitializeCreditsMetadata, InitializationResult } from "../../subs
 import { runTransaction, type Transaction, type DocumentReference, type Firestore } from "@umituz/react-native-firebase";
 import { getCreditDocumentOrDefault } from "./creditDocumentHelpers";
 import { calculateNewCredits, buildCreditsData } from "./creditOperationUtils";
-import { calculateCreditLimit } from "./CreditLimitCalculator";
+import { CreditLimitService } from "../domain/services/CreditLimitService";
 import { generatePurchaseMetadata } from "./PurchaseMetadataGenerator";
 import { PURCHASE_ID_PREFIXES } from "../core/CreditsConstants";
 
@@ -69,7 +69,8 @@ export async function initializeCreditsTransaction(
             });
         }
 
-        const creditLimit = calculateCreditLimit(metadata.productId, config);
+        const creditLimitService = new CreditLimitService(config);
+        const creditLimit = creditLimitService.calculate(metadata.productId);
         const { purchaseHistory } = generatePurchaseMetadata({
             productId: metadata.productId,
             source: metadata.source,

package/src/domains/credits/domain/services/CreditLimitService.ts

@@ -0,0 +1,76 @@
+import type { CreditsConfig } from "../../core/Credits";
+import { detectPackageType } from "../../../../utils/packageTypeDetector";
+import { getCreditAllocation } from "../../../../utils/creditMapper";
+
+/**
+ * Domain service for credit limit calculations.
+ *
+ * This service contains business logic for determining credit limits
+ * based on product configuration. It's part of the domain layer and can be
+ * used by infrastructure, application, or presentation layers.
+ */
+export class CreditLimitService {
+  constructor(private config: CreditsConfig) {}
+
+  /**
+   * Calculate credit limit for a specific product ID.
+   *
+   * Strategy:
+   * 1. Check for explicit amount override in config
+   * 2. Calculate from package type allocations
+   * 3. Throw if cannot determine limit
+   *
+   * @param productId - The product identifier
+   * @returns The credit limit for this product
+   * @throws Error if productId is missing or limit cannot be determined
+   */
+  calculate(productId: string | undefined): number {
+    if (!productId) {
+      throw new Error(
+        "[CreditLimitService] Cannot calculate credit limit without productId"
+      );
+    }
+
+    // Check for explicit amount override
+    const explicitAmount = this.config.creditPackageAmounts?.[productId];
+    if (
+      explicitAmount !== undefined &&
+      explicitAmount !== null &&
+      typeof explicitAmount === "number"
+    ) {
+      return explicitAmount;
+    }
+
+    // Calculate from package type allocations
+    const packageType = detectPackageType(productId);
+    const dynamicLimit = getCreditAllocation(packageType, this.config.packageAllocations);
+
+    if (dynamicLimit === null || dynamicLimit === undefined) {
+      throw new Error(
+        `[CreditLimitService] Cannot determine credit limit for productId: ${productId}, packageType: ${packageType}`
+      );
+    }
+
+    return dynamicLimit;
+  }
+
+  /**
+   * Create a factory function for this service with the given config.
+   * This makes dependency injection easier.
+   */
+  static createFactory(config: CreditsConfig) {
+    return () => new CreditLimitService(config);
+  }
+}
+
+/**
+ * Convenience function to calculate credit limit without instantiating service.
+ * Useful for one-off calculations.
+ */
+export function calculateCreditLimit(
+  productId: string | undefined,
+  config: CreditsConfig
+): number {
+  const service = new CreditLimitService(config);
+  return service.calculate(productId);
+}

package/src/domains/credits/infrastructure/CreditsRepository.ts

@@ -11,11 +11,18 @@ import { fetchCredits, checkHasCredits, documentExists } from "./operations/Cred
 import { syncExpiredStatus, syncPremiumMetadata, createRecoveryCreditsDocument } from "./operations/CreditsWriter";
 import type { SubscriptionMetadata } from "../../subscription/core/types/SubscriptionMetadata";
 import { initializeCreditsWithRetry } from "./operations/CreditsInitializer";
-import { calculateCreditLimit } from "../application/CreditLimitCalculator";
+import { CreditLimitService } from "../domain/services/CreditLimitService";
 
 export class CreditsRepository extends BaseRepository {
-  constructor(private config: CreditsConfig) {
+  private creditLimitService: CreditLimitService;
+
+  constructor(
+    private config: CreditsConfig,
+    creditLimitService?: CreditLimitService
+  ) {
     super(config.collectionName);
+    // Allow dependency injection or create default instance
+    this.creditLimitService = creditLimitService ?? new CreditLimitService(config);
   }
 
   private getCollectionConfig(): CollectionConfig {
@@ -96,7 +103,7 @@ export class CreditsRepository extends BaseRepository {
     _storeTransactionId?: string | null,
   ): Promise<boolean> {
     const db = requireFirestore();
-    const creditLimit = calculateCreditLimit(productId, this.config);
+    const creditLimit = this.creditLimitService.calculate(productId);
     return createRecoveryCreditsDocument(
       this.getRef(db, userId),
       creditLimit,

package/src/domains/credits/infrastructure/operations/CreditsInitializer.ts

@@ -4,7 +4,7 @@ import type { PurchaseSource } from "../../core/UserCreditsDocument";
 import { initializeCreditsTransaction } from "../../application/CreditsInitializer";
 import { mapCreditsDocumentToEntity } from "../../core/CreditsMapper";
 import type { RevenueCatData } from "../../../revenuecat/core/types/RevenueCatData";
-import { calculateCreditLimit } from "../../application/CreditLimitCalculator";
+import { CreditLimitService } from "../../domain/services/CreditLimitService";
 import { PURCHASE_TYPE, type PurchaseType } from "../../../subscription/core/SubscriptionConstants";
 
 interface InitializeCreditsParams {
@@ -45,7 +45,8 @@ function isTransientError(error: unknown): boolean {
 export async function initializeCreditsWithRetry(params: InitializeCreditsParams): Promise<CreditsResult> {
   const { db, ref, config, userId, purchaseId, productId, source, revenueCatData, type = PURCHASE_TYPE.INITIAL } = params;
 
-  const creditLimit = calculateCreditLimit(productId, config);
+  const creditLimitService = new CreditLimitService(config);
+  const creditLimit = creditLimitService.calculate(productId);
   const cfg = { ...config, creditLimit };
 
   const maxRetries = 3;

package/src/domains/paywall/components/PaywallScreen.tsx

@@ -2,6 +2,7 @@
  * Paywall Screen Component
  *
  * Full-screen paywall with optimized FlatList for performance and modern design.
+ * This is a "dumb" component that receives all data and actions via props.
  */
 
 import React, { useCallback, useEffect, useMemo } from "react";
@@ -14,7 +15,6 @@ import {
   StatusBar,
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
-import { usePremium } from "../../subscription/presentation/usePremium";
 import { AtomicText, AtomicIcon, AtomicSpinner } from "@umituz/react-native-design-system/atoms";
 import { useSafeAreaInsets } from "@umituz/react-native-design-system/safe-area";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
@@ -37,13 +37,11 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
     console.log('[PaywallScreen] 📱 Rendering PaywallScreen', {
       hasPackages: !!props.packages?.length,
       packagesCount: props.packages?.length || 0,
+      isPremium: props.isPremium,
     });
   }
 
-  const { purchasePackage, restorePurchase } = usePremium();
-
   const {
-    onClose,
     translations,
     packages = [],
     features = [],
@@ -52,11 +50,14 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
     creditAmounts,
     creditsLabel,
     heroImage,
+    isSyncing,
+    onPurchase,
+    onRestore,
+    onClose,
     onPurchaseSuccess,
     onPurchaseError,
     onAuthRequired,
     source,
-    isLoadingPackages
   } = props;
 
   const tokens = useAppDesignTokens();
@@ -80,8 +81,8 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
     resetState
   } = usePaywallActions({
     packages,
-    purchasePackage,
-    restorePurchase,
+    purchasePackage: onPurchase,
+    restorePurchase: onRestore,
     source,
     onPurchaseSuccess,
     onPurchaseError,
@@ -233,7 +234,7 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
     return null;
   }
 
-  if (isLoadingPackages) {
+  if (isSyncing) {
     return (
       <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary, paddingTop: insets.top }]}>
         <View style={styles.loadingContainer}>

package/src/domains/paywall/components/PaywallScreen.types.ts

@@ -2,21 +2,32 @@ import type { ImageSourcePropType } from "react-native";
 import type { PurchasesPackage } from "react-native-purchases";
 import type { SubscriptionFeature, PaywallTranslations, PaywallLegalUrls } from "../entities/types";
 import type { PurchaseSource } from "../../subscription/core/SubscriptionConstants";
+import type { UserCredits } from "../../credits/core/Credits";
 
 export interface PaywallScreenProps {
-  onClose?: () => void;
+  // UI Props (required)
   translations: PaywallTranslations;
-  packages?: PurchasesPackage[];
   features?: SubscriptionFeature[];
   legalUrls?: PaywallLegalUrls;
   bestValueIdentifier?: string;
   creditAmounts?: Record<string, number>;
   creditsLabel?: string;
   heroImage?: ImageSourcePropType;
-  // Purchase/restore handlers removed - always use usePremium hook internally
+
+  // Data Props (required)
+  packages: PurchasesPackage[];
+  isPremium: boolean;
+  credits: UserCredits | null;
+  isSyncing: boolean;
+
+  // Action Props (required)
+  onPurchase: (pkg: PurchasesPackage) => Promise<boolean>;
+  onRestore: () => Promise<boolean>;
+  onClose: () => void;
+
+  // Optional Callbacks
   onPurchaseSuccess?: () => void;
   onPurchaseError?: (error: Error | string) => void;
   onAuthRequired?: () => void;
   source?: PurchaseSource;
-  isLoadingPackages?: boolean;
 }

package/src/domains/paywall/hooks/usePaywallActions.ts

@@ -1,6 +1,5 @@
 import { useState, useCallback, useRef, useMemo } from "react";
 import type { PurchasesPackage } from "react-native-purchases";
-import { usePurchaseLoadingStore, selectIsPurchasing } from "../../subscription/presentation/stores/purchaseLoadingStore";
 import type { PurchaseSource } from "../../subscription/core/SubscriptionConstants";
 import { useSubscriptionStatus } from "../../subscription/presentation/useSubscriptionStatus";
 import { useCredits } from "../../credits/presentation/useCredits";
@@ -26,17 +25,13 @@ export function usePaywallActions({
   onClose,
 }: UsePaywallActionsParams) {
   const [selectedPlanId, setSelectedPlanId] = useState<string | null>(null);
-  const [isLocalProcessing, setIsLocalProcessing] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
 
-  const isGlobalPurchasing = usePurchaseLoadingStore(selectIsPurchasing);
-  const { refetch: refetchStatus } = useSubscriptionStatus();
-  const { refetch: refetchCredits } = useCredits();
-
-  const isProcessing = isLocalProcessing || isGlobalPurchasing;
   const isProcessingRef = useRef(isProcessing);
   isProcessingRef.current = isProcessing;
 
-  const { startPurchase, endPurchase } = usePurchaseLoadingStore();
+  const { refetch: refetchStatus } = useSubscriptionStatus();
+  const { refetch: refetchCredits } = useCredits();
 
   const purchasePackageRef = useRef(purchasePackage);
   const restorePurchaseRef = useRef(restorePurchase);
@@ -72,8 +67,7 @@ export function usePaywallActions({
       });
     }
 
-    setIsLocalProcessing(true);
-    startPurchase(currentSelectedId, "manual");
+    setIsProcessing(true);
 
     try {
       const success = await purchasePackageRef.current(pkg);
@@ -125,10 +119,9 @@ export function usePaywallActions({
       }
       onPurchaseErrorRef.current?.(error instanceof Error ? error : new Error(String(error)));
     } finally {
-      setIsLocalProcessing(false);
-      endPurchase(currentSelectedId);
+      setIsProcessing(false);
     }
-  }, [selectedPlanId, startPurchase, endPurchase, refetchStatus, refetchCredits]);
+  }, [selectedPlanId, refetchStatus, refetchCredits]);
 
   const handleRestore = useCallback(async () => {
     if (isProcessingRef.current) return;
@@ -137,7 +130,7 @@ export function usePaywallActions({
       console.log('[usePaywallActions] 🔄 Starting restore');
     }
 
-    setIsLocalProcessing(true);
+    setIsProcessing(true);
     try {
       const success = await restorePurchaseRef.current();
 
@@ -172,7 +165,7 @@ export function usePaywallActions({
       }
       onPurchaseErrorRef.current?.(error instanceof Error ? error : new Error(String(error)));
     } finally {
-      setIsLocalProcessing(false);
+      setIsProcessing(false);
     }
   }, [refetchStatus, refetchCredits]);
 
@@ -181,7 +174,7 @@ export function usePaywallActions({
       console.log('[usePaywallActions] 🧹 Resetting state');
     }
     setSelectedPlanId(null);
-    setIsLocalProcessing(false);
+    setIsProcessing(false);
   }, []);
 
   return useMemo(() => ({

package/src/domains/paywall/hooks/usePaywallOrchestrator.ts

@@ -22,6 +22,9 @@ export interface PaywallOrchestratorOptions {
  * High-level orchestrator for Paywall navigation.
  * Handles automatic triggers (post-onboarding) and manual triggers (showPaywall state).
  * Centralizes handlers for success, close, and feedback triggers.
+ *
+ * This orchestrator fetches all subscription data and passes it to PaywallScreen as props.
+ * PaywallScreen is now a "dumb" component that doesn't call usePremium internally.
  */
 export function usePaywallOrchestrator({
   navigation,
@@ -34,12 +37,14 @@ export function usePaywallOrchestrator({
   bestValueIdentifier = "yearly",
   creditsLabel,
 }: PaywallOrchestratorOptions) {
-  // Sadece isPremium ve packages alıyoruz
-  // purchasePackage ve restoreRestore fonksiyonlarını ALMIYORUZ
-  // Çünkü PaywallScreen zaten usePremium hook'unu doğrudan kullanıyor
+  // Get all premium data and actions from usePremium
   const {
     isPremium,
-    packages
+    packages,
+    credits,
+    isSyncing,
+    purchasePackage,
+    restorePurchase,
   } = usePremium();
 
   // Selectors for stable references and fine-grained updates
@@ -55,6 +60,10 @@ export function usePaywallOrchestrator({
   const { showPaywall, closePaywall } = usePaywallVisibility();
   const hasNavigatedRef = useRef(false);
 
+  const handleClose = () => {
+    closePaywall();
+  };
+
   useEffect(() => {
     if (!isNavReady || !isLocalizationReady) return;
 
@@ -77,9 +86,9 @@ export function usePaywallOrchestrator({
         packagesCount: packages.length
       });
 
-      // SADECE DATA geçiyoruz - FONKSİYON YOK
-      // PaywallScreen kendi usePremium hook'unu kullanacak
+      // Pass all data and actions as props - PaywallScreen is now a dumb component
       navigation.navigate("PaywallScreen", {
+        // UI Props
         translations,
         legalUrls,
         features,
@@ -87,7 +96,17 @@ export function usePaywallOrchestrator({
         creditsLabel,
         heroImage,
         source: shouldShowPostOnboarding ? "onboarding" : "manual",
+
+        // Data Props
         packages,
+        isPremium,
+        credits,
+        isSyncing,
+
+        // Action Props
+        onPurchase: purchasePackage,
+        onRestore: restorePurchase,
+        onClose: handleClose,
       });
 
       if (shouldShowPostOnboarding) {
@@ -120,13 +139,16 @@ export function usePaywallOrchestrator({
     closePaywall,
     bestValueIdentifier,
     creditsLabel,
+    credits,
+    isSyncing,
+    purchasePackage,
+    restorePurchase,
+    handleClose,
   ]);
 
   const completeOnboarding = useSubscriptionFlowStore((state) => state.completeOnboarding);
 
   return {
-    isPremium,
-    packages,
     flowState: {
       isOnboardingComplete,
       showPostOnboardingPaywall,

package/src/domains/subscription/application/SubscriptionSyncProcessor.ts

@@ -4,7 +4,6 @@ import { getCreditsRepository } from "../../credits/infrastructure/CreditsReposi
 import { extractRevenueCatData } from "./SubscriptionSyncUtils";
 import { generatePurchaseId, generateRenewalId } from "./syncIdGenerators";
 import { subscriptionEventBus, SUBSCRIPTION_EVENTS } from "../../../shared/infrastructure/SubscriptionEventBus";
-import { useSubscriptionFlowStore, SyncStatus } from "../presentation/useSubscriptionFlow";
 
 /**
  * Central processor for all subscription sync operations.
@@ -26,10 +25,14 @@ export class SubscriptionSyncProcessor {
 
   // ─── Public API (replaces SubscriptionSyncService) ────────────────
 
-  async handlePurchase(event: PurchaseCompletedEvent): Promise<void> {
-    const store = useSubscriptionFlowStore.getState();
-    store.setSyncStatus(SyncStatus.SYNCING);
-    
+  async handlePurchase(event: PurchaseCompletedEvent): Promise<{ success: boolean; error?: string }> {
+    subscriptionEventBus.emit(SUBSCRIPTION_EVENTS.SYNC_STATUS_CHANGED, {
+      status: 'syncing',
+      phase: 'purchase',
+      userId: event.userId,
+      productId: event.productId,
+    });
+
     if (typeof __DEV__ !== "undefined" && __DEV__) {
       console.log('[SubscriptionSyncProcessor] 🔵 PURCHASE START', {
         userId: event.userId,
@@ -45,7 +48,12 @@ export class SubscriptionSyncProcessor {
         userId: event.userId,
         productId: event.productId,
       });
-      store.setSyncStatus(SyncStatus.SUCCESS);
+      subscriptionEventBus.emit(SUBSCRIPTION_EVENTS.SYNC_STATUS_CHANGED, {
+        status: 'success',
+        phase: 'purchase',
+        userId: event.userId,
+        productId: event.productId,
+      });
       if (typeof __DEV__ !== "undefined" && __DEV__) {
         console.log('[SubscriptionSyncProcessor] 🟢 PURCHASE SUCCESS', {
           userId: event.userId,
@@ -53,22 +61,33 @@ export class SubscriptionSyncProcessor {
           timestamp: new Date().toISOString(),
         });
       }
+      return { success: true };
     } catch (error) {
       const errorMsg = error instanceof Error ? error.message : String(error);
-      store.setSyncStatus(SyncStatus.ERROR, errorMsg);
+      subscriptionEventBus.emit(SUBSCRIPTION_EVENTS.SYNC_STATUS_CHANGED, {
+        status: 'error',
+        phase: 'purchase',
+        userId: event.userId,
+        productId: event.productId,
+        error: errorMsg,
+      });
       console.error('[SubscriptionSyncProcessor] 🔴 PURCHASE FAILED', {
         userId: event.userId,
         productId: event.productId,
         error: errorMsg,
         timestamp: new Date().toISOString(),
       });
-      throw error;
+      return { success: false, error: errorMsg };
     }
   }
 
-  async handleRenewal(event: RenewalDetectedEvent): Promise<void> {
-    const store = useSubscriptionFlowStore.getState();
-    store.setSyncStatus(SyncStatus.SYNCING);
+  async handleRenewal(event: RenewalDetectedEvent): Promise<{ success: boolean; error?: string }> {
+    subscriptionEventBus.emit(SUBSCRIPTION_EVENTS.SYNC_STATUS_CHANGED, {
+      status: 'syncing',
+      phase: 'renewal',
+      userId: event.userId,
+      productId: event.productId,
+    });
 
     if (typeof __DEV__ !== "undefined" && __DEV__) {
       console.log('[SubscriptionSyncProcessor] 🔵 RENEWAL START', {
@@ -84,7 +103,12 @@ export class SubscriptionSyncProcessor {
         userId: event.userId,
         productId: event.productId,
       });
-      store.setSyncStatus(SyncStatus.SUCCESS);
+      subscriptionEventBus.emit(SUBSCRIPTION_EVENTS.SYNC_STATUS_CHANGED, {
+        status: 'success',
+        phase: 'renewal',
+        userId: event.userId,
+        productId: event.productId,
+      });
       if (typeof __DEV__ !== "undefined" && __DEV__) {
         console.log('[SubscriptionSyncProcessor] 🟢 RENEWAL SUCCESS', {
           userId: event.userId,
@@ -92,20 +116,27 @@ export class SubscriptionSyncProcessor {
           timestamp: new Date().toISOString(),
         });
       }
+      return { success: true };
     } catch (error) {
       const errorMsg = error instanceof Error ? error.message : String(error);
-      store.setSyncStatus(SyncStatus.ERROR, errorMsg);
+      subscriptionEventBus.emit(SUBSCRIPTION_EVENTS.SYNC_STATUS_CHANGED, {
+        status: 'error',
+        phase: 'renewal',
+        userId: event.userId,
+        productId: event.productId,
+        error: errorMsg,
+      });
       console.error('[SubscriptionSyncProcessor] 🔴 RENEWAL FAILED', {
         userId: event.userId,
         productId: event.productId,
         error: errorMsg,
         timestamp: new Date().toISOString(),
       });
-      throw error;
+      return { success: false, error: errorMsg };
     }
   }
 
-  async handlePremiumStatusChanged(event: PremiumStatusChangedEvent): Promise<void> {
+  async handlePremiumStatusChanged(event: PremiumStatusChangedEvent): Promise<{ success: boolean; error?: string }> {
     if (typeof __DEV__ !== "undefined" && __DEV__) {
       console.log('[SubscriptionSyncProcessor] 🔵 STATUS CHANGE START', {
         userId: event.userId,
@@ -130,6 +161,7 @@ export class SubscriptionSyncProcessor {
           timestamp: new Date().toISOString(),
         });
       }
+      return { success: true };
     } catch (error) {
       const errorMsg = error instanceof Error ? error.message : String(error);
       console.error('[SubscriptionSyncProcessor] 🔴 STATUS CHANGE FAILED', {
@@ -139,8 +171,8 @@ export class SubscriptionSyncProcessor {
         error: errorMsg,
         timestamp: new Date().toISOString(),
       });
-      // We don't set global sync error here for passive status changes to avoid UI noise
-      // throw error; 
+      // We don't emit sync status change here for passive status changes to avoid UI noise
+      return { success: false, error: errorMsg };
     }
   }
 

package/src/domains/subscription/application/initializer/ServiceConfigurator.ts

@@ -23,9 +23,15 @@ export function configureServices(config: SubscriptionInitConfig, apiKey: string
       apiKey,
       entitlementIdentifier: entitlementId,
       consumableProductIdentifiers: [creditPackages.identifierPattern],
-      onPurchaseCompleted: (event) => syncProcessor.handlePurchase(event),
-      onRenewalDetected: (event) => syncProcessor.handleRenewal(event),
-      onPremiumStatusChanged: (event) => syncProcessor.handlePremiumStatusChanged(event),
+      onPurchaseCompleted: async (event) => {
+        await syncProcessor.handlePurchase(event);
+      },
+      onRenewalDetected: async (event) => {
+        await syncProcessor.handleRenewal(event);
+      },
+      onPremiumStatusChanged: async (event) => {
+        await syncProcessor.handlePremiumStatusChanged(event);
+      },
       onCreditsUpdated,
     },
     apiKey,

package/src/domains/subscription/presentation/components/overlay/PurchaseLoadingOverlay.tsx

@@ -2,24 +2,24 @@
  * Purchase Loading Overlay
  * Full-screen overlay shown during purchase operations
  * Locks the UI and shows a spinner with optional message
+ *
+ * This is now a props-based component. Pass isLoading from parent component.
  */
 
 import React from "react";
 import { View, Modal, StyleSheet } from "react-native";
 import { AtomicSpinner, AtomicText } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import { usePurchaseLoadingStore, selectIsPurchasing } from "../../stores/purchaseLoadingStore";
 import type { PurchaseLoadingOverlayProps } from "./PurchaseLoadingOverlay.types";
 
 export type { PurchaseLoadingOverlayProps };
 
 export const PurchaseLoadingOverlay: React.FC<PurchaseLoadingOverlayProps> = React.memo(
-  ({ loadingText }) => {
+  ({ loadingText, isLoading }) => {
     const tokens = useAppDesignTokens();
-    const isPurchasing = usePurchaseLoadingStore(selectIsPurchasing);
 
     return (
-      <Modal visible={isPurchasing} transparent animationType="none" statusBarTranslucent>
+      <Modal visible={isLoading} transparent animationType="none" statusBarTranslucent>
         <View style={[styles.container, { backgroundColor: "rgba(0, 0, 0, 0.7)" }]}>
           <View style={[styles.content, { backgroundColor: tokens.colors.surface }]}>
             <AtomicSpinner size="lg" color="primary" />

package/src/domains/subscription/presentation/components/overlay/PurchaseLoadingOverlay.types.ts

@@ -1,4 +1,6 @@
 export interface PurchaseLoadingOverlayProps {
+  /** Whether the overlay is visible */
+  isLoading: boolean;
   /** Loading message to display */
   loadingText?: string;
 }

package/src/domains/subscription/presentation/providers/SubscriptionFlowProvider.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useContext, useEffect } from "react";
 import { useSubscriptionFlowStore, SubscriptionFlowStatus } from "../useSubscriptionFlow";
+import { useSyncStatusListener } from "../useSyncStatusListener";
 import { initializationState } from "../../infrastructure/state/initializationState";
 
 interface SubscriptionFlowContextType {
@@ -9,6 +10,9 @@ interface SubscriptionFlowContextType {
 const SubscriptionFlowContext = createContext<SubscriptionFlowContextType | undefined>(undefined);
 
 export const SubscriptionFlowProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  // Listen to sync status events from application layer
+  useSyncStatusListener();
+
   // Selectors for stable references and only what we need
   const isInitialized = useSubscriptionFlowStore((state) => state.isInitialized);
   const isOnboardingComplete = useSubscriptionFlowStore((state) => state.isOnboardingComplete);

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

@@ -1,96 +1,38 @@
-import { useCallback, useMemo } from 'react';
-import type { PurchasesPackage } from 'react-native-purchases';
-import { useCredits } from '../../credits/presentation/useCredits';
-import { useSubscriptionStatus } from './useSubscriptionStatus';
-import {
-  useSubscriptionPackages,
-  usePurchasePackage,
-  useRestorePurchase,
-} from '../infrastructure/hooks/useSubscriptionQueries';
-import { usePaywallVisibility } from './usePaywallVisibility';
-import { isPremiumSyncPending } from '../utils/syncStatus';
+import { useMemo } from 'react';
+import { usePremiumStatus } from './usePremiumStatus';
+import { usePremiumPackages } from './usePremiumPackages';
+import { usePremiumActions } from './usePremiumActions';
 import { UsePremiumResult } from './usePremium.types';
 
-const EMPTY_PACKAGES: PurchasesPackage[] = [];
-
+/**
+ * Facade hook that combines status, packages, and actions.
+ *
+ * This provides backward compatibility with existing code while allowing
+ * components to use more focused hooks (usePremiumStatus, usePremiumPackages, usePremiumActions)
+ * for better performance and testability.
+ *
+ * For new components, consider using the focused hooks:
+ * - usePremiumStatus() - when you only need premium status
+ * - usePremiumPackages() - when you only need package data
+ * - usePremiumActions() - when you only need actions
+ *
+ * This facade re-renders when ANY of the sub-hooks change, whereas focused hooks
+ * only re-render when their specific data changes.
+ */
 export const usePremium = (): UsePremiumResult => {
-  const { isPremium: subscriptionActive, isLoading: statusLoading } = useSubscriptionStatus();
-  const { credits, isLoading: creditsLoading } = useCredits();
-
-  const { data: packages = EMPTY_PACKAGES, isLoading: packagesLoading } = useSubscriptionPackages();
-
-  const purchaseMutation = usePurchasePackage();
-  const restoreMutation = useRestorePurchase();
-
-  const { showPaywall, setShowPaywall, closePaywall, openPaywall } = usePaywallVisibility();
-
-  const isPremium = subscriptionActive || (credits?.isPremium ?? false);
-  const isSyncing = isPremiumSyncPending({
-    statusLoading,
-    creditsLoading,
-    subscriptionActive,
-    credits,
-  });
-
-  const handlePurchase = useCallback(
-    async (pkg: PurchasesPackage): Promise<boolean> => {
-      try {
-        const result = await purchaseMutation.mutateAsync(pkg);
-        return result.success;
-      } catch (error) {
-        if (__DEV__) {
-          console.error('[usePremium] Purchase failed:', error);
-        }
-        return false;
-      }
-    },
-    [purchaseMutation],
-  );
-
-  const handleRestore = useCallback(async (): Promise<boolean> => {
-    try {
-      const result = await restoreMutation.mutateAsync();
-      return result.success;
-    } catch (error) {
-      if (__DEV__) {
-        console.error('[usePremium] Restore failed:', error);
-      }
-      return false;
-    }
-  }, [restoreMutation]);
+  const status = usePremiumStatus();
+  const packages = usePremiumPackages();
+  const actions = usePremiumActions();
 
   return useMemo(() => ({
-    isPremium,
-    isLoading:
-      statusLoading ||
-      creditsLoading ||
-      packagesLoading ||
-      purchaseMutation.isPending ||
-      restoreMutation.isPending,
-    packages,
-    credits,
-    showPaywall,
-    isSyncing,
-    purchasePackage: handlePurchase,
-    restorePurchase: handleRestore,
-    setShowPaywall,
-    closePaywall,
-    openPaywall,
+    ...status,
+    ...packages,
+    ...actions,
+    // Merge loading states for backward compatibility
+    isLoading: status.isSyncing || packages.isLoading || actions.isLoading,
   }), [
-    isPremium,
-    statusLoading,
-    creditsLoading,
-    packagesLoading,
-    purchaseMutation.isPending,
-    restoreMutation.isPending,
+    status,
     packages,
-    credits,
-    showPaywall,
-    isSyncing,
-    handlePurchase,
-    handleRestore,
-    setShowPaywall,
-    closePaywall,
-    openPaywall,
+    actions,
   ]);
 };

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

@@ -0,0 +1,94 @@
+import { useCallback, useMemo } from 'react';
+import type { PurchasesPackage } from 'react-native-purchases';
+import {
+  usePurchasePackage,
+  useRestorePurchase,
+} from '../infrastructure/hooks/useSubscriptionQueries';
+import { usePaywallVisibility } from './usePaywallVisibility';
+
+export interface PremiumActions {
+  purchasePackage: (pkg: PurchasesPackage) => Promise<boolean>;
+  restorePurchase: () => Promise<boolean>;
+  showPaywall: boolean;
+  setShowPaywall: (show: boolean) => void;
+  closePaywall: () => void;
+  openPaywall: () => void;
+  isPurchasing: boolean;
+  isRestoring: boolean;
+  isLoading: boolean;
+  isProductPurchasing: (productId: string) => boolean;
+}
+
+/**
+ * Hook for premium actions - mutations and visibility control.
+ *
+ * This hook is focused on user actions: purchasing, restoring, and paywall visibility.
+ * It does not include data fetching - use usePremiumStatus and usePremiumPackages for that.
+ *
+ * This separation allows components to only re-render when the specific state they care about changes.
+ */
+export function usePremiumActions(): PremiumActions {
+  const purchaseMutation = usePurchasePackage();
+  const restoreMutation = useRestorePurchase();
+  const { showPaywall, setShowPaywall, closePaywall, openPaywall } = usePaywallVisibility();
+
+  const purchasePackage = useCallback(
+    async (pkg: PurchasesPackage): Promise<boolean> => {
+      try {
+        const result = await purchaseMutation.mutateAsync(pkg);
+        return result.success;
+      } catch (error) {
+        if (__DEV__) {
+          console.error('[usePremiumActions] Purchase failed:', error);
+        }
+        return false;
+      }
+    },
+    [purchaseMutation],
+  );
+
+  const restorePurchase = useCallback(async (): Promise<boolean> => {
+    try {
+      const result = await restoreMutation.mutateAsync();
+      return result.success;
+    } catch (error) {
+      if (__DEV__) {
+        console.error('[usePremiumActions] Restore failed:', error);
+      }
+      return false;
+    }
+  }, [restoreMutation]);
+
+  const isPurchasing = purchaseMutation.isPending;
+  const isRestoring = restoreMutation.isPending;
+  const isLoading = isPurchasing || isRestoring;
+
+  const isProductPurchasing = useCallback((productId: string): boolean => {
+    return purchaseMutation.variables?.product?.identifier === productId &&
+           purchaseMutation.isPending;
+  }, [purchaseMutation]);
+
+  return useMemo(() => ({
+    purchasePackage,
+    restorePurchase,
+    showPaywall,
+    setShowPaywall,
+    closePaywall,
+    openPaywall,
+    isPurchasing,
+    isRestoring,
+    isLoading,
+    isProductPurchasing,
+  }), [
+    purchasePackage,
+    restorePurchase,
+    showPaywall,
+    setShowPaywall,
+    closePaywall,
+    openPaywall,
+    isPurchasing,
+    isRestoring,
+    isLoading,
+    isProductPurchasing,
+  ]);
+}

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

@@ -0,0 +1,25 @@
+import { useMemo } from 'react';
+import type { PurchasesPackage } from 'react-native-purchases';
+import { useSubscriptionPackages } from '../infrastructure/hooks/useSubscriptionQueries';
+
+const EMPTY_PACKAGES: PurchasesPackage[] = [];
+
+export interface PremiumPackages {
+  packages: PurchasesPackage[];
+  isLoading: boolean;
+}
+
+/**
+ * Hook for fetching subscription packages.
+ *
+ * This hook is focused solely on package data - no premium status or mutations.
+ * Use this when you only need package information for display purposes.
+ */
+export function usePremiumPackages(): PremiumPackages {
+  const { data: packages = EMPTY_PACKAGES, isLoading } = useSubscriptionPackages();
+
+  return useMemo(() => ({
+    packages,
+    isLoading,
+  }), [packages, isLoading]);
+}

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

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import type { UserCredits } from '../../credits/core/Credits';
+import { useCredits } from '../../credits/presentation/useCredits';
+import { useSubscriptionStatus } from './useSubscriptionStatus';
+import { isPremiumSyncPending } from '../utils/syncStatus';
+
+export interface PremiumStatus {
+  isPremium: boolean;
+  credits: UserCredits | null;
+  isSyncing: boolean;
+}
+
+/**
+ * Read-only hook for premium status.
+ * Combines subscription status and credits to determine overall premium state.
+ *
+ * This hook is focused on data reading only - no mutations or side effects.
+ * Use this when you only need to know the premium status without triggering
+ * purchases or other actions.
+ */
+export function usePremiumStatus(): PremiumStatus {
+  const { isPremium: subscriptionActive, isLoading: statusLoading } = useSubscriptionStatus();
+  const { credits, isLoading: creditsLoading } = useCredits();
+
+  const isPremium = subscriptionActive || (credits?.isPremium ?? false);
+  const isSyncing = isPremiumSyncPending({
+    statusLoading,
+    creditsLoading,
+    subscriptionActive,
+    credits,
+  });
+
+  return useMemo(() => ({
+    isPremium,
+    credits,
+    isSyncing,
+  }), [isPremium, credits, isSyncing]);
+}

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

@@ -4,8 +4,8 @@
  * Uses @umituz/react-native-design-system's storage utility for standardized persistence.
  */
 
-import { DeviceEventEmitter } from "react-native";
 import { createStore } from "@umituz/react-native-design-system/storage";
+import { subscriptionEventBus, FLOW_EVENTS } from "../../../shared/infrastructure/SubscriptionEventBus";
 
 export enum SubscriptionFlowStatus {
   INITIALIZING = "INITIALIZING",
@@ -77,7 +77,7 @@ export const useSubscriptionFlowStore = createStore<SubscriptionFlowState, Subsc
         showPostOnboardingPaywall: true,
         status: SubscriptionFlowStatus.POST_ONBOARDING_PAYWALL,
       });
-      DeviceEventEmitter.emit("onboarding-complete");
+      subscriptionEventBus.emit(FLOW_EVENTS.ONBOARDING_COMPLETED, { timestamp: Date.now() });
     },
     closePostOnboardingPaywall: async () => {
       set({
@@ -85,11 +85,15 @@ export const useSubscriptionFlowStore = createStore<SubscriptionFlowState, Subsc
         paywallShown: true,
         status: SubscriptionFlowStatus.READY,
       });
+      subscriptionEventBus.emit(FLOW_EVENTS.PAYWALL_CLOSED, { timestamp: Date.now() });
     },
     closeFeedback: () => set({ showFeedback: false }),
     setAuthModalOpen: (open: boolean) => set({ isAuthModalOpen: open }),
     setShowFeedback: (show: boolean) => set({ showFeedback: show }),
-    markPaywallShown: async () => set({ paywallShown: true }),
+    markPaywallShown: async () => {
+      set({ paywallShown: true });
+      subscriptionEventBus.emit(FLOW_EVENTS.PAYWALL_SHOWN, { timestamp: Date.now() });
+    },
     setInitialized: (initialized: boolean) => set((state) => {
       if (state.isInitialized === initialized) return state;
       return { isInitialized: initialized };

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

@@ -0,0 +1,47 @@
+import { useEffect } from "react";
+import { subscriptionEventBus, SUBSCRIPTION_EVENTS } from "../../../shared/infrastructure/SubscriptionEventBus";
+import { useSubscriptionFlowStore, SyncStatus } from "./useSubscriptionFlow";
+
+interface SyncStatusEvent {
+  status: 'syncing' | 'success' | 'error';
+  phase: 'purchase' | 'renewal';
+  userId?: string;
+  productId?: string;
+  error?: string;
+}
+
+/**
+ * Hook that listens to sync status events from the application layer
+ * and updates the presentation layer's Zustand store accordingly.
+ *
+ * This maintains clean architecture separation: Application layer emits events,
+ * Presentation layer consumes them and updates its own state.
+ */
+export function useSyncStatusListener() {
+  const setSyncStatus = useSubscriptionFlowStore((state) => state.setSyncStatus);
+
+  useEffect(() => {
+    const unsubscribe = subscriptionEventBus.on<SyncStatusEvent>(
+      SUBSCRIPTION_EVENTS.SYNC_STATUS_CHANGED,
+      (event) => {
+        const syncStatus = event.status === 'syncing' ? SyncStatus.SYNCING :
+                          event.status === 'success' ? SyncStatus.SUCCESS :
+                          SyncStatus.ERROR;
+
+        setSyncStatus(syncStatus, event.error);
+
+        if (__DEV__) {
+          console.log('[useSyncStatusListener] Sync status updated', {
+            status: event.status,
+            phase: event.phase,
+            userId: event.userId,
+            productId: event.productId,
+            error: event.error,
+          });
+        }
+      }
+    );
+
+    return unsubscribe;
+  }, [setSyncStatus]);
+}

package/src/index.ts

@@ -19,7 +19,7 @@ export type {
   PurchaseType,
 } from "./domains/subscription/core/SubscriptionConstants";
 export type { SubscriptionMetadata } from "./domains/subscription/core/types/SubscriptionMetadata";
-export type { PremiumStatus } from "./domains/subscription/core/types/PremiumStatus";
+export type { PremiumStatus as PremiumStatusMetadata } from "./domains/subscription/core/types/PremiumStatus";
 export type { CreditInfo } from "./domains/subscription/core/types/CreditInfo";
 export {
   createDefaultSubscriptionStatus,
@@ -63,10 +63,18 @@ export { useDeductCredit } from "./domains/credits/presentation/deduct-credit/us
 export { useFeatureGate } from "./domains/subscription/presentation/useFeatureGate";
 export { usePaywallVisibility, paywallControl } from "./domains/subscription/presentation/usePaywallVisibility";
 export { usePremium } from "./domains/subscription/presentation/usePremium";
+export { usePremiumStatus } from "./domains/subscription/presentation/usePremiumStatus";
+export { usePremiumPackages } from "./domains/subscription/presentation/usePremiumPackages";
+export { usePremiumActions } from "./domains/subscription/presentation/usePremiumActions";
+export type { UsePremiumResult } from "./domains/subscription/presentation/usePremium.types";
+export type { PremiumStatus } from "./domains/subscription/presentation/usePremiumStatus";
+export type { PremiumPackages } from "./domains/subscription/presentation/usePremiumPackages";
+export type { PremiumActions } from "./domains/subscription/presentation/usePremiumActions";
 export { useSubscriptionFlowStore } from "./domains/subscription/presentation/useSubscriptionFlow";
 export type { SubscriptionFlowState, SubscriptionFlowActions, SubscriptionFlowStore } from "./domains/subscription/presentation/useSubscriptionFlow";
 export { useSubscriptionStatus } from "./domains/subscription/presentation/useSubscriptionStatus";
 export type { SubscriptionStatusResult } from "./domains/subscription/presentation/useSubscriptionStatus.types";
+export { useSyncStatusListener } from "./domains/subscription/presentation/useSyncStatusListener";
 export { usePaywallFeedback } from "./presentation/hooks/feedback/usePaywallFeedback";
 export {
   usePaywallFeedbackSubmit,
@@ -108,6 +116,7 @@ export type {
   CreditsResult,
   DeductCreditsResult,
 } from "./domains/credits/core/Credits";
+export { CreditLimitService, calculateCreditLimit } from "./domains/credits/domain/services/CreditLimitService";
 
 // Utils
 export {

package/src/shared/infrastructure/SubscriptionEventBus.ts

@@ -76,4 +76,14 @@ export const SUBSCRIPTION_EVENTS = {
   PURCHASE_COMPLETED: "purchase_completed",
   RENEWAL_DETECTED: "renewal_detected",
   PREMIUM_STATUS_CHANGED: "premium_status_changed",
-};
+  SYNC_STATUS_CHANGED: "sync_status_changed",
+} as const;
+
+export const FLOW_EVENTS = {
+  ONBOARDING_COMPLETED: "flow_onboarding_completed",
+  PAYWALL_SHOWN: "flow_paywall_shown",
+  PAYWALL_CLOSED: "flow_paywall_closed",
+} as const;
+
+export type SubscriptionEventType = typeof SUBSCRIPTION_EVENTS[keyof typeof SUBSCRIPTION_EVENTS];
+export type FlowEventType = typeof FLOW_EVENTS[keyof typeof FLOW_EVENTS];

package/src/domains/credits/application/CreditLimitCalculator.ts

@@ -1,10 +0,0 @@
-import type { CreditsConfig } from "../core/Credits";
-import { calculateCreditLimit as calculateLimit } from "../utils/creditCalculations";
-
-/**
- * Service to calculate credit limits based on product configuration.
- * Uses centralized utility functions for calculations.
- */
-export function calculateCreditLimit(productId: string | undefined, config: CreditsConfig): number {
-  return calculateLimit(productId, config);
-}

package/src/domains/subscription/presentation/stores/purchaseLoadingStore.ts

@@ -1,53 +0,0 @@
-import { create } from "zustand";
-
-interface PurchaseLoadingState {
-  activePurchases: Map<string, "manual" | "auto-execution">;
-}
-
-interface PurchaseLoadingActions {
-  startPurchase: (productId: string, source: "manual" | "auto-execution") => void;
-  endPurchase: (productId: string) => void;
-  reset: () => void;
-}
-
-type PurchaseLoadingStore = PurchaseLoadingState & PurchaseLoadingActions;
-
-const createInitialState = (): PurchaseLoadingState => ({
-  activePurchases: new Map(),
-});
-
-export const usePurchaseLoadingStore = create<PurchaseLoadingStore>((set) => ({
-  ...createInitialState(),
-
-  startPurchase: (productId, source) => {
-    set((state) => {
-      const newPurchases = new Map(state.activePurchases);
-      newPurchases.set(productId, source);
-      return { activePurchases: newPurchases };
-    });
-  },
-
-  endPurchase: (productId) => {
-    set((state) => {
-      const newPurchases = new Map(state.activePurchases);
-      newPurchases.delete(productId);
-      return { activePurchases: newPurchases };
-    });
-  },
-
-  reset: () => {
-    set(createInitialState());
-  },
-}));
-
-/**
- * Optimized selector for purchasing state.
- * Use this to avoid re-renders when other parts of the state change.
- */
-export const selectIsPurchasing = (state: PurchaseLoadingStore) => state.activePurchases.size > 0;
-
-/**
- * Optimized selector for a specific product's purchasing state.
- */
-export const selectIsProductPurchasing = (productId: string) => (state: PurchaseLoadingStore) => 
-  state.activePurchases.has(productId);