@oxyhq/services 6.9.15 → 6.9.17

package/src/ui/screens/PremiumSubscriptionScreen.js

@@ -1,1080 +0,0 @@
-"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;