@oxyhq/services 5.16.21 → 5.16.23

package/lib/module/ui/screens/PremiumSubscriptionScreen.js

@@ -1,1643 +0,0 @@
-"use strict";
-
-import { useState, useEffect } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, ScrollView, ActivityIndicator } from 'react-native';
-import { fontFamilies } from '../styles/fonts';
-import { toast } from '../../lib/sonner';
-import { confirmAction } from '../utils/confirmAction';
-import { Ionicons } from '@expo/vector-icons';
-import { useI18n } from '../hooks/useI18n';
-import { useThemeStyles } from '../hooks/useThemeStyles';
-import { normalizeTheme } from '../utils/themeUtils';
-import { useColorScheme } from '../hooks/use-color-scheme';
-import { useOxy } from '../context/OxyContext';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const PremiumSubscriptionScreen = ({
-  onClose,
-  theme,
-  navigate,
-  goBack
-}) => {
-  // Use useOxy() hook for OxyContext values
-  const {
-    user,
-    oxyServices
-  } = useOxy();
-  const [loading, setLoading] = useState(true);
-  const [subscription, setSubscription] = useState(null);
-  const [plans, setPlans] = useState([]);
-  const [individualFeatures, setIndividualFeatures] = useState([]);
-  const [selectedPlan, setSelectedPlan] = useState(null);
-  const [processingPayment, setProcessingPayment] = useState(false);
-  const [billingInterval, setBillingInterval] = useState('month');
-  const [activeTab, setActiveTab] = useState('plans');
-  const [currentAppPackage, setCurrentAppPackage] = useState('mention'); // Default to mention for demo
-
-  const {
-    t
-  } = useI18n();
-  const colorScheme = useColorScheme();
-  const normalizedTheme = normalizeTheme(theme);
-  const themeStyles = 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']
-  }];
-  useEffect(() => {
-    detectCurrentApp();
-  }, []);
-  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);
-
-    // Log for debugging
-    console.log('Detected app package:', detectedApp);
-    console.log('Available plans for this app will be filtered accordingly');
-  };
-  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 ? true : false // Mock some individual subscriptions
-        };
-      });
-      setIndividualFeatures(updatedFeatures);
-    } catch (error) {
-      console.error('Failed to load subscription data:', error);
-      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)) {
-        console.log(`❌ Subscription blocked: Plan "${selectedPlan?.name}" not available for app "${currentAppPackage}"`);
-        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') {
-        console.log(`❌ Subscription blocked: Mention+ plan requires app to be "mention", current app is "${currentAppPackage}"`);
-        toast.error(t('premium.toasts.mentionOnly') || 'Mention+ is only available in the Mention app');
-        return;
-      }
-      console.log(`✅ Subscription allowed: Plan "${selectedPlan.name}" is available for app "${currentAppPackage}"`);
-      setProcessingPayment(true);
-
-      // Mock payment processing
-      await new Promise(resolve => setTimeout(resolve, 2000));
-      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) {
-      console.error('Payment failed:', error);
-      toast.error(t('premium.toasts.paymentFailed') || 'Payment failed. Please try again.');
-    } finally {
-      setProcessingPayment(false);
-    }
-  };
-  const handleCancelSubscription = () => {
-    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);
-        toast.success(t('premium.toasts.willCancel') || 'Subscription will be canceled at the end of the billing period');
-      } catch (error) {
-        toast.error(t('premium.toasts.cancelFailed') || 'Failed to cancel subscription');
-      }
-    });
-  };
-  const handleReactivateSubscription = async () => {
-    try {
-      setSubscription(prev => prev ? {
-        ...prev,
-        cancelAtPeriodEnd: false
-      } : null);
-      toast.success(t('premium.toasts.reactivated') || 'Subscription reactivated successfully');
-    } catch (error) {
-      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)) {
-        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];
-          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);
-      toast.success(t('premium.toasts.featureSubscribed', {
-        name: feature?.name ?? ''
-      }) ?? `Subscribed to ${feature?.name} successfully!`);
-    } catch (error) {
-      console.error('Feature subscription failed:', error);
-      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);
-    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));
-        toast.success(t('premium.toasts.featureUnsubscribed', {
-          name: feature?.name ?? ''
-        }) ?? `Unsubscribed from ${feature?.name}`);
-      } catch (error) {
-        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 /*#__PURE__*/_jsxs(View, {
-      style: [styles.header, {
-        borderBottomColor: borderColor
-      }],
-      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-        style: styles.backButton,
-        onPress: goBack,
-        children: /*#__PURE__*/_jsx(Ionicons, {
-          name: "arrow-back",
-          size: 24,
-          color: textColor
-        })
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.headerTitleContainer,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.headerTitle, {
-            color: textColor
-          }],
-          children: t('premium.title') || 'Oxy+ Subscriptions'
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.currentAppText, {
-            color: isDarkTheme ? '#BBBBBB' : '#666666'
-          }],
-          children: t('premium.forApp', {
-            app: getAppDisplayName(currentAppPackage)
-          }) || `for ${getAppDisplayName(currentAppPackage)}`
-        })]
-      }), onClose && /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: styles.closeButton,
-        onPress: onClose,
-        children: /*#__PURE__*/_jsx(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 /*#__PURE__*/_jsxs(View, {
-      style: styles.section,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.sectionTitle, {
-          color: textColor
-        }],
-        children: t('premium.current.title') || 'Current Subscription'
-      }), /*#__PURE__*/_jsxs(View, {
-        style: [styles.currentSubscriptionCard, {
-          backgroundColor: secondaryBackgroundColor,
-          borderColor
-        }],
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.subscriptionHeader,
-          children: [/*#__PURE__*/_jsxs(View, {
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: [styles.planName, {
-                color: textColor
-              }],
-              children: currentPlan.name
-            }), /*#__PURE__*/_jsxs(Text, {
-              style: [styles.planPrice, {
-                color: primaryColor
-              }],
-              children: ["$", currentPlan.price, "/month"]
-            })]
-          }), /*#__PURE__*/_jsx(View, {
-            style: [styles.statusBadge, {
-              backgroundColor: statusColor
-            }],
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.statusText,
-              children: subscription.status.toUpperCase()
-            })
-          })]
-        }), /*#__PURE__*/_jsx(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 && /*#__PURE__*/_jsxs(View, {
-          style: styles.cancelNotice,
-          children: [/*#__PURE__*/_jsx(Ionicons, {
-            name: "warning",
-            size: 16,
-            color: warningColor
-          }), /*#__PURE__*/_jsx(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()}`
-          })]
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.subscriptionActions,
-          children: [subscription.cancelAtPeriodEnd ? /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.actionButton, {
-              backgroundColor: successColor
-            }],
-            onPress: handleReactivateSubscription,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.actionButtonText,
-              children: t('premium.actions.reactivate') || 'Reactivate'
-            })
-          }) : /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.actionButton, {
-              backgroundColor: dangerColor
-            }],
-            onPress: handleCancelSubscription,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.actionButtonText,
-              children: t('premium.actions.cancelSubBtn') || 'Cancel Subscription'
-            })
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.actionButton, styles.secondaryButton, {
-              borderColor
-            }],
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.actionButtonText, {
-                color: textColor
-              }],
-              children: t('premium.actions.manageBilling') || 'Manage Billing'
-            })
-          })]
-        })]
-      })]
-    });
-  };
-  const renderBillingToggle = () => /*#__PURE__*/_jsxs(View, {
-    style: styles.section,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.billingToggle,
-      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.billingOption, billingInterval === 'month' && {
-          backgroundColor: primaryColor
-        }],
-        onPress: () => setBillingInterval('month'),
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.billingOptionText, {
-            color: billingInterval === 'month' ? '#FFFFFF' : textColor
-          }],
-          children: t('premium.billing.monthly') || 'Monthly'
-        })
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.billingOption, billingInterval === 'year' && {
-          backgroundColor: primaryColor
-        }],
-        onPress: () => setBillingInterval('year'),
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.billingOptionText, {
-            color: billingInterval === 'year' ? '#FFFFFF' : textColor
-          }],
-          children: t('premium.billing.yearly') || 'Yearly'
-        })
-      })]
-    }), billingInterval === 'year' && /*#__PURE__*/_jsx(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';
-      } else if (isAppSpecific) {
-        const appName = plan.applicableApps[0];
-        return t('premium.plan.scope.exclusive', {
-          app: appName
-        }) || `Exclusive to ${appName} app`;
-      } else {
-        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 /*#__PURE__*/_jsxs(View, {
-      style: [styles.planCard, {
-        backgroundColor: secondaryBackgroundColor,
-        borderColor
-      }, isSelected && {
-        borderColor: primaryColor,
-        borderWidth: 2
-      }, plan.isPopular && styles.popularPlan, !availability.available && {
-        opacity: 0.6
-      }],
-      children: [plan.isPopular && /*#__PURE__*/_jsx(View, {
-        style: [styles.popularBadge, {
-          backgroundColor: primaryColor
-        }],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.popularText,
-          children: "MOST POPULAR"
-        })
-      }), isAppSpecific && /*#__PURE__*/_jsx(View, {
-        style: [styles.appSpecificBadge, {
-          backgroundColor: isAvailableForCurrentApp ? successColor : warningColor
-        }],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.appSpecificText,
-          children: isAvailableForCurrentApp ? t('premium.plan.badge.appExclusive') || 'App Exclusive' : t('premium.plan.badge.notAvailable') || 'Not Available'
-        })
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.planHeader,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.planName, {
-            color: textColor
-          }],
-          children: plan.name
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.planDescription, {
-            color: isDarkTheme ? '#BBBBBB' : '#666666'
-          }],
-          children: plan.description
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.planAppScope, {
-            color: isDarkTheme ? '#888888' : '#999999'
-          }],
-          children: getAppScopeText()
-        }), !availability.available && /*#__PURE__*/_jsx(Text, {
-          style: [styles.planRestrictionText, {
-            color: dangerColor
-          }],
-          children: availability.reason
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.planPricing,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.planPrice, {
-            color: textColor
-          }],
-          children: pricing.formatted
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.planInterval, {
-            color: isDarkTheme ? '#BBBBBB' : '#666666'
-          }],
-          children: t('premium.plan.perInterval', {
-            interval: pricing.interval
-          }) || `per ${pricing.interval}`
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.planFeatures,
-        children: plan.features.map((feature, index) => /*#__PURE__*/_jsxs(View, {
-          style: styles.featureItem,
-          children: [/*#__PURE__*/_jsx(Ionicons, {
-            name: "checkmark",
-            size: 16,
-            color: successColor
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.featureText, {
-              color: textColor
-            }],
-            children: feature
-          })]
-        }, index))
-      }), isCurrentPlan ? /*#__PURE__*/_jsx(View, {
-        style: [styles.currentPlanButton, {
-          backgroundColor: successColor
-        }],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.currentPlanText,
-          children: t('premium.plan.current') || 'Current Plan'
-        })
-      }) : !availability.available ? /*#__PURE__*/_jsx(View, {
-        style: [styles.unavailablePlanButton, {
-          backgroundColor: isDarkTheme ? '#444444' : '#E0E0E0'
-        }],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.unavailablePlanText, {
-            color: isDarkTheme ? '#888888' : '#999999'
-          }],
-          children: t('premium.plan.notAvailableInApp') || 'Not Available in Current App'
-        })
-      }) : /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.selectPlanButton, {
-          backgroundColor: plan.isPopular ? primaryColor : borderColor
-        }],
-        onPress: () => handleSubscribe(plan.id),
-        disabled: processingPayment,
-        children: processingPayment ? /*#__PURE__*/_jsx(ActivityIndicator, {
-          color: "#FFFFFF",
-          size: "small"
-        }) : /*#__PURE__*/_jsx(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 = () => /*#__PURE__*/_jsx(View, {
-    style: styles.section,
-    children: /*#__PURE__*/_jsxs(View, {
-      style: [styles.tabContainer, {
-        borderBottomColor: borderColor
-      }],
-      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.tab, activeTab === 'plans' && {
-          borderBottomColor: primaryColor,
-          borderBottomWidth: 2
-        }],
-        onPress: () => setActiveTab('plans'),
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.tabText, {
-            color: activeTab === 'plans' ? primaryColor : textColor
-          }],
-          children: t('premium.tabs.plans') || 'Full Plans'
-        })
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.tab, activeTab === 'features' && {
-          borderBottomColor: primaryColor,
-          borderBottomWidth: 2
-        }],
-        onPress: () => setActiveTab('features'),
-        children: /*#__PURE__*/_jsx(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');
-      } else {
-        return t('premium.feature.scope.availableIn', {
-          apps: feature.applicableApps.join(', ')
-        }) || `Available in: ${feature.applicableApps.join(', ')}`;
-      }
-    };
-    return /*#__PURE__*/_jsxs(View, {
-      style: [styles.featureCard, {
-        backgroundColor: secondaryBackgroundColor,
-        borderColor
-      }, isSubscribed && {
-        borderColor: successColor,
-        borderWidth: 2
-      }, isIncludedInCurrentPlan && {
-        borderColor: primaryColor,
-        borderWidth: 2
-      }],
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.featureHeader,
-        children: [/*#__PURE__*/_jsx(View, {
-          style: styles.featureIconContainer,
-          children: /*#__PURE__*/_jsx(Ionicons, {
-            name: getCategoryIcon(feature.category),
-            size: 24,
-            color: getCategoryColor(feature.category)
-          })
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.featureInfo,
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.featureNameRow,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: [styles.featureName, {
-                color: textColor
-              }],
-              children: feature.name
-            }), isIncludedInCurrentPlan && /*#__PURE__*/_jsx(View, {
-              style: [styles.includedBadge, {
-                backgroundColor: primaryColor
-              }],
-              children: /*#__PURE__*/_jsx(Text, {
-                style: styles.includedBadgeText,
-                children: "Included"
-              })
-            })]
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.featureDescription, {
-              color: isDarkTheme ? '#BBBBBB' : '#666666'
-            }],
-            children: feature.description
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.appScopeText, {
-              color: isDarkTheme ? '#888888' : '#999999'
-            }],
-            children: getAppScopeText()
-          })]
-        })]
-      }), !isIncludedInCurrentPlan && /*#__PURE__*/_jsxs(View, {
-        style: styles.featurePricing,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.featurePrice, {
-            color: textColor
-          }],
-          children: pricing.formatted
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.featureInterval, {
-            color: isDarkTheme ? '#BBBBBB' : '#666666'
-          }],
-          children: t('premium.plan.perInterval', {
-            interval: pricing.interval
-          }) || `per ${pricing.interval}`
-        })]
-      }), isIncludedInCurrentPlan ? /*#__PURE__*/_jsxs(View, {
-        style: [styles.includedInPlanButton, {
-          backgroundColor: primaryColor
-        }],
-        children: [/*#__PURE__*/_jsx(Ionicons, {
-          name: "checkmark-circle",
-          size: 16,
-          color: "#FFFFFF"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.includedInPlanText,
-          children: t('premium.feature.includedInPlan') || 'Included in your plan'
-        })]
-      }) : isSubscribed ? /*#__PURE__*/_jsxs(View, {
-        style: styles.featureActions,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: [styles.subscribedButton, {
-            backgroundColor: successColor
-          }],
-          children: [/*#__PURE__*/_jsx(Ionicons, {
-            name: "checkmark",
-            size: 16,
-            color: "#FFFFFF"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.subscribedText,
-            children: t('premium.feature.subscribed') || 'Subscribed'
-          })]
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.unsubscribeButton, {
-            borderColor: dangerColor
-          }],
-          onPress: () => handleFeatureUnsubscribe(feature.id),
-          children: /*#__PURE__*/_jsx(Text, {
-            style: [styles.unsubscribeText, {
-              color: dangerColor
-            }],
-            children: t('premium.actions.unsubscribe') || 'Unsubscribe'
-          })
-        })]
-      }) : canPurchase ? /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.subscribeFeatureButton, {
-          backgroundColor: primaryColor
-        }],
-        onPress: () => handleFeatureSubscribe(feature.id),
-        disabled: processingPayment,
-        children: processingPayment ? /*#__PURE__*/_jsx(ActivityIndicator, {
-          color: "#FFFFFF",
-          size: "small"
-        }) : /*#__PURE__*/_jsx(Text, {
-          style: styles.subscribeFeatureText,
-          children: t('premium.actions.subscribe') || 'Subscribe'
-        })
-      }) : /*#__PURE__*/_jsx(View, {
-        style: [styles.unavailableButton, {
-          backgroundColor: isDarkTheme ? '#444444' : '#E0E0E0'
-        }],
-        children: /*#__PURE__*/_jsx(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 /*#__PURE__*/_jsxs(View, {
-      style: styles.section,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.sectionTitle, {
-          color: textColor
-        }],
-        children: "Individual Features"
-      }), /*#__PURE__*/_jsx(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 /*#__PURE__*/_jsxs(View, {
-          style: styles.categorySection,
-          children: [/*#__PURE__*/_jsx(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] = useState(__DEV__); // Only show in development
-
-  const renderAppSwitcher = () => {
-    if (!showAppSwitcher) return null;
-    const testApps = ['mention', 'oxy-social', 'oxy-workspace', 'oxy-creator'];
-    return /*#__PURE__*/_jsxs(View, {
-      style: [styles.appSwitcher, {
-        backgroundColor: isDarkTheme ? '#333333' : '#F0F0F0',
-        borderColor
-      }],
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.appSwitcherTitle, {
-          color: textColor
-        }],
-        children: "\uD83E\uDDEA Test App Context (Dev Only)"
-      }), /*#__PURE__*/_jsx(ScrollView, {
-        horizontal: true,
-        showsHorizontalScrollIndicator: false,
-        children: /*#__PURE__*/_jsx(View, {
-          style: styles.appSwitcherButtons,
-          children: testApps.map(app => /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.appSwitcherButton, {
-              backgroundColor: currentAppPackage === app ? primaryColor : 'transparent',
-              borderColor: primaryColor
-            }],
-            onPress: () => {
-              setCurrentAppPackage(app);
-            },
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.appSwitcherButtonText, {
-                color: currentAppPackage === app ? '#FFFFFF' : textColor
-              }],
-              children: app
-            })
-          }, app))
-        })
-      })]
-    });
-  };
-  if (loading) {
-    return /*#__PURE__*/_jsxs(View, {
-      style: [styles.container, {
-        backgroundColor,
-        justifyContent: 'center'
-      }],
-      children: [/*#__PURE__*/_jsx(ActivityIndicator, {
-        size: "large",
-        color: primaryColor
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.loadingText, {
-          color: textColor
-        }],
-        children: t('premium.loading') || 'Loading subscription plans...'
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, {
-      backgroundColor
-    }],
-    children: [renderHeader(), renderAppSwitcher(), /*#__PURE__*/_jsxs(ScrollView, {
-      style: styles.content,
-      showsVerticalScrollIndicator: false,
-      children: [subscription && renderCurrentSubscription(), !subscription && /*#__PURE__*/_jsxs(View, {
-        style: styles.section,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.sectionTitle, {
-            color: textColor
-          }],
-          children: t('premium.choosePlan') || 'Choose Your Plan'
-        }), /*#__PURE__*/_jsx(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' ? /*#__PURE__*/_jsxs(View, {
-        style: styles.section,
-        children: [!subscription && /*#__PURE__*/_jsx(Text, {
-          style: [styles.sectionTitle, {
-            color: textColor
-          }],
-          children: t('premium.availablePlans') || 'Available Plans'
-        }), plans.map(renderPlanCard)]
-      }) : renderIndividualFeatures(), /*#__PURE__*/_jsxs(View, {
-        style: styles.section,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.sectionTitle, {
-            color: textColor
-          }],
-          children: t('premium.why') || 'Why Go Premium?'
-        }), /*#__PURE__*/_jsxs(View, {
-          style: [styles.benefitsCard, {
-            backgroundColor: secondaryBackgroundColor,
-            borderColor
-          }],
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.benefitItem,
-            children: [/*#__PURE__*/_jsx(Ionicons, {
-              name: "flash",
-              size: 24,
-              color: primaryColor
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.benefitContent,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: [styles.benefitTitle, {
-                  color: textColor
-                }],
-                children: t('premium.benefits.performance.title') || 'Enhanced Performance'
-              }), /*#__PURE__*/_jsx(Text, {
-                style: [styles.benefitDescription, {
-                  color: isDarkTheme ? '#BBBBBB' : '#666666'
-                }],
-                children: t('premium.benefits.performance.desc') || 'Faster processing and priority access to our servers'
-              })]
-            })]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.benefitItem,
-            children: [/*#__PURE__*/_jsx(Ionicons, {
-              name: "shield-checkmark",
-              size: 24,
-              color: successColor
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.benefitContent,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: [styles.benefitTitle, {
-                  color: textColor
-                }],
-                children: t('premium.benefits.security.title') || 'Advanced Security'
-              }), /*#__PURE__*/_jsx(Text, {
-                style: [styles.benefitDescription, {
-                  color: isDarkTheme ? '#BBBBBB' : '#666666'
-                }],
-                children: t('premium.benefits.security.desc') || 'Enhanced encryption and security features'
-              })]
-            })]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.benefitItem,
-            children: [/*#__PURE__*/_jsx(Ionicons, {
-              name: "headset",
-              size: 24,
-              color: warningColor
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.benefitContent,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: [styles.benefitTitle, {
-                  color: textColor
-                }],
-                children: t('premium.benefits.support.title') || 'Priority Support'
-              }), /*#__PURE__*/_jsx(Text, {
-                style: [styles.benefitDescription, {
-                  color: isDarkTheme ? '#BBBBBB' : '#666666'
-                }],
-                children: t('premium.benefits.support.desc') || 'Get help faster with our premium support team'
-              })]
-            })]
-          })]
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.bottomSpacing
-      })]
-    })]
-  });
-};
-const styles = StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 20,
-    paddingTop: 20,
-    paddingBottom: 16,
-    borderBottomWidth: 1
-  },
-  backButton: {
-    padding: 8
-  },
-  headerTitle: {
-    fontSize: 20,
-    fontWeight: '600',
-    fontFamily: fontFamilies.phuduSemiBold
-  },
-  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: fontFamilies.phuduBold,
-    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'
-  }
-});
-export default PremiumSubscriptionScreen;
-//# sourceMappingURL=PremiumSubscriptionScreen.js.map