@umituz/react-native-subscription 2.11.3 → 2.11.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.11.3",
+  "version": "2.11.5",
   "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/presentation/components/paywall/SubscriptionPackageList.tsx

@@ -88,11 +88,40 @@ export const SubscriptionPackageList: React.FC<SubscriptionPackageListProps> = R
                         isBestValue = isYearlyPackage(pkg);
                     }
 
-                    // Get credit amount for this package if provided
-                    // check both product identifier (e.g., com.app.weekly) and package identifier (e.g., $rc_weekly)
-                    const creditAmount =
-                        creditAmounts?.[pkg.product.identifier] ??
-                        creditAmounts?.[pkg.identifier];
+                    // Smart matching for credit amounts
+                    const findCreditAmount = () => {
+                        if (!creditAmounts) return undefined;
+
+                        const productId = pkg.product.identifier;
+                        const packageId = pkg.identifier;
+
+                        // 1. Exact match (case sensitive)
+                        if (creditAmounts[productId] !== undefined) return creditAmounts[productId];
+                        if (creditAmounts[packageId] !== undefined) return creditAmounts[packageId];
+
+                        // 2. Case-insensitive match
+                        const lowerProductId = productId.toLowerCase();
+                        const lowerPackageId = packageId.toLowerCase();
+
+                        for (const [key, value] of Object.entries(creditAmounts)) {
+                            const lowerKey = key.toLowerCase();
+                            if (lowerProductId === lowerKey || lowerPackageId === lowerKey) {
+                                return value;
+                            }
+                        }
+
+                        // 3. Partial match (if key is contained in identifier)
+                        for (const [key, value] of Object.entries(creditAmounts)) {
+                            const lowerKey = key.toLowerCase();
+                            if (lowerKey.length > 3 && (lowerProductId.includes(lowerKey) || lowerPackageId.includes(lowerKey))) {
+                                return value;
+                            }
+                        }
+
+                        return undefined;
+                    };
+
+                    const creditAmount = findCreditAmount();
 
                     return (
                         <SubscriptionPlanCard

package/src/presentation/components/paywall/SubscriptionPlanCard.tsx

@@ -7,7 +7,7 @@ import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import type { PurchasesPackage } from "react-native-purchases";
 import { AtomicText } from "@umituz/react-native-design-system";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, withAlpha } from "@umituz/react-native-design-system";
 import { formatPrice } from "../../../utils/priceUtils";
 import { useLocalization } from "@umituz/react-native-localization";
 import { BestValueBadge } from "./BestValueBadge";
@@ -49,7 +49,7 @@ export const SubscriptionPlanCard: React.FC<SubscriptionPlanCardProps> =
     const CardComponent = isSelected ? LinearGradient : View;
     const cardProps = isSelected
       ? {
-        colors: [tokens.colors.primary + "20", tokens.colors.surface],
+        colors: [withAlpha(tokens.colors.primary, 0.2), tokens.colors.surface],
         start: { x: 0, y: 0 },
         end: { x: 1, y: 1 },
       }
@@ -117,7 +117,7 @@ export const SubscriptionPlanCard: React.FC<SubscriptionPlanCardProps> =
                 <View
                   style={[
                     styles.creditBadge,
-                    { backgroundColor: tokens.colors.primary + "15" },
+                    { backgroundColor: withAlpha(tokens.colors.primary, 0.15) },
                   ]}
                 >
                   <AtomicText