@oxyhq/services 10.5.0 → 11.1.0

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

@@ -7,21 +7,39 @@ exports.default = void 0;
 var _react = require("react");
 var _reactNative = require("react-native");
 var _bloom = require("@oxyhq/bloom");
+var _theme = require("@oxyhq/bloom/theme");
+var _button = require("@oxyhq/bloom/button");
+var _chip = require("@oxyhq/bloom/chip");
+var _typography = require("@oxyhq/bloom/typography");
+var _benefitList = require("@oxyhq/bloom/benefit-list");
+var _segmentedControl = require("@oxyhq/bloom/segmented-control");
 var _vectorIcons = require("@expo/vector-icons");
+var _Header = _interopRequireDefault(require("../components/Header.js"));
 var _useI18n = require("../hooks/useI18n.js");
-var _theme = require("@oxyhq/bloom/theme");
 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'];
 const PremiumSubscriptionScreen = ({
   onClose,
-  theme,
   navigate,
   goBack
 }) => {
   // Use useOxy() hook for OxyContext values
   const {
-    user,
-    oxyServices
+    user
   } = (0, _OxyContext.useOxy)();
   const [loading, setLoading] = (0, _react.useState)(true);
   const [subscription, setSubscription] = (0, _react.useState)(null);
@@ -29,30 +47,20 @@ const PremiumSubscriptionScreen = ({
   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)('month');
-  const [activeTab, setActiveTab] = (0, _react.useState)('plans');
+  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 [pendingUnsubscribeFeatureId, setPendingUnsubscribeFeatureId] = (0, _react.useState)(null);
   const {
     t
   } = (0, _useI18n.useI18n)();
   const bloomTheme = (0, _theme.useTheme)();
+  const colors = bloomTheme.colors;
 
   // Prompt controls
   const cancelSubscriptionDialog = (0, _bloom.useDialogControl)();
   const unsubscribeFeatureDialog = (0, _bloom.useDialogControl)();
 
-  // Extract commonly used colors for readability
-  const textColor = bloomTheme.colors.text;
-  const backgroundColor = bloomTheme.colors.background;
-  const secondaryBackgroundColor = bloomTheme.colors.backgroundSecondary;
-  const borderColor = bloomTheme.colors.border;
-  const primaryColor = bloomTheme.colors.primary;
-  const successColor = bloomTheme.colors.success;
-  const dangerColor = bloomTheme.colors.error;
-  const isDarkTheme = bloomTheme.isDark;
-  const warningColor = bloomTheme.colors.warning;
-
   // Oxy+ subscription plans
   const mockPlans = [{
     id: 'mention-plus',
@@ -237,7 +245,7 @@ const PremiumSubscriptionScreen = ({
           planId: 'oxy-insider',
           status: 'active',
           currentPeriodStart: new Date().toISOString(),
-          currentPeriodEnd: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
+          currentPeriodEnd: new Date(Date.now() + PERIOD_MS).toISOString(),
           cancelAtPeriodEnd: false
         };
         setSubscription(currentSubscription);
@@ -261,13 +269,10 @@ const PremiumSubscriptionScreen = ({
       setLoading(false);
     }
   };
-  const handlePlanSelection = planId => {
-    setSelectedPlan(planId);
-  };
   const handleSubscribe = async planId => {
     try {
-      const selectedPlan = mockPlans.find(plan => plan.id === planId);
-      if (!selectedPlan?.applicableApps.includes(currentAppPackage)) {
+      const planToSubscribe = mockPlans.find(plan => plan.id === planId);
+      if (!planToSubscribe?.applicableApps.includes(currentAppPackage)) {
         _bloom.toast.error(t('premium.toasts.planUnavailable', {
           app: currentAppPackage
         }) || `This plan is not available for the current app (${currentAppPackage})`);
@@ -277,15 +282,16 @@ const PremiumSubscriptionScreen = ({
         _bloom.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, 2000));
+      await new Promise(resolve => setTimeout(resolve, SUBSCRIBE_DELAY_MS));
       _bloom.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() + 30 * 24 * 60 * 60 * 1000).toISOString(),
+        currentPeriodEnd: new Date(Date.now() + PERIOD_MS).toISOString(),
         cancelAtPeriodEnd: false
       });
       loadSubscriptionData();
@@ -312,7 +318,7 @@ const PremiumSubscriptionScreen = ({
       _bloom.toast.error(t('premium.toasts.cancelFailed') || 'Failed to cancel subscription');
     }
   }, [t]);
-  const handleReactivateSubscription = async () => {
+  const handleReactivateSubscription = (0, _react.useCallback)(async () => {
     try {
       setSubscription(prev => prev ? {
         ...prev,
@@ -322,9 +328,9 @@ const PremiumSubscriptionScreen = ({
     } catch (error) {
       _bloom.toast.error(t('premium.toasts.reactivateFailed') || 'Failed to reactivate subscription');
     }
-  };
-  const formatPrice = (price, currency, interval) => {
-    const yearlyPrice = interval === 'year' ? price : price * 12 * 0.8;
+  }, [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,
@@ -338,21 +344,21 @@ const PremiumSubscriptionScreen = ({
   };
   const handleFeatureSubscribe = async featureId => {
     try {
-      const selectedFeature = mockIndividualFeatures.find(feature => feature.id === featureId);
-      if (!selectedFeature?.applicableApps.includes(currentAppPackage)) {
+      const featureToSubscribe = mockIndividualFeatures.find(feature => feature.id === featureId);
+      if (!featureToSubscribe?.applicableApps.includes(currentAppPackage)) {
         _bloom.toast.error(`This feature is not available for the current app (${currentAppPackage})`);
         return;
       }
-      if (selectedFeature.appScope === 'specific') {
-        const hasExactMatch = selectedFeature.applicableApps.length === 1 && selectedFeature.applicableApps[0] === currentAppPackage;
-        if (!hasExactMatch && selectedFeature.applicableApps.length === 1) {
-          const requiredApp = selectedFeature.applicableApps[0];
-          _bloom.toast.error(`${selectedFeature.name} is only available in the ${requiredApp} app`);
+      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];
+          _bloom.toast.error(`${featureToSubscribe.name} is only available in the ${requiredApp} app`);
           return;
         }
       }
       setProcessingPayment(true);
-      await new Promise(resolve => setTimeout(resolve, 1500));
+      await new Promise(resolve => setTimeout(resolve, FEATURE_DELAY_MS));
       setIndividualFeatures(prev => prev.map(feature => feature.id === featureId ? {
         ...feature,
         isSubscribed: true
@@ -392,188 +398,114 @@ const PremiumSubscriptionScreen = ({
     }
   }, [pendingUnsubscribeFeatureId, individualFeatures, t]);
   const pendingUnsubscribeFeature = (0, _react.useMemo)(() => individualFeatures.find(f => f.id === pendingUnsubscribeFeatureId), [individualFeatures, pendingUnsubscribeFeatureId]);
-  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;
+  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 /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [styles.header, {
-        borderBottomColor: borderColor
-      }],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        style: styles.backButton,
-        onPress: goBack,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-          name: "arrow-back",
-          size: 24,
-          color: textColor
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.headerTitleContainer,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.headerTitle, {
-            color: textColor
-          }],
-          children: t('premium.title') || 'Oxy+ Subscriptions'
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.currentAppText, {
-            color: bloomTheme.colors.textSecondary
-          }],
-          children: t('premium.forApp', {
-            app: getAppDisplayName(currentAppPackage)
-          }) || `for ${getAppDisplayName(currentAppPackage)}`
-        })]
-      }), onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        style: styles.closeButton,
-        onPress: onClose,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-          name: "close",
-          size: 24,
-          color: textColor
-        })
-      })]
-    });
+    return appNames[packageName] || packageName;
   };
   const renderCurrentSubscription = () => {
     if (!subscription) return null;
     const currentPlan = getCurrentPlan();
     if (!currentPlan) return null;
-    const statusColor = subscription.status === 'active' ? successColor : subscription.status === 'trialing' ? warningColor : dangerColor;
+    const statusChipColor = subscription.status === 'active' ? 'success' : subscription.status === 'trialing' ? 'warning' : 'error';
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.section,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.sectionTitle, {
-          color: textColor
-        }],
+      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.jsxs)(_reactNative.View, {
-        style: [styles.currentSubscriptionCard, {
-          backgroundColor: secondaryBackgroundColor,
-          borderColor
-        }],
+        className: "bg-fill border border-border-image rounded-radius-20 p-space-20 shadow-s",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.subscriptionHeader,
+          className: "flex-row justify-between items-start mb-space-12",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.planName, {
-                color: textColor
-              }],
+            className: "flex-1 pr-space-12",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H4, {
+              className: "text-text",
+              numberOfLines: 1,
               children: currentPlan.name
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-              style: [styles.planPrice, {
-                color: primaryColor
-              }],
-              children: ["$", currentPlan.price, "/month"]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+              className: "text-text-secondary text-sm mt-space-2",
+              children: `$${currentPlan.price}/month`
             })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.statusBadge, {
-              backgroundColor: statusColor
-            }],
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.statusText,
-              children: subscription.status.toUpperCase()
-            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_chip.Chip, {
+            variant: "soft",
+            color: statusChipColor,
+            size: "small",
+            children: subscription.status.toUpperCase()
           })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.subscriptionDetail, {
-            color: bloomTheme.colors.textSecondary
-          }],
+        }), /*#__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, {
-          style: styles.cancelNotice,
+          className: "flex-row items-center bg-fill-secondary rounded-radius-12 p-space-12 mb-space-16",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
             name: "warning",
             size: 16,
-            color: warningColor
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.cancelText, {
-              color: warningColor
-            }],
+            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, {
-          style: styles.subscriptionActions,
-          children: [subscription.cancelAtPeriodEnd ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            style: [styles.actionButton, {
-              backgroundColor: successColor
-            }],
+          className: "flex-row gap-space-12",
+          children: [subscription.cancelAtPeriodEnd ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+            variant: "primary",
             onPress: handleReactivateSubscription,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.actionButtonText,
-              children: t('premium.actions.reactivate') || 'Reactivate'
-            })
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            style: [styles.actionButton, {
-              backgroundColor: dangerColor
-            }],
+            className: "flex-1",
+            accessibilityLabel: t('premium.actions.reactivate') || 'Reactivate',
+            children: t('premium.actions.reactivate') || 'Reactivate'
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+            variant: "destructive",
             onPress: confirmCancelSubscription,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.actionButtonText,
-              children: t('premium.actions.cancelSubBtn') || 'Cancel Subscription'
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            style: [styles.actionButton, styles.secondaryButton, {
-              borderColor
-            }],
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.actionButtonText, {
-                color: textColor
-              }],
-              children: t('premium.actions.manageBilling') || 'Manage Billing'
-            })
+            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, {
-    style: styles.section,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.billingToggle,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        style: [styles.billingOption, billingInterval === 'month' && {
-          backgroundColor: primaryColor
-        }],
-        onPress: () => setBillingInterval('month'),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.billingOptionText, {
-            color: billingInterval === 'month' ? bloomTheme.colors.negativeForeground : textColor
-          }],
+    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)(_reactNative.TouchableOpacity, {
-        style: [styles.billingOption, billingInterval === 'year' && {
-          backgroundColor: primaryColor
-        }],
-        onPress: () => setBillingInterval('year'),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.billingOptionText, {
-            color: billingInterval === 'year' ? bloomTheme.colors.negativeForeground : textColor
-          }],
+      }), /*#__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)(_reactNative.Text, {
-      style: [styles.savingsText, {
-        color: successColor
-      }],
-      children: t('premium.billing.saveYearly') || '💰 Save 20% with yearly billing'
+    }), 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.currency, plan.interval);
+    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;
@@ -609,174 +541,134 @@ const PremiumSubscriptionScreen = ({
     };
     const availability = getAvailabilityStatus();
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [styles.planCard, {
-        backgroundColor: secondaryBackgroundColor,
-        borderColor
-      }, isSelected && {
-        borderColor: primaryColor,
+      className: `bg-fill border border-border-image rounded-radius-20 p-space-20 mb-space-16 shadow-s ${!availability.available ? 'opacity-60' : ''}`,
+      style: isSelected || plan.isPopular ? {
+        borderColor: colors.primary,
         borderWidth: 2
-      }, plan.isPopular && styles.popularPlan, !availability.available && {
-        opacity: 0.6
-      }],
-      children: [plan.isPopular && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.popularBadge, {
-          backgroundColor: primaryColor
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.popularText,
-          children: "MOST POPULAR"
-        })
-      }), isAppSpecific && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.appSpecificBadge, {
-          backgroundColor: isAvailableForCurrentApp ? successColor : warningColor
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.appSpecificText,
+      } : undefined,
+      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)(_chip.Chip, {
+          variant: "solid",
+          color: "primary",
+          size: "small",
+          children: t('premium.plan.badge.mostPopular') || 'Most Popular'
+        }), isAppSpecific && /*#__PURE__*/(0, _jsxRuntime.jsx)(_chip.Chip, {
+          variant: "soft",
+          color: isAvailableForCurrentApp ? 'success' : 'warning',
+          size: "small",
           children: isAvailableForCurrentApp ? t('premium.plan.badge.appExclusive') || 'App Exclusive' : t('premium.plan.badge.notAvailable') || 'Not Available'
-        })
+        })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.planHeader,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.planName, {
-            color: textColor
-          }],
+        className: "mb-space-16",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H4, {
+          className: "text-text mb-space-4",
           children: plan.name
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.planDescription, {
-            color: bloomTheme.colors.textSecondary
-          }],
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+          className: "text-text-secondary text-sm",
           children: plan.description
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.planAppScope, {
-            color: bloomTheme.colors.textTertiary
-          }],
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+          className: "text-text-tertiary text-xs mt-space-4 italic",
           children: getAppScopeText()
-        }), !availability.available && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.planRestrictionText, {
-            color: dangerColor
-          }],
+        }), !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, {
-        style: styles.planPricing,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.planPrice, {
-            color: textColor
-          }],
+        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)(_reactNative.Text, {
-          style: [styles.planInterval, {
-            color: bloomTheme.colors.textSecondary
-          }],
+        }), /*#__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)(_reactNative.View, {
-        style: styles.planFeatures,
-        children: plan.features.map((feature, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.featureItem,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_benefitList.BenefitList, {
+        className: "mb-space-24",
+        children: plan.features.map((feature, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_benefitList.BenefitRow, {
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
             name: "checkmark",
-            size: 16,
-            color: successColor
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.featureText, {
-              color: textColor
-            }],
-            children: feature
-          })]
+            size: 18,
+            color: colors.success
+          }),
+          label: feature
         }, index))
-      }), isCurrentPlan ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.currentPlanButton, {
-          backgroundColor: successColor
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.currentPlanText,
-          children: t('premium.plan.current') || 'Current Plan'
-        })
-      }) : !availability.available ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.unavailablePlanButton, {
-          backgroundColor: bloomTheme.colors.border
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.unavailablePlanText, {
-            color: bloomTheme.colors.textTertiary
-          }],
-          children: t('premium.plan.notAvailableInApp') || 'Not Available in Current App'
-        })
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        style: [styles.selectPlanButton, {
-          backgroundColor: plan.isPopular ? primaryColor : borderColor
-        }],
+      }), isCurrentPlan ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+        variant: "secondary",
+        disabled: true,
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.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__*/(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,
-        children: processingPayment ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-          color: bloomTheme.colors.negativeForeground,
-          size: "small"
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.selectPlanText, {
-            color: plan.isPopular ? bloomTheme.colors.negativeForeground : textColor
-          }],
-          children: t('premium.actions.subscribeTo', {
-            name: plan.name
-          }) || `Subscribe to ${plan.name}`
-        })
+        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, {
-    style: styles.section,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [styles.tabContainer, {
-        borderBottomColor: borderColor
-      }],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        style: [styles.tab, activeTab === 'plans' && {
-          borderBottomColor: primaryColor,
-          borderBottomWidth: 2
-        }],
-        onPress: () => setActiveTab('plans'),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.tabText, {
-            color: activeTab === 'plans' ? primaryColor : textColor
-          }],
+    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)(_reactNative.TouchableOpacity, {
-        style: [styles.tab, activeTab === 'features' && {
-          borderBottomColor: primaryColor,
-          borderBottomWidth: 2
-        }],
-        onPress: () => setActiveTab('features'),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.tabText, {
-            color: activeTab === 'features' ? primaryColor : textColor
-          }],
+      }), /*#__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.currency, feature.interval);
+    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 bloomTheme.colors.warning;
+          return colors.warning;
         case 'customization':
-          return bloomTheme.colors.secondary;
+          return colors.secondary;
         case 'content':
-          return bloomTheme.colors.success;
+          return colors.success;
         case 'networking':
-          return bloomTheme.colors.info;
+          return colors.info;
         case 'productivity':
-          return bloomTheme.colors.error;
+          return colors.error;
         default:
-          return primaryColor;
+          return colors.primary;
       }
     };
     const getCategoryIcon = category => {
@@ -804,199 +696,149 @@ const PremiumSubscriptionScreen = ({
       }) || `Available in: ${feature.applicableApps.join(', ')}`;
     };
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [styles.featureCard, {
-        backgroundColor: secondaryBackgroundColor,
-        borderColor
-      }, isSubscribed && {
-        borderColor: successColor,
+      className: "bg-fill border border-border-image rounded-radius-12 p-space-16 mb-space-12 shadow-s",
+      style: isIncludedInCurrentPlan ? {
+        borderColor: colors.primary,
         borderWidth: 2
-      }, isIncludedInCurrentPlan && {
-        borderColor: primaryColor,
+      } : isSubscribed ? {
+        borderColor: colors.success,
         borderWidth: 2
-      }],
+      } : undefined,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.featureHeader,
+        className: "flex-row items-start mb-space-12",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.featureIconContainer,
+          className: "bg-fill-secondary rounded-radius-max items-center justify-center mr-space-12",
+          style: {
+            width: 40,
+            height: 40
+          },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
             name: getCategoryIcon(feature.category),
             size: 24,
             color: getCategoryColor(feature.category)
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.featureInfo,
+          className: "flex-1",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.featureNameRow,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.featureName, {
-                color: textColor
-              }],
+            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)(_reactNative.View, {
-              style: [styles.includedBadge, {
-                backgroundColor: primaryColor
-              }],
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.includedBadgeText,
-                children: "Included"
-              })
+            }), isIncludedInCurrentPlan && /*#__PURE__*/(0, _jsxRuntime.jsx)(_chip.Chip, {
+              variant: "solid",
+              color: "primary",
+              size: "small",
+              children: t('premium.feature.included') || 'Included'
             })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.featureDescription, {
-              color: bloomTheme.colors.textSecondary
-            }],
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+            className: "text-text-secondary text-sm",
             children: feature.description
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.appScopeText, {
-              color: bloomTheme.colors.textTertiary
-            }],
+          }), /*#__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, {
-        style: styles.featurePricing,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.featurePrice, {
-            color: textColor
-          }],
+        className: "items-center mb-space-16",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H4, {
+          className: "text-text",
           children: pricing.formatted
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.featureInterval, {
-            color: bloomTheme.colors.textSecondary
-          }],
+        }), /*#__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.jsxs)(_reactNative.View, {
-        style: [styles.includedInPlanButton, {
-          backgroundColor: primaryColor
-        }],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+      }), isIncludedInCurrentPlan ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+        variant: "primary",
+        disabled: true,
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
           name: "checkmark-circle",
           size: 16,
-          color: bloomTheme.colors.negativeForeground
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.includedInPlanText,
-          children: t('premium.feature.includedInPlan') || 'Included in your plan'
-        })]
+          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, {
-        style: styles.featureActions,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: [styles.subscribedButton, {
-            backgroundColor: successColor
-          }],
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+        className: "flex-row gap-space-8",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+          variant: "secondary",
+          disabled: true,
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
             name: "checkmark",
             size: 16,
-            color: bloomTheme.colors.negativeForeground
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.subscribedText,
-            children: t('premium.feature.subscribed') || 'Subscribed'
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          style: [styles.unsubscribeButton, {
-            borderColor: dangerColor
-          }],
+            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: () => confirmFeatureUnsubscribe(feature.id),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.unsubscribeText, {
-              color: dangerColor
-            }],
-            children: t('premium.actions.unsubscribe') || 'Unsubscribe'
-          })
+          accessibilityLabel: t('premium.actions.unsubscribe') || 'Unsubscribe',
+          className: "flex-1",
+          children: t('premium.actions.unsubscribe') || 'Unsubscribe'
         })]
-      }) : canPurchase ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        style: [styles.subscribeFeatureButton, {
-          backgroundColor: primaryColor
-        }],
+      }) : canPurchase ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+        variant: "primary",
         onPress: () => handleFeatureSubscribe(feature.id),
         disabled: processingPayment,
-        children: processingPayment ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-          color: bloomTheme.colors.negativeForeground,
-          size: "small"
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.subscribeFeatureText,
-          children: t('premium.actions.subscribe') || 'Subscribe'
-        })
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.unavailableButton, {
-          backgroundColor: bloomTheme.colors.border
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.unavailableText, {
-            color: bloomTheme.colors.textTertiary
-          }],
-          children: "Only available in subscription plans"
-        })
+        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 = () => {
-    const categories = ['analytics', 'customization', 'content', 'networking', 'productivity'];
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.section,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.sectionTitle, {
-          color: textColor
-        }],
-        children: "Individual Features"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.sectionSubtitle, {
-          color: bloomTheme.colors.textSecondary
-        }],
-        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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.categorySection,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.categoryTitle, {
-              color: textColor
-            }],
-            children: category.charAt(0).toUpperCase() + category.slice(1)
-          }), categoryFeatures.map(renderFeatureCard)]
-        }, category);
-      })]
-    });
-  };
-
-  // Add this for testing different app contexts (remove in production)
-  const [showAppSwitcher, setShowAppSwitcher] = (0, _react.useState)(__DEV__); // Only show in development
+  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, {
-      style: [styles.appSwitcher, {
-        backgroundColor: bloomTheme.colors.backgroundSecondary,
-        borderColor
-      }],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.appSwitcherTitle, {
-          color: textColor
-        }],
-        children: "\uD83E\uDDEA Test App Context (Dev Only)"
+      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, {
-          style: styles.appSwitcherButtons,
-          children: testApps.map(app => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            style: [styles.appSwitcherButton, {
-              backgroundColor: currentAppPackage === app ? primaryColor : 'transparent',
-              borderColor: primaryColor
-            }],
-            onPress: () => {
-              setCurrentAppPackage(app);
-            },
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.appSwitcherButtonText, {
-                color: currentAppPackage === app ? bloomTheme.colors.negativeForeground : textColor
-              }],
-              children: app
-            })
+          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))
         })
       })]
@@ -1004,126 +846,96 @@ const PremiumSubscriptionScreen = ({
   };
   if (loading) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [styles.container, {
-        backgroundColor,
-        justifyContent: 'center'
-      }],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-        size: "large",
-        color: primaryColor
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.loadingText, {
-          color: textColor
-        }],
-        children: t('premium.loading') || 'Loading subscription plans...'
+      className: "flex-1 bg-bg",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.default, {
+        title: t('premium.title') || 'Oxy+ Subscriptions',
+        subtitle: t('premium.forApp', {
+          app: getAppDisplayName(currentAppPackage)
+        }) || `for ${getAppDisplayName(currentAppPackage)}`,
+        onBack: goBack || onClose,
+        onClose: onClose,
+        showCloseButton: !!onClose,
+        elevation: "subtle"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        className: "flex-1 items-center justify-center px-screen-margin",
+        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.jsxs)(_reactNative.View, {
-    style: [styles.container, {
-      backgroundColor
-    }],
-    children: [renderHeader(), renderAppSwitcher(), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
-      style: styles.content,
+    className: "flex-1 bg-bg",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.default, {
+      title: t('premium.title') || 'Oxy+ Subscriptions',
+      subtitle: t('premium.forApp', {
+        app: getAppDisplayName(currentAppPackage)
+      }) || `for ${getAppDisplayName(currentAppPackage)}`,
+      onBack: goBack || onClose,
+      onClose: onClose,
+      showCloseButton: !!onClose,
+      elevation: "subtle"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      className: "flex-1",
+      contentContainerClassName: "px-screen-margin pb-space-32",
       showsVerticalScrollIndicator: false,
-      children: [subscription && renderCurrentSubscription(), !subscription && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.section,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.sectionTitle, {
-            color: textColor
-          }],
-          children: t('premium.choosePlan') || 'Choose Your Plan'
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.sectionSubtitle, {
-            color: bloomTheme.colors.textSecondary
-          }],
-          children: t('premium.choosePlanSubtitle') || 'Unlock premium features and take your experience to the next level'
-        })]
-      }), !subscription && renderTabNavigation(), !subscription && activeTab === 'plans' && renderBillingToggle(), activeTab === 'plans' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.section,
-        children: [!subscription && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.sectionTitle, {
-            color: textColor
-          }],
-          children: t('premium.availablePlans') || 'Available Plans'
-        }), plans.map(renderPlanCard)]
-      }) : renderIndividualFeatures(), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.section,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.sectionTitle, {
-            color: textColor
-          }],
-          children: t('premium.why') || 'Why Go Premium?'
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: [styles.benefitsCard, {
-            backgroundColor: secondaryBackgroundColor,
-            borderColor
-          }],
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.benefitItem,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-              name: "flash",
-              size: 24,
-              color: primaryColor
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: styles.benefitContent,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: [styles.benefitTitle, {
-                  color: textColor
-                }],
-                children: t('premium.benefits.performance.title') || 'Enhanced Performance'
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: [styles.benefitDescription, {
-                  color: bloomTheme.colors.textSecondary
-                }],
-                children: t('premium.benefits.performance.desc') || 'Faster processing and priority access to our servers'
-              })]
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.benefitItem,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-              name: "shield-checkmark",
-              size: 24,
-              color: successColor
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: styles.benefitContent,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: [styles.benefitTitle, {
-                  color: textColor
-                }],
-                children: t('premium.benefits.security.title') || 'Advanced Security'
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: [styles.benefitDescription, {
-                  color: bloomTheme.colors.textSecondary
-                }],
-                children: t('premium.benefits.security.desc') || 'Enhanced encryption and security features'
-              })]
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.benefitItem,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-              name: "headset",
-              size: 24,
-              color: warningColor
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: styles.benefitContent,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: [styles.benefitTitle, {
-                  color: textColor
-                }],
-                children: t('premium.benefits.support.title') || 'Priority Support'
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: [styles.benefitDescription, {
-                  color: bloomTheme.colors.textSecondary
-                }],
-                children: t('premium.benefits.support.desc') || 'Get help faster with our premium support team'
-              })]
-            })]
+      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)(_vectorIcons.Ionicons, {
+                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))
           })]
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.bottomSpacing
-      })]
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_bloom.Dialog, {
       control: cancelSubscriptionDialog,
       title: t('premium.confirms.cancelSubTitle') || 'Cancel Subscription',
@@ -1153,462 +965,5 @@ const PremiumSubscriptionScreen = ({
     })]
   });
 };
-const styles = _reactNative.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'
-  },
-  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',
-    marginBottom: 8
-  },
-  sectionSubtitle: {
-    fontSize: 16,
-    lineHeight: 22
-  },
-  loadingText: {
-    fontSize: 16,
-    textAlign: 'center',
-    marginTop: 16
-  },
-  currentSubscriptionCard: {
-    borderRadius: 16,
-    padding: 20,
-    borderWidth: 1
-  },
-  subscriptionHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'flex-start',
-    marginBottom: 12
-  },
-  planName: {
-    fontSize: 20,
-    fontWeight: 'bold',
-    marginBottom: 4
-  },
-  planPrice: {
-    fontSize: 16,
-    fontWeight: '600'
-  },
-  statusBadge: {
-    paddingHorizontal: 12,
-    paddingVertical: 4,
-    borderRadius: 12
-  },
-  statusText: {
-    color: '#FFFFFF',
-    fontSize: 12,
-    fontWeight: '600'
-  },
-  subscriptionDetail: {
-    fontSize: 14,
-    marginBottom: 16
-  },
-  cancelNotice: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 12,
-    backgroundColor: 'rgba(255, 149, 0, 0.1)',
-    borderRadius: 8,
-    marginBottom: 16
-  },
-  cancelText: {
-    fontSize: 14,
-    marginLeft: 8,
-    flex: 1
-  },
-  subscriptionActions: {
-    flexDirection: 'row',
-    gap: 12
-  },
-  actionButton: {
-    flex: 1,
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    borderRadius: 8,
-    alignItems: 'center'
-  },
-  secondaryButton: {
-    backgroundColor: 'transparent',
-    borderWidth: 1
-  },
-  actionButtonText: {
-    color: '#FFFFFF',
-    fontSize: 14,
-    fontWeight: '600'
-  },
-  billingToggle: {
-    flexDirection: 'row',
-    backgroundColor: 'rgba(0, 0, 0, 0.05)',
-    borderRadius: 8,
-    padding: 4,
-    marginBottom: 12
-  },
-  billingOption: {
-    flex: 1,
-    paddingVertical: 12,
-    borderRadius: 6,
-    alignItems: 'center'
-  },
-  billingOptionText: {
-    fontSize: 16,
-    fontWeight: '600'
-  },
-  savingsText: {
-    fontSize: 14,
-    textAlign: 'center',
-    fontWeight: '600'
-  },
-  planCard: {
-    borderRadius: 16,
-    padding: 20,
-    marginBottom: 16,
-    borderWidth: 1,
-    position: 'relative'
-  },
-  popularPlan: {
-    borderWidth: 2
-  },
-  popularBadge: {
-    position: 'absolute',
-    top: -1,
-    left: 20,
-    right: 20,
-    paddingVertical: 8,
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    alignItems: 'center'
-  },
-  popularText: {
-    color: '#FFFFFF',
-    fontSize: 12,
-    fontWeight: 'bold'
-  },
-  planHeader: {
-    marginBottom: 16,
-    marginTop: 16
-  },
-  planDescription: {
-    fontSize: 14,
-    lineHeight: 20
-  },
-  planAppScope: {
-    fontSize: 12,
-    fontStyle: 'italic',
-    marginTop: 4
-  },
-  planPricing: {
-    flexDirection: 'row',
-    alignItems: 'baseline',
-    marginBottom: 20
-  },
-  planInterval: {
-    fontSize: 14,
-    marginLeft: 4
-  },
-  planFeatures: {
-    marginBottom: 24
-  },
-  featureItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 8
-  },
-  featureText: {
-    fontSize: 14,
-    marginLeft: 8,
-    flex: 1
-  },
-  selectPlanButton: {
-    paddingVertical: 16,
-    borderRadius: 12,
-    alignItems: 'center'
-  },
-  selectPlanText: {
-    fontSize: 16,
-    fontWeight: '600'
-  },
-  currentPlanButton: {
-    paddingVertical: 16,
-    borderRadius: 12,
-    alignItems: 'center'
-  },
-  currentPlanText: {
-    color: '#FFFFFF',
-    fontSize: 16,
-    fontWeight: '600'
-  },
-  benefitsCard: {
-    borderRadius: 16,
-    padding: 20,
-    borderWidth: 1
-  },
-  benefitItem: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    marginBottom: 20
-  },
-  benefitContent: {
-    marginLeft: 16,
-    flex: 1
-  },
-  benefitTitle: {
-    fontSize: 16,
-    fontWeight: '600',
-    marginBottom: 4
-  },
-  benefitDescription: {
-    fontSize: 14,
-    lineHeight: 20
-  },
-  bottomSpacing: {
-    height: 40
-  },
-  tabContainer: {
-    flexDirection: 'row',
-    borderBottomWidth: 1,
-    marginBottom: 20
-  },
-  tab: {
-    flex: 1,
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    alignItems: 'center'
-  },
-  tabText: {
-    fontSize: 16,
-    fontWeight: '600'
-  },
-  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
-  },
-  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'
-  },
-  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'
-  },
-  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'
-  }
-});
 var _default = exports.default = PremiumSubscriptionScreen;
 //# sourceMappingURL=PremiumSubscriptionScreen.js.map