@umituz/react-native-subscription 2.39.8 → 2.39.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.39.8",
+  "version": "2.39.9",
   "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/paywall/components/PaywallScreen.styles.ts

@@ -1,97 +1,169 @@
-import { StyleSheet } from "react-native";
+import { StyleSheet, Platform } from "react-native";
 
 export const paywallScreenStyles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  // Header / Hero
   heroContainer: {
     alignItems: "center",
-    marginBottom: 24,
+    justifyContent: "center",
+    marginVertical: 24,
+    height: 140,
   },
   heroImage: {
     width: 120,
     height: 120,
-    borderRadius: 60,
+    borderRadius: 30, // More modern rounded corners
   },
   header: {
     paddingHorizontal: 24,
-    marginBottom: 24,
+    marginBottom: 32,
+    alignItems: "center",
   },
   title: {
-    marginBottom: 8,
+    marginBottom: 12,
+    textAlign: "center",
+    fontWeight: "800",
+    letterSpacing: -0.5,
   },
   subtitle: {
     lineHeight: 22,
+    textAlign: "center",
+    opacity: 0.8,
+    paddingHorizontal: 12,
   },
-  plans: {
-    paddingHorizontal: 16,
+
+  // Sections
+  sectionHeader: {
+    paddingHorizontal: 24,
+    marginTop: 24,
     marginBottom: 16,
   },
-  loading: {
+  sectionTitle: {
+    fontWeight: "700",
+    textTransform: "uppercase",
+    letterSpacing: 1,
+    fontSize: 13,
+    opacity: 0.6,
+  },
+
+  // Features
+  featuresContainer: {
+    marginHorizontal: 24,
+    padding: 20,
+    borderRadius: 24,
+    gap: 16,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.1)",
+  },
+  featureRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 14,
+  },
+  featureIcon: {
+    width: 30,
+    height: 30,
+    borderRadius: 10,
+    justifyContent: "center",
     alignItems: "center",
-    paddingVertical: 32,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 3,
   },
-  loadingText: {
-    marginTop: 12,
+  featureText: {
+    flex: 1,
+    fontWeight: "500",
+    fontSize: 15,
   },
+
+  // Fixed Footer
   stickyFooter: {
     position: "absolute",
     bottom: 0,
     left: 0,
     right: 0,
-    paddingHorizontal: 16,
-    paddingTop: 12,
+    paddingHorizontal: 24,
+    paddingTop: 20,
     borderTopWidth: 1,
-    borderTopColor: "rgba(255, 255, 255, 0.1)",
+    borderTopColor: "rgba(255, 255, 255, 0.08)",
+    ...Platform.select({
+      ios: {
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: -4 },
+        shadowOpacity: 0.1,
+        shadowRadius: 12,
+      },
+      android: {
+        elevation: 8,
+      },
+    }),
   },
   cta: {
-    borderRadius: 14,
-    paddingVertical: 16,
+    borderRadius: 18,
+    height: 60,
+    justifyContent: "center",
     alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 6,
   },
   ctaDisabled: {
-    opacity: 0.6,
+    opacity: 0.5,
   },
   ctaText: {
-    fontWeight: "600",
-  },
-  features: {
-    padding: 16,
-  },
-  featureRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginBottom: 12,
-  },
-  featureIcon: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    alignItems: "center",
-    justifyContent: "center",
-    marginRight: 12,
-  },
-  featureText: {
-    flex: 1,
+    fontWeight: "700",
+    letterSpacing: 0.5,
   },
+
+  // Footer Links
   footer: {
-    paddingHorizontal: 16,
-    paddingBottom: 16,
+    marginTop: 16,
+    alignItems: "center",
+    gap: 12,
   },
   restoreButton: {
-    paddingVertical: 8,
-  },
-  restoreButtonDisabled: {
-    opacity: 0.5,
+    paddingVertical: 4,
   },
   footerLink: {
     fontSize: 12,
+    fontWeight: "500",
+    textDecorationLine: "underline",
+    opacity: 0.7,
   },
   legalRow: {
     flexDirection: "row",
     justifyContent: "center",
     alignItems: "center",
+    gap: 20,
+    marginBottom: 8,
+  },
+
+  // Close Button
+  closeBtn: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 16,
     marginTop: 8,
-    gap: 16,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.1)",
+  },
+  
+  // List
+  listContent: {
+    paddingBottom: 40,
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
   },
 });

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

@@ -1,23 +1,36 @@
 /**
  * Paywall Screen Component
  *
- * Full-screen paywall (not modal). Use when you want the paywall
- * to be a standalone screen instead of a modal overlay.
+ * Full-screen paywall with optimized FlatList for performance and modern design.
  */
 
-import React, { useCallback, useEffect } from "react";
-import { View, TouchableOpacity, Linking, StyleSheet } from "react-native";
+import React, { useCallback, useEffect, useMemo } from "react";
+import { 
+  View, 
+  TouchableOpacity, 
+  Linking, 
+  FlatList, 
+  ListRenderItem, 
+  StatusBar,
+} from "react-native";
 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";
-import { ScreenLayout } from "@umituz/react-native-design-system/layouts";
 import { Image } from "expo-image";
+import type { PurchasesPackage } from "react-native-purchases";
 import { PlanCard } from "./PlanCard";
 import { paywallScreenStyles as styles } from "./PaywallScreen.styles";
-import { PaywallFeatures } from "./PaywallFeatures";
 import { PaywallFooter } from "./PaywallFooter";
 import { usePaywallActions } from "../hooks/usePaywallActions";
 import { PaywallScreenProps } from "./PaywallScreen.types";
+import type { SubscriptionFeature } from "../entities/types";
+
+type PaywallListItem = 
+  | { type: 'HEADER' }
+  | { type: 'FEATURE_HEADER' }
+  | { type: 'FEATURE'; feature: SubscriptionFeature }
+  | { type: 'PLAN_HEADER' }
+  | { type: 'PLAN'; pkg: PurchasesPackage };
 
 export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) => {
   const {
@@ -42,14 +55,6 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
 
-  if (__DEV__) {
-    console.log("[PaywallScreen] Render:", {
-      packagesCount: packages.length,
-      isLoadingPackages,
-      source,
-    });
-  }
-
   const { selectedPlanId, setSelectedPlanId, isProcessing, handlePurchase, handleRestore } = usePaywallActions({
     packages,
     onPurchase,
@@ -61,7 +66,7 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
     onClose
   });
 
-  // Auto-select first package when packages load and none is selected
+  // Auto-select first package
   useEffect(() => {
     if (packages.length > 0 && !selectedPlanId) {
       setSelectedPlanId(packages[0].product.identifier);
@@ -73,125 +78,214 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
     try {
       if (await Linking.canOpenURL(url)) await Linking.openURL(url);
     } catch (error) {
-      console.error('[PaywallScreen] Failed to open URL:', error instanceof Error ? error.message : String(error));
+      console.error('[PaywallScreen] Failed to open URL:', error);
     }
   }, []);
 
-  return (
-    <View style={[screenStyles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
-      {/* Close button - positioned absolutely at top */}
-      <View style={[screenStyles.headerContainer, { paddingTop: insets.top }]}>
-        <TouchableOpacity
-          onPress={onClose}
-          style={[screenStyles.closeBtn, { backgroundColor: tokens.colors.surfaceSecondary }]}
-          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-        >
-          <AtomicIcon name="close-outline" size="md" customColor={tokens.colors.textPrimary} />
-        </TouchableOpacity>
-      </View>
+  // Prepare flat data for the list
+  const flatData = useMemo(() => {
+    const data: PaywallListItem[] = [];
+    
+    // 1. Header (Hero, Title, Subtitle)
+    data.push({ type: 'HEADER' });
 
-      {/* Scrollable content */}
-      <ScreenLayout
-        scrollable={true}
-        backgroundColor="transparent"
-        contentContainerStyle={{ ...screenStyles.contentContainer, paddingBottom: 120 }}
-      >
-        {/* Hero Image */}
-        {heroImage && (
-          <View style={styles.heroContainer}>
-            <Image source={heroImage} style={styles.heroImage} contentFit="cover" transition={0} />
-          </View>
-        )}
-
-        {/* Header */}
-        <View style={styles.header}>
-          <AtomicText
-            type="headlineMedium"
-            adjustsFontSizeToFit
-            numberOfLines={2}
-            minimumFontScale={0.75}
-            style={[styles.title, { color: tokens.colors.textPrimary }]}
-          >
-            {translations.title}
-          </AtomicText>
-          {translations.subtitle && (
-            <AtomicText
-              type="bodyMedium"
-              adjustsFontSizeToFit
-              numberOfLines={3}
-              minimumFontScale={0.8}
-              style={[styles.subtitle, { color: tokens.colors.textSecondary }]}
-            >
-              {translations.subtitle}
-            </AtomicText>
-          )}
-        </View>
+    // 2. Features Section
+    if (features.length > 0) {
+      data.push({ type: 'FEATURE_HEADER' });
+      features.forEach(feature => {
+        data.push({ type: 'FEATURE', feature });
+      });
+    }
+
+    // 3. Plans Section
+    if (packages.length > 0) {
+      data.push({ type: 'PLAN_HEADER' });
+      packages.forEach(pkg => {
+        data.push({ type: 'PLAN', pkg });
+      });
+    }
+
+    return data;
+  }, [features, packages]);
 
-        {/* Features */}
-        <PaywallFeatures features={features} />
-
-        {/* Plans */}
-        <View style={styles.plans}>
-          {isLoadingPackages ? (
-            <View style={styles.loading}>
-              <AtomicSpinner size="md" />
-              {translations.processingText && (
-                <AtomicText
-                  type="bodySmall"
-                  style={[styles.loadingText, { color: tokens.colors.textSecondary }]}
-                >
-                  {translations.processingText}
+  const renderItem: ListRenderItem<PaywallListItem> = useCallback(({ item }) => {
+    switch (item.type) {
+      case 'HEADER':
+        return (
+          <View key="header">
+            {/* Hero Image */}
+            {heroImage && (
+              <View style={styles.heroContainer}>
+                <Image source={heroImage} style={styles.heroImage} contentFit="cover" transition={200} />
+              </View>
+            )}
+
+            {/* Header Text */}
+            <View style={styles.header}>
+              <AtomicText type="headlineLarge" style={[styles.title, { color: tokens.colors.textPrimary }]}>
+                {translations.title}
+              </AtomicText>
+              {translations.subtitle && (
+                <AtomicText type="bodyMedium" style={[styles.subtitle, { color: tokens.colors.textSecondary }]}>
+                  {translations.subtitle}
                 </AtomicText>
               )}
             </View>
-          ) : packages.length === 0 ? (
-            <View style={styles.loading}>
-              <AtomicText
-                type="bodyMedium"
-                style={{ color: tokens.colors.textSecondary, textAlign: "center" }}
-              >
-                {translations.emptyText ?? "No packages available"}
-              </AtomicText>
+          </View>
+        );
+
+      case 'FEATURE_HEADER':
+        return (
+          <View key="feat-header" style={styles.sectionHeader}>
+            <AtomicText type="labelLarge" style={[styles.sectionTitle, { color: tokens.colors.textSecondary }]}>
+              {translations.featuresTitle || "WHAT'S INCLUDED"}
+            </AtomicText>
+          </View>
+        );
+
+      case 'FEATURE':
+        return (
+          <View key={`feat-${item.feature.text}`} style={[styles.featureRow, { marginHorizontal: 24, marginBottom: 16 }]}>
+            <View style={[styles.featureIcon, { backgroundColor: tokens.colors.primary }]}>
+              <AtomicIcon name={item.feature.icon as any} customSize={16} customColor={tokens.colors.onPrimary} />
             </View>
-          ) : (
-            packages.map((pkg) => {
-              const pid = pkg.product.identifier;
-              const isSelected = selectedPlanId === pid;
-              const isBestValue = bestValueIdentifier === pid;
-              const credits = creditAmounts?.[pid];
-
-              return (
-                <PlanCard
-                  key={pid}
-                  pkg={pkg}
-                  isSelected={isSelected}
-                  badge={isBestValue ? translations.bestValueBadgeText : undefined}
-                  creditAmount={credits}
-                  creditsLabel={creditsLabel}
-                  onSelect={() => setSelectedPlanId(pid)}
-                />
-              );
-            })
-          )}
+            <AtomicText type="bodyMedium" style={[styles.featureText, { color: tokens.colors.textPrimary }]}>
+              {item.feature.text}
+            </AtomicText>
+          </View>
+        );
+
+      case 'PLAN_HEADER':
+        return (
+          <View key="plan-header" style={styles.sectionHeader}>
+            <AtomicText type="labelLarge" style={[styles.sectionTitle, { color: tokens.colors.textSecondary }]}>
+              {translations.plansTitle || "CHOOSE YOUR PLAN"}
+            </AtomicText>
+          </View>
+        );
+
+      case 'PLAN': {
+        const pid = item.pkg.product.identifier;
+        return (
+          <PlanCard
+            key={pid}
+            pkg={item.pkg}
+            isSelected={selectedPlanId === pid}
+            badge={bestValueIdentifier === pid ? translations.bestValueBadgeText : undefined}
+            creditAmount={creditAmounts?.[pid]}
+            creditsLabel={creditsLabel}
+            onSelect={() => setSelectedPlanId(pid)}
+          />
+        );
+      }
+
+      default:
+        return null;
+    }
+  }, [heroImage, translations, tokens, selectedPlanId, bestValueIdentifier, creditAmounts, creditsLabel, setSelectedPlanId]);
+
+  // Performance Optimization: getItemLayout for FlatList
+  const getItemLayout = useCallback((_data: any, index: number) => {
+    // Estimated heights for different item types
+    // HEADER: ~300, FEATURE_HEADER: ~60, FEATURE: ~46, PLAN_HEADER: ~60, PLAN: ~80
+    let offset = 0;
+    for (let i = 0; i < index; i++) {
+      const item = flatData[i];
+      if (item.type === 'HEADER') offset += 300;
+      else if (item.type === 'FEATURE_HEADER' || item.type === 'PLAN_HEADER') offset += 60;
+      else if (item.type === 'FEATURE') offset += 46;
+      else if (item.type === 'PLAN') offset += 80;
+    }
+    
+    const currentItem = flatData[index];
+    let length = 80;
+    if (currentItem.type === 'HEADER') length = 300;
+    else if (currentItem.type === 'FEATURE_HEADER' || currentItem.type === 'PLAN_HEADER') length = 60;
+    else if (currentItem.type === 'FEATURE') length = 46;
+    
+    return { length, offset, index };
+  }, [flatData]);
+
+  const keyExtractor = useCallback((item: PaywallListItem, index: number) => {
+    if (item.type === 'FEATURE') return `feat-${item.feature.text}`;
+    if (item.type === 'PLAN') return `plan-${item.pkg.product.identifier}`;
+    return `${item.type}-${index}`;
+  }, []);
+
+  if (isLoadingPackages) {
+    return (
+      <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary, paddingTop: insets.top }]}>
+        <View style={styles.loadingContainer}>
+          <AtomicSpinner size="lg" />
         </View>
-      </ScreenLayout>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      <StatusBar barStyle="light-content" />
+      
+      {/* Absolute Close Button */}
+      <View style={{ 
+        position: 'absolute', 
+        top: Math.max(insets.top, 16), 
+        right: 0, 
+        zIndex: 10,
+      }}>
+        <TouchableOpacity
+          onPress={onClose}
+          style={[styles.closeBtn, { backgroundColor: tokens.colors.surfaceSecondary }]}
+          activeOpacity={0.7}
+        >
+          <AtomicIcon name="close-outline" size="sm" customColor={tokens.colors.textPrimary} />
+        </TouchableOpacity>
+      </View>
+
+      {/* Main Content */}
+      <FlatList
+        data={flatData}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        getItemLayout={getItemLayout}
+        windowSize={5}
+        removeClippedSubviews={true}
+        initialNumToRender={10}
+        maxToRenderPerBatch={10}
+        updateCellsBatchingPeriod={50}
+        contentContainerStyle={[
+          styles.listContent, 
+          { 
+            paddingTop: Math.max(insets.top, 20) + 40,
+            paddingBottom: 220 
+          }
+        ]}
+        showsVerticalScrollIndicator={false}
+      />
 
-      {/* Fixed footer overlay - always visible at bottom */}
-      <View style={[styles.stickyFooter, { backgroundColor: tokens.colors.backgroundPrimary, paddingBottom: Math.max(insets.bottom, 16) }]}>
+      {/* Fixed Footer */}
+      <View style={[
+        styles.stickyFooter, 
+        { 
+          backgroundColor: tokens.colors.backgroundPrimary,
+          paddingBottom: Math.max(insets.bottom, 24)
+        }
+      ]}>
         <TouchableOpacity
           onPress={handlePurchase}
-          disabled={isProcessing || isLoadingPackages || !selectedPlanId}
+          disabled={isProcessing || !selectedPlanId}
           style={[
             styles.cta,
             { backgroundColor: tokens.colors.primary },
-            (isProcessing || isLoadingPackages || !selectedPlanId) && styles.ctaDisabled
+            (isProcessing || !selectedPlanId) && styles.ctaDisabled
           ]}
-          activeOpacity={0.75}
+          activeOpacity={0.8}
         >
           <AtomicText type="titleLarge" style={[styles.ctaText, { color: tokens.colors.onPrimary }]}>
             {isProcessing ? translations.processingText : translations.purchaseButtonText}
           </AtomicText>
         </TouchableOpacity>
+
         <PaywallFooter
           translations={translations}
           legalUrls={legalUrls}
@@ -205,29 +299,3 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
 });
 
 PaywallScreen.displayName = "PaywallScreen";
-
-const screenStyles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  headerContainer: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    zIndex: 1000,
-    paddingHorizontal: 12,
-    paddingTop: 12,
-  },
-  closeBtn: {
-    width: 36,
-    height: 36,
-    borderRadius: 18,
-    justifyContent: 'center',
-    alignItems: 'center',
-    alignSelf: 'flex-end',
-  },
-  contentContainer: {
-    paddingTop: 60, // Space for close button
-  },
-});

package/src/domains/paywall/entities/types.ts

@@ -6,6 +6,8 @@ export interface SubscriptionFeature {
 export interface PaywallTranslations {
     title: string;
     subtitle?: string;
+    featuresTitle?: string;
+    plansTitle?: string;
     purchaseButtonText: string;
     restoreButtonText: string;
     loadingText: string;

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

@@ -1,6 +1,6 @@
-import { useState, useCallback, useRef } from "react";
+import { useState, useCallback, useRef, useMemo } from "react";
 import type { PurchasesPackage } from "react-native-purchases";
-import { usePurchaseLoadingStore } from "../../subscription/presentation/stores/purchaseLoadingStore";
+import { usePurchaseLoadingStore, selectIsPurchasing } from "../../subscription/presentation/stores/purchaseLoadingStore";
 import type { PurchaseSource } from "../../subscription/core/SubscriptionConstants";
 
 interface UsePaywallActionsParams {
@@ -26,10 +26,17 @@ export function usePaywallActions({
   const [selectedPlanId, setSelectedPlanId] = useState<string | null>(null);
   const [isLocalProcessing, setIsLocalProcessing] = useState(false);
 
-  const { startPurchase, endPurchase } = usePurchaseLoadingStore();
-  const isGlobalPurchasing = usePurchaseLoadingStore((state) => state.isPurchasing());
-
+  // Use optimized selector for global purchasing state
+  const isGlobalPurchasing = usePurchaseLoadingStore(selectIsPurchasing);
+  
+  // Combine processing states
   const isProcessing = isLocalProcessing || isGlobalPurchasing;
+  
+  // Use ref for isProcessing to keep callbacks stable without re-creating them
+  const isProcessingRef = useRef(isProcessing);
+  isProcessingRef.current = isProcessing;
+
+  const { startPurchase, endPurchase } = usePurchaseLoadingStore();
 
   const onPurchaseRef = useRef(onPurchase);
   const onRestoreRef = useRef(onRestore);
@@ -37,101 +44,86 @@ export function usePaywallActions({
   const onPurchaseErrorRef = useRef(onPurchaseError);
   const onAuthRequiredRef = useRef(onAuthRequired);
   const onCloseRef = useRef(onClose);
+  const packagesRef = useRef(packages);
 
-  // Update refs in render body — always in sync, no 1-frame delay
+  // Update refs in render body — always in sync
   onPurchaseRef.current = onPurchase;
   onRestoreRef.current = onRestore;
   onPurchaseSuccessRef.current = onPurchaseSuccess;
   onPurchaseErrorRef.current = onPurchaseError;
   onAuthRequiredRef.current = onAuthRequired;
   onCloseRef.current = onClose;
+  packagesRef.current = packages;
 
   const handlePurchase = useCallback(async () => {
-    if (!selectedPlanId) {
-      return;
-    }
+    // Access current state via refs to keep callback stable
+    const currentSelectedId = selectedPlanId;
+    if (!currentSelectedId) return;
 
     if (!onPurchaseRef.current) {
-      const err = new Error("Purchase handler not configured");
-      onPurchaseErrorRef.current?.(err);
+      onPurchaseErrorRef.current?.(new Error("Purchase handler not configured"));
       return;
     }
 
-    if (isProcessing) {
-      return;
-    }
+    if (isProcessingRef.current) return;
 
-    const pkg = packages.find((p) => p.product.identifier === selectedPlanId);
+    const pkg = packagesRef.current.find((p) => p.product.identifier === currentSelectedId);
 
     if (!pkg) {
-      if (typeof __DEV__ !== "undefined" && __DEV__) {
-        console.error("[usePaywallActions] Package not found", {
-          selectedPlanId,
-          availablePackages: packages.map(p => p.product.identifier),
-        });
-      }
-      const err = new Error(`Package not found: ${selectedPlanId}`);
-      onPurchaseErrorRef.current?.(err);
+      onPurchaseErrorRef.current?.(new Error(`Package not found: ${currentSelectedId}`));
       return;
     }
 
     setIsLocalProcessing(true);
-    startPurchase(selectedPlanId, "manual");
+    startPurchase(currentSelectedId, "manual");
 
     try {
       const success = await onPurchaseRef.current(pkg);
-
       if (success === true) {
         onPurchaseSuccessRef.current?.();
         onCloseRef.current?.();
       }
     } catch (error) {
-      const err = error instanceof Error ? error : new Error(String(error));
-      onPurchaseErrorRef.current?.(err);
+      onPurchaseErrorRef.current?.(error instanceof Error ? error : new Error(String(error)));
     } finally {
       setIsLocalProcessing(false);
-      endPurchase(selectedPlanId);
+      endPurchase(currentSelectedId);
     }
-  }, [selectedPlanId, packages, isProcessing, startPurchase, endPurchase]);
+  }, [selectedPlanId, startPurchase, endPurchase]); // Only depend on state that must trigger re-creation if changed
 
   const handleRestore = useCallback(async () => {
     if (!onRestoreRef.current) {
-      const err = new Error("Restore handler not configured");
-      onPurchaseErrorRef.current?.(err);
+      onPurchaseErrorRef.current?.(new Error("Restore handler not configured"));
       return;
     }
 
-    if (isProcessing) {
-      return;
-    }
+    if (isProcessingRef.current) return;
 
     setIsLocalProcessing(true);
     try {
       const success = await onRestoreRef.current();
-
       if (success === true) {
         onPurchaseSuccessRef.current?.();
         onCloseRef.current?.();
       }
     } catch (error) {
-      const err = error instanceof Error ? error : new Error(String(error));
-      onPurchaseErrorRef.current?.(err);
+      onPurchaseErrorRef.current?.(error instanceof Error ? error : new Error(String(error)));
     } finally {
       setIsLocalProcessing(false);
     }
-  }, [isProcessing]);
+  }, []); // Truly stable callback
 
   const resetState = useCallback(() => {
     setSelectedPlanId(null);
     setIsLocalProcessing(false);
   }, []);
 
-  return {
+  return useMemo(() => ({
     selectedPlanId,
     setSelectedPlanId,
     isProcessing,
     handlePurchase,
     handleRestore,
     resetState,
-  };
+  }), [selectedPlanId, isProcessing, handlePurchase, handleRestore, resetState]);
 }

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

@@ -7,7 +7,6 @@ interface PurchaseLoadingState {
 interface PurchaseLoadingActions {
   startPurchase: (productId: string, source: "manual" | "auto-execution") => void;
   endPurchase: (productId: string) => void;
-  isPurchasing: (productId?: string) => boolean;
   reset: () => void;
 }
 
@@ -17,7 +16,7 @@ const createInitialState = (): PurchaseLoadingState => ({
   activePurchases: new Map(),
 });
 
-export const usePurchaseLoadingStore = create<PurchaseLoadingStore>((set, get) => ({
+export const usePurchaseLoadingStore = create<PurchaseLoadingStore>((set) => ({
   ...createInitialState(),
 
   startPurchase: (productId, source) => {
@@ -36,15 +35,19 @@ export const usePurchaseLoadingStore = create<PurchaseLoadingStore>((set, get) =
     });
   },
 
-  isPurchasing: (productId) => {
-    const state = get();
-    if (productId) return state.activePurchases.has(productId);
-    return state.activePurchases.size > 0;
-  },
-
   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);

package/src/shared/infrastructure/SubscriptionEventBus.ts

@@ -2,7 +2,7 @@ type EventCallback<T = unknown> = (data: T) => void;
 
 class SubscriptionEventBus {
   private static instance: SubscriptionEventBus;
-  private listeners: Record<string, EventCallback[]> = {};
+  private listeners: Map<string, Set<EventCallback>> = new Map();
 
   private constructor() {}
 
@@ -14,52 +14,58 @@ class SubscriptionEventBus {
   }
 
   on<T>(event: string, callback: EventCallback<T>): () => void {
-    if (!this.listeners[event]) {
-      this.listeners[event] = [];
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, new Set());
     }
-    this.listeners[event].push(callback as EventCallback);
+    
+    const eventSet = this.listeners.get(event)!;
+    eventSet.add(callback as EventCallback);
 
     return () => {
-      const listeners = this.listeners[event];
+      const listeners = this.listeners.get(event);
       if (listeners) {
-        this.listeners[event] = listeners.filter(l => l !== callback);
-
-        if (this.listeners[event].length === 0) {
-          delete this.listeners[event];
+        listeners.delete(callback as EventCallback);
+        if (listeners.size === 0) {
+          this.listeners.delete(event);
         }
       }
     };
   }
 
   emit<T>(event: string, data: T): void {
-    if (!this.listeners[event]) return;
+    const listeners = this.listeners.get(event);
+    if (!listeners || listeners.size === 0) return;
 
-    this.listeners[event].forEach(callback => {
-      Promise.resolve().then(() => {
+    // Use microtask for async execution to not block main thread
+    // but keep it fast.
+    listeners.forEach(callback => {
+      queueMicrotask(() => {
         try {
           callback(data);
         } catch (error) {
           console.error('[SubscriptionEventBus] Listener error for event:', event, { error });
         }
-      }).catch(error => {
-        console.error('[SubscriptionEventBus] Async listener error for event:', event, { error });
       });
     });
   }
 
   clear(event?: string): void {
     if (event) {
-      delete this.listeners[event];
+      this.listeners.delete(event);
     } else {
-      this.listeners = {};
+      this.listeners.clear();
     }
   }
 
   getListenerCount(event?: string): number {
     if (event) {
-      return this.listeners[event]?.length ?? 0;
+      return this.listeners.get(event)?.size ?? 0;
     }
-    return Object.values(this.listeners).reduce((total, arr) => total + arr.length, 0);
+    let total = 0;
+    this.listeners.forEach(set => {
+      total += set.size;
+    });
+    return total;
   }
 }