482 lines
20 KiB
TypeScript
482 lines
20 KiB
TypeScript
'use client';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { useEffect, useMemo, useState } from 'react';
|
|
import { useAuth } from '@/contexts/AuthContext';
|
|
import { useCart } from '@/contexts/CartContext';
|
|
|
|
function formatPrice(cents: number) {
|
|
return `€${(cents / 100).toFixed(2)}`;
|
|
}
|
|
|
|
interface ShippingMethod {
|
|
id: string;
|
|
zoneId?: string;
|
|
name: string;
|
|
baseCostCents: number;
|
|
freeShippingThresholdCents: number | null;
|
|
description: string | null;
|
|
}
|
|
|
|
interface SavedAddress {
|
|
id: string;
|
|
label: string | null;
|
|
recipientName: string;
|
|
street: string;
|
|
city: string;
|
|
postalCode: string;
|
|
country: string;
|
|
isDefault: boolean;
|
|
}
|
|
|
|
function splitName(fullName: string): { firstName: string; lastName: string } {
|
|
const trimmed = fullName.trim().replace(/\s+/g, ' ');
|
|
if (!trimmed) return { firstName: '', lastName: '' };
|
|
const parts = trimmed.split(' ');
|
|
if (parts.length === 1) return { firstName: parts[0], lastName: '' };
|
|
return { firstName: parts.slice(0, -1).join(' '), lastName: parts[parts.length - 1] };
|
|
}
|
|
|
|
function addressToForm(addr: SavedAddress) {
|
|
const { firstName, lastName } = splitName(addr.recipientName);
|
|
return {
|
|
firstName,
|
|
lastName,
|
|
phone: '',
|
|
address: addr.street,
|
|
city: addr.city,
|
|
postalCode: addr.postalCode ?? '',
|
|
country: addr.country ?? '',
|
|
};
|
|
}
|
|
|
|
export default function CheckoutClient() {
|
|
const { user, loading: authLoading } = useAuth();
|
|
const { items, subtotalCents, itemCount, clearCart } = useCart();
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [error, setError] = useState('');
|
|
|
|
const [addresses, setAddresses] = useState<SavedAddress[]>([]);
|
|
const [selectedAddressId, setSelectedAddressId] = useState<string | null>(null);
|
|
const [shippingMethods, setShippingMethods] = useState<ShippingMethod[]>([]);
|
|
const [shippingMethodId, setShippingMethodId] = useState<string | null>(null);
|
|
|
|
// Form state
|
|
const [form, setForm] = useState({
|
|
firstName: '',
|
|
lastName: '',
|
|
email: user?.email ?? '',
|
|
phone: '',
|
|
address: '',
|
|
city: '',
|
|
postalCode: '',
|
|
notes: '',
|
|
shippingMethod: 'standard',
|
|
});
|
|
|
|
// Fetch saved addresses when the customer is logged in.
|
|
useEffect(() => {
|
|
if (!user || user.role !== 'customer') {
|
|
setAddresses([]);
|
|
setSelectedAddressId(null);
|
|
return;
|
|
}
|
|
let cancelled = false;
|
|
(async () => {
|
|
try {
|
|
const res = await fetch(`/api/users/${user.id}/addresses`, { credentials: 'include', cache: 'no-store' });
|
|
if (!res.ok) return;
|
|
const data = (await res.json()) as { items?: SavedAddress[] };
|
|
if (cancelled) return;
|
|
const list = data.items ?? [];
|
|
setAddresses(list);
|
|
const def = list.find((a) => a.isDefault) ?? list[0] ?? null;
|
|
if (def) {
|
|
setSelectedAddressId(def.id);
|
|
setForm((f) => ({ ...f, ...addressToForm(def) }));
|
|
}
|
|
} catch {
|
|
/* ignore */
|
|
}
|
|
})();
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [user]);
|
|
|
|
// Fetch shipping methods from the admin-managed catalogue.
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
(async () => {
|
|
try {
|
|
const res = await fetch('/api/shipping/methods', { cache: 'no-store' });
|
|
if (!res.ok) return;
|
|
const data = (await res.json()) as { items?: ShippingMethod[] };
|
|
if (cancelled) return;
|
|
const list = data.items ?? [];
|
|
setShippingMethods(list);
|
|
const def = list[0];
|
|
if (def) {
|
|
setShippingMethodId(def.id);
|
|
setForm((f) => ({ ...f, shippingMethod: def.id }));
|
|
}
|
|
} catch {
|
|
/* ignore */
|
|
}
|
|
})();
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, []);
|
|
|
|
const selectedAddress = useMemo(
|
|
() => addresses.find((a) => a.id === selectedAddressId) ?? null,
|
|
[addresses, selectedAddressId],
|
|
);
|
|
|
|
const handleSelectAddress = (id: string) => {
|
|
setSelectedAddressId(id);
|
|
const addr = addresses.find((a) => a.id === id);
|
|
if (addr) setForm((f) => ({ ...f, ...addressToForm(addr) }));
|
|
};
|
|
|
|
const selectedShippingMethod = useMemo(
|
|
() => shippingMethods.find((m) => m.id === shippingMethodId) ?? null,
|
|
[shippingMethods, shippingMethodId],
|
|
);
|
|
const shippingCost = selectedShippingMethod?.baseCostCents ?? 0;
|
|
const totalCents = subtotalCents + shippingCost;
|
|
|
|
if (authLoading) {
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 py-16 flex items-center justify-center">
|
|
<div className="text-gray-500">Cargando...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (items.length === 0) {
|
|
return (
|
|
<div className="max-w-2xl mx-auto px-4 py-16 text-center">
|
|
<div className="text-6xl mb-4">🛒</div>
|
|
<h1 className="text-2xl font-bold text-gray-900 mb-2">Tu carrito está vacío</h1>
|
|
<p className="text-gray-500 mb-8">Añade productos antes de hacer el pedido.</p>
|
|
<Link href="/products" className="inline-flex px-6 py-3 bg-[#70ad47] hover:bg-[#5a9040] text-white font-semibold rounded-xl transition-colors">
|
|
Ver productos
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const handlePlaceOrder = async () => {
|
|
setSubmitting(true);
|
|
setError('');
|
|
try {
|
|
const res = await fetch('/api/checkout', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'include',
|
|
body: JSON.stringify({
|
|
shippingAddress: {
|
|
firstName: form.firstName,
|
|
lastName: form.lastName,
|
|
email: form.email,
|
|
phone: form.phone,
|
|
line1: form.address,
|
|
city: form.city,
|
|
postalCode: form.postalCode,
|
|
country: selectedAddress?.country || form.shippingMethod ? 'ES' : 'ES',
|
|
},
|
|
items: items.map((i) => ({
|
|
productId: i.productId,
|
|
variantId: i.variantId,
|
|
quantity: i.quantity,
|
|
})),
|
|
shippingMethod: form.shippingMethod,
|
|
notes: form.notes,
|
|
shippingMethodId: selectedShippingMethod?.id ?? null,
|
|
}),
|
|
});
|
|
if (res.status === 401) {
|
|
setError('Debes iniciar sesión para finalizar el pedido.');
|
|
return;
|
|
}
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}));
|
|
throw new Error(data.error?.message || 'Error al procesar el pedido');
|
|
}
|
|
const { orderId } = await res.json();
|
|
clearCart();
|
|
window.location.href = `/order-confirmation?orderId=${orderId}`;
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Error al procesar el pedido');
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<h1 className="text-3xl font-bold text-gray-900 mb-8" style={{ fontFamily: 'var(--font-heading)' }}>
|
|
Finalizar pedido
|
|
</h1>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
{/* Form */}
|
|
<div>
|
|
{/* Login prompt — solo si NO está autenticado */}
|
|
{!user && (
|
|
<div className="bg-[#70ad47]/5 border border-[#70ad47]/20 rounded-xl p-6 mb-6">
|
|
<h2 className="font-bold text-gray-900 mb-1">¿Ya tienes cuenta?</h2>
|
|
<p className="text-sm text-gray-600 mb-3">Inicia sesión para una experiencia más rápida.</p>
|
|
<div className="flex gap-3">
|
|
<Link href="/auth/login?returnTo=%2Fcheckout" className="px-4 py-2 bg-[#70ad47] hover:bg-[#5a9040] text-white text-sm font-semibold rounded-lg transition-colors">
|
|
Iniciar sesión
|
|
</Link>
|
|
<Link href="/auth/register?returnTo=%2Fcheckout" className="px-4 py-2 border border-gray-300 hover:border-[#70ad47] text-gray-700 text-sm font-semibold rounded-lg transition-colors">
|
|
Crear cuenta
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Saved addresses selector — only when logged in */}
|
|
{user && addresses.length > 0 && (
|
|
<div className="bg-white border border-gray-200 rounded-xl p-6 mb-6">
|
|
<h2 className="font-bold text-gray-900 mb-3">Direcciones guardadas</h2>
|
|
<div className="space-y-2">
|
|
{addresses.map((a) => {
|
|
const active = selectedAddressId === a.id;
|
|
return (
|
|
<label
|
|
key={a.id}
|
|
className={`flex items-start gap-3 p-3 border rounded-lg cursor-pointer transition-colors ${
|
|
active ? 'border-[#70ad47] bg-[#70ad47]/5' : 'border-gray-200 hover:border-[#70ad47]'
|
|
}`}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="saved-address"
|
|
value={a.id}
|
|
checked={active}
|
|
onChange={() => handleSelectAddress(a.id)}
|
|
className="text-[#70ad47] mt-1"
|
|
/>
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2">
|
|
<p className="font-medium text-gray-900">{a.recipientName}</p>
|
|
{a.label && (
|
|
<span className="px-2 py-0.5 bg-gray-100 text-gray-600 text-xs rounded-full">{a.label}</span>
|
|
)}
|
|
{a.isDefault && (
|
|
<span className="px-2 py-0.5 bg-green-100 text-green-700 text-xs rounded-full">Predeterminada</span>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-gray-600">{a.street}</p>
|
|
<p className="text-sm text-gray-500">{a.postalCode} {a.city}, {a.country}</p>
|
|
</div>
|
|
</label>
|
|
);
|
|
})}
|
|
</div>
|
|
<p className="text-xs text-gray-400 mt-3">
|
|
También puedes editar los campos manualmente debajo; se aplicarán al pedido sin guardar nada en tu cuenta.
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Shipping form */}
|
|
<div className="bg-white border border-gray-200 rounded-xl p-6">
|
|
<h2 className="font-bold text-gray-900 mb-4">Datos de envío</h2>
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Nombre *</label>
|
|
<input
|
|
type="text" required placeholder="María"
|
|
value={form.firstName}
|
|
onChange={e => setForm(f => ({ ...f, firstName: e.target.value }))}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#70ad47] focus:border-transparent outline-none"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Apellidos *</label>
|
|
<input
|
|
type="text" required placeholder="García López"
|
|
value={form.lastName}
|
|
onChange={e => setForm(f => ({ ...f, lastName: e.target.value }))}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#70ad47] focus:border-transparent outline-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Email *</label>
|
|
<input
|
|
type="email" required placeholder="maria@ejemplo.com"
|
|
value={form.email}
|
|
onChange={e => setForm(f => ({ ...f, email: e.target.value }))}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#70ad47] focus:border-transparent outline-none"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Teléfono *</label>
|
|
<input
|
|
type="tel" required placeholder="+34 600 000 000"
|
|
value={form.phone}
|
|
onChange={e => setForm(f => ({ ...f, phone: e.target.value }))}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#70ad47] focus:border-transparent outline-none"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Dirección *</label>
|
|
<input
|
|
type="text" required placeholder="Calle Gran Vía 42"
|
|
value={form.address}
|
|
onChange={e => setForm(f => ({ ...f, address: e.target.value }))}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#70ad47] focus:border-transparent outline-none"
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Ciudad *</label>
|
|
<input
|
|
type="text" required placeholder="Madrid"
|
|
value={form.city}
|
|
onChange={e => setForm(f => ({ ...f, city: e.target.value }))}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#70ad47] focus:border-transparent outline-none"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">CP *</label>
|
|
<input
|
|
type="text" required placeholder="28013"
|
|
value={form.postalCode}
|
|
onChange={e => setForm(f => ({ ...f, postalCode: e.target.value }))}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#70ad47] focus:border-transparent outline-none"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">País</label>
|
|
<input type="text" disabled value="España"
|
|
className="w-full px-3 py-2 border border-gray-200 rounded-lg bg-gray-50 text-gray-500" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-gray-200 pt-4 mt-4">
|
|
<h3 className="font-semibold text-gray-900 mb-3">Método de envío</h3>
|
|
{shippingMethods.length === 0 ? (
|
|
<p className="text-sm text-gray-400">No hay métodos de envío configurados.</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{shippingMethods.map(opt => {
|
|
const active = form.shippingMethod === opt.id;
|
|
return (
|
|
<label
|
|
key={opt.id}
|
|
className={`flex items-start gap-3 p-3 border rounded-lg cursor-pointer transition-colors ${active ? 'border-[#70ad47] bg-[#70ad47]/5' : 'border-gray-200 hover:border-[#70ad47]'}`}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="shipping"
|
|
value={opt.id}
|
|
checked={active}
|
|
onChange={e => setForm(f => ({ ...f, shippingMethod: e.target.value }))}
|
|
className="mt-1 text-[#70ad47]"
|
|
/>
|
|
<div className="flex-1">
|
|
<p className="font-medium text-gray-900">{opt.name}</p>
|
|
{opt.description && (
|
|
<p className="text-sm text-gray-500">{opt.description}</p>
|
|
)}
|
|
{opt.freeShippingThresholdCents && subtotalCents >= opt.freeShippingThresholdCents && (
|
|
<p className="text-xs text-green-600 mt-1">Envío gratis aplicado</p>
|
|
)}
|
|
</div>
|
|
<span className="font-semibold text-[#70ad47]">{formatPrice(opt.baseCostCents)}</span>
|
|
</label>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="border-t border-gray-200 pt-4">
|
|
<h3 className="font-semibold text-gray-900 mb-3">Notas del pedido</h3>
|
|
<textarea rows={3} placeholder="Observaciones, instrucciones de entrega..."
|
|
value={form.notes}
|
|
onChange={e => setForm(f => ({ ...f, notes: e.target.value }))}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#70ad47] focus:border-transparent outline-none resize-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Order summary */}
|
|
<div>
|
|
<div className="bg-gray-50 rounded-xl border border-gray-200 p-6 sticky top-24">
|
|
<h2 className="font-bold text-gray-900 mb-4">Tu pedido ({itemCount})</h2>
|
|
|
|
<div className="space-y-3 max-h-80 overflow-y-auto mb-4">
|
|
{items.map(item => (
|
|
<div key={item.variantId} className="flex gap-3">
|
|
<div className="w-12 h-12 bg-white rounded-lg overflow-hidden flex-shrink-0 flex items-center justify-center">
|
|
{item.imageUrl
|
|
? <Image src={item.imageUrl.replace('/uploads/', '/uploads/40/')} alt={item.productName} width={40} height={56} className="object-contain" />
|
|
: <span className="text-2xl">🌿</span>
|
|
}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-gray-900 line-clamp-1">{item.productName}</p>
|
|
<p className="text-xs text-gray-500">Cantidad: {item.quantity}</p>
|
|
</div>
|
|
<p className="text-sm font-bold text-gray-900 flex-shrink-0">
|
|
{formatPrice(item.priceCents * item.quantity)}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="border-t border-gray-200 pt-4 space-y-2 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600">Subtotal</span>
|
|
<span className="font-medium">{formatPrice(subtotalCents)}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600">Envío</span>
|
|
<span className="text-gray-500">{selectedShippingMethod ? formatPrice(shippingCost) : '—'}</span>
|
|
</div>
|
|
<div className="flex justify-between text-gray-600">
|
|
<span>IVA</span>
|
|
<span>Incluido</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-gray-200 mt-4 pt-4 flex justify-between items-center">
|
|
<span className="font-bold text-gray-900">Total</span>
|
|
<span className="text-2xl font-bold text-[#70ad47]">{formatPrice(totalCents)}</span>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="mt-3 bg-red-50 border border-red-200 text-red-700 text-sm px-4 py-2.5 rounded-xl">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
onClick={handlePlaceOrder}
|
|
disabled={submitting || !form.firstName || !form.email || !form.address || !form.city || !form.postalCode}
|
|
className="mt-4 w-full py-3.5 bg-[#70ad47] hover:bg-[#5a9040] disabled:bg-gray-300 disabled:text-gray-500 text-white font-semibold rounded-xl transition-colors cursor-pointer"
|
|
>
|
|
{submitting ? 'Procesando...' : 'Finalizar pedido'}
|
|
</button>
|
|
|
|
<Link href="/cart" className="mt-3 w-full block text-center text-sm text-gray-500 hover:text-[#70ad47] transition-colors">
|
|
← Volver al carrito
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |