/* Post-login home. After the operator signs in and a vendor is selected (SpoonityAuthGate), this hub lets them choose what to manage: their Brand or their wallet Passes. Styled with the macondo design tokens (surface/typography/border CSS vars + the DS Button) so it matches the studios. (The Enrollment Page card -- the customer-facing signup microsite at wallets.spoonity.com -- was removed from here; that app itself is untouched, just no longer linked from this hub.) */ const HUB = window.SpoonityWalletPassDesignSystem_de20b8; const HUB_AUTH = window.SpoonityAuth; /* An 11x11-ish arrow glyph reused by both card types below. */ function ArrowIcon({ size = 15, style }) { return ( ); } /* Setup-sequence card (Brand, Wallet Passes) — vertical layout, step number baked into the title itself ("1 · Brand"), and a single dynamic badge: "Start here" on whichever step is the first one not yet done, a green "Done" on ones that are, and nothing at all on steps further out in the sequence that aren't next yet. That's deliberately different from badging every unfinished card the same way — it points at ONE next action instead of listing what's outstanding. Keeps a bottom cta-text + arrow (unlike ToolCard below); the whole card is still the only click target, this is just its label. */ function SetupCard({ icon, title, desc, cta, onClick, accent, badge }) { const [hover, setHover] = React.useState(false); const isNext = badge === "next"; return ( ); } /* Ongoing-tool card (Integrations, Analytics) — deliberately a different shape from SetupCard (horizontal, no step number, no bottom cta text — just a trailing arrow) so these read as a different KIND of thing at a glance, not two more steps in the same sequence. */ function ToolCard({ icon, title, desc, onClick, accent }) { const [hover, setHover] = React.useState(false); return ( ); } const ICON_BTN = { display: "flex", alignItems: "center", justifyContent: "center", width: 28, height: 28, borderRadius: 8, border: "1px solid var(--border-primary)", background: "var(--surface-base)", color: "var(--typography-tertiary)", cursor: "pointer", padding: 0, }; function PassMiniCard({ draft, onClick, onAnalytics, accent, onArchive, onRestore, onPublish }) { const p = draft.displayPassJson || draft.pass_json || {}; const isGoogle = draft.platform === "google"; // Apple and Google passes use different field names for the same concepts. const bg = p.backgroundColor || "#4b2d6e"; const fg = isGoogle ? "#ffffff" : (p.foregroundColor || "#ffffff"); const label = isGoogle ? fg : (p.labelColor || fg); const name = (isGoogle ? p.cardTitle : p.name) || p.draft_name || "Untitled pass"; const company = (isGoogle ? p.programName : p.company) || ""; const logoSrc = p.logoSrc; const [hover, setHover] = React.useState(false); const updated = draft.updated_at ? new Date(draft.updated_at).toLocaleDateString(undefined, { month: "short", day: "numeric" }) : ""; // Only a truly published pass has a real program for Analytics to scope to -- an unpublished // draft (even one that reuses a name/design) has no programId at all. const canViewAnalytics = draft.published && !!draft.programId; return (
{canViewAnalytics && ( )} {onArchive && ( )} {/* Only on a card that has never been published: an archived pass with a programId is already live, so Restore alone is what "back to published" means for it — sending it through the publish modal again would needlessly re-upload its images and re-register its site domain. */} {onPublish && !draft.programId && ( )} {onRestore && ( )}
); } // Two-letter initials for the account-chip avatar (e.g. "Buckhead Life Restaurant Group" -> "BL"). function initials(name) { if (!name) return ""; return name.trim().split(/\s+/).slice(0, 2).map((w) => w[0].toUpperCase()).join(""); } function SpoonityHub({ onPasses, onIntegrations, onAnalytics, accent = "#F47920" }) { const session = (HUB_AUTH && HUB_AUTH.getSession && HUB_AUTH.getSession()) || {}; const vendor = session.vendor || {}; const vendors = session.vendors || []; const [brand, setBrand] = React.useState((window.SpoonityBrand && window.SpoonityBrand.get()) || null); const [createdPasses, setCreatedPasses] = React.useState(null); // null = loading const [showArchived, setShowArchived] = React.useState(false); const activePasses = (createdPasses || []).filter((d) => !d.archived); const archivedPasses = (createdPasses || []).filter((d) => d.archived); // Reflect brand creation/edits made from the Brand screen without a reload. React.useEffect(() => { if (!window.SpoonityBrand || !window.SpoonityBrand.onChange) return; return window.SpoonityBrand.onChange((b) => setBrand(b)); }, []); // Show every saved pass — draft or published — as its own card, badged accordingly. Sourced // from two places: the editor's drafts (full-fidelity pass_json, includes ones never published) // and the vendor's real published programs (wallet_programs — catches anything published through // a path that never left a draft doc behind, e.g. an older publish). Where a draft and a program // both exist for the same programId, prefer the draft's pass_json: it's the exact state the // studio last saved, not a reconstruction, so clicking back in reopens it faithfully (including // fields the reconstruction can't round-trip, like custom field placement or the barcode toggle). React.useEffect(() => { const endpoint = window.SpoonityAuth ? window.SpoonityAuth.getEndpoint() : ""; const db = window.SpoonityDrafts; Promise.all([ fetch(endpoint + "/v1/programs?includeArchived=1", { credentials: "include" }).then((r) => r.json()).catch(() => ({ programs: [] })), db ? db.list({ includeArchived: true }).catch(() => []) : Promise.resolve([]), ]).then(([programsData, drafts]) => { const programs = programsData.programs || []; // A draft's pass_json is now { draft_name, apple, google } — one doc covers both platforms. // Older drafts saved before that change are still flat (a single platform's fields directly // on pass_json, tagged via the doc's own `platform`). Normalize to the flat shape // PassMiniCard already expects — preferring Apple's fields for display when both exist, // same convention used elsewhere (Analytics' program picker, etc.) — so nothing downstream // needs to know about the two possible shapes. const normalize = (pj, taggedPlatform) => { if (!pj) return { display: {}, programId: null, isGoogle: taggedPlatform === "google" }; if (pj.apple || pj.google) { const display = pj.apple || pj.google || {}; const programId = (pj.apple && pj.apple.programId) || (pj.google && pj.google.programId) || null; return { display: { ...display, draft_name: pj.draft_name || display.draft_name }, programId, isGoogle: !pj.apple && !!pj.google }; } return { display: pj, programId: pj.programId || null, isGoogle: taggedPlatform === "google" }; }; const draftProgramIds = new Set( drafts.map((d) => normalize(d.pass_json, d.platform).programId).filter(Boolean).map(String) ); // A draft carries its own copy of an archived pass's design, so it has to be badged from the // program's archived state too — otherwise archiving would leave the draft card behind. const archivedIds = new Set((programsData.archivedProgramIds || []).map(String)); const draftEntries = drafts.map((d) => { const { display, programId, isGoogle } = normalize(d.pass_json, d.platform); return { // pass_json stays the RAW doc value (still { draft_name, apple, google } for unified // drafts) — reopening this card passes it straight through as initialDraft, and // PassStudio needs the full shape to seed BOTH platforms, not just whichever one this // card happens to display. displayPassJson is the flattened view PassMiniCard renders. // programId was previously computed here (for the published/dedup logic below) but // never attached to the entry itself, so a draft-originated published card had no // programId to deep-link its own "view analytics" icon to (see PassMiniCard). id: d.id, share_id: d.share_id, updated_at: d.updated_at, pass_json: d.pass_json, displayPassJson: display, platform: isGoogle ? "google" : "apple", published: !!programId, programId, // Two independent sources: a published pass is archived on its program, an // unpublished draft on its own doc (POST /drafts/:id/archive) — it has no program to // carry the flag. Either one shelves the card. archived: d.archived === true || archivedIds.has(String(programId)), }; }); const programOnlyEntries = programs .filter((p) => !draftProgramIds.has(String(p.programId))) .map((p) => ({ id: p.programId, programId: p.programId, updated_at: p.updatedAt, pass_json: p, displayPassJson: p, platform: "apple", published: true, archived: archivedIds.has(String(p.programId)) })); const merged = [...draftEntries, ...programOnlyEntries] .sort((a, b) => new Date(b.updated_at || 0) - new Date(a.updated_at || 0)); setCreatedPasses(merged); }).catch(() => setCreatedPasses([])); }, []); // Archiving retires a pass from this grid without deleting it — anyone already holding it keeps // a working pass, and Restore brings it back. Which store holds the flag depends on the card: // a published pass is shelved on its program (so it also drops out of Analytics and the vendor // site's auto-pick), while a draft that was never published has no program and is shelved on // its own draft doc. Before, only the former had a control at all, so an abandoned draft could // only be hard-deleted from the studio's Load dialog — losing the design. // The studio keeps a per-vendor "draft I'm currently editing" pointer in localStorage, and // restores it on mount / autosaves back into it. Shelving that draft has to drop the pointer, // or the next visit to the studio reseeds the preset defaults (the archived draft is filtered // out of the restore list) and then autosaves those defaults straight over the design that was // just archived. Clearing it starts the studio fresh instead, which is what retiring a pass // means anyway. const forgetActiveDraft = (matches) => { if (!window.SpoonityAuth || !window.SpoonityAuth.draftKey) return; try { const key = window.SpoonityAuth.draftKey("spoonity_draft_id"); const activeId = localStorage.getItem(key); if (!activeId) return; if (!(createdPasses || []).some((d) => d.id === activeId && matches(d))) return; localStorage.removeItem(key); localStorage.removeItem(window.SpoonityAuth.draftKey("spoonity_share_id")); } catch (e) {} }; const setArchived = (entry, archived) => { const programId = entry && entry.programId; const endpoint = window.SpoonityAuth ? window.SpoonityAuth.getEndpoint() : ""; const request = programId ? fetch(endpoint + "/v1/programs/" + encodeURIComponent(programId) + "/archive", { method: "POST", credentials: "include", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ archived }), }).then((r) => { if (!r.ok) throw new Error("request failed"); return r.json(); }) // Guarded on the METHOD, not just the object: every script here is cache-busted by hand // (index.html's ?v=N), so a browser holding an older _firestore.js alongside a fresh // _hub.jsx — .jsx is served no-cache, .js isn't — would otherwise throw an uncaught // TypeError on click instead of surfacing anything to the operator. : (window.SpoonityDrafts && typeof window.SpoonityDrafts.setArchived === "function") ? window.SpoonityDrafts.setArchived(entry.id, archived) : Promise.reject(new Error("draft store out of date")); // Match on the same key the request used: programId groups a draft card with its published // program (both must move together), while a draft-only card is identified by its doc id. const matches = (d) => (programId ? String(d.programId) === String(programId) : d.id === entry.id); request .then(() => { if (archived) forgetActiveDraft(matches); setCreatedPasses((cur) => (cur || []).map((d) => (matches(d) ? { ...d, archived } : d))); }) .catch(() => window.alert(archived ? "Could not archive that pass." : "Could not restore that pass.")); }; // "Publish" on an archived draft: lift the archive first, then hand it to the studio with the // publish modal already open. Publishing itself has to happen there — it needs the studio's // assembled two-platform state, and its own validation (icon, currency, company) reports what's // missing if the design was abandoned half-finished. Un-archiving first also means a cancelled // publish leaves the draft back in the main grid rather than hidden away again, which is what // an operator who just asked to publish it expects to find. const publishDraft = (entry) => { if (!entry) return; const done = () => onPasses(entry, { publish: true }); if (window.SpoonityDrafts && typeof window.SpoonityDrafts.setArchived === "function") { window.SpoonityDrafts.setArchived(entry.id, false).then(done, done); } else { done(); } }; const signOut = () => { try { HUB_AUTH.logout(); } catch (e) {} location.reload(); }; const switchVendor = (id) => { if (!id || id === vendor.id) return; Promise.resolve(HUB_AUTH.switchVendor(id)).then(() => location.reload()).catch(() => location.reload()); }; const hasBrand = !!brand; // Passes step is "done" once at least one pass has been saved (draft or published) — but only // once createdPasses has actually loaded (null = still loading); don't flash "not done" first. const hasPasses = Array.isArray(createdPasses) && activePasses.length > 0; const ICONS = { // Distinct silhouettes per card — a palette (Brand), a card (Passes), a globe (Enrollment // Page), a plug (Integrations), a chart (Analytics). Previously Brand used a 5-point star, // which at a glance in the peach icon well read as just another generic sparkle like the // others — a real palette reads as "brand/color" even before the label loads. brand: , passes: , integrations: , analytics: , }; return (
{/* 100vh, not 100% — #root (the mount point in index.html) has no explicit height of its own, so a percentage here has nothing to resolve against and silently falls back to auto, i.e. exactly as tall as the content. On any page shorter than the viewport that left a hard edge where the gray just stopped, with plain white below it down to the bottom of the screen. 100vh is viewport-relative regardless of ancestor heights, and still only a MINIMUM — taller content (e.g. a long "Created passes" grid) still grows the page past one viewport height exactly as before. */} {/* Header */}
Spoonity
{/* Account chip — a real pill with an initials avatar and a chevron (matching a proper account switcher), max-width + ellipsis + title tooltip so a long vendor name truncates cleanly instead of just getting cut off against the sign-out button. */} {vendor.name && (
{initials(vendor.name)} {vendor.name} {vendors.length > 1 && ( {/* A transparent native switchVendor(e.target.value)} title="Switch vendor" aria-label="Switch vendor" style={{ position: "absolute", inset: 0, opacity: 0, cursor: "pointer", fontSize: 13 }}> {vendors.map((v) => )} )}
)}
{/* Content */}

What would you like to manage?

{/* Vendor name already lives in the header chip now, so it doesn't need repeating here too. */}

Your brand powers both your wallet passes and your enrollment website.

{/* Setup sequence — Brand, then Passes, roughly in the order a new operator needs them. A dedicated section (rather than equal cards mixed with the ongoing tools below) gives first-timers an actual path, and an exact 2-item grid never leaves a dangling empty cell the way more items in one fluid grid could. Exactly one card gets "Start here": the first step in order that isn't done yet -- once both are done, no card is highlighted, which is honest rather than guessing at a next step. (A third "Enrollment page" card used to link out to the separate wallets.spoonity.com app here -- removed along with siteUrl/WALLET_DESIGNER_URL; that app itself is untouched, just no longer linked from this hub.) */}

Set up your program

window.SpoonityBrand && window.SpoonityBrand.openEditor()} /> onPasses(null)} />
{/* Ongoing tools — not a sequence, so no "Start here"/step badges; these get used indefinitely after setup, not once and done. */}

Tools

onAnalytics()} />
{/* Created passes */}

Created passes

{createdPasses && createdPasses.length > 0 && ( )}

Every saved pass, published or still a draft — click one to reopen it in the studio.

{createdPasses === null ? (
Loading passes…
) : activePasses.length === 0 && archivedPasses.length === 0 ? (
No saved passes yet.
) : (
{activePasses.map((draft) => ( onPasses(draft)} onAnalytics={onAnalytics} onArchive={(entry) => setArchived(entry, true)} /> ))}
{archivedPasses.length > 0 && (
{showArchived && (
{archivedPasses.map((draft) => ( onPasses(draft)} onAnalytics={onAnalytics} onRestore={(entry) => setArchived(entry, false)} onPublish={publishDraft} /> ))}
)}
)} )}
); } /* Top-level view switch: hub <-> pass studio <-> integrations <-> analytics. Brand is a modal overlay (from the gate); the wallet website designer is a separate app opened in a new tab. */ function SpoonityApp() { const [view, setView] = React.useState("hub"); const [initialDraft, setInitialDraft] = React.useState(null); // Mirrors initialDraft/setInitialDraft above -- lets a specific pass's "view analytics" icon // (PassMiniCard) open straight into that pass's own dashboard instead of always landing on // Analytics' generic "pick a pass" picker. const [initialAnalyticsProgram, setInitialAnalyticsProgram] = React.useState(null); // opts.publish comes from the Hub's "Publish" control on an archived draft — it opens the studio // with the publish modal already up, so one click from the archived section lands on the // standard publish confirmation instead of the editor. const [autoPublish, setAutoPublish] = React.useState(false); const openPasses = (draft, opts) => { setInitialDraft(draft || null); setAutoPublish(!!(opts && opts.publish)); setView("passes"); }; const openAnalytics = (programId, name) => { setInitialAnalyticsProgram(programId ? { programId, name } : null); setView("analytics"); }; if (view === "passes") return { setInitialDraft(null); setAutoPublish(false); setView("hub"); }} initialDraft={initialDraft} autoPublish={autoPublish} />; if (view === "integrations") return setView("hub")} />; if (view === "analytics") return { setInitialAnalyticsProgram(null); setView("hub"); }} initialProgramId={initialAnalyticsProgram && initialAnalyticsProgram.programId} initialProgramName={initialAnalyticsProgram && initialAnalyticsProgram.name} />; return setView("integrations")} onAnalytics={openAnalytics} />; } window.SpoonityHub = SpoonityHub; window.SpoonityApp = SpoonityApp;