@oxyhq/services 5.5.8 → 5.6.0

package/src/ui/screens/PremiumSubscriptionScreen.tsx

@@ -15,6 +15,7 @@ import { BaseScreenProps } from '../navigation/types';
 import { useOxy } from '../context/OxyContext';
 import { fontFamilies } from '../styles/fonts';
 import { toast } from '../../lib/sonner';
+import { confirmAction } from '../utils/confirmAction';
 import { Ionicons } from '@expo/vector-icons';
 import Avatar from '../components/Avatar';
 
@@ -307,35 +308,35 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
     const detectCurrentApp = () => {
         // In a real implementation, this would detect the actual app package name
         // For now, we'll use a mock detection based on available methods
-        
+
         // Real app detection methods you could use:
         // 1. Check bundle identifier in React Native: 
         //    import DeviceInfo from 'react-native-device-info';
         //    const bundleId = DeviceInfo.getBundleId();
         //    Example: com.oxy.mention -> 'mention'
-        
+
         // 2. Environment variables or build configuration
         //    const appPackage = __DEV__ ? process.env.APP_PACKAGE : 'mention';
-        
+
         // 3. Check specific app capabilities or modules
         //    if (typeof MentionModule !== 'undefined') return 'mention';
         //    if (typeof OxyWorkspaceModule !== 'undefined') return 'oxy-workspace';
-        
+
         // 4. Use build-time configuration with Metro or similar
         //    const appPackage = require('../config/app.json').packageName;
-        
+
         // For demo purposes, we'll simulate different apps
         // You would replace this with actual app detection logic
-        
+
         // IMPORTANT: This ensures subscription restrictions work properly:
         // - Mention+ plan can only be subscribed to when app package == 'mention'
         // - Other app-specific plans follow the same pattern
         // - Ecosystem plans work across all apps
-        
+
         const detectedApp = 'mention'; // This would be dynamic in real implementation
-        
+
         setCurrentAppPackage(detectedApp);
-        
+
         // Log for debugging
         console.log('Detected app package:', detectedApp);
         console.log('Available plans for this app will be filtered accordingly');
@@ -344,13 +345,13 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
     const loadSubscriptionData = async () => {
         try {
             setLoading(true);
-            
+
             // Filter plans available for current app
-            const availablePlans = mockPlans.filter(plan => 
+            const availablePlans = mockPlans.filter(plan =>
                 plan.applicableApps.includes(currentAppPackage)
             );
             setPlans(availablePlans);
-            
+
             // Mock current subscription
             let currentSubscription: UserSubscription | null = null;
             if (user?.isPremium) {
@@ -364,25 +365,25 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                 };
                 setSubscription(currentSubscription);
             }
-            
+
             // Filter features available for current app and update based on current subscription
-            const availableFeatures = mockIndividualFeatures.filter(feature => 
+            const availableFeatures = mockIndividualFeatures.filter(feature =>
                 feature.applicableApps.includes(currentAppPackage)
             );
-            
+
             const updatedFeatures = availableFeatures.map(feature => {
-                const isIncludedInCurrentPlan = !!(currentSubscription && 
+                const isIncludedInCurrentPlan = !!(currentSubscription &&
                     feature.includedInPlans.includes(currentSubscription.planId));
-                
+
                 return {
                     ...feature,
                     isIncludedInCurrentPlan,
                     isSubscribed: isIncludedInCurrentPlan ? true : false // Mock some individual subscriptions
                 };
             });
-            
+
             setIndividualFeatures(updatedFeatures);
-            
+
         } catch (error) {
             console.error('Failed to load subscription data:', error);
             toast.error('Failed to load subscription information');
@@ -404,23 +405,23 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                 toast.error(`This plan is not available for the current app (${currentAppPackage})`);
                 return;
             }
-            
+
             // Special restriction for Mention+ plan - only available in mention app
             if (planId === 'mention-plus' && currentAppPackage !== 'mention') {
                 console.log(`❌ Subscription blocked: Mention+ plan requires app to be "mention", current app is "${currentAppPackage}"`);
                 toast.error('Mention+ is only available in the Mention app');
                 return;
             }
-            
+
             console.log(`✅ Subscription allowed: Plan "${selectedPlan.name}" is available for app "${currentAppPackage}"`);
-            
+
             setProcessingPayment(true);
-            
+
             // Mock payment processing
             await new Promise(resolve => setTimeout(resolve, 2000));
-            
+
             toast.success('Subscription activated successfully!');
-            
+
             // Mock subscription update
             setSubscription({
                 id: 'sub_' + Date.now(),
@@ -430,10 +431,10 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                 currentPeriodEnd: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
                 cancelAtPeriodEnd: false
             });
-            
+
             // Reload data to update feature states
             loadSubscriptionData();
-            
+
         } catch (error) {
             console.error('Payment failed:', error);
             toast.error('Payment failed. Please try again.');
@@ -443,28 +444,20 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
     };
 
     const handleCancelSubscription = () => {
-        Alert.alert(
-            'Cancel Subscription',
+        confirmAction(
             'Are you sure you want to cancel your subscription? You will lose access to premium features at the end of your current billing period.',
-            [
-                { text: 'Keep Subscription', style: 'cancel' },
-                {
-                    text: 'Cancel Subscription',
-                    style: 'destructive',
-                    onPress: async () => {
-                        try {
-                            // Mock cancellation
-                            setSubscription(prev => prev ? {
-                                ...prev,
-                                cancelAtPeriodEnd: true
-                            } : null);
-                            toast.success('Subscription will be canceled at the end of the billing period');
-                        } catch (error) {
-                            toast.error('Failed to cancel subscription');
-                        }
-                    }
+            async () => {
+                try {
+                    // Mock cancellation
+                    setSubscription(prev => prev ? {
+                        ...prev,
+                        cancelAtPeriodEnd: true
+                    } : null);
+                    toast.success('Subscription will be canceled at the end of the billing period');
+                } catch (error) {
+                    toast.error('Failed to cancel subscription');
                 }
-            ]
+            }
         );
     };
 
@@ -483,7 +476,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
     const formatPrice = (price: number, currency: string, interval: string) => {
         const yearlyPrice = interval === 'year' ? price : price * 12 * 0.8; // 20% discount for yearly
         const displayPrice = billingInterval === 'year' ? yearlyPrice : price;
-        
+
         return {
             price: displayPrice,
             formatted: `$${displayPrice.toFixed(2)}`,
@@ -504,35 +497,35 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                 toast.error(`This feature is not available for the current app (${currentAppPackage})`);
                 return;
             }
-            
+
             // Special restrictions for app-specific features
             if (selectedFeature.appScope === 'specific') {
                 // For features that are only available in specific apps, enforce strict matching
-                const hasExactMatch = selectedFeature.applicableApps.length === 1 && 
-                                     selectedFeature.applicableApps[0] === currentAppPackage;
+                const hasExactMatch = selectedFeature.applicableApps.length === 1 &&
+                    selectedFeature.applicableApps[0] === currentAppPackage;
                 if (!hasExactMatch && selectedFeature.applicableApps.length === 1) {
                     const requiredApp = selectedFeature.applicableApps[0];
                     toast.error(`${selectedFeature.name} is only available in the ${requiredApp} app`);
                     return;
                 }
             }
-            
+
             setProcessingPayment(true);
-            
+
             // Mock feature subscription
             await new Promise(resolve => setTimeout(resolve, 1500));
-            
-            setIndividualFeatures(prev => 
-                prev.map(feature => 
-                    feature.id === featureId 
+
+            setIndividualFeatures(prev =>
+                prev.map(feature =>
+                    feature.id === featureId
                         ? { ...feature, isSubscribed: true }
                         : feature
                 )
             );
-            
+
             const feature = individualFeatures.find(f => f.id === featureId);
             toast.success(`Subscribed to ${feature?.name} successfully!`);
-            
+
         } catch (error) {
             console.error('Feature subscription failed:', error);
             toast.error('Feature subscription failed. Please try again.');
@@ -543,30 +536,22 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
     const handleFeatureUnsubscribe = async (featureId: string) => {
         const feature = individualFeatures.find(f => f.id === featureId);
-        Alert.alert(
-            'Unsubscribe Feature',
+        confirmAction(
             `Are you sure you want to unsubscribe from ${feature?.name}?`,
-            [
-                { text: 'Keep Feature', style: 'cancel' },
-                {
-                    text: 'Unsubscribe',
-                    style: 'destructive',
-                    onPress: async () => {
-                        try {
-                            setIndividualFeatures(prev => 
-                                prev.map(f => 
-                                    f.id === featureId 
-                                        ? { ...f, isSubscribed: false }
-                                        : f
-                                )
-                            );
-                            toast.success(`Unsubscribed from ${feature?.name}`);
-                        } catch (error) {
-                            toast.error('Failed to unsubscribe from feature');
-                        }
-                    }
+            async () => {
+                try {
+                    setIndividualFeatures(prev =>
+                        prev.map(f =>
+                            f.id === featureId
+                                ? { ...f, isSubscribed: false }
+                                : f
+                        )
+                    );
+                    toast.success(`Unsubscribed from ${feature?.name}`);
+                } catch (error) {
+                    toast.error('Failed to unsubscribe from feature');
                 }
-            ]
+            }
         );
     };
 
@@ -605,19 +590,19 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
     const renderCurrentSubscription = () => {
         if (!subscription) return null;
-        
+
         const currentPlan = getCurrentPlan();
         if (!currentPlan) return null;
 
-        const statusColor = 
+        const statusColor =
             subscription.status === 'active' ? successColor :
-            subscription.status === 'trialing' ? warningColor :
-            dangerColor;
+                subscription.status === 'trialing' ? warningColor :
+                    dangerColor;
 
         return (
             <View style={styles.section}>
                 <Text style={[styles.sectionTitle, { color: textColor }]}>Current Subscription</Text>
-                
+
                 <View style={[styles.currentSubscriptionCard, { backgroundColor: secondaryBackgroundColor, borderColor }]}>
                     <View style={styles.subscriptionHeader}>
                         <View>
@@ -632,11 +617,11 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                             </Text>
                         </View>
                     </View>
-                    
+
                     <Text style={[styles.subscriptionDetail, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                         Renews on {new Date(subscription.currentPeriodEnd).toLocaleDateString()}
                     </Text>
-                    
+
                     {subscription.cancelAtPeriodEnd && (
                         <View style={styles.cancelNotice}>
                             <Ionicons name="warning" size={16} color={warningColor} />
@@ -645,7 +630,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                             </Text>
                         </View>
                     )}
-                    
+
                     <View style={styles.subscriptionActions}>
                         {subscription.cancelAtPeriodEnd ? (
                             <TouchableOpacity
@@ -662,10 +647,10 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                                 <Text style={styles.actionButtonText}>Cancel Subscription</Text>
                             </TouchableOpacity>
                         )}
-                        
+
                         <TouchableOpacity
                             style={[styles.actionButton, styles.secondaryButton, { borderColor }]}
-                            onPress={() => navigate && navigate('BillingManagement')}
+
                         >
                             <Text style={[styles.actionButtonText, { color: textColor }]}>Manage Billing</Text>
                         </TouchableOpacity>
@@ -692,7 +677,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         Monthly
                     </Text>
                 </TouchableOpacity>
-                
+
                 <TouchableOpacity
                     style={[
                         styles.billingOption,
@@ -708,7 +693,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                     </Text>
                 </TouchableOpacity>
             </View>
-            
+
             {billingInterval === 'year' && (
                 <Text style={[styles.savingsText, { color: successColor }]}>
                     💰 Save 20% with yearly billing
@@ -764,17 +749,17 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         <Text style={styles.popularText}>MOST POPULAR</Text>
                     </View>
                 )}
-                
+
                 {isAppSpecific && (
-                    <View style={[styles.appSpecificBadge, { 
-                        backgroundColor: isAvailableForCurrentApp ? successColor : warningColor 
+                    <View style={[styles.appSpecificBadge, {
+                        backgroundColor: isAvailableForCurrentApp ? successColor : warningColor
                     }]}>
                         <Text style={styles.appSpecificText}>
                             {isAvailableForCurrentApp ? 'App Exclusive' : 'Not Available'}
                         </Text>
                     </View>
                 )}
-                
+
                 <View style={styles.planHeader}>
                     <Text style={[styles.planName, { color: textColor }]}>{plan.name}</Text>
                     <Text style={[styles.planDescription, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
@@ -789,7 +774,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         </Text>
                     )}
                 </View>
-                
+
                 <View style={styles.planPricing}>
                     <Text style={[styles.planPrice, { color: textColor }]}>
                         {pricing.formatted}
@@ -798,7 +783,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         per {pricing.interval}
                     </Text>
                 </View>
-                
+
                 <View style={styles.planFeatures}>
                     {plan.features.map((feature, index) => (
                         <View key={index} style={styles.featureItem}>
@@ -807,7 +792,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         </View>
                     ))}
                 </View>
-                
+
                 {isCurrentPlan ? (
                     <View style={[styles.currentPlanButton, { backgroundColor: successColor }]}>
                         <Text style={styles.currentPlanText}>Current Plan</Text>
@@ -860,7 +845,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         Full Plans
                     </Text>
                 </TouchableOpacity>
-                
+
                 <TouchableOpacity
                     style={[
                         styles.tab,
@@ -927,10 +912,10 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
             >
                 <View style={styles.featureHeader}>
                     <View style={styles.featureIconContainer}>
-                        <Ionicons 
-                            name={getCategoryIcon(feature.category) as any} 
-                            size={24} 
-                            color={getCategoryColor(feature.category)} 
+                        <Ionicons
+                            name={getCategoryIcon(feature.category) as any}
+                            size={24}
+                            color={getCategoryColor(feature.category)}
                         />
                     </View>
                     <View style={styles.featureInfo}>
@@ -950,7 +935,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         </Text>
                     </View>
                 </View>
-                
+
                 {!isIncludedInCurrentPlan && (
                     <View style={styles.featurePricing}>
                         <Text style={[styles.featurePrice, { color: textColor }]}>
@@ -961,7 +946,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         </Text>
                     </View>
                 )}
-                
+
                 {isIncludedInCurrentPlan ? (
                     <View style={[styles.includedInPlanButton, { backgroundColor: primaryColor }]}>
                         <Ionicons name="checkmark-circle" size={16} color="#FFFFFF" />
@@ -1005,18 +990,18 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
     const renderIndividualFeatures = () => {
         const categories = ['analytics', 'customization', 'content', 'networking', 'productivity'];
-        
+
         return (
             <View style={styles.section}>
                 <Text style={[styles.sectionTitle, { color: textColor }]}>Individual Features</Text>
                 <Text style={[styles.sectionSubtitle, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                     Subscribe to specific features you need. Some features are included in subscription plans.
                 </Text>
-                
+
                 {categories.map(category => {
                     const categoryFeatures = individualFeatures.filter(f => f.category === category);
                     if (categoryFeatures.length === 0) return null;
-                    
+
                     return (
                         <View key={category} style={styles.categorySection}>
                             <Text style={[styles.categoryTitle, { color: textColor }]}>
@@ -1035,9 +1020,9 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
     const renderAppSwitcher = () => {
         if (!showAppSwitcher) return null;
-        
+
         const testApps = ['mention', 'oxy-social', 'oxy-workspace', 'oxy-creator'];
-        
+
         return (
             <View style={[styles.appSwitcher, { backgroundColor: isDarkTheme ? '#333333' : '#F0F0F0', borderColor }]}>
                 <Text style={[styles.appSwitcherTitle, { color: textColor }]}>
@@ -1050,7 +1035,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                                 key={app}
                                 style={[
                                     styles.appSwitcherButton,
-                                    { 
+                                    {
                                         backgroundColor: currentAppPackage === app ? primaryColor : 'transparent',
                                         borderColor: primaryColor,
                                     }
@@ -1087,10 +1072,10 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
         <View style={[styles.container, { backgroundColor }]}>
             {renderHeader()}
             {renderAppSwitcher()}
-            
+
             <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
                 {subscription && renderCurrentSubscription()}
-                
+
                 {!subscription && (
                     <View style={styles.section}>
                         <Text style={[styles.sectionTitle, { color: textColor }]}>Choose Your Plan</Text>
@@ -1099,27 +1084,27 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         </Text>
                     </View>
                 )}
-                
+
                 {!subscription && renderTabNavigation()}
-                
+
                 {!subscription && activeTab === 'plans' && renderBillingToggle()}
-                
+
                 {activeTab === 'plans' ? (
                     <View style={styles.section}>
                         {!subscription && (
                             <Text style={[styles.sectionTitle, { color: textColor }]}>Available Plans</Text>
                         )}
-                        
+
                         {plans.map(renderPlanCard)}
                     </View>
                 ) : (
                     renderIndividualFeatures()
                 )}
-                
+
                 {/* Features Comparison */}
                 <View style={styles.section}>
                     <Text style={[styles.sectionTitle, { color: textColor }]}>Why Go Premium?</Text>
-                    
+
                     <View style={[styles.benefitsCard, { backgroundColor: secondaryBackgroundColor, borderColor }]}>
                         <View style={styles.benefitItem}>
                             <Ionicons name="flash" size={24} color={primaryColor} />
@@ -1130,7 +1115,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                                 </Text>
                             </View>
                         </View>
-                        
+
                         <View style={styles.benefitItem}>
                             <Ionicons name="shield-checkmark" size={24} color={successColor} />
                             <View style={styles.benefitContent}>
@@ -1140,7 +1125,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                                 </Text>
                             </View>
                         </View>
-                        
+
                         <View style={styles.benefitItem}>
                             <Ionicons name="headset" size={24} color={warningColor} />
                             <View style={styles.benefitContent}>
@@ -1152,7 +1137,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         </View>
                     </View>
                 </View>
-                
+
                 <View style={styles.bottomSpacing} />
             </ScrollView>
         </View>