@umituz/react-native-subscription 2.14.56 → 2.14.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.14.56",
+  "version": "2.14.58",
   "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/PaywallContainer.tsx

@@ -1,16 +1,17 @@
 /**
  * PaywallContainer Component
- * Package-driven paywall that encapsulates all logic
- * Main app only needs to add this ONE component
+ * Package-driven paywall with mode-based filtering
+ * Mode: credits | subscription | hybrid
  */
 
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import type { PurchasesPackage } from "react-native-purchases";
 import { usePaywallVisibility } from "../../../presentation/hooks/usePaywallVisibility";
 import { useSubscriptionPackages } from "../../../revenuecat/presentation/hooks/useSubscriptionPackages";
 import { usePurchasePackage } from "../../../revenuecat/presentation/hooks/usePurchasePackage";
 import { useRestorePurchase } from "../../../revenuecat/presentation/hooks/useRestorePurchase";
 import { SubscriptionManager } from "../../../revenuecat/infrastructure/managers/SubscriptionManager";
+import { filterPackagesByMode } from "../../../utils/packageFilter";
 import { PaywallModal } from "./PaywallModal";
 import type { PaywallContainerProps } from "./PaywallContainer.types";
 
@@ -25,28 +26,36 @@ export const PaywallContainer: React.FC<PaywallContainerProps> = ({
   heroImage,
   bestValueIdentifier,
   creditsLabel,
+  creditAmounts,
+  packageFilterConfig,
   onPurchaseSuccess,
   onPurchaseError,
 }) => {
   const { showPaywall, closePaywall } = usePaywallVisibility();
-  const { data: packages = [], isLoading, isFetching, status, error } = useSubscriptionPackages(userId ?? undefined);
+  const { data: allPackages = [], isLoading, isFetching, status, error } = useSubscriptionPackages(userId ?? undefined);
   const { mutateAsync: purchasePackage } = usePurchasePackage(userId ?? undefined);
   const { mutateAsync: restorePurchases } = useRestorePurchase(userId ?? undefined);
 
+  const filteredPackages = useMemo(() => {
+    return filterPackagesByMode(allPackages, mode, packageFilterConfig);
+  }, [allPackages, mode, packageFilterConfig]);
+
   useEffect(() => {
     if (__DEV__ && showPaywall) {
       console.log("[PaywallContainer] Paywall opened:", {
         userId,
+        mode,
         isConfigured: SubscriptionManager.isConfigured(),
         isInitialized: SubscriptionManager.isInitialized(),
-        packagesCount: packages.length,
+        allPackagesCount: allPackages.length,
+        filteredPackagesCount: filteredPackages.length,
         isLoading,
         isFetching,
         status,
         error: error?.message ?? null,
       });
     }
-  }, [showPaywall, userId, packages.length, isLoading, isFetching, status, error]);
+  }, [showPaywall, userId, mode, allPackages.length, filteredPackages.length, isLoading, isFetching, status, error]);
 
   const handlePurchase = useCallback(
     async (pkg: PurchasesPackage) => {
@@ -62,15 +71,15 @@ export const PaywallContainer: React.FC<PaywallContainerProps> = ({
           onPurchaseSuccess?.();
           closePaywall();
         }
-      } catch (error) {
-        const message = error instanceof Error ? error.message : String(error);
+      } catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
         if (__DEV__) {
           console.error("[PaywallContainer] Purchase failed:", message);
         }
         onPurchaseError?.(message);
       }
     },
-    [purchasePackage, closePaywall, onPurchaseSuccess, onPurchaseError],
+    [purchasePackage, closePaywall, onPurchaseSuccess, onPurchaseError]
   );
 
   const handleRestore = useCallback(async () => {
@@ -86,8 +95,8 @@ export const PaywallContainer: React.FC<PaywallContainerProps> = ({
         onPurchaseSuccess?.();
         closePaywall();
       }
-    } catch (error) {
-      const message = error instanceof Error ? error.message : String(error);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
       if (__DEV__) {
         console.error("[PaywallContainer] Restore failed:", message);
       }
@@ -103,16 +112,16 @@ export const PaywallContainer: React.FC<PaywallContainerProps> = ({
     <PaywallModal
       visible={showPaywall}
       onClose={closePaywall}
-      mode={mode}
       translations={translations}
-      subscriptionPackages={packages}
+      packages={filteredPackages}
       isLoading={isLoading}
       legalUrls={legalUrls}
       features={features ? [...features] : undefined}
       heroImage={heroImage}
       bestValueIdentifier={bestValueIdentifier}
       creditsLabel={creditsLabel}
-      onSubscriptionPurchase={handlePurchase}
+      creditAmounts={creditAmounts}
+      onPurchase={handlePurchase}
       onRestore={handleRestore}
     />
   );

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

@@ -1,10 +1,11 @@
 /**
  * PaywallContainer Types
- * Minimal props for package-driven paywall rendering
+ * Props for package-driven paywall with mode-based filtering
  */
 
-import type { PaywallMode, PaywallTranslations, PaywallLegalUrls, SubscriptionFeature } from "../entities";
 import type { ImageSourcePropType } from "react-native";
+import type { PaywallMode, PaywallTranslations, PaywallLegalUrls, SubscriptionFeature } from "../entities";
+import type { PackageFilterConfig } from "../../../utils/packageFilter";
 
 export interface PaywallContainerProps {
   /** User ID for subscription management */
@@ -23,6 +24,10 @@ export interface PaywallContainerProps {
   readonly bestValueIdentifier?: string;
   /** Credits label text */
   readonly creditsLabel?: string;
+  /** Credit amounts per package identifier */
+  readonly creditAmounts?: Record<string, number>;
+  /** Custom filter config for package categorization */
+  readonly packageFilterConfig?: PackageFilterConfig;
   /** Callback when purchase succeeds */
   readonly onPurchaseSuccess?: () => void;
   /** Callback when purchase fails */

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

@@ -1,6 +1,7 @@
 /**
  * Paywall Modal
- * Modern paywall with responsive design and theme support
+ * Renders packages passed from PaywallContainer
+ * Filtering is handled by PaywallContainer based on mode
  */
 
 import React, { useState, useCallback } from "react";
@@ -9,221 +10,191 @@ import { BaseModal, useAppDesignTokens, AtomicText, AtomicIcon, AtomicSpinner }
 import { Image } from "expo-image";
 import type { PurchasesPackage } from "react-native-purchases";
 import { PlanCard } from "./PlanCard";
-import { CreditCard } from "./CreditCard";
-import type { PaywallMode, CreditsPackage, SubscriptionFeature, PaywallTranslations, PaywallLegalUrls } from '../entities';
+import type { SubscriptionFeature, PaywallTranslations, PaywallLegalUrls } from "../entities";
 import { paywallModalStyles as styles } from "./PaywallModal.styles";
 
 export interface PaywallModalProps {
-    visible: boolean;
-    onClose: () => void;
-    mode: PaywallMode;
-    translations: PaywallTranslations;
-    subscriptionPackages?: PurchasesPackage[];
-    creditsPackages?: CreditsPackage[];
-    features?: SubscriptionFeature[];
-    isLoading?: boolean;
-    legalUrls?: PaywallLegalUrls;
-    bestValueIdentifier?: string;
-    creditAmounts?: Record<string, number>;
-    creditsLabel?: string;
-    /** Hero image source (require or uri) */
-    heroImage?: ImageSourcePropType;
-    onSubscriptionPurchase?: (pkg: PurchasesPackage) => Promise<void | boolean>;
-    onCreditsPurchase?: (packageId: string) => Promise<void | boolean>;
-    onRestore?: () => Promise<void | boolean>;
+  visible: boolean;
+  onClose: () => void;
+  translations: PaywallTranslations;
+  packages?: PurchasesPackage[];
+  features?: SubscriptionFeature[];
+  isLoading?: boolean;
+  legalUrls?: PaywallLegalUrls;
+  bestValueIdentifier?: string;
+  creditAmounts?: Record<string, number>;
+  creditsLabel?: string;
+  heroImage?: ImageSourcePropType;
+  onPurchase?: (pkg: PurchasesPackage) => Promise<void | boolean>;
+  onRestore?: () => Promise<void | boolean>;
 }
 
 export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
-    const {
-        visible,
-        onClose,
-        mode,
-        translations,
-        subscriptionPackages = [],
-        creditsPackages = [],
-        features = [],
-        isLoading = false,
-        legalUrls = {},
-        bestValueIdentifier,
-        creditAmounts,
-        creditsLabel,
-        heroImage,
-        onSubscriptionPurchase,
-        onCreditsPurchase,
-        onRestore,
-    } = props;
-
-    const tokens = useAppDesignTokens();
-    const [selectedPlanId, setSelectedPlanId] = useState<string | null>(null);
-    const [selectedCreditId, setSelectedCreditId] = useState<string | null>(null);
-    const [isProcessing, setIsProcessing] = useState(false);
-
-    const showCredits = mode === "credits";
-    const showSubscription = mode === "subscription" || mode === "hybrid";
-
-    const handlePurchase = useCallback(async () => {
-        setIsProcessing(true);
-        try {
-            if (showSubscription && selectedPlanId && onSubscriptionPurchase) {
-                const pkg = subscriptionPackages.find((p) => p.product.identifier === selectedPlanId);
-                if (pkg) await onSubscriptionPurchase(pkg);
-            } else if (showCredits && selectedCreditId && onCreditsPurchase) {
-                await onCreditsPurchase(selectedCreditId);
-            }
-        } finally {
-            setIsProcessing(false);
-        }
-    }, [showSubscription, showCredits, selectedPlanId, selectedCreditId, subscriptionPackages, onSubscriptionPurchase, onCreditsPurchase]);
-
-    const handleRestore = useCallback(async () => {
-        if (!onRestore || isProcessing) return;
-        setIsProcessing(true);
-        try {
-            await onRestore();
-        } finally {
-            setIsProcessing(false);
-        }
-    }, [onRestore, isProcessing]);
-
-    const handleLegalUrl = useCallback(async (url: string | undefined) => {
-        if (!url) return;
-        try {
-            const supported = await Linking.canOpenURL(url);
-            if (supported) {
-                await Linking.openURL(url);
-            }
-        } catch {
-            // Silent fail
-        }
-    }, []);
-
-    const isPurchaseDisabled = showSubscription ? !selectedPlanId : !selectedCreditId;
-
-    return (
-        <BaseModal visible={visible} onClose={onClose} contentStyle={styles.modalContent}>
-            <View style={[styles.container, { backgroundColor: tokens.colors.surface }]}>
-                <TouchableOpacity
-                    onPress={onClose}
-                    style={[styles.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>
+  const {
+    visible,
+    onClose,
+    translations,
+    packages = [],
+    features = [],
+    isLoading = false,
+    legalUrls = {},
+    bestValueIdentifier,
+    creditAmounts,
+    creditsLabel,
+    heroImage,
+    onPurchase,
+    onRestore,
+  } = props;
+
+  const tokens = useAppDesignTokens();
+  const [selectedPlanId, setSelectedPlanId] = useState<string | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  const handlePurchase = useCallback(async () => {
+    if (!selectedPlanId || !onPurchase) return;
+    setIsProcessing(true);
+    try {
+      const pkg = packages.find((p) => p.product.identifier === selectedPlanId);
+      if (pkg) await onPurchase(pkg);
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [selectedPlanId, packages, onPurchase]);
+
+  const handleRestore = useCallback(async () => {
+    if (!onRestore || isProcessing) return;
+    setIsProcessing(true);
+    try {
+      await onRestore();
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [onRestore, isProcessing]);
+
+  const handleLegalUrl = useCallback(async (url: string | undefined) => {
+    if (!url) return;
+    try {
+      const supported = await Linking.canOpenURL(url);
+      if (supported) await Linking.openURL(url);
+    } catch {
+      // Silent fail
+    }
+  }, []);
+
+  const isPurchaseDisabled = !selectedPlanId;
+
+  return (
+    <BaseModal visible={visible} onClose={onClose} contentStyle={styles.modalContent}>
+      <View style={[styles.container, { backgroundColor: tokens.colors.surface }]}>
+        <TouchableOpacity
+          onPress={onClose}
+          style={[styles.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>
+
+        <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.scroll}>
+          {heroImage && (
+            <View style={styles.heroContainer}>
+              <Image source={heroImage} style={styles.heroImage} contentFit="cover" transition={300} />
+            </View>
+          )}
+
+          <View style={styles.header}>
+            <AtomicText type="headlineMedium" 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>
+
+          {features.length > 0 && (
+            <View style={[styles.features, { backgroundColor: tokens.colors.surfaceSecondary }]}>
+              {features.map((feature, idx) => (
+                <View key={idx} style={styles.featureRow}>
+                  <View style={[styles.featureIcon, { backgroundColor: tokens.colors.primaryLight }]}>
+                    <AtomicIcon name={feature.icon} customSize={16} customColor={tokens.colors.primary} />
+                  </View>
+                  <AtomicText type="bodyMedium" style={[styles.featureText, { color: tokens.colors.textPrimary }]}>
+                    {feature.text}
+                  </AtomicText>
+                </View>
+              ))}
+            </View>
+          )}
 
-                <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.scroll}>
-                    {heroImage && (
-                        <View style={styles.heroContainer}>
-                            <Image
-                                source={heroImage}
-                                style={styles.heroImage}
-                                contentFit="cover"
-                                transition={300}
-                            />
-                        </View>
-                    )}
-                    <View style={styles.header}>
-                        <AtomicText type="headlineMedium" 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>
-
-                    {features.length > 0 && (
-                        <View style={[styles.features, { backgroundColor: tokens.colors.surfaceSecondary }]}>
-                            {features.map((feature, idx) => (
-                                <View key={idx} style={styles.featureRow}>
-                                    <View style={[styles.featureIcon, { backgroundColor: tokens.colors.primaryLight }]}>
-                                        <AtomicIcon name={feature.icon} customSize={16} customColor={tokens.colors.primary} />
-                                    </View>
-                                    <AtomicText type="bodyMedium" style={[styles.featureText, { color: tokens.colors.textPrimary }]}>
-                                        {feature.text}
-                                    </AtomicText>
-                                </View>
-                            ))}
-                        </View>
-                    )}
-
-                    {isLoading ? (
-                        <View style={styles.loading}>
-                            <AtomicSpinner
-                                size="lg"
-                                color="primary"
-                                text={translations.loadingText}
-                            />
-                        </View>
-                    ) : (
-                        <View style={styles.plans}>
-                            {showSubscription &&
-                                subscriptionPackages.map((pkg) => (
-                                    <PlanCard
-                                        key={pkg.product.identifier}
-                                        pkg={pkg}
-                                        isSelected={selectedPlanId === pkg.product.identifier}
-                                        onSelect={() => setSelectedPlanId(pkg.product.identifier)}
-                                        badge={pkg.product.identifier === bestValueIdentifier ? translations.bestValueBadgeText : undefined}
-                                        creditAmount={creditAmounts?.[pkg.product.identifier]}
-                                        creditsLabel={creditsLabel}
-                                    />
-                                ))}
-                            {showCredits &&
-                                creditsPackages.map((pkg) => (
-                                    <CreditCard key={pkg.id} pkg={pkg} isSelected={selectedCreditId === pkg.id} onSelect={() => setSelectedCreditId(pkg.id)} />
-                                ))}
-                        </View>
-                    )}
-
-                    <TouchableOpacity
-                        onPress={handlePurchase}
-                        disabled={isPurchaseDisabled || isProcessing}
-                        style={[styles.cta, { backgroundColor: tokens.colors.primary }, (isPurchaseDisabled || isProcessing) && styles.ctaDisabled]}
-                        activeOpacity={0.8}
-                    >
-                        <AtomicText type="titleLarge" style={[styles.ctaText, { color: tokens.colors.onPrimary }]}>
-                            {isProcessing
-                                ? translations.processingText
-                                : showSubscription
-                                    ? (translations.subscribeButtonText || translations.purchaseButtonText)
-                                    : translations.purchaseButtonText}
-                        </AtomicText>
-                    </TouchableOpacity>
-
-                    <View style={styles.footer}>
-                        {onRestore && (
-                            <TouchableOpacity
-                                onPress={handleRestore}
-                                disabled={isProcessing}
-                                style={[styles.restoreButton, isProcessing && styles.restoreButtonDisabled]}
-                            >
-                                <AtomicText type="bodySmall" style={[styles.footerLink, { color: tokens.colors.textSecondary }]}>
-                                    {isProcessing ? translations.processingText : translations.restoreButtonText}
-                                </AtomicText>
-                            </TouchableOpacity>
-                        )}
-                        <View style={styles.legalRow}>
-                            {legalUrls.termsUrl && (
-                                <TouchableOpacity onPress={() => handleLegalUrl(legalUrls.termsUrl)}>
-                                    <AtomicText type="bodySmall" style={[styles.footerLink, { color: tokens.colors.textSecondary }]}>
-                                        {translations.termsOfServiceText}
-                                    </AtomicText>
-                                </TouchableOpacity>
-                            )}
-                            {legalUrls.privacyUrl && (
-                                <TouchableOpacity onPress={() => handleLegalUrl(legalUrls.privacyUrl)}>
-                                    <AtomicText type="bodySmall" style={[styles.footerLink, { color: tokens.colors.textSecondary }]}>
-                                        {translations.privacyText}
-                                    </AtomicText>
-                                </TouchableOpacity>
-                            )}
-                        </View>
-                    </View>
-                </ScrollView>
+          {isLoading ? (
+            <View style={styles.loading}>
+              <AtomicSpinner size="lg" color="primary" text={translations.loadingText} />
+            </View>
+          ) : (
+            <View style={styles.plans}>
+              {packages.map((pkg) => (
+                <PlanCard
+                  key={pkg.product.identifier}
+                  pkg={pkg}
+                  isSelected={selectedPlanId === pkg.product.identifier}
+                  onSelect={() => setSelectedPlanId(pkg.product.identifier)}
+                  badge={pkg.product.identifier === bestValueIdentifier ? translations.bestValueBadgeText : undefined}
+                  creditAmount={creditAmounts?.[pkg.product.identifier]}
+                  creditsLabel={creditsLabel}
+                />
+              ))}
+            </View>
+          )}
+
+          <TouchableOpacity
+            onPress={handlePurchase}
+            disabled={isPurchaseDisabled || isProcessing}
+            style={[
+              styles.cta,
+              { backgroundColor: tokens.colors.primary },
+              (isPurchaseDisabled || isProcessing) && styles.ctaDisabled,
+            ]}
+            activeOpacity={0.8}
+          >
+            <AtomicText type="titleLarge" style={[styles.ctaText, { color: tokens.colors.onPrimary }]}>
+              {isProcessing ? translations.processingText : translations.purchaseButtonText}
+            </AtomicText>
+          </TouchableOpacity>
+
+          <View style={styles.footer}>
+            {onRestore && (
+              <TouchableOpacity
+                onPress={handleRestore}
+                disabled={isProcessing}
+                style={[styles.restoreButton, isProcessing && styles.restoreButtonDisabled]}
+              >
+                <AtomicText type="bodySmall" style={[styles.footerLink, { color: tokens.colors.textSecondary }]}>
+                  {isProcessing ? translations.processingText : translations.restoreButtonText}
+                </AtomicText>
+              </TouchableOpacity>
+            )}
+            <View style={styles.legalRow}>
+              {legalUrls.termsUrl && (
+                <TouchableOpacity onPress={() => handleLegalUrl(legalUrls.termsUrl)}>
+                  <AtomicText type="bodySmall" style={[styles.footerLink, { color: tokens.colors.textSecondary }]}>
+                    {translations.termsOfServiceText}
+                  </AtomicText>
+                </TouchableOpacity>
+              )}
+              {legalUrls.privacyUrl && (
+                <TouchableOpacity onPress={() => handleLegalUrl(legalUrls.privacyUrl)}>
+                  <AtomicText type="bodySmall" style={[styles.footerLink, { color: tokens.colors.textSecondary }]}>
+                    {translations.privacyText}
+                  </AtomicText>
+                </TouchableOpacity>
+              )}
             </View>
-        </BaseModal>
-    );
+          </View>
+        </ScrollView>
+      </View>
+    </BaseModal>
+  );
 });
 
 PaywallModal.displayName = "PaywallModal";

package/src/index.ts

@@ -33,6 +33,7 @@ export {
 export {
   initializeSubscription,
   type SubscriptionInitConfig,
+  type CreditPackageConfig,
 } from "./infrastructure/services/SubscriptionInitializer";
 
 export { useSubscription } from "./presentation/hooks/useSubscription";
@@ -376,6 +377,14 @@ export {
   type SubscriptionPackageType,
 } from "./utils/packageTypeDetector";
 
+export {
+  filterPackagesByMode,
+  separatePackages,
+  getPackageCategory,
+  type PackageCategory,
+  type PackageFilterConfig,
+} from "./utils/packageFilter";
+
 export {
   getCreditAllocation,
   getImageCreditsForPackage,

package/src/infrastructure/services/SubscriptionInitializer.ts

@@ -4,8 +4,9 @@
  * Apps just call initializeSubscription with config
  */
 
+import type { CustomerInfo } from "react-native-purchases";
 import type { CreditsConfig } from "../../domain/entities/Credits";
-import { configureCreditsRepository } from "../repositories/CreditsRepositoryProvider";
+import { configureCreditsRepository, getCreditsRepository } from "../repositories/CreditsRepositoryProvider";
 import { SubscriptionManager } from "../../revenuecat/infrastructure/managers/SubscriptionManager";
 import { configureAuthProvider } from "../../presentation/hooks/useAuthAwarePurchase";
 
@@ -14,6 +15,13 @@ export interface FirebaseAuthLike {
   onAuthStateChanged: (callback: (user: { uid: string; isAnonymous: boolean } | null) => void) => () => void;
 }
 
+export interface CreditPackageConfig {
+  /** Identifier pattern to match credit packages (e.g., "credit") */
+  identifierPattern?: string;
+  /** Map of productId to credit amounts */
+  amounts?: Record<string, number>;
+}
+
 export interface SubscriptionInitConfig {
   apiKey: string;
   testStoreKey?: string;
@@ -24,6 +32,8 @@ export interface SubscriptionInitConfig {
   showAuthModal: () => void;
   onCreditsUpdated?: (userId: string) => void;
   onCreditRenewal?: (userId: string, productId: string, renewalId: string) => Promise<void>;
+  /** Credit package configuration for consumable purchases */
+  creditPackages?: CreditPackageConfig;
   timeoutMs?: number;
   authStateTimeoutMs?: number;
 }
@@ -59,6 +69,15 @@ const waitForAuthState = async (
   });
 };
 
+/**
+ * Check if a product is a credit package
+ */
+const isCreditPackage = (productId: string, pattern?: string): boolean => {
+  const patternToUse = pattern || "credit";
+  return productId.toLowerCase().includes(patternToUse.toLowerCase());
+};
+
+
 export const initializeSubscription = async (
   config: SubscriptionInitConfig,
 ): Promise<void> => {
@@ -72,6 +91,7 @@ export const initializeSubscription = async (
     showAuthModal,
     onCreditsUpdated,
     onCreditRenewal,
+    creditPackages,
     timeoutMs = 10000,
     authStateTimeoutMs = 2000,
   } = config;
@@ -82,13 +102,62 @@ export const initializeSubscription = async (
 
   configureCreditsRepository(credits);
 
+  // Build consumable product identifiers from credit package pattern
+  const consumableIdentifiers: string[] = [];
+  if (creditPackages?.identifierPattern) {
+    consumableIdentifiers.push(creditPackages.identifierPattern);
+  } else {
+    consumableIdentifiers.push("credit");
+  }
+
+  // Create onPurchaseCompleted handler for credit packages
+  const handlePurchaseCompleted = async (
+    userId: string,
+    productId: string,
+    _customerInfo: CustomerInfo
+  ): Promise<void> => {
+    const isCredit = isCreditPackage(productId, creditPackages?.identifierPattern);
+
+    if (!isCredit) {
+      return;
+    }
+
+    try {
+      const repository = getCreditsRepository();
+
+      // Create a unique purchase ID to prevent duplicate credit additions
+      const purchaseId = `purchase_${productId}_${Date.now()}`;
+
+      await repository.initializeCredits(userId, purchaseId, productId);
+
+      if (__DEV__) {
+        console.log("[SubscriptionInitializer] Credits added for purchase:", {
+          userId,
+          productId,
+          purchaseId,
+        });
+      }
+
+      // Notify about credits update for cache invalidation
+      if (onCreditsUpdated) {
+        onCreditsUpdated(userId);
+      }
+    } catch (error) {
+      if (__DEV__) {
+        console.error("[SubscriptionInitializer] Failed to add credits:", error);
+      }
+    }
+  };
+
   SubscriptionManager.configure({
     config: {
       apiKey,
       testStoreKey,
       entitlementIdentifier: entitlementId,
+      consumableProductIdentifiers: consumableIdentifiers,
       onCreditRenewal,
       onCreditsUpdated,
+      onPurchaseCompleted: handlePurchaseCompleted,
     },
     apiKey,
     getAnonymousUserId,

package/src/presentation/hooks/useCredits.ts

@@ -8,8 +8,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { useCallback, useMemo } from "react";
 import type { UserCredits, CreditType } from "../../domain/entities/Credits";
-
-declare const __DEV__: boolean;
 import {
     getCreditsRepository,
     getCreditsConfig,

package/src/presentation/hooks/useSubscriptionStatus.ts

@@ -8,8 +8,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { SubscriptionManager } from "../../revenuecat/infrastructure/managers/SubscriptionManager";
 
-declare const __DEV__: boolean;
-
 export const subscriptionStatusQueryKeys = {
   all: ["subscriptionStatus"] as const,
   user: (userId: string) => ["subscriptionStatus", userId] as const,

package/src/revenuecat/infrastructure/services/PurchaseHandler.ts

@@ -54,6 +54,12 @@ export async function handlePurchase(
         const customerInfo = purchaseResult.customerInfo;
 
         if (isConsumable) {
+            await notifyPurchaseCompleted(
+                deps.config,
+                userId,
+                pkg.product.identifier,
+                customerInfo
+            );
             return {
                 success: true,
                 isPremium: false,

package/src/revenuecat/infrastructure/services/RevenueCatService.ts

@@ -60,29 +60,25 @@ export class RevenueCatService implements IRevenueCatService {
             };
         }
 
-        try {
-            const result = await initializeSDK(
-                {
-                    config: this.stateManager.getConfig(),
-                    isUsingTestStore: () => this.isUsingTestStore(),
-                    isInitialized: () => this.isInitialized(),
-                    getCurrentUserId: () => this.stateManager.getCurrentUserId(),
-                    setInitialized: (value) => this.stateManager.setInitialized(value),
-                    setCurrentUserId: (id) => this.stateManager.setCurrentUserId(id),
-                },
-                userId,
-                apiKey
-            );
-
-            if (result.success) {
-                this.listenerManager.setUserId(userId);
-                this.listenerManager.setupListener(this.stateManager.getConfig());
-            }
-
-            return result;
-        } catch (error) {
-            throw error;
+        const result = await initializeSDK(
+            {
+                config: this.stateManager.getConfig(),
+                isUsingTestStore: () => this.isUsingTestStore(),
+                isInitialized: () => this.isInitialized(),
+                getCurrentUserId: () => this.stateManager.getCurrentUserId(),
+                setInitialized: (value) => this.stateManager.setInitialized(value),
+                setCurrentUserId: (id) => this.stateManager.setCurrentUserId(id),
+            },
+            userId,
+            apiKey
+        );
+
+        if (result.success) {
+            this.listenerManager.setUserId(userId);
+            this.listenerManager.setupListener(this.stateManager.getConfig());
         }
+
+        return result;
     }
 
     async fetchOfferings(): Promise<PurchasesOffering | null> {

package/src/utils/packageFilter.ts

@@ -0,0 +1,94 @@
+/**
+ * Package Filter Utility
+ * Filters RevenueCat packages by type (credits vs subscription)
+ */
+
+import type { PurchasesPackage } from "react-native-purchases";
+
+declare const __DEV__: boolean;
+
+export type PackageCategory = "credits" | "subscription";
+
+export interface PackageFilterConfig {
+  creditIdentifierPattern?: RegExp;
+  subscriptionIdentifierPattern?: RegExp;
+}
+
+const DEFAULT_CONFIG: PackageFilterConfig = {
+  creditIdentifierPattern: /credit/i,
+  subscriptionIdentifierPattern: /(monthly|yearly|annual|weekly|premium|subscription)/i,
+};
+
+export function getPackageCategory(
+  pkg: PurchasesPackage,
+  config: PackageFilterConfig = DEFAULT_CONFIG
+): PackageCategory {
+  const identifier = pkg.identifier.toLowerCase();
+  const productIdentifier = pkg.product.identifier.toLowerCase();
+
+  const isCreditPackage =
+    config.creditIdentifierPattern?.test(identifier) ||
+    config.creditIdentifierPattern?.test(productIdentifier);
+
+  if (isCreditPackage) {
+    if (__DEV__) {
+      console.log("[PackageFilter] Credit package:", identifier);
+    }
+    return "credits";
+  }
+
+  if (__DEV__) {
+    console.log("[PackageFilter] Subscription package:", identifier);
+  }
+  return "subscription";
+}
+
+export function filterPackagesByMode(
+  packages: PurchasesPackage[],
+  mode: "credits" | "subscription" | "hybrid",
+  config: PackageFilterConfig = DEFAULT_CONFIG
+): PurchasesPackage[] {
+  if (mode === "hybrid") {
+    if (__DEV__) {
+      console.log("[PackageFilter] Hybrid mode - returning all packages:", packages.length);
+    }
+    return packages;
+  }
+
+  const filtered = packages.filter((pkg) => {
+    const category = getPackageCategory(pkg, config);
+    return category === mode;
+  });
+
+  if (__DEV__) {
+    console.log(`[PackageFilter] Mode: ${mode}, Filtered: ${filtered.length}/${packages.length}`);
+  }
+
+  return filtered;
+}
+
+export function separatePackages(
+  packages: PurchasesPackage[],
+  config: PackageFilterConfig = DEFAULT_CONFIG
+): { creditPackages: PurchasesPackage[]; subscriptionPackages: PurchasesPackage[] } {
+  const creditPackages: PurchasesPackage[] = [];
+  const subscriptionPackages: PurchasesPackage[] = [];
+
+  for (const pkg of packages) {
+    const category = getPackageCategory(pkg, config);
+    if (category === "credits") {
+      creditPackages.push(pkg);
+    } else {
+      subscriptionPackages.push(pkg);
+    }
+  }
+
+  if (__DEV__) {
+    console.log("[PackageFilter] Separated:", {
+      credits: creditPackages.length,
+      subscriptions: subscriptionPackages.length,
+    });
+  }
+
+  return { creditPackages, subscriptionPackages };
+}