@oxyhq/services 5.13.0 → 5.13.2

package/src/ui/screens/steps/SignUpWelcomeStep.tsx

@@ -1,9 +1,10 @@
 import type React from 'react';
 import type { RouteName } from '../../navigation/routes';
-import { View, Text, TouchableOpacity } from 'react-native';
+import { View, Text, TouchableOpacity, Platform, StyleSheet, type ViewStyle, type TextStyle } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import HighFive from '../../../assets/illustrations/HighFive';
 import { useI18n } from '../../hooks/useI18n';
+import { STEP_GAP, STEP_INNER_GAP, stepStyles } from '../../styles/spacing';
 
 interface SignUpWelcomeStepProps {
     // Common props from StepBasedScreen
@@ -25,35 +26,102 @@ const SignUpWelcomeStep: React.FC<SignUpWelcomeStepProps> = ({
     nextStep,
 }) => {
     const { t } = useI18n();
+    const localStyles = stylesheet;
+    const baseStyles = stepStyles;
+    const webShadowReset = Platform.OS === 'web' ? ({ boxShadow: 'none' } as any) : null;
+
     return (
         <>
-            <HighFive width={120} height={120} />
-            <View style={styles.modernHeader}>
-                <Text style={[styles.modernTitle, { color: colors.text }]}>{t('signup.welcome.title')}</Text>
-                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>{t('signup.welcome.subtitle')}</Text>
-            </View>
-
-            <View style={styles.modernInputContainer}>
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, { alignItems: 'flex-start', position: 'relative' }]}>
+                <HighFive width={100} height={100} />
                 <TouchableOpacity
-                    style={[styles.button, { backgroundColor: colors.primary }]}
-                    onPress={nextStep}
-                    testID="get-started-button"
+                    style={[localStyles.languageButton, { backgroundColor: colors.inputBackground }]}
+                    onPress={() => navigate('LanguageSelector')}
+                    activeOpacity={0.7}
                 >
-                    <Ionicons name="rocket-outline" size={20} color={colors.background} />
-                    <Text style={[styles.buttonText, { color: colors.background }]}>{t('common.actions.getStarted')}</Text>
+                    <Ionicons name="globe-outline" size={20} color={colors.primary} />
                 </TouchableOpacity>
+            </View>
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.header]}>
+                <Text style={[styles.modernTitle, baseStyles.title, { color: colors.text, marginBottom: 0, marginTop: 0 }]}>{t('signup.welcome.title')}</Text>
+                <Text style={[styles.modernSubtitle, baseStyles.subtitle, { color: colors.secondaryText, marginBottom: 0, marginTop: 0 }]}>{t('signup.welcome.subtitle')}</Text>
+            </View>
 
-                <TouchableOpacity
-                    style={[styles.footerTextContainer]}
-                    onPress={() => navigate('SignIn')}
+            <View style={[baseStyles.container, baseStyles.sectionSpacing]}>
+                <View
+                    style={[
+                        localStyles.actionCard,
+                        { backgroundColor: colors.inputBackground || colors.card || 'rgba(0,0,0,0.04)' },
+                        webShadowReset,
+                    ]}
                 >
-                    <Text style={[styles.footerText, { color: colors.secondaryText }]}>
-                        {t('signin.title')}
-                    </Text>
-                </TouchableOpacity>
+                    <TouchableOpacity
+                        style={[
+                            styles.button,
+                            localStyles.primaryButton,
+                            { backgroundColor: colors.primary },
+                            webShadowReset,
+                        ]}
+                        onPress={nextStep}
+                        testID="get-started-button"
+                    >
+                        <Text style={[styles.buttonText, localStyles.buttonText, { color: colors.background }]}>{t('common.actions.getStarted')}</Text>
+                    </TouchableOpacity>
+
+                    <TouchableOpacity
+                        style={[styles.footerTextContainer, localStyles.footerLink, { marginTop: 0 }]}
+                        onPress={() => navigate('SignIn')}
+                    >
+                        <Text style={[styles.footerText, { color: colors.secondaryText }]}>
+                            {t('signup.welcome.haveAccount')}
+                            <Text style={{ color: colors.primary, fontWeight: '600' }}> {t('signup.welcome.signInCta')}</Text>
+                        </Text>
+                    </TouchableOpacity>
+                </View>
             </View>
         </>
     );
 };
 
 export default SignUpWelcomeStep;
+
+const stylesheet = StyleSheet.create({
+    actionCard: {
+        width: '100%',
+        maxWidth: 420,
+        borderRadius: 28,
+        paddingHorizontal: 20,
+        paddingVertical: 18,
+        gap: STEP_INNER_GAP,
+        alignItems: 'stretch',
+        shadowColor: 'transparent',
+    },
+    primaryButton: {
+        borderRadius: 28,
+        width: '100%',
+        paddingVertical: 16,
+        justifyContent: 'center',
+        shadowOpacity: 0,
+        shadowRadius: 0,
+        shadowOffset: { width: 0, height: 0 },
+        elevation: 0,
+    },
+    buttonText: {
+        fontSize: 16,
+        fontWeight: '600',
+        textAlign: 'center',
+    },
+    footerLink: {
+        alignSelf: 'center',
+    },
+    languageButton: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});

package/src/ui/stores/accountStore.ts

@@ -0,0 +1,285 @@
+import { create } from 'zustand';
+import { shallow } from 'zustand/shallow';
+import type { OxyServices } from '../../core';
+
+export interface QuickAccount {
+    sessionId: string;
+    userId?: string; // User ID for deduplication
+    username: string;
+    displayName: string;
+    avatar?: string;
+    avatarUrl?: string; // Cached avatar URL to prevent recalculation
+}
+
+interface AccountState {
+    // Account data
+    accounts: Record<string, QuickAccount>;
+    accountOrder: string[]; // Maintain order for display
+    accountsArray: QuickAccount[]; // Cached array to prevent infinite loops
+    
+    // Loading states
+    loading: boolean;
+    loadingSessionIds: Set<string>;
+    
+    // Error state
+    error: string | null;
+    
+    // Actions
+    setAccounts: (accounts: QuickAccount[]) => void;
+    addAccount: (account: QuickAccount) => void;
+    updateAccount: (sessionId: string, updates: Partial<QuickAccount>) => void;
+    removeAccount: (sessionId: string) => void;
+    moveAccountToTop: (sessionId: string) => void;
+    
+    // Loading actions
+    setLoading: (loading: boolean) => void;
+    setLoadingSession: (sessionId: string, loading: boolean) => void;
+    
+    // Error actions
+    setError: (error: string | null) => void;
+    
+    // Load accounts from API
+    loadAccounts: (sessionIds: string[], oxyServices: OxyServices, existingAccounts?: QuickAccount[], preserveOrder?: boolean) => Promise<void>;
+    
+    // Reset store
+    reset: () => void;
+}
+
+const initialState = {
+    accounts: {} as Record<string, QuickAccount>,
+    accountOrder: [] as string[],
+    accountsArray: [] as QuickAccount[],
+    loading: false,
+    loadingSessionIds: new Set<string>(),
+    error: null,
+};
+
+// Helper: Build accounts array from accounts map and order
+const buildAccountsArray = (accounts: Record<string, QuickAccount>, order: string[]): QuickAccount[] => {
+    const result: QuickAccount[] = [];
+    for (const id of order) {
+        const account = accounts[id];
+        if (account) result.push(account);
+    }
+    return result;
+};
+
+// Helper: Create QuickAccount from user data
+const createQuickAccount = (sessionId: string, userData: any, existingAccount?: QuickAccount, oxyServices?: OxyServices): QuickAccount => {
+    const displayName = userData.name?.full || userData.name?.first || userData.username || 'Account';
+    const userId = userData.id || userData._id?.toString();
+    
+    // Preserve existing avatarUrl if avatar hasn't changed (prevents image reload)
+    let avatarUrl: string | undefined;
+    if (existingAccount && existingAccount.avatar === userData.avatar && existingAccount.avatarUrl) {
+        avatarUrl = existingAccount.avatarUrl; // Reuse existing URL
+    } else if (userData.avatar && oxyServices) {
+        avatarUrl = oxyServices.getFileDownloadUrl(userData.avatar, 'thumb');
+    }
+    
+    return {
+        sessionId,
+        userId,
+        username: userData.username || '',
+        displayName,
+        avatar: userData.avatar,
+        avatarUrl,
+    };
+};
+
+export const useAccountStore = create<AccountState>((set, get) => ({
+    ...initialState,
+    
+    setAccounts: (accounts) => set((state) => {
+        const accountMap: Record<string, QuickAccount> = {};
+        const order: string[] = [];
+        const seenSessionIds = new Set<string>();
+        
+        for (const account of accounts) {
+            if (seenSessionIds.has(account.sessionId)) continue;
+            seenSessionIds.add(account.sessionId);
+            accountMap[account.sessionId] = account;
+            order.push(account.sessionId);
+        }
+        
+        const accountsArray = buildAccountsArray(accountMap, order);
+        const sameOrder = order.length === state.accountOrder.length && 
+            order.every((id, i) => id === state.accountOrder[i]);
+        const sameAccounts = sameOrder && 
+            order.every(id => {
+                const existing = state.accounts[id];
+                const newAccount = accountMap[id];
+                return existing && 
+                    existing.sessionId === newAccount.sessionId &&
+                    existing.userId === newAccount.userId &&
+                    existing.avatar === newAccount.avatar &&
+                    existing.avatarUrl === newAccount.avatarUrl;
+            });
+        
+        if (sameAccounts) return {} as any;
+        
+        return { accounts: accountMap, accountOrder: order, accountsArray };
+    }),
+    
+    addAccount: (account) => set((state) => {
+        // Check if account with same sessionId exists
+        if (state.accounts[account.sessionId]) {
+            // Update existing
+            const existing = state.accounts[account.sessionId];
+            if (existing.avatar === account.avatar && existing.avatarUrl === account.avatarUrl) {
+                return {} as any; // No change
+            }
+            const newAccounts = { ...state.accounts, [account.sessionId]: account };
+            return {
+                accounts: newAccounts,
+                accountsArray: buildAccountsArray(newAccounts, state.accountOrder),
+            };
+        }
+        
+        const newAccounts = { ...state.accounts, [account.sessionId]: account };
+        const newOrder = [account.sessionId, ...state.accountOrder];
+        return {
+            accounts: newAccounts,
+            accountOrder: newOrder,
+            accountsArray: buildAccountsArray(newAccounts, newOrder),
+        };
+    }),
+    
+    updateAccount: (sessionId, updates) => set((state) => {
+        const existing = state.accounts[sessionId];
+        if (!existing) return {} as any;
+        
+        const updated = { ...existing, ...updates };
+        if (existing.avatar === updated.avatar && existing.avatarUrl === updated.avatarUrl) {
+            return {} as any; // No change
+        }
+        
+        const newAccounts = { ...state.accounts, [sessionId]: updated };
+        return {
+            accounts: newAccounts,
+            accountsArray: buildAccountsArray(newAccounts, state.accountOrder),
+        };
+    }),
+    
+    removeAccount: (sessionId) => set((state) => {
+        if (!state.accounts[sessionId]) return {} as any;
+        
+        const { [sessionId]: _removed, ...rest } = state.accounts;
+        const newOrder = state.accountOrder.filter(id => id !== sessionId);
+        
+        return {
+            accounts: rest,
+            accountOrder: newOrder,
+            accountsArray: buildAccountsArray(rest, newOrder),
+        };
+    }),
+    
+    moveAccountToTop: (sessionId) => set((state) => {
+        if (!state.accounts[sessionId]) return {} as any;
+        
+        const filtered = state.accountOrder.filter(id => id !== sessionId);
+        const newOrder = [sessionId, ...filtered];
+        
+        return {
+            accountOrder: newOrder,
+            accountsArray: buildAccountsArray(state.accounts, newOrder),
+        };
+    }),
+    
+    setLoading: (loading) => set({ loading }),
+    
+    setLoadingSession: (sessionId, loading) => set((state) => {
+        const newSet = new Set(state.loadingSessionIds);
+        if (loading) {
+            newSet.add(sessionId);
+        } else {
+            newSet.delete(sessionId);
+        }
+        return { loadingSessionIds: newSet };
+    }),
+    
+    setError: (error) => set({ error }),
+    
+    loadAccounts: async (sessionIds, oxyServices, existingAccounts = [], preserveOrder = true) => {
+        const state = get();
+        
+        const uniqueSessionIds = Array.from(new Set(sessionIds));
+        if (uniqueSessionIds.length === 0) {
+            get().setAccounts([]);
+            return;
+        }
+        
+        const existingMap = new Map(existingAccounts.map(a => [a.sessionId, a]));
+        for (const account of Object.values(state.accounts)) {
+            existingMap.set(account.sessionId, account);
+        }
+        
+        const missingSessionIds = uniqueSessionIds.filter(id => !existingMap.has(id));
+        
+        if (missingSessionIds.length === 0) {
+            const ordered = uniqueSessionIds
+                .map(id => existingMap.get(id))
+                .filter((acc): acc is QuickAccount => acc !== undefined);
+            get().setAccounts(ordered);
+            return;
+        }
+        
+        if (state.loading) {
+            return;
+        }
+        
+        set({ loading: true, error: null });
+        
+        try {
+            const batchResults = await oxyServices.getUsersBySessions(missingSessionIds);
+            
+            const accountMap = new Map<string, QuickAccount>();
+            
+            for (const { sessionId, user: userData } of batchResults) {
+                if (userData && !accountMap.has(sessionId)) {
+                    const existing = existingMap.get(sessionId);
+                    accountMap.set(sessionId, createQuickAccount(sessionId, userData, existing, oxyServices));
+                }
+            }
+            
+            for (const [sessionId, account] of accountMap) {
+                existingMap.set(sessionId, account);
+            }
+            
+            const orderToUse = preserveOrder ? uniqueSessionIds : [...uniqueSessionIds, ...state.accountOrder];
+            const seen = new Set<string>();
+            const ordered: QuickAccount[] = [];
+            
+            for (const sessionId of orderToUse) {
+                if (seen.has(sessionId)) continue;
+                seen.add(sessionId);
+                
+                const account = existingMap.get(sessionId);
+                if (account) ordered.push(account);
+            }
+            
+            get().setAccounts(ordered);
+        } catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Failed to load accounts';
+            if (__DEV__) {
+                console.error('AccountStore: Failed to load accounts:', error);
+            }
+            set({ error: errorMessage });
+        } finally {
+            set({ loading: false });
+        }
+    },
+    
+    reset: () => set(initialState),
+}));
+
+// Selectors for performance - return cached array to prevent infinite loops
+export const useAccounts = (): QuickAccount[] => {
+    return useAccountStore(state => state.accountsArray);
+};
+
+export const useAccountLoading = () => useAccountStore(s => s.loading);
+export const useAccountError = () => useAccountStore(s => s.error);
+export const useAccountLoadingSession = (sessionId: string) => 
+    useAccountStore(s => s.loadingSessionIds.has(sessionId));
+

package/src/ui/stores/authStore.ts

@@ -7,12 +7,11 @@ interface AuthState {
   isLoading: boolean;
   error: string | null;
   lastUserFetch: number | null; // Timestamp of last user fetch for caching
-  loginStart: () => void;
   loginSuccess: (user: User) => void;
   loginFailure: (error: string) => void;
   logout: () => void;
-  fetchUser: (oxyServices: any, forceRefresh?: boolean) => Promise<void>;
-  updateUser: (updates: Partial<User>, oxyServices: any) => Promise<void>;
+  fetchUser: (oxyServices: { getCurrentUser: () => Promise<User> }, forceRefresh?: boolean) => Promise<void>;
+  updateUser: (updates: Partial<User>, oxyServices: { updateProfile: (updates: Partial<User>) => Promise<User>; getCurrentUser: () => Promise<User> }) => Promise<void>;
   setUser: (user: User) => void; // Direct user setter for caching
 }
 
@@ -22,7 +21,6 @@ export const useAuthStore = create<AuthState>((set: (state: Partial<AuthState>)
   isLoading: false,
   error: null,
   lastUserFetch: null,
-  loginStart: () => set({ isLoading: true, error: null }),
   loginSuccess: (user: User) => set({ isLoading: false, isAuthenticated: true, user, lastUserFetch: Date.now() }),
   loginFailure: (error: string) => set({ isLoading: false, error }),
   logout: () => set({ user: null, isAuthenticated: false, lastUserFetch: null }),
@@ -35,38 +33,37 @@ export const useAuthStore = create<AuthState>((set: (state: Partial<AuthState>)
 
     // Use cached data if available and not forcing refresh
     if (!forceRefresh && state.user && cacheValid) {
+      if (__DEV__) {
       console.log('AuthStore: Using cached user data (age:', cacheAge, 'ms)');
+      }
       return;
     }
 
     set({ isLoading: true, error: null });
     try {
-      console.log('AuthStore: Fetching user data...');
       const user = await oxyServices.getCurrentUser();
-      console.log('AuthStore: Received user data:', {
-        hasUser: !!user,
-        userLinksMetadata: user?.linksMetadata,
-        userLinks: user?.links,
-        userWebsite: user?.website
-      });
       set({ user, isLoading: false, isAuthenticated: true, lastUserFetch: now });
-    } catch (error: any) {
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to fetch user';
+      if (__DEV__) {
       console.error('AuthStore: Error fetching user:', error);
-      set({ error: error.message || 'Failed to fetch user', isLoading: false });
+      }
+      set({ error: errorMessage, isLoading: false });
     }
   },
   updateUser: async (updates, oxyServices) => {
     set({ isLoading: true, error: null });
     try {
-      console.log('AuthStore: Updating user with:', updates);
       await oxyServices.updateProfile(updates);
-      console.log('AuthStore: Profile updated successfully');
       // Immediately fetch the latest user data after update
-      await useAuthStore.getState().fetchUser(oxyServices, true); // Force refresh
-      console.log('AuthStore: User data refreshed');
-    } catch (error: any) {
+      // Use arrow function to preserve 'this' context
+      await useAuthStore.getState().fetchUser({ getCurrentUser: () => oxyServices.getCurrentUser() }, true);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to update user';
+      if (__DEV__) {
       console.error('AuthStore: Error updating user:', error);
-      set({ error: error.message || 'Failed to update user', isLoading: false });
+      }
+      set({ error: errorMessage, isLoading: false });
     }
   },
 })); 

package/src/ui/styles/authStyles.ts

@@ -22,7 +22,8 @@ export const createAuthStyles = (colors: AuthThemeColors, theme: string) => Styl
   scrollContent: {
     flexGrow: 1,
     paddingHorizontal: 24,
-    paddingTop: 4,
+    paddingTop: 0,
+    paddingBottom: 32,
   },
   stepContainer: {
     flex: 1,
@@ -190,13 +191,20 @@ export const createAuthStyles = (colors: AuthThemeColors, theme: string) => Styl
     paddingHorizontal: 32,
     borderRadius: 16,
     marginVertical: 8,
-    shadowOffset: {
-      width: 0,
-      height: 4,
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 8,
-    elevation: 6,
+    ...Platform.select({
+      web: {
+        boxShadow: '0 4px 8px rgba(0,0,0,0.3)',
+      },
+      default: {
+        shadowOffset: {
+          width: 0,
+          height: 4,
+        },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+        elevation: 6,
+      }
+    }),
     gap: 8,
     width: '100%',
   },

package/src/ui/styles/index.ts

@@ -1,3 +1,4 @@
 export * from './fonts';
 export * from './theme';
 export * from './authStyles';
+export * from './spacing';

package/src/ui/styles/spacing.ts

@@ -0,0 +1,46 @@
+import { StyleSheet } from 'react-native';
+
+/**
+ * Shared spacing constants for authentication screens
+ * These values ensure consistent vertical spacing across all step components
+ * All gaps between elements (illustration, title, description, textfield, buttons, etc.) use this value
+ */
+export const STEP_GAP = 12; // Vertical gap between ALL elements (illustration, title, description, textfield, buttons, etc.) - must be consistent everywhere
+export const STEP_INNER_GAP = 12; // Gap within sections (headers, cards, etc.) - must match STEP_GAP for uniformity
+
+/**
+ * Reusable stylesheet for step components
+ * All step components should use these base styles for consistency
+ */
+export const stepStyles = StyleSheet.create({
+    container: {
+        width: '100%',
+        maxWidth: 420,
+        alignSelf: 'center',
+    },
+    sectionSpacing: {
+        marginBottom: STEP_GAP,
+    },
+    header: {
+        alignItems: 'flex-start',
+        width: '100%',
+        gap: STEP_INNER_GAP,
+    },
+    title: {
+        textAlign: 'left',
+        marginBottom: 0,
+        marginTop: 0,
+    },
+    subtitle: {
+        textAlign: 'left',
+        maxWidth: 320,
+        alignSelf: 'flex-start',
+        marginBottom: 0,
+        marginTop: 0,
+    },
+    buttonContainer: {
+        marginTop: 0,
+        marginBottom: 0,
+    },
+});
+

package/src/utils/asyncUtils.ts

@@ -2,6 +2,8 @@
  * Async utilities for common asynchronous patterns and error handling
  */
 
+import { TTLCache, registerCacheForCleanup } from './cache';
+
 /**
  * Wrapper for async operations with automatic error handling
  */
@@ -196,36 +198,20 @@ export async function withTimeout<T>(
 
 /**
  * Cache async operation results
+ * @deprecated Use TTLCache from '../utils/cache' instead
+ * This function is kept for backward compatibility but will be removed in a future version
  */
 export function createAsyncCache<T>(
   ttl: number = 5 * 60 * 1000 // 5 minutes default
 ) {
-  const cache = new Map<string, { data: T; timestamp: number }>();
+  const cache = new TTLCache<T>(ttl);
+  registerCacheForCleanup(cache);
   
   return {
-    get: (key: string): T | null => {
-      const item = cache.get(key);
-      if (!item) return null;
-      
-      if (Date.now() - item.timestamp > ttl) {
-        cache.delete(key);
-        return null;
-      }
-      
-      return item.data;
-    },
-    
-    set: (key: string, data: T): void => {
-      cache.set(key, { data, timestamp: Date.now() });
-    },
-    
-    clear: (): void => {
-      cache.clear();
-    },
-    
-    delete: (key: string): boolean => {
-      return cache.delete(key);
-    }
+    get: (key: string): T | null => cache.get(key),
+    set: (key: string, data: T): void => cache.set(key, data),
+    clear: (): void => cache.clear(),
+    delete: (key: string): boolean => cache.delete(key),
   };
 }