{title || 'Challenge title'} +{xp} XP

{copy || 'Customer-facing copy appears here.'}

1 of 3 · how it looks in the customer app

); } // ─── Challenge editor drawer ───────────────────────────────────────── const TR_FLD = { width:'100%', boxSizing:'border-box', background:'rgba(255,255,255,0.55)', border:'1px solid var(--soft-line)', borderRadius:10, padding:'10px 12px', fontFamily:'var(--font-body)', fontSize:13, color:'var(--fg-primary)', outline:'none' }; const TR_LBL = { fontFamily:'var(--font-display)', fontWeight:700, fontSize:10.5, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--warm-stone)', marginBottom:7, display:'block' }; function TrailEditor({ app, ch, onClose, onSave }) { const isNew = !ch.id; const [type, setType] = React.useState(ch.type || 'order'); const [title, setTitle] = React.useState(ch.title || ''); const [copy, setCopy] = React.useState(ch.copy || ''); const [mark, setMark] = React.useState(ch.mark || 3); const [xp, setXp] = React.useState(ch.xp || 150); const [budget, setBudget] = React.useState(String(ch.budget || 100)); const [days, setDays] = React.useState(ch.days || 7); const [status, setStatus] = React.useState(ch.status || 'draft'); const T = CH_TYPES[type]; const rulesJson = { type, value_mark: mark, unit: T.unit, proof: T.wire==='live' ? 'auto_order_events' : 'manual_pending_contract', reward_xp: xp, budget_cap: +budget||0, duration_days: days }; const save = () => { if (!title.trim()) { app.toast('Give the challenge a title'); return; } onSave({ ...ch, id: ch.id || 'tc-'+Math.random().toString(16).slice(2,6), type, mark, days, title:title.trim(), copy:copy.trim(), xp, budget:+budget||0, status, spent:ch.spent||0, completions:ch.completions||0, since:ch.since||'today' }); }; return ReactDOM.createPortal(

e.stopPropagation()} style={{ width:'100%', maxWidth:460, height:'100%', background:'var(--bg-surface)', boxShadow:'var(--shadow-lg)', display:'flex', flexDirection:'column', animation:'v-slidein 280ms var(--ease-out)' }}>

{isNew?'New challenge':'Edit challenge'}

{isNew?'Set a new Trail challenge':title||ch.title}

{/* type selector */}

Challenge type

{Object.keys(CH_TYPES).map(k=>{ const t = CH_TYPES[k]; const TIcon = I[t.icon] || I.grid; const on = type===k; return ( ); })}

{T.hint}

Title setTitle(e.target.value)} maxLength={40} placeholder="Three for the Trail" style={TR_FLD}/>

Customer-facing copy

{/* value mark + reward */}

{T.markLabel}

setMark(Math.max(1, parseInt(e.target.value.replace(/[^0-9]/g,''))||1))} inputMode="numeric" style={{ ...TR_FLD, width:76, textAlign:'center', fontFamily:'var(--font-mono)' }}/> {T.unit} to complete

XP reward · {xp}

{/* budget + duration */}

Budget cap

£ setBudget(e.target.value.replace(/[^0-9.]/g,''))} inputMode="decimal" style={{ ...TR_FLD, paddingLeft:26 }}/>

Runs for · {days} days

{/* proof / validation */}

Proof & validation

{T.wire==='live' ? : } {T.proof}

{/* how it stores */}

How this saves & evaluates

{'rules = '+JSON.stringify(rulesJson)}

Stored as structured JSON in the challenges table’s rules field. Order & loyalty marks are evaluated live against challenge events; review, referral and social marks stay manual until their verification contracts exist (review persistence · referral events · social proof · value-mark evaluator).

Status

Customer preview

Cancel } onClick={save}>{isNew?'Create challenge':'Save changes'}

, document.body ); } // ─── Lucky Strike control (no DB contract yet — honest shell) ──────── function LuckyStrikePanel({ app }) { const [copy, setCopy] = React.useState('Every order this month is a lasso throw. One lucky regular wins a month of free Fire & Dough.'); return (

Lucky Strike

Prize-draw programme for your regulars. Not connected to a draw engine yet.

Not live

{/* status + master toggle (disabled) */}

app.toast('Lucky Strike can\u2019t go live until the draw contract exists')}/>

Run Lucky Strike for this store

Disabled — subscriptions & draws have no database contract

{/* customer copy — editable locally */}

Customer-facing explanation

{/* eligibility + reward — pending contract */}

{[['Eligibility','e.g. 2+ orders this month'],['Reward / offer','e.g. a month of free pizza']].map(([l,ph])=>(

{l}

))}

{/* preview */}

Customer preview

Lucky Strike

{copy || 'Customer copy appears here.'}

Join the draw

{/* missing contract doc */}

Missing contract — documented, not faked

lasso_lucky_strike_config · lasso_lucky_strike_subscriptions · draw/settlement RPC.
No subscribers, winners, redemptions or budget impact are shown until these exist.

); } // ─── Top customers (vendor-safe view required — pending) ───────────── function TopCustomersPanel() { return (

Top customers

Your 10 most valuable regulars — privacy-safe, never addresses.

{/* ghost rows — clearly placeholders, no fabricated people */} {[0,1,2].map(i=>(

))}

Waiting on a vendor-safe view

This panel fills from a top_customers view/RPC exposing only initials, order count, last activity, XP engagement and lifetime spend. Until it exists, nothing is shown — no made-up names, no made-up numbers.

); } // ─── Screen ────────────────────────────────────────────────────────── function TrailScreen({ app }) { const [items, setItems] = React.useState(TRAIL_CHALLENGES); const [editing, setEditing] = React.useState(null); // challenge object or {} for new const upsert = (ch) => { setItems(list => { const i = list.findIndex(x=>x.id===ch.id); return i>=0 ? list.map(x=>x.id===ch.id?ch:x) : [ch, ...list]; }); setEditing(null); app.toast(`\u201C${ch.title}\u201D saved to your store challenges`); }; const setStatus = (id, status) => { setItems(list=>list.map(x=>x.id===id?{...x,status}:x)); app.toast(status==='active'?'Challenge resumed':'Challenge paused'); }; const active = items.filter(c=>c.status==='active').length; return (

} onClick={()=>setEditing({})}>New challenge}/>

{/* challenge list */}

Store challenges Completions read from challenge events

{items.map((c,i)=>{ const st = TC_STATUS[c.status]; const spentPct = c.budget ? Math.round(c.spent/c.budget*100) : 0; return (

{c.title} {st.label} {(()=>{ const t = CH_TYPES[c.type||'custom']; return {t.badge}; })()} +{c.xp} XP

{c.copy}

Budget £{c.spent} / £{c.budget}{spentPct}%

{c.completions} completions rate: pending

{c.status==='active' && } onClick={()=>setStatus(c.id,'paused')}>Pause} {c.status==='paused' && } onClick={()=>setStatus(c.id,'active')}>Resume} {c.status==='draft' && } onClick={()=>setStatus(c.id,'active')}>Launch} setEditing(c)}>Edit

); })} {/* right rail */}

{editing && setEditing(null)} onSave={upsert}/>}

); } Object.assign(window, { TrailScreen, TrailPreview, TRAIL_CHALLENGES, TC_STATUS });