// storefront-checkout.jsx — /bolsa · /checkout · /confirmacion // ════════════════════════════════════════════════════════════════════ // BOLSA // ════════════════════════════════════════════════════════════════════ function Bolsa({ mobile }) { const s = useStore(); const cart = s.cart; const subtotal = cart.reduce((sum, it) => sum + it.price * it.qty, 0); const SHIPPING_THRESHOLD = 1499; const envio = subtotal >= SHIPPING_THRESHOLD ? 0 : 99; const [coupon, setCoupon] = useState(''); const [couponApplied, setCouponApplied] = useState(false); const discount = couponApplied ? Math.round(subtotal * 0.10) : 0; const total = subtotal + envio - discount; const cartCount = cart.reduce((n, it) => n + it.qty, 0); const crossSellIds = ['p03','p06','p09','p11']; const crossSell = crossSellIds.map(id => PRODUCTS.find(p => p.id === id)).filter(Boolean); return (
{/* Page header */}
Tu bolsa{cartCount > 0 && ( <>{' '}·{' '} {cartCount} {cartCount === 1 ? 'pieza' : 'piezas'} )}
{cart.length === 0 ? ( ) : (
{cart.map((it, i) => )}
setCouponApplied(true)} couponApplied={couponApplied} />
)} {/* Cross-sell */} {cart.length > 0 && (
Para completar tu look.
4 sugerencias
{crossSell.map(p => ( s.go('pdp', { slug: p.slug })} /> ))}
)}
); } function BolsaEmpty({ mobile }) { const s = useStore(); return (
Tu bolsa
está vacía.
Empieza por aquí.
); } function BolsaLine({ item, idx, mobile }) { const s = useStore(); const product = PRODUCTS.find(p => p.id === item.id) || { sizes: ['XS','S','M','L','XL'], colors: [{ name: item.color, hex: item.colorHex }], }; return (
{/* thumb — real image if available, else colored placeholder */} {(() => { const colorObj = product.colors.find(c => c.name === item.color) || product.colors[0]; const img = resolveProductImage(product, colorObj, 'front'); return (
{img ? ( {item.name} ) : (
)}
{item.id}
); })()}
{item.name}
c.name)} onChange={(v) => { const next = product.colors.find(c => c.name === v); if (next) s.updateItem(idx, { color: next.name, colorHex: next.hex }); }}/> s.updateItem(idx, { size: v })}/>
{item.qty}
{mobile && (
${(item.price * item.qty).toLocaleString('es-MX')}{' '} MXN
)}
{!mobile && (
${(item.price * item.qty).toLocaleString('es-MX')}
MXN
)}
); } const qtyStepBtn = { width: 32, height: 32, background:'#fff', border: 0, cursor:'pointer', fontFamily:'JetBrains Mono, monospace', fontSize: 14, lineHeight: 1, }; const lineRemoveBtn = { background:'transparent', border: 0, padding: 0, cursor:'pointer', fontFamily:'JetBrains Mono, monospace', fontSize: 10, letterSpacing:'0.22em', textTransform:'uppercase', color: C.fgMuted, textDecoration:'underline', transition:'color .15s', }; function BolsaSelect({ label, value, options, onChange }) { return ( ); } function BolsaSummary({ mobile, subtotal, envio, discount, total, coupon, setCoupon, applyCoupon, couponApplied }) { const s = useStore(); return ( ); } function SummaryRow({ label, value, valueColor }) { return (
{label} {value}
); } // ════════════════════════════════════════════════════════════════════ // CHECKOUT // ════════════════════════════════════════════════════════════════════ function Checkout({ mobile }) { const s = useStore(); const subtotal = s.cart.reduce((sum, it) => sum + it.price * it.qty, 0); const [delivery, setDelivery] = useState('shipping'); const [studioId, setStudioId] = useState(''); const [pickupDate, setPickupDate] = useState(''); const [pickupMode, setPickupMode] = useState('pay'); const isHold = delivery === 'pickup' && pickupMode === 'hold'; const envio = delivery === 'pickup' ? 0 : (subtotal >= 1499 ? 0 : 99); const total = isHold ? 0 : subtotal + envio; const totalLabel = isHold ? 'pagas al recoger' : `$${total.toLocaleString('es-MX')} MXN`; const [payment, setPayment] = useState('card'); const [installments, setInstallments] = useState('single'); return (
{!isHold && ( )}
Conexión segura · 256-bit SSL · Pago procesado por Conekta
); } function CheckoutSteps({ current, mobile }) { const STEPS = [ { n: 1, label:'Envío' }, { n: 2, label:'Pago' }, { n: 3, label:'Confirmación' }, ]; return (
{STEPS.map((s, i) => ( {i > 0 && }
{s.n} {s.label}
))}
); } function CheckoutSectionTitle({ num, label }) { return (
{num}

{label}

); } function CheckoutDelivery({ mobile, delivery, setDelivery, studioId, setStudioId, pickupDate, setPickupDate, pickupMode, setPickupMode }) { return (
setDelivery('shipping')} title="Envío a domicilio" hint="Gratis desde $1,499 MXN"/> setDelivery('pickup')} title="Pickup en estudio" hint="Siempre gratis"/>
{delivery === 'shipping' ? : }
); } function DeliveryTab({ active, onClick, title, hint }) { return ( ); } function ShippingForm({ mobile }) { return (
); } function PickupForm({ mobile, studioId, setStudioId, pickupDate, setPickupDate, pickupMode, setPickupMode }) { const groups = {}; STUDIOS.forEach(st => { (groups[st.city] = groups[st.city] || []).push(st); }); const today = new Date(); const minDate = today.toISOString().slice(0,10); const max = new Date(today); max.setDate(today.getDate() + 14); const maxDate = max.toISOString().slice(0,10); return (
{/* Pickup mode toggle */}
¿Cómo quieres recoger?
setPickupMode('pay')} title="Pagar ahora" hint="Lista para recoger · sin tope" badge="recomendado" /> setPickupMode('hold')} title="Apartar 48h" hint="Pruébala antes de pagar · paga en estudio" />
i
{pickupMode === 'hold' ? ( Apartamos tu prenda 48 horas en el estudio elegido. Si te late, pagas al recogerla. Si no, sin compromiso. ) : ( Tu prenda queda lista para recoger en el estudio elegido. Pasa cuando quieras dentro del horario. )}
); } function PickupModeCard({ active, onClick, title, hint, badge }) { return ( ); } const checkInputStyle = { padding:'14px 16px', border:`1px solid ${C.border}`, background:'#fff', color: C.fg, outline:'none', fontFamily:'JetBrains Mono, monospace', fontSize: 12, letterSpacing:'0.06em', }; function CheckField({ label, placeholder, type = 'text', full }) { return ( ); } function CheckoutPayment({ mobile, payment, setPayment, installments, setInstallments }) { const METHODS = [ { k:'card', title:'Tarjeta', hint:'Crédito o débito · 3 MSI' }, { k:'oxxo', title:'OXXO Pay', hint:'Pago en efectivo · 24h' }, { k:'spei', title:'SPEI', hint:'Transferencia bancaria' }, { k:'mp', title:'Mercado Pago', hint:'Saldo o tarjeta MP' }, ]; return (
{METHODS.map(m => ( setPayment(m.k)} title={m.title} hint={m.hint}/> ))}
{payment === 'card' ? (
Plan de pago
{[ { k:'single', label:'Un solo pago' }, { k:'msi3', label:'3 meses sin intereses' }, ].map(p => ( ))}
) : ( )}
); } function PaymentInfoBox({ method }) { const info = { oxxo: { title:'OXXO Pay', body:'Te generamos un código de barras. Acude a cualquier OXXO en las próximas 24 horas y paga en efectivo. Tu pedido se confirma al recibir el pago.' }, spei: { title:'SPEI', body:'Recibes los datos bancarios al confirmar. Realiza la transferencia desde tu app bancaria. El pago se acredita en minutos.' }, mp: { title:'Mercado Pago', body:'Te redirigimos a Mercado Pago para confirmar el pago con tu saldo o tarjeta guardada. Vuelves automáticamente al sitio.' }, }; const i = info[method]; if (!i) return null; return (
i
{i.title}
{i.body}
); } function CheckoutTerms({ mobile }) { return (
); } function CheckoutSummary({ mobile, subtotal, envio, total }) { const s = useStore(); const cart = s.cart; return ( ); } // ════════════════════════════════════════════════════════════════════ // CONFIRMACIÓN // ════════════════════════════════════════════════════════════════════ function Confirmacion({ mobile }) { const s = useStore(); // Differentiate by order type + pickup mode const isPickup = s.lastOrderType === 'pickup'; const isHold = isPickup && s.lastOrderMode === 'hold'; const studio = isPickup && s.lastOrderStudio ? STUDIOS.find(st => st.id === s.lastOrderStudio) : null; const order = 'CMD-26-001847'; const total = s.cart.reduce((sum, it) => sum + it.price * it.qty, 0); // ETA const today = new Date(); const eta1 = new Date(today); eta1.setDate(today.getDate() + 5); const eta2 = new Date(today); eta2.setDate(today.getDate() + 9); const etaStr = `Entre el ${eta1.getDate()} y ${eta2.getDate()} de ${eta2.toLocaleDateString('es-MX', { month:'long' })}`; return (
{/* Hero */}
✓ {isHold ? 'Apartado confirmado' : (isPickup ? 'Pago confirmado · Pickup' : 'Pago confirmado')}
{isHold ? (<>Apartada
por 48 horas.) : isPickup ? (<>Compra
finalizada.
Lista para recoger.) : (<>Pedido
realizado.)}
Orden ·{' '}#{order} / Total · ${total.toLocaleString('es-MX')} MXN / Confirmación al correo
{/* Tracking */}
{isPickup ? 'Detalles del apartado' : 'Estatus del pedido'}
{isPickup ? ( ) : (
)}
{/* Cross-sell estudio */}
Mientras te llega
Pasa por
el estudio.

Reserva una clase mientras tu pedido viaja. La gente que entrena con nosotros también es la que diseñó esto.

{ e.currentTarget.style.background = '#fff'; e.currentTarget.style.color = C.fg; }} onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#fff'; }}> Reservar clase en Commando Studio
Studio · Polanco · 04/24
[ Frame placeholder ]
{/* Actions */}
¿Algo no salió bien?
55 8525 0802 · hola@commandostudio.com
); } function PickupConfirmDetails({ mobile, studio, pickupDate, isHold, total }) { const dateLabel = pickupDate ? new Date(pickupDate + 'T00:00:00').toLocaleDateString('es-MX', { weekday:'long', day:'numeric', month:'long' }) : 'Por confirmar'; return (
{isHold ? 'Apartado por 48 horas' : 'Pagada · lista para recoger'}
{studio ? studio.name : 'Estudio'}
{studio ? studio.city : ''}
{isHold ? 'Presenta tu confirmación en recepción. Pruébala con calma. Si te late, pagas en estudio; si no, sin compromiso.' : 'Tu prenda ya está pagada y reservada en el estudio. Presenta tu confirmación en recepción y te la entregan al instante.'}
); } function InfoBlock({ label, value }) { return (
{label}
{value}
); } function TrackingLine({ current, mobile }) { const STEPS = ['Procesado','En producción','En camino','Entregado']; const pct = STEPS.length > 1 ? (current / (STEPS.length - 1)) * 100 : 0; return (
{/* connector line (back) */}
{/* connector line (filled) */}
{STEPS.map((label, i) => (
{i < current ? '✓' : (i === current ? '●' : '')}
{label}
))}
); } Object.assign(window, { Bolsa, Checkout, Confirmacion });