@umituz/react-native-subscription 2.12.0 → 2.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.12.0",
+  "version": "2.12.2",
   "description": "Complete subscription management with RevenueCat, paywall UI, and credits system for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -47,7 +47,7 @@
   "devDependencies": {
     "@tanstack/react-query": "^5.0.0",
     "@types/react": "~19.1.10",
-    "@umituz/react-native-design-system": "^2.2.0",
+    "@umituz/react-native-design-system": "^2.3.1",
     "@umituz/react-native-firebase": "*",
     "@umituz/react-native-legal": "*",
     "@umituz/react-native-localization": "*",

package/src/domain/entities/paywall/PaywallMode.ts

@@ -0,0 +1,6 @@
+/**
+ * Paywall Mode Entity
+ * Defines paywall display modes
+ */
+
+export type PaywallMode = "subscription" | "credits" | "hybrid";

package/src/index.ts

@@ -85,7 +85,10 @@ export { PaywallLegalFooter } from "./presentation/components/paywall/PaywallLeg
 export {
   PaywallModal,
   type PaywallModalProps,
+  type PaywallTranslations,
+  type PaywallLegalUrls,
 } from "./presentation/components/paywall/PaywallModal";
+export type { PaywallMode } from "./domain/entities/paywall/PaywallMode";
 
 // =============================================================================
 // PRESENTATION LAYER - Premium Details Components

package/src/presentation/components/details/CreditRow.tsx

@@ -4,8 +4,8 @@
  */
 
 import React from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, StyleSheet } from "react-native";
+import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
 
 export interface CreditRowProps {
   label: string;
@@ -27,17 +27,17 @@ export const CreditRow: React.FC<CreditRowProps> = ({
   return (
     <View style={styles.container}>
       <View style={styles.header}>
-        <Text style={[styles.label, { color: tokens.colors.text }]}>
+        <AtomicText type="bodySmall" style={{ color: tokens.colors.text }}>
           {label}
-        </Text>
-        <Text
-          style={[
-            styles.count,
-            { color: isLow ? tokens.colors.warning : tokens.colors.textSecondary },
-          ]}
+        </AtomicText>
+        <AtomicText
+          type="bodySmall"
+          style={{
+            color: isLow ? tokens.colors.warning : tokens.colors.textSecondary,
+          }}
         >
           {current} / {total} {remainingLabel}
-        </Text>
+        </AtomicText>
       </View>
       <View
         style={[styles.progressBar, { backgroundColor: tokens.colors.surfaceSecondary }]}
@@ -65,12 +65,6 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     alignItems: "center",
   },
-  label: {
-    fontSize: 13,
-  },
-  count: {
-    fontSize: 12,
-  },
   progressBar: {
     height: 6,
     borderRadius: 3,

package/src/presentation/components/details/DetailRow.tsx

@@ -4,8 +4,8 @@
  */
 
 import React from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, StyleSheet } from "react-native";
+import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
 
 export interface DetailRowProps {
   label: string;
@@ -22,17 +22,18 @@ export const DetailRow: React.FC<DetailRowProps> = ({
 
   return (
     <View style={styles.container}>
-      <Text style={[styles.label, { color: tokens.colors.textSecondary }]}>
+      <AtomicText type="bodyMedium" style={{ color: tokens.colors.textSecondary }}>
         {label}
-      </Text>
-      <Text
-        style={[
-          styles.value,
-          { color: highlight ? tokens.colors.warning : tokens.colors.text },
-        ]}
+      </AtomicText>
+      <AtomicText
+        type="bodyMedium"
+        style={{
+          color: highlight ? tokens.colors.warning : tokens.colors.text,
+          fontWeight: "500",
+        }}
       >
         {value}
-      </Text>
+      </AtomicText>
     </View>
   );
 };
@@ -43,11 +44,4 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     alignItems: "center",
   },
-  label: {
-    fontSize: 14,
-  },
-  value: {
-    fontSize: 14,
-    fontWeight: "500",
-  },
 });

package/src/presentation/components/details/PremiumStatusBadge.tsx

@@ -4,8 +4,8 @@
  */
 
 import React from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, StyleSheet } from "react-native";
+import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
 import { SubscriptionStatusType } from "../../../domain/entities/SubscriptionStatus";
 export type { SubscriptionStatusType };
 
@@ -48,9 +48,9 @@ export const PremiumStatusBadge: React.FC<PremiumStatusBadgeProps> = ({
 
   return (
     <View style={[styles.badge, { backgroundColor }]}>
-      <Text style={[styles.badgeText, { color: tokens.colors.onPrimary }]}>
+      <AtomicText type="labelSmall" style={[styles.badgeText, { color: tokens.colors.onPrimary }]}>
         {label}
-      </Text>
+      </AtomicText>
     </View>
   );
 };
@@ -62,7 +62,6 @@ const styles = StyleSheet.create({
     borderRadius: 4,
   },
   badgeText: {
-    fontSize: 12,
     fontWeight: "600",
   },
 });

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

@@ -1,12 +1,16 @@
 /**
  * Credits Package Card Component
- * Single Responsibility: Display a single credits package option
+ * Selectable card for credit packages
  */
 
 import React from "react";
 import { View, StyleSheet, TouchableOpacity } from "react-native";
-import { AtomicText } from "@umituz/react-native-design-system";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import {
+  AtomicText,
+  AtomicIcon,
+  AtomicBadge,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
 import type { CreditsPackage } from "../../../domain/entities/paywall/CreditsPackage";
 
 interface CreditsPackageCardProps {
@@ -15,94 +19,110 @@ interface CreditsPackageCardProps {
   onSelect: () => void;
 }
 
-export const CreditsPackageCard: React.FC<CreditsPackageCardProps> =
-  React.memo(({ package: pkg, isSelected, onSelect }) => {
+export const CreditsPackageCard: React.FC<CreditsPackageCardProps> = React.memo(
+  ({ package: pkg, isSelected, onSelect }) => {
     const tokens = useAppDesignTokens();
-
     const totalCredits = pkg.credits + (pkg.bonus || 0);
 
     return (
       <TouchableOpacity
-        style={[
-          styles.container,
-          {
-            backgroundColor: isSelected
-              ? tokens.colors.primaryLight
-              : tokens.colors.surface,
-            borderColor: isSelected
-              ? tokens.colors.primary
-              : tokens.colors.border,
-            borderWidth: isSelected ? 2 : 1,
-          },
-        ]}
         onPress={onSelect}
-        activeOpacity={0.8}
+        activeOpacity={0.7}
+        style={styles.touchable}
       >
-        {pkg.badge && (
-          <View
-            style={[styles.badge, { backgroundColor: tokens.colors.warning }]}
-          >
-            <AtomicText
-              type="labelSmall"
-              style={{ color: tokens.colors.onPrimary, fontWeight: "700" }}
-            >
-              {pkg.badge}
-            </AtomicText>
-          </View>
-        )}
-        <View style={styles.content}>
-          <View style={styles.leftSection}>
-            <AtomicText
-              type="headlineMedium"
-              style={[styles.credits, { color: tokens.colors.textPrimary }]}
-            >
-              {totalCredits.toLocaleString()} Credits
-            </AtomicText>
-            {(pkg.bonus ?? 0) > 0 && (
-              <AtomicText
-                type="bodySmall"
-                style={[styles.bonus, { color: tokens.colors.success }]}
-              >
-                +{pkg.bonus} bonus
-              </AtomicText>
-            )}
-            {pkg.description && (
+        <View
+          style={[
+            styles.container,
+            {
+              backgroundColor: tokens.colors.surface,
+              borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
+              borderWidth: isSelected ? 2 : 1,
+            },
+          ]}
+        >
+          {pkg.badge && (
+            <View style={styles.badgeContainer}>
+              <AtomicBadge text={pkg.badge} variant="warning" size="sm" />
+            </View>
+          )}
+
+          <View style={styles.content}>
+            <View style={styles.leftSection}>
+              <View style={styles.creditsRow}>
+                <AtomicIcon
+                  name="flash"
+                  size="md"
+                  color={isSelected ? "primary" : "secondary"}
+                />
+                <AtomicText
+                  type="headlineSmall"
+                  style={[
+                    styles.credits,
+                    { color: isSelected ? tokens.colors.primary : tokens.colors.textPrimary },
+                  ]}
+                >
+                  {totalCredits.toLocaleString()}
+                </AtomicText>
+              </View>
+
+              {(pkg.bonus ?? 0) > 0 && (
+                <View style={styles.bonusContainer}>
+                  <AtomicIcon name="gift-outline" size="sm" color="success" />
+                  <AtomicText
+                    type="bodySmall"
+                    style={[styles.bonus, { color: tokens.colors.success }]}
+                  >
+                    +{pkg.bonus}
+                  </AtomicText>
+                </View>
+              )}
+
+              {pkg.description && (
+                <AtomicText
+                  type="bodySmall"
+                  style={{ color: tokens.colors.textSecondary }}
+                >
+                  {pkg.description}
+                </AtomicText>
+              )}
+            </View>
+
+            <View style={styles.rightSection}>
               <AtomicText
-                type="bodySmall"
-                style={{ color: tokens.colors.textSecondary }}
+                type="titleLarge"
+                style={[
+                  styles.price,
+                  { color: isSelected ? tokens.colors.primary : tokens.colors.textPrimary },
+                ]}
               >
-                {pkg.description}
+                {pkg.currency}{pkg.price.toFixed(2)}
               </AtomicText>
-            )}
-          </View>
-          <View style={styles.rightSection}>
-            <AtomicText
-              type="titleLarge"
-              style={[styles.price, { color: tokens.colors.primary }]}
-            >
-              {pkg.currency} {pkg.price.toFixed(2)}
-            </AtomicText>
+              {isSelected && (
+                <AtomicIcon name="checkmark-circle" size="md" color="primary" />
+              )}
+            </View>
           </View>
         </View>
       </TouchableOpacity>
     );
-  });
+  }
+);
 
 CreditsPackageCard.displayName = "CreditsPackageCard";
 
 const styles = StyleSheet.create({
+  touchable: {
+    marginBottom: 12,
+  },
   container: {
     borderRadius: 16,
-    padding: 20,
+    padding: 16,
     position: "relative",
   },
-  badge: {
+  badgeContainer: {
     position: "absolute",
     top: -10,
-    right: 20,
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    borderRadius: 8,
+    right: 16,
   },
   content: {
     flexDirection: "row",
@@ -111,19 +131,31 @@ const styles = StyleSheet.create({
   },
   leftSection: {
     flex: 1,
+    marginRight: 16,
+  },
+  creditsRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 4,
   },
   credits: {
     fontWeight: "700",
+    marginLeft: 8,
+  },
+  bonusContainer: {
+    flexDirection: "row",
+    alignItems: "center",
     marginBottom: 4,
   },
   bonus: {
     fontWeight: "600",
-    marginBottom: 4,
+    marginLeft: 4,
   },
   rightSection: {
     alignItems: "flex-end",
   },
   price: {
     fontWeight: "700",
+    marginBottom: 4,
   },
 });

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

@@ -1,11 +1,16 @@
 /**
  * Paywall Feature Item Component
- * Single Responsibility: Display a single feature in the features list
+ * Single feature in the features list
  */
 
 import React, { useMemo } from "react";
 import { View, StyleSheet } from "react-native";
-import { AtomicText, AtomicIcon, useAppDesignTokens, useResponsive } from "@umituz/react-native-design-system";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+  useResponsive,
+} from "@umituz/react-native-design-system";
 
 interface PaywallFeatureItemProps {
   icon: string;
@@ -19,33 +24,36 @@ export const PaywallFeatureItem: React.FC<PaywallFeatureItemProps> = React.memo(
 
     const styles = useMemo(() => createStyles(spacingMultiplier), [spacingMultiplier]);
     const fontSize = getFontSize(15);
-    const lineHeight = getFontSize(22);
-    const iconSize = getFontSize(20);
+    const iconSize = getFontSize(18);
 
-    // Pass icon name directly to AtomicIcon (which uses Ionicons)
-    // Do NOT capitalize, as Ionicons names are lowercase/kebab-case.
     const iconName = useMemo(() => {
-      if (!icon) return "help-circle-outline";
+      if (!icon) return "checkmark-circle";
       return icon;
     }, [icon]);
 
     return (
       <View style={styles.featureItem}>
-        <AtomicIcon
-          name={iconName}
-          customSize={iconSize}
-          customColor={tokens.colors.primary}
-          style={styles.featureIcon}
-        />
+        <View
+          style={[
+            styles.iconContainer,
+            { backgroundColor: tokens.colors.primaryLight },
+          ]}
+        >
+          <AtomicIcon
+            name={iconName}
+            customSize={iconSize}
+            customColor={tokens.colors.primary}
+          />
+        </View>
         <AtomicText
           type="bodyMedium"
-          style={[styles.featureText, { color: tokens.colors.textPrimary, fontSize, lineHeight }]}
+          style={[styles.featureText, { color: tokens.colors.textPrimary, fontSize }]}
         >
           {text}
         </AtomicText>
       </View>
     );
-  },
+  }
 );
 
 PaywallFeatureItem.displayName = "PaywallFeatureItem";
@@ -56,10 +64,16 @@ const createStyles = (spacingMult: number) =>
       flexDirection: "row",
       alignItems: "center",
     },
-    featureIcon: {
+    iconContainer: {
+      width: 32 * spacingMult,
+      height: 32 * spacingMult,
+      borderRadius: 16 * spacingMult,
+      justifyContent: "center",
+      alignItems: "center",
       marginRight: 12 * spacingMult,
     },
     featureText: {
       flex: 1,
+      fontWeight: "500",
     },
   });

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

@@ -0,0 +1,144 @@
+/**
+ * Paywall Hero Header Component
+ * Header with gradient background - theme aware
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import {
+    AtomicText,
+    AtomicIcon,
+    useDesignSystemTheme,
+    useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+interface PaywallHeroHeaderProps {
+    title: string;
+    subtitle?: string;
+    onClose: () => void;
+}
+
+export const PaywallHeroHeader: React.FC<PaywallHeroHeaderProps> = React.memo(
+    ({ title, subtitle, onClose }) => {
+        const tokens = useAppDesignTokens();
+        const { themeMode } = useDesignSystemTheme();
+        const isDark = themeMode === "dark";
+
+        const gradientColors: readonly [string, string, string] = isDark
+            ? [tokens.colors.background, tokens.colors.surfaceSecondary, tokens.colors.surface]
+            : [tokens.colors.primary, tokens.colors.primaryDark, tokens.colors.primary];
+
+        return (
+            <LinearGradient
+                colors={gradientColors}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 1 }}
+                style={styles.container}
+            >
+                <View style={[styles.decorativeCircle, styles.circle1]} />
+                <View style={[styles.decorativeCircle, styles.circle2]} />
+
+                <TouchableOpacity
+                    onPress={onClose}
+                    style={[
+                        styles.closeButton,
+                        {
+                            backgroundColor: isDark
+                                ? tokens.colors.surfaceSecondary
+                                : tokens.colors.onPrimary,
+                        },
+                    ]}
+                    hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                >
+                    <AtomicIcon
+                        name="close-outline"
+                        size="md"
+                        customColor={isDark ? tokens.colors.textPrimary : tokens.colors.primary}
+                    />
+                </TouchableOpacity>
+
+                <View style={styles.content}>
+                    <AtomicText
+                        type="headlineLarge"
+                        style={[styles.title, { color: tokens.colors.onPrimary }]}
+                    >
+                        {title}
+                    </AtomicText>
+                    {subtitle && (
+                        <AtomicText
+                            type="bodyLarge"
+                            style={[styles.subtitle, { color: tokens.colors.onPrimary }]}
+                        >
+                            {subtitle}
+                        </AtomicText>
+                    )}
+                </View>
+
+                <View style={[styles.wave, { backgroundColor: tokens.colors.background }]} />
+            </LinearGradient>
+        );
+    }
+);
+
+PaywallHeroHeader.displayName = "PaywallHeroHeader";
+
+const styles = StyleSheet.create({
+    container: {
+        paddingTop: 60,
+        paddingBottom: 40,
+        paddingHorizontal: 24,
+        position: "relative",
+        overflow: "hidden",
+    },
+    decorativeCircle: {
+        position: "absolute",
+        borderRadius: 9999,
+        backgroundColor: "rgba(255, 255, 255, 0.1)",
+    },
+    circle1: {
+        width: 200,
+        height: 200,
+        top: -100,
+        right: -50,
+    },
+    circle2: {
+        width: 150,
+        height: 150,
+        bottom: -75,
+        left: -40,
+    },
+    closeButton: {
+        position: "absolute",
+        top: 50,
+        right: 20,
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        justifyContent: "center",
+        alignItems: "center",
+        zIndex: 10,
+    },
+    content: {
+        alignItems: "center",
+        zIndex: 1,
+    },
+    title: {
+        fontWeight: "700",
+        textAlign: "center",
+        marginBottom: 8,
+    },
+    subtitle: {
+        textAlign: "center",
+        opacity: 0.9,
+    },
+    wave: {
+        position: "absolute",
+        bottom: -1,
+        left: 0,
+        right: 0,
+        height: 30,
+        borderTopLeftRadius: 30,
+        borderTopRightRadius: 30,
+    },
+});

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

@@ -1,6 +1,6 @@
 /**
  * Paywall Modal Component
- * Displays paywall with Credits and Subscription tabs
+ * Mode-based paywall: subscription, credits, or hybrid
  */
 
 import React from "react";
@@ -8,76 +8,69 @@ import { View, StyleSheet } from "react-native";
 import { BaseModal } from "@umituz/react-native-design-system";
 import type { PurchasesPackage } from "react-native-purchases";
 import { usePaywall } from "../../hooks/usePaywall";
-import { PaywallHeader } from "./PaywallHeader";
+import { PaywallHeroHeader } from "./PaywallHeroHeader";
 import { PaywallTabBar } from "./PaywallTabBar";
 import { CreditsTabContent } from "./CreditsTabContent";
 import { SubscriptionTabContent } from "./SubscriptionTabContent";
 import type { PaywallTabType } from "../../../domain/entities/paywall/PaywallTab";
+import type { PaywallMode } from "../../../domain/entities/paywall/PaywallMode";
 import type { CreditsPackage } from "../../../domain/entities/paywall/CreditsPackage";
 
-export interface PaywallModalStyles {
-  headerTopPadding?: number;
-  contentHorizontalPadding?: number;
-  contentBottomPadding?: number;
-}
-
 export interface PaywallModalProps {
   visible: boolean;
   onClose: () => void;
+  mode: PaywallMode;
   initialTab?: PaywallTabType;
-  creditsPackages: CreditsPackage[];
-  subscriptionPackages: PurchasesPackage[];
-  currentCredits: number;
+  creditsPackages?: CreditsPackage[];
+  subscriptionPackages?: PurchasesPackage[];
+  currentCredits?: number;
   requiredCredits?: number;
-  onCreditsPurchase: (packageId: string) => Promise<void>;
-  onSubscriptionPurchase: (pkg: PurchasesPackage) => Promise<void>;
+  onCreditsPurchase?: (packageId: string) => Promise<void>;
+  onSubscriptionPurchase?: (pkg: PurchasesPackage) => Promise<void>;
   onRestore?: () => Promise<void>;
   subscriptionFeatures?: Array<{ icon: string; text: string }>;
   isLoading?: boolean;
+  translations: PaywallTranslations;
+  legalUrls?: PaywallLegalUrls;
+}
+
+export interface PaywallTranslations {
   title: string;
   subtitle: string;
-  creditsTabLabel: string;
-  subscriptionTabLabel: string;
+  creditsTabLabel?: string;
+  subscriptionTabLabel?: string;
   purchaseButtonText: string;
-  subscribeButtonText: string;
+  subscribeButtonText?: string;
   restoreButtonText: string;
   loadingText: string;
   emptyText: string;
   processingText: string;
-  privacyUrl?: string;
-  termsUrl?: string;
   privacyText?: string;
   termsOfServiceText?: string;
 }
 
+export interface PaywallLegalUrls {
+  privacyUrl?: string;
+  termsUrl?: string;
+}
+
 export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
   const {
     visible,
     onClose,
-    initialTab = "credits",
-    creditsPackages,
-    subscriptionPackages,
-    currentCredits,
+    mode,
+    initialTab = mode === "credits" ? "credits" : "subscription",
+    creditsPackages = [],
+    subscriptionPackages = [],
+    currentCredits = 0,
     requiredCredits,
     onCreditsPurchase,
     onSubscriptionPurchase,
     onRestore,
     subscriptionFeatures = [],
     isLoading = false,
-    title,
-    subtitle,
-    creditsTabLabel,
-    subscriptionTabLabel,
-    purchaseButtonText,
-    subscribeButtonText,
-    privacyUrl,
-    termsUrl,
-    privacyText,
-    termsOfServiceText,
-    restoreButtonText,
-    loadingText,
-    emptyText,
-    processingText,
+    translations,
+    legalUrls = {},
   } = props;
 
   const {
@@ -91,28 +84,34 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
     handleSubscriptionPurchase,
   } = usePaywall({
     initialTab,
-    onCreditsPurchase,
-    onSubscriptionPurchase,
+    onCreditsPurchase: onCreditsPurchase ?? (() => Promise.resolve()),
+    onSubscriptionPurchase: onSubscriptionPurchase ?? (() => Promise.resolve()),
   });
 
+  const showTabs = mode === "hybrid";
+  const showCredits = mode === "credits" || (mode === "hybrid" && activeTab === "credits");
+  const showSubscription = mode === "subscription" || (mode === "hybrid" && activeTab === "subscription");
+
   return (
     <BaseModal visible={visible} onClose={onClose}>
       <View style={styles.container}>
-        <PaywallHeader
-          title={title}
-          subtitle={subtitle}
+        <PaywallHeroHeader
+          title={translations.title}
+          subtitle={translations.subtitle}
           onClose={onClose}
         />
 
-        <PaywallTabBar
-          activeTab={activeTab}
-          onTabChange={handleTabChange}
-          creditsLabel={creditsTabLabel}
-          subscriptionLabel={subscriptionTabLabel}
-        />
+        {showTabs && (
+          <PaywallTabBar
+            activeTab={activeTab}
+            onTabChange={handleTabChange}
+            creditsLabel={translations.creditsTabLabel}
+            subscriptionLabel={translations.subscriptionTabLabel}
+          />
+        )}
 
         <View style={styles.tabContent}>
-          {activeTab === "credits" ? (
+          {showCredits && (
             <CreditsTabContent
               packages={creditsPackages}
               selectedPackageId={selectedCreditsPackageId}
@@ -121,9 +120,10 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
               currentCredits={currentCredits}
               requiredCredits={requiredCredits}
               isLoading={isLoading}
-              purchaseButtonText={purchaseButtonText}
+              purchaseButtonText={translations.purchaseButtonText}
             />
-          ) : (
+          )}
+          {showSubscription && (
             <SubscriptionTabContent
               packages={subscriptionPackages}
               selectedPackage={selectedSubscriptionPkg}
@@ -131,16 +131,16 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
               onPurchase={handleSubscriptionPurchase}
               features={subscriptionFeatures}
               isLoading={isLoading}
-              purchaseButtonText={subscribeButtonText}
-              processingText={processingText}
-              restoreButtonText={restoreButtonText}
-              loadingText={loadingText}
-              emptyText={emptyText}
+              purchaseButtonText={translations.subscribeButtonText ?? translations.purchaseButtonText}
+              processingText={translations.processingText}
+              restoreButtonText={translations.restoreButtonText}
+              loadingText={translations.loadingText}
+              emptyText={translations.emptyText}
               onRestore={onRestore}
-              privacyUrl={privacyUrl}
-              termsUrl={termsUrl}
-              privacyText={privacyText}
-              termsOfServiceText={termsOfServiceText}
+              privacyUrl={legalUrls.privacyUrl}
+              termsUrl={legalUrls.termsUrl}
+              privacyText={translations.privacyText}
+              termsOfServiceText={translations.termsOfServiceText}
             />
           )}
         </View>

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

@@ -1,12 +1,11 @@
 /**
  * Paywall Tab Bar Component
- * Single Responsibility: Display and handle tab selection
+ * Segmented control for paywall tabs
  */
 
 import React from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicText } from "@umituz/react-native-design-system";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, TouchableOpacity, StyleSheet, Animated } from "react-native";
+import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
 import type { PaywallTabType } from "../../../domain/entities/paywall/PaywallTab";
 
 interface PaywallTabBarProps {
@@ -24,6 +23,18 @@ export const PaywallTabBar: React.FC<PaywallTabBarProps> = React.memo(
     subscriptionLabel = "Subscription",
   }) => {
     const tokens = useAppDesignTokens();
+    const animatedValue = React.useRef(
+      new Animated.Value(activeTab === "credits" ? 0 : 1)
+    ).current;
+
+    React.useEffect(() => {
+      Animated.spring(animatedValue, {
+        toValue: activeTab === "credits" ? 0 : 1,
+        useNativeDriver: false,
+        tension: 68,
+        friction: 12,
+      }).start();
+    }, [activeTab, animatedValue]);
 
     const renderTab = (tab: PaywallTabType, label: string) => {
       const isActive = activeTab === tab;
@@ -31,25 +42,16 @@ export const PaywallTabBar: React.FC<PaywallTabBarProps> = React.memo(
       return (
         <TouchableOpacity
           key={tab}
-          style={[
-            styles.tab,
-            {
-              backgroundColor: isActive
-                ? tokens.colors.primary
-                : tokens.colors.surfaceSecondary,
-            },
-          ]}
+          style={styles.tab}
           onPress={() => onTabChange(tab)}
-          activeOpacity={0.8}
+          activeOpacity={0.7}
         >
           <AtomicText
             type="labelLarge"
             style={[
               styles.tabText,
               {
-                color: isActive
-                  ? tokens.colors.onPrimary
-                  : tokens.colors.textSecondary,
+                color: isActive ? tokens.colors.primary : tokens.colors.textSecondary,
               },
             ]}
           >
@@ -59,6 +61,11 @@ export const PaywallTabBar: React.FC<PaywallTabBarProps> = React.memo(
       );
     };
 
+    const indicatorTranslateX = animatedValue.interpolate({
+      inputRange: [0, 1],
+      outputRange: ["0%", "50%"],
+    });
+
     return (
       <View
         style={[
@@ -66,11 +73,20 @@ export const PaywallTabBar: React.FC<PaywallTabBarProps> = React.memo(
           { backgroundColor: tokens.colors.surfaceSecondary },
         ]}
       >
+        <Animated.View
+          style={[
+            styles.indicator,
+            {
+              backgroundColor: tokens.colors.surface,
+              left: indicatorTranslateX,
+            },
+          ]}
+        />
         {renderTab("credits", creditsLabel)}
         {renderTab("subscription", subscriptionLabel)}
       </View>
     );
-  },
+  }
 );
 
 PaywallTabBar.displayName = "PaywallTabBar";
@@ -82,13 +98,21 @@ const styles = StyleSheet.create({
     padding: 4,
     marginHorizontal: 24,
     marginBottom: 16,
+    position: "relative",
+    height: 44,
+  },
+  indicator: {
+    position: "absolute",
+    top: 4,
+    bottom: 4,
+    width: "48%",
+    borderRadius: 8,
   },
   tab: {
     flex: 1,
-    paddingVertical: 12,
-    borderRadius: 8,
     alignItems: "center",
     justifyContent: "center",
+    zIndex: 1,
   },
   tabText: {
     fontWeight: "600",

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

@@ -1,6 +1,6 @@
 /**
  * Accordion Plan Card
- * Expandable subscription plan card with credit display
+ * Expandable subscription plan card
  */
 
 import React, { useCallback, useMemo } from "react";
@@ -41,7 +41,6 @@ export const AccordionPlanCard: React.FC<AccordionPlanCardProps> = React.memo(
       : null;
 
     const title = pkg.product.title || t(`paywall.period.${periodLabel}`);
-    const displayPrice = price;
 
     const handleHeaderPress = useCallback(() => {
       onSelect();
@@ -53,11 +52,9 @@ export const AccordionPlanCard: React.FC<AccordionPlanCardProps> = React.memo(
     const containerStyle: StyleProp<ViewStyle> = [
       styles.container,
       {
-        borderColor: isSelected
-          ? tokens.colors.primary
-          : tokens.colors.borderLight,
-        borderWidth: isSelected ? 2 : 1,
         backgroundColor: tokens.colors.surface,
+        borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
+        borderWidth: isSelected ? 2 : 1,
       },
     ];
 
@@ -65,7 +62,7 @@ export const AccordionPlanCard: React.FC<AccordionPlanCardProps> = React.memo(
       <View style={containerStyle}>
         <PlanCardHeader
           title={title}
-          price={displayPrice}
+          price={price}
           creditAmount={creditAmount}
           isSelected={isSelected}
           isExpanded={isExpanded}
@@ -96,5 +93,6 @@ const createStyles = (spacingMult: number) =>
     container: {
       borderRadius: 16 * spacingMult,
       marginBottom: 12 * spacingMult,
+      overflow: "hidden",
     },
   });

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

@@ -1,12 +1,13 @@
 /**
  * Plan Card Header
- * Collapsed state of accordion subscription card
+ * Header for accordion subscription card
  */
 
 import React, { useMemo } from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import {
   AtomicText,
+  AtomicIcon,
   useAppDesignTokens,
   withAlpha,
   useResponsive,
@@ -47,19 +48,13 @@ export const PlanCardHeader: React.FC<PlanCardHeaderProps> = ({
             style={[
               styles.radio,
               {
-                borderColor: isSelected
-                  ? tokens.colors.primary
-                  : tokens.colors.border,
+                borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
+                backgroundColor: isSelected ? tokens.colors.primary : "transparent",
               },
             ]}
           >
             {isSelected && (
-              <View
-                style={[
-                  styles.radioInner,
-                  { backgroundColor: tokens.colors.primary },
-                ]}
-              />
+              <AtomicIcon name="checkmark" customSize={14} customColor={tokens.colors.onPrimary} />
             )}
           </View>
 
@@ -80,15 +75,17 @@ export const PlanCardHeader: React.FC<PlanCardHeaderProps> = ({
                   },
                 ]}
               >
+                <AtomicIcon name="flash" customSize={creditFontSize} customColor={tokens.colors.primary} />
                 <AtomicText
                   type="labelSmall"
                   style={{
                     color: tokens.colors.primary,
                     fontWeight: "700",
                     fontSize: creditFontSize,
+                    marginLeft: 4,
                   }}
                 >
-                  {creditAmount} {t("paywall.credits") || "Credits"}
+                  {creditAmount} {t("paywall.credits")}
                 </AtomicText>
               </View>
             )}
@@ -98,10 +95,7 @@ export const PlanCardHeader: React.FC<PlanCardHeaderProps> = ({
         <View style={styles.rightSection}>
           <AtomicText
             type="titleMedium"
-            style={{
-              color: tokens.colors.textPrimary,
-              fontWeight: "700",
-            }}
+            style={{ color: tokens.colors.textPrimary, fontWeight: "700" }}
           >
             {price}
           </AtomicText>
@@ -113,7 +107,6 @@ export const PlanCardHeader: React.FC<PlanCardHeaderProps> = ({
 
 const createStyles = (spacingMult: number, touchTarget: number) => {
   const radioSize = Math.max(touchTarget * 0.4, 22);
-  const radioInnerSize = radioSize * 0.55;
 
   return StyleSheet.create({
     container: {
@@ -140,17 +133,14 @@ const createStyles = (spacingMult: number, touchTarget: number) => {
       justifyContent: "center",
       marginRight: 12 * spacingMult,
     },
-    radioInner: {
-      width: radioInnerSize,
-      height: radioInnerSize,
-      borderRadius: radioInnerSize / 2,
-    },
     textContainer: {
       flex: 1,
       gap: 6 * spacingMult,
     },
     creditBadge: {
-      paddingHorizontal: 10 * spacingMult,
+      flexDirection: "row",
+      alignItems: "center",
+      paddingHorizontal: 8 * spacingMult,
       paddingVertical: 4 * spacingMult,
       borderRadius: 12 * spacingMult,
       borderWidth: 1,