@oxyhq/services 5.14.0 → 5.15.1

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

@@ -1,217 +0,0 @@
-import type React from 'react';
-import type { RouteName } from '../../navigation/routes';
-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';
-import { useI18n } from '../../hooks/useI18n';
-import { STEP_GAP, STEP_INNER_GAP, stepStyles } from '../../styles/spacing';
-
-interface SignUpIdentityStepProps {
-    // Common props from StepBasedScreen
-    colors: any;
-    styles: any;
-    theme: string;
-    navigate: (screen: RouteName, 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 baseStyles = stepStyles;
-    const { t } = useI18n();
-    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) => {
-        // Text is already filtered by formatValue prop, but ensure it's clean
-        const filteredText = text.replace(/[^a-zA-Z0-9]/g, '');
-        setUsername(filteredText);
-        setErrorMessage('');
-        // Reset validation state when user types
-        if (validationState.status !== 'idle') {
-            setValidationState({ status: 'idle', message: '' });
-        }
-
-        // Trigger debounced validation
-        debouncedValidateUsername(filteredText);
-    };
-
-    const handleEmailChange = (text: string) => {
-        setEmail(text);
-        setErrorMessage('');
-    };
-
-    const handleNext = async () => {
-        if (!username.trim()) {
-            setErrorMessage(t('signup.username.required') || 'Please enter a username');
-            setTimeout(() => usernameRef.current?.focus(), 0);
-            return;
-        }
-
-        if (username.trim().length < 3) {
-            setErrorMessage(t('signup.username.minLength') || 'Username must be at least 3 characters');
-            setTimeout(() => usernameRef.current?.focus(), 0);
-            return;
-        }
-
-        if (!email.trim()) {
-            setErrorMessage(t('signup.email.required') || 'Please enter an email address');
-            return;
-        }
-
-        if (!validateEmail(email)) {
-            setErrorMessage(t('signup.email.invalid') || '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) ? (t('signup.email.invalid') || 'Please enter a valid email address') : undefined;
-
-    return (
-        <>
-            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.header]}>
-                <Text style={[styles.modernTitle, baseStyles.title, { color: colors.text, marginBottom: 0, marginTop: 0 }]}>{t('signup.identity.title')}</Text>
-                <Text style={[styles.modernSubtitle, baseStyles.subtitle, { color: colors.secondaryText, marginBottom: 0, marginTop: 0 }]}>{t('signup.identity.subtitle')}</Text>
-            </View>
-
-            <View style={[baseStyles.container, baseStyles.sectionSpacing, { gap: STEP_INNER_GAP }]}>
-                <TextField
-                    ref={usernameRef}
-                    label={t('common.labels.username')}
-                    leading={<Ionicons name="person-outline" size={24} color={colors.secondaryText} />}
-                    value={username}
-                    onChangeText={handleUsernameChange}
-                    formatValue={(text) => text.replace(/[^a-zA-Z0-9]/g, '')}
-                    maxLength={30}
-                    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'}
-                    helperText={t('signup.username.helper') || '3-30 characters, letters and numbers only'}
-                    onSubmitEditing={handleNext}
-                    autoFocus
-                    style={{ marginBottom: 0 }}
-                />
-
-                <TextField
-                    label={t('common.labels.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}
-                    helperText={t('signup.email.helper') || 'We\'ll never share your email'}
-                    onSubmitEditing={handleNext}
-                    accessibilityLabel={t('common.labels.email')}
-                    accessibilityHint={t('signup.email.helper') || 'Enter your email address'}
-                    style={{ marginBottom: 0 }}
-                />
-            </View>
-
-            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.buttonContainer]}>
-                <GroupedPillButtons
-                    buttons={[
-                        {
-                            text: t('common.actions.back'),
-                            onPress: prevStep,
-                            icon: 'arrow-back',
-                            variant: 'transparent',
-                        },
-                        {
-                            text: t('common.actions.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}
-                />
-            </View>
-        </>
-    );
-};
-
-export default SignUpIdentityStep;

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

@@ -1,207 +0,0 @@
-import type React from 'react';
-import type { RouteName } from '../../navigation/routes';
-import { useRef, useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
-import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
-import TextField from '../../components/internal/TextField';
-import { useI18n } from '../../hooks/useI18n';
-import { STEP_GAP, STEP_INNER_GAP, stepStyles } from '../../styles/spacing';
-
-interface SignUpSecurityStepProps {
-    // Common props from StepBasedScreen
-    colors: any;
-    styles: any;
-    theme: string;
-    navigate: (screen: RouteName, 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 { t } = useI18n();
-    const baseStyles = stepStyles;
-
-    const handlePasswordChange = (text: string) => {
-        setPassword(text);
-        setErrorMessage('');
-    };
-
-    const handleConfirmPasswordChange = (text: string) => {
-        setConfirmPassword(text);
-        setErrorMessage('');
-    };
-
-    const handleNext = () => {
-        if (!password) {
-            setErrorMessage(t('signup.password.required') || 'Please enter a password');
-            setTimeout(() => passwordRef.current?.focus(), 0);
-            return;
-        }
-
-        if (!validatePassword(password)) {
-            setErrorMessage(t('signup.password.minLength') || 'Password must be at least 8 characters long');
-            return;
-        }
-
-        if (!confirmPassword) {
-            setErrorMessage(t('signup.password.confirmRequired') || 'Please confirm your password');
-            return;
-        }
-
-        if (password !== confirmPassword) {
-            setErrorMessage(t('signup.password.mismatch') || 'Passwords do not match');
-            return;
-        }
-
-        nextStep();
-    };
-
-    const passwordError = password && !validatePassword(password) ? (t('signup.password.minLength') || 'Password must be at least 8 characters long') : undefined;
-    const confirmPasswordError = confirmPassword && password !== confirmPassword ? (t('signup.password.mismatch') || 'Passwords do not match') : undefined;
-
-    return (
-        <>
-            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.header]}>
-                <Text style={[styles.modernTitle, baseStyles.title, { color: colors.text, marginBottom: 0, marginTop: 0 }]}>{t('signup.security.title')}</Text>
-                <Text style={[styles.modernSubtitle, baseStyles.subtitle, { color: colors.secondaryText, marginBottom: 0, marginTop: 0 }]}>{t('signup.security.subtitle')}</Text>
-            </View>
-
-            <View style={[baseStyles.container, baseStyles.sectionSpacing, { gap: STEP_INNER_GAP }]}>
-                <TextField
-                    ref={passwordRef}
-                    label={t('common.labels.password')}
-                    leading={<Ionicons name="lock-closed-outline" size={24} color={colors.secondaryText} />}
-                    trailing={
-                        <TouchableOpacity
-                            onPress={() => setShowPassword(!showPassword)}
-                            style={stylesheet.iconButton}
-                        >
-                            <Ionicons
-                                name={showPassword ? 'eye-off-outline' : 'eye-outline'}
-                                size={20}
-                                color={colors.secondaryText}
-                            />
-                        </TouchableOpacity>
-                    }
-                    value={password}
-                    onChangeText={handlePasswordChange}
-                    secureTextEntry={!showPassword}
-                    passwordStrength={true}
-                    autoCapitalize="none"
-                    autoCorrect={false}
-                    testID="signup-password-input"
-                    variant="filled"
-                    error={passwordError}
-                    helperText={t('signup.password.helper') || 'At least 8 characters'}
-                    onSubmitEditing={handleNext}
-                    autoFocus
-                    accessibilityLabel={t('common.labels.password')}
-                    accessibilityHint={t('signup.password.helper') || 'Enter a password, at least 8 characters long'}
-                    style={{ marginBottom: 0 }}
-                />
-
-                <TextField
-                    label={t('common.labels.confirmPassword')}
-                    leading={<Ionicons name="lock-closed-outline" size={24} color={colors.secondaryText} />}
-                    trailing={
-                        <TouchableOpacity
-                            onPress={() => setShowConfirmPassword(!showConfirmPassword)}
-                            style={stylesheet.iconButton}
-                        >
-                            <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}
-                    helperText={confirmPassword && password !== confirmPassword ? (t('signup.password.mismatch') || 'Passwords do not match') : undefined}
-                    onSubmitEditing={handleNext}
-                    accessibilityLabel={t('common.labels.confirmPassword')}
-                    accessibilityHint={t('signup.password.confirmHint') || 'Re-enter your password to confirm'}
-                    style={{ marginBottom: 0 }}
-                />
-            </View>
-
-            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.buttonContainer]}>
-                <GroupedPillButtons
-                    buttons={[
-                        {
-                            text: t('common.actions.back'),
-                            onPress: prevStep,
-                            icon: 'arrow-back',
-                            variant: 'transparent',
-                        },
-                        {
-                            text: t('common.actions.next'),
-                            onPress: handleNext,
-                            icon: 'arrow-forward',
-                            variant: 'primary',
-                            disabled: !password || !confirmPassword || password !== confirmPassword,
-                        },
-                    ]}
-                    colors={colors}
-                />
-            </View>
-        </>
-    );
-};
-
-export default SignUpSecurityStep;
-
-const stylesheet = StyleSheet.create({
-    iconButton: {
-        padding: 4,
-    },
-    helperText: {
-        fontSize: 12,
-        marginTop: 0,
-    },
-});

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

@@ -1,155 +0,0 @@
-import type React from 'react';
-import type { RouteName } from '../../navigation/routes';
-import { View, Text } from 'react-native';
-import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
-import { Section, GroupedSection } from '../../components';
-import { useI18n } from '../../hooks/useI18n';
-import { stepStyles } from '../../styles/spacing';
-
-interface SignUpSummaryStepProps {
-    // Common props from StepBasedScreen
-    colors: any;
-    styles: any;
-    theme: string;
-    navigate: (screen: RouteName, 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,
-    theme,
-    nextStep,
-    prevStep,
-    allStepData,
-    isLoading,
-}) => {
-    const { t } = useI18n();
-    const baseStyles = stepStyles;
-    // 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={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.header]}>
-                <Text style={[styles.modernTitle, baseStyles.title, { color: colors.text, marginBottom: 0, marginTop: 0 }]}>
-                    {t('signup.summary.title')}
-                </Text>
-                <Text style={[styles.modernSubtitle, baseStyles.subtitle, { color: colors.secondaryText, marginBottom: 0, marginTop: 0 }]}>
-                    {t('signup.summary.subtitle')}
-                </Text>
-            </View>
-
-            <View style={[baseStyles.container, baseStyles.sectionSpacing]}>
-                <Section
-                    title={t('signup.summary.sections.account') || t('signup.summary.sectionTitle') || 'Account Information'}
-                    theme={theme as 'light' | 'dark'}
-                    isFirst={true}
-                >
-                    <GroupedSection
-                        items={[
-                            {
-                                id: 'username',
-                                icon: 'person-outline',
-                                iconColor: colors.primary,
-                                title: t('signup.summary.fields.username'),
-                                subtitle: `@${username || t('signup.summary.notSet')}`,
-                                showChevron: false,
-                            },
-                            {
-                                id: 'email',
-                                icon: 'mail-outline',
-                                iconColor: colors.primary,
-                                title: t('signup.summary.fields.email'),
-                                subtitle: email || t('signup.summary.notSet'),
-                                showChevron: false,
-                            },
-                            {
-                                id: 'password',
-                                icon: 'lock-closed-outline',
-                                iconColor: colors.primary,
-                                title: t('signup.summary.fields.password') || 'Password',
-                                subtitle: password ? '••••••••' : t('signup.summary.notSet'),
-                                showChevron: false,
-                            },
-                        ]}
-                        theme={theme as 'light' | 'dark'}
-                    />
-                </Section>
-
-                <Section
-                    title={t('signup.summary.sections.next') || 'Next Steps'}
-                    theme={theme as 'light' | 'dark'}
-                >
-                    <GroupedSection
-                        items={[
-                            {
-                                id: 'security-tip',
-                                icon: 'shield-checkmark',
-                                iconColor: colors.warning,
-                                title: t('signup.summary.next.securityTitle') || 'Keep your account secure',
-                                subtitle: t('signup.summary.securityTip'),
-                                showChevron: false,
-                                multiRow: true,
-                                dense: true,
-                            },
-                            {
-                                id: 'legal-reminder',
-                                icon: 'checkmark-circle',
-                                iconColor: colors.success,
-                                title: t('signup.summary.next.legalTitle') || 'You’re all set',
-                                subtitle: t('signup.summary.legalReminder'),
-                                showChevron: false,
-                                multiRow: true,
-                                dense: true,
-                            },
-                        ]}
-                        theme={theme as 'light' | 'dark'}
-                    />
-                </Section>
-            </View>
-
-            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.buttonContainer]}>
-                <GroupedPillButtons
-                    buttons={[
-                        {
-                            text: t('common.actions.back'),
-                            onPress: prevStep,
-                            icon: 'arrow-back',
-                            variant: 'transparent',
-                        },
-                        {
-                            text: t('common.actions.createAccount'),
-                            onPress: nextStep,
-                            icon: 'checkmark-circle',
-                            variant: 'primary',
-                            loading: isLoading,
-                            disabled: !hasValidData,
-                        },
-                    ]}
-                    colors={colors}
-                />
-            </View>
-        </>
-    );
-};
-
-export default SignUpSummaryStep;