@oxyhq/services 30.0.0 → 30.1.0

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

@@ -0,0 +1,953 @@
+"use strict";
+
+import { useState, useEffect, useCallback } from 'react';
+import { View, ScrollView, ActivityIndicator } from 'react-native';
+import { toast } from '@oxyhq/bloom/toast';
+import { surfaces } from '@oxyhq/bloom/surfaces';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { Button } from '@oxyhq/bloom/button';
+import { Chip } from '@oxyhq/bloom/chip';
+import { Badge } from '@oxyhq/bloom/badge';
+import { Card, CardBody } from '@oxyhq/bloom/card';
+import { H2, H4, H5, Text } from '@oxyhq/bloom/typography';
+import { BenefitList, BenefitRow } from '@oxyhq/bloom/benefit-list';
+import { SegmentedControl, SegmentedControlItem, SegmentedControlItemText } from '@oxyhq/bloom/segmented-control';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { useI18n } from "../hooks/useI18n.js";
+import { useSurfaceHeader } from "../hooks/useSurfaceHeader.js";
+import { useOxy } from "../context/OxyContext.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const TAB_PLANS = 'plans';
+const TAB_FEATURES = 'features';
+const BILLING_MONTH = 'month';
+const BILLING_YEAR = 'year';
+/** Yearly billing discount applied when extrapolating a monthly price. */
+const YEARLY_DISCOUNT = 0.8;
+const MONTHS_PER_YEAR = 12;
+/** Simulated payment latency for the mocked subscribe/feature flows (ms). */
+const SUBSCRIBE_DELAY_MS = 2000;
+const FEATURE_DELAY_MS = 1500;
+/** One subscription period for the mocked renewal date (30 days, in ms). */
+const PERIOD_MS = 30 * 24 * 60 * 60 * 1000;
+const FEATURE_CATEGORIES = ['analytics', 'customization', 'content', 'networking', 'productivity'];
+
+// Pure package-name → display-name mapping (module scope so the nav-header
+// subtitle can reference it before the component's render helpers).
+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;
+};
+const PremiumSubscriptionScreen = ({
+  onClose,
+  navigate,
+  goBack
+}) => {
+  // Premium state belongs to the ACTIVE account (the org/project/bot when
+  // switched, else the personal user), not the device-session owner.
+  const {
+    user
+  } = 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(BILLING_MONTH);
+  const [activeTab, setActiveTab] = useState(TAB_PLANS);
+  const [currentAppPackage, setCurrentAppPackage] = useState('mention'); // Default to mention for demo
+
+  const {
+    t
+  } = useI18n();
+  useSurfaceHeader({
+    title: t('premium.title') || 'Oxy+ Subscriptions',
+    subtitle: t('premium.forApp', {
+      app: getAppDisplayName(currentAppPackage)
+    }) || `for ${getAppDisplayName(currentAppPackage)}`
+  });
+  const bloomTheme = useTheme();
+  const colors = bloomTheme.colors;
+
+  // 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]);
+  const detectCurrentApp = () => {
+    const detectedApp = 'mention';
+    setCurrentAppPackage(detectedApp);
+  };
+  const loadSubscriptionData = async () => {
+    try {
+      setLoading(true);
+      const availablePlans = mockPlans.filter(plan => plan.applicableApps.includes(currentAppPackage));
+      setPlans(availablePlans);
+      let currentSubscription = null;
+      if (user?.isPremium) {
+        currentSubscription = {
+          id: 'sub_12345',
+          planId: 'oxy-insider',
+          status: 'active',
+          currentPeriodStart: new Date().toISOString(),
+          currentPeriodEnd: new Date(Date.now() + PERIOD_MS).toISOString(),
+          cancelAtPeriodEnd: false
+        };
+        setSubscription(currentSubscription);
+      }
+      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
+        };
+      });
+      setIndividualFeatures(updatedFeatures);
+    } catch (error) {
+      if (__DEV__) {
+        console.error('Failed to load subscription data:', error);
+      }
+      toast.error('Failed to load subscription information');
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleSubscribe = async planId => {
+    try {
+      const planToSubscribe = mockPlans.find(plan => plan.id === planId);
+      if (!planToSubscribe?.applicableApps.includes(currentAppPackage)) {
+        toast.error(t('premium.toasts.planUnavailable', {
+          app: currentAppPackage
+        }) || `This plan is not available for the current app (${currentAppPackage})`);
+        return;
+      }
+      if (planId === 'mention-plus' && currentAppPackage !== 'mention') {
+        toast.error(t('premium.toasts.mentionOnly') || 'Mention+ is only available in the Mention app');
+        return;
+      }
+      setSelectedPlan(planId);
+      setProcessingPayment(true);
+      await new Promise(resolve => setTimeout(resolve, SUBSCRIBE_DELAY_MS));
+      toast.success(t('premium.toasts.activated') || 'Subscription activated successfully!');
+      setSubscription({
+        id: `sub_${Date.now()}`,
+        planId,
+        status: 'active',
+        currentPeriodStart: new Date().toISOString(),
+        currentPeriodEnd: new Date(Date.now() + PERIOD_MS).toISOString(),
+        cancelAtPeriodEnd: false
+      });
+      loadSubscriptionData();
+    } catch (error) {
+      if (__DEV__) {
+        console.error('Payment failed:', error);
+      }
+      toast.error(t('premium.toasts.paymentFailed') || 'Payment failed. Please try again.');
+    } finally {
+      setProcessingPayment(false);
+    }
+  };
+  const handleCancelSubscription = useCallback(async () => {
+    const confirmed = await surfaces.confirm({
+      title: t('premium.confirms.cancelSubTitle') || 'Cancel Subscription',
+      description: 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.',
+      confirmLabel: t('premium.actions.cancelSubBtn') || 'Cancel Subscription',
+      cancelLabel: t('common.cancel') || 'Cancel',
+      destructive: true
+    });
+    if (!confirmed) return;
+    try {
+      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');
+    }
+  }, [t]);
+  const handleReactivateSubscription = useCallback(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');
+    }
+  }, [t]);
+  const formatPrice = (price, interval) => {
+    const yearlyPrice = interval === 'year' ? price : price * MONTHS_PER_YEAR * YEARLY_DISCOUNT;
+    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 {
+      const featureToSubscribe = mockIndividualFeatures.find(feature => feature.id === featureId);
+      if (!featureToSubscribe?.applicableApps.includes(currentAppPackage)) {
+        toast.error(`This feature is not available for the current app (${currentAppPackage})`);
+        return;
+      }
+      if (featureToSubscribe.appScope === 'specific') {
+        const hasExactMatch = featureToSubscribe.applicableApps.length === 1 && featureToSubscribe.applicableApps[0] === currentAppPackage;
+        if (!hasExactMatch && featureToSubscribe.applicableApps.length === 1) {
+          const requiredApp = featureToSubscribe.applicableApps[0];
+          toast.error(`${featureToSubscribe.name} is only available in the ${requiredApp} app`);
+          return;
+        }
+      }
+      setProcessingPayment(true);
+      await new Promise(resolve => setTimeout(resolve, FEATURE_DELAY_MS));
+      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) {
+      if (__DEV__) {
+        console.error('Feature subscription failed:', error);
+      }
+      toast.error(t('premium.toasts.featureSubscribeFailed') || 'Feature subscription failed. Please try again.');
+    } finally {
+      setProcessingPayment(false);
+    }
+  };
+  const handleFeatureUnsubscribe = useCallback(async featureId => {
+    const feature = individualFeatures.find(f => f.id === featureId);
+    const confirmed = await surfaces.confirm({
+      title: t('premium.confirms.unsubscribeFeatureTitle') || 'Unsubscribe from Feature',
+      description: feature ? t('premium.confirms.unsubscribeFeature', {
+        name: feature.name
+      }) ?? `Are you sure you want to unsubscribe from ${feature.name}?` : '',
+      confirmLabel: t('premium.actions.unsubscribe') || 'Unsubscribe',
+      cancelLabel: t('common.cancel') || 'Cancel',
+      destructive: true
+    });
+    if (!confirmed) return;
+    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');
+    }
+  }, [individualFeatures, t]);
+  const renderCurrentSubscription = () => {
+    if (!subscription) return null;
+    const currentPlan = getCurrentPlan();
+    if (!currentPlan) return null;
+    const statusChipColor = subscription.status === 'active' ? 'success' : subscription.status === 'trialing' ? 'warning' : 'error';
+    return /*#__PURE__*/_jsxs(View, {
+      className: "mb-space-24",
+      children: [/*#__PURE__*/_jsx(H5, {
+        className: "text-text mb-space-12",
+        children: t('premium.current.title') || 'Current Subscription'
+      }), /*#__PURE__*/_jsx(Card, {
+        variant: "outlined",
+        children: /*#__PURE__*/_jsxs(CardBody, {
+          style: {
+            padding: 20
+          },
+          children: [/*#__PURE__*/_jsxs(View, {
+            className: "flex-row justify-between items-start mb-space-12",
+            children: [/*#__PURE__*/_jsxs(View, {
+              className: "flex-1 pr-space-12",
+              children: [/*#__PURE__*/_jsx(H4, {
+                className: "text-text",
+                numberOfLines: 1,
+                children: currentPlan.name
+              }), /*#__PURE__*/_jsx(Text, {
+                className: "text-text-secondary text-sm mt-space-2",
+                children: `$${currentPlan.price}/month`
+              })]
+            }), /*#__PURE__*/_jsx(Badge, {
+              variant: "subtle",
+              color: statusChipColor,
+              size: "large",
+              content: subscription.status.toUpperCase()
+            })]
+          }), /*#__PURE__*/_jsx(Text, {
+            className: "text-text-secondary text-sm mb-space-16",
+            children: t('premium.current.renewsOn', {
+              date: new Date(subscription.currentPeriodEnd).toLocaleDateString()
+            }) || `Renews on ${new Date(subscription.currentPeriodEnd).toLocaleDateString()}`
+          }), subscription.cancelAtPeriodEnd && /*#__PURE__*/_jsxs(View, {
+            className: "flex-row items-center bg-fill-secondary rounded-radius-12 p-space-12 mb-space-16",
+            children: [/*#__PURE__*/_jsx(Ionicons, {
+              name: "warning",
+              size: 16,
+              color: colors.warning
+            }), /*#__PURE__*/_jsx(Text, {
+              className: "text-text-secondary text-sm ml-space-8 flex-1",
+              children: t('premium.current.willCancelOn', {
+                date: new Date(subscription.currentPeriodEnd).toLocaleDateString()
+              }) || `Subscription will cancel on ${new Date(subscription.currentPeriodEnd).toLocaleDateString()}`
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            className: "flex-row gap-space-12",
+            children: [subscription.cancelAtPeriodEnd ? /*#__PURE__*/_jsx(Button, {
+              variant: "primary",
+              onPress: handleReactivateSubscription,
+              className: "flex-1",
+              accessibilityLabel: t('premium.actions.reactivate') || 'Reactivate',
+              children: t('premium.actions.reactivate') || 'Reactivate'
+            }) : /*#__PURE__*/_jsx(Button, {
+              variant: "destructive",
+              onPress: handleCancelSubscription,
+              className: "flex-1",
+              accessibilityLabel: t('premium.actions.cancelSubBtn') || 'Cancel Subscription',
+              children: t('premium.actions.cancelSubBtn') || 'Cancel Subscription'
+            }), /*#__PURE__*/_jsx(Button, {
+              variant: "outline",
+              onPress: () => navigate?.('PaymentGateway'),
+              className: "flex-1",
+              accessibilityLabel: t('premium.actions.manageBilling') || 'Manage Billing',
+              children: t('premium.actions.manageBilling') || 'Manage Billing'
+            })]
+          })]
+        })
+      })]
+    });
+  };
+  const renderBillingToggle = () => /*#__PURE__*/_jsxs(View, {
+    className: "mb-space-24",
+    children: [/*#__PURE__*/_jsxs(SegmentedControl, {
+      label: t('premium.billing.label') || 'Billing period',
+      type: "tabs",
+      value: billingInterval,
+      onChange: setBillingInterval,
+      children: [/*#__PURE__*/_jsx(SegmentedControlItem, {
+        value: BILLING_MONTH,
+        children: /*#__PURE__*/_jsx(SegmentedControlItemText, {
+          children: t('premium.billing.monthly') || 'Monthly'
+        })
+      }), /*#__PURE__*/_jsx(SegmentedControlItem, {
+        value: BILLING_YEAR,
+        children: /*#__PURE__*/_jsx(SegmentedControlItemText, {
+          children: t('premium.billing.yearly') || 'Yearly'
+        })
+      })]
+    }), billingInterval === 'year' && /*#__PURE__*/_jsx(Text, {
+      className: "text-text-secondary text-sm text-center mt-space-12 font-medium",
+      children: t('premium.billing.saveYearly') || 'Save 20% with yearly billing'
+    })]
+  });
+  const renderPlanCard = plan => {
+    const pricing = formatPrice(plan.price, plan.interval);
+    const isSelected = selectedPlan === plan.id;
+    const isCurrentPlan = subscription?.planId === plan.id;
+    const isAppSpecific = plan.appScope === 'specific' && plan.applicableApps.length === 1;
+    const isAvailableForCurrentApp = plan.applicableApps.includes(currentAppPackage);
+    const getAppScopeText = () => {
+      if (plan.appScope === 'ecosystem') {
+        return t('premium.plan.scope.allApps') || 'Works across all Oxy apps';
+      }
+      if (isAppSpecific) {
+        const appName = plan.applicableApps[0];
+        return t('premium.plan.scope.exclusive', {
+          app: appName
+        }) || `Exclusive to ${appName} app`;
+      }
+      return t('premium.plan.scope.availableIn', {
+        apps: plan.applicableApps.join(', ')
+      }) || `Available in: ${plan.applicableApps.join(', ')}`;
+    };
+    const getAvailabilityStatus = () => {
+      if (isAppSpecific && !isAvailableForCurrentApp) {
+        const requiredApp = plan.applicableApps[0];
+        return {
+          available: false,
+          reason: t('premium.plan.scope.exclusive', {
+            app: requiredApp
+          }) || `Only available in ${requiredApp} app`
+        };
+      }
+      return {
+        available: true,
+        reason: null
+      };
+    };
+    const availability = getAvailabilityStatus();
+    return /*#__PURE__*/_jsx(Card, {
+      variant: "outlined",
+      style: [{
+        marginBottom: 16
+      }, !availability.available ? {
+        opacity: 0.6
+      } : null, isSelected || plan.isPopular ? {
+        borderColor: colors.primary,
+        borderWidth: 2
+      } : null],
+      children: /*#__PURE__*/_jsxs(CardBody, {
+        style: {
+          padding: 20
+        },
+        children: [/*#__PURE__*/_jsxs(View, {
+          className: "flex-row flex-wrap gap-space-8 mb-space-12",
+          children: [plan.isPopular && /*#__PURE__*/_jsx(Badge, {
+            variant: "solid",
+            color: "primary",
+            size: "large",
+            content: t('premium.plan.badge.mostPopular') || 'Most Popular'
+          }), isAppSpecific && /*#__PURE__*/_jsx(Badge, {
+            variant: "subtle",
+            color: isAvailableForCurrentApp ? 'success' : 'warning',
+            size: "large",
+            content: isAvailableForCurrentApp ? t('premium.plan.badge.appExclusive') || 'App Exclusive' : t('premium.plan.badge.notAvailable') || 'Not Available'
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          className: "mb-space-16",
+          children: [/*#__PURE__*/_jsx(H4, {
+            className: "text-text mb-space-4",
+            children: plan.name
+          }), /*#__PURE__*/_jsx(Text, {
+            className: "text-text-secondary text-sm",
+            children: plan.description
+          }), /*#__PURE__*/_jsx(Text, {
+            className: "text-text-tertiary text-xs mt-space-4 italic",
+            children: getAppScopeText()
+          }), !availability.available && /*#__PURE__*/_jsx(Text, {
+            className: "text-xs mt-space-4 font-medium",
+            style: {
+              color: colors.error
+            },
+            children: availability.reason
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          className: "flex-row items-baseline mb-space-20",
+          children: [/*#__PURE__*/_jsx(H2, {
+            className: "text-text",
+            children: pricing.formatted
+          }), /*#__PURE__*/_jsx(Text, {
+            className: "text-text-secondary text-sm ml-space-4",
+            children: t('premium.plan.perInterval', {
+              interval: pricing.interval
+            }) || `per ${pricing.interval}`
+          })]
+        }), /*#__PURE__*/_jsx(BenefitList, {
+          className: "mb-space-24",
+          children: plan.features.map(feature => /*#__PURE__*/_jsx(BenefitRow, {
+            icon: /*#__PURE__*/_jsx(Ionicons, {
+              name: "checkmark",
+              size: 18,
+              color: colors.success
+            }),
+            label: feature
+          }, feature))
+        }), isCurrentPlan ? /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          disabled: true,
+          icon: /*#__PURE__*/_jsx(Ionicons, {
+            name: "checkmark-circle",
+            size: 18,
+            color: colors.success
+          }),
+          accessibilityLabel: t('premium.plan.current') || 'Current Plan',
+          className: "w-full",
+          children: t('premium.plan.current') || 'Current Plan'
+        }) : !availability.available ? /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          disabled: true,
+          accessibilityLabel: t('premium.plan.notAvailableInApp') || 'Not Available in Current App',
+          className: "w-full",
+          children: t('premium.plan.notAvailableInApp') || 'Not Available in Current App'
+        }) : /*#__PURE__*/_jsx(Button, {
+          variant: plan.isPopular ? 'primary' : 'secondary',
+          onPress: () => handleSubscribe(plan.id),
+          disabled: processingPayment,
+          loading: processingPayment && isSelected,
+          accessibilityLabel: t('premium.actions.subscribeTo', {
+            name: plan.name
+          }) || `Subscribe to ${plan.name}`,
+          className: "w-full",
+          children: t('premium.actions.subscribeTo', {
+            name: plan.name
+          }) || `Subscribe to ${plan.name}`
+        })]
+      })
+    }, plan.id);
+  };
+  const renderTabNavigation = () => /*#__PURE__*/_jsx(View, {
+    className: "mb-space-24",
+    children: /*#__PURE__*/_jsxs(SegmentedControl, {
+      label: t('premium.tabs.label') || 'Subscription type',
+      type: "tabs",
+      value: activeTab,
+      onChange: setActiveTab,
+      children: [/*#__PURE__*/_jsx(SegmentedControlItem, {
+        value: TAB_PLANS,
+        children: /*#__PURE__*/_jsx(SegmentedControlItemText, {
+          children: t('premium.tabs.plans') || 'Full Plans'
+        })
+      }), /*#__PURE__*/_jsx(SegmentedControlItem, {
+        value: TAB_FEATURES,
+        children: /*#__PURE__*/_jsx(SegmentedControlItemText, {
+          children: t('premium.tabs.features') || 'Individual Features'
+        })
+      })]
+    })
+  });
+  const renderFeatureCard = feature => {
+    const pricing = formatPrice(feature.price, feature.interval);
+    const isSubscribed = feature.isSubscribed;
+    const isIncludedInCurrentPlan = feature.isIncludedInCurrentPlan;
+    const canPurchase = feature.canBePurchasedSeparately && !isIncludedInCurrentPlan;
+    const getCategoryColor = category => {
+      switch (category) {
+        case 'analytics':
+          return colors.warning;
+        case 'customization':
+          return colors.secondary;
+        case 'content':
+          return colors.success;
+        case 'networking':
+          return colors.info;
+        case 'productivity':
+          return colors.error;
+        default:
+          return colors.primary;
+      }
+    };
+    const getCategoryIcon = category => {
+      switch (category) {
+        case 'analytics':
+          return 'analytics';
+        case 'customization':
+          return 'color-palette';
+        case 'content':
+          return 'document-text';
+        case 'networking':
+          return 'people';
+        case 'productivity':
+          return 'briefcase';
+        default:
+          return 'star';
+      }
+    };
+    const getAppScopeText = () => {
+      if (feature.appScope === 'ecosystem') {
+        return t('premium.feature.scope.allApps');
+      }
+      return t('premium.feature.scope.availableIn', {
+        apps: feature.applicableApps.join(', ')
+      }) || `Available in: ${feature.applicableApps.join(', ')}`;
+    };
+    return /*#__PURE__*/_jsx(Card, {
+      variant: "outlined",
+      style: [{
+        marginBottom: 12
+      }, isIncludedInCurrentPlan ? {
+        borderColor: colors.primary,
+        borderWidth: 2
+      } : isSubscribed ? {
+        borderColor: colors.success,
+        borderWidth: 2
+      } : null],
+      children: /*#__PURE__*/_jsxs(CardBody, {
+        style: {
+          padding: 16
+        },
+        children: [/*#__PURE__*/_jsxs(View, {
+          className: "flex-row items-start mb-space-12",
+          children: [/*#__PURE__*/_jsx(View, {
+            className: "bg-fill-secondary rounded-radius-max items-center justify-center mr-space-12",
+            style: {
+              width: 40,
+              height: 40
+            },
+            children: /*#__PURE__*/_jsx(Ionicons, {
+              name: getCategoryIcon(feature.category),
+              size: 24,
+              color: getCategoryColor(feature.category)
+            })
+          }), /*#__PURE__*/_jsxs(View, {
+            className: "flex-1",
+            children: [/*#__PURE__*/_jsxs(View, {
+              className: "flex-row items-center justify-between mb-space-4",
+              children: [/*#__PURE__*/_jsx(H5, {
+                className: "text-text flex-1 pr-space-8",
+                numberOfLines: 1,
+                children: feature.name
+              }), isIncludedInCurrentPlan && /*#__PURE__*/_jsx(Badge, {
+                variant: "solid",
+                color: "primary",
+                size: "large",
+                content: t('premium.feature.included') || 'Included'
+              })]
+            }), /*#__PURE__*/_jsx(Text, {
+              className: "text-text-secondary text-sm",
+              children: feature.description
+            }), /*#__PURE__*/_jsx(Text, {
+              className: "text-text-tertiary text-xs mt-space-4 italic",
+              children: getAppScopeText()
+            })]
+          })]
+        }), !isIncludedInCurrentPlan && /*#__PURE__*/_jsxs(View, {
+          className: "items-center mb-space-16",
+          children: [/*#__PURE__*/_jsx(H4, {
+            className: "text-text",
+            children: pricing.formatted
+          }), /*#__PURE__*/_jsx(Text, {
+            className: "text-text-secondary text-sm mt-space-2",
+            children: t('premium.plan.perInterval', {
+              interval: pricing.interval
+            }) || `per ${pricing.interval}`
+          })]
+        }), isIncludedInCurrentPlan ? /*#__PURE__*/_jsx(Button, {
+          variant: "primary",
+          disabled: true,
+          icon: /*#__PURE__*/_jsx(Ionicons, {
+            name: "checkmark-circle",
+            size: 16,
+            color: colors.primaryForeground
+          }),
+          accessibilityLabel: t('premium.feature.includedInPlan') || 'Included in your plan',
+          className: "w-full",
+          children: t('premium.feature.includedInPlan') || 'Included in your plan'
+        }) : isSubscribed ? /*#__PURE__*/_jsxs(View, {
+          className: "flex-row gap-space-8",
+          children: [/*#__PURE__*/_jsx(Button, {
+            variant: "secondary",
+            disabled: true,
+            icon: /*#__PURE__*/_jsx(Ionicons, {
+              name: "checkmark",
+              size: 16,
+              color: colors.success
+            }),
+            accessibilityLabel: t('premium.feature.subscribed') || 'Subscribed',
+            className: "flex-1",
+            children: t('premium.feature.subscribed') || 'Subscribed'
+          }), /*#__PURE__*/_jsx(Button, {
+            variant: "outline",
+            onPress: () => handleFeatureUnsubscribe(feature.id),
+            accessibilityLabel: t('premium.actions.unsubscribe') || 'Unsubscribe',
+            className: "flex-1",
+            children: t('premium.actions.unsubscribe') || 'Unsubscribe'
+          })]
+        }) : canPurchase ? /*#__PURE__*/_jsx(Button, {
+          variant: "primary",
+          onPress: () => handleFeatureSubscribe(feature.id),
+          disabled: processingPayment,
+          loading: processingPayment,
+          accessibilityLabel: t('premium.actions.subscribe') || 'Subscribe',
+          className: "w-full",
+          children: t('premium.actions.subscribe') || 'Subscribe'
+        }) : /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          disabled: true,
+          accessibilityLabel: t('premium.feature.plansOnly') || 'Only available in subscription plans',
+          className: "w-full",
+          children: t('premium.feature.plansOnly') || 'Only available in subscription plans'
+        })]
+      })
+    }, feature.id);
+  };
+  const renderIndividualFeatures = () => /*#__PURE__*/_jsxs(View, {
+    className: "mb-space-24",
+    children: [/*#__PURE__*/_jsx(H4, {
+      className: "text-text mb-space-8",
+      children: t('premium.features.title') || 'Individual Features'
+    }), /*#__PURE__*/_jsx(Text, {
+      className: "text-text-secondary text-base mb-space-16",
+      children: t('premium.features.subtitle') || 'Subscribe to specific features you need. Some features are included in subscription plans.'
+    }), FEATURE_CATEGORIES.map(category => {
+      const categoryFeatures = individualFeatures.filter(f => f.category === category);
+      if (categoryFeatures.length === 0) return null;
+      return /*#__PURE__*/_jsxs(View, {
+        className: "mb-space-24",
+        children: [/*#__PURE__*/_jsx(H5, {
+          className: "text-text mb-space-12",
+          children: category.charAt(0).toUpperCase() + category.slice(1)
+        }), categoryFeatures.map(renderFeatureCard)]
+      }, category);
+    })]
+  });
+
+  // Show different app contexts for testing (development only).
+  const [showAppSwitcher] = useState(__DEV__);
+  const renderAppSwitcher = () => {
+    if (!showAppSwitcher) return null;
+    const testApps = ['mention', 'oxy-social', 'oxy-workspace', 'oxy-creator'];
+    return /*#__PURE__*/_jsxs(View, {
+      className: "bg-fill-secondary border border-border-image rounded-radius-12 p-space-16 mb-space-24",
+      children: [/*#__PURE__*/_jsx(Text, {
+        className: "text-text-secondary text-sm font-medium mb-space-12",
+        children: t('premium.dev.appContext') || 'Test App Context (Dev Only)'
+      }), /*#__PURE__*/_jsx(ScrollView, {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        children: /*#__PURE__*/_jsx(View, {
+          className: "flex-row gap-space-8",
+          children: testApps.map(app => /*#__PURE__*/_jsx(Chip, {
+            variant: currentAppPackage === app ? 'solid' : 'outlined',
+            color: "primary",
+            onPress: () => setCurrentAppPackage(app),
+            children: app
+          }, app))
+        })
+      })]
+    });
+  };
+  if (loading) {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: /*#__PURE__*/_jsxs(View, {
+        className: "items-center justify-center px-screen-margin py-space-40",
+        children: [/*#__PURE__*/_jsx(ActivityIndicator, {
+          size: "large",
+          color: colors.primary
+        }), /*#__PURE__*/_jsx(Text, {
+          className: "text-text-secondary text-base text-center mt-space-16",
+          children: t('premium.loading') || 'Loading subscription plans...'
+        })]
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(View, {
+      className: "px-screen-margin pb-space-32",
+      children: /*#__PURE__*/_jsxs(View, {
+        className: "pt-space-20",
+        children: [renderAppSwitcher(), subscription && renderCurrentSubscription(), !subscription && /*#__PURE__*/_jsxs(View, {
+          className: "mb-space-24",
+          children: [/*#__PURE__*/_jsx(H2, {
+            className: "text-text mb-space-8",
+            children: t('premium.choosePlan') || 'Choose Your Plan'
+          }), /*#__PURE__*/_jsx(Text, {
+            className: "text-text-secondary text-base",
+            children: t('premium.choosePlanSubtitle') || 'Unlock premium features and take your experience to the next level'
+          })]
+        }), !subscription && renderTabNavigation(), !subscription && activeTab === TAB_PLANS && renderBillingToggle(), activeTab === TAB_PLANS ? /*#__PURE__*/_jsxs(View, {
+          className: "mb-space-24",
+          children: [!subscription && /*#__PURE__*/_jsx(H4, {
+            className: "text-text mb-space-12",
+            children: t('premium.availablePlans') || 'Available Plans'
+          }), plans.map(renderPlanCard)]
+        }) : renderIndividualFeatures(), /*#__PURE__*/_jsxs(View, {
+          className: "mb-space-24",
+          children: [/*#__PURE__*/_jsx(H4, {
+            className: "text-text mb-space-12",
+            children: t('premium.why') || 'Why Go Premium?'
+          }), /*#__PURE__*/_jsx(BenefitList, {
+            children: [{
+              icon: 'flash',
+              color: colors.primary,
+              title: t('premium.benefits.performance.title') || 'Enhanced Performance',
+              desc: t('premium.benefits.performance.desc') || 'Faster processing and priority access to our servers'
+            }, {
+              icon: 'shield-checkmark',
+              color: colors.success,
+              title: t('premium.benefits.security.title') || 'Advanced Security',
+              desc: t('premium.benefits.security.desc') || 'Enhanced encryption and security features'
+            }, {
+              icon: 'headset',
+              color: colors.warning,
+              title: t('premium.benefits.support.title') || 'Priority Support',
+              desc: t('premium.benefits.support.desc') || 'Get help faster with our premium support team'
+            }].map(benefit => /*#__PURE__*/_jsxs(BenefitRow, {
+              icon: /*#__PURE__*/_jsx(Ionicons, {
+                name: benefit.icon,
+                size: 18,
+                color: benefit.color
+              }),
+              accessibilityLabel: `${benefit.title}. ${benefit.desc}`,
+              children: [/*#__PURE__*/_jsx(Text, {
+                className: "text-text font-medium text-sm",
+                children: benefit.title
+              }), `\n${benefit.desc}`]
+            }, benefit.title))
+          })]
+        })]
+      })
+    })
+  });
+};
+export default PremiumSubscriptionScreen;
+//# sourceMappingURL=PremiumSubscriptionScreen.js.map