@oxyhq/services 5.5.8 → 5.6.0

package/lib/module/ui/screens/SignUpScreen.js

@@ -1,14 +1,15 @@
 "use strict";
 
 import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import { View, Text, TextInput, TouchableOpacity, StyleSheet, ActivityIndicator, Platform, KeyboardAvoidingView, ScrollView, Animated, StatusBar } from 'react-native';
+import { View, Text, TextInput, StyleSheet, ActivityIndicator, Platform, KeyboardAvoidingView, ScrollView, Animated, StatusBar } from 'react-native';
 import { useOxy } from '../context/OxyContext';
 import { useThemeColors } from '../styles';
 import { Ionicons } from '@expo/vector-icons';
 import { toast } from '../../lib/sonner';
-import HighFive from '../../assets/illustrations/HighFive';
-import GroupedPillButtons from '../components/internal/GroupedPillButtons';
-import TextField from '../components/internal/TextField';
+import SignUpIdentityStep from './internal/SignUpIdentityStep';
+import SignUpSecurityStep from './internal/SignUpSecurityStep';
+import SignUpSummaryStep from './internal/SignUpSummaryStep';
+import SignUpWelcomeStep from './internal/SignUpWelcomeStep';
 
 // Types for better type safety
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -45,9 +46,9 @@ const createStyles = (colors, theme) => StyleSheet.create({
   modernTitle: {
     fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
     fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
-    fontSize: 42,
+    fontSize: 62,
     lineHeight: 48,
-    marginBottom: 12,
+    marginBottom: 18,
     textAlign: 'left',
     letterSpacing: -1
   },
@@ -128,6 +129,17 @@ const createStyles = (colors, theme) => StyleSheet.create({
     marginTop: 8,
     gap: 8
   },
+  belowInputMessage: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 4,
+    marginBottom: 0,
+    gap: 6
+  },
+  belowInputText: {
+    fontSize: 13,
+    fontWeight: '500'
+  },
   validationIconContainer: {
     width: 32,
     height: 32,
@@ -163,15 +175,22 @@ const createStyles = (colors, theme) => StyleSheet.create({
     paddingHorizontal: 32,
     borderRadius: 16,
     marginVertical: 8,
-    shadowOffset: {
-      width: 0,
-      height: 4
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 8,
-    elevation: 6,
     gap: 8,
-    width: '100%'
+    width: '100%',
+    ...Platform.select({
+      web: {
+        boxShadow: '0 4px 8px rgba(0,0,0,0.3)'
+      },
+      default: {
+        shadowOffset: {
+          width: 0,
+          height: 4
+        },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+        elevation: 6
+      }
+    })
   },
   buttonText: {
     color: '#FFFFFF',
@@ -198,14 +217,21 @@ const createStyles = (colors, theme) => StyleSheet.create({
     marginVertical: 20,
     borderRadius: 24,
     alignItems: 'center',
-    shadowColor: '#000',
-    shadowOpacity: 0.04,
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowRadius: 4,
-    elevation: 1
+    ...Platform.select({
+      web: {
+        boxShadow: '0 1px 4px rgba(0,0,0,0.04)'
+      },
+      default: {
+        shadowColor: '#000',
+        shadowOpacity: 0.04,
+        shadowOffset: {
+          width: 0,
+          height: 1
+        },
+        shadowRadius: 4,
+        elevation: 1
+      }
+    })
   },
   userInfoText: {
     fontSize: 16,
@@ -231,13 +257,20 @@ const createStyles = (colors, theme) => StyleSheet.create({
     gap: 6,
     minWidth: 70,
     borderWidth: 1,
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 2
+    ...Platform.select({
+      web: {
+        boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+      },
+      default: {
+        shadowOffset: {
+          width: 0,
+          height: 2
+        },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 2
+      }
+    })
   },
   backButton: {
     backgroundColor: 'transparent',
@@ -270,14 +303,21 @@ const createStyles = (colors, theme) => StyleSheet.create({
     marginHorizontal: 6,
     borderWidth: 2,
     borderColor: '#fff',
-    shadowColor: colors.primary,
-    shadowOpacity: 0.08,
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowRadius: 2,
-    elevation: 1
+    ...Platform.select({
+      web: {
+        boxShadow: '0 1px 2px rgba(0,0,0,0.08)'
+      },
+      default: {
+        shadowColor: colors.primary,
+        shadowOpacity: 0.08,
+        shadowOffset: {
+          width: 0,
+          height: 1
+        },
+        shadowRadius: 2,
+        elevation: 1
+      }
+    })
   },
   summaryContainer: {
     padding: 0,
@@ -699,310 +739,71 @@ const SignUpScreen = ({
     }
   }, [formData, isIdentityStepValid, isSecurityStepValid, signUp, onAuthenticated, resetForm]);
 
-  // Step components
-  const renderWelcomeStep = useCallback(() => /*#__PURE__*/_jsxs(Animated.View, {
-    style: [styles.stepContainer, {
-      opacity: fadeAnim,
-      transform: [{
-        translateX: slideAnim
-      }]
-    }],
-    children: [/*#__PURE__*/_jsx(HighFive, {
-      width: 100,
-      height: 100
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.modernHeader,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.modernTitle, {
-          color: colors.text
-        }],
-        children: "Welcome to Oxy"
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.modernSubtitle, {
-          color: colors.secondaryText
-        }],
-        children: "We're excited to have you join us. Let's get your account set up in just a few easy steps."
-      })]
-    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
-      buttons: [{
-        text: 'Get Started',
-        onPress: nextStep,
-        icon: 'arrow-forward',
-        variant: 'primary',
-        testID: 'welcome-next-button'
-      }],
-      colors: colors
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.footerTextContainer,
-      children: [/*#__PURE__*/_jsxs(Text, {
-        style: [styles.footerText, {
-          color: colors.text
-        }],
-        children: ["Already have an account?", ' ']
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: () => navigate('SignIn'),
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.linkText, {
-            color: colors.primary
-          }],
-          children: "Sign In"
-        })
-      })]
-    })]
-  }), [fadeAnim, slideAnim, colors, nextStep, navigate, styles]);
-  const renderIdentityStep = useCallback(() => /*#__PURE__*/_jsxs(Animated.View, {
-    style: [styles.stepContainer, {
-      opacity: fadeAnim,
-      transform: [{
-        translateX: slideAnim
-      }]
-    }],
-    children: [/*#__PURE__*/_jsx(View, {
-      style: styles.modernHeader,
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [styles.stepTitle, {
-          color: colors.text
-        }],
-        children: "Who are you?"
-      })
-    }), /*#__PURE__*/_jsx(TextField, {
-      icon: "person-outline",
-      label: "Username",
-      value: formData.username,
-      onChangeText: text => {
-        updateField('username', text);
-        setErrorMessage('');
-      },
-      autoCapitalize: "none",
-      autoCorrect: false,
-      testID: "username-input",
-      colors: colors,
-      variant: "filled",
-      error: validationState.status === 'invalid' ? validationState.message : undefined,
-      loading: validationState.status === 'validating',
-      success: validationState.status === 'valid'
-    }), /*#__PURE__*/_jsx(ValidationMessage, {
-      validationState: validationState,
-      colors: colors,
-      styles: styles
-    }), /*#__PURE__*/_jsx(TextField, {
-      icon: "mail-outline",
-      label: "Email",
-      value: formData.email,
-      onChangeText: text => {
-        updateField('email', text);
-      },
-      keyboardType: "email-address",
-      autoCapitalize: "none",
-      autoCorrect: false,
-      testID: "email-input",
-      colors: colors,
-      variant: "filled",
-      error: formData.email && !validateEmail(formData.email) ? 'Please enter a valid email address' : undefined
-    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
-      buttons: [{
-        text: 'Back',
-        onPress: prevStep,
-        icon: 'arrow-back',
-        variant: 'transparent'
-      }, {
-        text: 'Next',
-        onPress: handleIdentityNext,
-        icon: 'arrow-forward',
-        variant: 'primary'
-      }],
-      colors: colors
-    })]
-  }), [fadeAnim, slideAnim, colors, formData, validationState, updateField, setErrorMessage, prevStep, handleIdentityNext, styles]);
-  const renderSecurityStep = useCallback(() => /*#__PURE__*/_jsxs(Animated.View, {
-    style: [styles.stepContainer, {
-      opacity: fadeAnim,
-      transform: [{
-        translateX: slideAnim
-      }]
-    }],
-    children: [/*#__PURE__*/_jsx(View, {
-      style: styles.modernHeader,
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [styles.stepTitle, {
-          color: colors.text
-        }],
-        children: "Secure your account"
-      })
-    }), /*#__PURE__*/_jsx(TextField, {
-      icon: "lock-closed-outline",
-      label: "Password",
-      value: formData.password,
-      onChangeText: text => {
-        updateField('password', text);
-      },
-      secureTextEntry: !passwordVisibility.password,
-      autoCapitalize: "none",
-      autoCorrect: false,
-      testID: "password-input",
-      colors: colors,
-      variant: "filled",
-      error: formData.password && !validatePassword(formData.password) ? `Password must be at least ${PASSWORD_MIN_LENGTH} characters` : undefined
-    }), /*#__PURE__*/_jsxs(Text, {
-      style: [styles.passwordHint, {
-        color: colors.secondaryText
-      }],
-      children: ["Password must be at least ", PASSWORD_MIN_LENGTH, " characters long"]
-    }), /*#__PURE__*/_jsx(TextField, {
-      icon: "lock-closed-outline",
-      label: "Confirm Password",
-      value: formData.confirmPassword,
-      onChangeText: text => {
-        updateField('confirmPassword', text);
-      },
-      secureTextEntry: !passwordVisibility.confirmPassword,
-      autoCapitalize: "none",
-      autoCorrect: false,
-      testID: "confirm-password-input",
-      colors: colors,
-      variant: "filled",
-      error: formData.confirmPassword && !validatePasswordsMatch(formData.password, formData.confirmPassword) ? 'Passwords do not match' : undefined
-    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
-      buttons: [{
-        text: 'Back',
-        onPress: prevStep,
-        icon: 'arrow-back',
-        variant: 'transparent'
-      }, {
-        text: 'Next',
-        onPress: handleSecurityNext,
-        icon: 'arrow-forward',
-        variant: 'primary'
-      }],
-      colors: colors
-    })]
-  }), [fadeAnim, slideAnim, colors, formData, passwordVisibility, updateField, setErrorMessage, togglePasswordVisibility, prevStep, handleSecurityNext, styles]);
-  const renderSummaryStep = useCallback(() => /*#__PURE__*/_jsxs(Animated.View, {
-    style: [styles.stepContainer, {
-      opacity: fadeAnim,
-      transform: [{
-        translateX: slideAnim
-      }]
-    }],
-    children: [/*#__PURE__*/_jsx(View, {
-      style: styles.modernHeader,
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [styles.stepTitle, {
-          color: colors.text
-        }],
-        children: "Ready to join"
-      })
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.summaryContainer,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.summaryRow,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.summaryLabel, {
-            color: colors.secondaryText
-          }],
-          children: "Username:"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.summaryValue, {
-            color: colors.text
-          }],
-          children: formData.username
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.summaryRow,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.summaryLabel, {
-            color: colors.secondaryText
-          }],
-          children: "Email:"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.summaryValue, {
-            color: colors.text
-          }],
-          children: formData.email
-        })]
-      })]
-    }), /*#__PURE__*/_jsx(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
-    })]
-  }), [fadeAnim, slideAnim, colors, formData, isLoading, handleSignUp, prevStep, styles]);
-
-  // If user is already authenticated, show user info
-  if (user && isAuthenticated) {
-    return /*#__PURE__*/_jsxs(KeyboardAvoidingView, {
-      style: [styles.container, {
-        backgroundColor: colors.background
-      }],
-      behavior: Platform.OS === 'ios' ? 'padding' : 'height',
-      children: [/*#__PURE__*/_jsx(StatusBar, {
-        barStyle: theme === 'dark' ? 'light-content' : 'dark-content',
-        backgroundColor: colors.background
-      }), /*#__PURE__*/_jsxs(ScrollView, {
-        contentContainerStyle: styles.scrollContent,
-        showsVerticalScrollIndicator: false,
-        children: [/*#__PURE__*/_jsxs(Text, {
-          style: [styles.welcomeTitle, {
-            color: colors.text
-          }],
-          children: ["Welcome, ", user.username, "!"]
-        }), /*#__PURE__*/_jsxs(View, {
-          style: [styles.userInfoContainer, {
-            backgroundColor: colors.inputBackground
-          }],
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: [styles.userInfoText, {
-              color: colors.text
-            }],
-            children: "You are already signed in."
-          }), user.email && /*#__PURE__*/_jsxs(Text, {
-            style: [styles.userInfoText, {
-              color: colors.secondaryText
-            }],
-            children: ["Email: ", user.email]
-          })]
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.actionButtonsContainer,
-          children: /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.button, {
-              backgroundColor: colors.primary
-            }],
-            onPress: () => navigate('AccountCenter'),
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.buttonText,
-              children: "Go to Account Center"
-            })
-          })
-        })]
-      })]
-    });
-  }
-
-  // Render current step
+  // Memoized step components
+  const updateFieldString = (field, value) => updateField(field, value);
+  const validatePasswordsMatchNoArgs = () => validatePasswordsMatch(formData.password, formData.confirmPassword);
+  const togglePasswordVisibilityNoArgs = () => togglePasswordVisibility('password');
+  const renderWelcomeStep = useMemo(() => /*#__PURE__*/_jsx(SignUpWelcomeStep, {
+    styles: styles,
+    fadeAnim: fadeAnim,
+    slideAnim: slideAnim,
+    colors: colors,
+    nextStep: nextStep,
+    navigate: navigate
+  }), [styles, fadeAnim, slideAnim, colors, nextStep, navigate]);
+  const renderIdentityStep = useMemo(() => /*#__PURE__*/_jsx(SignUpIdentityStep, {
+    styles: styles,
+    fadeAnim: fadeAnim,
+    slideAnim: slideAnim,
+    colors: colors,
+    formData: formData,
+    validationState: validationState,
+    updateField: updateFieldString,
+    setErrorMessage: setErrorMessage,
+    prevStep: prevStep,
+    handleIdentityNext: handleIdentityNext,
+    ValidationMessage: ValidationMessage,
+    validateEmail: validateEmail,
+    navigate: navigate
+  }), [styles, fadeAnim, slideAnim, colors, formData, validationState, updateFieldString, setErrorMessage, prevStep, handleIdentityNext, ValidationMessage, validateEmail, navigate]);
+  const renderSecurityStep = useMemo(() => /*#__PURE__*/_jsx(SignUpSecurityStep, {
+    styles: styles,
+    fadeAnim: fadeAnim,
+    slideAnim: slideAnim,
+    colors: colors,
+    formData: formData,
+    passwordVisibility: passwordVisibility,
+    updateField: updateFieldString,
+    validatePassword: validatePassword,
+    validatePasswordsMatch: validatePasswordsMatchNoArgs,
+    prevStep: prevStep,
+    handleSecurityNext: handleSecurityNext,
+    setErrorMessage: setErrorMessage,
+    togglePasswordVisibility: togglePasswordVisibilityNoArgs,
+    PASSWORD_MIN_LENGTH: PASSWORD_MIN_LENGTH
+  }), [styles, fadeAnim, slideAnim, colors, formData, passwordVisibility, updateFieldString, validatePassword, validatePasswordsMatchNoArgs, prevStep, handleSecurityNext, setErrorMessage, togglePasswordVisibilityNoArgs, PASSWORD_MIN_LENGTH]);
+  const renderSummaryStep = useMemo(() => /*#__PURE__*/_jsx(SignUpSummaryStep, {
+    styles: styles,
+    fadeAnim: fadeAnim,
+    slideAnim: slideAnim,
+    colors: colors,
+    formData: formData,
+    isLoading: isLoading,
+    handleSignUp: handleSignUp,
+    prevStep: prevStep
+  }), [styles, fadeAnim, slideAnim, colors, formData, isLoading, handleSignUp, prevStep]);
   const renderCurrentStep = useCallback(() => {
     switch (currentStep) {
       case 0:
-        return renderWelcomeStep();
+        return renderWelcomeStep;
       case 1:
-        return renderIdentityStep();
+        return renderIdentityStep;
       case 2:
-        return renderSecurityStep();
+        return renderSecurityStep;
       case 3:
-        return renderSummaryStep();
+        return renderSummaryStep;
       default:
-        return renderWelcomeStep();
+        return renderWelcomeStep;
     }
   }, [currentStep, renderWelcomeStep, renderIdentityStep, renderSecurityStep, renderSummaryStep]);
   return /*#__PURE__*/_jsxs(KeyboardAvoidingView, {
@@ -1013,16 +814,11 @@ const SignUpScreen = ({
     children: [/*#__PURE__*/_jsx(StatusBar, {
       barStyle: theme === 'dark' ? 'light-content' : 'dark-content',
       backgroundColor: colors.background
-    }), /*#__PURE__*/_jsxs(ScrollView, {
+    }), /*#__PURE__*/_jsx(ScrollView, {
       contentContainerStyle: styles.scrollContent,
       showsVerticalScrollIndicator: false,
       keyboardShouldPersistTaps: "handled",
-      children: [/*#__PURE__*/_jsx(ProgressIndicator, {
-        currentStep: currentStep,
-        totalSteps: 4,
-        colors: colors,
-        styles: styles
-      }), renderCurrentStep()]
+      children: renderCurrentStep()
     })]
   });
 };