diff --git a/ventaboletos/public/images/Concierto Rock Fest.jpeg b/ventaboletos/public/images/Concierto Rock Fest.jpeg
new file mode 100644
index 0000000..19cca70
Binary files /dev/null and b/ventaboletos/public/images/Concierto Rock Fest.jpeg differ
diff --git a/ventaboletos/public/images/Concierto Rock Fest.jpg b/ventaboletos/public/images/Concierto Rock Fest.jpg
new file mode 100644
index 0000000..d8c8cfe
Binary files /dev/null and b/ventaboletos/public/images/Concierto Rock Fest.jpg differ
diff --git a/ventaboletos/public/images/default.jpeg b/ventaboletos/public/images/default.jpeg
new file mode 100644
index 0000000..0d76260
Binary files /dev/null and b/ventaboletos/public/images/default.jpeg differ
diff --git a/ventaboletos/src/components/vistas/Informacion.jsx b/ventaboletos/src/components/vistas/Informacion.jsx
index 7d6d061..627f490 100644
--- a/ventaboletos/src/components/vistas/Informacion.jsx
+++ b/ventaboletos/src/components/vistas/Informacion.jsx
@@ -15,6 +15,7 @@ import {
} from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label"; // Import Label component
function Informacion() {
const [open, setOpen] = useState(false);
@@ -26,6 +27,7 @@ function Informacion() {
const [selectedCategoria, setSelectedCategoria] = useState("");
const [asientoSeleccionado, setAsientoSeleccionado] = useState("");
const [searchTerm, setSearchTerm] = useState("");
+ const [precioAsiento, setPrecioAsiento] = useState(null); // Add state for seat price
useEffect(() => {
fetchConciertos();
@@ -52,7 +54,7 @@ function Informacion() {
const fetchAsientos = async () => {
let { data, error } = await supabaseClient
.from("asientos")
- .select("numero_asiento, categoria");
+ .select("numero_asiento, categoria, precio"); // Include price in the select
if (error) {
console.error(error);
} else {
@@ -72,6 +74,15 @@ function Informacion() {
const handleCategoriaChange = (categoria) => {
setSelectedCategoria(categoria);
setAsientoSeleccionado("");
+ setPrecioAsiento(null); // Reset price when category changes
+ };
+
+ const handleAsientoChange = (asiento) => {
+ setAsientoSeleccionado(asiento);
+ const selectedAsiento = numeroAsiento.find(
+ (item) => item.numero_asiento === asiento
+ );
+ setPrecioAsiento(selectedAsiento?.precio || null); // Set the price of the selected seat
};
const handleAgregarAlCarrito = () => {
@@ -79,13 +90,13 @@ 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 },
+ { ...selectedConcierto, asiento: asientoSeleccionado, precio: precioAsiento },
];
-
+
localStorage.setItem("carrito", JSON.stringify(nuevoCarrito));
setOpen(false);
};
@@ -112,8 +123,12 @@ function Informacion() {
<div
key={concierto.id}
className="flex items-center gap-4 p-4 border rounded-lg"
- >
- <div className="w-16 h-16 bg-gray-300" />
+ >
+ <img
+ src={`/images/${concierto.imagen || "default.jpeg"}`}
+ alt={concierto.nombre}
+ className="w-24 h-24 rounded-lg object-cover"
+ />
<div>
<p className="text-lg font-semibold">{concierto.nombre}</p>
<p className="text-sm text-gray-600">{concierto.fecha}</p>
@@ -146,7 +161,7 @@ function Informacion() {
</Select>
</div>
<div className="space-y-4">
- <Select onValueChange={setAsientoSeleccionado}>
+ <Select onValueChange={handleAsientoChange}>
<SelectTrigger>
<SelectValue placeholder="Selecciona un asiento" />
</SelectTrigger>
@@ -162,6 +177,11 @@ function Informacion() {
</SelectContent>
</Select>
</div>
+ <div>
+ <Label>
+ {precioAsiento !== null ? `Precio: $${precioAsiento}` : "Selecciona un asiento para ver el precio"}
+ </Label>
+ </div>
<div className="flex justify-end gap-2 mt-4">
<Button variant="outline" onClick={() => setOpen(false)}>
Cancelar
@@ -174,4 +194,4 @@ function Informacion() {
);
}
-export default Informacion;
+export default Informacion;
\ No newline at end of file
diff --git a/ventaboletos/src/pages/carrito.jsx b/ventaboletos/src/pages/carrito.jsx
index 9ffd56e..a8702eb 100644
--- a/ventaboletos/src/pages/carrito.jsx
+++ b/ventaboletos/src/pages/carrito.jsx
@@ -3,12 +3,6 @@ import { useRouter } from "next/router";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-const PRECIOS_BOLETO = {
- VIP: 100,
- Intermedio: 75,
- General: 25,
-};
-
export default function Carrito() {
const [carrito, setCarrito] = useState([]);
const [showDialog, setShowDialog] = useState(false);
@@ -17,12 +11,7 @@ export default function Carrito() {
useEffect(() => {
const carritoGuardado = JSON.parse(localStorage.getItem("carrito")) || [];
- // Asigna el precio basado en el tipo de boleto si no tiene un precio definido
- const carritoConPrecios = carritoGuardado.map(item => ({
- ...item,
- precio: PRECIOS_BOLETO[item.tipoBoleto] || 0,
- }));
- setCarrito(carritoConPrecios);
+ setCarrito(carritoGuardado);
}, []);
const eliminarConcierto = () => {
@@ -38,6 +27,30 @@ export default function Carrito() {
return carrito.reduce((total, item) => total + (item.precio || 0), 0);
};
+ const pagar = async () => {
+ try {
+ const response = await fetch("/api/comprar-boletos", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({ boletos: carrito }),
+ });
+
+ if (!response.ok) {
+ throw new Error("Error al procesar el pago");
+ }
+
+ alert("Compra realizada con éxito");
+ localStorage.removeItem("carrito");
+ setCarrito([]);
+ router.push("/");
+ } catch (error) {
+ 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>
@@ -73,7 +86,7 @@ export default function Carrito() {
>
Cancelar
</Button>
- <Button className="bg-green-500 hover:bg-green-600">Pagar</Button>
+ <Button className="bg-green-500 hover:bg-green-600" onClick={pagar}>Pagar</Button>
</div>
</>
)}
@@ -95,4 +108,4 @@ export default function Carrito() {
</Dialog>
</div>
);
-}
+}
\ No newline at end of file