From c35a0b755b787e1e0d7cbf9eadfc1998046f75cb Mon Sep 17 00:00:00 2001
From: Benito <zs22016070@estudiantes.uv.mx>
Date: Sun, 9 Mar 2025 20:45:25 -0600
Subject: [PATCH] =?UTF-8?q?Actualizaci=C3=B3n=20a=20la=20ventana=20Carrito?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
ventaboletos/src/pages/carrito.jsx | 72 +++++++++++++++++++++++++++---
1 file changed, 66 insertions(+), 6 deletions(-)
diff --git a/ventaboletos/src/pages/carrito.jsx b/ventaboletos/src/pages/carrito.jsx
index 6715cfb..7daf22e 100644
--- a/ventaboletos/src/pages/carrito.jsx
+++ b/ventaboletos/src/pages/carrito.jsx
@@ -1,27 +1,87 @@
import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
export default function Carrito() {
const [carrito, setCarrito] = useState([]);
+ const [showDialog, setShowDialog] = useState(false);
+ const [conciertoAEliminar, setConciertoAEliminar] = useState(null);
+ const router = useRouter();
useEffect(() => {
const carritoGuardado = JSON.parse(localStorage.getItem("carrito")) || [];
setCarrito(carritoGuardado);
}, []);
+ const eliminarConcierto = () => {
+ if (conciertoAEliminar !== null) {
+ const nuevoCarrito = carrito.filter((_, index) => index !== conciertoAEliminar);
+ localStorage.setItem("carrito", JSON.stringify(nuevoCarrito));
+ setCarrito(nuevoCarrito);
+ setShowDialog(false);
+ }
+ };
+
+ const calcularTotal = () => {
+ return carrito.reduce((total, item) => total + (item.precio || 0), 0);
+ };
+
return (
- <div className="p-4 max-w-3xl mx-auto">
+ <div className="p-4 max-w-3xl mx-auto bg-gray-900 text-white rounded-lg shadow-lg">
<h2 className="text-2xl font-bold mb-4">Carrito de Compras</h2>
{carrito.length === 0 ? (
- <p className="text-gray-600">No hay conciertos en el carrito.</p>
+ <p className="text-gray-400">No hay conciertos en el carrito.</p>
) : (
carrito.map((item, index) => (
- <div key={index} className="border p-4 mb-2 rounded-lg">
- <p className="text-lg font-semibold">{item.nombre}</p>
- <p className="text-sm text-gray-600">Fecha: {item.fecha}</p>
- <p className="text-sm text-gray-600">Asiento: {item.asiento}</p>
+ <div key={index} className="border p-4 mb-2 rounded-lg bg-gray-800">
+ <p className="text-lg font-semibold text-white">{item.nombre}</p>
+ <p className="text-sm text-gray-300">Fecha: {item.fecha}</p>
+ <p className="text-sm text-gray-300">Asiento: {item.asiento}</p>
+ <p className="text-sm text-gray-300">Precio: ${item.precio}</p>
+ <Button
+ className="mt-2 bg-red-500 hover:bg-red-600"
+ onClick={() => {
+ setConciertoAEliminar(index);
+ setShowDialog(true);
+ }}
+ >
+ Eliminar
+ </Button>
</div>
))
)}
+
+ {carrito.length > 0 && (
+ <>
+ <p className="text-xl font-bold text-white mt-4">Total: ${calcularTotal()}</p>
+ <div className="flex justify-between mt-4">
+ <Button
+ className="bg-gray-500 hover:bg-gray-600"
+ onClick={() => router.push("/index")} // Debe lanzarte a la pagina de informacion.jsx
+ >
+ Cancelar
+ </Button>
+ <Button className="bg-green-500 hover:bg-green-600">Pagar</Button>
+ </div>
+ </>
+ )}
+
+ <Dialog open={showDialog} onOpenChange={setShowDialog}>
+ <DialogContent>
+ <DialogHeader>
+ <DialogTitle>¿Estás seguro de eliminar este concierto?</DialogTitle>
+ </DialogHeader>
+ <div className="flex justify-end gap-2 mt-4">
+ <Button variant="outline" onClick={() => setShowDialog(false)}>
+ Cancelar
+ </Button>
+ <Button className="bg-red-500 hover:bg-red-600" onClick={eliminarConcierto}>
+ Eliminar
+ </Button>
+ </div>
+ </DialogContent>
+ </Dialog>
</div>
);
}