@umituz/react-native-subscription 2.10.10 → 2.10.11

package/package.json

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

@@ -4,6 +4,7 @@ import { AtomicText } from "@umituz/react-native-design-system";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import type { PurchasesPackage } from "react-native-purchases";
 import { SubscriptionPlanCard } from "./SubscriptionPlanCard";
+import { isYearlyPackage } from "../../../utils/packagePeriodUtils";
 
 interface SubscriptionPackageListProps {
     isLoading: boolean;
@@ -12,6 +13,8 @@ interface SubscriptionPackageListProps {
     loadingText: string;
     emptyText: string;
     onSelect: (pkg: PurchasesPackage) => void;
+    /** Optional: Manually specify which package should show "Best Value" badge by identifier */
+    bestValueIdentifier?: string;
 }
 
 export const SubscriptionPackageList: React.FC<SubscriptionPackageListProps> = React.memo(
@@ -22,6 +25,7 @@ export const SubscriptionPackageList: React.FC<SubscriptionPackageListProps> = R
         loadingText,
         emptyText,
         onSelect,
+        bestValueIdentifier,
     }) => {
         const tokens = useAppDesignTokens();
         const hasPackages = packages.length > 0;
@@ -69,15 +73,28 @@ export const SubscriptionPackageList: React.FC<SubscriptionPackageListProps> = R
 
         return (
             <View style={styles.packagesContainer}>
-                {packages.map((pkg, index) => (
-                    <SubscriptionPlanCard
-                        key={pkg.product.identifier}
-                        package={pkg}
-                        isSelected={selectedPkg?.product.identifier === pkg.product.identifier}
-                        onSelect={() => onSelect(pkg)}
-                        isBestValue={index === 0}
-                    />
-                ))}
+                {packages.map((pkg) => {
+                    // Determine if this package should show "Best Value" badge
+                    let isBestValue = false;
+
+                    if (bestValueIdentifier) {
+                        // Use manual override if provided
+                        isBestValue = pkg.product.identifier === bestValueIdentifier;
+                    } else {
+                        // Auto-detect: mark yearly packages as best value
+                        isBestValue = isYearlyPackage(pkg);
+                    }
+
+                    return (
+                        <SubscriptionPlanCard
+                            key={pkg.product.identifier}
+                            package={pkg}
+                            isSelected={selectedPkg?.product.identifier === pkg.product.identifier}
+                            onSelect={() => onSelect(pkg)}
+                            isBestValue={isBestValue}
+                        />
+                    );
+                })}
             </View>
         );
     }

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

@@ -12,6 +12,7 @@ import { formatPrice } from "../../../utils/priceUtils";
 import { useLocalization } from "@umituz/react-native-localization";
 import { BestValueBadge } from "./BestValueBadge";
 
+import { getPeriodLabel, isYearlyPackage } from "../../../utils/packagePeriodUtils";
 // @ts-ignore
 import { LinearGradient } from "expo-linear-gradient";
 
@@ -22,26 +23,13 @@ interface SubscriptionPlanCardProps {
   isBestValue?: boolean;
 }
 
-const getPeriodLabel = (period: string | null | undefined): string => {
-  if (!period) return "";
-  if (period.includes("Y") || period.includes("year")) return "yearly";
-  if (period.includes("M") || period.includes("month")) return "monthly";
-  if (period.includes("W") || period.includes("week")) return "weekly";
-  if (period.includes("D") || period.includes("day")) return "daily";
-  return "";
-};
-
-const isYearlyPeriod = (period: string | null | undefined): boolean => {
-  return period?.includes("Y") || period?.includes("year") || false;
-};
-
 export const SubscriptionPlanCard: React.FC<SubscriptionPlanCardProps> =
   React.memo(({ package: pkg, isSelected, onSelect, isBestValue = false }) => {
     const tokens = useAppDesignTokens();
     const { t } = useLocalization();
 
     const period = pkg.product.subscriptionPeriod;
-    const isYearly = isYearlyPeriod(period);
+    const isYearly = isYearlyPackage(pkg);
     const periodLabel = getPeriodLabel(period);
     const price = formatPrice(pkg.product.price, pkg.product.currencyCode);
     const monthlyEquivalent = isYearly

package/src/utils/packagePeriodUtils.ts

@@ -0,0 +1,51 @@
+/**
+ * Package Period Utilities
+ * Helper functions for working with subscription periods
+ */
+
+import type { PurchasesPackage } from "react-native-purchases";
+
+/**
+ * Get period label from subscription period string
+ */
+export const getPeriodLabel = (period: string | null | undefined): string => {
+    if (!period) return "";
+    if (period.includes("Y") || period.includes("year")) return "yearly";
+    if (period.includes("M") || period.includes("month")) return "monthly";
+    if (period.includes("W") || period.includes("week")) return "weekly";
+    if (period.includes("D") || period.includes("day")) return "daily";
+    return "";
+};
+
+/**
+ * Check if a package has a yearly subscription period
+ */
+export const isYearlyPackage = (pkg: PurchasesPackage): boolean => {
+    const period = pkg.product.subscriptionPeriod;
+    return period?.includes("Y") || period?.includes("year") || false;
+};
+
+/**
+ * Check if a package has a monthly subscription period
+ */
+export const isMonthlyPackage = (pkg: PurchasesPackage): boolean => {
+    const period = pkg.product.subscriptionPeriod;
+    return period?.includes("M") || period?.includes("month") || false;
+};
+
+/**
+ * Check if a package has a weekly subscription period
+ */
+export const isWeeklyPackage = (pkg: PurchasesPackage): boolean => {
+    const period = pkg.product.subscriptionPeriod;
+    return period?.includes("W") || period?.includes("week") || false;
+};
+
+/**
+ * Find the first yearly package in an array of packages
+ */
+export const findYearlyPackage = (
+    packages: PurchasesPackage[]
+): PurchasesPackage | undefined => {
+    return packages.find(isYearlyPackage);
+};