Account

1// Account page (`/account`) — the member's own profile + log out. Gate it with <RequireAuth> in the
2// router (STEP 4) so a visitor is bounced to /login. Reads the member from useMember(); shows the
3// identity-only fallback when the Members Area app isn't installed (member is null but loggedIn is
4// true — that's setup, not a bug). Styled with base44 design tokens (shadcn Tailwind classes).
5import { useMember } from "@/context/MemberContext";
6
7export default function Account() {
8  const { member, logout } = useMember();
9
10  const name = member?.profile?.nickname
11    || [member?.contact?.firstName, member?.contact?.lastName].filter(Boolean).join(" ")
12    || member?.loginEmail
13    || "Member";
14  const email = member?.loginEmail;
15  const photo = member?.profile?.photo?.url;
16
17  return (
18    <main className="max-w-[420px] mx-auto py-8 px-4">
19      <div className="flex flex-col items-center gap-3 text-center p-6 bg-card border border-border rounded-lg shadow-sm">
20        <div className="w-[72px] h-[72px] rounded-full overflow-hidden bg-background border border-border">
21          {photo && <img src={photo.startsWith("//") ? `https:${photo}` : photo} alt="" className="w-full h-full object-cover" />}
22        </div>
23        <h1 className="font-display m-0 text-[22px]">{name}</h1>
24        {email && <p className="text-muted-foreground m-0">{email}</p>}
25        {!member && (
26          <p className="text-muted-foreground m-0 text-[13px] leading-normal">
27            You're signed in. Install the Wix Members Area app to show profile details here.
28          </p>
29        )}
30        <button type="button" onClick={() => logout()}
31          className="mt-2 py-2.5 px-6 cursor-pointer text-sm font-semibold bg-primary text-primary-foreground border-none rounded-sm"
32        >Log out</button>
33      </div>
34    </main>
35  );
36}