feat(ecommerce): ADR 0009 - checkout con direccion y seleccion de envio
Siguiente corte tras el carrito real: pagina /checkout de 3 pasos (direccion -> envio -> confirmar) contra el Store API real, usando la shipping option que ya se verifico en produccion. Endpoints nuevos (setShippingAddress, getShippingOptions, addShippingMethod) probados en vivo con un carrito de prueba real antes de escribir el codigo -- direccion, opciones de envio y total ya confirmados correctos (80.000 + 5.000 = 95.000). El pago (PayU custom) sigue sin existir, asi que el ultimo paso sigue siendo WhatsApp -- pero ahora el mensaje incluye direccion, metodo de envio y total real en vez de solo la lista de productos. El boton del CartDrawer pasa de abrir WhatsApp directo a llevar a /checkout.
This commit is contained in:
1 parent
cdab538cfb
commit
bb2c0bbe85
7 files changed
+310
-8
No files matched your search
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { Minus, Plus, ShoppingBag, Trash2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
@@ -17,13 +18,6 @@ export function CartDrawer() {
|
||||
const progress = pricedItems ? Math.min(100, (subtotal / FREE_SHIPPING_THRESHOLD) * 100) : 0;
|
||||
const count = items.reduce((sum, item) => sum + item.quantity, 0);
|
||||
|
||||
const checkout = () => {
|
||||
const lines = items.map((item) => `• ${item.quantity} x ${item.product.name}`).join("\n");
|
||||
const message = `Hola Ari Shopping 👋\nQuiero consultar disponibilidad para:\n\n${lines}\n\nNombre:\nCiudad:\nForma de entrega:`;
|
||||
void navigator.clipboard?.writeText(message);
|
||||
window.open(process.env.NEXT_PUBLIC_WHATSAPP_URL ?? "https://wa.link/rvcqqc", "_blank", "noopener,noreferrer");
|
||||
};
|
||||
|
||||
return (
|
||||
<Sheet open={isOpen} onOpenChange={(open) => { if (!open) closeCart(); }}>
|
||||
<SheetContent>
|
||||
@@ -49,7 +43,15 @@ export function CartDrawer() {
|
||||
<div className="space-y-4 border-t border-slate-100 p-6">
|
||||
<div><div className="mb-2 flex justify-between text-xs font-bold text-slate-600"><span>{pricedItems ? "Progreso para envío gratis" : "Cotización personalizada"}</span><span>{pricedItems ? `${Math.round(progress)}%` : "Por confirmar"}</span></div><Progress value={progress} /></div>
|
||||
<div className="flex items-center justify-between"><span className="font-bold text-slate-600">Subtotal</span><strong className="text-xl font-black">{pricedItems ? formatMoney(subtotal) : "Por confirmar"}</strong></div>
|
||||
<Button variant="primary" size="lg" className="w-full" disabled={!items.length} onClick={checkout}>Continuar por WhatsApp</Button>
|
||||
{/* Button asChild + disabled no funciona sobre un <a> (:disabled
|
||||
es pseudo-clase de elementos de formulario, un Link nunca la
|
||||
cumple) -- se ramifica en vez de confiar en el prop disabled
|
||||
sobre un Link. */}
|
||||
{items.length > 0 ? (
|
||||
<Button asChild variant="primary" size="lg" className="w-full"><Link href="/checkout" onClick={closeCart}>Confirmar pedido</Link></Button>
|
||||
) : (
|
||||
<Button variant="primary" size="lg" className="w-full" disabled>Confirmar pedido</Button>
|
||||
)}
|
||||
<Button variant="ghost" className="w-full" disabled={!items.length} onClick={clearCart}>Vaciar carrito</Button>
|
||||
</div>
|
||||
</SheetContent>
|
||||
|
||||
Reference in new issue
Block a user