Compare commits

...

3 Commits

6 changed files with 252 additions and 80 deletions

Binary file not shown.

After

(image error) Size: 9.4 KiB

Binary file not shown.

After

(image error) Size: 70 KiB

Binary file not shown.

After

(image error) Size: 11 KiB

View File

@ -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();
@ -50,9 +52,7 @@ function Informacion() {
};
const fetchAsientos = async () => {
let { data, error } = await supabaseClient
.from("asientos")
.select("numero_asiento, categoria");
let { data, error } = await supabaseClient.from("asientos").select("*"); // Include price in the select
if (error) {
console.error(error);
} else {
@ -72,6 +72,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 === parseInt(asiento)
);
setPrecioAsiento(selectedAsiento?.precio || null); // Set the price of the selected seat
};
const handleAgregarAlCarrito = () => {
@ -83,7 +92,11 @@ function Informacion() {
const carritoActual = JSON.parse(localStorage.getItem("carrito")) || [];
const nuevoCarrito = [
...carritoActual,
{ ...selectedConcierto, asiento: asientoSeleccionado },
{
...selectedConcierto,
asiento: asientoSeleccionado,
precio: precioAsiento,
},
];
localStorage.setItem("carrito", JSON.stringify(nuevoCarrito));
@ -91,8 +104,10 @@ function Informacion() {
};
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 (
<>
@ -113,7 +128,11 @@ function Informacion() {
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>
@ -126,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>
@ -146,22 +170,26 @@ function Informacion() {
</Select>
</div>
<div className="space-y-4">
<Select onValueChange={setAsientoSeleccionado}>
<Select onValueChange={handleAsientoChange}>
<SelectTrigger>
<SelectValue placeholder="Selecciona un asiento" />
</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>
</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

View File

@ -0,0 +1,24 @@
import { supabaseClient } from "@/utils/supabase";
export default async function handler(req, res) {
if (req.method === "POST") {
const { boletos } = req.body;
try {
const { data, error } = await supabaseClient
.from("boletos_comprados")
.insert(boletos);
if (error) {
throw error;
}
res.status(200).json({ message: "Compra realizada con éxito", data });
} catch (error) {
console.error("Error al insertar boletos:", error);
res.status(500).json({ message: "Error al procesar la compra", error });
}
} else {
res.status(405).json({ message: "Método no permitido" });
}
}

View File

@ -1,33 +1,39 @@
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";
const PRECIOS_BOLETO = {
VIP: 100,
Intermedio: 75,
General: 25,
};
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(() => {
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 = () => {
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);
@ -38,61 +44,175 @@ export default function Carrito() {
return carrito.reduce((total, item) => total + (item.precio || 0), 0);
};
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",
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>
{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">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>
);
}