{/* Saturation / value square */}

emit({ ...hsv, s: x, v: 1 - y }))} style={{ position: "relative", width: "100%", height: 150, borderRadius: 12, cursor: "crosshair", background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${hueColor})`, border: "1px solid rgba(0,0,0,.12)", touchAction: "none", }} >

{/* Hue slider */}

emit({ ...hsv, h: x * 360 }))} style={{ position: "relative", width: "100%", height: 16, borderRadius: 8, cursor: "ew-resize", touchAction: "none", background: "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)", border: "1px solid rgba(0,0,0,.12)", }} >

{/* Readout */}

{ let t = e.target.value; if (t && t[0] !== "#") t = "#" + t; t = "#" + t.slice(1).replace(/[^0-9a-fA-F]/g, "").slice(0, 6); setHexText(t); const next = hexToHsv(t); if (next) { lastHex.current = t; onChange(t); setHsv((p) => (next.s === 0 || next.v === 0) ? { ...next, h: p.h } : next); } }} onBlur={() => setHexText(curHex.toUpperCase())} />

); } function ColorSwatches({ value, onChange }) { const colors = ["#640c6f", "#ff7e3d", "#111827", "#2557cb", "#3f7d58", "#c3223f", "#cc6716", "#f8f6f4"]; return (

{colors.map((c) => (

); } function TwoCol({ children }) { return

{children}

; } /* Wallet-platform indicator. Apple is the active target; the Google button highlights on hover but is not wired up yet. */ function PlatformToggle({ onGoogle }) { const [hover, setHover] = React.useState(false); const cell = { width: 36, height: 30, borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", boxSizing: "border-box" }; return (

); } function CropModal({ src, crops, title = "Crop image", onCancel, onConfirm }) { const list = Array.isArray(crops) ? crops : [{ w: crops.w, h: crops.h }]; const [idx, setIdx] = React.useState(0); const sel = list[idx]; const ar = sel.w / sel.h; let frameW = 360, frameH = Math.round(frameW / ar); if (frameH > 280) { frameH = 280; frameW = Math.round(frameH * ar); } if (frameW > 360) { frameW = 360; frameH = Math.round(frameW / ar); } const [img, setImg] = React.useState(null); const [zoom, setZoom] = React.useState(1); const [pos, setPos] = React.useState({ x: 0, y: 0 }); React.useEffect(() => { const im = new Image(); im.onload = () => setImg(im); im.src = src; }, [src]); const cover = img ? Math.max(frameW / img.naturalWidth, frameH / img.naturalHeight) : 1; const dispW = img ? img.naturalWidth * cover * zoom : frameW; const dispH = img ? img.naturalHeight * cover * zoom : frameH; const clampPos = (p) => ({ x: Math.min(0, Math.max(frameW - dispW, p.x)), y: Math.min(0, Math.max(frameH - dispH, p.y)), }); React.useEffect(() => { setZoom(1); setPos({ x: 0, y: 0 }); }, [idx]); React.useEffect(() => { setPos((p) => clampPos(p)); /* eslint-disable-next-line */ }, [zoom, img, idx]); const onPointerDown = (e) => { e.preventDefault(); const start = { x: e.clientX, y: e.clientY, px: pos.x, py: pos.y }; const move = (ev) => setPos(clampPos({ x: start.px + (ev.clientX - start.x), y: start.py + (ev.clientY - start.y) })); const up = () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); }; window.addEventListener("pointermove", move); window.addEventListener("pointerup", up); }; const confirm = () => { const canvas = document.createElement("canvas"); canvas.width = sel.w; canvas.height = sel.h; const ctx = canvas.getContext("2d"); const s = sel.w / frameW; ctx.drawImage(img, pos.x * s, pos.y * s, dispW * s, dispH * s); onConfirm(canvas.toDataURL("image/png")); }; return (

{title}

Crops to {sel.w} × {sel.h} px · drag to reposition, slider to zoom

{list.length > 1 && (

({ value: i, label: c.label || `${c.w}×${c.h}` }))} value={idx} onChange={setIdx} />

)}

{img &&

}

setZoom(parseFloat(e.target.value))} style={{ width: "100%", margin: "14px 0", accentColor: "var(--border-focused, #ff7e3d)" }} />

Cancel Use image

); } function ImageUpload({ src, onUpload, onClear, label, hint, previewH = 60, cropTo }) { const inputRef = React.useRef(null); const [pending, setPending] = React.useState(null); const [dragging, setDragging] = React.useState(false); const onFile = (e) => { const file = e.target.files && e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = () => { if (cropTo) setPending(reader.result); else onUpload(reader.result); }; reader.readAsDataURL(file); e.target.value = ""; }; return (

{ e.preventDefault(); setDragging(true); }} onDragLeave={() => setDragging(false)} onDrop={(e) => { e.preventDefault(); setDragging(false); const file = e.dataTransfer.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = () => { if (cropTo) setPending(reader.result); else onUpload(reader.result); }; reader.readAsDataURL(file); }} style={{ width: "100%", height: previewH, borderRadius: 10, overflow: "hidden", border: dragging ? "2px dashed var(--border-focused, #ff7e3d)" : src ? "1px solid var(--border-primary)" : "1px dashed var(--border-primary)", background: "var(--surface-secondary)", display: "flex", alignItems: "center", justifyContent: "center", }}> {src ?

: {dragging ? "Drop to upload" : (hint || T("noImage"))}}

inputRef.current && inputRef.current.click()}> {src ? T("replace") : T("upload")} {src && {T("remove")}}

{pending && cropTo && ( setPending(null)} onConfirm={(dataUrl) => { onUpload(dataUrl); setPending(null); }} /> )}

); } /* A trash affordance that fades in over an image thumbnail on hover — removal is the rare action, so it stays out of the way until wanted. */ function ThumbRemoveButton({ show, onClear, title }) { return ( ); } function LogoUpload({ src, onUpload, onClear }) { const inputRef = React.useRef(null); const [pending, setPending] = React.useState(null); const [dragging, setDragging] = React.useState(false); const [hover, setHover] = React.useState(false); const onFile = (e) => { const file = e.target.files && e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = () => setPending(reader.result); reader.readAsDataURL(file); e.target.value = ""; }; return (

{T("logo")}

setHover(true)} onMouseLeave={() => setHover(false)} onDragOver={(e) => { e.preventDefault(); setDragging(true); }} onDragLeave={() => setDragging(false)} onDrop={(e) => { e.preventDefault(); setDragging(false); const file = e.dataTransfer.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = () => setPending(reader.result); reader.readAsDataURL(file); }} style={{ position: "relative", width: 76, height: 44, flexShrink: 0, borderRadius: 9, overflow: "hidden", border: dragging ? "2px dashed var(--border-focused, #ff7e3d)" : "1px solid var(--border-primary)", background: "var(--surface-secondary)", display: "flex", alignItems: "center", justifyContent: "center", }}> {src ?

: {T("noLogo")}} {src && }

inputRef.current && inputRef.current.click()}> {src ? T("replace") : T("upload")}

{pending && ( setPending(null)} onConfirm={(dataUrl) => { onUpload(dataUrl); setPending(null); }} /> )}

); } /* ---- color math: auto-contrast, blend, WCAG contrast ratio ---- Used to (a) derive sensible default value/label colors from the background, and (b) warn when the chosen colors won't be legible. */ function hexToRgbArr(hex) { if (!hex || hex[0] !== "#") return [0, 0, 0]; const h = hex.length === 4 ? hex.slice(1).split("").map((c) => c + c).join("") : hex.slice(1, 7); return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)); } function autoFgHex(bg) { const [r, g, b] = hexToRgbArr(bg); const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255; return lum > 0.62 ? "#1d1d1f" : "#ffffff"; } function blendHex(a, b, t) { const [ar, ag, ab] = hexToRgbArr(a), [br, bg, bb] = hexToRgbArr(b); const mix = (x, y) => Math.round(x + (y - x) * t).toString(16).padStart(2, "0"); return "#" + mix(ar, br) + mix(ag, bg) + mix(ab, bb); } function autoLabelHex(bg, fg) { return blendHex(fg || autoFgHex(bg), bg, 0.42); } function relLum(hex) { const f = hexToRgbArr(hex).map((v) => { v /= 255; return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); }); return 0.2126 * f[0] + 0.7152 * f[1] + 0.0722 * f[2]; } function contrastRatio(a, b) { const l1 = relLum(a), l2 = relLum(b); return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05); } function dataUrlToBase64(d) { return typeof d === "string" && d.indexOf(",") >= 0 ? d.slice(d.indexOf(",") + 1) : ""; } /* Resolve the three colors the backend needs, filling value/label defaults from the background when the designer hasn't overridden them. */ function effectiveColors(pass) { const background = pass.backgroundColor || "#640c6f"; const foreground = pass.foregroundColor || autoFgHex(background); const label = pass.labelColor || autoLabelHex(background, foreground); return { background, foreground, label }; } /* Square icon upload (180×180). Apple Wallet REQUIRES an icon — it shows in notifications — so this is a first-class, validated control. */ function IconUpload({ src, onUpload, onClear }) { const inputRef = React.useRef(null); const [pending, setPending] = React.useState(null); const [dragging, setDragging] = React.useState(false); const [hover, setHover] = React.useState(false); const onFile = (e) => { const file = e.target.files && e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = () => setPending(reader.result); reader.readAsDataURL(file); e.target.value = ""; }; return (

setHover(true)} onMouseLeave={() => setHover(false)} onDragOver={(e) => { e.preventDefault(); setDragging(true); }} onDragLeave={() => setDragging(false)} onDrop={(e) => { e.preventDefault(); setDragging(false); const file = e.dataTransfer.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = () => setPending(reader.result); reader.readAsDataURL(file); }} style={{ position: "relative", width: 44, height: 44, flexShrink: 0, borderRadius: 11, overflow: "hidden", border: dragging ? "2px dashed var(--border-focused, #ff7e3d)" : src ? "1px solid var(--border-primary)" : "1px dashed var(--border-primary)", background: "var(--surface-secondary)", display: "flex", alignItems: "center", justifyContent: "center", }}> {src ?

: 180²} {src && }

inputRef.current && inputRef.current.click()}>{src ? T("replace") : T("uploadIcon")}

{pending && ( setPending(null)} onConfirm={(d) => { onUpload(d); setPending(null); }} /> )}

); } /* Sample the dominant colors of one image (data URL) by downscaling it to a small canvas and bucketing pixels. Returns buckets sorted by frequency. */ function sampleImageColors(dataUrl) { return new Promise((resolve) => { if (!dataUrl) return resolve([]); const img = new Image(); img.onload = () => { try { const S = 44; const cv = document.createElement("canvas"); cv.width = S; cv.height = S; const ctx = cv.getContext("2d"); ctx.drawImage(img, 0, 0, S, S); const d = ctx.getImageData(0, 0, S, S).data; const buckets = new Map(); for (let i = 0; i < d.length; i += 4) { if (d[i + 3] < 128) continue; // skip transparent const r = d[i], g = d[i + 1], b = d[i + 2]; if (r >= 250 && g >= 250 && b >= 250) continue; // skip white padding const key = (r >> 4) + "," + (g >> 4) + "," + (b >> 4); let e = buckets.get(key); if (!e) { e = { r: 0, g: 0, b: 0, n: 0 }; buckets.set(key, e); } e.r += r; e.g += g; e.b += b; e.n++; } const arr = [...buckets.values()].map((e) => ({ r: e.r / e.n, g: e.g / e.n, b: e.b / e.n, n: e.n })); arr.sort((x, y) => y.n - x.n); resolve(arr); } catch (e) { resolve([]); } }; img.onerror = () => resolve([]); img.src = dataUrl; }); } /* Merge dominant colors across the brand images into a diverse palette of hex swatches (most-frequent first, near-duplicates dropped). */ function extractBrandPalette(sources) { const list = sources.filter(Boolean); if (!list.length) return Promise.resolve([]); return Promise.all(list.map(sampleImageColors)).then((lists) => { const all = []; lists.forEach((l) => { for (let i = 0; i < l.length; i++) all.push(l[i]); }); all.sort((a, b) => b.n - a.n); const dist = (a, b) => Math.abs(a.r - b.r) + Math.abs(a.g - b.g) + Math.abs(a.b - b.b); const chosen = []; for (const c of all) { if (chosen.every((x) => dist(x, c) > 50)) chosen.push(c); if (chosen.length >= 8) break; } return chosen.map((c) => "#" + [c.r, c.g, c.b].map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, "0")).join("")); }); } /* One picker that edits background / value / label colors via a role tab, and warns when value or label contrast against the background is too low. */ function RoleColorPicker({ pass, set, accent = "#ff7e3d" }) { const [extracted, setExtracted] = React.useState([]); // Re-derive a brand palette whenever the uploaded imagery changes. React.useEffect(() => { let alive = true; const srcs = [pass.logoSrc, pass.iconSrc, pass.stripSrc, pass.heroSrc].filter(Boolean); if (!srcs.length) { setExtracted([]); return; } extractBrandPalette(srcs).then((hexes) => { if (alive) setExtracted(hexes); }); return () => { alive = false; }; }, [pass.logoSrc, pass.iconSrc, pass.stripSrc, pass.heroSrc]); const brandSwatches = React.useMemo(() => { const seen = new Set(); const out = []; [...(pass.brandColors || []), ...extracted].forEach((c) => { const k = (c || "").toLowerCase(); if (k && !seen.has(k)) { seen.add(k); out.push(c); } }); return out.slice(0, 10); }, [pass.brandColors, extracted]); const [role, setRole] = React.useState("background"); const eff = effectiveColors(pass); const roleVal = { background: eff.background, foreground: eff.foreground, label: eff.label }[role]; const roleKey = { background: "backgroundColor", foreground: "foregroundColor", label: "labelColor" }[role]; const cFg = contrastRatio(eff.foreground, eff.background); const cLabel = contrastRatio(eff.label, eff.background); const warnValues = cFg < 3; const warnLabels = cLabel < 1.7; return (

set({ [roleKey]: v })} /> {brandSwatches.length > 0 && (

From your brand Auto

{brandSwatches.map((c, i) => (

)} {(warnValues || warnLabels) && (

! Low contrast — {warnValues ? "values" : "labels"} may be hard to read on this background. Pick colors with clearer contrast.

)}

); } /* ---- Generate Design from URL (Brandfetch API) ---- */ function GenerateDesignModal({ accent, onApply, onClose }) { const [url, setUrl] = React.useState(""); const [status, setStatus] = React.useState("idle"); // idle | loading | done | error const [error, setError] = React.useState(""); const extract = (input) => { try { let s = input.trim(); if (!/^https?:\/\//i.test(s)) s = "https://" + s; return new URL(s).hostname.replace(/^www\./, ""); } catch (e) { return null; } }; const toDataUrl = (src) => fetch(src) .then((r) => r.blob()) .then((blob) => new Promise((res, rej) => { const reader = new FileReader(); reader.onload = () => res(reader.result); reader.onerror = rej; reader.readAsDataURL(blob); })); // Extract dominant non-white color from a data URL via canvas sampling const extractColor = (imgUrl) => new Promise((resolve) => { const img = new Image(); // No crossOrigin needed — data URLs are same-origin and never taint the canvas img.onload = () => { try { const size = 64; const canvas = document.createElement("canvas"); canvas.width = size; canvas.height = size; const ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, size, size); const { data } = ctx.getImageData(0, 0, size, size); // Collect RGB pixels with decent saturation (skip near-white, near-black, near-grey) const buckets = {}; for (let i = 0; i < data.length; i += 4) { const r = data[i], g = data[i+1], b = data[i+2], a = data[i+3]; if (a < 128) continue; // skip transparent const max = Math.max(r,g,b), min = Math.min(r,g,b), diff = max - min; const brightness = (0.299*r + 0.587*g + 0.114*b) / 255; if (brightness > 0.90 || brightness < 0.08 || diff < 30) continue; // skip white/black/grey const key = `${Math.round(r/16)*16},${Math.round(g/16)*16},${Math.round(b/16)*16}`; buckets[key] = (buckets[key] || 0) + 1; } const best = Object.entries(buckets).sort((a,b) => b[1]-a[1])[0]; if (!best) { resolve(null); return; } const [r,g,b] = best[0].split(",").map(Number); resolve("#" + [r,g,b].map((n) => n.toString(16).padStart(2,"0")).join("")); } catch (e) { resolve(null); } }; img.onerror = () => resolve(null); img.src = imgUrl; }); const generate = async () => { const domain = extract(url); if (!domain) { setError("Enter a valid website URL."); return; } setStatus("loading"); setError(""); try { // Brand lookup goes through the backend proxy — the Brandfetch key stays server-side. const base = (window.SpoonityAuth && window.SpoonityAuth.getEndpoint()) || DEFAULT_ENDPOINT; const res = await fetch(`${base}/api/brand/${encodeURIComponent(domain)}`, { credentials: "include", }); if (!res.ok) throw new Error("Brand lookup responded " + res.status); const data = await res.json(); // Collect non-white brand colors; pick one at random for the background const brightnessPct = (hex) => { if (!hex || hex[0] !== "#") return 0; const h = hex.length === 4 ? hex.slice(1).split("").map((c) => c + c).join("") : hex.slice(1, 7); const [r, g, b] = [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)); return 0.299 * r + 0.587 * g + 0.114 * b; }; const palette = (data.colors || []).filter((c) => c.hex); const brandColorHexes = palette.map((c) => c.hex); // Random pick for background — exclude near-white so the pass is readable const nonWhite = brandColorHexes.filter((h) => brightnessPct(h) < 230); const bgColor = (nonWhite.length ? nonWhite : brandColorHexes)[Math.floor(Math.random() * (nonWhite.length || brandColorHexes.length))] || null; // All logo formats — split into square icons vs wide logos by aspect ratio const allFormats = (data.logos || []).flatMap((l) => l.formats || []).filter((f) => f.src); const isSquarish = (f) => f.width && f.height && (f.width / f.height) < 1.5; const isWide = (f) => !f.width || !f.height || (f.width / f.height) >= 1.5; const prefer = (arr, fmt) => arr.find((f) => f.format === fmt) || arr[0]; const iconFormat = prefer(allFormats.filter(isSquarish), "png") || prefer(allFormats, "png"); const logoFormat = prefer(allFormats.filter(isWide).filter((f) => f.format === "png" || f.format === "svg"), "png"); // Use the actual images[] array for the banner (widest by pixel area) const imageFormats = (data.images || []).flatMap((img) => img.formats || []).filter((f) => f.src); const bannerFormat = imageFormats.sort((a, b) => ((b.width || 0) * (b.height || 1)) - ((a.width || 0) * (a.height || 1)))[0]; const tryDataUrl = (src) => src ? toDataUrl(src).catch(() => null) : Promise.resolve(null); const [logoData, iconData, bannerData] = await Promise.all([ tryDataUrl(logoFormat && logoFormat.src), tryDataUrl(iconFormat && iconFormat.src), tryDataUrl(bannerFormat && bannerFormat.src), ]); const brandName = (data.name || "").trim(); const patch = {}; if (bgColor) patch.backgroundColor = bgColor; if (brandColorHexes.length) patch.brandColors = brandColorHexes; if (logoData) patch.logoSrc = logoData; if (iconData) patch.iconSrc = iconData; if (bannerData) patch.stripSrc = bannerData; if (brandName) { patch.company = brandName; patch.name = brandName + " Rewards"; } onApply(patch); setStatus("done"); } catch (e) { setError((e && e.message) || "Failed to fetch brand data."); setStatus("error"); } }; if (status === "done") { onClose(); return null; } return (

e.stopPropagation()} style={{ background: "var(--surface-base)", borderRadius: 16, padding: 22, width: 420, maxWidth: "100%", boxShadow: "var(--shadow-popup)" }}>

Generate design

Enter a website URL to pull in the brand's dominant color, logo, and icon automatically.

setUrl(e.target.value)} placeholder="https://yoursite.com" spellCheck={false} onKeyDown={(e) => { if (e.key === "Enter") generate(); }} /> {error &&

{error}

}

Cancel {status === "loading" ? "Fetching…" : "Generate"}

); } /* Build the exact JSON contract the backend's POST /design expects. */ const ENDPOINT_KEY = "spoonity_design_endpoint"; const DEFAULT_ENDPOINT = "https://wallet-api.spoonity.com"; // Customer-facing landing page, and the same page in design mode. Used as // fallbacks unless the backend returns landingUrl / designerUrl. const LANDING_CUSTOMER_URL = "https://spoonity-wallets.web.app"; const LANDING_DESIGNER_URL = "https://spoonity-wallets.web.app/?design=1"; function buildDesignPayload(pass) { const eff = effectiveColors(pass); // Apple uses company/name/stripSrc; Google uses programName/cardTitle/heroSrc. // Map both onto the one contract the backend expects. const payload = { company: (pass.company || pass.programName || "").trim(), name: (pass.name || pass.cardTitle || "").trim(), colors: { background: eff.background, foreground: eff.foreground, label: eff.label }, logo: dataUrlToBase64(pass.logoSrc), icon: dataUrlToBase64(pass.iconSrc), }; const strip = pass.stripSrc || pass.heroSrc; if (strip) payload.strip = dataUrlToBase64(strip); // Per-store Spoonity vendor id — comes from the authenticated session (set at login), // not user input. The backend re-derives/validates it from the session too; we send it so // the returned enrollUrl carries the right ?v=. const v = (window.SpoonityAuth && window.SpoonityAuth.activeVendorId()) || String(pass.vendorId || "").trim(); if (v) payload.vendorId = v; // Exact name of this store's points in Spoonity (e.g. "Cutters Points"). const lc = String(pass.loyaltyCurrency || "").trim(); if (lc) payload.loyaltyCurrency = lc; // Optional geofencing: pin up to 10 stores so the pass surfaces on the // customer's lock screen when they're physically near one (Apple PassKit // location relevance). Omitted entirely unless enabled with valid coords. const locs = (pass.locations || []) .map((l) => ({ lat: Number(l.lat), lon: Number(l.lon), ...(l.relevantText ? { relevantText: String(l.relevantText).slice(0, 120) } : {}), ...(l.name ? { name: String(l.name).slice(0, 60) } : {}), })) .filter((l) => Number.isFinite(l.lat) && Number.isFinite(l.lon) && Math.abs(l.lat) <= 90 && Math.abs(l.lon) <= 180) .slice(0, 10); if (pass.geofencingEnabled && locs.length) payload.locations = locs; // Custom field titles: let the merchant rename the pass field labels (e.g. // POINTS -> STARS) while the field's KEY and VALUE stay backend-driven. Only // fields the merchant actually renamed are sent, keyed by their stable key. const fieldLabels = {}; ["headerFields", "primaryFields", "secondaryFields", "auxiliaryFields"].forEach((g) => (pass[g] || []).forEach((f) => { const custom = (f && f.labelText ? String(f.labelText) : "").trim(); if (f && f.key && custom) fieldLabels[f.key] = custom.slice(0, 40); }) ); if (Object.keys(fieldLabels).length) payload.fieldLabels = fieldLabels; return payload; } /* "Create my pass" flow: validate, show the outgoing JSON, POST it to the backend's /design endpoint, then surface the returned templateId + enrollUrl. */ /* In-app JSON viewer — shows the JSON in an overlay with download + copy, instead of opening a separate browser tab. */ function JsonOverlay({ data, filename, onClose }) { const json = React.useMemo(() => JSON.stringify(data, null, 2), [data]); const [copied, setCopied] = React.useState(false); const mono = { fontFamily: "var(--font-mono, 'Source Code Pro', monospace)", fontSize: 12 }; const download = () => { const b = new Blob([json], { type: "application/json" }); const a = document.createElement("a"); a.href = URL.createObjectURL(b); a.download = filename; a.click(); setTimeout(() => URL.revokeObjectURL(a.href), 1000); }; const copyJson = () => { try { navigator.clipboard.writeText(json); setCopied(true); setTimeout(() => setCopied(false), 1500); } catch (e) {} }; return (

{ e.stopPropagation(); onClose(); }} style={{ position: "fixed", inset: 0, zIndex: 1400, background: "rgba(17,24,39,.55)", display: "flex", alignItems: "center", justifyContent: "center", padding: 20 }}>

e.stopPropagation()} style={{ background: "var(--surface-base)", borderRadius: 16, padding: 22, width: 640, maxWidth: "100%", maxHeight: "90vh", display: "flex", flexDirection: "column", boxShadow: "var(--shadow-popup)" }}>

{filename}

Download JSON {copied ? "Copied" : "Copy JSON"}

{json}

); } function PublishModal({ pass, accent, onClose }) { const [endpoint, setEndpoint] = React.useState(() => { try { const saved = localStorage.getItem(ENDPOINT_KEY); // Ignore a stale *.run.app value — cookie auth needs the same-site wallet-api.spoonity.com. if (saved && !/run\.app/.test(saved)) return saved; } catch (e) {} return DEFAULT_ENDPOINT; }); const [status, setStatus] = React.useState("idle"); // idle | sending | finishing | done | error const [result, setResult] = React.useState(null); const [error, setError] = React.useState(""); const [copied, setCopied] = React.useState(""); const [jsonView, setJsonView] = React.useState(null); // { data, filename } | null const [showAdvanced, setShowAdvanced] = React.useState(false); const [progress, setProgress] = React.useState(0); const resultRef = React.useRef(null); // Trickle the progress bar toward ~92% with a living, varying speed while the // backend works (Render cold starts can take ~20s). React.useEffect(() => { if (status !== "sending") return; let raf, last = performance.now(); const loop = (now) => { const dt = Math.min(0.05, (now - last) / 1000); last = now; setProgress((prev) => { const cap = 92; // Combine a slow swell with sharp occasional bursts so it sometimes // crawls and sometimes surges forward. const swell = 0.5 + 0.5 * Math.sin(now / 900); const burst = Math.pow(0.5 + 0.5 * Math.sin(now / 190), 4); const speed = 0.35 + 0.55 * swell + 1.6 * burst; const next = prev + (cap - prev) * Math.min(0.9, speed * dt); return next < cap ? next : cap; }); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, [status]); // Response arrived: race the bar to 100%, then reveal the result. React.useEffect(() => { if (status !== "finishing") return; setProgress(100); const id = setTimeout(() => { setResult(resultRef.current); setStatus("done"); }, 620); return () => clearTimeout(id); }, [status]); const payload = React.useMemo(() => buildDesignPayload(pass), [pass]); const problems = []; if (!payload.company) problems.push("Company name"); if (!payload.name) problems.push("Program name"); if (!payload.icon) problems.push("Icon image (Apple requires it)"); if (!payload.vendorId) problems.push("Sign in to select a vendor"); if (!payload.loyaltyCurrency) problems.push("Loyalty currency name"); const blocked = problems.length > 0; // Human-readable preview — real base64 is huge, so show its size instead. const sizeTag = (b64) => `«base64 PNG · ${Math.max(1, Math.round((b64.length * 0.75) / 1024))} KB»`; const prettyJson = React.useMemo(() => { const p = { ...payload, colors: payload.colors }; p.logo = payload.logo ? sizeTag(payload.logo) : ""; p.icon = payload.icon ? sizeTag(payload.icon) : ""; if (payload.strip) p.strip = sizeTag(payload.strip); return JSON.stringify(p, null, 2); }, [payload]); const copy = (text, tag) => { try { navigator.clipboard.writeText(text); setCopied(tag); setTimeout(() => setCopied(""), 1500); } catch (e) {} }; const openJson = (data, filename) => setJsonView({ data, filename }); const submit = async () => { if (blocked || !endpoint.trim()) return; try { localStorage.setItem(ENDPOINT_KEY, endpoint.trim()); } catch (e) {} setProgress(0); setStatus("sending"); setError(""); try { const url = endpoint.trim().replace(/\/+$/, "") + "/design"; const res = await fetch(url, { method: "POST", credentials: "include", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload), }); if (res.status === 401) { window.dispatchEvent(new Event("spoonity-auth-expired")); // session lost -> show login throw new Error("Your session expired — please sign in again."); } if (!res.ok) throw new Error("Backend responded " + res.status + " " + res.statusText); resultRef.current = await res.json(); setStatus("finishing"); // let the bar complete before revealing the link } catch (e) { setError((e && e.message) || "Request failed — check the endpoint URL and CORS."); setStatus("error"); } }; const fieldLabel = { fontSize: 11, fontWeight: 600, letterSpacing: ".05em", textTransform: "uppercase", color: "var(--typography-tertiary)" }; const mono = { fontFamily: "var(--font-mono, 'Source Code Pro', monospace)", fontSize: 12 }; return (

e.stopPropagation()} style={{ background: "var(--surface-base)", borderRadius: 16, padding: 22, width: 480, maxWidth: "100%", maxHeight: "90vh", overflowY: "auto", boxShadow: "var(--shadow-popup)" }}>

Create my pass

Sends this design to the backend, which builds the real Apple / Google Wallet pass.

{status === "done" && result ? (

✓

Your pass is ready Share this link so people can add your pass to their wallet.

{result.enrollUrl && (

{result.enrollUrl}

copy(result.enrollUrl, "enroll")} style={{ flex: 2, background: accent, color: "#fff", padding: "12px 0", fontWeight: 600 }}> {copied === "enroll" ? "Copied!" : "Copy link"} window.open(result.enrollUrl, "_blank")} style={{ flex: 1, padding: "12px 0" }}>Open

)} {/* Customer landing page + the link to design it. */}

Customer landing page

{result.landingUrl || LANDING_CUSTOMER_URL} copy(result.landingUrl || LANDING_CUSTOMER_URL, "landing")}>{copied === "landing" ? "Copied" : "Copy"}

The branded page where your customers sign up.

window.open(result.designerUrl || LANDING_DESIGNER_URL, "_blank")} style={{ alignSelf: "flex-start" }}>Design your landing page →

openJson({ ...payload, response: result }, "pass-design.json")}>Export JSON

) : (status === "sending" || status === "finishing") ? (

{status === "finishing" ? "Finishing up" : progress < 25 ? "Uploading your design…" : progress < 55 ? "Building the pass template…" : progress < 80 ? "Registering with the wallet…" : "Almost there…"} {Math.round(progress)}%

Building a real wallet pass. The first request after a while can take ~20s while the backend wakes up.

) : (

{blocked && (

Add before sending: {problems.join(", ")}.

)} {/* Developer details — endpoint + request body, collapsed by default. */}

{showAdvanced && (

Backend endpoint setEndpoint(e.target.value)} /> POSTs to {(endpoint.trim().replace(/\/+$/, "") || "") + "/design"}

Request body

{prettyJson}

Image data is abbreviated here for readability — Copy and Export JSON include the full base64.

openJson(payload, "pass-config.json")}>Export JSON

)}

{status === "error" &&

{error}

} {/* Primary action. */} {status === "sending" ? "Sending…" : "Send to backend"}

)} {jsonView && ( setJsonView(null)} /> )}

); } function LanguageSelect({ value, onChange }) { return (

{T("language")}

); } /* ---- Store locations (Apple Wallet geofencing) ---- Collect up to 10 store coordinates so the pass surfaces on a customer's lock screen when they're near one. Three ways to set coords, in order of ease: address search (free OSM Nominatim, no key), or manual lat/lon entry. */ const GEO_MAX = 10; const defaultRelevantText = (company) => `You're near ${(company || "us").trim()} — open your rewards pass`; function geoNum(v) { const n = Number(v); return Number.isFinite(n) ? n : NaN; } function rowValid(l) { const lat = geoNum(l.lat), lon = geoNum(l.lon); return Number.isFinite(lat) && Number.isFinite(lon) && Math.abs(lat) <= 90 && Math.abs(lon) <= 180; } /* One store row: address lookup + resolved/manual coords + label + message. */ function LocationRow({ index, loc, company, accent, onChange, onRemove }) { const [query, setQuery] = React.useState(loc.address || ""); const [searching, setSearching] = React.useState(false); const [searchMsg, setSearchMsg] = React.useState(""); // Debounced free-text geocode via OpenStreetMap Nominatim (no API key). // Note: browsers forbid setting User-Agent on fetch; Nominatim accepts the // automatic Referer/User-Agent the browser sends. Keep volume low + debounced. React.useEffect(() => { const q = query.trim(); if (q.length < 4) { setSearchMsg(""); return; } if (q === (loc.address || "").trim() && rowValid(loc)) return; // already resolved let alive = true; const id = setTimeout(() => { setSearching(true); setSearchMsg(""); fetch(`https://nominatim.openstreetmap.org/search?format=json&limit=1&q=${encodeURIComponent(q)}`, { headers: { "Accept-Language": "en" }, }) .then((r) => r.json()) .then((data) => { if (!alive) return; setSearching(false); if (data && data[0]) { const hit = data[0]; onChange({ address: q, lat: parseFloat(hit.lat).toFixed(6), lon: parseFloat(hit.lon).toFixed(6), name: loc.name || (hit.display_name || "").split(",")[0] || "", }); setSearchMsg("Found: " + (hit.display_name || "").slice(0, 70)); } else { setSearchMsg("No match — refine the address or enter coordinates below."); } }) .catch(() => { if (alive) { setSearching(false); setSearchMsg("Lookup failed — enter coordinates manually."); } }); }, 700); return () => { alive = false; clearTimeout(id); }; // eslint-disable-next-line }, [query]); const valid = rowValid(loc); const hasCoords = String(loc.lat || "").length > 0 || String(loc.lon || "").length > 0; const rt = loc.relevantText || ""; return (

STORE {index + 1}

Find by address setQuery(e.target.value)} /> {(searching || searchMsg) && ( {searching ? "Searching…" : searchMsg} )}

Latitude onChange({ lat: e.target.value })} />

Longitude onChange({ lon: e.target.value })} />

{hasCoords && !valid && ( Enter finite coordinates in range (lat −90…90, lon −180…180). This store won't be sent until fixed. )} Store label · optional onChange({ name: e.target.value })} /> Lock-screen message · optional onChange({ relevantText: e.target.value })} /> 90 ? "var(--warning, #cc6716)" : "var(--typography-tertiary)" }}> {rt.length > 90 ? "Keep it short — long messages get truncated on the lock screen." : `${rt.length}/90 chars · shown when the customer is near this store.`}

); } function StoreLocations({ pass, set, accent = "#ff7e3d", open, onToggle }) { const enabled = !!pass.geofencingEnabled; const locations = pass.locations || []; const company = pass.company || pass.programName || ""; const updateLoc = (i, patch) => set({ locations: locations.map((l, idx) => (idx === i ? { ...l, ...patch } : l)) }); const removeLoc = (i) => set({ locations: locations.filter((_, idx) => idx !== i) }); const addLoc = () => { if (locations.length >= GEO_MAX) return; set({ locations: [...locations, { name: "", address: "", lat: "", lon: "", relevantText: defaultRelevantText(company) }] }); }; const validCount = locations.filter(rowValid).length; const hint = enabled ? `${locations.length}/${GEO_MAX}` : T("off"); return (

Your pass shows up on a customer's lock screen when they're near one of these stores.

Enable lock-screen geofencing set({ geofencingEnabled: on })} />

{enabled && (

{locations.map((loc, i) => ( updateLoc(i, patch)} onRemove={() => removeLoc(i)} /> ))} = GEO_MAX} onClick={addLoc}> {locations.length === 0 ? "Add a store" : "Add another store"} {locations.length >= GEO_MAX && ( Apple allows up to {GEO_MAX} locations per pass. )} {locations.length > 0 && validCount < locations.length && ( {validCount} of {locations.length} {locations.length === 1 ? "store has" : "stores have"} valid coordinates — only valid ones are sent. )}

i Apple controls the radius (~100m) and shows a lock-screen suggestion, not a guaranteed push. The customer needs Location Services and Wallet enabled (on by default). These {GEO_MAX === 10 ? "up to 10" : GEO_MAX} stores apply to everyone holding this pass. Apple Wallet today; Google support is a later step.

)}

); } function BuilderForm({ pass, setPass, accent = "#ff7e3d", onGoogle, lang = "en", onLang, onUndo, onRedo, canUndo, canRedo }) { const set = (patch) => setPass({ ...pass, ...patch }); const setField = (group, i, key, val) => { const arr = (pass[group] || []).map((f, idx) => idx === i ? { ...f, [key]: val } : f); set({ [group]: arr }); }; const [publishing, setPublishing] = React.useState(false); const [generating, setGenerating] = React.useState(false); const [showSecondary, setShowSecondary] = React.useState(false); const [draftStatus, setDraftStatus] = React.useState("idle"); // idle | saving | saved | error const [shareUrl, setShareUrl] = React.useState(() => { const id = localStorage.getItem("spoonity_share_id_apple"); return id ? `${location.origin}${location.pathname}?share=${id}` : null; }); const [copied, setCopied] = React.useState(false); const [loadOpen, setLoadOpen] = React.useState(false); const [saveAsOpen, setSaveAsOpen] = React.useState(false); const handleSaveDraft = async () => { setDraftStatus("saving"); try { const shareId = await window.saveDraftToSupabase(pass, "apple"); const url = `${location.origin}${location.pathname}?share=${shareId}`; setShareUrl(url); setDraftStatus("saved"); setTimeout(() => setDraftStatus("idle"), 3000); } catch (e) { console.error("Save draft failed:", e); setDraftStatus("error"); setTimeout(() => setDraftStatus("idle"), 3000); } }; const handleCopy = () => { if (!shareUrl) return; navigator.clipboard.writeText(shareUrl); setCopied(true); setTimeout(() => setCopied(false), 2000); }; // Accordion: all sections collapsed by default; opening one closes the rest. const [openSection, setOpenSection] = React.useState(null); const sec = (id) => ({ open: openSection === id, onToggle: () => setOpenSection((cur) => (cur === id ? null : id)) }); // Pin value/label colors to explicit hex once a background is known, so the // live preview and the JSON we send the backend always agree. React.useEffect(() => { if (pass.foregroundColor && pass.labelColor) return; const eff = effectiveColors(pass); set({ foregroundColor: eff.foreground, labelColor: eff.label }); // eslint-disable-next-line }, [pass.backgroundColor]); const styles = [ { value: "storeCard", label: T("ptStore") }, { value: "coupon", label: T("ptCoupon") }, { value: "eventTicket", label: T("ptTicket") }, { value: "boardingPass", label: T("ptBoarding") }, { value: "generic", label: T("ptGeneric") }, ]; const isBoarding = pass.passStyle === "boardingPass"; const stripStyle = ["storeCard", "coupon", "eventTicket"].includes(pass.passStyle); return (

{T("editPass")}

{onLang && (

)}

{T("company")} set({ company: e.target.value })} placeholder="Breakfast Bonanza" />

{T("programName")} set({ name: e.target.value })} placeholder="Breakfast Bonanza Rewards" />

Spoonity Vendor

{(() => { const s = window.SpoonityAuth && window.SpoonityAuth.getSession(); return s && s.vendor ? `${s.vendor.name} · ${s.vendor.id}` : "Not signed in"; })()}

Passes are created for your signed-in Spoonity vendor.

Loyalty currency name set({ loyaltyCurrency: e.target.value })} /> Exact name of this store's points in Spoonity.

set({ passStyle: v })} />

set({ logoSrc: dataUrl })} onClear={() => set({ logoSrc: null })} />

{T("iconRequired")} set({ iconSrc: dataUrl })} onClear={() => set({ iconSrc: null })} />

{stripStyle ? ( set({ stripSrc: dataUrl })} onClear={() => set({ stripSrc: null })} /> ) : ( {T("bannerHelp")} )}

Rename the titles shown on the pass (e.g. POINTS → STARS). The values stay linked to your data, so the backend is unchanged.

{[ { group: "headerFields", index: 0 }, { group: "secondaryFields", index: 0 }, { group: "secondaryFields", index: 1 }, ].map(({ group, index }) => { const f = (pass[group] || [])[index]; if (!f) return null; return ( setField(group, index, "labelText", e.target.value)} /> ); })}

{T("showBarcode")} set({ barcode: on ? { format: "qr", message: "SPN-4821-0093", altText: "4821 0093 5567" } : null })} />

{pass.barcode && ( set({ barcode: { ...pass.barcode, format: v } })} /> )}

setPublishing(true)}>{T("createPass")} {draftStatus === "saving" ? "Saving…" : draftStatus === "saved" ? "Saved ✓" : draftStatus === "error" ? "Error" : T("saveDraft")} setSaveAsOpen(true)}>Save as

{/* Share */} {/* Load */}

{loadOpen && setLoadOpen(false)} onLoad={(draft) => { setPass(draft.pass_json); localStorage.setItem("spoonity_draft_id_apple", draft.id); localStorage.setItem("spoonity_share_id_apple", draft.share_id); setShareUrl(`${location.origin}${location.pathname}?share=${draft.share_id}`); setLoadOpen(false); }} />} {saveAsOpen && setSaveAsOpen(false)} onSaved={(shareId, savedPass) => { setPass(savedPass); setShareUrl(`${location.origin}${location.pathname}?share=${shareId}`); }} />} {publishing && setPublishing(false)} />} {generating && ( { set(patch); setGenerating(false); }} onClose={() => setGenerating(false)} /> )}

); } window.BuilderForm = BuilderForm; /* Animated editor overlay: a slot-editing panel that scales/fades in on top. */ function StudioModal({ title, onClose, children }) { const [shown, setShown] = React.useState(false); React.useEffect(() => { const id = requestAnimationFrame(() => setShown(true)); return () => cancelAnimationFrame(id); }, []); return (

e.stopPropagation()} style={{ background: "var(--surface-base)", borderRadius: 16, width: 340, maxWidth: "100%", boxShadow: "var(--shadow-popup)", padding: 20, transform: shown ? "translateY(0) scale(1)" : "translateY(14px) scale(.96)", opacity: shown ? 1 : 0, transition: "transform .22s cubic-bezier(.2,.8,.2,1), opacity .2s ease", }}>

{title}

{children}

); } /* Edits one pass slot (image / single text / label+value field) in a modal. */ function SlotEditor({ slot, pass, setPass, onClose }) { if (!slot) return null; let body; if (slot.kind === "image") { body = ( setPass({ ...pass, [slot.target]: d })} onClear={() => setPass({ ...pass, [slot.target]: null })} /> ); } else if (slot.kind === "text") { body = (

{slot.title} setPass({ ...pass, [slot.target]: e.target.value })} />

); } else if (slot.kind === "field") { const arr = pass[slot.group] || []; const f = arr[slot.index] || { label: "", value: "" }; const upd = (key, val) => { const a = arr.slice(); while (a.length <= slot.index) a.push({ label: "", value: "" }); a[slot.index] = { ...a[slot.index], [key]: val }; setPass({ ...pass, [slot.group]: a }); }; const clear = () => upd("value", ""); body = (

Title upd("labelText", e.target.value)} /> Display title only — the value stays linked to your data.

Value upd("value", e.target.value)} />

{f.value && ( Clear value )}

); } return ( {body}

Done

); } // Shared studio building-blocks reused by sibling studios (e.g. Google). Object.assign(window, { StudioSection: Section, StudioFieldLabel: FieldLabel, StudioSegmented: Segmented, StudioTwoCol: TwoCol, StudioColorPicker: ColorPicker, StudioColorSwatches: ColorSwatches, StudioCropModal: CropModal, StudioImageUpload: ImageUpload, StudioPlatformToggle: PlatformToggle, StudioModal: StudioModal, StudioSlotEditor: SlotEditor, StudioRoleColorPicker: RoleColorPicker, StudioIconUpload: IconUpload, StudioPublishModal: PublishModal, studioEffectiveColors: effectiveColors, StudioGenerateDesignModal: GenerateDesignModal, StudioStoreLocations: StoreLocations, StudioThumbRemoveButton: ThumbRemoveButton, });