@umituz/react-native-subscription 2.27.43 → 2.27.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.27.43",
+  "version": "2.27.45",
   "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

@@ -8,6 +8,7 @@ import React, { useMemo, useEffect } from "react";
 import { usePaywallVisibility } from "../../../presentation/hooks/usePaywallVisibility";
 import { useSubscriptionPackages } from "../../../revenuecat/presentation/hooks/useSubscriptionPackages";
 import { useRevenueCatTrialEligibility } from "../../../revenuecat/presentation/hooks/useRevenueCatTrialEligibility";
+import { createCreditAmountsFromPackages } from "../../../utils/creditMapper";
 import { PaywallModal, type TrialEligibilityInfo } from "./PaywallModal";
 import { usePaywallActions } from "../hooks/usePaywallActions";
 import type { PaywallContainerProps } from "./PaywallContainer.types";
@@ -19,6 +20,9 @@ export const PaywallContainer: React.FC<PaywallContainerProps> = (props) => {
     features,
     heroImage,
     bestValueIdentifier,
+    creditAmounts: providedCreditAmounts,
+    creditsLabel,
+    packageAllocations,
     source,
     onPurchaseSuccess,
     onPurchaseError,
@@ -85,6 +89,13 @@ export const PaywallContainer: React.FC<PaywallContainerProps> = (props) => {
     return result;
   }, [eligibilityMap, trialConfig?.enabled, trialConfig?.durationDays]);
 
+  // Compute credit amounts from packageAllocations if not provided directly
+  const creditAmounts = useMemo(() => {
+    if (providedCreditAmounts) return providedCreditAmounts;
+    if (!packageAllocations || packages.length === 0) return undefined;
+    return createCreditAmountsFromPackages(packages, packageAllocations);
+  }, [providedCreditAmounts, packageAllocations, packages]);
+
   if (!isVisible) return null;
 
   return (
@@ -98,6 +109,8 @@ export const PaywallContainer: React.FC<PaywallContainerProps> = (props) => {
       features={features ? [...features] : undefined}
       heroImage={heroImage}
       bestValueIdentifier={bestValueIdentifier}
+      creditAmounts={creditAmounts}
+      creditsLabel={creditsLabel}
       onPurchase={handlePurchase}
       onRestore={handleRestore}
       trialEligibility={trialEligibility}

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

@@ -5,7 +5,7 @@
 
 import type { ImageSourcePropType } from "react-native";
 import type { PaywallTranslations, PaywallLegalUrls, SubscriptionFeature } from "../entities";
-import type { PurchaseSource } from "../../../domain/entities/Credits";
+import type { PurchaseSource, PackageAllocationMap } from "../../../domain/entities/Credits";
 
 /**
  * Trial display configuration
@@ -33,6 +33,12 @@ export interface PaywallContainerProps {
   readonly heroImage?: ImageSourcePropType;
   /** Best value package identifier for badge */
   readonly bestValueIdentifier?: string;
+  /** Credit amounts per product identifier (takes precedence over packageAllocations) */
+  readonly creditAmounts?: Record<string, number>;
+  /** Credits label text (e.g., "credits") */
+  readonly creditsLabel?: string;
+  /** Package allocations for auto-computing creditAmounts (used when creditAmounts not provided) */
+  readonly packageAllocations?: PackageAllocationMap;
   /** Source of the paywall - affects pending purchase handling */
   readonly source?: PurchaseSource;
   /** Callback when purchase succeeds */

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

@@ -33,6 +33,10 @@ export interface PaywallModalProps {
   isLoading?: boolean;
   legalUrls?: PaywallLegalUrls;
   bestValueIdentifier?: string;
+  /** Credit amounts per product identifier */
+  creditAmounts?: Record<string, number>;
+  /** Credits label text (e.g., "credits") */
+  creditsLabel?: string;
   heroImage?: ImageSourcePropType;
   onPurchase?: (pkg: PurchasesPackage) => Promise<void | boolean>;
   onRestore?: () => Promise<void | boolean>;
@@ -43,7 +47,7 @@ export interface PaywallModalProps {
 }
 
 export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
-  const { visible, onClose, translations, packages = [], features = [], isLoading = false, legalUrls = {}, bestValueIdentifier, heroImage, onPurchase, onRestore, trialEligibility = {}, trialSubtitleText } = props;
+  const { visible, onClose, translations, packages = [], features = [], isLoading = false, legalUrls = {}, bestValueIdentifier, creditAmounts, creditsLabel, heroImage, onPurchase, onRestore, trialEligibility = {}, trialSubtitleText } = props;
   const tokens = useAppDesignTokens();
   const [selectedPlanId, setSelectedPlanId] = useState<string | null>(null);
   const [isLocalProcessing, setIsLocalProcessing] = useState(false);
@@ -150,6 +154,8 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
                     isSelected={selectedPlanId === productId}
                     onSelect={() => setSelectedPlanId(productId)}
                     badge={productId === bestValueIdentifier ? translations.bestValueBadgeText : undefined}
+                    creditAmount={creditAmounts?.[productId]}
+                    creditsLabel={creditsLabel}
                     hasFreeTrial={hasFreeTrial}
                     trialSubtitleText={hasFreeTrial ? trialSubtitleText : undefined}
                   />

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

@@ -21,6 +21,10 @@ interface PlanCardProps {
     onSelect: () => void;
     /** Badge text (e.g., "Best Value") - NOT for trial */
     badge?: string;
+    /** Credit amount for this plan */
+    creditAmount?: number;
+    /** Credits label text (e.g., "credits") */
+    creditsLabel?: string;
     /** Whether this plan has a free trial (Apple-compliant display) */
     hasFreeTrial?: boolean;
     /** Trial subtitle text (e.g., "7 days free, then billed") - shown as small gray text */
@@ -28,7 +32,7 @@ interface PlanCardProps {
 }
 
 export const PlanCard: React.FC<PlanCardProps> = React.memo(
-    ({ pkg, isSelected, onSelect, badge, hasFreeTrial, trialSubtitleText }) => {
+    ({ pkg, isSelected, onSelect, badge, creditAmount, creditsLabel, hasFreeTrial, trialSubtitleText }) => {
         const tokens = useAppDesignTokens();
         const title = pkg.product.title;
         const price = formatPriceWithPeriod(pkg.product.price, pkg.product.currencyCode, pkg.identifier);
@@ -73,6 +77,13 @@ export const PlanCard: React.FC<PlanCardProps> = React.memo(
                                     {title}
                                 </AtomicText>
 
+                                {/* Credits info */}
+                                {creditAmount && creditsLabel && (
+                                    <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary }}>
+                                        {creditAmount} {creditsLabel}
+                                    </AtomicText>
+                                )}
+
                                 {/* Trial info - Apple-compliant: small, gray, subordinate */}
                                 {hasFreeTrial && trialSubtitleText && (
                                     <AtomicText

package/src/utils/creditMapper.ts

@@ -1,4 +1,4 @@
-import type { SubscriptionPackageType } from "./packageTypeDetector";
+import { detectPackageType, type SubscriptionPackageType } from "./packageTypeDetector";
 import type { PackageAllocationMap } from "../domain/entities/Credits";
 
 /**
@@ -11,3 +11,31 @@ export function getCreditAllocation(
   if (packageType === "unknown" || !allocations) return null;
   return allocations[packageType]?.credits ?? null;
 }
+
+/**
+ * Create credit amounts mapping for PaywallModal from RevenueCat packages
+ * Maps product.identifier to credit amount using dynamic allocations
+ */
+export function createCreditAmountsFromPackages(
+  packages: Array<{ product: { identifier: string } }>,
+  allocations?: PackageAllocationMap
+): Record<string, number> {
+  const result: Record<string, number> = {};
+
+  if (!allocations) return result;
+
+  for (const pkg of packages) {
+    const identifier = pkg?.product?.identifier;
+
+    if (!identifier) continue;
+
+    const packageType = detectPackageType(identifier);
+    const credits = getCreditAllocation(packageType, allocations);
+
+    if (credits !== null) {
+      result[identifier] = credits;
+    }
+  }
+
+  return result;
+}