@oxyhq/services 5.11.9 → 5.11.11

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

@@ -4,367 +4,72 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
+var _react = require("react");
 var _OxyContext = require("../context/OxyContext");
 var _styles = require("../styles");
-var _vectorIcons = require("@expo/vector-icons");
 var _sonner = require("../../lib/sonner");
-var _SignUpIdentityStep = _interopRequireDefault(require("./internal/SignUpIdentityStep"));
-var _SignUpSecurityStep = _interopRequireDefault(require("./internal/SignUpSecurityStep"));
-var _SignUpSummaryStep = _interopRequireDefault(require("./internal/SignUpSummaryStep"));
-var _SignUpWelcomeStep = _interopRequireDefault(require("./internal/SignUpWelcomeStep"));
+var _StepBasedScreen = _interopRequireDefault(require("../components/StepBasedScreen"));
+var _SignUpWelcomeStep = _interopRequireDefault(require("./steps/SignUpWelcomeStep"));
+var _SignUpIdentityStep = _interopRequireDefault(require("./steps/SignUpIdentityStep"));
+var _SignUpSecurityStep = _interopRequireDefault(require("./steps/SignUpSecurityStep"));
+var _SignUpSummaryStep = _interopRequireDefault(require("./steps/SignUpSummaryStep"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 // Types for better type safety
 
 // Constants
 const USERNAME_MIN_LENGTH = 3;
 const PASSWORD_MIN_LENGTH = 8;
-const VALIDATION_DEBOUNCE_MS = 800;
-const CACHE_DURATION_MS = 5 * 60 * 1000; // 5 minutes
 
 // Email validation regex
 const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
-// Styles factory function
-const createStyles = (colors, theme) => _reactNative.StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  scrollContent: {
-    flexGrow: 1,
-    paddingHorizontal: 24,
-    paddingTop: 4,
-    paddingBottom: 20
-  },
-  stepContainer: {
-    flex: 1,
-    justifyContent: 'flex-start',
-    alignItems: 'flex-start'
-  },
-  modernHeader: {
-    alignItems: 'flex-start',
-    width: '100%',
-    marginBottom: 24
-  },
-  modernTitle: {
-    fontFamily: _reactNative.Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
-    fontWeight: _reactNative.Platform.OS === 'web' ? 'bold' : undefined,
-    fontSize: 62,
-    lineHeight: 48,
-    marginBottom: 18,
-    textAlign: 'left',
-    letterSpacing: -1
-  },
-  modernSubtitle: {
-    fontSize: 18,
-    lineHeight: 24,
-    textAlign: 'left',
-    opacity: 0.8,
-    marginBottom: 24
-  },
-  welcomeImageContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginVertical: 20
-  },
-  welcomeTitle: {
-    fontFamily: _reactNative.Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
-    fontWeight: _reactNative.Platform.OS === 'web' ? 'bold' : undefined,
-    fontSize: 42,
-    lineHeight: 48,
-    marginBottom: 12,
-    textAlign: 'left',
-    letterSpacing: -1
-  },
-  welcomeText: {
-    fontSize: 18,
-    lineHeight: 24,
-    textAlign: 'left',
-    opacity: 0.8,
-    marginBottom: 24
-  },
-  stepTitle: {
-    fontFamily: _reactNative.Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
-    fontWeight: _reactNative.Platform.OS === 'web' ? 'bold' : undefined,
-    fontSize: 42,
-    lineHeight: 48,
-    marginBottom: 12,
-    textAlign: 'left',
-    letterSpacing: -1
-  },
-  inputContainer: {
-    width: '100%',
-    marginBottom: 24
-  },
-  premiumInputWrapper: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    height: 56,
-    borderRadius: 16,
-    paddingHorizontal: 20,
-    borderWidth: 2,
-    backgroundColor: colors.inputBackground
-  },
-  inputIcon: {
-    marginRight: 12
-  },
-  inputContent: {
-    flex: 1
-  },
-  modernLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    marginBottom: 2
-  },
-  modernInput: {
-    flex: 1,
-    fontSize: 16,
-    height: '100%'
-  },
-  validationIndicator: {
-    marginLeft: 8
-  },
-  validationCard: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 12,
-    borderRadius: 12,
-    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,
-    borderRadius: 16,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: 12
-  },
-  validationTextContainer: {
-    flex: 1
-  },
-  validationTitle: {
-    fontSize: 12,
-    fontWeight: '600',
-    marginBottom: 2
-  },
-  validationSubtitle: {
-    fontSize: 11,
-    opacity: 0.8
-  },
-  passwordToggle: {
-    padding: 4
-  },
-  passwordHint: {
-    fontSize: 12,
-    marginTop: 4
-  },
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 18,
-    paddingHorizontal: 32,
-    borderRadius: 16,
-    marginVertical: 8,
-    gap: 8,
-    width: '100%',
-    ..._reactNative.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',
-    fontSize: 16,
-    fontWeight: '600',
-    letterSpacing: 0.5
-  },
-  footerTextContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    marginTop: 16
-  },
-  footerText: {
-    fontSize: 15
-  },
-  linkText: {
-    fontSize: 14,
-    lineHeight: 20,
-    fontWeight: '600',
-    textDecorationLine: 'underline'
-  },
-  userInfoContainer: {
-    padding: 20,
-    marginVertical: 20,
-    borderRadius: 24,
-    alignItems: 'center',
-    ..._reactNative.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,
-    marginBottom: 8,
-    textAlign: 'center'
-  },
-  actionButtonsContainer: {
-    marginTop: 24
-  },
-  navigationButtons: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    marginTop: 16,
-    marginBottom: 8,
-    width: '100%',
-    gap: 8
-  },
-  navButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 6,
-    paddingHorizontal: 12,
-    gap: 6,
-    minWidth: 70,
-    borderWidth: 1,
-    ..._reactNative.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',
-    borderTopLeftRadius: 35,
-    borderBottomLeftRadius: 35,
-    borderTopRightRadius: 12,
-    borderBottomRightRadius: 12
-  },
-  nextButton: {
-    backgroundColor: 'transparent',
-    borderTopRightRadius: 35,
-    borderBottomRightRadius: 35,
-    borderTopLeftRadius: 12,
-    borderBottomLeftRadius: 12
-  },
-  navButtonText: {
-    fontSize: 13,
-    fontWeight: '500'
-  },
-  progressContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    marginBottom: 20,
-    marginTop: 8
-  },
-  progressDot: {
-    height: 10,
-    width: 10,
-    borderRadius: 5,
-    marginHorizontal: 6,
-    borderWidth: 2,
-    borderColor: '#fff',
-    ..._reactNative.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,
-    marginBottom: 24,
-    width: '100%'
-  },
-  summaryRow: {
-    flexDirection: 'row',
-    marginBottom: 10
-  },
-  summaryLabel: {
-    fontSize: 15,
-    width: 90
-  },
-  summaryValue: {
-    fontSize: 15,
-    fontWeight: '600',
-    flex: 1
-  }
-});
+// Main component
+const SignUpScreen = ({
+  navigate,
+  goBack,
+  onAuthenticated,
+  theme
+}) => {
+  const {
+    signUp,
+    oxyServices
+  } = (0, _OxyContext.useOxy)();
+  const colors = (0, _styles.useThemeColors)(theme);
 
-// Custom hooks for better separation of concerns
-const useFormValidation = oxyServices => {
+  // Form data state
+  const [username, setUsername] = (0, _react.useState)('');
+  const [email, setEmail] = (0, _react.useState)('');
+  const [password, setPassword] = (0, _react.useState)('');
+  const [confirmPassword, setConfirmPassword] = (0, _react.useState)('');
+  const [showPassword, setShowPassword] = (0, _react.useState)(false);
+  const [showConfirmPassword, setShowConfirmPassword] = (0, _react.useState)(false);
+  const [isLoading, setIsLoading] = (0, _react.useState)(false);
+
+  // Validation state
   const [validationState, setValidationState] = (0, _react.useState)({
     status: 'idle',
     message: ''
   });
-  const validationCache = (0, _react.useRef)(new Map());
-  const validateUsername = (0, _react.useCallback)(async username => {
-    if (!username || username.length < USERNAME_MIN_LENGTH) {
+
+  // Error message state
+  const [errorMessage, setErrorMessage] = (0, _react.useState)('');
+
+  // Username validation with caching
+  const usernameCache = (0, _react.useRef)(new Map());
+  const validateUsername = (0, _react.useCallback)(async usernameToValidate => {
+    if (!usernameToValidate || usernameToValidate.length < USERNAME_MIN_LENGTH) {
       setValidationState({
         status: 'invalid',
-        message: ''
+        message: 'Username must be at least 3 characters'
       });
       return false;
     }
 
     // Check cache first
-    const cached = validationCache.current.get(username);
+    const cached = usernameCache.current.get(usernameToValidate);
     const now = Date.now();
-    if (cached && now - cached.timestamp < CACHE_DURATION_MS) {
+    if (cached && now - cached.timestamp < 5 * 60 * 1000) {
       const isValid = cached.available;
       setValidationState({
         status: isValid ? 'valid' : 'invalid',
@@ -377,11 +82,11 @@ const useFormValidation = oxyServices => {
       message: ''
     });
     try {
-      const result = await oxyServices.checkUsernameAvailability(username);
+      const result = await oxyServices.checkUsernameAvailability(usernameToValidate);
       const isValid = result.available;
 
       // Cache the result
-      validationCache.current.set(username, {
+      usernameCache.current.set(usernameToValidate, {
         available: isValid,
         timestamp: now
       });
@@ -399,433 +104,127 @@ const useFormValidation = oxyServices => {
       return false;
     }
   }, [oxyServices]);
-  const validateEmail = (0, _react.useCallback)(email => {
-    return EMAIL_REGEX.test(email);
-  }, []);
-  const validatePassword = (0, _react.useCallback)(password => {
-    return password.length >= PASSWORD_MIN_LENGTH;
-  }, []);
-  const validatePasswordsMatch = (0, _react.useCallback)((password, confirmPassword) => {
-    return password === confirmPassword;
-  }, []);
 
-  // Cleanup cache on unmount
-  (0, _react.useEffect)(() => {
-    return () => {
-      validationCache.current.clear();
-    };
+  // Email validation
+  const validateEmail = (0, _react.useCallback)(emailToValidate => {
+    return EMAIL_REGEX.test(emailToValidate);
   }, []);
-  return {
-    validationState,
-    validateUsername,
-    validateEmail,
-    validatePassword,
-    validatePasswordsMatch
-  };
-};
-const useFormData = () => {
-  const [formData, setFormData] = (0, _react.useState)({
-    username: '',
-    email: '',
-    password: '',
-    confirmPassword: ''
-  });
-  const [passwordVisibility, setPasswordVisibility] = (0, _react.useState)({
-    password: false,
-    confirmPassword: false
-  });
-  const updateField = (0, _react.useCallback)((field, value) => {
-    setFormData(prev => ({
-      ...prev,
-      [field]: value
-    }));
-  }, []);
-  const togglePasswordVisibility = (0, _react.useCallback)(field => {
-    setPasswordVisibility(prev => ({
-      ...prev,
-      [field]: !prev[field]
-    }));
-  }, []);
-  const resetForm = (0, _react.useCallback)(() => {
-    setFormData({
-      username: '',
-      email: '',
-      password: '',
-      confirmPassword: ''
-    });
-    setPasswordVisibility({
-      password: false,
-      confirmPassword: false
-    });
-  }, []);
-  return {
-    formData,
-    passwordVisibility,
-    updateField,
-    togglePasswordVisibility,
-    resetForm
-  };
-};
-
-// Reusable components
-const ValidationIndicator = /*#__PURE__*/_react.default.memo(({
-  status,
-  colors,
-  styles
-}) => {
-  if (status === 'validating') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-      size: "small",
-      color: colors.primary,
-      style: styles.validationIndicator
-    });
-  }
-  if (status === 'valid') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-      name: "checkmark-circle",
-      size: 22,
-      color: colors.success,
-      style: styles.validationIndicator
-    });
-  }
-  if (status === 'invalid') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-      name: "close-circle",
-      size: 22,
-      color: colors.error,
-      style: styles.validationIndicator
-    });
-  }
-  return null;
-});
-const ValidationMessage = /*#__PURE__*/_react.default.memo(({
-  validationState,
-  colors,
-  styles
-}) => {
-  if (validationState.status === 'idle' || !validationState.message) return null;
-  const isSuccess = validationState.status === 'valid';
-  const backgroundColor = isSuccess ? colors.success + '10' : colors.error + '10';
-  const borderColor = isSuccess ? colors.success + '30' : colors.error + '30';
-  const iconColor = isSuccess ? colors.success : colors.error;
-  const iconName = isSuccess ? 'checkmark-circle' : 'alert-circle';
-  const title = isSuccess ? 'Username Available' : 'Username Taken';
-  const subtitle = isSuccess ? 'Good choice! This username is available' : validationState.message;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [styles.validationCard, {
-      backgroundColor,
-      borderColor
-    }],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.validationIconContainer, {
-        backgroundColor: iconColor + '20'
-      }],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-        name: iconName,
-        size: 16,
-        color: iconColor
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.validationTextContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.validationTitle, {
-          color: iconColor
-        }],
-        children: title
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.validationSubtitle, {
-          color: colors.secondaryText
-        }],
-        children: subtitle
-      })]
-    })]
-  });
-});
-const FormInput = /*#__PURE__*/_react.default.memo(({
-  icon,
-  label,
-  value,
-  onChangeText,
-  secureTextEntry = false,
-  keyboardType = 'default',
-  autoCapitalize = 'sentences',
-  autoCorrect = true,
-  testID,
-  colors,
-  styles,
-  borderColor,
-  rightComponent
-}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-  style: styles.inputContainer,
-  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [styles.premiumInputWrapper, {
-      borderColor: borderColor || colors.border,
-      backgroundColor: colors.inputBackground,
-      shadowColor: colors.primary,
-      shadowOffset: {
-        width: 0,
-        height: 4
-      },
-      shadowOpacity: 0.1,
-      shadowRadius: 12,
-      elevation: 3
-    }],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-      name: icon,
-      size: 22,
-      color: colors.secondaryText,
-      style: styles.inputIcon
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.inputContent,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.modernLabel, {
-          color: colors.secondaryText
-        }],
-        children: label
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-        style: [styles.modernInput, {
-          color: colors.text
-        }],
-        value: value,
-        onChangeText: onChangeText,
-        secureTextEntry: secureTextEntry,
-        keyboardType: keyboardType,
-        autoCapitalize: autoCapitalize,
-        autoCorrect: autoCorrect,
-        testID: testID,
-        placeholderTextColor: "transparent"
-      })]
-    }), rightComponent]
-  })
-}));
-const ProgressIndicator = /*#__PURE__*/_react.default.memo(({
-  currentStep,
-  totalSteps,
-  colors,
-  styles
-}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-  style: styles.progressContainer,
-  children: Array.from({
-    length: totalSteps
-  }, (_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.progressDot, currentStep === index ? {
-      backgroundColor: colors.primary,
-      width: 24
-    } : {
-      backgroundColor: colors.border
-    }]
-  }, index))
-}));
 
-// Main component
-const SignUpScreen = ({
-  navigate,
-  goBack,
-  onAuthenticated,
-  theme
-}) => {
-  const {
-    signUp,
-    isLoading,
-    user,
-    isAuthenticated,
-    oxyServices
-  } = (0, _OxyContext.useOxy)();
-  const colors = (0, _styles.useThemeColors)(theme);
-
-  // Form state
-  const {
-    formData,
-    passwordVisibility,
-    updateField,
-    togglePasswordVisibility,
-    resetForm
-  } = useFormData();
-  const {
-    validationState,
-    validateUsername,
-    validateEmail,
-    validatePassword,
-    validatePasswordsMatch
-  } = useFormValidation(oxyServices);
-
-  // UI state
-  const [currentStep, setCurrentStep] = (0, _react.useState)(0);
-  const [errorMessage, setErrorMessage] = (0, _react.useState)('');
-
-  // Animation refs
-  const fadeAnim = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
-  const slideAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-
-  // Memoized styles
-  const styles = (0, _react.useMemo)(() => (0, _styles.createAuthStyles)(colors, theme), [colors, theme]);
+  // Password validation
+  const validatePassword = (0, _react.useCallback)(passwordToValidate => {
+    return passwordToValidate.length >= PASSWORD_MIN_LENGTH;
+  }, []);
 
-  // Debounced username validation
-  (0, _react.useEffect)(() => {
-    if (!formData.username || formData.username.length < USERNAME_MIN_LENGTH) {
+  // Handle form completion
+  const handleComplete = (0, _react.useCallback)(async stepData => {
+    if (!username || !email || !password) {
+      _sonner.toast.error('Please fill in all required fields');
       return;
     }
-    const timeoutId = setTimeout(() => {
-      validateUsername(formData.username);
-    }, VALIDATION_DEBOUNCE_MS);
-    return () => clearTimeout(timeoutId);
-  }, [formData.username, validateUsername]);
-
-  // Animation functions
-  const animateTransition = (0, _react.useCallback)(nextStep => {
-    _reactNative.Animated.timing(fadeAnim, {
-      toValue: 0,
-      duration: 250,
-      useNativeDriver: _reactNative.Platform.OS !== 'web'
-    }).start(() => {
-      setCurrentStep(nextStep);
-      slideAnim.setValue(-100);
-      _reactNative.Animated.parallel([_reactNative.Animated.timing(fadeAnim, {
-        toValue: 1,
-        duration: 250,
-        useNativeDriver: _reactNative.Platform.OS !== 'web'
-      }), _reactNative.Animated.timing(slideAnim, {
-        toValue: 0,
-        duration: 300,
-        useNativeDriver: _reactNative.Platform.OS !== 'web'
-      })]).start();
-    });
-  }, [fadeAnim, slideAnim]);
-  const nextStep = (0, _react.useCallback)(() => {
-    if (currentStep < 3) {
-      animateTransition(currentStep + 1);
-    }
-  }, [currentStep, animateTransition]);
-  const prevStep = (0, _react.useCallback)(() => {
-    if (currentStep > 0) {
-      animateTransition(currentStep - 1);
-    }
-  }, [currentStep, animateTransition]);
-
-  // Form validation helpers
-  const isIdentityStepValid = (0, _react.useCallback)(() => {
-    return formData.username && formData.email && validateEmail(formData.email) && validationState.status === 'valid';
-  }, [formData.username, formData.email, validateEmail, validationState.status]);
-  const isSecurityStepValid = (0, _react.useCallback)(() => {
-    return formData.password && validatePassword(formData.password) && validatePasswordsMatch(formData.password, formData.confirmPassword);
-  }, [formData.password, formData.confirmPassword, validatePassword, validatePasswordsMatch]);
-
-  // Custom next handlers for validation
-  const handleIdentityNext = (0, _react.useCallback)(() => {
-    if (!isIdentityStepValid()) {
-      _sonner.toast.error('Please enter a valid username and email.');
+    if (!validateEmail(email)) {
+      _sonner.toast.error('Please enter a valid email address');
       return;
     }
-    nextStep();
-  }, [isIdentityStepValid, nextStep]);
-  const handleSecurityNext = (0, _react.useCallback)(() => {
-    if (!isSecurityStepValid()) {
-      _sonner.toast.error('Please enter a valid password and confirm it.');
+    if (!validatePassword(password)) {
+      _sonner.toast.error('Password must be at least 8 characters long');
       return;
     }
-    nextStep();
-  }, [isSecurityStepValid, nextStep]);
-
-  // Sign up handler
-  const handleSignUp = (0, _react.useCallback)(async () => {
-    if (!isIdentityStepValid() || !isSecurityStepValid()) {
-      _sonner.toast.error('Please fill in all fields correctly');
+    if (password !== confirmPassword) {
+      _sonner.toast.error('Passwords do not match');
       return;
     }
     try {
-      setErrorMessage('');
-      const user = await signUp(formData.username, formData.email, formData.password);
+      setIsLoading(true);
+      const user = await signUp(username, email, password);
       _sonner.toast.success('Account created successfully! Welcome to Oxy!');
-      if (onAuthenticated) {
-        onAuthenticated(user);
-      }
-      resetForm();
+
+      // Navigate to welcome screen or handle authentication
+      navigate('WelcomeNewUser', {
+        newUser: user
+      });
     } catch (error) {
       _sonner.toast.error(error.message || 'Sign up failed');
+    } finally {
+      setIsLoading(false);
     }
-  }, [formData, isIdentityStepValid, isSecurityStepValid, signUp, onAuthenticated, resetForm]);
+  }, [username, email, password, confirmPassword, validateEmail, validatePassword, signUp, navigate]);
+
+  // Cleanup cache on unmount
+  (0, _react.useEffect)(() => {
+    return () => {
+      usernameCache.current.clear();
+    };
+  }, []);
 
-  // Memoized step components
-  const updateFieldString = (field, value) => updateField(field, value);
-  const validatePasswordsMatchNoArgs = () => validatePasswordsMatch(formData.password, formData.confirmPassword);
-  const togglePasswordVisibilityNoArgs = () => togglePasswordVisibility('password');
-  const renderWelcomeStep = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SignUpWelcomeStep.default, {
-    styles: styles,
-    fadeAnim: fadeAnim,
-    slideAnim: slideAnim,
-    colors: colors,
-    nextStep: nextStep,
-    navigate: navigate
-  }), [styles, fadeAnim, slideAnim, colors, nextStep, navigate]);
-  const renderIdentityStep = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SignUpIdentityStep.default, {
-    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 = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SignUpSecurityStep.default, {
-    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 = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SignUpSummaryStep.default, {
-    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 = (0, _react.useCallback)(() => {
-    switch (currentStep) {
-      case 0:
-        return renderWelcomeStep;
-      case 1:
-        return renderIdentityStep;
-      case 2:
-        return renderSecurityStep;
-      case 3:
-        return renderSummaryStep;
-      default:
-        return renderWelcomeStep;
+  // Step configurations
+  const steps = (0, _react.useMemo)(() => [{
+    id: 'welcome',
+    component: _SignUpWelcomeStep.default,
+    canProceed: () => true
+  }, {
+    id: 'identity',
+    component: _SignUpIdentityStep.default,
+    canProceed: () => !!(username.trim() && email.trim() && validateEmail(email) && validationState.status === 'valid'),
+    onEnter: () => {
+      // Auto-validate username when entering this step
+      if (username && validationState.status === 'idle') {
+        validateUsername(username);
+      }
     }
-  }, [currentStep, renderWelcomeStep, renderIdentityStep, renderSecurityStep, renderSummaryStep]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.KeyboardAvoidingView, {
-    style: [styles.container, {
-      backgroundColor: colors.background
-    }],
-    behavior: _reactNative.Platform.OS === 'ios' ? 'padding' : 'height',
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.StatusBar, {
-      barStyle: theme === 'dark' ? 'light-content' : 'dark-content',
-      backgroundColor: colors.background
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-      contentContainerStyle: styles.scrollContent,
-      showsVerticalScrollIndicator: false,
-      keyboardShouldPersistTaps: "handled",
-      children: renderCurrentStep()
-    })]
+  }, {
+    id: 'security',
+    component: _SignUpSecurityStep.default,
+    canProceed: () => !!(password && validatePassword(password) && password === confirmPassword)
+  }, {
+    id: 'summary',
+    component: _SignUpSummaryStep.default,
+    canProceed: () => true
+  }], [username, email, password, confirmPassword, validationState.status, validateEmail, validatePassword, validateUsername]);
+
+  // Step data for the reusable component
+  const stepData = (0, _react.useMemo)(() => [
+  // Welcome step - no data needed
+  {},
+  // Identity step
+  {
+    username,
+    email,
+    setUsername,
+    setEmail,
+    validationState,
+    setValidationState,
+    setErrorMessage,
+    validateEmail,
+    validateUsername
+  },
+  // Security step
+  {
+    password,
+    confirmPassword,
+    setPassword,
+    setConfirmPassword,
+    showPassword,
+    showConfirmPassword,
+    setShowPassword,
+    setShowConfirmPassword,
+    setErrorMessage,
+    validatePassword
+  },
+  // Summary step
+  {
+    isLoading
+  }], [username, email, password, confirmPassword, showPassword, showConfirmPassword, validationState, errorMessage, validateEmail, validatePassword, isLoading]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepBasedScreen.default, {
+    steps: steps,
+    stepData: stepData,
+    onComplete: handleComplete,
+    navigate: navigate,
+    goBack: goBack,
+    onAuthenticated: onAuthenticated,
+    theme: theme,
+    showProgressIndicator: true,
+    enableAnimations: true,
+    oxyServices: oxyServices
   });
 };
 var _default = exports.default = SignUpScreen;