diff --git a/ventaboletos/src/components/vistas/Informacion.jsx b/ventaboletos/src/components/vistas/Informacion.jsx
index 627f490..ae7b3bc 100644
--- a/ventaboletos/src/components/vistas/Informacion.jsx
+++ b/ventaboletos/src/components/vistas/Informacion.jsx
@@ -52,9 +52,7 @@ function Informacion() {
};
const fetchAsientos = async () => {
- let { data, error } = await supabaseClient
- .from("asientos")
- .select("numero_asiento, categoria, precio"); // Include price in the select
+ let { data, error } = await supabaseClient.from("asientos").select("*"); // Include price in the select
if (error) {
console.error(error);
} else {
@@ -80,7 +78,7 @@ function Informacion() {
const handleAsientoChange = (asiento) => {
setAsientoSeleccionado(asiento);
const selectedAsiento = numeroAsiento.find(
- (item) => item.numero_asiento === asiento
+ (item) => item.numero === parseInt(asiento)
);
setPrecioAsiento(selectedAsiento?.precio || null); // Set the price of the selected seat
};
@@ -90,20 +88,26 @@ function Informacion() {
alert("Selecciona un tipo de asiento antes de continuar.");
return;
}
-
+
const carritoActual = JSON.parse(localStorage.getItem("carrito")) || [];
const nuevoCarrito = [
...carritoActual,
- { ...selectedConcierto, asiento: asientoSeleccionado, precio: precioAsiento },
+ {
+ ...selectedConcierto,
+ asiento: asientoSeleccionado,
+ precio: precioAsiento,
+ },
];
-
+
localStorage.setItem("carrito", JSON.stringify(nuevoCarrito));
setOpen(false);
};
const filteredAsientos = numeroAsiento
- .filter((asiento) => asiento.categoria === selectedCategoria)
- .sort((a, b) => a.numero_asiento - b.numero_asiento);
+ .filter((asiento) => {
+ return asiento.categoria === selectedCategoria;
+ })
+ .sort((a, b) => parseInt(a.numero) - parseInt(b.numero));
return (
<>
@@ -123,7 +127,7 @@ function Informacion() {
<div
key={concierto.id}
className="flex items-center gap-4 p-4 border rounded-lg"
- >
+ >
<img
src={`/images/${concierto.imagen || "default.jpeg"}`}
alt={concierto.nombre}
@@ -141,8 +145,13 @@ function Informacion() {
</div>
<Dialog open={open} onOpenChange={setOpen}>
- <DialogContent>
+ <DialogContent className="bg-white text-black">
<DialogHeader>
+ <img
+ src={`/images/default.jpeg`}
+ alt={""}
+ className="w-24 h-24 rounded-lg object-cover"
+ />
<DialogTitle>{selectedConcierto?.nombre}</DialogTitle>
<p className="text-sm text-gray-600">{selectedConcierto?.fecha}</p>
</DialogHeader>
@@ -167,11 +176,8 @@ function Informacion() {
</SelectTrigger>
<SelectContent>
{filteredAsientos.map((asiento) => (
- <SelectItem
- key={asiento.numero_asiento}
- value={asiento.numero_asiento}
- >
- {asiento.numero_asiento}
+ <SelectItem key={asiento.id} value={asiento.numero}>
+ {asiento.numero}
</SelectItem>
))}
</SelectContent>
@@ -179,7 +185,9 @@ function Informacion() {
</div>
<div>
<Label>
- {precioAsiento !== null ? `Precio: $${precioAsiento}` : "Selecciona un asiento para ver el precio"}
+ {precioAsiento !== null
+ ? `Precio: $${precioAsiento}`
+ : "Selecciona un asiento para ver el precio"}
</Label>
</div>
<div className="flex justify-end gap-2 mt-4">
@@ -194,4 +202,4 @@ function Informacion() {
);
}
-export default Informacion;
\ No newline at end of file
+export default Informacion;
diff --git a/ventaboletos/src/pages/carrito.jsx b/ventaboletos/src/pages/carrito.jsx
index a8702eb..e2ec3ec 100644
--- a/ventaboletos/src/pages/carrito.jsx
+++ b/ventaboletos/src/pages/carrito.jsx
@@ -1,12 +1,27 @@
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";
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import Link from "next/link";
+import {
+ Select,
+ SelectTrigger,
+ SelectValue,
+ SelectContent,
+ SelectItem,
+} from "@/components/ui/select";
export default function Carrito() {
const [carrito, setCarrito] = useState([]);
const [showDialog, setShowDialog] = useState(false);
+ const [showPaymentDialog, setShowPaymentDialog] = useState(false);
const [conciertoAEliminar, setConciertoAEliminar] = useState(null);
+ const [selectedPaymentMethod, setSelectedPaymentMethod] = useState("");
const router = useRouter();
useEffect(() => {
@@ -16,7 +31,9 @@ export default function Carrito() {
const eliminarConcierto = () => {
if (conciertoAEliminar !== null) {
- const nuevoCarrito = carrito.filter((_, index) => index !== conciertoAEliminar);
+ const nuevoCarrito = carrito.filter(
+ (_, index) => index !== conciertoAEliminar
+ );
localStorage.setItem("carrito", JSON.stringify(nuevoCarrito));
setCarrito(nuevoCarrito);
setShowDialog(false);
@@ -27,7 +44,26 @@ export default function Carrito() {
return carrito.reduce((total, item) => total + (item.precio || 0), 0);
};
- const pagar = async () => {
+ const handlePagar = async () => {
+ if (!selectedPaymentMethod) {
+ alert("Por favor seleccione un método de pago");
+ return;
+ }
+
+ try {
+ // Aquí iría la lógica de pago
+ alert("Pago realizado con éxito");
+ localStorage.removeItem("carrito");
+ setCarrito([]);
+ setShowPaymentDialog(false);
+ router.push("/");
+ } catch (error) {
+ console.error("Error en el pago:", error);
+ alert("Hubo un problema al realizar el pago");
+ }
+ };
+
+ /*const pagar = async () => {
try {
const response = await fetch("/api/comprar-boletos", {
method: "POST",
@@ -49,63 +85,134 @@ export default function Carrito() {
console.error("Error en la compra:", error);
alert("Hubo un problema al realizar la compra");
}
- };
+ };*/
return (
- <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-400">No hay conciertos en el carrito.</p>
- ) : (
- carrito.map((item, index) => (
- <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>
- ))
- )}
+ <div className="w-screen flex flex-col items-center justify-center">
+ <div className="w-[80%] my-5">
+ <Link href={"/"}>
+ <Button className="bg-blue-500 hover:bg-blue-600">Volver</Button>
+ </Link>
+ </div>
+ <div className="mx-10 py-5 px-10 text-black rounded-lg shadow-lg w-[80%]">
+ <h2 className="text-2xl font-bold mb-4">Carrito de Compras</h2>
+ {carrito.length === 0 ? (
+ <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 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("/")}
+ >
+ Cancelar
+ </Button>
+ <Button
+ className="bg-green-500 hover:bg-green-600"
+ onClick={() => setShowPaymentDialog(true)}
+ >
+ Pagar
+ </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("/")}
- >
- Cancelar
- </Button>
- <Button className="bg-green-500 hover:bg-green-600" onClick={pagar}>Pagar</Button>
- </div>
- </>
- )}
+ <Dialog open={showDialog} onOpenChange={setShowDialog}>
+ {/* ...existing delete dialog code... */}
+ </Dialog>
- <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>
+ {/* Dialog para pago */}
+ <Dialog open={showPaymentDialog} onOpenChange={setShowPaymentDialog}>
+ <DialogContent className="bg-white text-black">
+ <DialogHeader>
+ <DialogTitle className="text-xl font-bold">
+ Seleccione método de pago
+ </DialogTitle>
+ </DialogHeader>
+ <div className="space-y-4">
+ <Select onValueChange={setSelectedPaymentMethod}>
+ <SelectTrigger>
+ <SelectValue placeholder="Seleccione método de pago" />
+ </SelectTrigger>
+ <SelectContent>
+ <SelectItem value="tarjeta">
+ Tarjeta de Crédito/Débito
+ </SelectItem>
+ <SelectItem value="paypal">PayPal</SelectItem>
+ <SelectItem value="transferencia">
+ Transferencia Bancaria
+ </SelectItem>
+ </SelectContent>
+ </Select>
+
+ <div className="mt-4">
+ <p className="font-semibold">
+ Total a pagar: ${calcularTotal()}
+ </p>
+ </div>
+
+ <div className="flex justify-end gap-2 mt-4">
+ <Button
+ variant="outline"
+ onClick={() => setShowPaymentDialog(false)}
+ >
+ Cancelar
+ </Button>
+ <Button
+ className="bg-green-500 hover:bg-green-600 text-white"
+ onClick={handlePagar}
+ disabled={!selectedPaymentMethod}
+ >
+ Confirmar Pago
+ </Button>
+ </div>
+ </div>
+ </DialogContent>
+ </Dialog>
+
+ <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>
</div>
);
-}
\ No newline at end of file
+}