@oxyhq/services 5.13.12 → 5.13.16

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

@@ -1,145 +0,0 @@
-import type React from 'react';
-import { useRef } from 'react';
-import { type TextInput, View, Text } from 'react-native';
-import Animated, {
-    useAnimatedStyle,
-    SharedValue,
-} from 'react-native-reanimated';
-import { Ionicons } from '@expo/vector-icons';
-import { useI18n } from '../../hooks/useI18n';
-import HighFive from '../../../assets/illustrations/HighFive';
-import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
-import TextField from '../../components/internal/TextField';
-
-interface SignInUsernameStepProps {
-    styles: any;
-    fadeAnim: SharedValue<number>;
-    slideAnim: SharedValue<number>;
-    scaleAnim: SharedValue<number>;
-    colors: any;
-    isAddAccountMode: boolean;
-    user: any;
-    errorMessage: string;
-    isInputFocused: boolean;
-    username: string;
-    validationStatus: 'idle' | 'validating' | 'valid' | 'invalid';
-    userProfile: any;
-    isValidating: boolean;
-    handleInputFocus: () => void;
-    handleInputBlur: () => void;
-    handleUsernameChange: (text: string) => void;
-    handleUsernameContinue: () => void;
-    navigate: any;
-}
-
-const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
-    styles,
-    fadeAnim,
-    slideAnim,
-    scaleAnim,
-    colors,
-    isAddAccountMode,
-    user,
-    errorMessage,
-    isInputFocused,
-    username,
-    validationStatus,
-    userProfile,
-    isValidating,
-    handleInputFocus,
-    handleInputBlur,
-    handleUsernameChange,
-    handleUsernameContinue: parentHandleUsernameContinue,
-    navigate,
-}) => {
-    const inputRef = useRef<TextInput>(null);
-    const { t } = useI18n();
-
-    // Animated styles - properly memoized to prevent re-renders
-    const animatedStyle = useAnimatedStyle(() => {
-        return {
-            opacity: fadeAnim.value,
-            transform: [
-                { translateX: slideAnim.value },
-                { scale: scaleAnim.value }
-            ]
-        };
-    });
-
-    const handleUsernameContinue = () => {
-        if (!username || validationStatus === 'invalid') {
-            setTimeout(() => {
-                inputRef.current?.focus();
-            }, 0);
-        }
-        parentHandleUsernameContinue();
-    };
-    return (
-        <Animated.View style={[
-            styles.stepContainer,
-            animatedStyle
-        ]}>
-            <HighFive width={100} height={100} />
-            <View style={styles.modernHeader}>
-                <Text style={[styles.modernTitle, { color: colors.text }]}>
-                    {isAddAccountMode ? (t('signin.addAccountTitle') || 'Add Another Account') : (t('signin.title') || 'Sign In')}
-                </Text>
-                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>
-                    {isAddAccountMode
-                        ? (t('signin.addAccountSubtitle') || 'Sign in with another account')
-                        : (t('signin.subtitle') || 'Sign in to continue your journey')
-                    }
-                </Text>
-            </View>
-            {isAddAccountMode && (
-                <View style={[styles.modernInfoCard, { backgroundColor: colors.inputBackground }]}>
-                    <Ionicons name="information-circle" size={20} color={colors.primary} />
-                    <Text style={[styles.modernInfoText, { color: colors.text }]}>
-                        {t('signin.currentlySignedInAs') || 'Currently signed in as'} <Text style={{ fontWeight: 'bold' }}>{user?.name?.full || user?.username}</Text>
-                    </Text>
-                </View>
-            )}
-            <View style={styles.modernInputContainer}>
-                <TextField
-                    ref={inputRef}
-                    label={t('common.labels.username')}
-                    leading={<Ionicons name="person-outline" size={24} color={colors.secondaryText} />}
-                    value={username}
-                    onChangeText={handleUsernameChange}
-                    onFocus={handleInputFocus}
-                    onBlur={handleInputBlur}
-                    autoCapitalize="none"
-                    autoCorrect={false}
-                    testID="username-input"
-                    variant="filled"
-                    error={validationStatus === 'invalid' ? errorMessage : undefined}
-                    loading={validationStatus === 'validating'}
-                    success={validationStatus === 'valid'}
-                    onSubmitEditing={handleUsernameContinue}
-                    autoFocus
-                />
-            </View>
-            <GroupedPillButtons
-                buttons={[
-                    {
-                        text: t('common.links.signUp') || 'Sign Up',
-                        onPress: () => navigate('SignUp'),
-                        icon: 'person-add',
-                        variant: 'transparent',
-                    },
-                    {
-                        text: t('common.actions.continue'),
-                        onPress: handleUsernameContinue,
-                        icon: 'arrow-forward',
-                        variant: 'primary',
-                        loading: isValidating,
-                        testID: 'username-next-button',
-                    },
-                ]}
-                colors={colors}
-            />
-        </Animated.View>
-    );
-};
-
-export default SignInUsernameStep; 

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

@@ -1,112 +0,0 @@
-import type React from 'react';
-import { useRef } from 'react';
-import { View, Text, Animated, TouchableOpacity, type TextInput } from 'react-native';
-import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
-import TextField from '../../components/internal/TextField';
-import HighFive from '../../../assets/illustrations/HighFive';
-import { Ionicons } from '@expo/vector-icons';
-
-interface SignUpIdentityStepProps {
-    styles: any;
-    fadeAnim: Animated.Value;
-    slideAnim: Animated.Value;
-    colors: any;
-    formData: any;
-    validationState: any;
-    updateField: (field: string, value: string) => void;
-    setErrorMessage: (msg: string) => void;
-    prevStep: () => void;
-    handleIdentityNext: () => void;
-    ValidationMessage: React.FC<any>;
-    validateEmail: (email: string) => boolean;
-    navigate: any;
-}
-
-const SignUpIdentityStep: React.FC<SignUpIdentityStepProps> = ({
-    styles,
-    fadeAnim,
-    slideAnim,
-    colors,
-    formData,
-    validationState,
-    updateField,
-    setErrorMessage,
-    prevStep,
-    handleIdentityNext: parentHandleIdentityNext,
-    ValidationMessage,
-    validateEmail,
-    navigate,
-}) => {
-    const inputRef = useRef<TextInput>(null);
-    const handleIdentityNext = () => {
-        if (!formData.username || validationState.status === 'invalid') {
-            setTimeout(() => {
-                inputRef.current?.focus();
-            }, 0);
-        }
-        parentHandleIdentityNext();
-    };
-    return (
-        <Animated.View style={[
-            styles.stepContainer,
-            { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }
-        ]}>
-            <View style={styles.modernHeader}>
-                <Text style={[styles.stepTitle, { color: colors.text }]}>Who are you?</Text>
-            </View>
-            <TextField
-                ref={inputRef}
-                leading={<Ionicons name="person-outline" size={24} color={colors.secondaryText} />}
-                label="Username"
-                value={formData.username}
-                onChangeText={(text) => {
-                    updateField('username', text);
-                    setErrorMessage('');
-                }}
-                autoCapitalize="none"
-                autoCorrect={false}
-                testID="username-input"
-                variant="filled"
-                error={validationState.status === 'invalid' ? validationState.message : undefined}
-                loading={validationState.status === 'validating'}
-                success={validationState.status === 'valid'}
-                onSubmitEditing={handleIdentityNext}
-                autoFocus
-            />
-            <ValidationMessage validationState={validationState} colors={colors} styles={styles} />
-            <TextField
-                leading={<Ionicons name="mail-outline" size={24} color={colors.secondaryText} />}
-                label="Email"
-                value={formData.email}
-                onChangeText={(text) => {
-                    updateField('email', text);
-                }}
-                keyboardType="email-address"
-                autoCapitalize="none"
-                autoCorrect={false}
-                testID="email-input"
-                variant="filled"
-                error={formData.email && !validateEmail(formData.email) ? 'Please enter a valid email address' : undefined}
-            />
-            <GroupedPillButtons
-                buttons={[
-                    {
-                        text: 'Back',
-                        onPress: prevStep,
-                        icon: 'arrow-back',
-                        variant: 'transparent',
-                    },
-                    {
-                        text: 'Next',
-                        onPress: handleIdentityNext,
-                        icon: 'arrow-forward',
-                        variant: 'primary',
-                    },
-                ]}
-                colors={colors}
-            />
-        </Animated.View>
-    );
-};
-
-export default SignUpIdentityStep; 

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

@@ -1,132 +0,0 @@
-import type React from 'react';
-import { useRef, useCallback, useEffect } from 'react';
-import { View, Text, Animated, type TextInput } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
-import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
-import TextField from '../../components/internal/TextField';
-
-interface SignUpSecurityStepProps {
-    styles: any;
-    fadeAnim: Animated.Value;
-    slideAnim: Animated.Value;
-    colors: any;
-    formData: any;
-    passwordVisibility: { password: boolean; confirmPassword: boolean };
-    updateField: (field: string, value: string) => void;
-    validatePassword: (password: string) => boolean;
-    validatePasswordsMatch: (password: string, confirmPassword: string) => boolean;
-    prevStep: () => void;
-    handleSecurityNext: () => void;
-    setErrorMessage: (msg: string) => void;
-    togglePasswordVisibility: () => void;
-    PASSWORD_MIN_LENGTH: number;
-}
-
-const SignUpSecurityStep: React.FC<SignUpSecurityStepProps> = ({
-    styles,
-    fadeAnim,
-    slideAnim,
-    colors,
-    formData,
-    passwordVisibility,
-    updateField,
-    validatePassword,
-    validatePasswordsMatch,
-    prevStep,
-    handleSecurityNext: parentHandleSecurityNext,
-    setErrorMessage,
-    togglePasswordVisibility,
-    PASSWORD_MIN_LENGTH,
-}) => {
-    const passwordRef = useRef<TextInput>(null);
-    const confirmPasswordRef = useRef<TextInput>(null);
-
-    // Focus the first invalid field on error or when step becomes active
-    useEffect(() => {
-        if (formData.password && typeof formData.password === 'string' && !validatePassword(formData.password)) {
-            setTimeout(() => {
-                passwordRef.current?.focus();
-            }, 0);
-        } else if (formData.confirmPassword && typeof formData.confirmPassword === 'string' && !validatePasswordsMatch(formData.password, formData.confirmPassword)) {
-            setTimeout(() => {
-                confirmPasswordRef.current?.focus();
-            }, 0);
-        }
-    }, [formData.password, formData.confirmPassword, validatePassword, validatePasswordsMatch]);
-
-    const handleSecurityNext = useCallback(() => {
-        if (!formData.password || !validatePassword(formData.password)) {
-            setTimeout(() => {
-                passwordRef.current?.focus();
-            }, 0);
-            return;
-        }
-        if (!formData.confirmPassword || !validatePasswordsMatch(formData.password, formData.confirmPassword)) {
-            setTimeout(() => {
-                confirmPasswordRef.current?.focus();
-            }, 0);
-            return;
-        }
-        parentHandleSecurityNext();
-    }, [formData.password, formData.confirmPassword, validatePassword, validatePasswordsMatch, parentHandleSecurityNext]);
-
-    return (
-        <Animated.View style={[
-            styles.stepContainer,
-            { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }
-        ]}>
-            <View style={styles.modernHeader}>
-                <Text style={[styles.stepTitle, { color: colors.text }]}>Secure your account</Text>
-            </View>
-            <TextField
-                ref={passwordRef}
-                leading={<Ionicons name="lock-closed-outline" size={24} color={colors.secondaryText} />}
-                label="Password"
-                value={formData.password}
-                onChangeText={text => updateField('password', text)}
-                secureTextEntry={!passwordVisibility.password}
-                autoCapitalize="none"
-                autoCorrect={false}
-                testID="password-input"
-                variant="filled"
-                error={formData.password && typeof formData.password === 'string' && !validatePassword(formData.password) ? `Password must be at least ${PASSWORD_MIN_LENGTH} characters` : undefined}
-                onSubmitEditing={() => confirmPasswordRef.current?.focus()}
-                autoFocus
-            />
-            <Text style={[styles.passwordHint, { color: colors.secondaryText }]}>Password must be at least {PASSWORD_MIN_LENGTH} characters long</Text>
-            <TextField
-                ref={confirmPasswordRef}
-                leading={<Ionicons name="lock-closed-outline" size={24} color={colors.secondaryText} />}
-                label="Confirm Password"
-                value={formData.confirmPassword}
-                onChangeText={text => updateField('confirmPassword', text)}
-                secureTextEntry={!passwordVisibility.confirmPassword}
-                autoCapitalize="none"
-                autoCorrect={false}
-                testID="confirm-password-input"
-                variant="filled"
-                error={formData.confirmPassword && typeof formData.confirmPassword === 'string' && !validatePasswordsMatch(formData.password, formData.confirmPassword) ? 'Passwords do not match' : undefined}
-                onSubmitEditing={handleSecurityNext}
-            />
-            <GroupedPillButtons
-                buttons={[
-                    {
-                        text: 'Back',
-                        onPress: prevStep,
-                        icon: 'arrow-back',
-                        variant: 'transparent',
-                    },
-                    {
-                        text: 'Next',
-                        onPress: handleSecurityNext,
-                        icon: 'arrow-forward',
-                        variant: 'primary',
-                    },
-                ]}
-                colors={colors}
-            />
-        </Animated.View>
-    );
-};
-
-export default SignUpSecurityStep; 

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

@@ -1,66 +0,0 @@
-import type React from 'react';
-import { View, Text, Animated, TouchableOpacity } from 'react-native';
-import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
-
-interface SignUpSummaryStepProps {
-    styles: any;
-    fadeAnim: Animated.Value;
-    slideAnim: Animated.Value;
-    colors: any;
-    formData: any;
-    isLoading: boolean;
-    handleSignUp: () => void;
-    prevStep: () => void;
-}
-
-const SignUpSummaryStep: React.FC<SignUpSummaryStepProps> = ({
-    styles,
-    fadeAnim,
-    slideAnim,
-    colors,
-    formData,
-    isLoading,
-    handleSignUp,
-    prevStep,
-}) => (
-    <Animated.View style={[
-        styles.stepContainer,
-        { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }
-    ]}>
-        <View style={styles.modernHeader}>
-            <Text style={[styles.stepTitle, { color: colors.text }]}>Ready to join</Text>
-        </View>
-        <View style={styles.summaryContainer}>
-            <View style={styles.summaryRow}>
-                <Text style={[styles.summaryLabel, { color: colors.secondaryText }]}>Username:</Text>
-                <Text style={[styles.summaryValue, { color: colors.text }]}>{formData.username}</Text>
-            </View>
-            <View style={styles.summaryRow}>
-                <Text style={[styles.summaryLabel, { color: colors.secondaryText }]}>Email:</Text>
-                <Text style={[styles.summaryValue, { color: colors.text }]}>{formData.email}</Text>
-            </View>
-        </View>
-        <GroupedPillButtons
-            buttons={[
-                {
-                    text: 'Back',
-                    onPress: prevStep,
-                    icon: 'arrow-back',
-                    variant: 'transparent',
-                },
-                {
-                    text: 'Create Account',
-                    onPress: handleSignUp,
-                    icon: 'checkmark',
-                    variant: 'primary',
-                    disabled: isLoading,
-                    loading: isLoading,
-                    testID: 'signup-button',
-                },
-            ]}
-            colors={colors}
-        />
-    </Animated.View>
-);
-
-export default SignUpSummaryStep; 

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

@@ -1,52 +0,0 @@
-import type React from 'react';
-import { View, Text, Animated } from 'react-native';
-import HighFive from '../../../assets/illustrations/HighFive';
-import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
-
-interface SignUpWelcomeStepProps {
-    styles: any;
-    fadeAnim: Animated.Value;
-    slideAnim: Animated.Value;
-    colors: any;
-    nextStep: () => void;
-    navigate: any;
-}
-
-const SignUpWelcomeStep: React.FC<SignUpWelcomeStepProps> = ({
-    styles,
-    fadeAnim,
-    slideAnim,
-    colors,
-    nextStep,
-    navigate,
-}) => (
-    <Animated.View style={[
-        styles.stepContainer,
-        { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }
-    ]}>
-        <HighFive width={100} height={100} />
-        <View style={styles.modernHeader}>
-            <Text style={[styles.modernTitle, { color: colors.text }]}>Welcome to Oxy</Text>
-            <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>We're excited to have you join us. Let's get your account set up in just a few easy steps.</Text>
-        </View>
-        <GroupedPillButtons
-            buttons={[
-                {
-                    text: 'Sign In',
-                    onPress: () => navigate('SignIn'),
-                    icon: 'log-in-outline',
-                    variant: 'transparent',
-                },
-                {
-                    text: 'Get Started',
-                    onPress: nextStep,
-                    icon: 'arrow-forward',
-                    variant: 'primary',
-                },
-            ]}
-            colors={colors}
-        />
-    </Animated.View>
-);
-
-export default SignUpWelcomeStep;