devops
a01ab55ebe
Identidad visual propia premium (ver docs-portal/docs/decisiones/0007-identidad-visual-propia.md, revision 2). Correccion de proceso respecto al intento anterior (v1.0.176, revertido): en vez de un token aislado en un solo boton, esta pasada toca de punta a punta los componentes que se ven juntos en la misma pantalla para que ninguna card quede a mitad de camino. - globals.css: paleta ciruela/carbon-oscuro/cobre/hueso (reemplaza cyan/magenta/yellow/blue, confirmado sin uso previo). Domine (titulares/precio) + Inter (UI/cuerpo) via next/font/google -- antes "Inter" era solo un fallback de CSS sin garantia real de carga. - button.tsx: variant "magenta" renombrada a "primary" (ya no es magenta, es ciruela solida) y su color redefinido -- renombrada en los 8 archivos que la usaban para no dejar un nombre enganoso. Radio base rounded-full -> rounded-lg, ring de foco retintado. - product-card.tsx: badges NUEVO/TOP/descuento en la paleta nueva (no mas fucsia/amarillo neon), precio en Domine, radio y sombra consistentes con el boton. - catalog-client.tsx: solo clases de color/radio en breadcrumb, filtro de precio, pills de filtro y boton de reset -- cero cambios de logica. Header, footer, home y pagina de producto/drawers quedan con la paleta anterior a proposito -- Sub-fases 2, 4 y 5 pendientes. Validado con `docker build --target builder` (npm ci + next build con typecheck completo) -- compila limpio.
23 lines
2.2 KiB
TypeScript
23 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { CheckCircle2, ShoppingBag, TriangleAlert, Truck } from "lucide-react";
|
|
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import type { Product } from "@/lib/headless/types";
|
|
import { formatMoney, LOW_STOCK_THRESHOLD } from "@/lib/utils";
|
|
import { useCartStore } from "@/store/cart-store";
|
|
|
|
export function ProductPurchase({ product }: { product: Product }) {
|
|
const [variantId, setVariantId] = useState(product.variants[0]?.id);
|
|
const addItem = useCartStore((state) => state.addItem);
|
|
const selectedVariant = product.variants.find((variant) => variant.id === variantId) ?? product.variants[0];
|
|
const lowStock =
|
|
selectedVariant?.inventoryQuantity !== null &&
|
|
selectedVariant?.inventoryQuantity !== undefined &&
|
|
selectedVariant.inventoryQuantity > 0 &&
|
|
selectedVariant.inventoryQuantity <= LOW_STOCK_THRESHOLD
|
|
? selectedVariant.inventoryQuantity
|
|
: null;
|
|
return <div><div className="mb-5 flex flex-wrap gap-2">{product.variants.map((variant) => <button key={variant.id} onClick={() => setVariantId(variant.id)} className={`rounded-full border px-4 py-2 text-sm font-bold ${variantId === variant.id ? "border-fuchsia-500 bg-fuchsia-50 text-fuchsia-700" : "border-slate-200"}`}>{variant.value}</button>)}</div><div className="mb-6 flex items-end gap-3"><strong className="text-3xl font-black">{formatMoney(product.price, product.currency)}</strong>{product.compareAtPrice && <del className="text-slate-400">{formatMoney(product.compareAtPrice, product.currency)}</del>}</div><Button variant="primary" size="lg" className="w-full" onClick={() => addItem(product, variantId)}><ShoppingBag />Añadir al carrito</Button><div className="mt-5 grid gap-3 rounded-2xl bg-slate-50 p-4 text-sm">{lowStock !== null ? <span className="flex items-center gap-2 font-bold text-amber-600"><TriangleAlert className="size-4" />Quedan {lowStock} unidades</span> : <span className="flex items-center gap-2 font-bold"><CheckCircle2 className="size-4 text-emerald-500" />Disponibilidad por confirmar</span>}<span className="flex items-center gap-2 font-bold"><Truck className="size-4 text-cyan-600" />Envíos nacionales</span></div></div>;
|
|
}
|