@umituz/react-native-subscription 2.11.10 → 2.11.12

package/package.json

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

@@ -38,10 +38,12 @@ const styles = StyleSheet.create({
   badge: {
     position: "absolute",
     top: -12,
-    right: 16,
+    left: 0,
+    right: 0,
     paddingHorizontal: 16,
     paddingVertical: 7,
     borderRadius: 16,
     zIndex: 1,
+    alignSelf: "center",
   },
 });

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

@@ -36,6 +36,10 @@ export interface SubscriptionModalProps {
   creditAmounts?: Record<string, number>;
   /** Optional: Manually specify which package should show "Best Value" badge */
   bestValueIdentifier?: string;
+  /** Optional: Text labels for accordion details */
+  billingPeriodLabel?: string;
+  totalPriceLabel?: string;
+  perMonthLabel?: string;
 }
 
 export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((props) => {
@@ -60,6 +64,9 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
     showRestoreButton = true,
     creditAmounts,
     bestValueIdentifier,
+    billingPeriodLabel,
+    totalPriceLabel,
+    perMonthLabel,
   } = props;
 
   const {
@@ -98,6 +105,9 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
             emptyText={emptyText}
             creditAmounts={creditAmounts}
             bestValueIdentifier={bestValueIdentifier}
+            billingPeriodLabel={billingPeriodLabel}
+            totalPriceLabel={totalPriceLabel}
+            perMonthLabel={perMonthLabel}
           />
         </ScrollView>
 

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

@@ -17,6 +17,10 @@ interface SubscriptionPackageListProps {
     bestValueIdentifier?: string;
     /** Optional: Map of product identifier to credit amount (e.g., { "weekly": 6, "monthly": 25, "yearly": 300 }) */
     creditAmounts?: Record<string, number>;
+    /** Optional: Text labels for accordion details */
+    billingPeriodLabel?: string;
+    totalPriceLabel?: string;
+    perMonthLabel?: string;
 }
 
 export const SubscriptionPackageList: React.FC<SubscriptionPackageListProps> = React.memo(
@@ -29,6 +33,9 @@ export const SubscriptionPackageList: React.FC<SubscriptionPackageListProps> = R
         onSelect,
         bestValueIdentifier,
         creditAmounts,
+        billingPeriodLabel,
+        totalPriceLabel,
+        perMonthLabel,
     }) => {
         const tokens = useAppDesignTokens();
         const hasPackages = packages.length > 0;
@@ -133,6 +140,9 @@ export const SubscriptionPackageList: React.FC<SubscriptionPackageListProps> = R
                             onToggleExpand={() => handleToggleExpand(packageId)}
                             isBestValue={isBestValue}
                             creditAmount={creditAmount}
+                            billingPeriodLabel={billingPeriodLabel}
+                            totalPriceLabel={totalPriceLabel}
+                            perMonthLabel={perMonthLabel}
                         />
                     );
                 })}

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

@@ -22,6 +22,9 @@ export const AccordionPlanCard: React.FC<AccordionPlanCardProps> = React.memo(
     onToggleExpand,
     isBestValue = false,
     creditAmount,
+    billingPeriodLabel,
+    totalPriceLabel,
+    perMonthLabel,
   }) => {
     const tokens = useAppDesignTokens();
     const { t } = useLocalization();
@@ -75,6 +78,9 @@ export const AccordionPlanCard: React.FC<AccordionPlanCardProps> = React.memo(
             monthlyEquivalent={monthlyEquivalent}
             periodLabel={periodLabel}
             isYearly={isYearly}
+            billingPeriodLabel={billingPeriodLabel}
+            totalPriceLabel={totalPriceLabel}
+            perMonthLabel={perMonthLabel}
           />
         )}
       </View>

package/src/presentation/components/paywall/accordion/AccordionPlanCardTypes.ts

@@ -13,6 +13,9 @@ export interface AccordionPlanCardProps {
   onToggleExpand: () => void;
   isBestValue?: boolean;
   creditAmount?: number;
+  billingPeriodLabel?: string;
+  totalPriceLabel?: string;
+  perMonthLabel?: string;
 }
 
 export interface PlanCardHeaderProps {
@@ -30,4 +33,7 @@ export interface PlanCardDetailsProps {
   monthlyEquivalent: string | null;
   periodLabel: string;
   isYearly: boolean;
+  billingPeriodLabel?: string;
+  totalPriceLabel?: string;
+  perMonthLabel?: string;
 }

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

@@ -9,7 +9,6 @@ import {
   AtomicText,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
-import { useLocalization } from "@umituz/react-native-localization";
 import type { PlanCardDetailsProps } from "./AccordionPlanCardTypes";
 
 export const PlanCardDetails: React.FC<PlanCardDetailsProps> = ({
@@ -17,9 +16,11 @@ export const PlanCardDetails: React.FC<PlanCardDetailsProps> = ({
   monthlyEquivalent,
   periodLabel,
   isYearly,
+  billingPeriodLabel = "Billing Period",
+  totalPriceLabel = "Total Price",
+  perMonthLabel = "Per Month",
 }) => {
   const tokens = useAppDesignTokens();
-  const { t } = useLocalization();
 
   return (
     <View
@@ -36,13 +37,13 @@ export const PlanCardDetails: React.FC<PlanCardDetailsProps> = ({
           type="bodyMedium"
           style={{ color: tokens.colors.textSecondary }}
         >
-          {t("paywall.billingPeriod") || "Billing Period"}
+          {billingPeriodLabel}
         </AtomicText>
         <AtomicText
           type="bodyMedium"
           style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}
         >
-          {t(`paywall.period.${periodLabel}`)}
+          {periodLabel}
         </AtomicText>
       </View>
 
@@ -52,7 +53,7 @@ export const PlanCardDetails: React.FC<PlanCardDetailsProps> = ({
             type="bodyMedium"
             style={{ color: tokens.colors.textSecondary }}
           >
-            {t("paywall.totalPrice") || "Total Price"}
+            {totalPriceLabel}
           </AtomicText>
           <AtomicText
             type="bodyMedium"
@@ -69,7 +70,7 @@ export const PlanCardDetails: React.FC<PlanCardDetailsProps> = ({
             type="bodyMedium"
             style={{ color: tokens.colors.textSecondary }}
           >
-            {t("paywall.perMonth") || "Per Month"}
+            {perMonthLabel}
           </AtomicText>
           <AtomicText
             type="bodyMedium"

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

@@ -95,16 +95,17 @@ export const PlanCardHeader: React.FC<PlanCardHeaderProps> = ({
             style={{
               color: tokens.colors.textPrimary,
               fontWeight: "700",
-              marginRight: 8,
             }}
           >
             {price}
           </AtomicText>
-          <AtomicIcon
-            name={isExpanded ? "ChevronUp" : "ChevronDown"}
-            size={20}
-            color={tokens.colors.textSecondary as any}
-          />
+          <View style={styles.expandIconContainer}>
+            <AtomicIcon
+              name={isExpanded ? "chevron-up-outline" : "chevron-down-outline"}
+              size={18}
+              color={tokens.colors.textSecondary as any}
+            />
+          </View>
         </View>
       </View>
     </TouchableOpacity>
@@ -155,5 +156,12 @@ const styles = StyleSheet.create({
   rightSection: {
     flexDirection: "row",
     alignItems: "center",
+    gap: 12,
+  },
+  expandIconContainer: {
+    width: 24,
+    height: 24,
+    alignItems: "center",
+    justifyContent: "center",
   },
 });