@oxyhq/services 5.12.11 → 5.13.1

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/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,36 @@ 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) {
+      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,

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/validationUtils.ts

@@ -8,7 +8,7 @@
 export const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
 /**
- * Username validation regex (alphanumeric, underscore, dash, 3-30 chars)
+ * Username validation regex (alphanumeric, underscores, and hyphens, 3-30 chars)
  */
 export const USERNAME_REGEX = /^[a-zA-Z0-9_-]{3,30}$/;