@umituz/react-native-subscription 2.27.20 → 2.27.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.27.20",
+  "version": "2.27.23",
   "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/domains/paywall/components/PlanCard.tsx

@@ -13,7 +13,7 @@ import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicText, AtomicIcon, AtomicBadge, useAppDesignTokens } from "@umituz/react-native-design-system";
 import type { PurchasesPackage } from "react-native-purchases";
 
-import { formatPrice } from '../../../utils/priceUtils';
+import { formatPriceWithPeriod } from '../../../utils/priceUtils';
 
 interface PlanCardProps {
     pkg: PurchasesPackage;
@@ -33,7 +33,7 @@ export const PlanCard: React.FC<PlanCardProps> = React.memo(
     ({ pkg, isSelected, onSelect, badge, creditAmount, creditsLabel, hasFreeTrial, trialSubtitleText }) => {
         const tokens = useAppDesignTokens();
         const title = pkg.product.title;
-        const price = formatPrice(pkg.product.price, pkg.product.currencyCode);
+        const price = formatPriceWithPeriod(pkg.product.price, pkg.product.currencyCode, pkg.identifier);
 
         return (
             <TouchableOpacity onPress={onSelect} activeOpacity={0.7} style={styles.touchable}>

package/src/utils/priceUtils.ts

@@ -1,5 +1,6 @@
 /**
  * Price Formatting Utilities
+ * Apple App Store Guideline 3.1.2 Compliance
  */
 
 /**
@@ -18,3 +19,55 @@ export function formatPrice(price: number, currencyCode: string): string {
     return `${currencyCode} ${price.toFixed(2)}`;
   }
 }
+
+/**
+ * Extract billing period suffix from package identifier
+ * Apple App Store Guideline 3.1.2 Compliance:
+ * - Displays billing frequency clearly and conspicuously
+ * - Format: /week, /month, /year
+ *
+ * @param identifier - RevenueCat package identifier (e.g., "$rc_weekly", "$rc_monthly", "$rc_annual")
+ * @returns Billing period suffix (e.g., "/week", "/month", "/year") or empty string
+ */
+export function getBillingPeriodSuffix(identifier: string): string {
+  const lowerIdentifier = identifier.toLowerCase();
+
+  if (lowerIdentifier.includes('weekly') || lowerIdentifier.includes('week')) {
+    return '/week';
+  }
+
+  if (lowerIdentifier.includes('monthly') || lowerIdentifier.includes('month')) {
+    return '/month';
+  }
+
+  if (lowerIdentifier.includes('annual') || lowerIdentifier.includes('year') || lowerIdentifier.includes('yearly')) {
+    return '/year';
+  }
+
+  return '';
+}
+
+/**
+ * Format price with billing period
+ * Apple App Store Guideline 3.1.2 Compliance:
+ * - Combines price with billing frequency for clear display
+ * - Format: $2.99/week, $14.99/month, $39.99/year
+ *
+ * RevenueCat Best Practice:
+ * - Follows recommended price_per_period format
+ * - Clear and conspicuous billing frequency display
+ *
+ * @param price - Price value
+ * @param currencyCode - Currency code (e.g., 'USD', 'EUR')
+ * @param identifier - RevenueCat package identifier
+ * @returns Formatted price with billing period (e.g., "$2.99/week")
+ */
+export function formatPriceWithPeriod(
+  price: number,
+  currencyCode: string,
+  identifier: string
+): string {
+  const formattedPrice = formatPrice(price, currencyCode);
+  const periodSuffix = getBillingPeriodSuffix(identifier);
+  return `${formattedPrice}${periodSuffix}`;
+}