@oxyhq/services 5.11.10 → 5.11.12

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

@@ -0,0 +1,176 @@
+import type React from 'react';
+import { useRef, useEffect } from 'react';
+import { View, Text } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import HighFive from '../../../assets/illustrations/HighFive';
+import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
+import TextField from '../../components/internal/TextField';
+
+interface SignInUsernameStepProps {
+    // Common props from StepBasedScreen
+    colors: any;
+    styles: any;
+    theme: string;
+    navigate: (screen: string, props?: Record<string, any>) => void;
+
+    // Step navigation
+    nextStep: () => void;
+    prevStep: () => void;
+    currentStep: number;
+    totalSteps: number;
+
+    // Data management
+    stepData?: any;
+    updateStepData: (data: any) => void;
+    allStepData: any[];
+
+    // Form state
+    username: string;
+    setUsername: (username: string) => void;
+    errorMessage: string;
+    setErrorMessage: (message: string) => void;
+    validationStatus: 'idle' | 'validating' | 'valid' | 'invalid';
+    userProfile: any;
+    isValidating: boolean;
+
+    // Add account mode
+    isAddAccountMode?: boolean;
+    user?: any;
+
+    // Validation function
+    validateUsername: (username: string) => Promise<boolean>;
+}
+
+const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
+    colors,
+    styles,
+    navigate,
+    nextStep,
+    username,
+    setUsername,
+    errorMessage,
+    setErrorMessage,
+    validationStatus,
+    userProfile,
+    isValidating,
+    isAddAccountMode,
+    user,
+    validateUsername,
+}) => {
+    const inputRef = useRef<any>(null);
+
+    // Monitor username prop changes
+    useEffect(() => {
+        console.log('👀 SignInUsernameStep username prop changed:', username);
+    }, [username]);
+
+    const handleUsernameChange = (text: string) => {
+        console.log('📝 Username input changed:', text);
+        setUsername(text);
+        if (errorMessage) setErrorMessage('');
+    };
+
+    const handleContinue = async () => {
+        console.log('🚀 Continue button pressed, username:', username);
+
+        const trimmedUsername = username?.trim() || '';
+
+        if (!trimmedUsername) {
+            console.log('❌ Username is empty');
+            setErrorMessage('Please enter your username.');
+            setTimeout(() => inputRef.current?.focus(), 0);
+            return;
+        }
+
+        if (trimmedUsername.length < 2) {
+            console.log('❌ Username too short');
+            setErrorMessage('Username must be at least 3 characters.');
+            return;
+        }
+
+        console.log('🔍 Starting username validation...');
+        try {
+            // Validate the username before proceeding
+            const isValid = await validateUsername(trimmedUsername);
+            console.log('📊 Validation result:', isValid);
+
+            if (isValid) {
+                console.log('✅ Validation passed, proceeding to next step');
+                nextStep();
+            } else {
+                console.log('❌ Validation failed, staying on current step');
+            }
+        } catch (error) {
+            console.error('🚨 Error during validation:', error);
+            setErrorMessage('Unable to validate username. Please try again.');
+        }
+    };
+
+    return (
+        <>
+            <HighFive width={100} height={100} />
+            <View style={styles.modernHeader}>
+                <Text style={[styles.modernTitle, { color: colors.text }]}>
+                    {isAddAccountMode ? 'Add Another Account' : 'Sign In'}
+                </Text>
+                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>
+                    {isAddAccountMode
+                        ? 'Sign in with another account'
+                        : 'Sign in to continue your journey'
+                    }
+                </Text>
+            </View>
+
+            {isAddAccountMode && user && (
+                <View style={[styles.modernInfoCard, { backgroundColor: colors.inputBackground }]}>
+                    <Ionicons name="information-circle" size={20} color={colors.primary} />
+                    <Text style={[styles.modernInfoText, { color: colors.text }]}>
+                        Currently signed in as <Text style={{ fontWeight: 'bold' }}>{user.username}</Text>
+                    </Text>
+                </View>
+            )}
+
+            <View style={styles.modernInputContainer}>
+                <TextField
+                    ref={inputRef}
+                    label="Username"
+                    leading={<Ionicons name="person-outline" size={24} color={colors.secondaryText} />}
+                    value={username}
+                    onChangeText={handleUsernameChange}
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    testID="username-input"
+                    variant="filled"
+                    error={validationStatus === 'invalid' ? errorMessage : undefined}
+                    loading={validationStatus === 'validating'}
+                    success={validationStatus === 'valid'}
+                    onSubmitEditing={() => handleContinue()}
+                    autoFocus
+                />
+            </View>
+
+            <GroupedPillButtons
+                buttons={[
+                    {
+                        text: 'Sign Up',
+                        onPress: () => navigate('SignUp'),
+                        icon: 'person-add',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: 'Continue',
+                        onPress: handleContinue,
+                        icon: 'arrow-forward',
+                        variant: 'primary',
+                        loading: isValidating,
+                        disabled: !username || username.trim().length < 2 || isValidating,
+                        testID: 'username-next-button',
+                    },
+                ]}
+                colors={colors}
+            />
+        </>
+    );
+};
+
+export default SignInUsernameStep;

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

@@ -0,0 +1,204 @@
+import type React from 'react';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { View, Text } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
+import TextField from '../../components/internal/TextField';
+
+interface SignUpIdentityStepProps {
+    // Common props from StepBasedScreen
+    colors: any;
+    styles: any;
+    theme: string;
+    navigate: (screen: string, props?: Record<string, any>) => void;
+
+    // Step navigation
+    nextStep: () => void;
+    prevStep: () => void;
+    currentStep: number;
+    totalSteps: number;
+
+    // Data management
+    stepData?: any;
+    updateStepData: (data: any) => void;
+
+    // Form state
+    username: string;
+    email: string;
+    setUsername: (username: string) => void;
+    setEmail: (email: string) => void;
+    validationState: any;
+    setValidationState: (state: any) => void;
+    setErrorMessage: (message: string) => void;
+
+    // Validation
+    validateEmail: (email: string) => boolean;
+    validateUsername: (username: string) => Promise<boolean>;
+}
+
+const SignUpIdentityStep: React.FC<SignUpIdentityStepProps> = ({
+    colors,
+    styles,
+    navigate,
+    nextStep,
+    prevStep,
+    username,
+    email,
+    setUsername,
+    setEmail,
+    validationState,
+    setValidationState,
+    setErrorMessage,
+    validateEmail,
+    validateUsername,
+}) => {
+    const usernameRef = useRef<any>(null);
+    const validationTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    // Debounced username validation
+    const debouncedValidateUsername = useCallback((usernameToValidate: string) => {
+        if (validationTimeoutRef.current) {
+            clearTimeout(validationTimeoutRef.current);
+        }
+
+        validationTimeoutRef.current = setTimeout(async () => {
+            if (usernameToValidate.trim().length >= 3) {
+                await validateUsername(usernameToValidate.trim());
+            }
+        }, 500);
+    }, [validateUsername]);
+
+    // Cleanup timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (validationTimeoutRef.current) {
+                clearTimeout(validationTimeoutRef.current);
+            }
+        };
+    }, []);
+
+    const handleUsernameChange = (text: string) => {
+        setUsername(text);
+        setErrorMessage('');
+        // Reset validation state when user types
+        if (validationState.status !== 'idle') {
+            setValidationState({ status: 'idle', message: '' });
+        }
+
+        // Trigger debounced validation
+        debouncedValidateUsername(text);
+    };
+
+    const handleEmailChange = (text: string) => {
+        setEmail(text);
+        setErrorMessage('');
+    };
+
+    const handleNext = async () => {
+        if (!username.trim()) {
+            setErrorMessage('Please enter a username');
+            setTimeout(() => usernameRef.current?.focus(), 0);
+            return;
+        }
+
+        if (username.trim().length < 3) {
+            setErrorMessage('Username must be at least 3 characters');
+            setTimeout(() => usernameRef.current?.focus(), 0);
+            return;
+        }
+
+        if (!email.trim()) {
+            setErrorMessage('Please enter an email address');
+            return;
+        }
+
+        if (!validateEmail(email)) {
+            setErrorMessage('Please enter a valid email address');
+            return;
+        }
+
+        // Validate username availability
+        const isUsernameValid = await validateUsername(username.trim());
+        if (!isUsernameValid) {
+            setTimeout(() => usernameRef.current?.focus(), 0);
+            return;
+        }
+
+        nextStep();
+    };
+
+    const emailError = email && !validateEmail(email) ? 'Please enter a valid email address' : undefined;
+
+    return (
+        <>
+            <View style={styles.modernHeader}>
+                <Text style={[styles.modernTitle, { color: colors.text }]}>
+                    Who are you?
+                </Text>
+                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>
+                    Choose your username and enter your email
+                </Text>
+            </View>
+
+            <View style={styles.modernInputContainer}>
+                <TextField
+                    ref={usernameRef}
+                    label="Username"
+                    leading={<Ionicons name="person-outline" size={24} color={colors.secondaryText} />}
+                    value={username}
+                    onChangeText={handleUsernameChange}
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    testID="signup-username-input"
+                    variant="filled"
+                    error={validationState.status === 'invalid' ? validationState.message : undefined}
+                    loading={validationState.status === 'validating'}
+                    success={validationState.status === 'valid'}
+                    onSubmitEditing={handleNext}
+                    autoFocus
+                />
+
+                <TextField
+                    label="Email"
+                    leading={<Ionicons name="mail-outline" size={24} color={colors.secondaryText} />}
+                    value={email}
+                    onChangeText={handleEmailChange}
+                    keyboardType="email-address"
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    testID="signup-email-input"
+                    variant="filled"
+                    error={emailError}
+                    onSubmitEditing={handleNext}
+                />
+            </View>
+
+            <GroupedPillButtons
+                buttons={[
+                    {
+                        text: 'Back',
+                        onPress: prevStep,
+                        icon: 'arrow-back',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: 'Next',
+                        onPress: handleNext,
+                        icon: 'arrow-forward',
+                        variant: 'primary',
+                        loading: validationState.status === 'validating',
+                        disabled: !username.trim() ||
+                            username.trim().length < 3 ||
+                            !email.trim() ||
+                            !validateEmail(email) ||
+                            validationState.status === 'validating' ||
+                            validationState.status === 'invalid',
+                    },
+                ]}
+                colors={colors}
+            />
+        </>
+    );
+};
+
+export default SignUpIdentityStep;

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

@@ -0,0 +1,191 @@
+import type React from 'react';
+import { useRef, useState } from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
+import TextField from '../../components/internal/TextField';
+
+interface SignUpSecurityStepProps {
+    // Common props from StepBasedScreen
+    colors: any;
+    styles: any;
+    theme: string;
+    navigate: (screen: string, props?: Record<string, any>) => void;
+
+    // Step navigation
+    nextStep: () => void;
+    prevStep: () => void;
+    currentStep: number;
+    totalSteps: number;
+
+    // Data management
+    stepData?: any;
+    updateStepData: (data: any) => void;
+
+    // Form state
+    password: string;
+    confirmPassword: string;
+    setPassword: (password: string) => void;
+    setConfirmPassword: (confirmPassword: string) => void;
+    showPassword: boolean;
+    showConfirmPassword: boolean;
+    setShowPassword: (show: boolean) => void;
+    setShowConfirmPassword: (show: boolean) => void;
+    setErrorMessage: (message: string) => void;
+
+    // Validation
+    validatePassword: (password: string) => boolean;
+}
+
+const SignUpSecurityStep: React.FC<SignUpSecurityStepProps> = ({
+    colors,
+    styles,
+    nextStep,
+    prevStep,
+    password,
+    confirmPassword,
+    setPassword,
+    setConfirmPassword,
+    showPassword,
+    showConfirmPassword,
+    setShowPassword,
+    setShowConfirmPassword,
+    setErrorMessage,
+    validatePassword,
+}) => {
+    const passwordRef = useRef<any>(null);
+
+    const handlePasswordChange = (text: string) => {
+        setPassword(text);
+        setErrorMessage('');
+    };
+
+    const handleConfirmPasswordChange = (text: string) => {
+        setConfirmPassword(text);
+        setErrorMessage('');
+    };
+
+    const handleNext = () => {
+        if (!password) {
+            setErrorMessage('Please enter a password');
+            setTimeout(() => passwordRef.current?.focus(), 0);
+            return;
+        }
+
+        if (!validatePassword(password)) {
+            setErrorMessage('Password must be at least 8 characters long');
+            return;
+        }
+
+        if (!confirmPassword) {
+            setErrorMessage('Please confirm your password');
+            return;
+        }
+
+        if (password !== confirmPassword) {
+            setErrorMessage('Passwords do not match');
+            return;
+        }
+
+        nextStep();
+    };
+
+    const passwordError = password && !validatePassword(password) ? 'Password must be at least 8 characters long' : undefined;
+    const confirmPasswordError = confirmPassword && password !== confirmPassword ? 'Passwords do not match' : undefined;
+
+    return (
+        <>
+            <View style={styles.modernHeader}>
+                <Text style={[styles.modernTitle, { color: colors.text }]}>
+                    Secure Your Account
+                </Text>
+                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>
+                    Create a strong password to protect your account
+                </Text>
+            </View>
+
+            <View style={styles.modernInputContainer}>
+                <TextField
+                    ref={passwordRef}
+                    label="Password"
+                    leading={<Ionicons name="lock-closed-outline" size={24} color={colors.secondaryText} />}
+                    trailing={
+                        <TouchableOpacity
+                            onPress={() => setShowPassword(!showPassword)}
+                            style={{ padding: 4 }}
+                        >
+                            <Ionicons
+                                name={showPassword ? "eye-off-outline" : "eye-outline"}
+                                size={20}
+                                color={colors.secondaryText}
+                            />
+                        </TouchableOpacity>
+                    }
+                    value={password}
+                    onChangeText={handlePasswordChange}
+                    secureTextEntry={!showPassword}
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    testID="signup-password-input"
+                    variant="filled"
+                    error={passwordError}
+                    onSubmitEditing={handleNext}
+                    autoFocus
+                />
+
+                <TextField
+                    label="Confirm Password"
+                    leading={<Ionicons name="lock-closed-outline" size={24} color={colors.secondaryText} />}
+                    trailing={
+                        <TouchableOpacity
+                            onPress={() => setShowConfirmPassword(!showConfirmPassword)}
+                            style={{ padding: 4 }}
+                        >
+                            <Ionicons
+                                name={showConfirmPassword ? "eye-off-outline" : "eye-outline"}
+                                size={20}
+                                color={colors.secondaryText}
+                            />
+                        </TouchableOpacity>
+                    }
+                    value={confirmPassword}
+                    onChangeText={handleConfirmPasswordChange}
+                    secureTextEntry={!showConfirmPassword}
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    testID="signup-confirm-password-input"
+                    variant="filled"
+                    error={confirmPasswordError}
+                    onSubmitEditing={handleNext}
+                />
+
+                <View style={{ marginTop: 16 }}>
+                    <Text style={[styles.footerText, { color: colors.secondaryText, fontSize: 12 }]}>
+                        Password must be at least 8 characters long
+                    </Text>
+                </View>
+            </View>
+
+            <GroupedPillButtons
+                buttons={[
+                    {
+                        text: 'Back',
+                        onPress: prevStep,
+                        icon: 'arrow-back',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: 'Next',
+                        onPress: handleNext,
+                        icon: 'arrow-forward',
+                        variant: 'primary',
+                        disabled: !password || !confirmPassword || password !== confirmPassword,
+                    },
+                ]}
+                colors={colors}
+            />
+        </>
+    );
+};
+
+export default SignUpSecurityStep;

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

@@ -0,0 +1,130 @@
+import type React from 'react';
+import { View, Text } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
+
+interface SignUpSummaryStepProps {
+    // Common props from StepBasedScreen
+    colors: any;
+    styles: any;
+    theme: string;
+    navigate: (screen: string, props?: Record<string, any>) => void;
+
+    // Step navigation
+    nextStep: () => void;
+    prevStep: () => void;
+    currentStep: number;
+    totalSteps: number;
+
+    // Data management
+    allStepData: any[];
+
+    // Form state
+    isLoading: boolean;
+}
+
+const SignUpSummaryStep: React.FC<SignUpSummaryStepProps> = ({
+    colors,
+    styles,
+    nextStep,
+    prevStep,
+    allStepData,
+    isLoading,
+}) => {
+    // Extract data from previous steps
+    const identityData = allStepData[1] || {}; // Step 2 (index 1)
+    const securityData = allStepData[2] || {}; // Step 3 (index 2)
+
+    const { username = '', email = '' } = identityData;
+    const { password = '' } = securityData;
+
+    // Check if all required data is available
+    const hasValidData = username && email && password;
+
+
+
+    return (
+        <>
+            <View style={styles.modernHeader}>
+                <Text style={[styles.modernTitle, { color: colors.text }]}>
+                    Almost There!
+                </Text>
+                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>
+                    Review your information and create your account
+                </Text>
+            </View>
+
+            <View style={[styles.modernInputContainer, { marginBottom: 32 }]}>
+                <View style={{
+                    backgroundColor: colors.inputBackground,
+                    borderRadius: 16,
+                    padding: 20,
+                    borderWidth: 1,
+                    borderColor: colors.border,
+                }}>
+                    <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 16 }}>
+                        <Ionicons name="person-outline" size={20} color={colors.secondaryText} style={{ marginRight: 12 }} />
+                        <View style={{ flex: 1 }}>
+                            <Text style={[styles.footerText, { color: colors.secondaryText, fontSize: 12, marginBottom: 4 }]}>
+                                Username
+                            </Text>
+                            <Text style={[styles.modernInput, { color: colors.text, fontSize: 16 }]}>
+                                @{username || 'Not set'}
+                            </Text>
+                        </View>
+                    </View>
+
+                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                        <Ionicons name="mail-outline" size={20} color={colors.secondaryText} style={{ marginRight: 12 }} />
+                        <View style={{ flex: 1 }}>
+                            <Text style={[styles.footerText, { color: colors.secondaryText, fontSize: 12, marginBottom: 4 }]}>
+                                Email
+                            </Text>
+                            <Text style={[styles.modernInput, { color: colors.text, fontSize: 16 }]}>
+                                {email || 'Not set'}
+                            </Text>
+                        </View>
+                    </View>
+                </View>
+
+                <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    marginTop: 16,
+                    padding: 12,
+                    backgroundColor: colors.success + '10',
+                    borderRadius: 8,
+                    borderWidth: 1,
+                    borderColor: colors.success + '30',
+                }}>
+                    <Ionicons name="checkmark-circle" size={20} color={colors.success} style={{ marginRight: 8 }} />
+                    <Text style={[styles.footerText, { color: colors.success, fontSize: 14, flex: 1 }]}>
+                        By creating an account, you agree to our Terms of Service and Privacy Policy
+                    </Text>
+                </View>
+            </View>
+
+            <GroupedPillButtons
+                buttons={[
+                    {
+                        text: 'Back',
+                        onPress: prevStep,
+                        icon: 'arrow-back',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: 'Create Account',
+                        onPress: nextStep,
+                        icon: 'checkmark-circle',
+                        variant: 'primary',
+                        loading: isLoading,
+                        disabled: !hasValidData,
+                    },
+                ]}
+                colors={colors}
+            />
+        </>
+    );
+};
+
+export default SignUpSummaryStep;