\r\n {UserState.authenticated ? (\r\n \r\n {\r\n wishList()\r\n if (inWishList) {\r\n setAlert(\r\n 'El producto se elimino de la lista de deseos',\r\n 'warning'\r\n )\r\n } else {\r\n setAlert(\r\n 'El producto se agregado a la lista de deseos',\r\n 'success'\r\n )\r\n }\r\n }}\r\n >\r\n
\r\n {UserState.authenticated ? (\r\n \r\n {\r\n compareList()\r\n if (inList) {\r\n setAlert(\r\n 'El producto producto se elimino de tu lista',\r\n 'warning'\r\n )\r\n } else {\r\n setAlert('El producto se agregado a tu lista', 'success')\r\n }\r\n }}\r\n >\r\n
\r\n ))}\r\n {/* */}\r\n {/* */}\r\n \r\n )\r\n}\r\n\r\nexport default HomeE\r\n","import React, { useContext, useState, useEffect } from 'react'\r\nimport { useHistory, useLocation } from 'react-router-dom'\r\nimport styled from 'styled-components'\r\nimport { useFormik } from 'formik'\r\nimport * as Yup from 'yup'\r\nimport Swal from 'sweetalert2'\r\n\r\nimport { Visibility, VisibilityOff } from '@material-ui/icons'\r\nimport {\r\n Button,\r\n TextField,\r\n DialogContent,\r\n DialogActions,\r\n DialogContentText,\r\n InputAdornment,\r\n IconButton,\r\n} from '@material-ui/core'\r\n\r\nimport LoadingScreen from '../../components/RegistroCliente/LoadingScreen'\r\n\r\nimport UserContext from '../../contexts/user/UserContext'\r\nimport StylesContext from '../../contexts/styles/stylesContext'\r\n\r\nconst Container = styled.div`\r\n width: 100%;\r\n min-heigth: 360px;\r\n margin: 0 auto;\r\n\r\n /* Pantallas grandes (Desktop) */\r\n @media (min-width: 1024px) {\r\n max-width: 480px;\r\n }\r\n\r\n /* Tablets */\r\n @media (min-width: 768px) and (max-width: 1023px) {\r\n max-width: 50vw;\r\n }\r\n\r\n /* Tamaño intermedio entre móvil y tablet */\r\n @media (min-width: 600px) and (max-width: 767px) {\r\n max-width: 70vw;\r\n }\r\n\r\n /* Móviles */\r\n @media (max-width: 599px) {\r\n max-width: 100%;\r\n }\r\n`\r\n\r\nconst Form = styled.form`\r\n width: 100%;\r\n padding: 20px;\r\n border-radius: 0.6rem;\r\n background-color: #f5f5f5;\r\n\r\n /* Pantallas grandes (Desktop) */\r\n @media (min-width: 1024px) {\r\n border: 2px solid #f2f2f2;\r\n }\r\n\r\n /* Tablets */\r\n @media (min-width: 768px) and (max-width: 1023px) {\r\n border: 2px solid #f2f2f2;\r\n }\r\n\r\n /* Tamaño intermedio entre móvil y tablet */\r\n @media (min-width: 600px) and (max-width: 767px) {\r\n border: 1px solid #e0e0e0;\r\n }\r\n\r\n /* Móviles */\r\n @media (max-width: 599px) {\r\n border: none;\r\n background-color: #ffffff;\r\n }\r\n`\r\n\r\nconst Title = styled.div`\r\n text-align: center;\r\n font-size: 32px;\r\n font-weight: 600;\r\n`\r\n\r\nconst SubTitle = styled.div`\r\n text-align: center;\r\n font-size: 16px;\r\n font-weight: 400;\r\n`\r\n\r\nconst TextLink = styled.div`\r\n display: inline-block;\r\n font-weight: 600;\r\n cursor: pointer;\r\n`\r\n\r\nconst StyledDialogActions = styled(DialogActions)`\r\n padding-right: 2rem;\r\n`\r\n\r\nconst Signin = () => {\r\n const { UserState, doLogin } = useContext(UserContext)\r\n const history = useHistory()\r\n const location = useLocation()\r\n const stylesContext = useContext(StylesContext)\r\n\r\n const [isLoading, setIsLoading] = useState(false)\r\n const [showPassword, setShowPassword] = useState(false)\r\n\r\n // Controlador para manejar la cancelación\r\n const [controller, setController] = useState(null)\r\n\r\n // Ruta a la que redirigir después de iniciar sesión\r\n const redirectTo = location.state?.from || '/'\r\n\r\n const togglePasswordVisibility = () => {\r\n setShowPassword(!showPassword)\r\n }\r\n\r\n const formik = useFormik({\r\n initialValues: {\r\n email: '',\r\n password: '',\r\n },\r\n validationSchema: Yup.object({\r\n email: Yup.string()\r\n .email('Correo electrónico inválido')\r\n .matches(\r\n /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/,\r\n 'Introduzca un correo electrónico válido'\r\n )\r\n .required('Correo electrónico requerido'),\r\n password: Yup.string()\r\n .min(8, 'La contraseña debe tener al menos 8 caracteres.')\r\n .required('Contraseña requerida'),\r\n }),\r\n onSubmit: async values => {\r\n const abortController = new AbortController() // Crear un nuevo AbortController\r\n setController(abortController) // Guardar el controlador en el estado\r\n\r\n setIsLoading(true)\r\n try {\r\n // Pasar el signal para permitir la cancelación\r\n await doLogin(values.email, values.password, abortController.signal)\r\n } catch (error) {\r\n console.error('Error durante el inicio de sesión:', error)\r\n } finally {\r\n setIsLoading(false)\r\n }\r\n },\r\n })\r\n\r\n useEffect(() => {\r\n if (!UserState.loading) {\r\n if (UserState.authenticated) {\r\n // Redirige al usuario a la ruta original o a la página principal\r\n history.push(redirectTo)\r\n } else if (!UserState.authenticated && UserState.error) {\r\n // Mostrar mensaje de error si el inicio de sesión falló\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Inicio de sesión fallido',\r\n text:\r\n UserState.error ||\r\n 'Las credenciales proporcionadas son incorrectas. Por favor, inténtalo de nuevo.',\r\n confirmButtonText: 'Aceptar',\r\n allowOutsideClick: false,\r\n })\r\n }\r\n }\r\n }, [UserState.loading, UserState.authenticated, UserState.error])\r\n\r\n // Limpiar controlador cuando el componente se desmonte\r\n useEffect(() => {\r\n return () => {\r\n if (controller) {\r\n controller.abort() // Cancelar cualquier solicitud en curso si el componente se desmonta\r\n }\r\n }\r\n }, [controller])\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport default Signin\r\n","import React, { useEffect, useState, useContext } from 'react'\r\nimport { useHistory } from 'react-router-dom'\r\nimport styled from 'styled-components'\r\nimport { useFormik } from 'formik'\r\nimport * as Yup from 'yup'\r\nimport Swal from 'sweetalert2'\r\nimport Reaptcha from 'reaptcha'\r\n\r\nimport Button from '@material-ui/core/Button'\r\nimport DialogActions from '@material-ui/core/DialogActions'\r\nimport DialogContent from '@material-ui/core/DialogContent'\r\nimport DialogContentText from '@material-ui/core/DialogContentText'\r\nimport TextField from '@material-ui/core/TextField'\r\nimport IconButton from '@material-ui/core/IconButton'\r\nimport InputAdornment from '@material-ui/core/InputAdornment'\r\nimport Visibility from '@material-ui/icons/Visibility'\r\nimport VisibilityOff from '@material-ui/icons/VisibilityOff'\r\n\r\nimport LoadingScreen from '../../components/RegistroCliente/LoadingScreen'\r\n\r\nimport UserContext from '../../contexts/user/UserContext'\r\nimport StylesContext from '../../contexts/styles/stylesContext'\r\n\r\nimport ApiGeneral from '../../services/ApiGeneral'\r\nimport { registerUser } from '../../services/catalogoService'\r\n\r\nconst Container = styled.div`\r\n width: 100%;\r\n margin: 0 auto;\r\n\r\n /* Pantallas grandes (Desktop) */\r\n @media (min-width: 1024px) {\r\n max-width: 480px;\r\n }\r\n\r\n /* Tablets */\r\n @media (min-width: 768px) and (max-width: 1023px) {\r\n max-width: 50vw;\r\n }\r\n\r\n /* Tamaño intermedio entre móvil y tablet */\r\n @media (min-width: 600px) and (max-width: 767px) {\r\n max-width: 70vw;\r\n }\r\n\r\n /* Móviles */\r\n @media (max-width: 599px) {\r\n max-width: 100%;\r\n }\r\n`\r\n\r\nconst Form = styled.form`\r\n width: 100%;\r\n padding: 20px;\r\n border-radius: 0.6rem;\r\n background-color: #f5f5f5;\r\n\r\n /* Pantallas grandes (Desktop) */\r\n @media (min-width: 1024px) {\r\n border: 2px solid #f2f2f2;\r\n }\r\n\r\n /* Tablets */\r\n @media (min-width: 768px) and (max-width: 1023px) {\r\n border: 2px solid #f2f2f2;\r\n }\r\n\r\n /* Tamaño intermedio entre móvil y tablet */\r\n @media (min-width: 600px) and (max-width: 767px) {\r\n border: 1px solid #e0e0e0;\r\n }\r\n\r\n /* Móviles */\r\n @media (max-width: 599px) {\r\n border: none;\r\n background-color: #ffffff;\r\n }\r\n`\r\n\r\nconst Title = styled.div`\r\n text-align: center;\r\n font-size: 32px;\r\n font-weight: 600;\r\n`\r\n\r\nconst SubTitle = styled.div`\r\n text-align: center;\r\n font-size: 16px;\r\n font-weight: 400;\r\n`\r\n\r\nconst TextLink = styled.div`\r\n display: inline-block;\r\n font-weight: 600;\r\n cursor: pointer;\r\n`\r\n\r\nconst StyledDialogActions = styled(DialogActions)`\r\n padding-right: 2rem;\r\n`\r\n\r\nconst Signup = () => {\r\n const history = useHistory()\r\n const referer = history.location.state?.from\r\n\r\n const { UserState } = useContext(UserContext)\r\n const stylesContext = useContext(StylesContext)\r\n\r\n const [isVerifiedCaptcha, setIsVerifiedCaptcha] = useState(false)\r\n const [isLoading, setIsLoading] = useState(false)\r\n const [idTipoCliente, setIdTipoCliente] = useState(null)\r\n const [isAcceptTerms, setIsAcceptTerms] = useState(() => false)\r\n const [showPassword, setShowPassword] = useState(false)\r\n\r\n const togglePasswordVisibility = () => {\r\n setShowPassword(!showPassword)\r\n }\r\n\r\n const onVerify = () => {\r\n setIsVerifiedCaptcha(true)\r\n }\r\n\r\n const validationSchema = Yup.object({\r\n email: Yup.string()\r\n .email('Introduzca un correo electrónico válido')\r\n .matches(\r\n /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/,\r\n 'Introduzca un correo electrónico válido'\r\n )\r\n .required('El campo correo electrónico es requerido'),\r\n nombre: Yup.string()\r\n .max(150, 'El nombre debe tener un máximo de 150 caracteres.')\r\n .required('El campo nombre es requerido'),\r\n telefono: Yup.string()\r\n .min(10, 'El teléfono debe tener un mínimo de 10 caracteres.')\r\n // .max(10, 'El teléfono debe tener un máximo de 10 caracteres.')\r\n .matches(\r\n /^(\\+?\\d{1,3})?\\d{10}$/,\r\n 'El teléfono solo debe contener números'\r\n )\r\n .required('El campo teléfono es requerido.'),\r\n password: Yup.string()\r\n .min(8, 'La contraseña debe tener al menos 8 caracteres.')\r\n .matches(\r\n /[A-Z]/,\r\n 'La contraseña debe tener al menos una letra mayúscula.'\r\n )\r\n .matches(\r\n /[a-z]/,\r\n 'La contraseña debe tener al menos una letra minúscula.'\r\n )\r\n .matches(/\\d/, 'La contraseña debe tener al menos un número.')\r\n .matches(\r\n /[\\W_]/,\r\n 'La contraseña debe tener al menos un carácter especial.'\r\n )\r\n .required('El campo contraseña es requerido'),\r\n // aceptoTerminos: Yup.boolean().oneOf(\r\n // [false],\r\n // 'Debes aceptar los términos y condiciones'\r\n // ),\r\n })\r\n\r\n const formik = useFormik({\r\n initialValues: {\r\n idTipoCliente: null,\r\n nombre: '',\r\n email: '',\r\n telefono: '',\r\n password: '',\r\n aceptoTerminos: true,\r\n },\r\n validationSchema,\r\n onSubmit: async values => {\r\n setIsLoading(true)\r\n\r\n if (!isAcceptTerms) {\r\n Swal.fire({\r\n title: 'Acción requerida',\r\n text: 'Debes aceptar los términos y condiciones para proceder con la solicitud.',\r\n icon: 'warning',\r\n showConfirmButton: true,\r\n confirmButtonText: 'Aceptar',\r\n timer: 5000,\r\n timerProgressBar: true,\r\n })\r\n setIsLoading(false)\r\n return\r\n }\r\n\r\n if (!isVerifiedCaptcha) {\r\n Swal.fire({\r\n title: 'Verificación fallida',\r\n text: 'Por favor, asegúrate de haber completado la verificación del captcha correctamente.',\r\n icon: 'error',\r\n showConfirmButton: true,\r\n confirmButtonText: 'Verificar de nuevo',\r\n timer: 5000,\r\n timerProgressBar: true,\r\n })\r\n setIsLoading(false)\r\n return\r\n }\r\n\r\n try {\r\n const response = await registerUser(values)\r\n\r\n if (response.success) {\r\n Swal.fire({\r\n icon: 'success',\r\n title: '¡Registro Exitoso! 🎉',\r\n text: '¡Tu cuenta ha sido creada! Revisa tu correo electrónico para encontrar el código de verificación.',\r\n confirmButtonText: 'Ir a Verificar',\r\n allowOutsideClick: false, // Evita que cierren el modal haciendo clic fuera\r\n }).then(() => {\r\n history.push(`/verify-code?email=${values.email}`)\r\n })\r\n } else {\r\n Swal.fire({\r\n icon: 'error',\r\n title: '¡Oh no! Algo salió mal',\r\n text: response.message,\r\n confirmButtonText: 'Aceptar',\r\n allowOutsideClick: false,\r\n })\r\n }\r\n } catch (error) {\r\n // console.log('error', error)\r\n if (error.data) {\r\n const { success, message, statusCode, errorCode, additionalInfo } =\r\n error?.data\r\n\r\n console.error('Error en el registro:', message)\r\n if (statusCode === 'ClienteExistente') {\r\n Swal.fire({\r\n icon: 'warning',\r\n title: 'Correo electrónico ya registrado',\r\n text: 'El correo electrónico ya está registrado. Por favor, inicie sesión o recupere su contraseña.',\r\n confirmButtonText: 'Aceptar',\r\n })\r\n } else if (statusCode === 'ClientePendiente') {\r\n Swal.fire({\r\n icon: 'info',\r\n title: 'Verificación pendiente',\r\n text: 'Su cuenta está pendiente de verificación. Revise su correo electrónico para completar el proceso.',\r\n confirmButtonText: 'Aceptar',\r\n })\r\n } else {\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Error en el registro',\r\n text: 'Ocurrió un error durante el registro. Inténtelo nuevamente.',\r\n confirmButtonText: 'Aceptar',\r\n })\r\n }\r\n } else if (error.request) {\r\n // La solicitud fue hecha, pero no hubo respuesta del servidor\r\n console.error('No se recibió respuesta del servidor:', error.request)\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Error de conexión',\r\n text: 'No se recibió respuesta del servidor. Por favor, inténtelo de nuevo más tarde.',\r\n confirmButtonText: 'Aceptar',\r\n })\r\n } else {\r\n // Algo más ocurrió al configurar la solicitud que provocó un error\r\n console.error('Error al configurar la solicitud:', error.message)\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Error inesperado',\r\n text: 'Ocurrió un error inesperado. Intente nuevamente más tarde.',\r\n confirmButtonText: 'Aceptar',\r\n })\r\n }\r\n } finally {\r\n setIsLoading(false)\r\n }\r\n },\r\n })\r\n\r\n useEffect(() => {\r\n let isMounted = true\r\n\r\n const getTipoUsuario = async () => {\r\n try {\r\n const response = await ApiGeneral.getCFDI(4)\r\n if (isMounted) {\r\n console.log('getCFDI', response)\r\n const tipoClienteId = response.find(obj =>\r\n obj.descripcionCorta.includes('física')\r\n ).idGeneral\r\n setIdTipoCliente(tipoClienteId)\r\n }\r\n } catch (error) {\r\n console.error('Error obteniendo tipo de usuario:', error)\r\n }\r\n }\r\n\r\n getTipoUsuario()\r\n formik.handleReset()\r\n\r\n return () => {\r\n isMounted = false\r\n }\r\n }, [])\r\n\r\n useEffect(() => {\r\n if (idTipoCliente) {\r\n formik.setFieldValue('idTipoCliente', idTipoCliente)\r\n }\r\n }, [idTipoCliente])\r\n\r\n useEffect(() => {\r\n if (UserState.authenticated) {\r\n const isCheckoutProcess = JSON.parse(\r\n localStorage.getItem('isCheckoutProcess')\r\n )\r\n const redirectTo = isCheckoutProcess\r\n ? '/orden/tienda/pedido/compra/pago'\r\n : referer || '/'\r\n localStorage.setItem('isCheckoutProcess', JSON.stringify(false))\r\n history.push(redirectTo)\r\n }\r\n }, [UserState.authenticated])\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n )\r\n}\r\nexport default Signup\r\n\r\n// try {\r\n// const response = await registerUser(values)\r\n\r\n// if (response.success) {\r\n// // setAlert(response.success, 'success')\r\n\r\n// setTimeout(() => {\r\n// history.push(`/verify-code?email=${values.email}`)\r\n// }, 2000)\r\n// } else {\r\n// // setAlert(response.message, 'error')\r\n// // Swal(response)\r\n// // console.warn('el se de fetch response')\r\n// alert(response.message) // Puedes mostrar mensajes personalizados\r\n// }\r\n// } catch (error) {\r\n\r\n// // // setAlert('Error al verificar el código.', 'error')\r\n// // console.error('registerUser(values)', error?.response?.data?.message)\r\n// // // Swal.fire('error catch', error?.response?.data?.message, 'error')\r\n// // if (error.response && error.response.status === 400) {\r\n// // console.log('catch error if', error.response)\r\n// // }\r\n\r\n// // v2\r\n// // if (error.response && error.response.status === 400) {\r\n// // // Acceder a los datos de la respuesta cuando hay un error 400\r\n// // const { success, message, statusCode, errorCode, additionalInfo } =\r\n// // error.response.data\r\n\r\n// // console.error('Error en el registro:', message)\r\n// // // Usar los datos para mostrar un mensaje personalizado en el frontend\r\n// // if (statusCode === 'ClienteExistente') {\r\n// // alert(\r\n// // 'El correo ya está registrado. Por favor, inicie sesión o recupere su contraseña.'\r\n// // )\r\n// // } else if (statusCode === 'ClientePendiente') {\r\n// // alert(\r\n// // 'Su cuenta está pendiente de verificación. Revise su correo para completar el proceso.'\r\n// // )\r\n// // } else {\r\n// // alert('Ocurrió un error durante el registro. Inténtelo nuevamente.')\r\n// // }\r\n// // } else {\r\n// // // Manejar otros errores que no sean 400\r\n// // console.error('Error inesperado:', error)\r\n// // alert('Ocurrió un error inesperado. Intente nuevamente más tarde.')\r\n// // }\r\n\r\n// // // v3\r\n// // if (error.response) {\r\n// // // Confirmar que el error tiene una respuesta del servidor\r\n// // const { success, message, statusCode, errorCode, additionalInfo } =\r\n// // error.response.data\r\n\r\n// // console.error('Error en el registro:', message)\r\n// // if (statusCode === 'ClienteExistente') {\r\n// // alert(\r\n// // 'El correo ya está registrado. Por favor, inicie sesión o recupere su contraseña.'\r\n// // )\r\n// // } else if (statusCode === 'ClientePendiente') {\r\n// // alert(\r\n// // 'Su cuenta está pendiente de verificación. Revise su correo para completar el proceso.'\r\n// // )\r\n// // } else {\r\n// // alert('Ocurrió un error durante el registro. Inténtelo nuevamente.')\r\n// // }\r\n// // } else if (error.request) {\r\n// // // La solicitud fue hecha, pero no hubo respuesta del servidor\r\n// // console.error('No se recibió respuesta del servidor:', error.request)\r\n// // alert(\r\n// // 'No se recibió respuesta del servidor. Por favor, inténtelo de nuevo más tarde.'\r\n// // )\r\n// // } else {\r\n// // // Algo más ocurrió al configurar la solicitud que provocó un error\r\n// // console.error('Error al configurar la solicitud:', error.message)\r\n// // alert('Ocurrió un error inesperado. Intente nuevamente más tarde.')\r\n// // }\r\n\r\n// // v4\r\n// // Manejo de errores HTTP\r\n// if (error.response) {\r\n// // Confirmar que el error tiene una respuesta del servidor\r\n// const { success, message, statusCode, errorCode, additionalInfo } =\r\n// error.response.data\r\n\r\n// console.error('Error en el registro:', message)\r\n// if (statusCode === 'ClienteExistente') {\r\n// alert(\r\n// 'El correo ya está registrado. Por favor, inicie sesión o recupere su contraseña.'\r\n// )\r\n// } else if (statusCode === 'ClientePendiente') {\r\n// alert(\r\n// 'Su cuenta está pendiente de verificación. Revise su correo para completar el proceso.'\r\n// )\r\n// } else {\r\n// alert('Ocurrió un error durante el registro. Inténtelo nuevamente.')\r\n// }\r\n// } else if (error.request) {\r\n// // La solicitud fue hecha, pero no hubo respuesta del servidor\r\n// console.error('No se recibió respuesta del servidor:', error.request)\r\n// alert(\r\n// 'No se recibió respuesta del servidor. Por favor, inténtelo de nuevo más tarde.'\r\n// )\r\n// } else {\r\n// // Algo más ocurrió al configurar la solicitud que provocó un error\r\n// console.error('Error al configurar la solicitud:', error.message)\r\n// alert('Ocurrió un error inesperado. Intente nuevamente más tarde.')\r\n// }\r\n// } finally {\r\n// setIsLoading(false)\r\n// }\r\n// }\r\n","import React, { useContext, useState, useEffect } from 'react'\r\nimport { useHistory, useLocation } from 'react-router-dom'\r\nimport styled from 'styled-components'\r\nimport { useFormik } from 'formik'\r\nimport * as Yup from 'yup'\r\nimport Swal from 'sweetalert2'\r\nimport {\r\n Button,\r\n TextField,\r\n DialogContent,\r\n DialogActions,\r\n} from '@material-ui/core'\r\n\r\nimport {\r\n verifyCode,\r\n resendVerificationCode,\r\n} from '../../services/catalogoService'\r\n\r\nconst Container = styled.div`\r\n width: 100%;\r\n min-heigth: 360px;\r\n margin: 0 auto;\r\n\r\n /* Pantallas grandes (Desktop) */\r\n @media (min-width: 1024px) {\r\n max-width: 480px;\r\n }\r\n\r\n /* Tablets */\r\n @media (min-width: 768px) and (max-width: 1023px) {\r\n max-width: 50vw;\r\n }\r\n\r\n /* Tamaño intermedio entre móvil y tablet */\r\n @media (min-width: 600px) and (max-width: 767px) {\r\n max-width: 70vw;\r\n }\r\n\r\n /* Móviles */\r\n @media (max-width: 599px) {\r\n max-width: 100%;\r\n }\r\n`\r\n\r\nconst Form = styled.form`\r\n width: 100%;\r\n padding: 20px;\r\n border-radius: 0.6rem;\r\n background-color: #f5f5f5;\r\n\r\n /* Pantallas grandes (Desktop) */\r\n @media (min-width: 1024px) {\r\n border: 2px solid #f2f2f2;\r\n }\r\n\r\n /* Tablets */\r\n @media (min-width: 768px) and (max-width: 1023px) {\r\n border: 2px solid #f2f2f2;\r\n }\r\n\r\n /* Tamaño intermedio entre móvil y tablet */\r\n @media (min-width: 600px) and (max-width: 767px) {\r\n border: 1px solid #e0e0e0;\r\n }\r\n\r\n /* Móviles */\r\n @media (max-width: 599px) {\r\n border: none;\r\n background-color: #ffffff;\r\n }\r\n`\r\n\r\nconst Title = styled.div`\r\n text-align: center;\r\n font-size: 32px;\r\n font-weight: 600;\r\n`\r\n\r\nconst StyledDialogActions = styled(DialogActions)`\r\n padding-right: 2rem;\r\n`\r\n\r\nconst VerifyCode = () => {\r\n const history = useHistory()\r\n\r\n const [isLoading, setIsLoading] = useState(false)\r\n\r\n // Recuperar el correo electrónico desde los parámetros de la URL\r\n const query = new URLSearchParams(useLocation().search)\r\n const emailFromUrl = query.get('email')\r\n const codeFromUrl = query.get('code')\r\n\r\n const formik = useFormik({\r\n initialValues: {\r\n email: emailFromUrl || '',\r\n password: codeFromUrl || '',\r\n },\r\n validationSchema: Yup.object({\r\n email: Yup.string().email('Correo inválido').required('Correo requerido'),\r\n verificationCode: Yup.string().required(\r\n 'El código de verificación es requerido'\r\n ),\r\n }),\r\n onSubmit: async values => {\r\n setIsLoading(true)\r\n try {\r\n const response = await verifyCode({\r\n email: values.email,\r\n codigoVerificacion: values.verificationCode,\r\n })\r\n\r\n if (response.success) {\r\n // Mostrar mensaje de éxito con SweetAlert2 y redirigir al inicio de sesión\r\n Swal.fire({\r\n icon: 'success',\r\n title: '¡Verificación exitosa!',\r\n text: 'Tu cuenta ha sido activada. Ahora puedes iniciar sesión.',\r\n confirmButtonText: 'Ir a Iniciar Sesión',\r\n allowOutsideClick: false,\r\n }).then(() => {\r\n // Redirigir al usuario a la página de inicio de sesión\r\n // TODO: hacer login automaticamente\r\n history.push('/signin')\r\n })\r\n } else {\r\n Swal.fire({\r\n icon: 'error',\r\n title: '¡Oh no! Algo salió mal',\r\n text: response.message,\r\n confirmButtonText: 'Aceptar',\r\n allowOutsideClick: false,\r\n })\r\n }\r\n } catch (error) {\r\n if (error.data) {\r\n const { success, message, statusCode, errorCode, additionalInfo } =\r\n error?.data\r\n\r\n switch (statusCode) {\r\n case 'ClienteNoExistente':\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Correo no encontrado',\r\n text: 'No se encontró un registro para el correo proporcionado. Por favor, verifica e intenta de nuevo.',\r\n confirmButtonText: 'Aceptar',\r\n })\r\n break\r\n\r\n case 'CodigoVerificacionInvalido':\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Código incorrecto',\r\n text: 'El código de verificación ingresado es incorrecto. Por favor, verifica e intenta nuevamente.',\r\n confirmButtonText: 'Aceptar',\r\n })\r\n break\r\n\r\n case 'CodigoVerificacionExpirado':\r\n Swal.fire({\r\n icon: 'warning',\r\n title: 'Código expirado',\r\n text: 'El código de verificación ha expirado. ¿Deseas solicitar uno nuevo?',\r\n confirmButtonText: 'Reenviar Código',\r\n showCancelButton: true,\r\n cancelButtonText: 'Cancelar',\r\n allowOutsideClick: false,\r\n }).then(async result => {\r\n if (result.isConfirmed) {\r\n // Llamar a la función para reenviar el código\r\n setIsLoading(true)\r\n try {\r\n const resendResponse = await resendVerificationCode(\r\n values.email\r\n )\r\n if (resendResponse.success) {\r\n Swal.fire({\r\n icon: 'success',\r\n title: 'Código reenviado',\r\n text: 'Se ha enviado un nuevo código de verificación a tu correo.',\r\n confirmButtonText: 'Aceptar',\r\n })\r\n } else {\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Error al reenviar',\r\n text:\r\n resendResponse.message ||\r\n 'Ocurrió un error al intentar reenviar el código.',\r\n confirmButtonText: 'Aceptar',\r\n })\r\n }\r\n } catch (error) {\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Error inesperado',\r\n text: 'No se pudo reenviar el código de verificación. Por favor, inténtelo más tarde.',\r\n confirmButtonText: 'Aceptar',\r\n })\r\n } finally {\r\n setIsLoading(false)\r\n }\r\n }\r\n })\r\n break\r\n\r\n default:\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Error en la verificación',\r\n text:\r\n error.request ||\r\n 'Ocurrió un error durante la verificación. Inténtelo nuevamente.',\r\n confirmButtonText: 'Aceptar',\r\n })\r\n }\r\n } else {\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Error inesperado',\r\n text: 'Ocurrió un error al verificar el código. Inténtelo nuevamente más tarde.',\r\n confirmButtonText: 'Aceptar',\r\n })\r\n }\r\n } finally {\r\n setIsLoading(false)\r\n }\r\n },\r\n })\r\n\r\n // Si el código está en la URL, verificar automáticamente\r\n useEffect(() => {\r\n if (emailFromUrl && codeFromUrl) {\r\n formik.setFieldValue('email', emailFromUrl)\r\n formik.setFieldValue('verificationCode', codeFromUrl)\r\n formik.handleSubmit() // Intentar verificación automática\r\n }\r\n }, [emailFromUrl, codeFromUrl])\r\n\r\n return (\r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport default VerifyCode\r\n","import React, { useEffect, useState } from 'react'\r\nimport styled from 'styled-components'\r\nimport { useFormik } from 'formik'\r\nimport * as Yup from 'yup'\r\nimport { RecoveryPassword } from '../../services/catalogoService'\r\nimport Swal from 'sweetalert2'\r\nimport axios from 'axios'\r\nimport {\r\n Button,\r\n TextField,\r\n DialogContent,\r\n DialogActions,\r\n DialogContentText,\r\n} from '@material-ui/core'\r\nimport LoadingScreen from '../../components/RegistroCliente/LoadingScreen'\r\n\r\nconst Container = styled.div`\r\n width: 100%;\r\n min-height: 360px;\r\n margin: 0 auto;\r\n\r\n /* Pantallas grandes (Desktop) */\r\n @media (min-width: 1024px) {\r\n max-width: 480px;\r\n }\r\n\r\n /* Tablets */\r\n @media (min-width: 768px) and (max-width: 1023px) {\r\n max-width: 50vw;\r\n }\r\n\r\n /* Tamaño intermedio entre móvil y tablet */\r\n @media (min-width: 600px) and (max-width: 767px) {\r\n max-width: 70vw;\r\n }\r\n\r\n /* Móviles */\r\n @media (max-width: 599px) {\r\n max-width: 100%;\r\n }\r\n`\r\n\r\nconst Form = styled.form`\r\n width: 100%;\r\n padding: 20px;\r\n border-radius: 0.6rem;\r\n background-color: #f5f5f5;\r\n\r\n /* Pantallas grandes (Desktop) */\r\n @media (min-width: 1024px) {\r\n border: 2px solid #f2f2f2;\r\n }\r\n\r\n /* Tablets */\r\n @media (min-width: 768px) and (max-width: 1023px) {\r\n border: 2px solid #f2f2f2;\r\n }\r\n\r\n /* Tamaño intermedio entre móvil y tablet */\r\n @media (min-width: 600px) and (max-width: 767px) {\r\n border: 1px solid #e0e0e0;\r\n }\r\n\r\n /* Móviles */\r\n @media (max-width: 599px) {\r\n border: none;\r\n background-color: #ffffff;\r\n }\r\n`\r\n\r\nconst Title = styled.div`\r\n text-align: center;\r\n font-size: 32px;\r\n font-weight: 600;\r\n`\r\n\r\nconst RequestRecoveryPassword = () => {\r\n const [isSubmitted, setIsSubmitted] = useState(false)\r\n const [isLoading, setIsLoading] = useState(false)\r\n const [isEmailFromParams, setIsEmailFromParams] = useState(false)\r\n const controller = new AbortController()\r\n\r\n // Validación con Yup\r\n const validationSchema = Yup.object({\r\n email: Yup.string()\r\n .email('Correo electrónico inválido')\r\n .matches(\r\n /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/,\r\n 'Introduzca un correo electrónico válido'\r\n )\r\n .required('Correo electrónico requerido'),\r\n })\r\n\r\n // Función para obtener la IP del usuario\r\n const getIPAddress = async () => {\r\n try {\r\n const res = await axios.get(\r\n 'https://cors-anywhere.herokuapp.com/https://api.ipify.org?format=json'\r\n )\r\n return res.data.ip\r\n } catch {\r\n return '0.0.0.0'\r\n }\r\n }\r\n\r\n // Hook de Formik para manejar el formulario y validación\r\n const formik = useFormik({\r\n initialValues: {\r\n email: '',\r\n },\r\n validationSchema,\r\n onSubmit: async values => {\r\n await sendRecoveryEmail(values.email)\r\n },\r\n })\r\n\r\n // Función para enviar el correo de recuperación\r\n const sendRecoveryEmail = async email => {\r\n setIsLoading(true)\r\n\r\n try {\r\n const response = await RecoveryPassword(controller.signal, {\r\n email,\r\n ipAddress: await getIPAddress(),\r\n userAgent: navigator.userAgent,\r\n })\r\n\r\n setIsLoading(false)\r\n\r\n console.log(response)\r\n\r\n if (response.success) {\r\n setIsSubmitted(true)\r\n Swal.fire({\r\n title: 'Correo enviado',\r\n text: response.message,\r\n icon: 'success',\r\n confirmButtonText: 'Aceptar',\r\n })\r\n } else {\r\n Swal.fire({\r\n icon: 'error',\r\n title: '¡Oh no! Algo salió mal',\r\n text: response.message,\r\n confirmButtonText: 'Aceptar',\r\n allowOutsideClick: false,\r\n })\r\n }\r\n } catch (error) {\r\n setIsLoading(false)\r\n if (error.response) {\r\n const { success, message, statusCode, errorCode, additionalInfo } =\r\n error?.response.data\r\n\r\n Swal.fire({\r\n title: 'Error',\r\n text: message,\r\n icon: 'error',\r\n confirmButtonText: 'Aceptar',\r\n })\r\n } else {\r\n Swal.fire({\r\n title: 'Error',\r\n text: 'Error al procesar la solicitud. Inténtelo de nuevo.',\r\n icon: 'error',\r\n confirmButtonText: 'Aceptar',\r\n })\r\n }\r\n }\r\n }\r\n\r\n // Obtener el email de los params al cargar el componente\r\n useEffect(() => {\r\n const params = new URLSearchParams(window.location.search)\r\n const emailFromParams = params.get('email')\r\n\r\n if (emailFromParams) {\r\n formik.setFieldValue('email', emailFromParams)\r\n setIsEmailFromParams(true)\r\n sendRecoveryEmail(emailFromParams)\r\n }\r\n }, [])\r\n\r\n return (\r\n \r\n \r\n {!isSubmitted ? (\r\n \r\n ) : (\r\n
\r\n
Enlace de recuperación enviado
\r\n
\r\n Hemos enviado un correo electrónico a la dirección proporcionada con\r\n un enlace para restablecer tu contraseña. Por favor, revisa tu\r\n bandeja de entrada y sigue las instrucciones.\r\n
\r\n
\r\n )}\r\n \r\n )\r\n}\r\n\r\nexport default RequestRecoveryPassword\r\n","import React, { useEffect, useState } from 'react'\r\nimport { useHistory } from 'react-router-dom'\r\nimport styled from 'styled-components'\r\nimport { useFormik } from 'formik'\r\nimport * as Yup from 'yup'\r\nimport Swal from 'sweetalert2'\r\n\r\nimport { Visibility, VisibilityOff } from '@mui/icons-material'\r\nimport {\r\n Button,\r\n TextField,\r\n DialogContent,\r\n DialogActions,\r\n DialogContentText,\r\n InputAdornment,\r\n IconButton,\r\n} from '@material-ui/core' // TODO: from '@mui/material'\r\n\r\nimport { RequestResetPassword } from '../../services/catalogoService'\r\n\r\nconst Container = styled.div`\r\n width: 100%;\r\n min-heigth: 360px;\r\n margin: 0 auto;\r\n\r\n /* Pantallas grandes (Desktop) */\r\n @media (min-width: 1024px) {\r\n max-width: 480px;\r\n }\r\n\r\n /* Tablets */\r\n @media (min-width: 768px) and (max-width: 1023px) {\r\n max-width: 50vw;\r\n }\r\n\r\n /* Tamaño intermedio entre móvil y tablet */\r\n @media (min-width: 600px) and (max-width: 767px) {\r\n max-width: 70vw;\r\n }\r\n\r\n /* Móviles */\r\n @media (max-width: 599px) {\r\n max-width: 100%;\r\n }\r\n`\r\n\r\nconst Form = styled.form`\r\n width: 100%;\r\n padding: 20px;\r\n border-radius: 0.6rem;\r\n background-color: #f5f5f5;\r\n\r\n /* Pantallas grandes (Desktop) */\r\n @media (min-width: 1024px) {\r\n border: 2px solid #f2f2f2;\r\n }\r\n\r\n /* Tablets */\r\n @media (min-width: 768px) and (max-width: 1023px) {\r\n border: 2px solid #f2f2f2;\r\n }\r\n\r\n /* Tamaño intermedio entre móvil y tablet */\r\n @media (min-width: 600px) and (max-width: 767px) {\r\n border: 1px solid #e0e0e0;\r\n }\r\n\r\n /* Móviles */\r\n @media (max-width: 599px) {\r\n border: none;\r\n background-color: #ffffff;\r\n }\r\n`\r\n\r\nconst Title = styled.div`\r\n text-align: center;\r\n font-size: 32px;\r\n font-weight: 600;\r\n`\r\n\r\nconst StyledDialogActions = styled(DialogActions)`\r\n padding-right: 2rem;\r\n`\r\n\r\nconst ResetPassword = () => {\r\n const history = useHistory()\r\n\r\n const [showPassword, setShowPassword] = useState(false)\r\n const [showConfirmPassword, setShowConfirmPassword] = useState(false)\r\n const controller = new AbortController()\r\n\r\n // Capturar el token desde los parámetros de la URL\r\n const urlParams = new URLSearchParams(window.location.search)\r\n const token = urlParams.get('token')\r\n\r\n useEffect(() => {\r\n return () => {\r\n controller.abort()\r\n }\r\n }, [])\r\n\r\n // Configuración de Yup para validación\r\n const validationSchema = Yup.object({\r\n password: Yup.string()\r\n .min(8, 'La contraseña debe tener al menos 8 caracteres.')\r\n .matches(\r\n /[A-Z]/,\r\n 'La contraseña debe tener al menos una letra mayúscula.'\r\n )\r\n .matches(\r\n /[a-z]/,\r\n 'La contraseña debe tener al menos una letra minúscula.'\r\n )\r\n .matches(/\\d/, 'La contraseña debe tener al menos un número.')\r\n .matches(\r\n /[\\W_]/,\r\n 'La contraseña debe tener al menos un carácter especial.'\r\n )\r\n .required('El campo contraseña es requerido'),\r\n confirmPassword: Yup.string()\r\n .oneOf([Yup.ref('password'), null], 'Las contraseñas deben coincidir')\r\n .required('El campo confirmación de contraseña es requerido'),\r\n })\r\n\r\n // Configuración del formulario con Formik\r\n const formik = useFormik({\r\n initialValues: {\r\n password: '',\r\n confirmPassword: '',\r\n },\r\n validationSchema,\r\n onSubmit: async values => {\r\n try {\r\n const response = await RequestResetPassword(controller.signal, {\r\n token,\r\n newPassword: values.password,\r\n })\r\n\r\n if (response.success) {\r\n Swal.fire({\r\n title: 'Contraseña restablecida',\r\n text: 'Tu contraseña ha sido actualizada exitosamente.',\r\n icon: 'success',\r\n confirmButtonText: 'Iniciar sesión',\r\n }).then(() => {\r\n history.push('/signin')\r\n })\r\n } else {\r\n Swal.fire({\r\n title: 'Error',\r\n text:\r\n response.message ||\r\n 'Hubo un problema al actualizar la contraseña.',\r\n icon: 'error',\r\n confirmButtonText: 'Aceptar',\r\n })\r\n }\r\n } catch (error) {\r\n if (error?.response?.data) {\r\n const { success, message, statusCode, errorCode, additionalInfo } =\r\n error?.response?.data\r\n\r\n switch (errorCode) {\r\n case 'INVALID_TOKEN':\r\n Swal.fire({\r\n title: 'Token inválido o expirado',\r\n text: 'El enlace de restablecimiento es inválido o ha expirado.',\r\n icon: 'error',\r\n confirmButtonText: 'Aceptar',\r\n })\r\n break\r\n case 'USER_NOT_FOUND':\r\n Swal.fire({\r\n title: 'Usuario no encontrado',\r\n text: 'No se encontró un usuario asociado a este token.',\r\n icon: 'error',\r\n confirmButtonText: 'Aceptar',\r\n })\r\n break\r\n case 'INTERNAL_SERVER_ERROR':\r\n Swal.fire({\r\n title: 'Error del servidor',\r\n text: 'Ocurrió un error al procesar la solicitud. Por favor, inténtelo de nuevo más tarde.',\r\n icon: 'error',\r\n confirmButtonText: 'Aceptar',\r\n })\r\n break\r\n default:\r\n Swal.fire({\r\n title: 'Error',\r\n text: 'No se pudo procesar la solicitud. Inténtelo más tarde.',\r\n icon: 'error',\r\n confirmButtonText: 'Aceptar',\r\n })\r\n break\r\n }\r\n } else {\r\n Swal.fire({\r\n title: 'Error',\r\n text: 'No se pudo procesar la solicitud. Inténtelo más tarde.',\r\n icon: 'error',\r\n confirmButtonText: 'Aceptar',\r\n })\r\n }\r\n }\r\n },\r\n })\r\n\r\n // Funciones para alternar visibilidad de contraseña\r\n const togglePasswordVisibility = () => setShowPassword(prev => !prev)\r\n const toggleConfirmPasswordVisibility = () =>\r\n setShowConfirmPassword(prev => !prev)\r\n\r\n return (\r\n \r\n \r\n \r\n Restablecer Contraseña\r\n \r\n\r\n \r\n \r\n \r\n \r\n {showPassword ? : }\r\n \r\n \r\n ),\r\n }}\r\n />\r\n \r\n \r\n {showConfirmPassword ? : }\r\n \r\n \r\n ),\r\n }}\r\n />\r\n \r\n \r\n\r\n \r\n \r\n Restablecer Contraseña\r\n \r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport default ResetPassword\r\n","import React from 'react'\n\nexport default function DetailsThumb({ images, setIndex }) {\n return (\n
\r\n )\r\n}\r\n/* {context.carts.length !== 0 && (\r\n Proceder con pago\r\n )}*/\r\n//export default procederPago;\r\n\r\n/**/\r\n","import Grid from '@material-ui/core/Grid'\r\nimport Ofertas from '../../components/Ofertas/Ofertas'\r\nimport Cvendido from '../../components/Vendido/Cvendido'\r\nimport BannerExample from '../Banner/BannerExample'\r\nimport General from '../../Views/General/General'\r\nimport ProcederPago from '../../components/Cart/procederPago'\r\nimport { useEffect } from 'react'\r\n\r\nexport default function ArticulosCarrito() {\r\n useEffect(() => {\r\n window.scrollTo(0, 0)\r\n }, [])\r\n\r\n return (\r\n
\r\n )\r\n ) : pedido?.estatusId >= 2 ? (\r\n '' /**/\r\n ) : (\r\n \r\n La factura podrá ser solicitada una vez que el pago de su\r\n pedido se haya efectuado.\r\n \r\n )}\r\n \r\n \r\n {pedido?.estatusId < 7 && (\r\n \r\n )}\r\n \r\n \r\n
\r\n Tarimas de transporte\r\n \r\n \r\n \r\n {`Los productos de las siguientes familias requieren ser transportados en tarimas para evitar daños: `}\r\n {totales?.familiasConTarima.map(x => (\r\n \r\n {`-${x}`}\r\n \r\n ))}\r\n \r\n Para más información, favor de contactarnos.\r\n \r\n \r\n \r\n \r\n }\r\n >\r\n \r\n \r\n
\r\n
\r\n Cantidad de tarimas: {totales?.tarimas}\r\n
\r\n
\r\n Peso en tarimas: {totales?.pesoEnTarimas?.toFixed(2)} Kg\r\n
\r\n \r\n {`Emplayado (${totales.ptjeEmplayado})`}\r\n \r\n \r\n \r\n {`Los productos de las siguientes familias requieren ser emplayados para evitar daños: `}\r\n {totales?.familiasConEmplayado &&\r\n totales?.familiasConEmplayado.map(x => (\r\n \r\n {`-${x}`}\r\n \r\n ))}\r\n \r\n Para más información, favor de contactarnos.\r\n \r\n \r\n \r\n \r\n }\r\n >\r\n \r\n \r\n \r\n \r\n {' '}\r\n MXN\r\n \r\n
\r\n ) : (\r\n \r\n )}\r\n
\r\n )\r\n const getSeguroCargaInfo = () => (\r\n
\r\n {totales.costoSeguro > 0 && (\r\n
\r\n \r\n {`Seguro de carga`}\r\n \r\n \r\n \r\n {`*Por disposición de tu pedido, se estará aplicando un costo adicional del ${totales.ptjeSeguro} de seguro de carga en el total de tu compra.`}\r\n \r\n \r\n \r\n }\r\n >\r\n \r\n \r\n \r\n \r\n {' '}\r\n MXN\r\n \r\n
\r\n // \r\n // {`Seguro de carga`}\r\n // \r\n // \r\n // \r\n // {`*Por disposición de tu pedido, se estará aplicando un costo adicional del ${totales?.ptjeSeguro} de seguro de carga en el total de tu compra.`}\r\n // \r\n // \r\n // \r\n // }\r\n // >\r\n // \r\n // \r\n // \r\n // \r\n // {' '}\r\n // MXN\r\n // \r\n //
\r\n