@oxyhq/services 5.5.9 → 5.6.0

package/src/ui/navigation/OxyRouter.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { OxyServices } from '../../core';
 
@@ -11,7 +11,6 @@ import SessionManagementScreen from '../screens/SessionManagementScreen';
 import AccountOverviewScreen from '../screens/AccountOverviewScreen';
 import AccountSettingsScreen from '../screens/AccountSettingsScreen';
 import PremiumSubscriptionScreen from '../screens/PremiumSubscriptionScreen';
-import BillingManagementScreen from '../screens/BillingManagementScreen';
 import AppInfoScreen from '../screens/AppInfoScreen';
 import FeedbackScreen from '../screens/FeedbackScreen';
 import KarmaCenterScreen from '../screens/karma/KarmaCenterScreen';
@@ -22,6 +21,8 @@ import KarmaRewardsScreen from '../screens/karma/KarmaRewardsScreen';
 import KarmaFAQScreen from '../screens/karma/KarmaFAQScreen';
 import ProfileScreen from '../screens/ProfileScreen';
 import FileManagementScreen from '../screens/FileManagementScreen';
+import RecoverAccountScreen from '../screens/RecoverAccountScreen';
+import PaymentGatewayScreen from '../screens/PaymentGatewayScreen';
 
 // Import types
 import { OxyRouterProps, RouteConfig } from './types';
@@ -36,6 +37,10 @@ const routes: Record<string, RouteConfig> = {
         component: SignUpScreen,
         snapPoints: ['10%', '90%'],
     },
+    RecoverAccount: {
+        component: RecoverAccountScreen,
+        snapPoints: ['10%', '80%'],
+    },
     AccountCenter: {
         component: AccountCenterScreen,
         snapPoints: ['60%', '100%'],
@@ -60,10 +65,6 @@ const routes: Record<string, RouteConfig> = {
         component: PremiumSubscriptionScreen,
         snapPoints: ['70%', '100%'],
     },
-    BillingManagement: {
-        component: BillingManagementScreen,
-        snapPoints: ['70%', '100%'],
-    },
     AppInfo: {
         component: AppInfoScreen,
         snapPoints: ['60%', '90%'],
@@ -104,6 +105,10 @@ const routes: Record<string, RouteConfig> = {
         component: FileManagementScreen,
         snapPoints: ['70%', '100%'],
     },
+    PaymentGateway: {
+        component: PaymentGatewayScreen,
+        snapPoints: ['60%', '90%'],
+    },
 };
 
 const OxyRouter: React.FC<OxyRouterProps> = ({
@@ -118,32 +123,49 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
 }) => {
     const [currentScreen, setCurrentScreen] = useState<string>(initialScreen);
     const [screenHistory, setScreenHistory] = useState<string[]>([initialScreen]);
-    const [screenProps, setScreenProps] = useState<Record<string, any>>({});
+    // Store props per screen for correct restoration on back
+    const [screenPropsMap, setScreenPropsMap] = useState<Record<string, any>>({ [initialScreen]: {} });
 
     // Update snap points when the screen changes
     useEffect(() => {
-        if (routes[currentScreen]) {
+        if (routes[currentScreen] && typeof adjustSnapPoints === 'function') {
             adjustSnapPoints(routes[currentScreen].snapPoints);
         }
     }, [currentScreen, adjustSnapPoints]);
 
-    // Navigation methods
-    const navigate = (screen: string, props: Record<string, any> = {}) => {
+    // Memoized navigation methods
+    const navigate = useCallback((screen: string, props: Record<string, any> = {}) => {
         if (routes[screen]) {
             setCurrentScreen(screen);
             setScreenHistory(prev => [...prev, screen]);
-            setScreenProps(props);
+            setScreenPropsMap(prev => ({ ...prev, [screen]: props }));
         } else {
-            console.error(`Screen "${screen}" not found`);
+            if (process.env.NODE_ENV !== 'production') {
+                console.error(`Screen "${screen}" not found`);
+            }
         }
-    };
+    }, []);
+
+    const goBack = useCallback(() => {
+        setScreenHistory(prev => {
+            if (prev.length > 1) {
+                const newHistory = [...prev];
+                newHistory.pop();
+                const previousScreen = newHistory[newHistory.length - 1];
+                setCurrentScreen(previousScreen);
+                return newHistory;
+            } else {
+                if (onClose) onClose();
+                return prev;
+            }
+        });
+    }, [onClose]);
 
     // Expose the navigate function to the parent component
     useEffect(() => {
         if (navigationRef) {
             navigationRef.current = navigate;
         }
-
         return () => {
             if (navigationRef) {
                 navigationRef.current = null;
@@ -153,83 +175,48 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
 
     // Expose the navigate method to the parent component (OxyProvider)
     useEffect(() => {
-        // Set up event listener for navigation events
         const handleNavigationEvent = (event: any) => {
             if (event && event.detail) {
-                // Support both string and object detail
                 if (typeof event.detail === 'string') {
-                    const screenName = event.detail;
-                    console.log(`Navigation event received for screen: ${screenName}`);
-                    navigate(screenName);
+                    navigate(event.detail);
                 } else if (typeof event.detail === 'object' && event.detail.screen) {
                     const { screen, props } = event.detail;
-                    console.log(`Navigation event received for screen: ${screen} with props`, props);
                     navigate(screen, props || {});
                 }
             }
         };
 
-        // For React Native - check for global navigation events
         let intervalId: any = null;
-
-        if (typeof document !== 'undefined') {
-            // Web - use custom event listener
+        if (typeof document !== 'undefined' && document.addEventListener) {
             document.addEventListener('oxy:navigate', handleNavigationEvent);
         } else {
-            // React Native - poll for global navigation events
             intervalId = setInterval(() => {
                 const globalNav = (globalThis as any).oxyNavigateEvent;
-                if (globalNav) {
-                    console.log(`RN Navigation event received:`, globalNav);
-                    if (globalNav.screen) {
-                        navigate(globalNav.screen, globalNav.props || {});
-                    }
-                    // Clear the event after processing
+                if (globalNav && globalNav.screen) {
+                    navigate(globalNav.screen, globalNav.props || {});
                     (globalThis as any).oxyNavigateEvent = null;
                 }
-            }, 100); // Check every 100ms
+            }, 100);
         }
-
-        // Cleanup
         return () => {
-            if (typeof document !== 'undefined') {
+            if (typeof document !== 'undefined' && document.removeEventListener) {
                 document.removeEventListener('oxy:navigate', handleNavigationEvent);
             }
             if (intervalId) {
                 clearInterval(intervalId);
             }
         };
-    }, []);
-
-    const goBack = () => {
-        if (screenHistory.length > 1) {
-            const newHistory = [...screenHistory];
-            newHistory.pop();
-            const previousScreen = newHistory[newHistory.length - 1];
-            setCurrentScreen(previousScreen);
-            setScreenHistory(newHistory);
-        } else {
-            // If no history, close the UI
-            if (onClose) {
-                onClose();
-            }
-        }
-    };
+    }, [navigate]);
 
     // Render the current screen component
     const renderScreen = () => {
         const CurrentScreen = routes[currentScreen]?.component;
-
-        console.log('[OxyRouter] Rendering screen:', currentScreen);
-        console.log('[OxyRouter] Available routes:', Object.keys(routes));
-        console.log('[OxyRouter] Current screen component found:', !!CurrentScreen);
-
         if (!CurrentScreen) {
-            console.error(`Screen "${currentScreen}" not found`);
+            if (process.env.NODE_ENV !== 'production') {
+                console.error(`Screen "${currentScreen}" not found`);
+            }
             return <View style={styles.errorContainer} />;
         }
-
-        console.log('[OxyRouter] Rendering screen component for:', currentScreen);
         return (
             <CurrentScreen
                 oxyServices={oxyServices}
@@ -239,7 +226,7 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
                 onAuthenticated={onAuthenticated}
                 theme={theme}
                 containerWidth={containerWidth}
-                {...screenProps}
+                {...(screenPropsMap[currentScreen] || {})}
             />
         );
     };
@@ -254,15 +241,12 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        minHeight: 200, // Ensure minimum height
-        backgroundColor: 'transparent', // Make sure it's visible
     },
     errorContainer: {
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
         minHeight: 100,
-        backgroundColor: 'red', // Make errors visible
     },
 });
 

package/src/ui/navigation/types.ts

@@ -1,7 +1,6 @@
 import { OxyServices } from '../../core';
 import { User } from '../../models/interfaces';
 import { ComponentType, ReactNode } from 'react';
-import { BottomSheetModalRef } from '../components/bottomSheet';
 
 /**
  * Base props for all screens in the Oxy UI system
@@ -33,7 +32,7 @@ export interface OxyRouterProps {
   onClose?: () => void;
   onAuthenticated?: (user: User) => void;
   theme: 'light' | 'dark';
-  adjustSnapPoints: (snapPoints: string[]) => void;
+  adjustSnapPoints?: (snapPoints: string[]) => void;
   navigationRef?: React.MutableRefObject<((screen: string, props?: Record<string, any>) => void) | null>;
   containerWidth?: number;
 }
@@ -120,35 +119,15 @@ export interface OxyProviderProps {
   onAuthStateChange?: (user: User | null) => void;
 
   /**
-   * Storage key prefix for AsyncStorage
+   * Prefix for keys in AsyncStorage
+   * @default "oxy"
    */
   storageKeyPrefix?: string;
 
   /**
-   * Whether to show the internal toaster
+   * Whether to show the internal toaster in the bottom sheet
+   * If false, only the provider's global toaster will be shown
    * @default true
    */
   showInternalToaster?: boolean;
-
-  /**
-   * External Redux store to use instead of the internal store
-   * If provided, the store must include the Oxy reducers using setupOxyStore()
-   * @example
-   * ```ts
-   * const store = configureStore({
-   *   reducer: {
-   *     ...setupOxyStore(),
-   *     myAppReducer,
-   *   },
-   * });
-   * ```
-   */
-  store?: any;
-
-  /**
-   * Skip Redux Provider wrapper if store is managed externally
-   * Set to true if your app already has a Redux Provider higher in the component tree
-   * @default false
-   */
-  skipReduxProvider?: boolean;
 }

package/src/ui/screens/AccountCenterScreen.tsx

@@ -13,13 +13,16 @@ import { BaseScreenProps } from '../navigation/types';
 import { useOxy } from '../context/OxyContext';
 import { packageInfo } from '../../constants/version';
 import { toast } from '../../lib/sonner';
+import { confirmAction } from '../utils/confirmAction';
 import { Ionicons } from '@expo/vector-icons';
 import { fontFamilies } from '../styles/fonts';
-import ProfileCard from '../components/ProfileCard';
-import Section from '../components/Section';
-import QuickActions from '../components/QuickActions';
-import GroupedSection from '../components/GroupedSection';
-import GroupedItem from '../components/GroupedItem';
+import {
+    ProfileCard,
+    Section,
+    QuickActions,
+    GroupedSection,
+    GroupedItem
+} from '../components';
 
 const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     onClose,
@@ -49,21 +52,9 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     };
 
     const confirmLogout = () => {
-        Alert.alert(
-            'Sign Out',
+        confirmAction(
             'Are you sure you want to sign out?',
-            [
-                {
-                    text: 'Cancel',
-                    style: 'cancel',
-                },
-                {
-                    text: 'Sign Out',
-                    onPress: handleLogout,
-                    style: 'destructive',
-                },
-            ],
-            { cancelable: true }
+            handleLogout
         );
     };
 
@@ -105,7 +96,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                             { id: 'settings', icon: 'settings', iconColor: '#5856D6', title: 'Settings', onPress: () => navigate('AccountSettings') },
                             { id: 'sessions', icon: 'shield-checkmark', iconColor: '#30D158', title: 'Sessions', onPress: () => navigate('SessionManagement') },
                             { id: 'premium', icon: 'star', iconColor: '#FFD700', title: 'Premium', onPress: () => navigate('PremiumSubscription') },
-                            ...(user?.isPremium ? [{ id: 'billing', icon: 'card', iconColor: '#34C759', title: 'Billing', onPress: () => navigate('BillingManagement') }] : []),
+                            ...(user?.isPremium ? [{ id: 'billing', icon: 'card', iconColor: '#34C759', title: 'Billing', onPress: () => navigate('') }] : []),
                             ...(sessions && sessions.length > 1 ? [{ id: 'switch', icon: 'swap-horizontal', iconColor: '#FF9500', title: 'Switch', onPress: () => navigate('AccountSwitcher') }] : []),
                         ]}
                         theme={theme}
@@ -162,7 +153,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                                 iconColor: '#34C759',
                                 title: 'Billing Management',
                                 subtitle: 'Payment methods and invoices',
-                                onPress: () => navigate('BillingManagement'),
+                                onPress: () => navigate(''),
                             }] : []),
                         ]}
                         theme={theme}

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -18,6 +18,7 @@ import Avatar from '../components/Avatar';
 import OxyIcon from '../components/icon/OxyIcon';
 import { fontFamilies } from '../styles/fonts';
 import { toast } from '../../lib/sonner';
+import { confirmAction } from '../utils/confirmAction';
 import { Ionicons } from '@expo/vector-icons';
 
 /**
@@ -89,7 +90,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             return {
                                 id: session.sessionId,
                                 sessionId: session.sessionId,
-                                username: session.username || 'Unknown User',
+                                username: 'Unknown User',
                                 email: 'No email available',
                                 avatar: null,
                                 userProfile: null
@@ -129,21 +130,9 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
     }, [logout, onClose]);
 
     const confirmLogout = useCallback(() => {
-        Alert.alert(
-            'Sign Out',
+        confirmAction(
             'Are you sure you want to sign out?',
-            [
-                {
-                    text: 'Cancel',
-                    style: 'cancel',
-                },
-                {
-                    text: 'Sign Out',
-                    onPress: handleLogout,
-                    style: 'destructive',
-                },
-            ],
-            { cancelable: true }
+            handleLogout
         );
     }, [handleLogout]);
 
@@ -152,21 +141,9 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
     }, []);
 
     const handleSignOutAll = useCallback(() => {
-        Alert.alert(
-            'Sign Out of All Accounts',
+        confirmAction(
             'Are you sure you want to sign out of all accounts?',
-            [
-                {
-                    text: 'Cancel',
-                    style: 'cancel',
-                },
-                {
-                    text: 'Sign Out All',
-                    onPress: handleLogout,
-                    style: 'destructive',
-                },
-            ],
-            { cancelable: true }
+            handleLogout
         );
     }, [handleLogout]);
 
@@ -292,7 +269,6 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                     {user?.isPremium && (
                         <TouchableOpacity
                             style={[styles.settingItem, styles.lastSettingItem]}
-                            onPress={() => navigate?.('BillingManagement')}
                         >
                             <View style={styles.settingInfo}>
                                 <OxyIcon name="card" size={20} color="#34C759" style={styles.settingIcon} />

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -9,6 +9,7 @@ import {
     Alert,
     TextInput,
     Animated,
+    Platform,
 } from 'react-native';
 import { BaseScreenProps } from '../navigation/types';
 import { useOxy } from '../context/OxyContext';
@@ -17,6 +18,7 @@ import OxyIcon from '../components/icon/OxyIcon';
 import { Ionicons } from '@expo/vector-icons';
 import { toast } from '../../lib/sonner';
 import { fontFamilies } from '../styles/fonts';
+import { confirmAction } from '../utils/confirmAction';
 
 const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
     onClose,
@@ -132,28 +134,11 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
     };
 
     const handleAvatarUpdate = () => {
-        Alert.alert(
-            'Update Avatar',
-            'Choose how you want to update your profile picture',
-            [
-                {
-                    text: 'Cancel',
-                    style: 'cancel',
-                },
-                {
-                    text: 'Use Mock URL',
-                    onPress: () => {
-                        const mockUrl = `https://ui-avatars.com/api/?name=${displayName || username}&background=random`;
-                        setAvatarUrl(mockUrl);
-                    },
-                },
-                {
-                    text: 'Remove Avatar',
-                    onPress: () => setAvatarUrl(''),
-                    style: 'destructive',
-                },
-            ]
-        );
+        // Always use confirmAction for both web and native
+        confirmAction('Remove your profile picture?', () => {
+            setAvatarUrl('');
+            toast.success('Avatar removed');
+        });
     };
 
     const startEditing = (type: string, currentValue: string) => {

package/src/ui/screens/AccountSwitcherScreen.tsx

@@ -17,6 +17,7 @@ import { SecureClientSession } from '../../models/secureSession';
 import { fontFamilies } from '../styles/fonts';
 import { User } from '../../models/interfaces';
 import { toast } from '../../lib/sonner';
+import { confirmAction } from '../utils/confirmAction';
 import OxyIcon from '../components/icon/OxyIcon';
 import { Ionicons } from '@expo/vector-icons';
 import Avatar from '../components/Avatar';
@@ -142,40 +143,21 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
         }
     };
 
-    const handleRemoveSession = async (sessionId: string) => {
-        const sessionToRemove = sessionsWithUsers.find(s => s.sessionId === sessionId);
-        if (!sessionToRemove) return;
-
-        const displayName = typeof sessionToRemove.userProfile?.name === 'object'
-            ? sessionToRemove.userProfile.name.full || sessionToRemove.userProfile.name.first || sessionToRemove.userProfile.username
-            : sessionToRemove.userProfile?.name || sessionToRemove.userProfile?.username || 'this account';
-
-        Alert.alert(
-            'Remove Account',
+    const handleRemoveSession = async (sessionId: string, displayName: string) => {
+        confirmAction(
             `Are you sure you want to remove ${displayName} from this device? You'll need to sign in again to access this account.`,
-            [
-                {
-                    text: 'Cancel',
-                    style: 'cancel',
-                },
-                {
-                    text: 'Remove',
-                    style: 'destructive',
-                    onPress: async () => {
-                        setRemovingUserId(sessionId);
-                        try {
-                            await removeSession(sessionId);
-                            toast.success('Account removed successfully!');
-                        } catch (error) {
-                            console.error('Remove session failed:', error);
-                            toast.error('There was a problem removing the account. Please try again.');
-                        } finally {
-                            setRemovingUserId(null);
-                        }
-                    },
-                },
-            ],
-            { cancelable: true }
+            async () => {
+                setRemovingUserId(sessionId);
+                try {
+                    await removeSession(sessionId);
+                    toast.success('Account removed successfully!');
+                } catch (error) {
+                    console.error('Remove session failed:', error);
+                    toast.error('There was a problem removing the account. Please try again.');
+                } finally {
+                    setRemovingUserId(null);
+                }
+            }
         );
     };
 
@@ -238,34 +220,22 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     };
 
     const handleRemoteSessionLogout = async (sessionId: string, deviceName: string) => {
-        Alert.alert(
-            'Remove Device Session',
+        confirmAction(
             `Are you sure you want to sign out from "${deviceName}"? This will end the session on that device.`,
-            [
-                {
-                    text: 'Cancel',
-                    style: 'cancel',
-                },
-                {
-                    text: 'Sign Out',
-                    style: 'destructive',
-                    onPress: async () => {
-                        setRemoteLogoutSessionId(sessionId);
-                        try {
-                            await oxyServices?.logoutSecureSession(user?.sessionId || '', sessionId);
-                            // Refresh device sessions list
-                            await loadAllDeviceSessions();
-                            toast.success(`Signed out from ${deviceName} successfully!`);
-                        } catch (error) {
-                            console.error('Remote logout failed:', error);
-                            toast.error('There was a problem signing out from the device. Please try again.');
-                        } finally {
-                            setRemoteLogoutSessionId(null);
-                        }
-                    },
-                },
-            ],
-            { cancelable: true }
+            async () => {
+                setRemoteLogoutSessionId(sessionId);
+                try {
+                    await oxyServices?.logoutSecureSession(user?.sessionId || '', sessionId);
+                    // Refresh device sessions list
+                    await loadAllDeviceSessions();
+                    toast.success(`Signed out from ${deviceName} successfully!`);
+                } catch (error) {
+                    console.error('Remote logout failed:', error);
+                    toast.error('There was a problem signing out from the device. Please try again.');
+                } finally {
+                    setRemoteLogoutSessionId(null);
+                }
+            }
         );
     };
 
@@ -277,34 +247,22 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
             return;
         }
 
-        Alert.alert(
-            'Sign Out All Other Devices',
+        confirmAction(
             `Are you sure you want to sign out from all ${otherDevicesCount} other device(s)? This will end sessions on all other devices except this one.`,
-            [
-                {
-                    text: 'Cancel',
-                    style: 'cancel',
-                },
-                {
-                    text: 'Sign Out All',
-                    style: 'destructive',
-                    onPress: async () => {
-                        setLoggingOutAllDevices(true);
-                        try {
-                            await oxyServices?.logoutAllDeviceSessions(user?.sessionId || '', undefined, true);
-                            // Refresh device sessions list
-                            await loadAllDeviceSessions();
-                            toast.success('Signed out from all other devices successfully!');
-                        } catch (error) {
-                            console.error('Logout all devices failed:', error);
-                            toast.error('There was a problem signing out from other devices. Please try again.');
-                        } finally {
-                            setLoggingOutAllDevices(false);
-                        }
-                    },
-                },
-            ],
-            { cancelable: true }
+            async () => {
+                setLoggingOutAllDevices(true);
+                try {
+                    await oxyServices?.logoutAllDeviceSessions(user?.sessionId || '', undefined, true);
+                    // Refresh device sessions list
+                    await loadAllDeviceSessions();
+                    toast.success('Signed out from all other devices successfully!');
+                } catch (error) {
+                    console.error('Logout all devices failed:', error);
+                    toast.error('There was a problem signing out from other devices. Please try again.');
+                } finally {
+                    setLoggingOutAllDevices(false);
+                }
+            }
         );
     };
 
@@ -432,7 +390,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                                     </TouchableOpacity>
                                                     <TouchableOpacity
                                                         style={styles.removeButton}
-                                                        onPress={() => handleRemoveSession(sessionWithUser.sessionId)}
+                                                        onPress={() => handleRemoveSession(sessionWithUser.sessionId, displayName)}
                                                         disabled={isSwitching || isRemoving}
                                                     >
                                                         {isRemoving ? (