/* Centralized BRAND for the Pass Studio.
The vendor's shared identity (name, company, colors, logo, icon, hero) lives in one place on the
backend (GET/PUT /api/brand). This gate resolves the brand BEFORE the studio mounts: if the
vendor has none, it blocks with a "create your brand from a URL" onboarding; once a brand exists
the studio seeds its pass from it (see seedFromBrand in PassStudio). A Brand screen (reopenable
from the top bar) edits the shared brand; per-surface pass tweaks never touch it. */
// NB: these are top-level in a shared-global Babel script, so names must NOT collide with globals
// declared by sibling scripts (BuilderForm.jsx defines top-level GenerateDesignModal /
// RoleColorPicker) — hence the B-prefixed aliases.
const BR = window.SpoonityWalletPassDesignSystem_de20b8;
const BRolePicker = window.StudioRoleColorPicker;
const BImageUpload = window.StudioImageUpload;
const BIconUpload = window.StudioIconUpload;
const BFieldLabel = window.StudioFieldLabel;
const effColors = window.studioEffectiveColors;
const BGenerateModal = window.StudioGenerateDesignModal;
// GenerateDesignModal emits a pass-shaped patch (backgroundColor, logoSrc, brandColors, ...);
// translate it to the Brand's own field names (colors.background, logo, palette, ...).
function patchToBrand(patch) {
const eff = effColors({ backgroundColor: patch.backgroundColor });
return {
name: patch.name || patch.company || undefined,
company: patch.company || undefined,
colors: { background: eff.background, foreground: eff.foreground, label: eff.label },
logo: patch.logoSrc || undefined,
icon: patch.iconSrc || undefined,
hero: patch.stripSrc || undefined,
sourceUrl: patch.sourceUrl || undefined,
palette: patch.brandColors || undefined,
};
}
// ---- shared store: the current brand + a way to reopen the editor from anywhere (top bar) ----
window.SpoonityBrand = {
current: null,
get() { return this.current; },
// Resolve the merchant's display name at CALL TIME — never at script-load time, since that's
// before login/brand-fetch complete. Priority: Brand.company -> Brand.name -> the Spoonity
// vendor's name from the session -> a neutral fallback. Never the demo "Breakfast Bonanza".
// Null-safe: SpoonityBrand.current, window.SpoonityAuth, and the session may each be absent
// (e.g. this file isn't even loaded on every page that reuses BuilderForm.jsx).
merchantName() {
const b = window.SpoonityBrand.current;
if (b && b.company) return b.company;
if (b && b.name) return b.name;
try {
const session = window.SpoonityAuth && window.SpoonityAuth.getSession();
if (session && session.vendor && session.vendor.name) return session.vendor.name;
} catch (e) {}
return "Your Company";
},
_open: null,
setOpener(fn) { this._open = fn; },
openEditor() { if (this._open) this._open(); },
// Best guess at the merchant's website, for the "create your brand from a URL" step. The brand's
// own sourceUrl (set the last time they ran that step) wins; otherwise fall back to the website
// on their Spoonity vendor profile, which the backend now returns with the login catalog. Null
// when we know of neither — the field is then just empty, as before.
websiteUrl() {
const b = window.SpoonityBrand.current;
if (b && b.sourceUrl) return b.sourceUrl;
try {
const catalog = window.SpoonityAuth && window.SpoonityAuth.catalog && window.SpoonityAuth.catalog();
if (catalog && catalog.website) return catalog.website;
} catch (e) {}
return null;
},
listeners: [],
onChange(fn) { this.listeners.push(fn); return () => { this.listeners = this.listeners.filter((x) => x !== fn); }; },
_notify() { this.listeners.forEach((fn) => { try { fn(this.current); } catch (e) {} }); },
};
const brandEndpoint = () => (window.SpoonityAuth ? window.SpoonityAuth.getEndpoint() : "");
async function fetchBrand() {
const r = await fetch(brandEndpoint() + "/api/brand", { credentials: "include" });
if (r.status === 404) return { none: true };
if (!r.ok) throw new Error("brand fetch " + r.status);
return { brand: await r.json() };
}
async function saveBrand(body) {
const r = await fetch(brandEndpoint() + "/api/brand", {
method: "PUT", credentials: "include",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(body),
});
if (!r.ok) throw new Error((await r.json().catch(() => ({}))).error || ("brand save " + r.status));
return r.json();
}
/* The editable Brand screen (also the onboarding target). `mode` = "onboard" | "edit". */
function BrandScreen({ initial, mode, accent, onSaved, onClose }) {
const [b, setB] = React.useState(initial || {});
const [saving, setSaving] = React.useState(false);
const [err, setErr] = React.useState(null);
const [genOpen, setGenOpen] = React.useState(mode === "onboard");
// RoleColorPicker speaks the pass color vocabulary; adapt to/from the brand shape.
const pseudoPass = {
backgroundColor: (b.colors && b.colors.background) || undefined,
foregroundColor: (b.colors && b.colors.foreground) || undefined,
labelColor: (b.colors && b.colors.label) || undefined,
logoSrc: b.logo, iconSrc: b.icon, stripSrc: b.hero,
brandColors: b.palette || undefined,
};
const setColors = (patch) => setB((p) => {
const colors = { ...(p.colors || {}) };
if ("backgroundColor" in patch) colors.background = patch.backgroundColor;
if ("foregroundColor" in patch) colors.foreground = patch.foregroundColor;
if ("labelColor" in patch) colors.label = patch.labelColor;
return { ...p, colors };
});
const save = async () => {
setSaving(true); setErr(null);
try {
const saved = await saveBrand({
name: b.name || "", company: b.company || "",
colors: b.colors || null, logo: b.logo || null, icon: b.icon || null, hero: b.hero || null,
sourceUrl: b.sourceUrl || undefined,
palette: b.palette || undefined,
});
window.SpoonityBrand.current = saved;
onSaved(saved);
} catch (e) { setErr(e.message); setSaving(false); }
};
const field = { display: "flex", flexDirection: "column", gap: 6, marginBottom: 14 };
return ReactDOM.createPortal(
{ if (e.target === e.currentTarget) onClose(); }}>
{mode === "onboard" ? "Create your brand" : "Brand"}
{/* Always allow closing without saving (onboarding included) — the hub handles "no brand yet". */}
Your brand is shared by your wallet passes and your enrollment site. Set it once here; each design can still be customized on top of it.
Company
{/* This IS the brand editor, so brand-derived sources are usually empty here — the
placeholder falls through to the Spoonity vendor's name. Never prefills the VALUE. */}
setB((p) => ({ ...p, company: e.target.value }))} />
{/* No "Program name" field here on purpose — a company can run several differently-named
reward programs, so program name is edited per-pass, not centralized in the Brand. */}
Brand colors