/* ───────────────────────────────────────────────────────────────────────
Checkout — shared primitives, inputs, summary, trust, cross-sell.
Used by V1 (one-page), V2 (multi-step), V3 (accordion).
─────────────────────────────────────────────────────────────────────── */
// ── Mini header common to all 3 variants ─────────────────────────────────
function CheckoutHeader({ onNavigate }) {
const go = (e) => { e.preventDefault(); onNavigate && onNavigate('/'); };
return (
COMPRA 100% SEGURA
11-2518-1264
);
}
// ── Form Input ───────────────────────────────────────────────────────────
function Field({ label, hint, error, required, children, span = 12 }) {
return (
{children}
{hint && !error && {hint}}
{error && {error}}
);
}
function Input({ placeholder, value, defaultValue, type = 'text', icon, suffix, readOnly }) {
return (
{icon &&
}
e.target.style.borderColor = 'var(--ink)'}
onBlur={(e) => e.target.style.borderColor = 'var(--line-2)'}
/>
{suffix &&
{suffix}
}
{children}
);
}
function SectionTitle({ n, title, subtitle, done, icon }) {
return (
{n && (
{done ? : n}
)}
{icon && !n && (
)}
{title}
{subtitle &&
{subtitle}
}
{label}
{value}
);
}
// ── Cart item row used in summary ────────────────────────────────────────
function SummaryItem({ name, brand, qty, price, img, image, onChangeQty, onRemove, compact }) {
const imgSrc = img || image;
const lineTotal = price * qty;
return (
{imgSrc ?
:
}
{qty}
{brand &&
{brand}
}
{name}
{!compact && onChangeQty && (
{qty}
)}
$ {lineTotal.toLocaleString('es-AR')}
{qty > 1 &&
$ {price.toLocaleString('es-AR')} c/u
}
);
}
// ── Trust badges row ─────────────────────────────────────────────────────
function TrustBadges({ compact }) {
const items = [
{ icon: 'shield', t: 'Compra protegida', d: 'Devolución 10 días' },
{ icon: 'truck', t: 'Envío gratis', d: 'CABA y GBA en 48 hs' },
{ icon: 'rotate', t: 'Garantía oficial', d: '12 meses todos' },
{ icon: 'whatsapp', t: 'Asesoramiento', d: 'Service propio Haedo'},
];
return (
);
}
// ── Coupon input ─────────────────────────────────────────────────────────
function CouponBox({ applied, onApply, onRemove }) {
const [open, setOpen] = React.useState(!!applied);
const [code, setCode] = React.useState(applied || '');
if (applied) {
return (
Cupón {applied} aplicado
−5% adicional en este pedido
);
}
if (!open) {
return (
);
}
return (
setCode(e.target.value.toUpperCase())}
placeholder="CÓDIGO"
style={{
flex: 1, padding: '11px 13px', fontSize: 13, fontFamily: 'monospace', letterSpacing: '0.05em',
border: '1px solid var(--line-2)', borderRadius: 8, background: '#fff', textTransform: 'uppercase',
}}
/>
);
}
// ── Cross-sell strip ─────────────────────────────────────────────────────
function CrossSell({ items, onAdd }) {
return (
Agregá a tu pedido
Compran junto
{items.map((it) => (
$ {it.price.toLocaleString('es-AR')}
))}
);
}
// ── Mock data ────────────────────────────────────────────────────────────
const MOCK_CART = [
{
name: 'Hidrolavadora Powerclean LT590',
brand: 'POWERCLEAN',
qty: 1,
price: 450840,
listPrice: 530400,
img: null,
},
{
name: 'Manguera de alta presión 8m trenzada',
brand: 'POWERCLEAN',
qty: 2,
price: 16900,
img: null,
},
];
const MOCK_CROSS_SELL = [
{ name: 'Detergente concentrado 5L', price: 12480 },
{ name: 'Boquilla turbo profesional', price: 18900 },
{ name: 'Adaptador hembra ¼"', price: 4350 },
];
const MOCK_PAYMENT_METHODS = [
{ id: 'transfer', icon: 'bank', title: 'Transferencia bancaria', subtitle: 'CBU o alias · Confirmación en 24 hs hábiles', badge: '−15% OFF', accent: 'red' },
{ id: 'mp', icon: 'wallet', title: 'Mercado Pago', subtitle: 'Dinero en cuenta, débito o crédito', badge: null, accent: null },
{ id: 'credit', icon: 'credit', title: 'Tarjeta de crédito', subtitle: 'Visa, Master, Amex, Naranja · Hasta 12 cuotas sin interés', badge: '12 SIN INTERÉS', accent: 'green' },
{ id: 'debit', icon: 'credit', title: 'Tarjeta de débito', subtitle: 'Débito inmediato Visa o Master', badge: null, accent: null },
];
const MOCK_SHIPPING = [
{ id: 'free', icon: 'truck', title: 'Envío gratis CABA / GBA', subtitle: 'Llega entre el martes 26 y jueves 28', price: 0, badge: 'EN 48 HS', accent: 'green' },
{ id: 'pickup', icon: 'store', title: 'Retiro en sucursal Haedo', subtitle: 'Tres Arroyos 456 · Lun a Vie 9 a 18 hs', price: 0, badge: 'GRATIS', accent: 'green' },
{ id: 'quote', icon: 'box', title: 'Transporte por volumen', subtitle: 'Cotizamos con tu dirección — para envíos al interior', price: null, badge: null, accent: null },
];
const MOCK_TOTALS = (cartSubtotal, shipping, paymentDiscountPct = 0, couponPct = 0) => {
const productDiscount = 79560;
const subtotal = cartSubtotal;
const ship = shipping === null ? 0 : (shipping || 0);
const paymentDiscount = Math.round((subtotal - productDiscount) * paymentDiscountPct / 100);
const couponDiscount = Math.round((subtotal - productDiscount) * couponPct / 100);
const total = subtotal - productDiscount - paymentDiscount - couponDiscount + ship;
return { productDiscount, paymentDiscount, couponDiscount, ship, total };
};
// Expose to other Babel scripts
Object.assign(window, {
CheckoutHeader, Field, Input, CkCard, SectionTitle, RadioOption,
SummaryRow, SummaryItem, TrustBadges, CouponBox, CrossSell,
MOCK_CART, MOCK_CROSS_SELL, MOCK_PAYMENT_METHODS, MOCK_SHIPPING, MOCK_TOTALS,
});