@umituz/react-native-subscription 2.10.10 → 2.10.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.10.10",
+  "version": "2.10.12",
   "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,10 @@ interface SubscriptionPackageListProps {
     loadingText: string;
     emptyText: string;
     onSelect: (pkg: PurchasesPackage) => void;
+    /** Optional: Manually specify which package should show "Best Value" badge by identifier */
+    bestValueIdentifier?: string;
+    /** Optional: Map of product identifier to credit amount (e.g., { "weekly": 6, "monthly": 25, "yearly": 300 }) */
+    creditAmounts?: Record<string, number>;
 }
 
 export const SubscriptionPackageList: React.FC<SubscriptionPackageListProps> = React.memo(
@@ -22,6 +27,8 @@ export const SubscriptionPackageList: React.FC<SubscriptionPackageListProps> = R
         loadingText,
         emptyText,
         onSelect,
+        bestValueIdentifier,
+        creditAmounts,
     }) => {
         const tokens = useAppDesignTokens();
         const hasPackages = packages.length > 0;
@@ -69,15 +76,32 @@ 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);
+                    }
+
+                    // Get credit amount for this package if provided
+                    const creditAmount = creditAmounts?.[pkg.product.identifier];
+
+                    return (
+                        <SubscriptionPlanCard
+                            key={pkg.product.identifier}
+                            package={pkg}
+                            isSelected={selectedPkg?.product.identifier === pkg.product.identifier}
+                            onSelect={() => onSelect(pkg)}
+                            isBestValue={isBestValue}
+                            creditAmount={creditAmount}
+                        />
+                    );
+                })}
             </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";
 
@@ -20,28 +21,17 @@ interface SubscriptionPlanCardProps {
   isSelected: boolean;
   onSelect: () => void;
   isBestValue?: boolean;
+  /** Optional: Number of credits/generations included with this package */
+  creditAmount?: number;
 }
 
-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 }) => {
+  React.memo(({ package: pkg, isSelected, onSelect, isBestValue = false, creditAmount }) => {
     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
@@ -117,6 +107,25 @@ export const SubscriptionPlanCard: React.FC<SubscriptionPlanCardProps> =
             </View>
 
             <View style={styles.rightSection}>
+              {creditAmount && (
+                <View
+                  style={[
+                    styles.creditBadge,
+                    { backgroundColor: tokens.colors.primary + "15" },
+                  ]}
+                >
+                  <AtomicText
+                    type="labelSmall"
+                    style={{
+                      color: tokens.colors.primary,
+                      fontWeight: "700",
+                      fontSize: 11,
+                    }}
+                  >
+                    {creditAmount} {t("paywall.credits")}
+                  </AtomicText>
+                </View>
+              )}
               <AtomicText
                 type="titleMedium"
                 style={[styles.price, { color: tokens.colors.textPrimary }]}
@@ -176,6 +185,12 @@ const styles = StyleSheet.create({
     fontWeight: "600",
     marginBottom: 2,
   },
+  creditBadge: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 12,
+    marginBottom: 4,
+  },
   rightSection: {
     alignItems: "flex-end",
   },

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);
+};