Member Menu

1// Header account control — the members analog of a cart button. Reads useMember() and renders the
2// session state: a "Log in" link for a visitor, or the member's name + a log-out button once signed
3// in. Drop it into the Header you build (STEP 4), same as the storefront's CartButton. Pure UI reading
4// useMember + base44 design tokens (shadcn Tailwind classes) — render it as-is; don't wrap it in your own auth logic.
5import { Link } from "react-router-dom";
6import { useMember } from "@/context/MemberContext";
7
8export default function MemberMenu() {
9  const { loggedIn, member, loading, logout } = useMember();
10
11  if (loading) return <span className="text-muted-foreground text-sm">…</span>;
12
13  if (!loggedIn) {
14    return (
15      <Link to="/login" className="text-primary no-underline text-sm font-semibold">Log in</Link>
16    );
17  }
18
19  // member may be null when logged in but the Members Area app isn't installed — fall back to a
20  // generic label rather than assuming a profile (see INSTRUCTIONS → identity vs. profile).
21  const name = member?.profile?.nickname || member?.contact?.firstName || member?.loginEmail || "Account";
22
23  return (
24    <div className="flex items-center gap-3">
25      <Link to="/account" className="text-foreground no-underline text-sm font-semibold">
26        {name}
27      </Link>
28      <button type="button" onClick={() => logout()}
29        className="bg-transparent border border-border rounded-full py-1 px-3 text-[13px] cursor-pointer text-muted-foreground"
30      >Log out</button>
31    </div>
32  );
33}