@oxyhq/services 5.4.0 → 5.4.2

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

@@ -1,1615 +0,0 @@
-"use strict";
-
-import React, { useState, useEffect } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, ScrollView, ActivityIndicator, Alert } from 'react-native';
-import { useOxy } from '../context/OxyContext';
-import { fontFamilies } from '../styles/fonts';
-import { toast } from '../../lib/sonner';
-import { Ionicons } from '@expo/vector-icons';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const PremiumSubscriptionScreen = ({
-  onClose,
-  theme,
-  navigate,
-  goBack
-}) => {
-  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 isDarkTheme = theme === 'dark';
-  const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
-  const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
-  const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#F5F5F5';
-  const borderColor = isDarkTheme ? '#444444' : '#E0E0E0';
-  const primaryColor = '#007AFF';
-  const successColor = '#30D158';
-  const warningColor = '#FF9500';
-  const dangerColor = '#FF3B30';
-
-  // 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(`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('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('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('Payment failed. Please try again.');
-    } finally {
-      setProcessingPayment(false);
-    }
-  };
-  const handleCancelSubscription = () => {
-    Alert.alert('Cancel Subscription', 'Are you sure you want to cancel your subscription? You will lose access to premium features at the end of your current billing period.', [{
-      text: 'Keep Subscription',
-      style: 'cancel'
-    }, {
-      text: 'Cancel Subscription',
-      style: 'destructive',
-      onPress: async () => {
-        try {
-          // Mock cancellation
-          setSubscription(prev => prev ? {
-            ...prev,
-            cancelAtPeriodEnd: true
-          } : null);
-          toast.success('Subscription will be canceled at the end of the billing period');
-        } catch (error) {
-          toast.error('Failed to cancel subscription');
-        }
-      }
-    }]);
-  };
-  const handleReactivateSubscription = async () => {
-    try {
-      setSubscription(prev => prev ? {
-        ...prev,
-        cancelAtPeriodEnd: false
-      } : null);
-      toast.success('Subscription reactivated successfully');
-    } catch (error) {
-      toast.error('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(`Subscribed to ${feature?.name} successfully!`);
-    } catch (error) {
-      console.error('Feature subscription failed:', error);
-      toast.error('Feature subscription failed. Please try again.');
-    } finally {
-      setProcessingPayment(false);
-    }
-  };
-  const handleFeatureUnsubscribe = async featureId => {
-    const feature = individualFeatures.find(f => f.id === featureId);
-    Alert.alert('Unsubscribe Feature', `Are you sure you want to unsubscribe from ${feature?.name}?`, [{
-      text: 'Keep Feature',
-      style: 'cancel'
-    }, {
-      text: 'Unsubscribe',
-      style: 'destructive',
-      onPress: async () => {
-        try {
-          setIndividualFeatures(prev => prev.map(f => f.id === featureId ? {
-            ...f,
-            isSubscribed: false
-          } : f));
-          toast.success(`Unsubscribed from ${feature?.name}`);
-        } catch (error) {
-          toast.error('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: "Oxy+ Subscriptions"
-        }), /*#__PURE__*/_jsxs(Text, {
-          style: [styles.currentAppText, {
-            color: isDarkTheme ? '#BBBBBB' : '#666666'
-          }],
-          children: ["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: "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__*/_jsxs(Text, {
-          style: [styles.subscriptionDetail, {
-            color: isDarkTheme ? '#BBBBBB' : '#666666'
-          }],
-          children: ["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__*/_jsxs(Text, {
-            style: [styles.cancelText, {
-              color: warningColor
-            }],
-            children: ["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: "Reactivate"
-            })
-          }) : /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.actionButton, {
-              backgroundColor: dangerColor
-            }],
-            onPress: handleCancelSubscription,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.actionButtonText,
-              children: "Cancel Subscription"
-            })
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.actionButton, styles.secondaryButton, {
-              borderColor
-            }],
-            onPress: () => navigate && navigate('BillingManagement'),
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.actionButtonText, {
-                color: textColor
-              }],
-              children: "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: "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: "Yearly"
-        })
-      })]
-    }), billingInterval === 'year' && /*#__PURE__*/_jsx(Text, {
-      style: [styles.savingsText, {
-        color: successColor
-      }],
-      children: "\uD83D\uDCB0 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 'Works across all Oxy apps';
-      } else if (isAppSpecific) {
-        const appName = plan.applicableApps[0];
-        return `Exclusive to ${appName} app`;
-      } else {
-        return `Available in: ${plan.applicableApps.join(', ')}`;
-      }
-    };
-    const getAvailabilityStatus = () => {
-      if (isAppSpecific && !isAvailableForCurrentApp) {
-        const requiredApp = plan.applicableApps[0];
-        return {
-          available: false,
-          reason: `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 ? 'App Exclusive' : '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__*/_jsxs(Text, {
-          style: [styles.planInterval, {
-            color: isDarkTheme ? '#BBBBBB' : '#666666'
-          }],
-          children: ["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: "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: "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__*/_jsxs(Text, {
-          style: [styles.selectPlanText, {
-            color: plan.isPopular ? '#FFFFFF' : textColor
-          }],
-          children: ["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: "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: "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 'Available across all Oxy apps';
-      } else {
-        return `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__*/_jsxs(Text, {
-          style: [styles.featureInterval, {
-            color: isDarkTheme ? '#BBBBBB' : '#666666'
-          }],
-          children: ["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: "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: "Subscribed"
-          })]
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.unsubscribeButton, {
-            borderColor: dangerColor
-          }],
-          onPress: () => handleFeatureUnsubscribe(feature.id),
-          children: /*#__PURE__*/_jsx(Text, {
-            style: [styles.unsubscribeText, {
-              color: dangerColor
-            }],
-            children: "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: "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);
-              console.log('Switched to app context:', 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: "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: "Choose Your Plan"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.sectionSubtitle, {
-            color: isDarkTheme ? '#BBBBBB' : '#666666'
-          }],
-          children: "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: "Available Plans"
-        }), plans.map(renderPlanCard)]
-      }) : renderIndividualFeatures(), /*#__PURE__*/_jsxs(View, {
-        style: styles.section,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.sectionTitle, {
-            color: textColor
-          }],
-          children: "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: "Enhanced Performance"
-              }), /*#__PURE__*/_jsx(Text, {
-                style: [styles.benefitDescription, {
-                  color: isDarkTheme ? '#BBBBBB' : '#666666'
-                }],
-                children: "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: "Advanced Security"
-              }), /*#__PURE__*/_jsx(Text, {
-                style: [styles.benefitDescription, {
-                  color: isDarkTheme ? '#BBBBBB' : '#666666'
-                }],
-                children: "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: "Priority Support"
-              }), /*#__PURE__*/_jsx(Text, {
-                style: [styles.benefitDescription, {
-                  color: isDarkTheme ? '#BBBBBB' : '#666666'
-                }],
-                children: "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,
-    marginBottom: 20
-  },
-  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