@umituz/react-native-subscription 2.11.13 → 2.11.15

package/package.json

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleSheet } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
 import { LinearGradient } from "expo-linear-gradient";
 
@@ -15,19 +15,21 @@ export const BestValueBadge: React.FC<BestValueBadgeProps> = React.memo(
     if (!visible) return null;
 
     return (
-      <LinearGradient
-        colors={[tokens.colors.secondary, tokens.colors.primary]}
-        start={{ x: 0, y: 0 }}
-        end={{ x: 1, y: 1 }}
-        style={styles.badge}
-      >
-        <AtomicText
-          type="labelSmall"
-          style={{ color: tokens.colors.onPrimary, fontWeight: "800", textTransform: "uppercase", fontSize: 10 }}
+      <View style={styles.badgeContainer}>
+        <LinearGradient
+          colors={[tokens.colors.secondary, tokens.colors.primary]}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 1 }}
+          style={styles.badge}
         >
-          {text}
-        </AtomicText>
-      </LinearGradient>
+          <AtomicText
+            type="labelSmall"
+            style={{ color: tokens.colors.onPrimary, fontWeight: "800", textTransform: "uppercase", fontSize: 10 }}
+          >
+            {text}
+          </AtomicText>
+        </LinearGradient>
+      </View>
     );
   }
 );
@@ -35,14 +37,17 @@ export const BestValueBadge: React.FC<BestValueBadgeProps> = React.memo(
 BestValueBadge.displayName = "BestValueBadge";
 
 const styles = StyleSheet.create({
-  badge: {
+  badgeContainer: {
     position: "absolute",
     top: -12,
     right: 16,
+    zIndex: 1,
+    alignSelf: "flex-end",
+  },
+  badge: {
     paddingHorizontal: 16,
     paddingVertical: 6,
     borderRadius: 16,
-    zIndex: 1,
     alignItems: "center",
     justifyContent: "center",
   },

package/src/presentation/components/paywall/accordion/AccordionPlanCard.tsx

@@ -38,9 +38,7 @@ export const AccordionPlanCard: React.FC<AccordionPlanCardProps> = React.memo(
       : null;
 
     const title = pkg.product.title || t(`paywall.period.${periodLabel}`);
-    const displayPrice = isYearly && monthlyEquivalent
-      ? `${monthlyEquivalent}/mo`
-      : price;
+    const displayPrice = price;
 
     const handleHeaderPress = useCallback(() => {
       onSelect();
@@ -93,7 +91,6 @@ AccordionPlanCard.displayName = "AccordionPlanCard";
 const styles = StyleSheet.create({
   container: {
     borderRadius: 16,
-    overflow: "hidden",
     marginBottom: 12,
   },
 });