| 
				
			 | 
			
			
				@@ -4,9 +4,9 @@ import { useState } from 'react'; 
			 | 
		
	
		
			
			| 
				4
			 | 
			
				4
			 | 
			
			
				 import { useFormik, Form, FormikProvider } from 'formik'; 
			 | 
		
	
		
			
			| 
				5
			 | 
			
				5
			 | 
			
			
				 import { Icon } from '@iconify/react'; 
			 | 
		
	
		
			
			| 
				6
			 | 
			
				6
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				7
			 | 
			
				
			 | 
			
			
				-import {   
			 | 
		
	
		
			
			| 
				8
			 | 
			
				
			 | 
			
			
				-    Box, Button, 
			 | 
		
	
		
			
			| 
				9
			 | 
			
				
			 | 
			
			
				-    Stack, TextField, IconButton, InputAdornment,  
			 | 
		
	
		
			
			| 
				
			 | 
			
				7
			 | 
			
			
				+import { 
			 | 
		
	
		
			
			| 
				
			 | 
			
				8
			 | 
			
			
				+  Box, Button, 
			 | 
		
	
		
			
			| 
				
			 | 
			
				9
			 | 
			
			
				+  Stack, TextField, IconButton, InputAdornment, 
			 | 
		
	
		
			
			| 
				10
			 | 
			
				10
			 | 
			
			
				 } from '@mui/material'; 
			 | 
		
	
		
			
			| 
				11
			 | 
			
				11
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				12
			 | 
			
				12
			 | 
			
			
				 import eyeFill from '@iconify/icons-eva/eye-fill'; 
			 | 
		
	
	
		
			
			| 
				
			 | 
			
			
				@@ -15,134 +15,135 @@ import eyeOffFill from '@iconify/icons-eva/eye-off-fill'; 
			 | 
		
	
		
			
			| 
				15
			 | 
			
				15
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				16
			 | 
			
				16
			 | 
			
			
				 export function RegisterForm(props) { 
			 | 
		
	
		
			
			| 
				17
			 | 
			
				17
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				18
			 | 
			
				
			 | 
			
			
				-    const steplen = 2; 
			 | 
		
	
		
			
			| 
				19
			 | 
			
				
			 | 
			
			
				-    const index = 0; 
			 | 
		
	
		
			
			| 
				20
			 | 
			
				
			 | 
			
			
				- 
			 | 
		
	
		
			
			| 
				21
			 | 
			
				
			 | 
			
			
				-    const [showPassword, setShowPassword] = useState(false); 
			 | 
		
	
		
			
			| 
				22
			 | 
			
				
			 | 
			
			
				-    const [showPasswordTwo, setShowPasswordTwo] = useState(false); 
			 | 
		
	
		
			
			| 
				23
			 | 
			
				
			 | 
			
			
				- 
			 | 
		
	
		
			
			| 
				24
			 | 
			
				
			 | 
			
			
				-    const RegisterSchema = Yup.object().shape({ 
			 | 
		
	
		
			
			| 
				25
			 | 
			
				
			 | 
			
			
				-        firstName: Yup.string().min(2, 'Demasiado corto!').max(50, 'Demasiado largo!').required('Tu nombre es requerido'), 
			 | 
		
	
		
			
			| 
				26
			 | 
			
				
			 | 
			
			
				-        lastName: Yup.string().min(2, 'Demasiado corto!').max(50, 'Demasiado Largo!').required('El apellido es requerido'), 
			 | 
		
	
		
			
			| 
				27
			 | 
			
				
			 | 
			
			
				-        email: Yup.string().email('El correo no es valido').required('Email es requerido'), 
			 | 
		
	
		
			
			| 
				28
			 | 
			
				
			 | 
			
			
				-        password: Yup.string().min(5, 'La contraseña debe contener mínimo 5 caracteres').required('la contraseña es requerida'), 
			 | 
		
	
		
			
			| 
				29
			 | 
			
				
			 | 
			
			
				-        password_confirm: Yup.string().required('Las contraseñas no coincidien').oneOf([Yup.ref('password'), null], 'Las contraseñas no coincidien') 
			 | 
		
	
		
			
			| 
				30
			 | 
			
				
			 | 
			
			
				-    }); 
			 | 
		
	
		
			
			| 
				31
			 | 
			
				
			 | 
			
			
				- 
			 | 
		
	
		
			
			| 
				32
			 | 
			
				
			 | 
			
			
				-    let {client, setClient, handleNext, handleBack } = props 
			 | 
		
	
		
			
			| 
				33
			 | 
			
				
			 | 
			
			
				- 
			 | 
		
	
		
			
			| 
				34
			 | 
			
				
			 | 
			
			
				-    const formik = useFormik({ 
			 | 
		
	
		
			
			| 
				35
			 | 
			
				
			 | 
			
			
				-        initialValues: { 
			 | 
		
	
		
			
			| 
				36
			 | 
			
				
			 | 
			
			
				-            firstName: client.firstName, 
			 | 
		
	
		
			
			| 
				37
			 | 
			
				
			 | 
			
			
				-            lastName: client.lastName, 
			 | 
		
	
		
			
			| 
				38
			 | 
			
				
			 | 
			
			
				-            email: client.email, 
			 | 
		
	
		
			
			| 
				39
			 | 
			
				
			 | 
			
			
				-            password: client.password, 
			 | 
		
	
		
			
			| 
				40
			 | 
			
				
			 | 
			
			
				-            password_confirm: client.password_confirm 
			 | 
		
	
		
			
			| 
				41
			 | 
			
				
			 | 
			
			
				-        }, 
			 | 
		
	
		
			
			| 
				42
			 | 
			
				
			 | 
			
			
				-        onSubmit: (fields) => { 
			 | 
		
	
		
			
			| 
				43
			 | 
			
				
			 | 
			
			
				-            setClient({  
			 | 
		
	
		
			
			| 
				44
			 | 
			
				
			 | 
			
			
				-                ...client, 
			 | 
		
	
		
			
			| 
				45
			 | 
			
				
			 | 
			
			
				-                ...fields  
			 | 
		
	
		
			
			| 
				46
			 | 
			
				
			 | 
			
			
				-            }) 
			 | 
		
	
		
			
			| 
				47
			 | 
			
				
			 | 
			
			
				-            handleNext() 
			 | 
		
	
		
			
			| 
				48
			 | 
			
				
			 | 
			
			
				-        }, 
			 | 
		
	
		
			
			| 
				49
			 | 
			
				
			 | 
			
			
				-        validationSchema: RegisterSchema, 
			 | 
		
	
		
			
			| 
				50
			 | 
			
				
			 | 
			
			
				-    }); 
			 | 
		
	
		
			
			| 
				51
			 | 
			
				
			 | 
			
			
				- 
			 | 
		
	
		
			
			| 
				52
			 | 
			
				
			 | 
			
			
				-    const {errors, touched, handleSubmit, getFieldProps } = formik; 
			 | 
		
	
		
			
			| 
				53
			 | 
			
				
			 | 
			
			
				- 
			 | 
		
	
		
			
			| 
				54
			 | 
			
				
			 | 
			
			
				-    return ( 
			 | 
		
	
		
			
			| 
				55
			 | 
			
				
			 | 
			
			
				-        <FormikProvider style={{ padding : 15 }} value={formik}> 
			 | 
		
	
		
			
			| 
				56
			 | 
			
				
			 | 
			
			
				-            <Form autoComplete="off" noValidate onSubmit={handleSubmit}> 
			 | 
		
	
		
			
			| 
				57
			 | 
			
				
			 | 
			
			
				-                <Stack spacing={3}> 
			 | 
		
	
		
			
			| 
				58
			 | 
			
				
			 | 
			
			
				-                    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}> 
			 | 
		
	
		
			
			| 
				59
			 | 
			
				
			 | 
			
			
				-                        <TextField 
			 | 
		
	
		
			
			| 
				60
			 | 
			
				
			 | 
			
			
				-                            label="Nombre" 
			 | 
		
	
		
			
			| 
				61
			 | 
			
				
			 | 
			
			
				-                            fullWidth 
			 | 
		
	
		
			
			| 
				62
			 | 
			
				
			 | 
			
			
				-                            {...getFieldProps('firstName')} 
			 | 
		
	
		
			
			| 
				63
			 | 
			
				
			 | 
			
			
				-                            error={Boolean(touched.firstName && errors.firstName)} 
			 | 
		
	
		
			
			| 
				64
			 | 
			
				
			 | 
			
			
				-                            helperText={touched.firstName && errors.firstName} 
			 | 
		
	
		
			
			| 
				65
			 | 
			
				
			 | 
			
			
				-                        /> 
			 | 
		
	
		
			
			| 
				66
			 | 
			
				
			 | 
			
			
				- 
			 | 
		
	
		
			
			| 
				67
			 | 
			
				
			 | 
			
			
				-                        <TextField 
			 | 
		
	
		
			
			| 
				68
			 | 
			
				
			 | 
			
			
				-                            label="Apellidos" 
			 | 
		
	
		
			
			| 
				69
			 | 
			
				
			 | 
			
			
				-                            fullWidth 
			 | 
		
	
		
			
			| 
				70
			 | 
			
				
			 | 
			
			
				-                            {...getFieldProps('lastName')} 
			 | 
		
	
		
			
			| 
				71
			 | 
			
				
			 | 
			
			
				-                            error={Boolean(touched.lastName && errors.lastName)} 
			 | 
		
	
		
			
			| 
				72
			 | 
			
				
			 | 
			
			
				-                            helperText={touched.lastName && errors.lastName} 
			 | 
		
	
		
			
			| 
				73
			 | 
			
				
			 | 
			
			
				-                        /> 
			 | 
		
	
		
			
			| 
				74
			 | 
			
				
			 | 
			
			
				-                    </Stack> 
			 | 
		
	
		
			
			| 
				75
			 | 
			
				
			 | 
			
			
				- 
			 | 
		
	
		
			
			| 
				76
			 | 
			
				
			 | 
			
			
				-                    <TextField 
			 | 
		
	
		
			
			| 
				77
			 | 
			
				
			 | 
			
			
				-                        fullWidth 
			 | 
		
	
		
			
			| 
				78
			 | 
			
				
			 | 
			
			
				-                        autoComplete="username" 
			 | 
		
	
		
			
			| 
				79
			 | 
			
				
			 | 
			
			
				-                        type="email" 
			 | 
		
	
		
			
			| 
				80
			 | 
			
				
			 | 
			
			
				-                        label="Correo Electrónico" 
			 | 
		
	
		
			
			| 
				81
			 | 
			
				
			 | 
			
			
				-                        {...getFieldProps('email')} 
			 | 
		
	
		
			
			| 
				82
			 | 
			
				
			 | 
			
			
				-                        error={Boolean(touched.email && errors.email)} 
			 | 
		
	
		
			
			| 
				83
			 | 
			
				
			 | 
			
			
				-                        helperText={touched.email && errors.email} 
			 | 
		
	
		
			
			| 
				84
			 | 
			
				
			 | 
			
			
				-                    /> 
			 | 
		
	
		
			
			| 
				85
			 | 
			
				
			 | 
			
			
				- 
			 | 
		
	
		
			
			| 
				86
			 | 
			
				
			 | 
			
			
				-                    <TextField 
			 | 
		
	
		
			
			| 
				87
			 | 
			
				
			 | 
			
			
				-                        fullWidth 
			 | 
		
	
		
			
			| 
				88
			 | 
			
				
			 | 
			
			
				-                        autoComplete="current-password" 
			 | 
		
	
		
			
			| 
				89
			 | 
			
				
			 | 
			
			
				-                        type={showPassword ? 'text' : 'password'} 
			 | 
		
	
		
			
			| 
				90
			 | 
			
				
			 | 
			
			
				-                        label="Contraseña" 
			 | 
		
	
		
			
			| 
				91
			 | 
			
				
			 | 
			
			
				-                        {...getFieldProps('password')} 
			 | 
		
	
		
			
			| 
				92
			 | 
			
				
			 | 
			
			
				-                        InputProps={{ 
			 | 
		
	
		
			
			| 
				93
			 | 
			
				
			 | 
			
			
				-                            endAdornment: ( 
			 | 
		
	
		
			
			| 
				94
			 | 
			
				
			 | 
			
			
				-                                <InputAdornment position="end"> 
			 | 
		
	
		
			
			| 
				95
			 | 
			
				
			 | 
			
			
				-                                    <IconButton edge="end" onClick={() => setShowPassword((prev) => !prev)}> 
			 | 
		
	
		
			
			| 
				96
			 | 
			
				
			 | 
			
			
				-                                        <Icon icon={showPassword ? eyeFill : eyeOffFill} /> 
			 | 
		
	
		
			
			| 
				97
			 | 
			
				
			 | 
			
			
				-                                    </IconButton> 
			 | 
		
	
		
			
			| 
				98
			 | 
			
				
			 | 
			
			
				-                                </InputAdornment> 
			 | 
		
	
		
			
			| 
				99
			 | 
			
				
			 | 
			
			
				-                            ) 
			 | 
		
	
		
			
			| 
				100
			 | 
			
				
			 | 
			
			
				-                        }} 
			 | 
		
	
		
			
			| 
				101
			 | 
			
				
			 | 
			
			
				-                        error={Boolean(touched.password && errors.password)} 
			 | 
		
	
		
			
			| 
				102
			 | 
			
				
			 | 
			
			
				-                        helperText={touched.password && errors.password} 
			 | 
		
	
		
			
			| 
				103
			 | 
			
				
			 | 
			
			
				-                    /> 
			 | 
		
	
		
			
			| 
				104
			 | 
			
				
			 | 
			
			
				- 
			 | 
		
	
		
			
			| 
				105
			 | 
			
				
			 | 
			
			
				-                    <TextField 
			 | 
		
	
		
			
			| 
				106
			 | 
			
				
			 | 
			
			
				-                        fullWidth 
			 | 
		
	
		
			
			| 
				107
			 | 
			
				
			 | 
			
			
				-                        type={showPasswordTwo ? 'text' : 'password'} 
			 | 
		
	
		
			
			| 
				108
			 | 
			
				
			 | 
			
			
				-                        label="Confirma contraseña" 
			 | 
		
	
		
			
			| 
				109
			 | 
			
				
			 | 
			
			
				-                        {...getFieldProps('password_confirm')} 
			 | 
		
	
		
			
			| 
				110
			 | 
			
				
			 | 
			
			
				-                        InputProps={{ 
			 | 
		
	
		
			
			| 
				111
			 | 
			
				
			 | 
			
			
				-                            endAdornment: ( 
			 | 
		
	
		
			
			| 
				112
			 | 
			
				
			 | 
			
			
				-                                <InputAdornment position="end"> 
			 | 
		
	
		
			
			| 
				113
			 | 
			
				
			 | 
			
			
				-                                    <IconButton edge="end" onClick={() => setShowPasswordTwo((prev) => !prev)}> 
			 | 
		
	
		
			
			| 
				114
			 | 
			
				
			 | 
			
			
				-                                        <Icon icon={showPasswordTwo ? eyeFill : eyeOffFill} /> 
			 | 
		
	
		
			
			| 
				115
			 | 
			
				
			 | 
			
			
				-                                    </IconButton> 
			 | 
		
	
		
			
			| 
				116
			 | 
			
				
			 | 
			
			
				-                                </InputAdornment> 
			 | 
		
	
		
			
			| 
				117
			 | 
			
				
			 | 
			
			
				-                            ) 
			 | 
		
	
		
			
			| 
				118
			 | 
			
				
			 | 
			
			
				-                        }} 
			 | 
		
	
		
			
			| 
				119
			 | 
			
				
			 | 
			
			
				-                        error={Boolean(touched.password_confirm && errors.password_confirm)} 
			 | 
		
	
		
			
			| 
				120
			 | 
			
				
			 | 
			
			
				-                        helperText={touched.password_confirm && errors.password_confirm} 
			 | 
		
	
		
			
			| 
				121
			 | 
			
				
			 | 
			
			
				-                    /> 
			 | 
		
	
		
			
			| 
				122
			 | 
			
				
			 | 
			
			
				- 
			 | 
		
	
		
			
			| 
				123
			 | 
			
				
			 | 
			
			
				- 
			 | 
		
	
		
			
			| 
				124
			 | 
			
				
			 | 
			
			
				-                  <Box sx={{ mb: 2 }}> 
			 | 
		
	
		
			
			| 
				125
			 | 
			
				
			 | 
			
			
				-                    <div style={{ paddingTop  : 15}}> 
			 | 
		
	
		
			
			| 
				126
			 | 
			
				
			 | 
			
			
				-                      <Button 
			 | 
		
	
		
			
			| 
				127
			 | 
			
				
			 | 
			
			
				-                        type="submit" 
			 | 
		
	
		
			
			| 
				128
			 | 
			
				
			 | 
			
			
				-                        className="registerBtn"  
			 | 
		
	
		
			
			| 
				129
			 | 
			
				
			 | 
			
			
				-                        variant="contained" 
			 | 
		
	
		
			
			| 
				130
			 | 
			
				
			 | 
			
			
				-                        sx={{ mt: 1, mr: 1 }} 
			 | 
		
	
		
			
			| 
				131
			 | 
			
				
			 | 
			
			
				-                      > 
			 | 
		
	
		
			
			| 
				132
			 | 
			
				
			 | 
			
			
				-                        {index === steplen - 1 ? 'Registrarme' : 'Siguiente'} 
			 | 
		
	
		
			
			| 
				133
			 | 
			
				
			 | 
			
			
				-                      </Button> 
			 | 
		
	
		
			
			| 
				134
			 | 
			
				
			 | 
			
			
				-                      <Button 
			 | 
		
	
		
			
			| 
				135
			 | 
			
				
			 | 
			
			
				-                        disabled={true} 
			 | 
		
	
		
			
			| 
				136
			 | 
			
				
			 | 
			
			
				-                        onClick={handleBack} 
			 | 
		
	
		
			
			| 
				137
			 | 
			
				
			 | 
			
			
				-                        sx={{ mt: 1, mr: 1 }} 
			 | 
		
	
		
			
			| 
				138
			 | 
			
				
			 | 
			
			
				-                      > 
			 | 
		
	
		
			
			| 
				139
			 | 
			
				
			 | 
			
			
				-                        Regresar 
			 | 
		
	
		
			
			| 
				140
			 | 
			
				
			 | 
			
			
				-                      </Button> 
			 | 
		
	
		
			
			| 
				141
			 | 
			
				
			 | 
			
			
				-                    </div> 
			 | 
		
	
		
			
			| 
				142
			 | 
			
				
			 | 
			
			
				-                  </Box> 
			 | 
		
	
		
			
			| 
				143
			 | 
			
				
			 | 
			
			
				- 
			 | 
		
	
		
			
			| 
				144
			 | 
			
				
			 | 
			
			
				-                </Stack> 
			 | 
		
	
		
			
			| 
				145
			 | 
			
				
			 | 
			
			
				-            </Form> 
			 | 
		
	
		
			
			| 
				146
			 | 
			
				
			 | 
			
			
				-        </FormikProvider> 
			 | 
		
	
		
			
			| 
				147
			 | 
			
				
			 | 
			
			
				-    ); 
			 | 
		
	
		
			
			| 
				
			 | 
			
				18
			 | 
			
			
				+  const steplen = 2; 
			 | 
		
	
		
			
			| 
				
			 | 
			
				19
			 | 
			
			
				+  const index = 0; 
			 | 
		
	
		
			
			| 
				
			 | 
			
				20
			 | 
			
			
				+ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				21
			 | 
			
			
				+  const [showPassword, setShowPassword] = useState(false); 
			 | 
		
	
		
			
			| 
				
			 | 
			
				22
			 | 
			
			
				+  const [showPasswordTwo, setShowPasswordTwo] = useState(false); 
			 | 
		
	
		
			
			| 
				
			 | 
			
				23
			 | 
			
			
				+ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				24
			 | 
			
			
				+  const RegisterSchema = Yup.object().shape({ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				25
			 | 
			
			
				+    firstName: Yup.string().min(2, 'Demasiado corto!').max(50, 'Demasiado largo!').required('Tu nombre es requerido'), 
			 | 
		
	
		
			
			| 
				
			 | 
			
				26
			 | 
			
			
				+    lastName: Yup.string().min(2, 'Demasiado corto!').max(50, 'Demasiado Largo!').required('El apellido es requerido'), 
			 | 
		
	
		
			
			| 
				
			 | 
			
				27
			 | 
			
			
				+    email: Yup.string().email('El correo no es valido').required('Email es requerido'), 
			 | 
		
	
		
			
			| 
				
			 | 
			
				28
			 | 
			
			
				+    password: Yup.string().min(5, 'La contraseña debe contener mínimo 5 caracteres').required('la contraseña es requerida'), 
			 | 
		
	
		
			
			| 
				
			 | 
			
				29
			 | 
			
			
				+    password_confirm: Yup.string().required('Las contraseñas no coincidien').oneOf([Yup.ref('password'), null], 'Las contraseñas no coincidien') 
			 | 
		
	
		
			
			| 
				
			 | 
			
				30
			 | 
			
			
				+  }); 
			 | 
		
	
		
			
			| 
				
			 | 
			
				31
			 | 
			
			
				+ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				32
			 | 
			
			
				+  let { client, setClient, handleNext, handleBack } = props 
			 | 
		
	
		
			
			| 
				
			 | 
			
				33
			 | 
			
			
				+ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				34
			 | 
			
			
				+  const formik = useFormik({ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				35
			 | 
			
			
				+    initialValues: { 
			 | 
		
	
		
			
			| 
				
			 | 
			
				36
			 | 
			
			
				+      firstName: client.firstName, 
			 | 
		
	
		
			
			| 
				
			 | 
			
				37
			 | 
			
			
				+      lastName: client.lastName, 
			 | 
		
	
		
			
			| 
				
			 | 
			
				38
			 | 
			
			
				+      email: client.email, 
			 | 
		
	
		
			
			| 
				
			 | 
			
				39
			 | 
			
			
				+      password: client.password, 
			 | 
		
	
		
			
			| 
				
			 | 
			
				40
			 | 
			
			
				+      password_confirm: client.password_confirm 
			 | 
		
	
		
			
			| 
				
			 | 
			
				41
			 | 
			
			
				+    }, 
			 | 
		
	
		
			
			| 
				
			 | 
			
				42
			 | 
			
			
				+    onSubmit: (fields) => { 
			 | 
		
	
		
			
			| 
				
			 | 
			
				43
			 | 
			
			
				+      setClient({ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				44
			 | 
			
			
				+        ...client, 
			 | 
		
	
		
			
			| 
				
			 | 
			
				45
			 | 
			
			
				+        ...fields 
			 | 
		
	
		
			
			| 
				
			 | 
			
				46
			 | 
			
			
				+      }) 
			 | 
		
	
		
			
			| 
				
			 | 
			
				47
			 | 
			
			
				+      handleNext() 
			 | 
		
	
		
			
			| 
				
			 | 
			
				48
			 | 
			
			
				+    }, 
			 | 
		
	
		
			
			| 
				
			 | 
			
				49
			 | 
			
			
				+    validationSchema: RegisterSchema, 
			 | 
		
	
		
			
			| 
				
			 | 
			
				50
			 | 
			
			
				+  }); 
			 | 
		
	
		
			
			| 
				
			 | 
			
				51
			 | 
			
			
				+ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				52
			 | 
			
			
				+  const { errors, touched, handleSubmit, getFieldProps } = formik; 
			 | 
		
	
		
			
			| 
				
			 | 
			
				53
			 | 
			
			
				+ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				54
			 | 
			
			
				+  return ( 
			 | 
		
	
		
			
			| 
				
			 | 
			
				55
			 | 
			
			
				+    <FormikProvider style={{ padding: 15 }} value={formik}> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				56
			 | 
			
			
				+      <Form autoComplete="off" noValidate onSubmit={handleSubmit}> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				57
			 | 
			
			
				+        <Stack spacing={3}> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				58
			 | 
			
			
				+          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				59
			 | 
			
			
				+            <TextField 
			 | 
		
	
		
			
			| 
				
			 | 
			
				60
			 | 
			
			
				+              label="Nombre" 
			 | 
		
	
		
			
			| 
				
			 | 
			
				61
			 | 
			
			
				+              fullWidth 
			 | 
		
	
		
			
			| 
				
			 | 
			
				62
			 | 
			
			
				+              {...getFieldProps('firstName')} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				63
			 | 
			
			
				+              error={Boolean(touched.firstName && errors.firstName)} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				64
			 | 
			
			
				+              helperText={touched.firstName && errors.firstName} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				65
			 | 
			
			
				+            /> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				66
			 | 
			
			
				+ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				67
			 | 
			
			
				+            <TextField 
			 | 
		
	
		
			
			| 
				
			 | 
			
				68
			 | 
			
			
				+              label="Apellidos" 
			 | 
		
	
		
			
			| 
				
			 | 
			
				69
			 | 
			
			
				+              fullWidth 
			 | 
		
	
		
			
			| 
				
			 | 
			
				70
			 | 
			
			
				+              {...getFieldProps('lastName')} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				71
			 | 
			
			
				+              error={Boolean(touched.lastName && errors.lastName)} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				72
			 | 
			
			
				+              helperText={touched.lastName && errors.lastName} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				73
			 | 
			
			
				+            /> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				74
			 | 
			
			
				+          </Stack> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				75
			 | 
			
			
				+ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				76
			 | 
			
			
				+          <TextField 
			 | 
		
	
		
			
			| 
				
			 | 
			
				77
			 | 
			
			
				+            fullWidth 
			 | 
		
	
		
			
			| 
				
			 | 
			
				78
			 | 
			
			
				+            autoComplete="username" 
			 | 
		
	
		
			
			| 
				
			 | 
			
				79
			 | 
			
			
				+            type="email" 
			 | 
		
	
		
			
			| 
				
			 | 
			
				80
			 | 
			
			
				+            label="Correo Electrónico" 
			 | 
		
	
		
			
			| 
				
			 | 
			
				81
			 | 
			
			
				+            {...getFieldProps('email')} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				82
			 | 
			
			
				+            error={Boolean(touched.email && errors.email)} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				83
			 | 
			
			
				+            helperText={touched.email && errors.email} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				84
			 | 
			
			
				+          /> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				85
			 | 
			
			
				+ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				86
			 | 
			
			
				+          <TextField 
			 | 
		
	
		
			
			| 
				
			 | 
			
				87
			 | 
			
			
				+            fullWidth 
			 | 
		
	
		
			
			| 
				
			 | 
			
				88
			 | 
			
			
				+            autoComplete="current-password" 
			 | 
		
	
		
			
			| 
				
			 | 
			
				89
			 | 
			
			
				+            type={showPassword ? 'text' : 'password'} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				90
			 | 
			
			
				+            label="Contraseña" 
			 | 
		
	
		
			
			| 
				
			 | 
			
				91
			 | 
			
			
				+            {...getFieldProps('password')} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				92
			 | 
			
			
				+            InputProps={{ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				93
			 | 
			
			
				+              endAdornment: ( 
			 | 
		
	
		
			
			| 
				
			 | 
			
				94
			 | 
			
			
				+                <InputAdornment position="end"> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				95
			 | 
			
			
				+                  <IconButton edge="end" onClick={() => setShowPassword((prev) => !prev)}> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				96
			 | 
			
			
				+                    <Icon icon={showPassword ? eyeFill : eyeOffFill} /> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				97
			 | 
			
			
				+                  </IconButton> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				98
			 | 
			
			
				+                </InputAdornment> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				99
			 | 
			
			
				+              ) 
			 | 
		
	
		
			
			| 
				
			 | 
			
				100
			 | 
			
			
				+            }} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				101
			 | 
			
			
				+            error={Boolean(touched.password && errors.password)} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				102
			 | 
			
			
				+            helperText={touched.password && errors.password} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				103
			 | 
			
			
				+          /> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				104
			 | 
			
			
				+ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				105
			 | 
			
			
				+          <TextField 
			 | 
		
	
		
			
			| 
				
			 | 
			
				106
			 | 
			
			
				+            fullWidth 
			 | 
		
	
		
			
			| 
				
			 | 
			
				107
			 | 
			
			
				+            type={showPasswordTwo ? 'text' : 'password'} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				108
			 | 
			
			
				+            label="Confirma contraseña" 
			 | 
		
	
		
			
			| 
				
			 | 
			
				109
			 | 
			
			
				+            {...getFieldProps('password_confirm')} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				110
			 | 
			
			
				+            InputProps={{ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				111
			 | 
			
			
				+              endAdornment: ( 
			 | 
		
	
		
			
			| 
				
			 | 
			
				112
			 | 
			
			
				+                <InputAdornment position="end"> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				113
			 | 
			
			
				+                  <IconButton edge="end" onClick={() => setShowPasswordTwo((prev) => !prev)}> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				114
			 | 
			
			
				+                    <Icon icon={showPasswordTwo ? eyeFill : eyeOffFill} /> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				115
			 | 
			
			
				+                  </IconButton> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				116
			 | 
			
			
				+                </InputAdornment> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				117
			 | 
			
			
				+              ) 
			 | 
		
	
		
			
			| 
				
			 | 
			
				118
			 | 
			
			
				+            }} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				119
			 | 
			
			
				+            error={Boolean(touched.password_confirm && errors.password_confirm)} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				120
			 | 
			
			
				+            helperText={touched.password_confirm && errors.password_confirm} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				121
			 | 
			
			
				+          /> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				122
			 | 
			
			
				+ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				123
			 | 
			
			
				+ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				124
			 | 
			
			
				+          <Box sx={{ mb: 2 }}> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				125
			 | 
			
			
				+            <div style={{ paddingTop: 15 }}> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				126
			 | 
			
			
				+              <Button 
			 | 
		
	
		
			
			| 
				
			 | 
			
				127
			 | 
			
			
				+                name="submit_first_step" 
			 | 
		
	
		
			
			| 
				
			 | 
			
				128
			 | 
			
			
				+                type="submit" 
			 | 
		
	
		
			
			| 
				
			 | 
			
				129
			 | 
			
			
				+                className="registerBtn" 
			 | 
		
	
		
			
			| 
				
			 | 
			
				130
			 | 
			
			
				+                variant="contained" 
			 | 
		
	
		
			
			| 
				
			 | 
			
				131
			 | 
			
			
				+                sx={{ mt: 1, mr: 1 }} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				132
			 | 
			
			
				+              > 
			 | 
		
	
		
			
			| 
				
			 | 
			
				133
			 | 
			
			
				+                {index === steplen - 1 ? 'Registrarme' : 'Siguiente'} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				134
			 | 
			
			
				+              </Button> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				135
			 | 
			
			
				+              <Button 
			 | 
		
	
		
			
			| 
				
			 | 
			
				136
			 | 
			
			
				+                disabled={true} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				137
			 | 
			
			
				+                onClick={handleBack} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				138
			 | 
			
			
				+                sx={{ mt: 1, mr: 1 }} 
			 | 
		
	
		
			
			| 
				
			 | 
			
				139
			 | 
			
			
				+              > 
			 | 
		
	
		
			
			| 
				
			 | 
			
				140
			 | 
			
			
				+                Regresar 
			 | 
		
	
		
			
			| 
				
			 | 
			
				141
			 | 
			
			
				+              </Button> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				142
			 | 
			
			
				+            </div> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				143
			 | 
			
			
				+          </Box> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				144
			 | 
			
			
				+ 
			 | 
		
	
		
			
			| 
				
			 | 
			
				145
			 | 
			
			
				+        </Stack> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				146
			 | 
			
			
				+      </Form> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				147
			 | 
			
			
				+    </FormikProvider> 
			 | 
		
	
		
			
			| 
				
			 | 
			
				148
			 | 
			
			
				+  ); 
			 | 
		
	
		
			
			| 
				148
			 | 
			
				149
			 | 
			
			
				 } 
			 |