@oxyhq/services 5.5.8 → 5.6.0

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

@@ -10,9 +10,10 @@ var _OxyContext = require("../context/OxyContext");
 var _styles = require("../styles");
 var _vectorIcons = require("@expo/vector-icons");
 var _sonner = require("../../lib/sonner");
-var _HighFive = _interopRequireDefault(require("../../assets/illustrations/HighFive"));
-var _GroupedPillButtons = _interopRequireDefault(require("../components/internal/GroupedPillButtons"));
-var _TextField = _interopRequireDefault(require("../components/internal/TextField"));
+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 _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); }
@@ -51,9 +52,9 @@ const createStyles = (colors, theme) => _reactNative.StyleSheet.create({
   modernTitle: {
     fontFamily: _reactNative.Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
     fontWeight: _reactNative.Platform.OS === 'web' ? 'bold' : undefined,
-    fontSize: 42,
+    fontSize: 62,
     lineHeight: 48,
-    marginBottom: 12,
+    marginBottom: 18,
     textAlign: 'left',
     letterSpacing: -1
   },
@@ -134,6 +135,17 @@ const createStyles = (colors, theme) => _reactNative.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,
@@ -169,15 +181,22 @@ const createStyles = (colors, theme) => _reactNative.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%',
+    ..._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',
@@ -204,14 +223,21 @@ const createStyles = (colors, theme) => _reactNative.StyleSheet.create({
     marginVertical: 20,
     borderRadius: 24,
     alignItems: 'center',
-    shadowColor: '#000',
-    shadowOpacity: 0.04,
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowRadius: 4,
-    elevation: 1
+    ..._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,
@@ -237,13 +263,20 @@ const createStyles = (colors, theme) => _reactNative.StyleSheet.create({
     gap: 6,
     minWidth: 70,
     borderWidth: 1,
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 2
+    ..._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',
@@ -276,14 +309,21 @@ const createStyles = (colors, theme) => _reactNative.StyleSheet.create({
     marginHorizontal: 6,
     borderWidth: 2,
     borderColor: '#fff',
-    shadowColor: colors.primary,
-    shadowOpacity: 0.08,
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowRadius: 2,
-    elevation: 1
+    ..._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,
@@ -705,310 +745,71 @@ const SignUpScreen = ({
     }
   }, [formData, isIdentityStepValid, isSecurityStepValid, signUp, onAuthenticated, resetForm]);
 
-  // Step components
-  const renderWelcomeStep = (0, _react.useCallback)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-    style: [styles.stepContainer, {
-      opacity: fadeAnim,
-      transform: [{
-        translateX: slideAnim
-      }]
-    }],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HighFive.default, {
-      width: 100,
-      height: 100
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.modernHeader,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.modernTitle, {
-          color: colors.text
-        }],
-        children: "Welcome to Oxy"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
-      buttons: [{
-        text: 'Get Started',
-        onPress: nextStep,
-        icon: 'arrow-forward',
-        variant: 'primary',
-        testID: 'welcome-next-button'
-      }],
-      colors: colors
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.footerTextContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-        style: [styles.footerText, {
-          color: colors.text
-        }],
-        children: ["Already have an account?", ' ']
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        onPress: () => navigate('SignIn'),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.linkText, {
-            color: colors.primary
-          }],
-          children: "Sign In"
-        })
-      })]
-    })]
-  }), [fadeAnim, slideAnim, colors, nextStep, navigate, styles]);
-  const renderIdentityStep = (0, _react.useCallback)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-    style: [styles.stepContainer, {
-      opacity: fadeAnim,
-      transform: [{
-        translateX: slideAnim
-      }]
-    }],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.modernHeader,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.stepTitle, {
-          color: colors.text
-        }],
-        children: "Who are you?"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
-      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__*/(0, _jsxRuntime.jsx)(ValidationMessage, {
-      validationState: validationState,
-      colors: colors,
-      styles: styles
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
-      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__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
-      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 = (0, _react.useCallback)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-    style: [styles.stepContainer, {
-      opacity: fadeAnim,
-      transform: [{
-        translateX: slideAnim
-      }]
-    }],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.modernHeader,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.stepTitle, {
-          color: colors.text
-        }],
-        children: "Secure your account"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
-      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__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-      style: [styles.passwordHint, {
-        color: colors.secondaryText
-      }],
-      children: ["Password must be at least ", PASSWORD_MIN_LENGTH, " characters long"]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
-      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__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
-      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 = (0, _react.useCallback)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-    style: [styles.stepContainer, {
-      opacity: fadeAnim,
-      transform: [{
-        translateX: slideAnim
-      }]
-    }],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.modernHeader,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.stepTitle, {
-          color: colors.text
-        }],
-        children: "Ready to join"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.summaryContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.summaryRow,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.summaryLabel, {
-            color: colors.secondaryText
-          }],
-          children: "Username:"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.summaryValue, {
-            color: colors.text
-          }],
-          children: formData.username
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.summaryRow,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.summaryLabel, {
-            color: colors.secondaryText
-          }],
-          children: "Email:"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.summaryValue, {
-            color: colors.text
-          }],
-          children: formData.email
-        })]
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
-      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__*/(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.jsxs)(_reactNative.ScrollView, {
-        contentContainerStyle: styles.scrollContent,
-        showsVerticalScrollIndicator: false,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: [styles.welcomeTitle, {
-            color: colors.text
-          }],
-          children: ["Welcome, ", user.username, "!"]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: [styles.userInfoContainer, {
-            backgroundColor: colors.inputBackground
-          }],
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.userInfoText, {
-              color: colors.text
-            }],
-            children: "You are already signed in."
-          }), user.email && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-            style: [styles.userInfoText, {
-              color: colors.secondaryText
-            }],
-            children: ["Email: ", user.email]
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.actionButtonsContainer,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            style: [styles.button, {
-              backgroundColor: colors.primary
-            }],
-            onPress: () => navigate('AccountCenter'),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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 = (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();
+        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__*/(0, _jsxRuntime.jsxs)(_reactNative.KeyboardAvoidingView, {
@@ -1019,16 +820,11 @@ const SignUpScreen = ({
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.StatusBar, {
       barStyle: theme === 'dark' ? 'light-content' : 'dark-content',
       backgroundColor: colors.background
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
       contentContainerStyle: styles.scrollContent,
       showsVerticalScrollIndicator: false,
       keyboardShouldPersistTaps: "handled",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressIndicator, {
-        currentStep: currentStep,
-        totalSteps: 4,
-        colors: colors,
-        styles: styles
-      }), renderCurrentStep()]
+      children: renderCurrentStep()
     })]
   });
 };