/* Marketing — push a message to the lock screen of everyone holding one of your passes. This used to live at the bottom of the Analytics screen, reachable only after picking a pass and scrolling past the KPIs, chart, funnel and member table. Sending a message is a marketing job, not a reporting one, so it now sits on the Hub under "Marketing" and carries its own pass picker (Analytics had one for its own reasons; this panel no longer inherits it). Backend: POST /api/wallet/push (spoonity-passkit-integration) — 10 sends/hour, delivers to both Apple and Google holders and reports each platform's delivered/attempted separately. */ const BC_I18N = window.SpoonityI18n; const BC_ENDPOINT = () => (window.SpoonityAuth && window.SpoonityAuth.getEndpoint ? window.SpoonityAuth.getEndpoint() : 'https://wallet-api.spoonity.com'); async function broadcastPost(path, body) { const r = await fetch(`${BC_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; } /* BROADCAST-PICK-BEGIN — plain JS (no JSX) so test/broadcast-pick.test.js can slice it out and evaluate it directly, the same trick the field-grid tests use on the builder forms. */ // Which pass the composer is aimed at, given the published list and whatever was selected before. // An empty list means nothing is selectable at all; a selection that has since disappeared (the // pass was archived from the grid below while this panel sat open) falls back to the first pass // rather than leaving the composer pointed at a program that is gone. function resolveBroadcastTarget(programs, current) { const list = programs || []; if (!list.length) return { programId: '', selected: null, posterOnly: false }; const selected = list.find((p) => String(p.programId) === String(current)) || list[0]; return { programId: String(selected.programId), selected, posterOnly: selected.cardLayout === 'poster' }; } /* BROADCAST-PICK-END */ /* Collapsible broadcast panel — starts closed so it doesn't compete with the rest of the Hub for attention on every visit; "Compose"/"Close" toggle plus a chevron make the state legible. `programs` is [{ programId, name, cardLayout }] — published, non-archived passes only. An empty list is a real state (a vendor who has designed nothing yet), so the panel says so rather than offering a composer that could not send anywhere. */ function BroadcastPanel({ programs, accent }) { const [open, setOpen] = React.useState(false); const [programId, setProgramId] = React.useState(''); 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 list = programs || []; // Render from the resolved target, not from raw state: the list arrives async, so on the first // paint state is still '' while the target is already the first pass. Writing it back keeps // them in step for later renders without ever letting the two disagree on screen. const target = resolveBroadcastTarget(list, programId); React.useEffect(() => { if (target.programId !== programId) setProgramId(target.programId); }, [target.programId, programId]); const posterOnly = target.posterOnly; const send = async () => { if (!body.trim() || !target.programId || status === 'sending') return; setStatus('sending'); setError(''); try { const data = await broadcastPost('/api/wallet/push', { programId: target.programId, header: header.trim() || undefined, body: body.trim() }); setOutcome(data); setStatus('sent'); setBody(''); } catch (e) { setError(e.message || BC_I18N.T('bc_sendFailed')); setStatus('error'); } }; // Switching pass invalidates the "sent to 412 members" line above the composer — it reported a // send to a different audience. const pickProgram = (id) => { setProgramId(id); if (status === 'sent' || status === 'error') { setStatus('idle'); setOutcome(null); setError(''); } }; 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 && !!target.programId; return (
{open && (
{list.length === 0 ? (
{BC_I18N.T('bc_noPublishedPasses')}
) : ( {posterOnly && (
! {BC_I18N.T('bc_posterOnlyWarning')}
)} setHeader(e.target.value)} placeholder={BC_I18N.T('bc_headerPlaceholder')} maxLength={100} disabled={status === 'sending'} style={{ ...textarea, resize: 'none' }} />