@umituz/react-native-subscription 2.10.11 → 2.10.13

package/package.json

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

@@ -34,6 +34,10 @@ export interface SubscriptionModalProps {
   privacyText?: string;
   termsOfServiceText?: string;
   showRestoreButton?: boolean;
+  /** Optional: Map of product identifier to credit amount */
+  creditAmounts?: Record<string, number>;
+  /** Optional: Manually specify which package should show "Best Value" badge */
+  bestValueIdentifier?: string;
 }
 
 export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((props) => {
@@ -57,6 +61,8 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
     privacyText,
     termsOfServiceText,
     showRestoreButton = true,
+    creditAmounts,
+    bestValueIdentifier,
   } = props;
 
   const tokens = useAppDesignTokens();
@@ -111,6 +117,8 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
             onSelect={setSelectedPkg}
             loadingText={loadingText}
             emptyText={emptyText}
+            creditAmounts={creditAmounts}
+            bestValueIdentifier={bestValueIdentifier}
           />
 
           {features.length > 0 && (

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

@@ -15,6 +15,8 @@ interface SubscriptionPackageListProps {
     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(
@@ -26,6 +28,7 @@ export const SubscriptionPackageList: React.FC<SubscriptionPackageListProps> = R
         emptyText,
         onSelect,
         bestValueIdentifier,
+        creditAmounts,
     }) => {
         const tokens = useAppDesignTokens();
         const hasPackages = packages.length > 0;
@@ -85,6 +88,9 @@ export const SubscriptionPackageList: React.FC<SubscriptionPackageListProps> = R
                         isBestValue = isYearlyPackage(pkg);
                     }
 
+                    // Get credit amount for this package if provided
+                    const creditAmount = creditAmounts?.[pkg.product.identifier];
+
                     return (
                         <SubscriptionPlanCard
                             key={pkg.product.identifier}
@@ -92,6 +98,7 @@ export const SubscriptionPackageList: React.FC<SubscriptionPackageListProps> = R
                             isSelected={selectedPkg?.product.identifier === pkg.product.identifier}
                             onSelect={() => onSelect(pkg)}
                             isBestValue={isBestValue}
+                            creditAmount={creditAmount}
                         />
                     );
                 })}

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

@@ -21,10 +21,12 @@ interface SubscriptionPlanCardProps {
   isSelected: boolean;
   onSelect: () => void;
   isBestValue?: boolean;
+  /** Optional: Number of credits/generations included with this package */
+  creditAmount?: number;
 }
 
 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();
 
@@ -105,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 }]}
@@ -164,6 +185,12 @@ const styles = StyleSheet.create({
     fontWeight: "600",
     marginBottom: 2,
   },
+  creditBadge: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 12,
+    marginBottom: 4,
+  },
   rightSection: {
     alignItems: "flex-end",
   },