@oxyhq/services 5.13.12 → 5.13.15

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;