@oxyhq/services 11.0.0 → 11.1.1

package/src/ui/screens/PremiumSubscriptionScreen.tsx

@@ -1,24 +1,25 @@
 import type React from 'react';
 import { useState, useEffect, useCallback, useMemo } from 'react';
-import {
-    View,
-    Text,
-    TouchableOpacity,
-    StyleSheet,
-    ScrollView,
-    ActivityIndicator,
-    Platform,
-    Animated,
-    Dimensions,
-} from 'react-native';
+import { View, ScrollView, ActivityIndicator } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { Button } from '@oxyhq/bloom/button';
+import { Chip } from '@oxyhq/bloom/chip';
+import { H2, H4, H5, Text } from '@oxyhq/bloom/typography';
+import { BenefitList, BenefitRow } from '@oxyhq/bloom/benefit-list';
+import {
+    SegmentedControl,
+    SegmentedControlItem,
+    SegmentedControlItemText,
+} from '@oxyhq/bloom/segmented-control';
 import { Ionicons } from '@expo/vector-icons';
-import Avatar from '../components/Avatar';
+import Header from '../components/Header';
 import { useI18n } from '../hooks/useI18n';
-import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../context/OxyContext';
 
+type IoniconName = React.ComponentProps<typeof Ionicons>['name'];
+
 interface SubscriptionPlan {
     id: string;
     name: string;
@@ -60,43 +61,57 @@ interface UserSubscription {
     trialEnd?: string;
 }
 
+const TAB_PLANS = 'plans';
+const TAB_FEATURES = 'features';
+type ActiveTab = typeof TAB_PLANS | typeof TAB_FEATURES;
+
+const BILLING_MONTH = 'month';
+const BILLING_YEAR = 'year';
+type BillingInterval = typeof BILLING_MONTH | typeof BILLING_YEAR;
+
+/** Yearly billing discount applied when extrapolating a monthly price. */
+const YEARLY_DISCOUNT = 0.8;
+const MONTHS_PER_YEAR = 12;
+/** Simulated payment latency for the mocked subscribe/feature flows (ms). */
+const SUBSCRIBE_DELAY_MS = 2000;
+const FEATURE_DELAY_MS = 1500;
+/** One subscription period for the mocked renewal date (30 days, in ms). */
+const PERIOD_MS = 30 * 24 * 60 * 60 * 1000;
+
+const FEATURE_CATEGORIES: IndividualFeature['category'][] = [
+    'analytics',
+    'customization',
+    'content',
+    'networking',
+    'productivity',
+];
+
 const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
     onClose,
-    theme,
     navigate,
     goBack,
 }) => {
     // Use useOxy() hook for OxyContext values
-    const { user, oxyServices } = useOxy();
+    const { user } = useOxy();
     const [loading, setLoading] = useState(true);
     const [subscription, setSubscription] = useState<UserSubscription | null>(null);
     const [plans, setPlans] = useState<SubscriptionPlan[]>([]);
     const [individualFeatures, setIndividualFeatures] = useState<IndividualFeature[]>([]);
     const [selectedPlan, setSelectedPlan] = useState<string | null>(null);
     const [processingPayment, setProcessingPayment] = useState(false);
-    const [billingInterval, setBillingInterval] = useState<'month' | 'year'>('month');
-    const [activeTab, setActiveTab] = useState<'plans' | 'features'>('plans');
+    const [billingInterval, setBillingInterval] = useState<BillingInterval>(BILLING_MONTH);
+    const [activeTab, setActiveTab] = useState<ActiveTab>(TAB_PLANS);
     const [currentAppPackage, setCurrentAppPackage] = useState<string>('mention'); // Default to mention for demo
     const [pendingUnsubscribeFeatureId, setPendingUnsubscribeFeatureId] = useState<string | null>(null);
 
     const { t } = useI18n();
     const bloomTheme = useTheme();
+    const colors = bloomTheme.colors;
 
     // Prompt controls
     const cancelSubscriptionDialog = useDialogControl();
     const unsubscribeFeatureDialog = useDialogControl();
 
-    // Extract commonly used colors for readability
-    const textColor = bloomTheme.colors.text;
-    const backgroundColor = bloomTheme.colors.background;
-    const secondaryBackgroundColor = bloomTheme.colors.backgroundSecondary;
-    const borderColor = bloomTheme.colors.border;
-    const primaryColor = bloomTheme.colors.primary;
-    const successColor = bloomTheme.colors.success;
-    const dangerColor = bloomTheme.colors.error;
-    const isDarkTheme = bloomTheme.isDark;
-    const warningColor = bloomTheme.colors.warning;
-
     // Oxy+ subscription plans
     const mockPlans: SubscriptionPlan[] = [
         {
@@ -336,7 +351,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                     planId: 'oxy-insider',
                     status: 'active',
                     currentPeriodStart: new Date().toISOString(),
-                    currentPeriodEnd: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
+                    currentPeriodEnd: new Date(Date.now() + PERIOD_MS).toISOString(),
                     cancelAtPeriodEnd: false
                 };
                 setSubscription(currentSubscription);
@@ -369,14 +384,10 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
         }
     };
 
-    const handlePlanSelection = (planId: string) => {
-        setSelectedPlan(planId);
-    };
-
     const handleSubscribe = async (planId: string) => {
         try {
-            const selectedPlan = mockPlans.find(plan => plan.id === planId);
-            if (!selectedPlan?.applicableApps.includes(currentAppPackage)) {
+            const planToSubscribe = mockPlans.find(plan => plan.id === planId);
+            if (!planToSubscribe?.applicableApps.includes(currentAppPackage)) {
                 toast.error(t('premium.toasts.planUnavailable', { app: currentAppPackage }) || `This plan is not available for the current app (${currentAppPackage})`);
                 return;
             }
@@ -386,8 +397,9 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                 return;
             }
 
+            setSelectedPlan(planId);
             setProcessingPayment(true);
-            await new Promise(resolve => setTimeout(resolve, 2000));
+            await new Promise(resolve => setTimeout(resolve, SUBSCRIBE_DELAY_MS));
             toast.success(t('premium.toasts.activated') || 'Subscription activated successfully!');
 
             setSubscription({
@@ -395,7 +407,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                 planId,
                 status: 'active',
                 currentPeriodStart: new Date().toISOString(),
-                currentPeriodEnd: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
+                currentPeriodEnd: new Date(Date.now() + PERIOD_MS).toISOString(),
                 cancelAtPeriodEnd: false
             });
 
@@ -427,7 +439,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
         }
     }, [t]);
 
-    const handleReactivateSubscription = async () => {
+    const handleReactivateSubscription = useCallback(async () => {
         try {
             setSubscription(prev => prev ? {
                 ...prev,
@@ -437,10 +449,10 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
         } catch (error) {
             toast.error(t('premium.toasts.reactivateFailed') || 'Failed to reactivate subscription');
         }
-    };
+    }, [t]);
 
-    const formatPrice = (price: number, currency: string, interval: string) => {
-        const yearlyPrice = interval === 'year' ? price : price * 12 * 0.8;
+    const formatPrice = (price: number, interval: string) => {
+        const yearlyPrice = interval === 'year' ? price : price * MONTHS_PER_YEAR * YEARLY_DISCOUNT;
         const displayPrice = billingInterval === 'year' ? yearlyPrice : price;
 
         return {
@@ -457,24 +469,24 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
     const handleFeatureSubscribe = async (featureId: string) => {
         try {
-            const selectedFeature = mockIndividualFeatures.find(feature => feature.id === featureId);
-            if (!selectedFeature?.applicableApps.includes(currentAppPackage)) {
+            const featureToSubscribe = mockIndividualFeatures.find(feature => feature.id === featureId);
+            if (!featureToSubscribe?.applicableApps.includes(currentAppPackage)) {
                 toast.error(`This feature is not available for the current app (${currentAppPackage})`);
                 return;
             }
 
-            if (selectedFeature.appScope === 'specific') {
-                const hasExactMatch = selectedFeature.applicableApps.length === 1 &&
-                    selectedFeature.applicableApps[0] === currentAppPackage;
-                if (!hasExactMatch && selectedFeature.applicableApps.length === 1) {
-                    const requiredApp = selectedFeature.applicableApps[0];
-                    toast.error(`${selectedFeature.name} is only available in the ${requiredApp} app`);
+            if (featureToSubscribe.appScope === 'specific') {
+                const hasExactMatch = featureToSubscribe.applicableApps.length === 1 &&
+                    featureToSubscribe.applicableApps[0] === currentAppPackage;
+                if (!hasExactMatch && featureToSubscribe.applicableApps.length === 1) {
+                    const requiredApp = featureToSubscribe.applicableApps[0];
+                    toast.error(`${featureToSubscribe.name} is only available in the ${requiredApp} app`);
                     return;
                 }
             }
 
             setProcessingPayment(true);
-            await new Promise(resolve => setTimeout(resolve, 1500));
+            await new Promise(resolve => setTimeout(resolve, FEATURE_DELAY_MS));
 
             setIndividualFeatures(prev =>
                 prev.map(feature =>
@@ -526,37 +538,16 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
         [individualFeatures, pendingUnsubscribeFeatureId]
     );
 
-    const renderHeader = () => {
-        const getAppDisplayName = (packageName: string) => {
-            const appNames: Record<string, string> = {
-                'mention': 'Mention',
-                'oxy-social': 'Oxy Social',
-                'oxy-workspace': 'Oxy Workspace',
-                'oxy-creator': 'Oxy Creator',
-                'oxy-analytics': 'Oxy Analytics',
-                'oxy-studio': 'Oxy Studio'
-            };
-            return appNames[packageName] || packageName;
+    const getAppDisplayName = (packageName: string) => {
+        const appNames: Record<string, string> = {
+            'mention': 'Mention',
+            'oxy-social': 'Oxy Social',
+            'oxy-workspace': 'Oxy Workspace',
+            'oxy-creator': 'Oxy Creator',
+            'oxy-analytics': 'Oxy Analytics',
+            'oxy-studio': 'Oxy Studio'
         };
-
-        return (
-            <View style={[styles.header, { borderBottomColor: borderColor }]}>
-                <TouchableOpacity style={styles.backButton} onPress={goBack}>
-                    <Ionicons name="arrow-back" size={24} color={textColor} />
-                </TouchableOpacity>
-                <View style={styles.headerTitleContainer}>
-                    <Text style={[styles.headerTitle, { color: textColor }]}>{t('premium.title') || 'Oxy+ Subscriptions'}</Text>
-                    <Text style={[styles.currentAppText, { color: bloomTheme.colors.textSecondary }]}>
-                        {t('premium.forApp', { app: getAppDisplayName(currentAppPackage) }) || `for ${getAppDisplayName(currentAppPackage)}`}
-                    </Text>
-                </View>
-                {onClose && (
-                    <TouchableOpacity style={styles.closeButton} onPress={onClose}>
-                        <Ionicons name="close" size={24} color={textColor} />
-                    </TouchableOpacity>
-                )}
-            </View>
-        );
+        return appNames[packageName] || packageName;
     };
 
     const renderCurrentSubscription = () => {
@@ -565,66 +556,72 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
         const currentPlan = getCurrentPlan();
         if (!currentPlan) return null;
 
-        const statusColor =
-            subscription.status === 'active' ? successColor :
-                subscription.status === 'trialing' ? warningColor :
-                    dangerColor;
+        const statusChipColor =
+            subscription.status === 'active' ? 'success' :
+                subscription.status === 'trialing' ? 'warning' :
+                    'error';
 
         return (
-            <View style={styles.section}>
-                <Text style={[styles.sectionTitle, { color: textColor }]}>{t('premium.current.title') || 'Current Subscription'}</Text>
-
-                <View style={[styles.currentSubscriptionCard, { backgroundColor: secondaryBackgroundColor, borderColor }]}>
-                    <View style={styles.subscriptionHeader}>
-                        <View>
-                            <Text style={[styles.planName, { color: textColor }]}>{currentPlan.name}</Text>
-                            <Text style={[styles.planPrice, { color: primaryColor }]}>
-                                ${currentPlan.price}/month
-                            </Text>
-                        </View>
-                        <View style={[styles.statusBadge, { backgroundColor: statusColor }]}>
-                            <Text style={styles.statusText}>
-                                {subscription.status.toUpperCase()}
+            <View className="mb-space-24">
+                <H5 className="text-text mb-space-12">
+                    {t('premium.current.title') || 'Current Subscription'}
+                </H5>
+
+                <View className="bg-fill border border-border-image rounded-radius-20 p-space-20 shadow-s">
+                    <View className="flex-row justify-between items-start mb-space-12">
+                        <View className="flex-1 pr-space-12">
+                            <H4 className="text-text" numberOfLines={1}>{currentPlan.name}</H4>
+                            <Text className="text-text-secondary text-sm mt-space-2">
+                                {`$${currentPlan.price}/month`}
                             </Text>
                         </View>
+                        <Chip variant="soft" color={statusChipColor} size="small">
+                            {subscription.status.toUpperCase()}
+                        </Chip>
                     </View>
 
-                    <Text style={[styles.subscriptionDetail, { color: bloomTheme.colors.textSecondary }]}>
+                    <Text className="text-text-secondary text-sm mb-space-16">
                         {t('premium.current.renewsOn', { date: new Date(subscription.currentPeriodEnd).toLocaleDateString() }) || `Renews on ${new Date(subscription.currentPeriodEnd).toLocaleDateString()}`}
                     </Text>
 
                     {subscription.cancelAtPeriodEnd && (
-                        <View style={styles.cancelNotice}>
-                            <Ionicons name="warning" size={16} color={warningColor} />
-                            <Text style={[styles.cancelText, { color: warningColor }]}>
+                        <View className="flex-row items-center bg-fill-secondary rounded-radius-12 p-space-12 mb-space-16">
+                            <Ionicons name="warning" size={16} color={colors.warning} />
+                            <Text className="text-text-secondary text-sm ml-space-8 flex-1">
                                 {t('premium.current.willCancelOn', { date: new Date(subscription.currentPeriodEnd).toLocaleDateString() }) || `Subscription will cancel on ${new Date(subscription.currentPeriodEnd).toLocaleDateString()}`}
                             </Text>
                         </View>
                     )}
 
-                    <View style={styles.subscriptionActions}>
+                    <View className="flex-row gap-space-12">
                         {subscription.cancelAtPeriodEnd ? (
-                            <TouchableOpacity
-                                style={[styles.actionButton, { backgroundColor: successColor }]}
+                            <Button
+                                variant="primary"
                                 onPress={handleReactivateSubscription}
+                                className="flex-1"
+                                accessibilityLabel={t('premium.actions.reactivate') || 'Reactivate'}
                             >
-                                <Text style={styles.actionButtonText}>{t('premium.actions.reactivate') || 'Reactivate'}</Text>
-                            </TouchableOpacity>
+                                {t('premium.actions.reactivate') || 'Reactivate'}
+                            </Button>
                         ) : (
-                            <TouchableOpacity
-                                style={[styles.actionButton, { backgroundColor: dangerColor }]}
+                            <Button
+                                variant="destructive"
                                 onPress={confirmCancelSubscription}
+                                className="flex-1"
+                                accessibilityLabel={t('premium.actions.cancelSubBtn') || 'Cancel Subscription'}
                             >
-                                <Text style={styles.actionButtonText}>{t('premium.actions.cancelSubBtn') || 'Cancel Subscription'}</Text>
-                            </TouchableOpacity>
+                                {t('premium.actions.cancelSubBtn') || 'Cancel Subscription'}
+                            </Button>
                         )}
 
-                        <TouchableOpacity
-                            style={[styles.actionButton, styles.secondaryButton, { borderColor }]}
-
+                        <Button
+                            variant="outline"
+                            onPress={() => navigate?.('PaymentGateway')}
+                            className="flex-1"
+                            accessibilityLabel={t('premium.actions.manageBilling') || 'Manage Billing'}
                         >
-                            <Text style={[styles.actionButtonText, { color: textColor }]}>{t('premium.actions.manageBilling') || 'Manage Billing'}</Text>
-                        </TouchableOpacity>
+                            {t('premium.actions.manageBilling') || 'Manage Billing'}
+                        </Button>
                     </View>
                 </View>
             </View>
@@ -632,49 +629,35 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
     };
 
     const renderBillingToggle = () => (
-        <View style={styles.section}>
-            <View style={styles.billingToggle}>
-                <TouchableOpacity
-                    style={[
-                        styles.billingOption,
-                        billingInterval === 'month' && { backgroundColor: primaryColor }
-                    ]}
-                    onPress={() => setBillingInterval('month')}
-                >
-                    <Text style={[
-                        styles.billingOptionText,
-                        { color: billingInterval === 'month' ? bloomTheme.colors.negativeForeground : textColor }
-                    ]}>
+        <View className="mb-space-24">
+            <SegmentedControl<BillingInterval>
+                label={t('premium.billing.label') || 'Billing period'}
+                type="tabs"
+                value={billingInterval}
+                onChange={setBillingInterval}
+            >
+                <SegmentedControlItem value={BILLING_MONTH}>
+                    <SegmentedControlItemText>
                         {t('premium.billing.monthly') || 'Monthly'}
-                    </Text>
-                </TouchableOpacity>
-
-                <TouchableOpacity
-                    style={[
-                        styles.billingOption,
-                        billingInterval === 'year' && { backgroundColor: primaryColor }
-                    ]}
-                    onPress={() => setBillingInterval('year')}
-                >
-                    <Text style={[
-                        styles.billingOptionText,
-                        { color: billingInterval === 'year' ? bloomTheme.colors.negativeForeground : textColor }
-                    ]}>
+                    </SegmentedControlItemText>
+                </SegmentedControlItem>
+                <SegmentedControlItem value={BILLING_YEAR}>
+                    <SegmentedControlItemText>
                         {t('premium.billing.yearly') || 'Yearly'}
-                    </Text>
-                </TouchableOpacity>
-            </View>
+                    </SegmentedControlItemText>
+                </SegmentedControlItem>
+            </SegmentedControl>
 
             {billingInterval === 'year' && (
-                <Text style={[styles.savingsText, { color: successColor }]}>
-                    {t('premium.billing.saveYearly') || '💰 Save 20% with yearly billing'}
+                <Text className="text-text-secondary text-sm text-center mt-space-12 font-medium">
+                    {t('premium.billing.saveYearly') || 'Save 20% with yearly billing'}
                 </Text>
             )}
         </View>
     );
 
     const renderPlanCard = (plan: SubscriptionPlan) => {
-        const pricing = formatPrice(plan.price, plan.currency, plan.interval);
+        const pricing = formatPrice(plan.price, plan.interval);
         const isSelected = selectedPlan === plan.id;
         const isCurrentPlan = subscription?.planId === plan.id;
         const isAppSpecific = plan.appScope === 'specific' && plan.applicableApps.length === 1;
@@ -683,11 +666,12 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
         const getAppScopeText = () => {
             if (plan.appScope === 'ecosystem') {
                 return t('premium.plan.scope.allApps') || 'Works across all Oxy apps';
-            }if (isAppSpecific) {
+            }
+            if (isAppSpecific) {
                 const appName = plan.applicableApps[0];
                 return t('premium.plan.scope.exclusive', { app: appName }) || `Exclusive to ${appName} app`;
             }
-                return t('premium.plan.scope.availableIn', { apps: plan.applicableApps.join(', ') }) || `Available in: ${plan.applicableApps.join(', ')}`;
+            return t('premium.plan.scope.availableIn', { apps: plan.applicableApps.join(', ') }) || `Available in: ${plan.applicableApps.join(', ')}`;
         };
 
         const getAvailabilityStatus = () => {
@@ -706,152 +690,139 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
         return (
             <View
                 key={plan.id}
-                style={[
-                    styles.planCard,
-                    { backgroundColor: secondaryBackgroundColor, borderColor },
-                    isSelected && { borderColor: primaryColor, borderWidth: 2 },
-                    plan.isPopular && styles.popularPlan,
-                    !availability.available && { opacity: 0.6 }
-                ]}
+                className={`bg-fill border border-border-image rounded-radius-20 p-space-20 mb-space-16 shadow-s ${!availability.available ? 'opacity-60' : ''}`}
+                style={
+                    isSelected || plan.isPopular
+                        ? { borderColor: colors.primary, borderWidth: 2 }
+                        : undefined
+                }
             >
-                {plan.isPopular && (
-                    <View style={[styles.popularBadge, { backgroundColor: primaryColor }]}>
-                        <Text style={styles.popularText}>MOST POPULAR</Text>
-                    </View>
-                )}
-
-                {isAppSpecific && (
-                    <View style={[styles.appSpecificBadge, {
-                        backgroundColor: isAvailableForCurrentApp ? successColor : warningColor
-                    }]}>
-                        <Text style={styles.appSpecificText}>
-                            {isAvailableForCurrentApp ? (t('premium.plan.badge.appExclusive') || 'App Exclusive') : (t('premium.plan.badge.notAvailable') || 'Not Available')}
-                        </Text>
-                    </View>
-                )}
+                <View className="flex-row flex-wrap gap-space-8 mb-space-12">
+                    {plan.isPopular && (
+                        <Chip variant="solid" color="primary" size="small">
+                            {t('premium.plan.badge.mostPopular') || 'Most Popular'}
+                        </Chip>
+                    )}
+                    {isAppSpecific && (
+                        <Chip
+                            variant="soft"
+                            color={isAvailableForCurrentApp ? 'success' : 'warning'}
+                            size="small"
+                        >
+                            {isAvailableForCurrentApp
+                                ? (t('premium.plan.badge.appExclusive') || 'App Exclusive')
+                                : (t('premium.plan.badge.notAvailable') || 'Not Available')}
+                        </Chip>
+                    )}
+                </View>
 
-                <View style={styles.planHeader}>
-                    <Text style={[styles.planName, { color: textColor }]}>{plan.name}</Text>
-                    <Text style={[styles.planDescription, { color: bloomTheme.colors.textSecondary }]}>
+                <View className="mb-space-16">
+                    <H4 className="text-text mb-space-4">{plan.name}</H4>
+                    <Text className="text-text-secondary text-sm">
                         {plan.description}
                     </Text>
-                    <Text style={[styles.planAppScope, { color: bloomTheme.colors.textTertiary }]}>
+                    <Text className="text-text-tertiary text-xs mt-space-4 italic">
                         {getAppScopeText()}
                     </Text>
                     {!availability.available && (
-                        <Text style={[styles.planRestrictionText, { color: dangerColor }]}>
+                        <Text className="text-xs mt-space-4 font-medium" style={{ color: colors.error }}>
                             {availability.reason}
                         </Text>
                     )}
                 </View>
 
-                <View style={styles.planPricing}>
-                    <Text style={[styles.planPrice, { color: textColor }]}>
-                        {pricing.formatted}
-                    </Text>
-                    <Text style={[styles.planInterval, { color: bloomTheme.colors.textSecondary }]}>
+                <View className="flex-row items-baseline mb-space-20">
+                    <H2 className="text-text">{pricing.formatted}</H2>
+                    <Text className="text-text-secondary text-sm ml-space-4">
                         {t('premium.plan.perInterval', { interval: pricing.interval }) || `per ${pricing.interval}`}
                     </Text>
                 </View>
 
-                <View style={styles.planFeatures}>
+                <BenefitList className="mb-space-24">
                     {plan.features.map((feature, index) => (
-                        <View key={index} style={styles.featureItem}>
-                            <Ionicons name="checkmark" size={16} color={successColor} />
-                            <Text style={[styles.featureText, { color: textColor }]}>{feature}</Text>
-                        </View>
+                        <BenefitRow
+                            key={index}
+                            icon={<Ionicons name="checkmark" size={18} color={colors.success} />}
+                            label={feature}
+                        />
                     ))}
-                </View>
+                </BenefitList>
 
                 {isCurrentPlan ? (
-                    <View style={[styles.currentPlanButton, { backgroundColor: successColor }]}>
-                        <Text style={styles.currentPlanText}>{t('premium.plan.current') || 'Current Plan'}</Text>
-                    </View>
+                    <Button
+                        variant="secondary"
+                        disabled
+                        icon={<Ionicons name="checkmark-circle" size={18} color={colors.success} />}
+                        accessibilityLabel={t('premium.plan.current') || 'Current Plan'}
+                        className="w-full"
+                    >
+                        {t('premium.plan.current') || 'Current Plan'}
+                    </Button>
                 ) : !availability.available ? (
-                    <View style={[styles.unavailablePlanButton, { backgroundColor: bloomTheme.colors.border }]}>
-                        <Text style={[styles.unavailablePlanText, { color: bloomTheme.colors.textTertiary }]}>
-                            {t('premium.plan.notAvailableInApp') || 'Not Available in Current App'}
-                        </Text>
-                    </View>
+                    <Button
+                        variant="secondary"
+                        disabled
+                        accessibilityLabel={t('premium.plan.notAvailableInApp') || 'Not Available in Current App'}
+                        className="w-full"
+                    >
+                        {t('premium.plan.notAvailableInApp') || 'Not Available in Current App'}
+                    </Button>
                 ) : (
-                    <TouchableOpacity
-                        style={[
-                            styles.selectPlanButton,
-                            { backgroundColor: plan.isPopular ? primaryColor : borderColor }
-                        ]}
+                    <Button
+                        variant={plan.isPopular ? 'primary' : 'secondary'}
                         onPress={() => handleSubscribe(plan.id)}
                         disabled={processingPayment}
+                        loading={processingPayment && isSelected}
+                        accessibilityLabel={t('premium.actions.subscribeTo', { name: plan.name }) || `Subscribe to ${plan.name}`}
+                        className="w-full"
                     >
-                        {processingPayment ? (
-                            <ActivityIndicator color={bloomTheme.colors.negativeForeground} size="small" />
-                        ) : (
-                            <Text style={[
-                                styles.selectPlanText,
-                                { color: plan.isPopular ? bloomTheme.colors.negativeForeground : textColor }
-                            ]}>
-                                {t('premium.actions.subscribeTo', { name: plan.name }) || `Subscribe to ${plan.name}`}
-                            </Text>
-                        )}
-                    </TouchableOpacity>
+                        {t('premium.actions.subscribeTo', { name: plan.name }) || `Subscribe to ${plan.name}`}
+                    </Button>
                 )}
             </View>
         );
     };
 
     const renderTabNavigation = () => (
-        <View style={styles.section}>
-            <View style={[styles.tabContainer, { borderBottomColor: borderColor }]}>
-                <TouchableOpacity
-                    style={[
-                        styles.tab,
-                        activeTab === 'plans' && { borderBottomColor: primaryColor, borderBottomWidth: 2 }
-                    ]}
-                    onPress={() => setActiveTab('plans')}
-                >
-                    <Text style={[
-                        styles.tabText,
-                        { color: activeTab === 'plans' ? primaryColor : textColor }
-                    ]}>
+        <View className="mb-space-24">
+            <SegmentedControl<ActiveTab>
+                label={t('premium.tabs.label') || 'Subscription type'}
+                type="tabs"
+                value={activeTab}
+                onChange={setActiveTab}
+            >
+                <SegmentedControlItem value={TAB_PLANS}>
+                    <SegmentedControlItemText>
                         {t('premium.tabs.plans') || 'Full Plans'}
-                    </Text>
-                </TouchableOpacity>
-
-                <TouchableOpacity
-                    style={[
-                        styles.tab,
-                        activeTab === 'features' && { borderBottomColor: primaryColor, borderBottomWidth: 2 }
-                    ]}
-                    onPress={() => setActiveTab('features')}
-                >
-                    <Text style={[
-                        styles.tabText,
-                        { color: activeTab === 'features' ? primaryColor : textColor }
-                    ]}>
+                    </SegmentedControlItemText>
+                </SegmentedControlItem>
+                <SegmentedControlItem value={TAB_FEATURES}>
+                    <SegmentedControlItemText>
                         {t('premium.tabs.features') || 'Individual Features'}
-                    </Text>
-                </TouchableOpacity>
-            </View>
+                    </SegmentedControlItemText>
+                </SegmentedControlItem>
+            </SegmentedControl>
         </View>
     );
 
     const renderFeatureCard = (feature: IndividualFeature) => {
-        const pricing = formatPrice(feature.price, feature.currency, feature.interval);
+        const pricing = formatPrice(feature.price, feature.interval);
         const isSubscribed = feature.isSubscribed;
         const isIncludedInCurrentPlan = feature.isIncludedInCurrentPlan;
         const canPurchase = feature.canBePurchasedSeparately && !isIncludedInCurrentPlan;
 
         const getCategoryColor = (category: string) => {
             switch (category) {
-                case 'analytics': return bloomTheme.colors.warning;
-                case 'customization': return bloomTheme.colors.secondary;
-                case 'content': return bloomTheme.colors.success;
-                case 'networking': return bloomTheme.colors.info;
-                case 'productivity': return bloomTheme.colors.error;
-                default: return primaryColor;
+                case 'analytics': return colors.warning;
+                case 'customization': return colors.secondary;
+                case 'content': return colors.success;
+                case 'networking': return colors.info;
+                case 'productivity': return colors.error;
+                default: return colors.primary;
             }
         };
 
-        const getCategoryIcon = (category: string) => {
+        const getCategoryIcon = (category: string): IoniconName => {
             switch (category) {
                 case 'analytics': return 'analytics';
                 case 'customization': return 'color-palette';
@@ -866,126 +837,141 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
             if (feature.appScope === 'ecosystem') {
                 return t('premium.feature.scope.allApps');
             }
-                return t('premium.feature.scope.availableIn', { apps: feature.applicableApps.join(', ') }) || `Available in: ${feature.applicableApps.join(', ')}`;
+            return t('premium.feature.scope.availableIn', { apps: feature.applicableApps.join(', ') }) || `Available in: ${feature.applicableApps.join(', ')}`;
         };
 
         return (
             <View
                 key={feature.id}
-                style={[
-                    styles.featureCard,
-                    { backgroundColor: secondaryBackgroundColor, borderColor },
-                    isSubscribed && { borderColor: successColor, borderWidth: 2 },
-                    isIncludedInCurrentPlan && { borderColor: primaryColor, borderWidth: 2 }
-                ]}
+                className="bg-fill border border-border-image rounded-radius-12 p-space-16 mb-space-12 shadow-s"
+                style={
+                    isIncludedInCurrentPlan
+                        ? { borderColor: colors.primary, borderWidth: 2 }
+                        : isSubscribed
+                            ? { borderColor: colors.success, borderWidth: 2 }
+                            : undefined
+                }
             >
-                <View style={styles.featureHeader}>
-                    <View style={styles.featureIconContainer}>
+                <View className="flex-row items-start mb-space-12">
+                    <View
+                        className="bg-fill-secondary rounded-radius-max items-center justify-center mr-space-12"
+                        style={{ width: 40, height: 40 }}
+                    >
                         <Ionicons
-                            name={getCategoryIcon(feature.category) as React.ComponentProps<typeof Ionicons>['name']}
+                            name={getCategoryIcon(feature.category)}
                             size={24}
                             color={getCategoryColor(feature.category)}
                         />
                     </View>
-                    <View style={styles.featureInfo}>
-                        <View style={styles.featureNameRow}>
-                            <Text style={[styles.featureName, { color: textColor }]}>{feature.name}</Text>
+                    <View className="flex-1">
+                        <View className="flex-row items-center justify-between mb-space-4">
+                            <H5 className="text-text flex-1 pr-space-8" numberOfLines={1}>{feature.name}</H5>
                             {isIncludedInCurrentPlan && (
-                                <View style={[styles.includedBadge, { backgroundColor: primaryColor }]}>
-                                    <Text style={styles.includedBadgeText}>Included</Text>
-                                </View>
+                                <Chip variant="solid" color="primary" size="small">
+                                    {t('premium.feature.included') || 'Included'}
+                                </Chip>
                             )}
                         </View>
-                        <Text style={[styles.featureDescription, { color: bloomTheme.colors.textSecondary }]}>
+                        <Text className="text-text-secondary text-sm">
                             {feature.description}
                         </Text>
-                        <Text style={[styles.appScopeText, { color: bloomTheme.colors.textTertiary }]}>
+                        <Text className="text-text-tertiary text-xs mt-space-4 italic">
                             {getAppScopeText()}
                         </Text>
                     </View>
                 </View>
 
                 {!isIncludedInCurrentPlan && (
-                    <View style={styles.featurePricing}>
-                        <Text style={[styles.featurePrice, { color: textColor }]}>
-                            {pricing.formatted}
-                        </Text>
-                        <Text style={[styles.featureInterval, { color: bloomTheme.colors.textSecondary }]}>
+                    <View className="items-center mb-space-16">
+                        <H4 className="text-text">{pricing.formatted}</H4>
+                        <Text className="text-text-secondary text-sm mt-space-2">
                             {t('premium.plan.perInterval', { interval: pricing.interval }) || `per ${pricing.interval}`}
                         </Text>
                     </View>
                 )}
 
                 {isIncludedInCurrentPlan ? (
-                    <View style={[styles.includedInPlanButton, { backgroundColor: primaryColor }]}>
-                        <Ionicons name="checkmark-circle" size={16} color={bloomTheme.colors.negativeForeground} />
-                        <Text style={styles.includedInPlanText}>{t('premium.feature.includedInPlan') || 'Included in your plan'}</Text>
-                    </View>
+                    <Button
+                        variant="primary"
+                        disabled
+                        icon={<Ionicons name="checkmark-circle" size={16} color={colors.primaryForeground} />}
+                        accessibilityLabel={t('premium.feature.includedInPlan') || 'Included in your plan'}
+                        className="w-full"
+                    >
+                        {t('premium.feature.includedInPlan') || 'Included in your plan'}
+                    </Button>
                 ) : isSubscribed ? (
-                    <View style={styles.featureActions}>
-                        <View style={[styles.subscribedButton, { backgroundColor: successColor }]}>
-                            <Ionicons name="checkmark" size={16} color={bloomTheme.colors.negativeForeground} />
-                            <Text style={styles.subscribedText}>{t('premium.feature.subscribed') || 'Subscribed'}</Text>
-                        </View>
-                        <TouchableOpacity
-                            style={[styles.unsubscribeButton, { borderColor: dangerColor }]}
+                    <View className="flex-row gap-space-8">
+                        <Button
+                            variant="secondary"
+                            disabled
+                            icon={<Ionicons name="checkmark" size={16} color={colors.success} />}
+                            accessibilityLabel={t('premium.feature.subscribed') || 'Subscribed'}
+                            className="flex-1"
+                        >
+                            {t('premium.feature.subscribed') || 'Subscribed'}
+                        </Button>
+                        <Button
+                            variant="outline"
                             onPress={() => confirmFeatureUnsubscribe(feature.id)}
+                            accessibilityLabel={t('premium.actions.unsubscribe') || 'Unsubscribe'}
+                            className="flex-1"
                         >
-                            <Text style={[styles.unsubscribeText, { color: dangerColor }]}>{t('premium.actions.unsubscribe') || 'Unsubscribe'}</Text>
-                        </TouchableOpacity>
+                            {t('premium.actions.unsubscribe') || 'Unsubscribe'}
+                        </Button>
                     </View>
                 ) : canPurchase ? (
-                    <TouchableOpacity
-                        style={[styles.subscribeFeatureButton, { backgroundColor: primaryColor }]}
+                    <Button
+                        variant="primary"
                         onPress={() => handleFeatureSubscribe(feature.id)}
                         disabled={processingPayment}
+                        loading={processingPayment}
+                        accessibilityLabel={t('premium.actions.subscribe') || 'Subscribe'}
+                        className="w-full"
                     >
-                        {processingPayment ? (
-                            <ActivityIndicator color={bloomTheme.colors.negativeForeground} size="small" />
-                        ) : (
-                            <Text style={styles.subscribeFeatureText}>{t('premium.actions.subscribe') || 'Subscribe'}</Text>
-                        )}
-                    </TouchableOpacity>
+                        {t('premium.actions.subscribe') || 'Subscribe'}
+                    </Button>
                 ) : (
-                    <View style={[styles.unavailableButton, { backgroundColor: bloomTheme.colors.border }]}>
-                        <Text style={[styles.unavailableText, { color: bloomTheme.colors.textTertiary }]}>
-                            Only available in subscription plans
-                        </Text>
-                    </View>
+                    <Button
+                        variant="secondary"
+                        disabled
+                        accessibilityLabel={t('premium.feature.plansOnly') || 'Only available in subscription plans'}
+                        className="w-full"
+                    >
+                        {t('premium.feature.plansOnly') || 'Only available in subscription plans'}
+                    </Button>
                 )}
             </View>
         );
     };
 
-    const renderIndividualFeatures = () => {
-        const categories = ['analytics', 'customization', 'content', 'networking', 'productivity'];
-
-        return (
-            <View style={styles.section}>
-                <Text style={[styles.sectionTitle, { color: textColor }]}>Individual Features</Text>
-                <Text style={[styles.sectionSubtitle, { color: bloomTheme.colors.textSecondary }]}>
-                    Subscribe to specific features you need. Some features are included in subscription plans.
-                </Text>
-
-                {categories.map(category => {
-                    const categoryFeatures = individualFeatures.filter(f => f.category === category);
-                    if (categoryFeatures.length === 0) return null;
-
-                    return (
-                        <View key={category} style={styles.categorySection}>
-                            <Text style={[styles.categoryTitle, { color: textColor }]}>
-                                {category.charAt(0).toUpperCase() + category.slice(1)}
-                            </Text>
-                            {categoryFeatures.map(renderFeatureCard)}
-                        </View>
-                    );
-                })}
-            </View>
-        );
-    };
+    const renderIndividualFeatures = () => (
+        <View className="mb-space-24">
+            <H4 className="text-text mb-space-8">
+                {t('premium.features.title') || 'Individual Features'}
+            </H4>
+            <Text className="text-text-secondary text-base mb-space-16">
+                {t('premium.features.subtitle') || 'Subscribe to specific features you need. Some features are included in subscription plans.'}
+            </Text>
+
+            {FEATURE_CATEGORIES.map(category => {
+                const categoryFeatures = individualFeatures.filter(f => f.category === category);
+                if (categoryFeatures.length === 0) return null;
+
+                return (
+                    <View key={category} className="mb-space-24">
+                        <H5 className="text-text mb-space-12">
+                            {category.charAt(0).toUpperCase() + category.slice(1)}
+                        </H5>
+                        {categoryFeatures.map(renderFeatureCard)}
+                    </View>
+                );
+            })}
+        </View>
+    );
 
-    // Add this for testing different app contexts (remove in production)
-    const [showAppSwitcher, setShowAppSwitcher] = useState(__DEV__); // Only show in development
+    // Show different app contexts for testing (development only).
+    const [showAppSwitcher] = useState(__DEV__);
 
     const renderAppSwitcher = () => {
         if (!showAppSwitcher) return null;
@@ -993,33 +979,21 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
         const testApps = ['mention', 'oxy-social', 'oxy-workspace', 'oxy-creator'];
 
         return (
-            <View style={[styles.appSwitcher, { backgroundColor: bloomTheme.colors.backgroundSecondary, borderColor }]}>
-                <Text style={[styles.appSwitcherTitle, { color: textColor }]}>
-                    🧪 Test App Context (Dev Only)
+            <View className="bg-fill-secondary border border-border-image rounded-radius-12 p-space-16 mb-space-24">
+                <Text className="text-text-secondary text-sm font-medium mb-space-12">
+                    {t('premium.dev.appContext') || 'Test App Context (Dev Only)'}
                 </Text>
                 <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-                    <View style={styles.appSwitcherButtons}>
+                    <View className="flex-row gap-space-8">
                         {testApps.map(app => (
-                            <TouchableOpacity
+                            <Chip
                                 key={app}
-                                style={[
-                                    styles.appSwitcherButton,
-                                    {
-                                        backgroundColor: currentAppPackage === app ? primaryColor : 'transparent',
-                                        borderColor: primaryColor,
-                                    }
-                                ]}
-                                onPress={() => {
-                                    setCurrentAppPackage(app);
-                                }}
+                                variant={currentAppPackage === app ? 'solid' : 'outlined'}
+                                color="primary"
+                                onPress={() => setCurrentAppPackage(app)}
                             >
-                                <Text style={[
-                                    styles.appSwitcherButtonText,
-                                    { color: currentAppPackage === app ? bloomTheme.colors.negativeForeground : textColor }
-                                ]}>
-                                    {app}
-                                </Text>
-                            </TouchableOpacity>
+                                {app}
+                            </Chip>
                         ))}
                     </View>
                 </ScrollView>
@@ -1029,85 +1003,116 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
     if (loading) {
         return (
-            <View style={[styles.container, { backgroundColor, justifyContent: 'center' }]}>
-                <ActivityIndicator size="large" color={primaryColor} />
-                <Text style={[styles.loadingText, { color: textColor }]}>{t('premium.loading') || 'Loading subscription plans...'}</Text>
+            <View className="flex-1 bg-bg">
+                <Header
+                    title={t('premium.title') || 'Oxy+ Subscriptions'}
+                    subtitle={t('premium.forApp', { app: getAppDisplayName(currentAppPackage) }) || `for ${getAppDisplayName(currentAppPackage)}`}
+                    onBack={goBack || onClose}
+                    onClose={onClose}
+                    showCloseButton={!!onClose}
+                    elevation="subtle"
+                />
+                <View className="flex-1 items-center justify-center px-screen-margin">
+                    <ActivityIndicator size="large" color={colors.primary} />
+                    <Text className="text-text-secondary text-base text-center mt-space-16">
+                        {t('premium.loading') || 'Loading subscription plans...'}
+                    </Text>
+                </View>
             </View>
         );
     }
 
     return (
-        <View style={[styles.container, { backgroundColor }]}>
-            {renderHeader()}
-            {renderAppSwitcher()}
-
-            <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
-                {subscription && renderCurrentSubscription()}
-
-                {!subscription && (
-                    <View style={styles.section}>
-                        <Text style={[styles.sectionTitle, { color: textColor }]}>{t('premium.choosePlan') || 'Choose Your Plan'}</Text>
-                        <Text style={[styles.sectionSubtitle, { color: bloomTheme.colors.textSecondary }]}>
-                            {t('premium.choosePlanSubtitle') || 'Unlock premium features and take your experience to the next level'}
-                        </Text>
-                    </View>
-                )}
-
-                {!subscription && renderTabNavigation()}
+        <View className="flex-1 bg-bg">
+            <Header
+                title={t('premium.title') || 'Oxy+ Subscriptions'}
+                subtitle={t('premium.forApp', { app: getAppDisplayName(currentAppPackage) }) || `for ${getAppDisplayName(currentAppPackage)}`}
+                onBack={goBack || onClose}
+                onClose={onClose}
+                showCloseButton={!!onClose}
+                elevation="subtle"
+            />
 
-                {!subscription && activeTab === 'plans' && renderBillingToggle()}
+            <ScrollView
+                className="flex-1"
+                contentContainerClassName="px-screen-margin pb-space-32"
+                showsVerticalScrollIndicator={false}
+            >
+                <View className="pt-space-20">
+                    {renderAppSwitcher()}
+
+                    {subscription && renderCurrentSubscription()}
+
+                    {!subscription && (
+                        <View className="mb-space-24">
+                            <H2 className="text-text mb-space-8">
+                                {t('premium.choosePlan') || 'Choose Your Plan'}
+                            </H2>
+                            <Text className="text-text-secondary text-base">
+                                {t('premium.choosePlanSubtitle') || 'Unlock premium features and take your experience to the next level'}
+                            </Text>
+                        </View>
+                    )}
 
-                {activeTab === 'plans' ? (
-                    <View style={styles.section}>
-                        {!subscription && (
-                            <Text style={[styles.sectionTitle, { color: textColor }]}>{t('premium.availablePlans') || 'Available Plans'}</Text>
-                        )}
+                    {!subscription && renderTabNavigation()}
 
-                        {plans.map(renderPlanCard)}
-                    </View>
-                ) : (
-                    renderIndividualFeatures()
-                )}
+                    {!subscription && activeTab === TAB_PLANS && renderBillingToggle()}
 
-                {/* Features Comparison */}
-                <View style={styles.section}>
-                    <Text style={[styles.sectionTitle, { color: textColor }]}>{t('premium.why') || 'Why Go Premium?'}</Text>
-
-                    <View style={[styles.benefitsCard, { backgroundColor: secondaryBackgroundColor, borderColor }]}>
-                        <View style={styles.benefitItem}>
-                            <Ionicons name="flash" size={24} color={primaryColor} />
-                            <View style={styles.benefitContent}>
-                                <Text style={[styles.benefitTitle, { color: textColor }]}>{t('premium.benefits.performance.title') || 'Enhanced Performance'}</Text>
-                                <Text style={[styles.benefitDescription, { color: bloomTheme.colors.textSecondary }]}>
-                                    {t('premium.benefits.performance.desc') || 'Faster processing and priority access to our servers'}
-                                </Text>
-                            </View>
-                        </View>
+                    {activeTab === TAB_PLANS ? (
+                        <View className="mb-space-24">
+                            {!subscription && (
+                                <H4 className="text-text mb-space-12">
+                                    {t('premium.availablePlans') || 'Available Plans'}
+                                </H4>
+                            )}
 
-                        <View style={styles.benefitItem}>
-                            <Ionicons name="shield-checkmark" size={24} color={successColor} />
-                            <View style={styles.benefitContent}>
-                                <Text style={[styles.benefitTitle, { color: textColor }]}>{t('premium.benefits.security.title') || 'Advanced Security'}</Text>
-                                <Text style={[styles.benefitDescription, { color: bloomTheme.colors.textSecondary }]}>
-                                    {t('premium.benefits.security.desc') || 'Enhanced encryption and security features'}
-                                </Text>
-                            </View>
+                            {plans.map(renderPlanCard)}
                         </View>
+                    ) : (
+                        renderIndividualFeatures()
+                    )}
 
-                        <View style={styles.benefitItem}>
-                            <Ionicons name="headset" size={24} color={warningColor} />
-                            <View style={styles.benefitContent}>
-                                <Text style={[styles.benefitTitle, { color: textColor }]}>{t('premium.benefits.support.title') || 'Priority Support'}</Text>
-                                <Text style={[styles.benefitDescription, { color: bloomTheme.colors.textSecondary }]}>
-                                    {t('premium.benefits.support.desc') || 'Get help faster with our premium support team'}
-                                </Text>
-                            </View>
-                        </View>
+                    {/* Why go premium */}
+                    <View className="mb-space-24">
+                        <H4 className="text-text mb-space-12">
+                            {t('premium.why') || 'Why Go Premium?'}
+                        </H4>
+
+                        <BenefitList>
+                            {([
+                                {
+                                    icon: 'flash' as IoniconName,
+                                    color: colors.primary,
+                                    title: t('premium.benefits.performance.title') || 'Enhanced Performance',
+                                    desc: t('premium.benefits.performance.desc') || 'Faster processing and priority access to our servers',
+                                },
+                                {
+                                    icon: 'shield-checkmark' as IoniconName,
+                                    color: colors.success,
+                                    title: t('premium.benefits.security.title') || 'Advanced Security',
+                                    desc: t('premium.benefits.security.desc') || 'Enhanced encryption and security features',
+                                },
+                                {
+                                    icon: 'headset' as IoniconName,
+                                    color: colors.warning,
+                                    title: t('premium.benefits.support.title') || 'Priority Support',
+                                    desc: t('premium.benefits.support.desc') || 'Get help faster with our premium support team',
+                                },
+                            ]).map((benefit) => (
+                                <BenefitRow
+                                    key={benefit.title}
+                                    icon={<Ionicons name={benefit.icon} size={18} color={benefit.color} />}
+                                    accessibilityLabel={`${benefit.title}. ${benefit.desc}`}
+                                >
+                                    <Text className="text-text font-medium text-sm">{benefit.title}</Text>
+                                    {`\n${benefit.desc}`}
+                                </BenefitRow>
+                            ))}
+                        </BenefitList>
                     </View>
                 </View>
-
-                <View style={styles.bottomSpacing} />
             </ScrollView>
+
             <Dialog
                 control={cancelSubscriptionDialog}
                 title={t('premium.confirms.cancelSubTitle') || 'Cancel Subscription'}
@@ -1130,462 +1135,4 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
     );
 };
 
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    header: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 20,
-        paddingTop: 20,
-        paddingBottom: 16,
-        borderBottomWidth: 1,
-    },
-    backButton: {
-        padding: 8,
-    },
-    headerTitle: {
-        fontSize: 20,
-        fontWeight: '600',
-    },
-    headerTitleContainer: {
-        flex: 1,
-        alignItems: 'center',
-    },
-    currentAppText: {
-        fontSize: 14,
-        marginTop: 2,
-        fontStyle: 'italic',
-    },
-    closeButton: {
-        padding: 8,
-    },
-    content: {
-        flex: 1,
-    },
-    section: {
-        padding: 20,
-    },
-    sectionTitle: {
-        fontSize: 24,
-        fontWeight: 'bold',
-        marginBottom: 8,
-    },
-    sectionSubtitle: {
-        fontSize: 16,
-        lineHeight: 22,
-    },
-    loadingText: {
-        fontSize: 16,
-        textAlign: 'center',
-        marginTop: 16,
-    },
-    currentSubscriptionCard: {
-        borderRadius: 16,
-        padding: 20,
-        borderWidth: 1,
-    },
-    subscriptionHeader: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'flex-start',
-        marginBottom: 12,
-    },
-    planName: {
-        fontSize: 20,
-        fontWeight: 'bold',
-        marginBottom: 4,
-    },
-    planPrice: {
-        fontSize: 16,
-        fontWeight: '600',
-    },
-    statusBadge: {
-        paddingHorizontal: 12,
-        paddingVertical: 4,
-        borderRadius: 12,
-    },
-    statusText: {
-        color: '#FFFFFF',
-        fontSize: 12,
-        fontWeight: '600',
-    },
-    subscriptionDetail: {
-        fontSize: 14,
-        marginBottom: 16,
-    },
-    cancelNotice: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        padding: 12,
-        backgroundColor: 'rgba(255, 149, 0, 0.1)',
-        borderRadius: 8,
-        marginBottom: 16,
-    },
-    cancelText: {
-        fontSize: 14,
-        marginLeft: 8,
-        flex: 1,
-    },
-    subscriptionActions: {
-        flexDirection: 'row',
-        gap: 12,
-    },
-    actionButton: {
-        flex: 1,
-        paddingVertical: 12,
-        paddingHorizontal: 16,
-        borderRadius: 8,
-        alignItems: 'center',
-    },
-    secondaryButton: {
-        backgroundColor: 'transparent',
-        borderWidth: 1,
-    },
-    actionButtonText: {
-        color: '#FFFFFF',
-        fontSize: 14,
-        fontWeight: '600',
-    },
-    billingToggle: {
-        flexDirection: 'row',
-        backgroundColor: 'rgba(0, 0, 0, 0.05)',
-        borderRadius: 8,
-        padding: 4,
-        marginBottom: 12,
-    },
-    billingOption: {
-        flex: 1,
-        paddingVertical: 12,
-        borderRadius: 6,
-        alignItems: 'center',
-    },
-    billingOptionText: {
-        fontSize: 16,
-        fontWeight: '600',
-    },
-    savingsText: {
-        fontSize: 14,
-        textAlign: 'center',
-        fontWeight: '600',
-    },
-    planCard: {
-        borderRadius: 16,
-        padding: 20,
-        marginBottom: 16,
-        borderWidth: 1,
-        position: 'relative',
-    },
-    popularPlan: {
-        borderWidth: 2,
-    },
-    popularBadge: {
-        position: 'absolute',
-        top: -1,
-        left: 20,
-        right: 20,
-        paddingVertical: 8,
-        borderTopLeftRadius: 16,
-        borderTopRightRadius: 16,
-        alignItems: 'center',
-    },
-    popularText: {
-        color: '#FFFFFF',
-        fontSize: 12,
-        fontWeight: 'bold',
-    },
-    planHeader: {
-        marginBottom: 16,
-        marginTop: 16,
-    },
-    planDescription: {
-        fontSize: 14,
-        lineHeight: 20,
-    },
-    planAppScope: {
-        fontSize: 12,
-        fontStyle: 'italic',
-        marginTop: 4,
-    },
-    planPricing: {
-        flexDirection: 'row',
-        alignItems: 'baseline',
-        marginBottom: 20,
-    },
-    planInterval: {
-        fontSize: 14,
-        marginLeft: 4,
-    },
-    planFeatures: {
-        marginBottom: 24,
-    },
-    featureItem: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginBottom: 8,
-    },
-    featureText: {
-        fontSize: 14,
-        marginLeft: 8,
-        flex: 1,
-    },
-    selectPlanButton: {
-        paddingVertical: 16,
-        borderRadius: 12,
-        alignItems: 'center',
-    },
-    selectPlanText: {
-        fontSize: 16,
-        fontWeight: '600',
-    },
-    currentPlanButton: {
-        paddingVertical: 16,
-        borderRadius: 12,
-        alignItems: 'center',
-    },
-    currentPlanText: {
-        color: '#FFFFFF',
-        fontSize: 16,
-        fontWeight: '600',
-    },
-    benefitsCard: {
-        borderRadius: 16,
-        padding: 20,
-        borderWidth: 1,
-    },
-    benefitItem: {
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        marginBottom: 20,
-    },
-    benefitContent: {
-        marginLeft: 16,
-        flex: 1,
-    },
-    benefitTitle: {
-        fontSize: 16,
-        fontWeight: '600',
-        marginBottom: 4,
-    },
-    benefitDescription: {
-        fontSize: 14,
-        lineHeight: 20,
-    },
-    bottomSpacing: {
-        height: 40,
-    },
-    tabContainer: {
-        flexDirection: 'row',
-        borderBottomWidth: 1,
-        marginBottom: 20,
-    },
-    tab: {
-        flex: 1,
-        paddingVertical: 12,
-        paddingHorizontal: 16,
-        alignItems: 'center',
-    },
-    tabText: {
-        fontSize: 16,
-        fontWeight: '600',
-    },
-    featureCard: {
-        borderRadius: 12,
-        borderWidth: 1,
-        padding: 16,
-        marginBottom: 12,
-    },
-    featureHeader: {
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        marginBottom: 12,
-    },
-    featureIconContainer: {
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        backgroundColor: 'rgba(0, 122, 255, 0.1)',
-        justifyContent: 'center',
-        alignItems: 'center',
-        marginRight: 12,
-    },
-    featureInfo: {
-        flex: 1,
-    },
-    featureName: {
-        fontSize: 16,
-        fontWeight: '600',
-        marginBottom: 4,
-    },
-    featureDescription: {
-        fontSize: 14,
-        lineHeight: 20,
-    },
-    featurePricing: {
-        alignItems: 'center',
-        marginBottom: 16,
-    },
-    featurePrice: {
-        fontSize: 20,
-        fontWeight: 'bold',
-    },
-    featureInterval: {
-        fontSize: 14,
-        marginTop: 2,
-    },
-    featureActions: {
-        flexDirection: 'row',
-        gap: 8,
-    },
-    subscribedButton: {
-        flex: 1,
-        flexDirection: 'row',
-        justifyContent: 'center',
-        alignItems: 'center',
-        paddingVertical: 12,
-        borderRadius: 8,
-        gap: 6,
-    },
-    subscribedText: {
-        color: '#FFFFFF',
-        fontSize: 16,
-        fontWeight: '600',
-    },
-    unsubscribeButton: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        paddingVertical: 12,
-        borderRadius: 8,
-        borderWidth: 1,
-    },
-    unsubscribeText: {
-        fontSize: 16,
-        fontWeight: '600',
-    },
-    subscribeFeatureButton: {
-        justifyContent: 'center',
-        alignItems: 'center',
-        paddingVertical: 12,
-        borderRadius: 8,
-    },
-    subscribeFeatureText: {
-        color: '#FFFFFF',
-        fontSize: 16,
-        fontWeight: '600',
-    },
-    categorySection: {
-        marginBottom: 24,
-    },
-    categoryTitle: {
-        fontSize: 18,
-        fontWeight: '600',
-        marginBottom: 12,
-    },
-    featureNameRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginBottom: 4,
-    },
-    includedBadge: {
-        paddingHorizontal: 8,
-        paddingVertical: 2,
-        borderRadius: 12,
-        marginLeft: 8,
-    },
-    includedBadgeText: {
-        color: '#FFFFFF',
-        fontSize: 10,
-        fontWeight: '600',
-        textTransform: 'uppercase',
-    },
-    appScopeText: {
-        fontSize: 12,
-        marginTop: 4,
-        fontStyle: 'italic',
-    },
-    includedInPlanButton: {
-        flexDirection: 'row',
-        justifyContent: 'center',
-        alignItems: 'center',
-        paddingVertical: 12,
-        borderRadius: 8,
-        gap: 6,
-    },
-    includedInPlanText: {
-        color: '#FFFFFF',
-        fontSize: 14,
-        fontWeight: '600',
-    },
-    unavailableButton: {
-        justifyContent: 'center',
-        alignItems: 'center',
-        paddingVertical: 12,
-        borderRadius: 8,
-    },
-    unavailableText: {
-        fontSize: 14,
-        fontWeight: '500',
-        textAlign: 'center',
-    },
-    appSpecificBadge: {
-        position: 'absolute',
-        top: 16,
-        right: 16,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderRadius: 12,
-        zIndex: 1,
-    },
-    appSpecificText: {
-        color: '#FFFFFF',
-        fontSize: 12,
-        fontWeight: '600',
-    },
-    planRestrictionText: {
-        fontSize: 12,
-        fontWeight: '500',
-        marginTop: 4,
-        fontStyle: 'italic',
-    },
-    unavailablePlanButton: {
-        paddingVertical: 16,
-        borderRadius: 12,
-        alignItems: 'center',
-    },
-    unavailablePlanText: {
-        fontSize: 16,
-        fontWeight: '600',
-    },
-    appSwitcher: {
-        padding: 16,
-        borderBottomWidth: 1,
-        margin: 16,
-        borderRadius: 12,
-        borderWidth: 1,
-    },
-    appSwitcherTitle: {
-        fontSize: 14,
-        fontWeight: '600',
-        marginBottom: 12,
-    },
-    appSwitcherButtons: {
-        flexDirection: 'row',
-        gap: 8,
-    },
-    appSwitcherButton: {
-        paddingHorizontal: 12,
-        paddingVertical: 6,
-        borderRadius: 8,
-        borderWidth: 1,
-    },
-    appSwitcherButtonText: {
-        fontSize: 12,
-        fontWeight: '500',
-    },
-});
-
 export default PremiumSubscriptionScreen;