feat(ecommerce): icono de cuenta visible en mobile + indicador de sesion
Pedido explicito del usuario tras probar el login real: el boton de 'Mi cuenta' estaba oculto en mobile (hidden sm:inline-flex, solo alcanzable desde el menu hamburguesa). Pasa a estar siempre visible en el header, y agrega un punto verde cuando hay sesion iniciada -- mismo patron visual que los badges de cantidad de carrito/favoritos, pero de presencia (con sesion o sin ella), no de conteo.
This commit is contained in:
1 parent
bc530c98e6
commit
2e47f7b55d
1 file changed
+13
-1
@@ -10,6 +10,7 @@ import { Button } from "@/components/ui/button";
|
|||||||
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet";
|
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet";
|
||||||
import type { Category, Product } from "@/lib/headless/types";
|
import type { Category, Product } from "@/lib/headless/types";
|
||||||
import { useCartStore } from "@/store/cart-store";
|
import { useCartStore } from "@/store/cart-store";
|
||||||
|
import { useCustomerStore } from "@/store/customer-store";
|
||||||
import { useWishlistStore } from "@/store/wishlist-store";
|
import { useWishlistStore } from "@/store/wishlist-store";
|
||||||
|
|
||||||
type CategoryNode = Category & { children: Category[] };
|
type CategoryNode = Category & { children: Category[] };
|
||||||
@@ -34,6 +35,9 @@ export function Navbar({ products, categories }: { products: Product[]; categori
|
|||||||
const openWishlist = useWishlistStore((state) => state.openWishlist);
|
const openWishlist = useWishlistStore((state) => state.openWishlist);
|
||||||
const count = cartHydrated ? items.reduce((sum, item) => sum + item.quantity, 0) : 0;
|
const count = cartHydrated ? items.reduce((sum, item) => sum + item.quantity, 0) : 0;
|
||||||
const wishlistCount = wishlistHydrated ? wishlistProducts.length : 0;
|
const wishlistCount = wishlistHydrated ? wishlistProducts.length : 0;
|
||||||
|
const customer = useCustomerStore((state) => state.customer);
|
||||||
|
const customerHydrated = useCustomerStore((state) => state.hasHydrated);
|
||||||
|
const isLoggedIn = customerHydrated && customer !== null;
|
||||||
|
|
||||||
const tree = useMemo(() => buildCategoryTree(categories), [categories]);
|
const tree = useMemo(() => buildCategoryTree(categories), [categories]);
|
||||||
// Derivado de los productos reales (no de un endpoint de colecciones):
|
// Derivado de los productos reales (no de un endpoint de colecciones):
|
||||||
@@ -62,7 +66,15 @@ export function Navbar({ products, categories }: { products: Product[]; categori
|
|||||||
</Link>
|
</Link>
|
||||||
<PredictiveSearch />
|
<PredictiveSearch />
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Button variant="outline" size="icon" aria-label="Mi cuenta" className="hidden border-slate-300 bg-white text-slate-900 hover:border-ari-coral hover:bg-ari-coral/10 sm:inline-flex" onClick={() => setAccountOpen(true)}><UserRound /></Button>
|
{/* Antes escondido en mobile (solo alcanzable desde el menu
|
||||||
|
hamburguesa) -- pedido explicito del usuario: visible
|
||||||
|
siempre en el header, con un punto verde cuando hay sesion
|
||||||
|
iniciada (mismo patron que el badge de cantidad del
|
||||||
|
carrito/favoritos, pero de presencia, no de conteo). */}
|
||||||
|
<Button variant="outline" size="icon" aria-label={isLoggedIn ? "Mi cuenta (sesión iniciada)" : "Mi cuenta"} className="relative inline-flex border-slate-300 bg-white text-slate-900 hover:border-ari-coral hover:bg-ari-coral/10" onClick={() => setAccountOpen(true)}>
|
||||||
|
<UserRound />
|
||||||
|
{isLoggedIn && <span className="absolute -right-1 -top-1 size-3 rounded-full border-2 border-white bg-emerald-500" />}
|
||||||
|
</Button>
|
||||||
<Button variant="outline" size="icon" aria-label={`Favoritos: ${wishlistCount}`} className="relative hidden border-slate-300 bg-white text-slate-900 hover:border-ari-coral hover:bg-ari-coral/10 sm:inline-flex" onClick={openWishlist}>
|
<Button variant="outline" size="icon" aria-label={`Favoritos: ${wishlistCount}`} className="relative hidden border-slate-300 bg-white text-slate-900 hover:border-ari-coral hover:bg-ari-coral/10 sm:inline-flex" onClick={openWishlist}>
|
||||||
<Heart />
|
<Heart />
|
||||||
{wishlistCount > 0 && <span className="absolute -right-1.5 -top-1.5 grid size-5 place-items-center rounded-full bg-ari-marino text-[10px] font-black text-white">{wishlistCount}</span>}
|
{wishlistCount > 0 && <span className="absolute -right-1.5 -top-1.5 grid size-5 place-items-center rounded-full bg-ari-marino text-[10px] font-black text-white">{wishlistCount}</span>}
|
||||||
|
|||||||
Reference in new issue
Block a user