@oxyhq/services 28.0.0 → 30.0.0

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

@@ -1,958 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _toast = require("@oxyhq/bloom/toast");
-var _surfaces = require("@oxyhq/bloom/surfaces");
-var _theme = require("@oxyhq/bloom/theme");
-var _button = require("@oxyhq/bloom/button");
-var _chip = require("@oxyhq/bloom/chip");
-var _badge = require("@oxyhq/bloom/badge");
-var _card = require("@oxyhq/bloom/card");
-var _typography = require("@oxyhq/bloom/typography");
-var _benefitList = require("@oxyhq/bloom/benefit-list");
-var _segmentedControl = require("@oxyhq/bloom/segmented-control");
-var _Ionicons = _interopRequireDefault(require("@expo/vector-icons/Ionicons"));
-var _useI18n = require("../hooks/useI18n.js");
-var _useSurfaceHeader = require("../hooks/useSurfaceHeader.js");
-var _OxyContext = require("../context/OxyContext.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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
-  } = (0, _OxyContext.useOxy)();
-  const [loading, setLoading] = (0, _react.useState)(true);
-  const [subscription, setSubscription] = (0, _react.useState)(null);
-  const [plans, setPlans] = (0, _react.useState)([]);
-  const [individualFeatures, setIndividualFeatures] = (0, _react.useState)([]);
-  const [selectedPlan, setSelectedPlan] = (0, _react.useState)(null);
-  const [processingPayment, setProcessingPayment] = (0, _react.useState)(false);
-  const [billingInterval, setBillingInterval] = (0, _react.useState)(BILLING_MONTH);
-  const [activeTab, setActiveTab] = (0, _react.useState)(TAB_PLANS);
-  const [currentAppPackage, setCurrentAppPackage] = (0, _react.useState)('mention'); // Default to mention for demo
-
-  const {
-    t
-  } = (0, _useI18n.useI18n)();
-  (0, _useSurfaceHeader.useSurfaceHeader)({
-    title: t('premium.title') || 'Oxy+ Subscriptions',
-    subtitle: t('premium.forApp', {
-      app: getAppDisplayName(currentAppPackage)
-    }) || `for ${getAppDisplayName(currentAppPackage)}`
-  });
-  const bloomTheme = (0, _theme.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']
-  }];
-  (0, _react.useEffect)(() => {
-    detectCurrentApp();
-  }, []);
-  (0, _react.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.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.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.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.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.toast.error(t('premium.toasts.paymentFailed') || 'Payment failed. Please try again.');
-    } finally {
-      setProcessingPayment(false);
-    }
-  };
-  const handleCancelSubscription = (0, _react.useCallback)(async () => {
-    const confirmed = await _surfaces.surfaces.confirm({
-      title: t('premium.confirms.cancelSubTitle') || 'Cancel Subscription',
-      message: 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.toast.success(t('premium.toasts.willCancel') || 'Subscription will be canceled at the end of the billing period');
-    } catch (error) {
-      _toast.toast.error(t('premium.toasts.cancelFailed') || 'Failed to cancel subscription');
-    }
-  }, [t]);
-  const handleReactivateSubscription = (0, _react.useCallback)(async () => {
-    try {
-      setSubscription(prev => prev ? {
-        ...prev,
-        cancelAtPeriodEnd: false
-      } : null);
-      _toast.toast.success(t('premium.toasts.reactivated') || 'Subscription reactivated successfully');
-    } catch (error) {
-      _toast.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.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.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.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.toast.error(t('premium.toasts.featureSubscribeFailed') || 'Feature subscription failed. Please try again.');
-    } finally {
-      setProcessingPayment(false);
-    }
-  };
-  const handleFeatureUnsubscribe = (0, _react.useCallback)(async featureId => {
-    const feature = individualFeatures.find(f => f.id === featureId);
-    const confirmed = await _surfaces.surfaces.confirm({
-      title: t('premium.confirms.unsubscribeFeatureTitle') || 'Unsubscribe from Feature',
-      message: 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.toast.success(t('premium.toasts.featureUnsubscribed', {
-        name: feature?.name ?? ''
-      }) ?? `Unsubscribed from ${feature?.name}`);
-    } catch (error) {
-      _toast.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      className: "mb-space-24",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H5, {
-        className: "text-text mb-space-12",
-        children: t('premium.current.title') || 'Current Subscription'
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.Card, {
-        variant: "outlined",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_card.CardBody, {
-          style: {
-            padding: 20
-          },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            className: "flex-row justify-between items-start mb-space-12",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              className: "flex-1 pr-space-12",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H4, {
-                className: "text-text",
-                numberOfLines: 1,
-                children: currentPlan.name
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
-                className: "text-text-secondary text-sm mt-space-2",
-                children: `$${currentPlan.price}/month`
-              })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_badge.Badge, {
-              variant: "subtle",
-              color: statusChipColor,
-              size: "large",
-              content: subscription.status.toUpperCase()
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            className: "flex-row items-center bg-fill-secondary rounded-radius-12 p-space-12 mb-space-16",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
-              name: "warning",
-              size: 16,
-              color: colors.warning
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            className: "flex-row gap-space-12",
-            children: [subscription.cancelAtPeriodEnd ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
-              variant: "primary",
-              onPress: handleReactivateSubscription,
-              className: "flex-1",
-              accessibilityLabel: t('premium.actions.reactivate') || 'Reactivate',
-              children: t('premium.actions.reactivate') || 'Reactivate'
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
-              variant: "destructive",
-              onPress: handleCancelSubscription,
-              className: "flex-1",
-              accessibilityLabel: t('premium.actions.cancelSubBtn') || 'Cancel Subscription',
-              children: t('premium.actions.cancelSubBtn') || 'Cancel Subscription'
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    className: "mb-space-24",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_segmentedControl.SegmentedControl, {
-      label: t('premium.billing.label') || 'Billing period',
-      type: "tabs",
-      value: billingInterval,
-      onChange: setBillingInterval,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_segmentedControl.SegmentedControlItem, {
-        value: BILLING_MONTH,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_segmentedControl.SegmentedControlItemText, {
-          children: t('premium.billing.monthly') || 'Monthly'
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_segmentedControl.SegmentedControlItem, {
-        value: BILLING_YEAR,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_segmentedControl.SegmentedControlItemText, {
-          children: t('premium.billing.yearly') || 'Yearly'
-        })
-      })]
-    }), billingInterval === 'year' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.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__*/(0, _jsxRuntime.jsx)(_card.Card, {
-      variant: "outlined",
-      style: [{
-        marginBottom: 16
-      }, !availability.available ? {
-        opacity: 0.6
-      } : null, isSelected || plan.isPopular ? {
-        borderColor: colors.primary,
-        borderWidth: 2
-      } : null],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_card.CardBody, {
-        style: {
-          padding: 20
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          className: "flex-row flex-wrap gap-space-8 mb-space-12",
-          children: [plan.isPopular && /*#__PURE__*/(0, _jsxRuntime.jsx)(_badge.Badge, {
-            variant: "solid",
-            color: "primary",
-            size: "large",
-            content: t('premium.plan.badge.mostPopular') || 'Most Popular'
-          }), isAppSpecific && /*#__PURE__*/(0, _jsxRuntime.jsx)(_badge.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          className: "mb-space-16",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H4, {
-            className: "text-text mb-space-4",
-            children: plan.name
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
-            className: "text-text-secondary text-sm",
-            children: plan.description
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
-            className: "text-text-tertiary text-xs mt-space-4 italic",
-            children: getAppScopeText()
-          }), !availability.available && /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
-            className: "text-xs mt-space-4 font-medium",
-            style: {
-              color: colors.error
-            },
-            children: availability.reason
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          className: "flex-row items-baseline mb-space-20",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H2, {
-            className: "text-text",
-            children: pricing.formatted
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
-            className: "text-text-secondary text-sm ml-space-4",
-            children: t('premium.plan.perInterval', {
-              interval: pricing.interval
-            }) || `per ${pricing.interval}`
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_benefitList.BenefitList, {
-          className: "mb-space-24",
-          children: plan.features.map(feature => /*#__PURE__*/(0, _jsxRuntime.jsx)(_benefitList.BenefitRow, {
-            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
-              name: "checkmark",
-              size: 18,
-              color: colors.success
-            }),
-            label: feature
-          }, feature))
-        }), isCurrentPlan ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
-          variant: "secondary",
-          disabled: true,
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
-            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__*/(0, _jsxRuntime.jsx)(_button.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__*/(0, _jsxRuntime.jsx)(_button.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    className: "mb-space-24",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_segmentedControl.SegmentedControl, {
-      label: t('premium.tabs.label') || 'Subscription type',
-      type: "tabs",
-      value: activeTab,
-      onChange: setActiveTab,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_segmentedControl.SegmentedControlItem, {
-        value: TAB_PLANS,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_segmentedControl.SegmentedControlItemText, {
-          children: t('premium.tabs.plans') || 'Full Plans'
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_segmentedControl.SegmentedControlItem, {
-        value: TAB_FEATURES,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_segmentedControl.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__*/(0, _jsxRuntime.jsx)(_card.Card, {
-      variant: "outlined",
-      style: [{
-        marginBottom: 12
-      }, isIncludedInCurrentPlan ? {
-        borderColor: colors.primary,
-        borderWidth: 2
-      } : isSubscribed ? {
-        borderColor: colors.success,
-        borderWidth: 2
-      } : null],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_card.CardBody, {
-        style: {
-          padding: 16
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          className: "flex-row items-start mb-space-12",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            className: "bg-fill-secondary rounded-radius-max items-center justify-center mr-space-12",
-            style: {
-              width: 40,
-              height: 40
-            },
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
-              name: getCategoryIcon(feature.category),
-              size: 24,
-              color: getCategoryColor(feature.category)
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            className: "flex-1",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              className: "flex-row items-center justify-between mb-space-4",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H5, {
-                className: "text-text flex-1 pr-space-8",
-                numberOfLines: 1,
-                children: feature.name
-              }), isIncludedInCurrentPlan && /*#__PURE__*/(0, _jsxRuntime.jsx)(_badge.Badge, {
-                variant: "solid",
-                color: "primary",
-                size: "large",
-                content: t('premium.feature.included') || 'Included'
-              })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
-              className: "text-text-secondary text-sm",
-              children: feature.description
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
-              className: "text-text-tertiary text-xs mt-space-4 italic",
-              children: getAppScopeText()
-            })]
-          })]
-        }), !isIncludedInCurrentPlan && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          className: "items-center mb-space-16",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H4, {
-            className: "text-text",
-            children: pricing.formatted
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
-            className: "text-text-secondary text-sm mt-space-2",
-            children: t('premium.plan.perInterval', {
-              interval: pricing.interval
-            }) || `per ${pricing.interval}`
-          })]
-        }), isIncludedInCurrentPlan ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
-          variant: "primary",
-          disabled: true,
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
-            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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          className: "flex-row gap-space-8",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
-            variant: "secondary",
-            disabled: true,
-            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
-              name: "checkmark",
-              size: 16,
-              color: colors.success
-            }),
-            accessibilityLabel: t('premium.feature.subscribed') || 'Subscribed',
-            className: "flex-1",
-            children: t('premium.feature.subscribed') || 'Subscribed'
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
-            variant: "outline",
-            onPress: () => handleFeatureUnsubscribe(feature.id),
-            accessibilityLabel: t('premium.actions.unsubscribe') || 'Unsubscribe',
-            className: "flex-1",
-            children: t('premium.actions.unsubscribe') || 'Unsubscribe'
-          })]
-        }) : canPurchase ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.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__*/(0, _jsxRuntime.jsx)(_button.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    className: "mb-space-24",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H4, {
-      className: "text-text mb-space-8",
-      children: t('premium.features.title') || 'Individual Features'
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        className: "mb-space-24",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.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] = (0, _react.useState)(__DEV__);
-  const renderAppSwitcher = () => {
-    if (!showAppSwitcher) return null;
-    const testApps = ['mention', 'oxy-social', 'oxy-workspace', 'oxy-creator'];
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      className: "bg-fill-secondary border border-border-image rounded-radius-12 p-space-16 mb-space-24",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
-        className: "text-text-secondary text-sm font-medium mb-space-12",
-        children: t('premium.dev.appContext') || 'Test App Context (Dev Only)'
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-        horizontal: true,
-        showsHorizontalScrollIndicator: false,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          className: "flex-row gap-space-8",
-          children: testApps.map(app => /*#__PURE__*/(0, _jsxRuntime.jsx)(_chip.Chip, {
-            variant: currentAppPackage === app ? 'solid' : 'outlined',
-            color: "primary",
-            onPress: () => setCurrentAppPackage(app),
-            children: app
-          }, app))
-        })
-      })]
-    });
-  };
-  if (loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        className: "items-center justify-center px-screen-margin py-space-40",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-          size: "large",
-          color: colors.primary
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
-          className: "text-text-secondary text-base text-center mt-space-16",
-          children: t('premium.loading') || 'Loading subscription plans...'
-        })]
-      })
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      className: "px-screen-margin pb-space-32",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        className: "pt-space-20",
-        children: [renderAppSwitcher(), subscription && renderCurrentSubscription(), !subscription && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          className: "mb-space-24",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H2, {
-            className: "text-text mb-space-8",
-            children: t('premium.choosePlan') || 'Choose Your Plan'
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          className: "mb-space-24",
-          children: [!subscription && /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H4, {
-            className: "text-text mb-space-12",
-            children: t('premium.availablePlans') || 'Available Plans'
-          }), plans.map(renderPlanCard)]
-        }) : renderIndividualFeatures(), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          className: "mb-space-24",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H4, {
-            className: "text-text mb-space-12",
-            children: t('premium.why') || 'Why Go Premium?'
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_benefitList.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__*/(0, _jsxRuntime.jsxs)(_benefitList.BenefitRow, {
-              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
-                name: benefit.icon,
-                size: 18,
-                color: benefit.color
-              }),
-              accessibilityLabel: `${benefit.title}. ${benefit.desc}`,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
-                className: "text-text font-medium text-sm",
-                children: benefit.title
-              }), `\n${benefit.desc}`]
-            }, benefit.title))
-          })]
-        })]
-      })
-    })
-  });
-};
-var _default = exports.default = PremiumSubscriptionScreen;
-//# sourceMappingURL=PremiumSubscriptionScreen.js.map