// VELOUR — signed-in dashboard top bar + shared dashboard pieces.
const { Avatar, Badge } = window.VelourDesignSystem_380ed4;
const DASH_FRESH = !!window.VELOUR_FRESH;
// Who the header should say you are. A real session wins; otherwise fall back to
// the name Begin collected on this device, and only then to the demo identity.
// Showing "Jennifer" to a signed-in member reads as the wrong account entirely —
// it is cosmetic in the code and not at all cosmetic to the person looking at it.
// Avatar takes the first letter of the first two words, so a real name gives the
// initials you'd expect ("Miguel Demo 3" reads MD). An account with no name yet —
// which is every magic-link signup until onboarding fills it in — has only an
// email, and "malvez825+test@…" is one word and one letter. Split the local part
// on its punctuation so those accounts get two initials too.
function nameFromEmail(email) {
const local = String(email || "").split("@")[0];
const parts = local.split(/[._+\-\d]+/).filter(Boolean).slice(0, 2);
return parts.length ? parts.join(" ") : local;
}
function dashIdentity(plan) {
const m = plan && typeof plan.member === "function" ? plan.member() : null;
if (m) {
const named = (m.name || "").trim();
if (named) return { full: named, short: named.split(/\s+/)[0] };
const derived = nameFromEmail(m.email);
return { full: derived, short: derived.split(/\s+/)[0] };
}
if (DASH_FRESH) {
try {
const onb = JSON.parse(localStorage.getItem("velour_fresh_onboarding_v1") || "null");
const n = onb && (onb.name || "").trim();
if (n) return { full: n, short: n.split(/\s+/)[0] };
} catch (e) {}
return { full: "You", short: "You" };
}
return { full: "Jennifer Sichenzia", short: "Jennifer" };
}
function DashTopBar({ onNavigate, section = "dashboard", onSection }) {
const [menuOpen, setMenuOpen] = React.useState(false);
// Re-renders when /api/me answers, which is when the real name arrives.
const plan = window.useVelourPlan ? window.useVelourPlan() : null;
const [identity, setIdentity] = React.useState(() => dashIdentity(window.velourPlan));
React.useEffect(() => { setIdentity(dashIdentity(window.velourPlan)); }, [plan]);
// Backup lives here rather than in a pillar: it covers everything, not one section.
const [backupNote, setBackupNote] = React.useState(null);
const restoreRef = React.useRef(null);
const doSave = () => {
setBackupNote("Preparing…");
window.velourBackup.save()
.then((c) => setBackupNote(`Saved — ${c.keys} record${c.keys === 1 ? "" : "s"} and ${c.photos} photo${c.photos === 1 ? "" : "s"}.`))
.catch(() => setBackupNote("Couldn't save a backup just now."));
};
const doRestore = (file) => {
if (!file) return;
setBackupNote("Restoring…");
window.velourBackup.restore(file)
.then((r) => { setBackupNote(`Restored ${r.keys} record${r.keys === 1 ? "" : "s"} and ${r.photos} photo${r.photos === 1 ? "" : "s"}. Reloading…`); setTimeout(() => window.location.reload(), 1200); })
.catch((e) => setBackupNote(e.message || "That file could not be restored."));
};
const menuRef = React.useRef(null);
React.useEffect(() => {
if (!menuOpen) return;
const onDoc = (e) => { if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false); };
document.addEventListener("mousedown", onDoc);
return () => document.removeEventListener("mousedown", onDoc);
}, [menuOpen]);
const go = (v) => (e) => { e.preventDefault(); onNavigate && onNavigate(v); };
const goSection = (v) => (e) => { e.preventDefault(); onSection && onSection(v); };
const pick = (v) => (e) => { e.preventDefault(); setMenuOpen(false); onSection && onSection(v); };
// Pillars live on the left.
const items = [
{ label: "Dashboard", view: "dashboard" },
{ label: "Rituals", view: "rituals" }, { label: "Wellness", view: "wellness" }, { label: "Wardrobe", view: "wardrobe" }, { label: "Efficiency", view: "efficiency" },
];
// Education & Blog live in the menu by the user.
const menuItems = [
{ label: "Education", view: "education", icon: "graduation-cap" },
{ label: "Blog", view: "blog", icon: "envelope-open", locked: DASH_FRESH },
];
const menuActive = menuItems.some((m) => m.view === section);
// MANAGE MEMBERSHIP LIVES HERE BECAUSE THE DASHBOARD HAS NO PRICING LINK. The
// portal button was added to the pricing page first, which is where a member
// decides to *start* paying — but a member who has already paid is signed in, and
// a signed-in member never sees that page. So the only route to cancelling was
// one that only non-members could find, which is the same asymmetry the portal
// was built to remove, one layer up.
//
// Paid members only: someone on the free plan has no Stripe customer, and
// /api/portal answers them with a sentence rather than a page. Better not to
// offer the door than to offer one that explains itself away.
const isPaid = !!(plan && plan.tier === "paid");
// WHAT A MEMBER WHO HAS CANCELLED SEES. Until this, nothing: they cancelled, and
// the product carried on exactly as before — every feature open, no acknowledgement,
// no date, for as long as a year on an annual membership. The silence was the worst
// part of the cancellation flow, and it was the only part that was entirely ours.
//
// status stays `active` because they paid for the period and keep it, so `endsOn`
// from /api/me is the only signal. When it is absent this falls back to the renewal
// date, which is worth saying out loud too — a member should be able to find out
// when they will next be charged without opening Stripe.
const billingNote = (() => {
const b = (window.velourPlan && window.velourPlan.billing && window.velourPlan.billing()) || null;
const when = (iso) => {
if (!iso) return null;
const d = new Date(iso);
return isNaN(d) ? null : d.toLocaleDateString(undefined, { day: "numeric", month: "long", year: "numeric" });
};
const ends = b && when(b.endsOn);
if (ends) return { ending: true, text: `Cancelled. Everything stays open until ${ends}.` };
const renews = b && when(b.renewsOn);
if (renews) return { ending: false, text: `Renews ${renews}. Your card, your invoices, and cancelling — all here.` };
return { ending: false, text: "Your card, your invoices, and cancelling — all in one place." };
})();
const [portalBusy, setPortalBusy] = React.useState(false);
const openPortal = async () => {
if (portalBusy) return;
let token = null;
try {
const sess = window.velourAuth ? await window.velourAuth.ensureFresh() : null;
token = sess && sess.access_token ? sess.access_token : null;
} catch (e) { token = null; }
if (!token) return;
setPortalBusy(true);
try {
const r = await fetch("/api/portal", {
method: "POST",
headers: { "Content-Type": "application/json", Authorization: "Bearer " + token },
});
const body = await r.json().catch(() => ({}));
if (r.ok && body.url) { window.location.href = body.url; return; }
setPortalBusy(false);
} catch (e) { setPortalBusy(false); }
};
return (
{/* This bar is built from inline styles, which cannot carry a media query —
so at phone width it simply overflowed: 553px of it, with Wardrobe and
Efficiency off the right edge and no way to reach them. These rules need
!important because an inline style beats a stylesheet. The nav scrolls
sideways rather than collapsing into another menu: four destinations is
few enough to swipe, and hiding pillars behind a control is what made
them unreachable in the first place. */}