@oxyhq/services 5.5.9 → 5.6.1

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,8 @@ 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';
+import { useAuthStore } from '../stores/authStore';
 
 const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
     onClose,
@@ -25,6 +28,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
     navigate,
 }) => {
     const { user, oxyServices, isLoading: authLoading, isAuthenticated } = useOxy();
+    const updateUser = useAuthStore((state) => state.updateUser);
     const [isLoading, setIsLoading] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
 
@@ -33,11 +37,12 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
 
     // Form state
     const [displayName, setDisplayName] = useState('');
+    const [lastName, setLastName] = useState('');
     const [username, setUsername] = useState('');
     const [email, setEmail] = useState('');
     const [bio, setBio] = useState('');
     const [location, setLocation] = useState('');
-    const [website, setWebsite] = useState('');
+    const [links, setLinks] = useState<string[]>([]);
     const [avatarUrl, setAvatarUrl] = useState('');
 
     // Editing states
@@ -45,11 +50,12 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
 
     // Temporary input states for inline editing
     const [tempDisplayName, setTempDisplayName] = useState('');
+    const [tempLastName, setTempLastName] = useState('');
     const [tempUsername, setTempUsername] = useState('');
     const [tempEmail, setTempEmail] = useState('');
     const [tempBio, setTempBio] = useState('');
     const [tempLocation, setTempLocation] = useState('');
-    const [tempWebsite, setTempWebsite] = useState('');
+    const [tempLinks, setTempLinks] = useState<string[]>([]);
 
     // Memoize theme-related calculations to prevent unnecessary recalculations
     const themeStyles = useMemo(() => {
@@ -76,14 +82,19 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
         if (user) {
             const userDisplayName = typeof user.name === 'string'
                 ? user.name
-                : user.name?.full || user.name?.first || '';
-
+                : user.name?.first || user.name?.full || '';
+            const userLastName = typeof user.name === 'object' ? user.name?.last || '' : '';
             setDisplayName(userDisplayName);
+            setLastName(userLastName);
             setUsername(user.username || '');
             setEmail(user.email || '');
             setBio(user.bio || '');
             setLocation(user.location || '');
-            setWebsite(user.website || '');
+            setLinks(
+                Array.isArray(user.links)
+                    ? user.links.map(l => typeof l === 'string' ? l : l.link).filter(Boolean)
+                    : user.website ? [user.website] : []
+            );
             setAvatarUrl(user.avatar?.url || '');
         }
     }, [user]);
@@ -100,12 +111,12 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                 email,
                 bio,
                 location,
-                website,
+                links,
             };
 
             // Handle name field
-            if (displayName) {
-                updates.name = displayName;
+            if (displayName || lastName) {
+                updates.name = { first: displayName, last: lastName };
             }
 
             // Handle avatar
@@ -113,7 +124,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                 updates.avatar = { url: avatarUrl };
             }
 
-            await oxyServices.updateProfile(updates);
+            await updateUser(updates, oxyServices);
             toast.success('Profile updated successfully');
 
             animateSaveButton(1); // Scale back to normal
@@ -132,34 +143,18 @@ 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) => {
         switch (type) {
             case 'displayName':
-                setTempDisplayName(currentValue);
+                setTempDisplayName(displayName);
+                setTempLastName(lastName);
                 break;
             case 'username':
                 setTempUsername(currentValue);
@@ -173,8 +168,8 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
             case 'location':
                 setTempLocation(currentValue);
                 break;
-            case 'website':
-                setTempWebsite(currentValue);
+            case 'links':
+                setTempLinks([...links]);
                 break;
         }
         setEditingField(type);
@@ -186,6 +181,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
         switch (type) {
             case 'displayName':
                 setDisplayName(tempDisplayName);
+                setLastName(tempLastName);
                 break;
             case 'username':
                 setUsername(tempUsername);
@@ -199,8 +195,8 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
             case 'location':
                 setLocation(tempLocation);
                 break;
-            case 'website':
-                setWebsite(tempWebsite);
+            case 'links':
+                setLinks(tempLinks);
                 break;
         }
 
@@ -222,7 +218,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
             email: 'Email',
             bio: 'Bio',
             location: 'Location',
-            website: 'Website'
+            links: 'Links'
         };
         return labels[type as keyof typeof labels] || 'Field';
     };
@@ -234,19 +230,52 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
             email: { name: 'mail', color: '#FF9500' },
             bio: { name: 'document-text', color: '#34C759' },
             location: { name: 'location', color: '#FF3B30' },
-            website: { name: 'link', color: '#32D74B' }
+            links: { name: 'link', color: '#32D74B' }
         };
         return icons[type as keyof typeof icons] || { name: 'person', color: '#007AFF' };
     };
 
     const renderEditingField = (type: string) => {
+        if (type === 'displayName') {
+            return (
+                <View style={styles.editingFieldContainer}>
+                    <View style={styles.editingFieldContent}>
+                        <View style={[styles.newValueSection, { flexDirection: 'row', gap: 12 }]}>
+                            <View style={{ flex: 1 }}>
+                                <Text style={styles.editingFieldLabel}>First Name</Text>
+                                <TextInput
+                                    style={styles.editingFieldInput}
+                                    value={tempDisplayName}
+                                    onChangeText={setTempDisplayName}
+                                    placeholder="Enter your first name"
+                                    placeholderTextColor={themeStyles.isDarkTheme ? '#aaa' : '#999'}
+                                    autoFocus
+                                    selectionColor={themeStyles.primaryColor}
+                                />
+                            </View>
+                            <View style={{ flex: 1 }}>
+                                <Text style={styles.editingFieldLabel}>Last Name</Text>
+                                <TextInput
+                                    style={styles.editingFieldInput}
+                                    value={tempLastName}
+                                    onChangeText={setTempLastName}
+                                    placeholder="Enter your last name"
+                                    placeholderTextColor={themeStyles.isDarkTheme ? '#aaa' : '#999'}
+                                    selectionColor={themeStyles.primaryColor}
+                                />
+                            </View>
+                        </View>
+                    </View>
+                </View>
+            );
+        }
         const fieldConfig = {
             displayName: { label: 'Display Name', value: displayName, placeholder: 'Enter your display name', icon: 'person', color: '#007AFF', multiline: false, keyboardType: 'default' as const },
             username: { label: 'Username', value: username, placeholder: 'Choose a username', icon: 'at', color: '#5856D6', multiline: false, keyboardType: 'default' as const },
             email: { label: 'Email', value: email, placeholder: 'Enter your email address', icon: 'mail', color: '#FF9500', multiline: false, keyboardType: 'email-address' as const },
             bio: { label: 'Bio', value: bio, placeholder: 'Tell people about yourself...', icon: 'document-text', color: '#34C759', multiline: true, keyboardType: 'default' as const },
             location: { label: 'Location', value: location, placeholder: 'Enter your location', icon: 'location', color: '#FF3B30', multiline: false, keyboardType: 'default' as const },
-            website: { label: 'Website', value: website, placeholder: 'Enter your website URL', icon: 'link', color: '#32D74B', multiline: false, keyboardType: 'url' as const }
+            links: { label: 'Links', value: links.join(', '), placeholder: 'Enter your links (comma separated)', icon: 'link', color: '#32D74B', multiline: false, keyboardType: 'url' as const }
         };
 
         const config = fieldConfig[type as keyof typeof fieldConfig];
@@ -259,7 +288,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                 case 'email': return tempEmail;
                 case 'bio': return tempBio;
                 case 'location': return tempLocation;
-                case 'website': return tempWebsite;
+                case 'links': return tempLinks.join(', ');
                 default: return '';
             }
         })();
@@ -271,7 +300,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                 case 'email': setTempEmail(text); break;
                 case 'bio': setTempBio(text); break;
                 case 'location': setTempLocation(text); break;
-                case 'website': setTempWebsite(text); break;
+                case 'links': setTempLinks(text.split(',').map(s => s.trim()).filter(Boolean)); break;
             }
         };
 
@@ -461,7 +490,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                             {renderField(
                                 'displayName',
                                 'Display Name',
-                                displayName,
+                                [displayName, lastName].filter(Boolean).join(' '), // Show full name
                                 'Add your display name',
                                 'person',
                                 '#007AFF',
@@ -529,10 +558,10 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                             )}
 
                             {renderField(
-                                'website',
-                                'Website',
-                                website,
-                                'Add your website',
+                                'links',
+                                'Links',
+                                links.join(', '),
+                                'Add your links',
                                 'link',
                                 '#32D74B',
                                 false,

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 ? (