@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/screens/PremiumSubscriptionScreen.js

@@ -0,0 +1,1080 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const fonts_1 = require("../styles/fonts");
+const sonner_1 = require("../../lib/sonner");
+const confirmAction_1 = require("../utils/confirmAction");
+const vector_icons_1 = require("@expo/vector-icons");
+const useI18n_1 = require("../hooks/useI18n");
+const useThemeStyles_1 = require("../hooks/useThemeStyles");
+const themeUtils_1 = require("../utils/themeUtils");
+const useColorScheme_1 = require("../hooks/useColorScheme");
+const OxyContext_1 = require("../context/OxyContext");
+const PremiumSubscriptionScreen = ({ onClose, theme, navigate, goBack, }) => {
+    // Use useOxy() hook for OxyContext values
+    const { user, oxyServices } = (0, OxyContext_1.useOxy)();
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [subscription, setSubscription] = (0, react_1.useState)(null);
+    const [plans, setPlans] = (0, react_1.useState)([]);
+    const [individualFeatures, setIndividualFeatures] = (0, react_1.useState)([]);
+    const [selectedPlan, setSelectedPlan] = (0, react_1.useState)(null);
+    const [processingPayment, setProcessingPayment] = (0, react_1.useState)(false);
+    const [billingInterval, setBillingInterval] = (0, react_1.useState)('month');
+    const [activeTab, setActiveTab] = (0, react_1.useState)('plans');
+    const [currentAppPackage, setCurrentAppPackage] = (0, react_1.useState)('mention'); // Default to mention for demo
+    const { t } = (0, useI18n_1.useI18n)();
+    const colorScheme = (0, useColorScheme_1.useColorScheme)();
+    const normalizedTheme = (0, themeUtils_1.normalizeTheme)(theme);
+    const themeStyles = (0, useThemeStyles_1.useThemeStyles)(normalizedTheme, colorScheme);
+    // Extract commonly used colors for readability
+    const { textColor, backgroundColor, secondaryBackgroundColor, borderColor, primaryColor, successColor, dangerColor, isDarkTheme } = themeStyles;
+    const warningColor = '#FF9500';
+    // TODO: Replace mock data with actual API integration
+    // Should fetch plans from oxyServices.getSubscriptionPlans() and individual features from oxyServices.getIndividualFeatures()
+    // Oxy+ subscription plans
+    const mockPlans = [
+        {
+            id: 'mention-plus',
+            name: 'Mention+',
+            description: 'Enhanced features for better social experience',
+            price: 4.99,
+            currency: 'USD',
+            interval: 'month',
+            appScope: 'specific',
+            applicableApps: ['mention'], // Only available in mention app
+            features: [
+                'Undo posts option',
+                'Improved reading mode',
+                'Organize bookmarks into folders',
+                'Early access to select features',
+                'Edit posts capability',
+                'Enhanced customization options'
+            ],
+            includedFeatures: ['reading-mode-plus', 'custom-themes']
+        },
+        {
+            id: 'oxy-insider',
+            name: 'Oxy+ Insider',
+            description: 'Exclusive access to behind-the-scenes content',
+            price: 9.99,
+            currency: 'USD',
+            interval: 'month',
+            appScope: 'ecosystem',
+            applicableApps: ['mention', 'oxy-social', 'oxy-workspace', 'oxy-creator'],
+            features: [
+                'Everything in Mention+',
+                'Behind-the-scenes updates from creators',
+                'Early access to new features',
+                'Dedicated support team',
+                'Exclusive content access',
+                'Beta feature testing'
+            ],
+            includedFeatures: ['reading-mode-plus', 'custom-themes', 'analytics-basic'],
+            isPopular: true
+        },
+        {
+            id: 'oxy-connect',
+            name: 'Oxy+ Connect',
+            description: 'Advanced networking and community features',
+            price: 14.99,
+            currency: 'USD',
+            interval: 'month',
+            appScope: 'ecosystem',
+            applicableApps: ['mention', 'oxy-social', 'oxy-workspace', 'oxy-creator'],
+            features: [
+                'Everything in Oxy+ Insider',
+                'Create and join private groups',
+                'Advanced search and filtering tools',
+                'Customizable profile highlighting',
+                'Enhanced connection features',
+                'Priority in community events'
+            ],
+            includedFeatures: ['reading-mode-plus', 'custom-themes', 'analytics-basic', 'group-management']
+        },
+        {
+            id: 'oxy-premium',
+            name: 'Oxy+ Premium',
+            description: 'Complete premium experience with all perks',
+            price: 24.99,
+            currency: 'USD',
+            interval: 'month',
+            appScope: 'ecosystem',
+            applicableApps: ['mention', 'oxy-social', 'oxy-workspace', 'oxy-creator', 'oxy-analytics'],
+            features: [
+                'Everything in Oxy+ Connect',
+                'Priority customer support',
+                'Access to premium content and events',
+                'Advanced analytics dashboard',
+                'VIP community status',
+                'Exclusive premium events'
+            ],
+            includedFeatures: ['reading-mode-plus', 'custom-themes', 'analytics-basic', 'analytics-advanced', 'group-management']
+        },
+        {
+            id: 'oxy-creator',
+            name: 'Oxy+ Creator',
+            description: 'Professional tools for content creators',
+            price: 39.99,
+            currency: 'USD',
+            interval: 'month',
+            appScope: 'ecosystem',
+            applicableApps: ['mention', 'oxy-social', 'oxy-workspace', 'oxy-creator', 'oxy-analytics', 'oxy-studio'],
+            features: [
+                'Everything in Oxy+ Premium',
+                'Advanced analytics and insights',
+                'Promotional tools and resources',
+                'Content monetization features',
+                'Creator support program',
+                'Revenue sharing opportunities'
+            ],
+            includedFeatures: ['reading-mode-plus', 'custom-themes', 'analytics-basic', 'analytics-advanced', 'group-management', 'creator-tools', 'monetization-features']
+        }
+    ];
+    // Individual feature subscriptions
+    const mockIndividualFeatures = [
+        {
+            id: 'analytics-basic',
+            name: 'Basic Analytics',
+            description: 'View post performance and engagement metrics',
+            price: 2.99,
+            currency: 'USD',
+            interval: 'month',
+            category: 'analytics',
+            appScope: 'ecosystem',
+            applicableApps: ['mention', 'oxy-social', 'oxy-workspace'],
+            canBePurchasedSeparately: true,
+            includedInPlans: ['oxy-insider', 'oxy-connect', 'oxy-premium', 'oxy-creator']
+        },
+        {
+            id: 'analytics-advanced',
+            name: 'Advanced Analytics',
+            description: 'Detailed insights, trends, and audience demographics',
+            price: 7.99,
+            currency: 'USD',
+            interval: 'month',
+            category: 'analytics',
+            appScope: 'ecosystem',
+            applicableApps: ['mention', 'oxy-social', 'oxy-workspace', 'oxy-creator', 'oxy-analytics'],
+            canBePurchasedSeparately: true,
+            includedInPlans: ['oxy-premium', 'oxy-creator']
+        },
+        {
+            id: 'custom-themes',
+            name: 'Custom Themes',
+            description: 'Personalize your app with custom colors and layouts',
+            price: 1.99,
+            currency: 'USD',
+            interval: 'month',
+            category: 'customization',
+            appScope: 'ecosystem',
+            applicableApps: ['mention', 'oxy-social', 'oxy-workspace', 'oxy-creator'],
+            canBePurchasedSeparately: false, // Included in all plans
+            includedInPlans: ['mention-plus', 'oxy-insider', 'oxy-connect', 'oxy-premium', 'oxy-creator']
+        },
+        {
+            id: 'reading-mode-plus',
+            name: 'Reading Mode Plus',
+            description: 'Enhanced reading experience with focus modes',
+            price: 1.99,
+            currency: 'USD',
+            interval: 'month',
+            category: 'content',
+            appScope: 'specific',
+            applicableApps: ['mention', 'oxy-social'],
+            canBePurchasedSeparately: false, // Included in all plans
+            includedInPlans: ['mention-plus', 'oxy-insider', 'oxy-connect', 'oxy-premium', 'oxy-creator']
+        },
+        {
+            id: 'group-management',
+            name: 'Group Management',
+            description: 'Create and manage private groups and communities',
+            price: 4.99,
+            currency: 'USD',
+            interval: 'month',
+            category: 'networking',
+            appScope: 'ecosystem',
+            applicableApps: ['mention', 'oxy-social', 'oxy-workspace'],
+            canBePurchasedSeparately: true,
+            includedInPlans: ['oxy-connect', 'oxy-premium', 'oxy-creator']
+        },
+        {
+            id: 'creator-tools',
+            name: 'Creator Tools Suite',
+            description: 'Professional content creation and editing tools',
+            price: 9.99,
+            currency: 'USD',
+            interval: 'month',
+            category: 'productivity',
+            appScope: 'specific',
+            applicableApps: ['oxy-creator', 'oxy-studio'],
+            canBePurchasedSeparately: true,
+            includedInPlans: ['oxy-creator']
+        },
+        {
+            id: 'monetization-features',
+            name: 'Monetization Features',
+            description: 'Revenue sharing, sponsorship tools, and creator fund access',
+            price: 12.99,
+            currency: 'USD',
+            interval: 'month',
+            category: 'productivity',
+            appScope: 'specific',
+            applicableApps: ['oxy-creator'],
+            canBePurchasedSeparately: true,
+            includedInPlans: ['oxy-creator']
+        },
+        {
+            id: 'workspace-collaboration',
+            name: 'Workspace Collaboration',
+            description: 'Advanced team features and project management tools',
+            price: 6.99,
+            currency: 'USD',
+            interval: 'month',
+            category: 'productivity',
+            appScope: 'specific',
+            applicableApps: ['oxy-workspace'],
+            canBePurchasedSeparately: true,
+            includedInPlans: ['oxy-premium', 'oxy-creator']
+        }
+    ];
+    (0, react_1.useEffect)(() => {
+        detectCurrentApp();
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (currentAppPackage) {
+            loadSubscriptionData();
+        }
+    }, [currentAppPackage, user?.isPremium]);
+    const detectCurrentApp = () => {
+        // In a real implementation, this would detect the actual app package name
+        // For now, we'll use a mock detection based on available methods
+        // Real app detection methods you could use:
+        // 1. Check bundle identifier in React Native: 
+        //    import DeviceInfo from 'react-native-device-info';
+        //    const bundleId = DeviceInfo.getBundleId();
+        //    Example: com.oxy.mention -> 'mention'
+        // 2. Environment variables or build configuration
+        //    const appPackage = __DEV__ ? process.env.APP_PACKAGE : 'mention';
+        // 3. Check specific app capabilities or modules
+        //    if (typeof MentionModule !== 'undefined') return 'mention';
+        //    if (typeof OxyWorkspaceModule !== 'undefined') return 'oxy-workspace';
+        // 4. Use build-time configuration with Metro or similar
+        //    const appPackage = require('../config/app.json').packageName;
+        // For demo purposes, we'll simulate different apps
+        // You would replace this with actual app detection logic
+        // IMPORTANT: This ensures subscription restrictions work properly:
+        // - Mention+ plan can only be subscribed to when app package == 'mention'
+        // - Other app-specific plans follow the same pattern
+        // - Ecosystem plans work across all apps
+        const detectedApp = 'mention'; // This would be dynamic in real implementation
+        setCurrentAppPackage(detectedApp);
+    };
+    const loadSubscriptionData = async () => {
+        try {
+            setLoading(true);
+            // Filter plans available for current app
+            const availablePlans = mockPlans.filter(plan => plan.applicableApps.includes(currentAppPackage));
+            setPlans(availablePlans);
+            // Mock current subscription
+            let currentSubscription = null;
+            if (user?.isPremium) {
+                currentSubscription = {
+                    id: 'sub_12345',
+                    planId: 'oxy-insider',
+                    status: 'active',
+                    currentPeriodStart: new Date().toISOString(),
+                    currentPeriodEnd: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
+                    cancelAtPeriodEnd: false
+                };
+                setSubscription(currentSubscription);
+            }
+            // Filter features available for current app and update based on current subscription
+            const availableFeatures = mockIndividualFeatures.filter(feature => feature.applicableApps.includes(currentAppPackage));
+            const updatedFeatures = availableFeatures.map(feature => {
+                const isIncludedInCurrentPlan = !!(currentSubscription &&
+                    feature.includedInPlans.includes(currentSubscription.planId));
+                return {
+                    ...feature,
+                    isIncludedInCurrentPlan,
+                    isSubscribed: !!isIncludedInCurrentPlan // Mock some individual subscriptions
+                };
+            });
+            setIndividualFeatures(updatedFeatures);
+        }
+        catch (error) {
+            if (__DEV__) {
+                console.error('Failed to load subscription data:', error);
+            }
+            sonner_1.toast.error('Failed to load subscription information');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handlePlanSelection = (planId) => {
+        setSelectedPlan(planId);
+    };
+    const handleSubscribe = async (planId) => {
+        try {
+            // Check if plan is available for current app
+            const selectedPlan = mockPlans.find(plan => plan.id === planId);
+            if (!selectedPlan?.applicableApps.includes(currentAppPackage)) {
+                sonner_1.toast.error(t('premium.toasts.planUnavailable', { app: currentAppPackage }) || `This plan is not available for the current app (${currentAppPackage})`);
+                return;
+            }
+            // Special restriction for Mention+ plan - only available in mention app
+            if (planId === 'mention-plus' && currentAppPackage !== 'mention') {
+                sonner_1.toast.error(t('premium.toasts.mentionOnly') || 'Mention+ is only available in the Mention app');
+                return;
+            }
+            setProcessingPayment(true);
+            // Mock payment processing
+            await new Promise(resolve => setTimeout(resolve, 2000));
+            sonner_1.toast.success(t('premium.toasts.activated') || 'Subscription activated successfully!');
+            // Mock subscription update
+            setSubscription({
+                id: `sub_${Date.now()}`,
+                planId,
+                status: 'active',
+                currentPeriodStart: new Date().toISOString(),
+                currentPeriodEnd: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
+                cancelAtPeriodEnd: false
+            });
+            // Reload data to update feature states
+            loadSubscriptionData();
+        }
+        catch (error) {
+            if (__DEV__) {
+                console.error('Payment failed:', error);
+            }
+            sonner_1.toast.error(t('premium.toasts.paymentFailed') || 'Payment failed. Please try again.');
+        }
+        finally {
+            setProcessingPayment(false);
+        }
+    };
+    const handleCancelSubscription = () => {
+        (0, confirmAction_1.confirmAction)(t('premium.confirms.cancelSub') || 'Are you sure you want to cancel your subscription? You will lose access to premium features at the end of your current billing period.', async () => {
+            try {
+                // Mock cancellation
+                setSubscription(prev => prev ? {
+                    ...prev,
+                    cancelAtPeriodEnd: true
+                } : null);
+                sonner_1.toast.success(t('premium.toasts.willCancel') || 'Subscription will be canceled at the end of the billing period');
+            }
+            catch (error) {
+                sonner_1.toast.error(t('premium.toasts.cancelFailed') || 'Failed to cancel subscription');
+            }
+        });
+    };
+    const handleReactivateSubscription = async () => {
+        try {
+            setSubscription(prev => prev ? {
+                ...prev,
+                cancelAtPeriodEnd: false
+            } : null);
+            sonner_1.toast.success(t('premium.toasts.reactivated') || 'Subscription reactivated successfully');
+        }
+        catch (error) {
+            sonner_1.toast.error(t('premium.toasts.reactivateFailed') || 'Failed to reactivate subscription');
+        }
+    };
+    const formatPrice = (price, currency, interval) => {
+        const yearlyPrice = interval === 'year' ? price : price * 12 * 0.8; // 20% discount for yearly
+        const displayPrice = billingInterval === 'year' ? yearlyPrice : price;
+        return {
+            price: displayPrice,
+            formatted: `$${displayPrice.toFixed(2)}`,
+            interval: billingInterval === 'year' ? 'year' : 'month'
+        };
+    };
+    const getCurrentPlan = () => {
+        if (!subscription)
+            return null;
+        return plans.find(plan => plan.id === subscription.planId);
+    };
+    const handleFeatureSubscribe = async (featureId) => {
+        try {
+            // Check if feature is available for current app
+            const selectedFeature = mockIndividualFeatures.find(feature => feature.id === featureId);
+            if (!selectedFeature?.applicableApps.includes(currentAppPackage)) {
+                sonner_1.toast.error(`This feature is not available for the current app (${currentAppPackage})`);
+                return;
+            }
+            // Special restrictions for app-specific features
+            if (selectedFeature.appScope === 'specific') {
+                // For features that are only available in specific apps, enforce strict matching
+                const hasExactMatch = selectedFeature.applicableApps.length === 1 &&
+                    selectedFeature.applicableApps[0] === currentAppPackage;
+                if (!hasExactMatch && selectedFeature.applicableApps.length === 1) {
+                    const requiredApp = selectedFeature.applicableApps[0];
+                    sonner_1.toast.error(`${selectedFeature.name} is only available in the ${requiredApp} app`);
+                    return;
+                }
+            }
+            setProcessingPayment(true);
+            // Mock feature subscription
+            await new Promise(resolve => setTimeout(resolve, 1500));
+            setIndividualFeatures(prev => prev.map(feature => feature.id === featureId
+                ? { ...feature, isSubscribed: true }
+                : feature));
+            const feature = individualFeatures.find(f => f.id === featureId);
+            sonner_1.toast.success((t('premium.toasts.featureSubscribed', { name: feature?.name ?? '' }) ?? `Subscribed to ${feature?.name} successfully!`));
+        }
+        catch (error) {
+            if (__DEV__) {
+                console.error('Feature subscription failed:', error);
+            }
+            sonner_1.toast.error(t('premium.toasts.featureSubscribeFailed') || 'Feature subscription failed. Please try again.');
+        }
+        finally {
+            setProcessingPayment(false);
+        }
+    };
+    const handleFeatureUnsubscribe = async (featureId) => {
+        const feature = individualFeatures.find(f => f.id === featureId);
+        (0, confirmAction_1.confirmAction)((t('premium.confirms.unsubscribeFeature', { name: feature?.name ?? '' }) ?? `Are you sure you want to unsubscribe from ${feature?.name}?`), async () => {
+            try {
+                setIndividualFeatures(prev => prev.map(f => f.id === featureId
+                    ? { ...f, isSubscribed: false }
+                    : f));
+                sonner_1.toast.success((t('premium.toasts.featureUnsubscribed', { name: feature?.name ?? '' }) ?? `Unsubscribed from ${feature?.name}`));
+            }
+            catch (error) {
+                sonner_1.toast.error(t('premium.toasts.featureUnsubscribeFailed') || 'Failed to unsubscribe from feature');
+            }
+        });
+    };
+    const renderHeader = () => {
+        const getAppDisplayName = (packageName) => {
+            const appNames = {
+                '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;
+        };
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.header, { borderBottomColor: borderColor }], children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.backButton, onPress: goBack, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "arrow-back", size: 24, color: textColor }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.headerTitleContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.headerTitle, { color: textColor }], children: t('premium.title') || 'Oxy+ Subscriptions' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.currentAppText, { color: isDarkTheme ? '#BBBBBB' : '#666666' }], children: t('premium.forApp', { app: getAppDisplayName(currentAppPackage) }) || `for ${getAppDisplayName(currentAppPackage)}` })] }), onClose && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.closeButton, onPress: onClose, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "close", size: 24, color: textColor }) }))] }));
+    };
+    const renderCurrentSubscription = () => {
+        if (!subscription)
+            return null;
+        const currentPlan = getCurrentPlan();
+        if (!currentPlan)
+            return null;
+        const statusColor = subscription.status === 'active' ? successColor :
+            subscription.status === 'trialing' ? warningColor :
+                dangerColor;
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.section, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.sectionTitle, { color: textColor }], children: t('premium.current.title') || 'Current Subscription' }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.currentSubscriptionCard, { backgroundColor: secondaryBackgroundColor, borderColor }], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.subscriptionHeader, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.planName, { color: textColor }], children: currentPlan.name }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles.planPrice, { color: primaryColor }], children: ["$", currentPlan.price, "/month"] })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.statusBadge, { backgroundColor: statusColor }], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.statusText, children: subscription.status.toUpperCase() }) })] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.subscriptionDetail, { color: isDarkTheme ? '#BBBBBB' : '#666666' }], children: t('premium.current.renewsOn', { date: new Date(subscription.currentPeriodEnd).toLocaleDateString() }) || `Renews on ${new Date(subscription.currentPeriodEnd).toLocaleDateString()}` }), subscription.cancelAtPeriodEnd && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.cancelNotice, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "warning", size: 16, color: warningColor }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.cancelText, { color: warningColor }], children: t('premium.current.willCancelOn', { date: new Date(subscription.currentPeriodEnd).toLocaleDateString() }) || `Subscription will cancel on ${new Date(subscription.currentPeriodEnd).toLocaleDateString()}` })] })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.subscriptionActions, children: [subscription.cancelAtPeriodEnd ? ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.actionButton, { backgroundColor: successColor }], onPress: handleReactivateSubscription, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.actionButtonText, children: t('premium.actions.reactivate') || 'Reactivate' }) })) : ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.actionButton, { backgroundColor: dangerColor }], onPress: handleCancelSubscription, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.actionButtonText, children: t('premium.actions.cancelSubBtn') || 'Cancel Subscription' }) })), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.actionButton, styles.secondaryButton, { borderColor }], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.actionButtonText, { color: textColor }], children: t('premium.actions.manageBilling') || 'Manage Billing' }) })] })] })] }));
+    };
+    const renderBillingToggle = () => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.section, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.billingToggle, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                            styles.billingOption,
+                            billingInterval === 'month' && { backgroundColor: primaryColor }
+                        ], onPress: () => setBillingInterval('month'), children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                styles.billingOptionText,
+                                { color: billingInterval === 'month' ? '#FFFFFF' : textColor }
+                            ], children: t('premium.billing.monthly') || 'Monthly' }) }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                            styles.billingOption,
+                            billingInterval === 'year' && { backgroundColor: primaryColor }
+                        ], onPress: () => setBillingInterval('year'), children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                styles.billingOptionText,
+                                { color: billingInterval === 'year' ? '#FFFFFF' : textColor }
+                            ], children: t('premium.billing.yearly') || 'Yearly' }) })] }), billingInterval === 'year' && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.savingsText, { color: successColor }], children: t('premium.billing.saveYearly') || '💰 Save 20% with yearly billing' }))] }));
+    const renderPlanCard = (plan) => {
+        const pricing = formatPrice(plan.price, plan.currency, plan.interval);
+        const isSelected = selectedPlan === plan.id;
+        const isCurrentPlan = subscription?.planId === plan.id;
+        const isAppSpecific = plan.appScope === 'specific' && plan.applicableApps.length === 1;
+        const isAvailableForCurrentApp = plan.applicableApps.includes(currentAppPackage);
+        const getAppScopeText = () => {
+            if (plan.appScope === 'ecosystem') {
+                return t('premium.plan.scope.allApps') || 'Works across all Oxy apps';
+            }
+            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(', ')}`;
+        };
+        const getAvailabilityStatus = () => {
+            if (isAppSpecific && !isAvailableForCurrentApp) {
+                const requiredApp = plan.applicableApps[0];
+                return {
+                    available: false,
+                    reason: t('premium.plan.scope.exclusive', { app: requiredApp }) || `Only available in ${requiredApp} app`
+                };
+            }
+            return { available: true, reason: null };
+        };
+        const availability = getAvailabilityStatus();
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                styles.planCard,
+                { backgroundColor: secondaryBackgroundColor, borderColor },
+                isSelected && { borderColor: primaryColor, borderWidth: 2 },
+                plan.isPopular && styles.popularPlan,
+                !availability.available && { opacity: 0.6 }
+            ], children: [plan.isPopular && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.popularBadge, { backgroundColor: primaryColor }], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.popularText, children: "MOST POPULAR" }) })), isAppSpecific && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.appSpecificBadge, {
+                            backgroundColor: isAvailableForCurrentApp ? successColor : warningColor
+                        }], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.appSpecificText, children: isAvailableForCurrentApp ? (t('premium.plan.badge.appExclusive') || 'App Exclusive') : (t('premium.plan.badge.notAvailable') || 'Not Available') }) })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.planHeader, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.planName, { color: textColor }], children: plan.name }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.planDescription, { color: isDarkTheme ? '#BBBBBB' : '#666666' }], children: plan.description }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.planAppScope, { color: isDarkTheme ? '#888888' : '#999999' }], children: getAppScopeText() }), !availability.available && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.planRestrictionText, { color: dangerColor }], children: availability.reason }))] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.planPricing, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.planPrice, { color: textColor }], children: pricing.formatted }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.planInterval, { color: isDarkTheme ? '#BBBBBB' : '#666666' }], children: t('premium.plan.perInterval', { interval: pricing.interval }) || `per ${pricing.interval}` })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.planFeatures, children: plan.features.map((feature, index) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.featureItem, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "checkmark", size: 16, color: successColor }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.featureText, { color: textColor }], children: feature })] }, index))) }), isCurrentPlan ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.currentPlanButton, { backgroundColor: successColor }], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.currentPlanText, children: t('premium.plan.current') || 'Current Plan' }) })) : !availability.available ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.unavailablePlanButton, { backgroundColor: isDarkTheme ? '#444444' : '#E0E0E0' }], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.unavailablePlanText, { color: isDarkTheme ? '#888888' : '#999999' }], children: t('premium.plan.notAvailableInApp') || 'Not Available in Current App' }) })) : ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                        styles.selectPlanButton,
+                        { backgroundColor: plan.isPopular ? primaryColor : borderColor }
+                    ], onPress: () => handleSubscribe(plan.id), disabled: processingPayment, children: processingPayment ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { color: "#FFFFFF", size: "small" })) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                            styles.selectPlanText,
+                            { color: plan.isPopular ? '#FFFFFF' : textColor }
+                        ], children: t('premium.actions.subscribeTo', { name: plan.name }) || `Subscribe to ${plan.name}` })) }))] }, plan.id));
+    };
+    const renderTabNavigation = () => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.section, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.tabContainer, { borderBottomColor: borderColor }], children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                        styles.tab,
+                        activeTab === 'plans' && { borderBottomColor: primaryColor, borderBottomWidth: 2 }
+                    ], onPress: () => setActiveTab('plans'), children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                            styles.tabText,
+                            { color: activeTab === 'plans' ? primaryColor : textColor }
+                        ], children: t('premium.tabs.plans') || 'Full Plans' }) }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                        styles.tab,
+                        activeTab === 'features' && { borderBottomColor: primaryColor, borderBottomWidth: 2 }
+                    ], onPress: () => setActiveTab('features'), children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                            styles.tabText,
+                            { color: activeTab === 'features' ? primaryColor : textColor }
+                        ], children: t('premium.tabs.features') || 'Individual Features' }) })] }) }));
+    const renderFeatureCard = (feature) => {
+        const pricing = formatPrice(feature.price, feature.currency, feature.interval);
+        const isSubscribed = feature.isSubscribed;
+        const isIncludedInCurrentPlan = feature.isIncludedInCurrentPlan;
+        const canPurchase = feature.canBePurchasedSeparately && !isIncludedInCurrentPlan;
+        const getCategoryColor = (category) => {
+            switch (category) {
+                case 'analytics': return '#FF9500';
+                case 'customization': return '#5856D6';
+                case 'content': return '#30D158';
+                case 'networking': return '#007AFF';
+                case 'productivity': return '#FF3B30';
+                default: return primaryColor;
+            }
+        };
+        const getCategoryIcon = (category) => {
+            switch (category) {
+                case 'analytics': return 'analytics';
+                case 'customization': return 'color-palette';
+                case 'content': return 'document-text';
+                case 'networking': return 'people';
+                case 'productivity': return 'briefcase';
+                default: return 'star';
+            }
+        };
+        const getAppScopeText = () => {
+            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 ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                styles.featureCard,
+                { backgroundColor: secondaryBackgroundColor, borderColor },
+                isSubscribed && { borderColor: successColor, borderWidth: 2 },
+                isIncludedInCurrentPlan && { borderColor: primaryColor, borderWidth: 2 }
+            ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.featureHeader, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.featureIconContainer, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: getCategoryIcon(feature.category), size: 24, color: getCategoryColor(feature.category) }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.featureInfo, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.featureNameRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.featureName, { color: textColor }], children: feature.name }), isIncludedInCurrentPlan && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.includedBadge, { backgroundColor: primaryColor }], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.includedBadgeText, children: "Included" }) }))] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.featureDescription, { color: isDarkTheme ? '#BBBBBB' : '#666666' }], children: feature.description }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.appScopeText, { color: isDarkTheme ? '#888888' : '#999999' }], children: getAppScopeText() })] })] }), !isIncludedInCurrentPlan && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.featurePricing, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.featurePrice, { color: textColor }], children: pricing.formatted }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.featureInterval, { color: isDarkTheme ? '#BBBBBB' : '#666666' }], children: t('premium.plan.perInterval', { interval: pricing.interval }) || `per ${pricing.interval}` })] })), isIncludedInCurrentPlan ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.includedInPlanButton, { backgroundColor: primaryColor }], children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "checkmark-circle", size: 16, color: "#FFFFFF" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.includedInPlanText, children: t('premium.feature.includedInPlan') || 'Included in your plan' })] })) : isSubscribed ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.featureActions, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.subscribedButton, { backgroundColor: successColor }], children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "checkmark", size: 16, color: "#FFFFFF" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.subscribedText, children: t('premium.feature.subscribed') || 'Subscribed' })] }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.unsubscribeButton, { borderColor: dangerColor }], onPress: () => handleFeatureUnsubscribe(feature.id), children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.unsubscribeText, { color: dangerColor }], children: t('premium.actions.unsubscribe') || 'Unsubscribe' }) })] })) : canPurchase ? ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.subscribeFeatureButton, { backgroundColor: primaryColor }], onPress: () => handleFeatureSubscribe(feature.id), disabled: processingPayment, children: processingPayment ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { color: "#FFFFFF", size: "small" })) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.subscribeFeatureText, children: t('premium.actions.subscribe') || 'Subscribe' })) })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.unavailableButton, { backgroundColor: isDarkTheme ? '#444444' : '#E0E0E0' }], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.unavailableText, { color: isDarkTheme ? '#888888' : '#999999' }], children: "Only available in subscription plans" }) }))] }, feature.id));
+    };
+    const renderIndividualFeatures = () => {
+        const categories = ['analytics', 'customization', 'content', 'networking', 'productivity'];
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.section, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.sectionTitle, { color: textColor }], children: "Individual Features" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.sectionSubtitle, { color: isDarkTheme ? '#BBBBBB' : '#666666' }], children: "Subscribe to specific features you need. Some features are included in subscription plans." }), categories.map(category => {
+                    const categoryFeatures = individualFeatures.filter(f => f.category === category);
+                    if (categoryFeatures.length === 0)
+                        return null;
+                    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.categorySection, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.categoryTitle, { color: textColor }], children: category.charAt(0).toUpperCase() + category.slice(1) }), categoryFeatures.map(renderFeatureCard)] }, category));
+                })] }));
+    };
+    // Add this for testing different app contexts (remove in production)
+    const [showAppSwitcher, setShowAppSwitcher] = (0, react_1.useState)(__DEV__); // Only show in development
+    const renderAppSwitcher = () => {
+        if (!showAppSwitcher)
+            return null;
+        const testApps = ['mention', 'oxy-social', 'oxy-workspace', 'oxy-creator'];
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.appSwitcher, { backgroundColor: isDarkTheme ? '#333333' : '#F0F0F0', borderColor }], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.appSwitcherTitle, { color: textColor }], children: "\uD83E\uDDEA Test App Context (Dev Only)" }), (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.appSwitcherButtons, children: testApps.map(app => ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                                styles.appSwitcherButton,
+                                {
+                                    backgroundColor: currentAppPackage === app ? primaryColor : 'transparent',
+                                    borderColor: primaryColor,
+                                }
+                            ], onPress: () => {
+                                setCurrentAppPackage(app);
+                            }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                    styles.appSwitcherButtonText,
+                                    { color: currentAppPackage === app ? '#FFFFFF' : textColor }
+                                ], children: app }) }, app))) }) })] }));
+    };
+    if (loading) {
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, { backgroundColor, justifyContent: 'center' }], children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "large", color: primaryColor }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.loadingText, { color: textColor }], children: t('premium.loading') || 'Loading subscription plans...' })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, { backgroundColor }], children: [renderHeader(), renderAppSwitcher(), (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { style: styles.content, showsVerticalScrollIndicator: false, children: [subscription && renderCurrentSubscription(), !subscription && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.section, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.sectionTitle, { color: textColor }], children: t('premium.choosePlan') || 'Choose Your Plan' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.sectionSubtitle, { color: isDarkTheme ? '#BBBBBB' : '#666666' }], children: t('premium.choosePlanSubtitle') || 'Unlock premium features and take your experience to the next level' })] })), !subscription && renderTabNavigation(), !subscription && activeTab === 'plans' && renderBillingToggle(), activeTab === 'plans' ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.section, children: [!subscription && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.sectionTitle, { color: textColor }], children: t('premium.availablePlans') || 'Available Plans' })), plans.map(renderPlanCard)] })) : (renderIndividualFeatures()), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.section, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.sectionTitle, { color: textColor }], children: t('premium.why') || 'Why Go Premium?' }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.benefitsCard, { backgroundColor: secondaryBackgroundColor, borderColor }], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.benefitItem, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "flash", size: 24, color: primaryColor }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.benefitContent, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.benefitTitle, { color: textColor }], children: t('premium.benefits.performance.title') || 'Enhanced Performance' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.benefitDescription, { color: isDarkTheme ? '#BBBBBB' : '#666666' }], children: t('premium.benefits.performance.desc') || 'Faster processing and priority access to our servers' })] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.benefitItem, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "shield-checkmark", size: 24, color: successColor }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.benefitContent, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.benefitTitle, { color: textColor }], children: t('premium.benefits.security.title') || 'Advanced Security' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.benefitDescription, { color: isDarkTheme ? '#BBBBBB' : '#666666' }], children: t('premium.benefits.security.desc') || 'Enhanced encryption and security features' })] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.benefitItem, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "headset", size: 24, color: warningColor }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.benefitContent, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.benefitTitle, { color: textColor }], children: t('premium.benefits.support.title') || 'Priority Support' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.benefitDescription, { color: isDarkTheme ? '#BBBBBB' : '#666666' }], children: t('premium.benefits.support.desc') || 'Get help faster with our premium support team' })] })] })] })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.bottomSpacing })] })] }));
+};
+const styles = react_native_1.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',
+        fontFamily: fonts_1.fontFamilies.interSemiBold,
+    },
+    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',
+        fontFamily: fonts_1.fontFamilies.interBold,
+        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,
+    },
+    // Tab Navigation Styles
+    tabContainer: {
+        flexDirection: 'row',
+        borderBottomWidth: 1,
+        marginBottom: 20,
+    },
+    tab: {
+        flex: 1,
+        paddingVertical: 12,
+        paddingHorizontal: 16,
+        alignItems: 'center',
+    },
+    tabText: {
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    // Individual Feature Styles
+    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,
+    },
+    // New styles for enhanced feature cards
+    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',
+    },
+    // App-specific plan styles
+    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',
+    },
+    // App switcher styles (for development/testing)
+    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',
+    },
+});
+exports.default = PremiumSubscriptionScreen;