// Campo de formulario — definido FUERA del componente para evitar remount en cada render
function CheckoutField({ label, value, onChange, type = 'text', placeholder, col = 12, error, required = false, isMobile }) {
const P = window.POP;
return (
{error && (
✗ {error}
)}
);
}
// Checkout — 3 steps (Datos / Envío / Pago) + Confirmación
function CheckoutScreen({ navigate, cart, isMobile, onComplete, user }) {
const P = window.POP;
const [step, setStep] = React.useState(1);
const [form, setForm] = React.useState({
email: user?.email || '', name: user?.name || '', phone: '',
address: '', city: '', zip: '', country: 'Uruguay',
shipMethod: 'standard', payMethod: 'mercadopago',
});
const fmt = n => n.toLocaleString('es-UY');
const subtotal = cart.reduce((s, it) => s + it.price * it.qty, 0);
const shipCost = form.shipMethod === 'express' ? 10 : (subtotal > 50 ? 0 : 5);
const [errors, setErrors] = React.useState({});
const setField = k => e => {
setForm(prev => ({ ...prev, [k]: e.target?.value ?? e }));
setErrors(prev => ({ ...prev, [k]: '' }));
};
const [payLoading, setPayLoading] = React.useState(false);
const [payError, setPayError] = React.useState('');
// ── Cupones ───────────────────────────────────────────────────
const [couponCode, setCouponCode] = React.useState('');
const [couponData, setCouponData] = React.useState(null); // { code, type, value, discount, label }
const [couponLoading, setCouponLoading] = React.useState(false);
const [couponError, setCouponError] = React.useState('');
const couponDiscount = couponData
? (couponData.type === 'percent' ? Math.round(subtotal * couponData.value / 100) : Math.min(couponData.value, subtotal))
: 0;
const total = subtotal + shipCost - couponDiscount;
const applyCoupon = async () => {
const code = couponCode.trim().toUpperCase();
if (!code) return;
setCouponLoading(true);
setCouponError('');
try {
const res = await fetch('/api/validate-coupon', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ code, subtotal }),
});
const data = await res.json();
if (!res.ok) { setCouponError(data.error || 'Código inválido'); setCouponData(null); }
else { setCouponData(data); setCouponError(''); }
} catch { setCouponError('Error al validar el cupón'); }
setCouponLoading(false);
};
const removeCoupon = () => { setCouponData(null); setCouponCode(''); setCouponError(''); };
const steps = [{ n: 1, label: 'Datos', icon: '👤' }, { n: 2, label: 'Envío', icon: '🚚' }, { n: 3, label: 'Pago', icon: '💳' }];
const prev = () => step > 1 ? setStep(step - 1) : navigate('cart');
const handlePayment = async () => {
setPayLoading(true);
setPayError('');
try {
// 1 — Obtener userId si está autenticado
let userId = null;
if (window.sb) {
const { data: { user: authUser } } = await window.sb.auth.getUser();
userId = authUser?.id || null;
}
// 2 — Crear pedido vía API server-side (bypasea RLS con service role)
const orderRes = await fetch('/api/create-order', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
cart,
subtotal,
shipping: shipCost,
discount: couponDiscount,
total,
couponCode: couponData?.code || null,
userId,
payer: { name: form.name, email: form.email, phone: form.phone, address: form.address, city: form.city, zip: form.zip },
}),
});
if (!orderRes.ok) {
const err = await orderRes.json();
throw new Error(err.error || 'Error al crear el pedido');
}
const { orderId } = await orderRes.json();
// Redimir cupón (fire & forget)
if (couponData?.code) {
fetch('/api/validate-coupon', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ code: couponData.code, subtotal, redeem: true, orderId }),
}).catch(() => {});
}
// 3 — Crear preferencia en MercadoPago
const res = await fetch('/api/mp-preference', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: cart, shipping: shipCost, orderId, payer: { name: form.name, email: form.email, phone: form.phone } }),
});
if (!res.ok) {
const err = await res.json();
throw new Error(err.error || 'Error al crear preferencia de pago');
}
const { initPoint, sandboxInitPoint } = await res.json();
const cfg = window.VOLTIO_CONFIG || {};
// Usar sandbox si la public key es de prueba
const isSandbox = cfg.mpPublicKey && cfg.mpPublicKey.startsWith('TEST-');
// Guardar datos del comprador para la pantalla de éxito
localStorage.setItem('voltio-last-payer', JSON.stringify({
name: form.name, email: form.email,
address: [form.address, form.city].filter(Boolean).join(', '),
}));
window.location.href = isSandbox ? sandboxInitPoint : initPoint;
} catch (err) {
console.error('[checkout]', err);
// Si la API no está configurada, caer en modo demo
if (err.message.includes('Failed to fetch') || err.message.includes('mp-preference')) {
onComplete();
} else {
setPayError(err.message);
setPayLoading(false);
}
}
};
const validateStep1 = () => {
const e = {};
if (!form.email.trim()) e.email = 'El email es obligatorio';
else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) e.email = 'Ingresá un email válido';
if (!form.name.trim()) e.name = 'El nombre es obligatorio';
if (!form.phone.trim()) e.phone = 'El teléfono es obligatorio';
return e;
};
const validateStep2 = () => {
const e = {};
if (!form.address.trim()) e.address = 'La dirección es obligatoria';
if (!form.city.trim()) e.city = 'La ciudad es obligatoria';
if (!form.zip.trim()) e.zip = 'El código postal es obligatorio';
return e;
};
const next = () => {
if (step === 1) {
const e = validateStep1();
setErrors(e);
if (Object.keys(e).length > 0) return;
}
if (step === 2) {
const e = validateStep2();
setErrors(e);
if (Object.keys(e).length > 0) return;
}
step < 3 ? setStep(step + 1) : handlePayment();
};
if (cart.length === 0) {
return (
{[
{ id: 'mercadopago', icon: '💙', name: 'Mercado Pago', sub: 'Serás redirigido a MercadoPago para completar el pago de forma segura.' },
{ id: 'transfer', icon: '🏦', name: 'Transferencia', sub: 'Recibirás los datos de cuenta y referencia por email.' },
{ id: 'cash', icon: '💵', name: 'Efectivo en mostrador', sub: 'Pagá cuando retirás el pedido en nuestra sucursal.' },
].map(m => (
))}