/* Analytics — pick one of your published passes, see who's registered to it. Everything on this screen (KPIs, chart, funnel, breakdowns) is scoped to one date-range window and compared against the equal-length window immediately before it, driven by a single GET /v1/programs/:id/overview?range= call (see spoonity-passkit-integration's members.js — computeOverview). Cohort semantics: "this window" means the member joined in it; the wallet-adds/device/retention breakdowns report that cohort's CURRENT status, not a historical snapshot, since the backend only keeps latest-state docs. Google has zero retention/install signal at all (never fabricated — always shown as explicitly not measurable, matching this codebase's existing values elsewhere). */ const ANALYTICS_ENDPOINT = () => (window.SpoonityAuth && window.SpoonityAuth.getEndpoint ? window.SpoonityAuth.getEndpoint() : 'https://wallet-api.spoonity.com'); async function analyticsFetch(path) { const r = await fetch(`${ANALYTICS_ENDPOINT()}${path}`, { credentials: 'include' }); const json = await r.json().catch(() => ({})); if (!r.ok) throw new Error(json.error || `Request failed (${r.status})`); return json; } async function analyticsPost(path, body) { const r = await fetch(`${ANALYTICS_ENDPOINT()}${path}`, { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body), }); const json = await r.json().catch(() => ({})); if (!r.ok) throw new Error(json.error || `Request failed (${r.status})`); return json; } async function analyticsDelete(path) { const r = await fetch(`${ANALYTICS_ENDPOINT()}${path}`, { method: 'DELETE', credentials: 'include' }); const json = await r.json().catch(() => ({})); if (!r.ok) throw new Error(json.error || `Request failed (${r.status})`); return json; } // A rate only earns a percentage once its denominator can actually carry one — below that, a // raw count-of-count is more honest than a jumpy, meaningless "33%" from a sample of 3. const MIN_N = 30; const fmt = (n) => (n ?? 0).toLocaleString(); const smallN = (den) => den > 0 && den < MIN_N; const rateStr = (num, den) => (den >= MIN_N ? Math.round((num / den) * 100) + '%' : den > 0 ? fmt(num) + ' of ' + fmt(den) : '—'); // Signed percentage change for a plain count vs its previous-window count — null when there's // nothing to compare against (previous window empty, or "all time" has no prior period at all). function pctDelta(cur, prev) { if (prev == null || !(prev > 0)) return null; const p = Math.round(((cur - prev) / prev) * 100); return { text: (p > 0 ? '+' : '') + p + '%', good: p >= 0 }; } // Percentage-POINT change between two rates (each already num/den, both required to clear // MIN_N — a point swing between two unreliable rates is itself unreliable). function ptsDelta(curNum, curDen, prevNum, prevDen) { if (!(curDen >= MIN_N) || !(prevDen >= MIN_N)) return null; const d = Math.round(((curNum / curDen) - (prevNum / prevDen)) * 1000) / 10; if (d === 0) return null; return { text: (d > 0 ? '+' : '') + d + ' pts', good: d >= 0 }; } /* Collapsible broadcast panel — starts closed so it doesn't compete with the KPIs/chart for attention on every visit; "Compose"/"Close" toggle plus a chevron make the state legible. */ function BroadcastPanel({ programId, accent, posterOnly = false }) { const [open, setOpen] = React.useState(false); const [header, setHeader] = React.useState(''); const [body, setBody] = React.useState(''); const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error const [error, setError] = React.useState(''); const [outcome, setOutcome] = React.useState(null); const send = async () => { if (!body.trim() || status === 'sending') return; setStatus('sending'); setError(''); try { const data = await analyticsPost('/api/wallet/push', { programId, header: header.trim() || undefined, body: body.trim() }); setOutcome(data); setStatus('sent'); setBody(''); } catch (e) { setError(e.message || 'Send failed.'); setStatus('error'); } }; const textarea = { width: '100%', padding: '10px 12px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'var(--surface-secondary, #f8f6f4)', color: 'var(--typography-primary)', fontFamily: 'var(--font-sans)', fontSize: 13, resize: 'vertical', boxSizing: 'border-box' }; const sendable = body.trim().length > 0; return (
{open && (
{posterOnly && (
! This pass uses Apple's Poster layout, which doesn't support lock-screen messages yet -- Apple members won't see this. Google members will still get it.
)} setHeader(e.target.value)} placeholder="Header (optional, Google only)" maxLength={100} disabled={status === 'sending'} style={{ ...textarea, resize: 'none' }} />