FrontPastel/frontend/src/Pasteles/PastelFrambuesa.jsx

520 lines
15 KiB
JavaScript

import React, {useEffect, useState} from "react";
import { RiCustomerService2Fill } from "react-icons/ri";
import { FaUser } from "react-icons/fa";
import { LuShoppingBasket } from "react-icons/lu";
import { FaMagnifyingGlass } from "react-icons/fa6";
import { CiHeart } from "react-icons/ci";
import { FaRegEye } from "react-icons/fa";
import { CiShare2 } from "react-icons/ci";
import { useNavigate } from "react-router-dom";
import './ChocolateBlanco.css';
import Swal from 'sweetalert2'
import axios from 'axios';
import StarRatings from 'react-star-ratings';
function PastelFrambuesa() {
const navigate = useNavigate();
const [datosFormulario, setDatosFormulario] = useState(
{correo: '',
password: '',
nombre: ''
});
const redirectPersonalizarPastelArcoiris = () => {
// Redirige a la página del hotel cuando se hace clic en el botón
navigate("/PersonalizarPastel/PastelArcoiris");
};
const redirectToPedidos = () => {
navigate("/Pedidos");
};
const redirectToPasteles = () => {
navigate("/Pasteles");
};
const redirectInicio = () => {
// Redirige a la página del hotel cuando se hace clic en el botón
navigate("/");
};
const redirectToLogin = () => {
navigate("/Login");
};
const mostrarAlertaLogOut = () => {
Swal.fire({
title: "Cerrar Sesión",
text: "¿Seguro que quieres cerrar sesión?",
icon: "warning",
showCancelButton: true, // Mostrar el botón de cancelar
confirmButtonColor: "#3085d6", // Color del botón de confirmar
cancelButtonColor: "#d33", // Color del botón de cancelar
confirmButtonText: "Sí", // Texto del botón de confirmar
cancelButtonText: "No", // Texto del botón de cancelar
}).then((result) => {
if (result.isConfirmed) {
Swal.fire({
text: "Sesión cerrada correctamente. Adiós " + nombreUsuario + "",
icon: "success",
});
cerrarSesion();
}
});
};
const [nombreUsuario, setNombreUsuario]=useState("");
const obtenerNombreUsuario = async () => {
try {
// Realizar la llamada al backend para obtener el nombre del usuario
const response = await axios.post('http://localhost:4567/frontend/obtenerUsuario', { datosFormulario });
setNombreUsuario(response.data.nombre);
console.log(nombreUsuario);
} catch (error) {
// Manejar el error según tus necesidades
console.error("Error al obtener el nombre del usuario", error);
}
};
useEffect(() => {
// Llamar a la función al cargar la página
obtenerNombreUsuario();
obtenerReseñasPorPastel();
mostrarReseñas();
}, []);
const cerrarSesion = async () => {
try {
// Realizar la llamada al backend para obtener el nombre del usuario
const response = await axios.post('http://localhost:4567/frontend/cerrarSesion', { datosFormulario });
setNombreUsuario(response.data.nombre);
console.log(nombreUsuario);
obtenerNombreUsuario();
//mostrarAlertaLogOut();
} catch (error) {
// Manejar el error según tus necesidades
console.error("Error al obtener el nombre del usuario", error);
}
};
const mostrarAlertaReservaFallidaPers=()=>{
Swal.fire({
title: "Pedidos Info",
text: "No se encuentra disponible.",
icon: "info",
button: "Aceptar"
});
};
const mostrarAlertaReservaExitosa=()=>{
Swal.fire({
title: "Pedido Exitosa",
text: "Tu Pedido se ha realizado correctamente.",
icon: "success",
button: "Aceptar"
});
};
const hacerPedidoPastel1 = async () => {
try{
if(nombreUsuario==null){
mostrarAlertaPedidoFallidaLogin();
}else{
const response = await axios.post('http://localhost:4567/frontend/hacerPedidoPastel1', {
textoEncima: "",
textoCantidad: "12",
textoRelleno: "Vanilla Rainbow Cake",
textoTipo: "Pastel Frambuesa",
textoPrecio:"500",
idPastel: "7"
});
mostrarAlertaReservaExitosa();
}
}catch(error){
console.error("Error al hace el pedido");
throw error;
}
};
const [reseñas, setReseñas] = useState([]);
const [datosFormularioReseña, setDatosFormularioReseña] = useState(
{contenido: '',
estrellas: 5
});
const handleInputChange = (e) => {
const { name, value } = e.target;
setDatosFormularioReseña({
...datosFormularioReseña,
[name]: value,
});
};
const enviarReseña = async (e) => {
e.preventDefault();
await agregarReseña();
await obtenerReseñasPorPastel("7"); // Obtener las reseñas nuevamente para actualizar la lista
};
const agregarReseña = async () => {
console.log("Agregando reseña");
console.log(datosFormularioReseña.contenido);
console.log(datosFormularioReseña.estrellas);
console.log(nombreUsuario)
try{
if(nombreUsuario==null){
mostrarAlertaReseñaFallidaLogin();
}else{
const response = await axios.post('http://localhost:4567/frontend/agregarResenia', {
nombreUsuario: nombreUsuario,
idPastel: "7", // Asegúrate de tener el id del pastel
contenido: datosFormularioReseña.contenido,
estrellas: datosFormularioReseña.estrellas,
});
console.log(response.data);
//mostrarAlertaReseñaExitosa();
console.log("reseña exitosa");
console.log("")
// Limpiar los estados después de agregar la reseña
setDatosFormularioReseña({ contenido: "", estrellas: 0 });
}
}catch(error){
console.error("Error al agregar la reseña");
throw error;
}
};
const obtenerReseñasPorPastel = async (idPastel) => {
try {
const response = await axios.post('http://localhost:4567/frontend/obtenerReseniasPorPastel', {
idPastel: "7",
});
console.log("Reseñas obtenidas:", response.data.reseñas);
const reseñasTransformadas = response.data.reseñas.map(reseña => ({
idReseña: reseña.id_reseña,
nombreUsuario: reseña.nombre_usuario,
idPastel: reseña.id_pastel,
contenido: reseña.contenido,
estrellas: reseña.estrellas,
}));
setReseñas(reseñasTransformadas);
} catch (error) {
console.error("Error al obtener reseñas:", error);
}
};
const mostrarReseñas = () => {
if (!nombreUsuario) {
return (
<h1 className="IniSesReserva">Inicia Sesión para poder ver las reseñas.</h1>
);
} else {
if (reseñas.length === 0) {
return (
<h1 className="ReseñaNull">No hay reseñas para este pastel en este momento.</h1>
);
} else {
return (
<div className="flex justify-center space-x-4">
{reseñas.map(reseña => (
<div key={reseña.idReseña} className="customer-review-card">
<div className="customer-review-info">
<img className="customer-review-avatar" src="https://placehold.co/100x100" />
<div>
<div className="customer-review-name">{reseña.nombreUsuario}</div>
</div>
</div>
<div className="customer-review-rating">
{"★".repeat(reseña.estrellas)}{"☆".repeat(5 - reseña.estrellas)}
</div>
<p className="customer-review-content">
{reseña.contenido}
</p>
</div>
))}
</div>
);
}
}
};
return (
<>
<header>
<div className="container-hero">
<div className="container hero">
<div className="customer-support">
<RiCustomerService2Fill className="icono-cliente" />
<div className="content-customer-support">
<span className="text">Soporte al cliente</span>
<span className="number">123-456-7890</span>
</div>
</div>
<div className="container-logo">
<i className="fa-solid fa-mug-hot"></i>
<h1 className="logo"><a href="/">Pasteleria RAPI</a></h1>
</div>
<div className="container-user">
<FaUser className="icono-User"/>
<div className="content-shopping-cart">
</div>
</div>
</div>
</div>
<div className="container-navbar">
<nav className="navbar container">
<i className="fa-solid fa-bars"></i>
<ul className="menu">
<li><a href="#" onClick={redirectInicio}>Inicio</a></li>
<li><a href="#" onClick={redirectToPasteles} >Pasteles</a></li>
<li><a href="#" onClick={redirectPersonalizarPastelArcoiris}>Personalizar Pastel</a></li>
<li><a href="/Pedidos" onClick={redirectToPedidos}>Pedidos</a></li>
<li><a href="#">Blog</a></li>
{nombreUsuario ? (
<>
<li className="enlaceNombre"><a href="#">{nombreUsuario}</a></li>
<li className="enlaceNombre2"><a href="#" onClick={mostrarAlertaLogOut}>Cerrar Sesión</a></li>
</>
) : (
<li className="enlaceNombre2"><a href="#" onClick={redirectToLogin}>Iniciar Sesión</a></li>
)
}
</ul>
<form className="search-form">
<input type="search" placeholder="Buscar..." />
<button className="btn-search">
<FaMagnifyingGlass className="icono-lupa" />
</button>
</form>
</nav>
</div>
</header>
<main className = "main-pers-pastel">
<div className="container-img-6" >
{}
</div>
<div className="container-info-product">
<div className="container-price">
<h1 className="titulo-Pastel">Pastel De Frambuesa</h1>
<i className="fa-solid fa-angle-right"></i>
</div>
<div className="container-details-product">
<div className="form-group">
<div className="OpcionesPers">
<h2 className="textPersPastel">Precio:</h2><p className="pastel-Type1"><strong>$500</strong></p>
<h2 className="textPersPastel">Tamaño:</h2><p className="pastel-Type1"><strong>Grande</strong></p>
<h2 className="textPersPastel">Relleno:</h2><p className="pastel-Type1"><strong>Vanilla Rainbow Cake</strong></p>
<div className="mb-4">
</div>
<div className="mb-6">
</div>
</div>
</div>
</div>
<div className="container-add-cart">
<button className="btn-add-to-cart" onClick={hacerPedidoPastel1}>
<i className="fa-solid fa-plus"></i>
Comprar
</button>
</div>
<div className="container-description">
<div className="title-description">
<h4>Descripción</h4>
<i className="fa-solid fa-chevron-down"></i>
</div>
<div className="text-description">
<p>
Este es un delicioso pastel de terciopelo rojo con glaseado blanco y chispas. El pastel es de un color rojo intenso y tiene una textura suave y húmeda. El glaseado blanco es cremoso y dulce, y las chispas añaden un toque de color y diversión.
</p>
</div>
</div>
<div className="container-additional-information">
<div className="title-additional-information">
<h4>Información adicional</h4>
<i className="fa-solid fa-chevron-down"></i>
</div>
<div className="text-additional-information hidden">
<p>-----------</p>
</div>
</div>
<div className="container-reviews">
<div className="title-reviews">
<h4>Reseñas</h4>
<i className="fa-solid fa-chevron-down"></i>
</div>
<div className="text-reviews hidden">
<p>-----------</p>
</div>
</div>
</div>
</main>
<div className="Reseñas">
<h2 className="customer-reviews-title">Reseñas</h2>
<div className="estrellas-reviews-container">
<h1>Calificación:</h1>
<StarRatings
rating={datosFormularioReseña.estrellas}
starRatedColor="#4b1e29"
starHoverColor="#8B374A"
changeRating={(newRating) => setDatosFormularioReseña({...datosFormularioReseña, estrellas: newRating})}
numberOfStars={5}
name='rating'
starDimension="30px"
/>
</div>
<div className="customer-reviews-container">
<div className="reseñas-conteiner">
<input className="input-reseñas"
type="text"
name="contenido"
value={datosFormularioReseña.contenido}
onChange={handleInputChange}
placeholder="Escribe tu reseña aquí"></input>
<button className="boton-reseñas" onClick={enviarReseña}>Enviar</button>
</div>
{mostrarReseñas()}
</div>
</div>
<footer className="footer">
<div className="container container-footer">
<div className="menu-footer">
<div className="contact-info">
<p className="title-footer">Información de Contacto</p>
<ul>
<li>
Avenida Xalapa
</li>
<li>Teléfono: 2288520821</li>
<li>EmaiL: cdgn_17@hotmail.com</li>
</ul>
<div className="social-icons">
<span className="facebook">
<i className="fa-brands fa-facebook-f"></i>
</span>
<span className="twitter">
<i className="fa-brands fa-twitter"></i>
</span>
<span className="youtube">
<i className="fa-brands fa-youtube"></i>
</span>
<span className="pinterest">
<i className="fa-brands fa-pinterest-p"></i>
</span>
<span className="instagram">
<i className="fa-brands fa-instagram"></i>
</span>
</div>
</div>
<div className="information">
<p className="title-footer">Información</p>
<ul>
<li><a href="#">Acerca de Nosotros</a></li>
<li><a href="#">Información de Entrega</a></li>
<li><a href="#">Politicas de Privacidad</a></li>
<li><a href="#">Términos y condiciones</a></li>
<li><a href="#">Contactános</a></li>
</ul>
</div>
<div className="my-account">
<p className="title-footer">Mi cuenta</p>
<ul>
<li><a href="#">Mi cuenta</a></li>
<li><a href="#">Pedidos</a></li>
<li><a href="#">Boletín</a></li>
</ul>
</div>
</div>
<div className="copyright">
</div>
</div>
</footer>
</>
);
}
export default PastelFrambuesa;