@oxyhq/services 5.4.4 → 5.4.5

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -34,7 +34,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
     theme,
     navigate,
 }) => {
-    const { user, logout, isLoading, sessions, activeSessionId, oxyServices } = useOxy();
+    const { user, logout, isLoading, sessions, activeSessionId, oxyServices, isAuthenticated } = useOxy();
     const [showMoreAccounts, setShowMoreAccounts] = useState(false);
     const [additionalAccountsData, setAdditionalAccountsData] = useState<any[]>([]);
     const [loadingAdditionalAccounts, setLoadingAdditionalAccounts] = useState(false);
@@ -55,8 +55,8 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
     }, [theme]);
 
     // Memoize additional accounts filtering to prevent recalculation on every render
-    const additionalAccounts = useMemo(() => 
-        sessions.filter(session => 
+    const additionalAccounts = useMemo(() =>
+        sessions.filter(session =>
             session.sessionId !== activeSessionId && session.userId !== user?.id
         ), [sessions, activeSessionId, user?.id]
     );
@@ -170,7 +170,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
         );
     }, [handleLogout]);
 
-    if (!user) {
+    if (!isAuthenticated) {
         return (
             <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
                 <Text style={[styles.message, { color: themeStyles.textColor }]}>Not signed in</Text>
@@ -202,7 +202,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {/* User Profile Section */}
                 <View style={styles.section}>
                     <Text style={styles.sectionTitle}>Profile</Text>
-                    
+
                     <View style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem]}>
                         <View style={styles.userIcon}>
                             <Avatar
@@ -215,9 +215,9 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                         <View style={styles.settingInfo}>
                             <View>
                                 <Text style={styles.settingLabel}>
-                                    {typeof user.name === 'string' ? user.name : user.name?.full || user.name?.first || user.username}
+                                    {user ? (typeof user.name === 'string' ? user.name : user.name?.full || user.name?.first || user.username) : 'Loading...'}
                                 </Text>
-                                <Text style={styles.settingDescription}>{user.email || user.username}</Text>
+                                <Text style={styles.settingDescription}>{user ? (user.email || user.username) : 'Loading...'}</Text>
                             </View>
                         </View>
                         <TouchableOpacity
@@ -232,8 +232,8 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {/* Account Settings */}
                 <View style={styles.section}>
                     <Text style={styles.sectionTitle}>Account Settings</Text>
-                    
-                    <TouchableOpacity 
+
+                    <TouchableOpacity
                         style={[styles.settingItem, styles.firstSettingItem]}
                         onPress={() => navigate?.('AccountSettings', { activeTab: 'profile' })}
                     >
@@ -247,7 +247,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                         <OxyIcon name="chevron-forward" size={16} color="#ccc" />
                     </TouchableOpacity>
 
-                    <TouchableOpacity 
+                    <TouchableOpacity
                         style={styles.settingItem}
                         onPress={() => navigate?.('AccountSettings', { activeTab: 'password' })}
                     >
@@ -261,7 +261,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                         <OxyIcon name="chevron-forward" size={16} color="#ccc" />
                     </TouchableOpacity>
 
-                    <TouchableOpacity 
+                    <TouchableOpacity
                         style={styles.settingItem}
                         onPress={() => navigate?.('AccountSettings', { activeTab: 'notifications' })}
                     >
@@ -275,7 +275,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                         <OxyIcon name="chevron-forward" size={16} color="#ccc" />
                     </TouchableOpacity>
 
-                    <TouchableOpacity 
+                    <TouchableOpacity
                         style={[styles.settingItem]}
                         onPress={() => navigate?.('PremiumSubscription')}
                     >
@@ -283,14 +283,14 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             <OxyIcon name="star" size={20} color="#FFD700" style={styles.settingIcon} />
                             <View>
                                 <Text style={styles.settingLabel}>Oxy+ Subscriptions</Text>
-                                <Text style={styles.settingDescription}>{user.isPremium ? 'Manage your premium plan' : 'Upgrade to premium features'}</Text>
+                                <Text style={styles.settingDescription}>{user?.isPremium ? 'Manage your premium plan' : 'Upgrade to premium features'}</Text>
                             </View>
                         </View>
                         <OxyIcon name="chevron-forward" size={16} color="#ccc" />
                     </TouchableOpacity>
 
-                    {user.isPremium && (
-                        <TouchableOpacity 
+                    {user?.isPremium && (
+                        <TouchableOpacity
                             style={[styles.settingItem, styles.lastSettingItem]}
                             onPress={() => navigate?.('BillingManagement')}
                         >
@@ -310,7 +310,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {showMoreAccounts && (
                     <View style={styles.section}>
                         <Text style={styles.sectionTitle}>Additional Accounts{additionalAccountsData.length > 0 ? ` (${additionalAccountsData.length})` : ''}</Text>
-                        
+
                         {loadingAdditionalAccounts ? (
                             <View style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem]}>
                                 <View style={styles.loadingContainer}>
@@ -324,7 +324,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                     <TouchableOpacity
                                         key={account.id}
                                         style={[
-                                            styles.settingItem, 
+                                            styles.settingItem,
                                             index === 0 && styles.firstSettingItem,
                                             index === additionalAccountsData.length - 1 && styles.lastSettingItem
                                         ]}
@@ -348,7 +348,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                         <View style={styles.settingInfo}>
                                             <View>
                                                 <Text style={styles.settingLabel}>
-                                                    {typeof account.name === 'object' 
+                                                    {typeof account.name === 'object'
                                                         ? account.name?.full || account.name?.first || account.username
                                                         : account.name || account.username
                                                     }
@@ -378,7 +378,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {showMoreAccounts && (
                     <View style={styles.section}>
                         <Text style={styles.sectionTitle}>Account Management</Text>
-                        
+
                         <TouchableOpacity
                             style={[styles.settingItem, styles.firstSettingItem]}
                             onPress={handleAddAccount}
@@ -412,7 +412,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {/* Quick Actions */}
                 <View style={styles.section}>
                     <Text style={styles.sectionTitle}>Quick Actions</Text>
-                    
+
                     <TouchableOpacity
                         style={[styles.settingItem, styles.firstSettingItem]}
                         onPress={() => setShowMoreAccounts(!showMoreAccounts)}
@@ -424,9 +424,9 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                     {showMoreAccounts ? 'Hide' : 'Show'} Account Switcher
                                 </Text>
                                 <Text style={styles.settingDescription}>
-                                    {showMoreAccounts 
-                                        ? 'Hide account switcher' 
-                                        : additionalAccountsData.length > 0 
+                                    {showMoreAccounts
+                                        ? 'Hide account switcher'
+                                        : additionalAccountsData.length > 0
                                             ? `Switch between ${additionalAccountsData.length + 1} accounts`
                                             : loadingAdditionalAccounts
                                                 ? 'Loading additional accounts...'
@@ -470,7 +470,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {/* Support & Settings */}
                 <View style={styles.section}>
                     <Text style={styles.sectionTitle}>Support & Settings</Text>
-                    
+
                     <TouchableOpacity
                         style={[styles.settingItem, styles.firstSettingItem]}
                         onPress={() => toast.info('Account preferences coming soon!')}
@@ -544,7 +544,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
 
                 {/* Sign Out */}
                 <View style={styles.section}>
-                    <TouchableOpacity 
+                    <TouchableOpacity
                         style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem, styles.signOutButton]}
                         onPress={confirmLogout}
                     >

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -24,7 +24,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
     goBack,
     navigate,
 }) => {
-    const { user, oxyServices, isLoading: authLoading } = useOxy();
+    const { user, oxyServices, isLoading: authLoading, isAuthenticated } = useOxy();
     const [isLoading, setIsLoading] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
 
@@ -74,10 +74,10 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
     // Load user data
     useEffect(() => {
         if (user) {
-            const userDisplayName = typeof user.name === 'string' 
-                ? user.name 
+            const userDisplayName = typeof user.name === 'string'
+                ? user.name
                 : user.name?.full || user.name?.first || '';
-            
+
             setDisplayName(userDisplayName);
             setUsername(user.username || '');
             setEmail(user.email || '');
@@ -115,9 +115,9 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
 
             await oxyServices.updateProfile(updates);
             toast.success('Profile updated successfully');
-            
+
             animateSaveButton(1); // Scale back to normal
-            
+
             if (onClose) {
                 onClose();
             } else if (goBack) {
@@ -182,7 +182,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
 
     const saveField = (type: string) => {
         animateSaveButton(0.95); // Scale down slightly for animation
-        
+
         switch (type) {
             case 'displayName':
                 setDisplayName(tempDisplayName);
@@ -203,7 +203,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                 setWebsite(tempWebsite);
                 break;
         }
-        
+
         // Brief delay for animation, then reset and close editing
         setTimeout(() => {
             animateSaveButton(1);
@@ -263,7 +263,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                 default: return '';
             }
         })();
-        
+
         const setTempValue = (text: string) => {
             switch (type) {
                 case 'displayName': setTempDisplayName(text); break;
@@ -285,7 +285,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                         <TextInput
                             style={[
                                 config.multiline ? styles.editingFieldTextArea : styles.editingFieldInput,
-                                { 
+                                {
                                     backgroundColor: themeStyles.isDarkTheme ? '#333' : '#fff',
                                     color: themeStyles.isDarkTheme ? '#fff' : '#000',
                                     borderColor: themeStyles.primaryColor
@@ -326,7 +326,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
         ];
 
         return (
-            <TouchableOpacity 
+            <TouchableOpacity
                 style={itemStyles}
                 onPress={() => startEditing(type, value)}
             >
@@ -344,7 +344,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
         );
     };
 
-    if (authLoading || !user) {
+    if (authLoading || !isAuthenticated) {
         return (
             <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor, justifyContent: 'center' }]}>
                 <ActivityIndicator size="large" color={themeStyles.primaryColor} />
@@ -363,14 +363,14 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                                 <Ionicons name="close" size={24} color="#666" />
                             </TouchableOpacity>
                             <Animated.View style={{ transform: [{ scale: saveButtonScale }] }}>
-                                <TouchableOpacity 
+                                <TouchableOpacity
                                     style={[
-                                        styles.saveHeaderButton, 
-                                        { 
+                                        styles.saveHeaderButton,
+                                        {
                                             opacity: isSaving ? 0.7 : 1,
                                             backgroundColor: editingField ? getFieldIcon(editingField).color : '#007AFF'
                                         }
-                                    ]} 
+                                    ]}
                                     onPress={() => saveField(editingField)}
                                     disabled={isSaving}
                                 >
@@ -384,11 +384,11 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                         </View>
                         <View style={styles.editingHeaderBottom}>
                             <View style={styles.headerTitleWithIcon}>
-                                <OxyIcon 
-                                    name={getFieldIcon(editingField).name} 
-                                    size={50} 
-                                    color={getFieldIcon(editingField).color} 
-                                    style={styles.headerIcon} 
+                                <OxyIcon
+                                    name={getFieldIcon(editingField).name}
+                                    size={50}
+                                    color={getFieldIcon(editingField).color}
+                                    style={styles.headerIcon}
                                 />
                                 <Text style={styles.headerTitleLarge}>{getFieldLabel(editingField)}</Text>
                             </View>
@@ -401,8 +401,8 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                         </TouchableOpacity>
                         <Text style={styles.headerTitle}>Account Settings</Text>
                         <Animated.View style={{ transform: [{ scale: saveButtonScale }] }}>
-                            <TouchableOpacity 
-                                style={[styles.saveIconButton, { opacity: isSaving ? 0.7 : 1 }]} 
+                            <TouchableOpacity
+                                style={[styles.saveIconButton, { opacity: isSaving ? 0.7 : 1 }]}
                                 onPress={handleSave}
                                 disabled={isSaving}
                             >
@@ -429,8 +429,8 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                         {/* Profile Picture Section */}
                         <View style={styles.section}>
                             <Text style={styles.sectionTitle}>Profile Picture</Text>
-                            
-                            <TouchableOpacity 
+
+                            <TouchableOpacity
                                 style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem]}
                                 onPress={handleAvatarUpdate}
                             >
@@ -457,7 +457,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                         {/* Basic Information */}
                         <View style={styles.section}>
                             <Text style={styles.sectionTitle}>Basic Information</Text>
-                            
+
                             {renderField(
                                 'displayName',
                                 'Display Name',
@@ -501,7 +501,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                         {/* About You */}
                         <View style={styles.section}>
                             <Text style={styles.sectionTitle}>About You</Text>
-                            
+
                             {renderField(
                                 'bio',
                                 'Bio',
@@ -545,8 +545,8 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                         {/* Quick Actions */}
                         <View style={styles.section}>
                             <Text style={styles.sectionTitle}>Quick Actions</Text>
-                            
-                            <TouchableOpacity 
+
+                            <TouchableOpacity
                                 style={[styles.settingItem, styles.firstSettingItem]}
                                 onPress={() => toast.info('Privacy settings coming soon!')}
                             >
@@ -560,7 +560,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                                 <OxyIcon name="chevron-forward" size={16} color="#ccc" />
                             </TouchableOpacity>
 
-                            <TouchableOpacity 
+                            <TouchableOpacity
                                 style={[styles.settingItem, styles.lastSettingItem]}
                                 onPress={() => toast.info('Account verification coming soon!')}
                             >

package/src/ui/screens/AccountSwitcherScreen.tsx

@@ -43,20 +43,21 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     goBack,
     oxyServices,
 }) => {
-    const { 
-        user, 
-        sessions, 
+    const {
+        user,
+        sessions,
         activeSessionId,
-        switchSession, 
-        removeSession, 
+        switchSession,
+        removeSession,
         logoutAll,
-        isLoading 
+        isLoading,
+        isAuthenticated
     } = useOxy();
 
     const [sessionsWithUsers, setSessionsWithUsers] = useState<SessionWithUser[]>([]);
     const [switchingToUserId, setSwitchingToUserId] = useState<string | null>(null);
     const [removingUserId, setRemovingUserId] = useState<string | null>(null);
-    
+
     // Device session management state
     const [showDeviceManagement, setShowDeviceManagement] = useState(false);
     const [deviceSessions, setDeviceSessions] = useState<DeviceSession[]>([]);
@@ -66,7 +67,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
 
     const screenWidth = Dimensions.get('window').width;
     const isDarkTheme = theme === 'dark';
-    
+
     // Modern color scheme
     const colors = {
         background: isDarkTheme ? '#000000' : '#FFFFFF',
@@ -99,19 +100,19 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                 try {
                     // Try to get user profile using the session
                     const userProfile = await oxyServices.getUserBySession(session.sessionId);
-                    
-                    setSessionsWithUsers(prev => 
-                        prev.map(s => 
-                            s.sessionId === session.sessionId 
+
+                    setSessionsWithUsers(prev =>
+                        prev.map(s =>
+                            s.sessionId === session.sessionId
                                 ? { ...s, userProfile, isLoadingProfile: false }
                                 : s
                         )
                     );
                 } catch (error) {
                     console.error(`Failed to load profile for session ${session.sessionId}:`, error);
-                    setSessionsWithUsers(prev => 
-                        prev.map(s => 
-                            s.sessionId === session.sessionId 
+                    setSessionsWithUsers(prev =>
+                        prev.map(s =>
+                            s.sessionId === session.sessionId
                                 ? { ...s, isLoadingProfile: false }
                                 : s
                         )
@@ -145,7 +146,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
         const sessionToRemove = sessionsWithUsers.find(s => s.sessionId === sessionId);
         if (!sessionToRemove) return;
 
-        const displayName = typeof sessionToRemove.userProfile?.name === 'object' 
+        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';
 
@@ -187,20 +188,20 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
         console.log('🔴 sessions array:', sessions);
         console.log('🔴 isLoading:', isLoading);
         console.log('🔴 logoutAll function type:', typeof logoutAll);
-        
+
         // Check if we have the required data
         if (!activeSessionId) {
             console.error('🔴 ERROR: No activeSessionId found!');
             toast.error('No active session found. You may already be logged out.');
             return;
         }
-        
+
         if (typeof logoutAll !== 'function') {
             console.error('🔴 ERROR: logoutAll is not a function!', typeof logoutAll);
             toast.error('Logout function not available. Please try refreshing the app.');
             return;
         }
-        
+
         // TEMPORARY: Skip confirmation dialog to test direct logout
         console.log('🔴 TESTING: Bypassing confirmation dialog for direct test');
         try {
@@ -222,7 +223,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     // Device session management functions
     const loadAllDeviceSessions = async () => {
         if (!oxyServices || !user?.sessionId) return;
-        
+
         setLoadingDeviceSessions(true);
         try {
             // This would call the API to get all device sessions for the current user
@@ -270,7 +271,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
 
     const handleLogoutAllDevices = async () => {
         const otherDevicesCount = deviceSessions.filter(session => !session.isCurrent).length;
-        
+
         if (otherDevicesCount === 0) {
             toast.info('No other device sessions found to sign out from.');
             return;
@@ -331,10 +332,10 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                 ) : (
                     <>
                         {/* Current Account */}
-                        {user && (
+                        {isAuthenticated && user && (
                             <View style={styles.section}>
                                 <Text style={styles.sectionTitle}>Current Account</Text>
-                                
+
                                 <View style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem, styles.currentAccountCard]}>
                                     <View style={styles.userIcon}>
                                         {user.avatar?.url ? (
@@ -371,7 +372,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                 <Text style={styles.sectionTitle}>
                                     Other Accounts ({sessionsWithUsers.filter(s => s.sessionId !== activeSessionId).length})
                                 </Text>
-                                
+
                                 {sessionsWithUsers
                                     .filter(s => s.sessionId !== activeSessionId)
                                     .map((sessionWithUser, index, filteredArray) => {
@@ -381,8 +382,8 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                         const isRemoving = removingUserId === sessionWithUser.sessionId;
                                         const { userProfile, isLoadingProfile } = sessionWithUser;
 
-                                        const displayName = typeof userProfile?.name === 'object' 
-                                            ? userProfile.name.full || userProfile.name.first || userProfile.username 
+                                        const displayName = typeof userProfile?.name === 'object'
+                                            ? userProfile.name.full || userProfile.name.first || userProfile.username
                                             : userProfile?.name || userProfile?.username || 'Unknown User';
 
                                         return (
@@ -450,7 +451,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                         {/* Quick Actions */}
                         <View style={styles.section}>
                             <Text style={styles.sectionTitle}>Quick Actions</Text>
-                            
+
                             <TouchableOpacity
                                 style={[styles.settingItem, styles.firstSettingItem]}
                                 onPress={() => navigate?.('SignIn')}
@@ -507,7 +508,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                         {showDeviceManagement && (
                             <View style={styles.section}>
                                 <Text style={styles.sectionTitle}>Device Sessions</Text>
-                                
+
                                 {loadingDeviceSessions ? (
                                     <View style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem]}>
                                         <View style={styles.loadingContainer}>
@@ -539,11 +540,11 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                                 ]}
                                             >
                                                 <View style={styles.settingInfo}>
-                                                    <OxyIcon 
-                                                        name={session.isCurrent ? "phone-portrait" : "phone-portrait-outline"} 
-                                                        size={20} 
-                                                        color={session.isCurrent ? "#34C759" : "#8E8E93"} 
-                                                        style={styles.settingIcon} 
+                                                    <OxyIcon
+                                                        name={session.isCurrent ? "phone-portrait" : "phone-portrait-outline"}
+                                                        size={20}
+                                                        color={session.isCurrent ? "#34C759" : "#8E8E93"}
+                                                        style={styles.settingIcon}
                                                     />
                                                     <View>
                                                         <Text style={styles.settingLabel}>