{series.map((s,i)=>{ const on = hover===i; return (

setHover(i)} onMouseLeave={()=>setHover(null)} style={{ flex:1, height:'100%', display:'flex', flexDirection:'column', justifyContent:'flex-end', alignItems:'center', position:'relative', cursor:'default' }}> {on &&

£{s.rev} · {s.orders} orders

Day {s.d}

}

); })}

{/* orders line overlay */}

Revenue Orders

); } // reach → views → orders funnel function CDFunnel({ ops, c }) { const steps = [ { label:'Impressions', value:ops.impressions, color:'#3E7CB0' }, { label:'Menu views', value:ops.views, color:'#7A57C9' }, { label:'Orders', value:c.orders, color:'#D85A14' }, ]; const max = steps[0].value; return (

{steps.map((s,i)=>(

{s.label} {s.value.toLocaleString()}{i>0 && · {Math.round(s.value/steps[i-1].value*100)}%}

))}

); } // ─── Targeting modal — choose audience segments + estates, see reach ── const TARGET_SEGMENTS = [ { id:'new', label:'New customers', frac:0.31, desc:'never ordered from you' }, { id:'repeat', label:'Repeat customers', frac:0.47, desc:'ordered 2+ times' }, { id:'lapsed1', label:'Lapsed 14–30 days', frac:0.12, desc:'cooling off' }, { id:'lapsed2', label:'Lapsed 30–60 days', frac:0.10, desc:'win-back window' }, { id:'vip', label:'VIP spenders', frac:0.05, desc:'top 5% by spend' }, ]; const DEFAULT_SEGS = { firstorder:['new'], dormant:['lapsed1','lapsed2'], family:['new','repeat'], freedeliv:['new','repeat'], lunch:['repeat'], newitem:['new','repeat'], highvalue:['vip'], payday:['repeat','new'], }; function TargetingModal({ app, c, onClose, onApply }) { const homeEstate = ESTATES.find(e=>e.name===c.area) || ESTATES[0]; const nearby = [...ESTATES].filter(e=>e.id!==homeEstate.id).sort((a,b)=>b.opportunity-a.opportunity).slice(0,4); const [segs, setSegs] = React.useState(()=>new Set(DEFAULT_SEGS[c.type]||['new','repeat'])); const [estates, setEstates] = React.useState(()=>new Set([homeEstate.id])); const toggle = (set, setter, id)=> setter(prev=>{ const n=new Set(prev); n.has(id)?n.delete(id):n.add(id); return n; }); const selEstates = ESTATES.filter(e=>estates.has(e.id)); const segFrac = TARGET_SEGMENTS.filter(s=>segs.has(s.id)).reduce((a,s)=>a+s.frac,0); const reach = Math.round(selEstates.reduce((a,e)=>a+e.customers,0)*segFrac); const segNames = TARGET_SEGMENTS.filter(s=>segs.has(s.id)).map(s=>s.label.replace(/ customers| spenders/,'').replace('Lapsed ','lapsed ')); const tighter = reach < c.reach*1.2; const valid = segs.size>0 && estates.size>0; const apply = ()=>{ const segShort = segNames.length>2 ? `${segNames.slice(0,2).join(', ')} +${segNames.length-2}` : segNames.join(' & '); const estShort = selEstates.length>1 ? `${selEstates[0].name} +${selEstates.length-1}` : selEstates[0].name; onApply({ summary:`${segShort} · ${estShort}`, reach, segCount:segs.size, estCount:estates.size, tighter }); }; return (

e.stopPropagation()} style={{ width:'100%', maxWidth:540, background:'var(--bg-surface)', borderRadius:20, boxShadow:'var(--shadow-lg)', overflow:'hidden', animation:'v-pop 240ms var(--ease-out)' }}>

Adjust targeting

Choose who sees {c.name}

{/* segments */}

Customer segments

{TARGET_SEGMENTS.map(s=>{ const on=segs.has(s.id); return ( ); })}

{/* estates */}

Estates · tap to add

{[homeEstate, ...nearby].map(e=>{ const on=estates.has(e.id); const es=NODE_STATE[e.state]; return ( ); })}

{/* live reach */}

{reach.toLocaleString()}

people reached

{segs.size} segment{segs.size!==1?'s':''} across {estates.size} estate{estates.size!==1?'s':''}. {tighter ? 'A tighter audience usually lifts conversion and lowers cost-per-order.' : 'A broader audience grows reach — watch cost-per-order as it scales.'}

Cancel } onClick={apply}>Apply targeting

); } // ─── Photo upload modal — attach a hero image to the campaign offer ── function PhotoUploadModal({ app, c, onClose, onSave }) { const [url, setUrl] = React.useState(null); const [drag, setDrag] = React.useState(false); const fileRef = React.useRef(null); const read = (f)=>{ if(!f || !/^image\//.test(f.type)) return; const r=new FileReader(); r.onload=()=>setUrl(r.result); r.readAsDataURL(f); }; return (

e.stopPropagation()} style={{ width:'100%', maxWidth:480, background:'var(--bg-surface)', borderRadius:20, boxShadow:'var(--shadow-lg)', overflow:'hidden', animation:'v-pop 240ms var(--ease-out)' }}>

Add a hero photo

for {c.hero}

read(e.target.files&&e.target.files[0])} style={{ display:'none' }}/> {url && }

Offers with a photo convert about 2× better.

Cancel } onClick={()=>onSave(url)}>Use this photo

); } // ─── Customer preview — how the promo looks to a diner in the Lasso app ── function offerPrice(offer, price){ if(!price) return null; const pct = offer.match(/(\d+)\s*%/); if(pct) return +(price*(1-(+pct[1])/100)).toFixed(2); const off = offer.match(/£\s*(\d+)/); if(off) return Math.max(0, +(price-(+off[1])).toFixed(2)); return null; } function offerBadge(offer){ const pct = offer.match(/(\d+)\s*%/); if(pct) return pct[1]+'% OFF'; const off = offer.match(/£\s*(\d+)/); if(off) return '£'+off[1]+' OFF'; if(/free deliver/i.test(offer)) return 'FREE DELIVERY'; return 'OFFER'; } function CampaignPreview({ c, onAddPhoto }) { const heroItem = MENU.flatMap(x=>x.items).find(it=>it.name===c.hero); const price = heroItem ? heroItem.price : null; const now = price!=null ? offerPrice(c.offer, price) : null; const photo = c.heroPhoto || (heroItem && heroItem.photoUrl) || null; const badge = offerBadge(c.offer); const freeDeliv = /deliver/i.test(c.offer); const rating = (typeof REVIEWS!=='undefined' && REVIEWS.rating) || 4.6; return (

Customer preview what diners see in {c.area}

{/* phone-style backdrop */}

{/* storefront listing card */}

{photo ?

: } {/* promo ribbon */}

{badge}

Fire & Dough {rating}

Pizza · Wings · Loaded Fries

25–35 min · {freeDeliv?'Free delivery':'£1.99 delivery'}

{c.offer}

{/* voucher tile */}

{c.offer}

at Fire & Dough · {c.area}

{/* perforation notches */}

{now!=null && price!=null ? (

{photo &&

}

{c.hero}

£{now.toFixed(2)} £{price.toFixed(2)}

) : (

Applied automatically at checkout for eligible orders.

)}

); } function CampaignDetail({ app, c, onClose }) { const ct = CAMPAIGN_TYPES.find(t=>t.id===c.type); const CIcon = (ct && I[ct.icon]) || I.megaphone; const [ver, setVer] = React.useState(0); const [done, setDone] = React.useState({}); // title -> result line const [offerArea, setOfferArea] = React.useState(null); // area awaiting A/B config const [budgetArea, setBudgetArea] = React.useState(null); // area awaiting budget scale const [targetArea, setTargetArea] = React.useState(null); // area awaiting targeting edit const [photoArea, setPhotoArea] = React.useState(null); // area awaiting photo upload const ops = React.useMemo(()=>campaignOps(c), [c.id, ver]); const spentPct = Math.round(c.spend/c.budget*100); const topItemMax = Math.max(...ops.topItems.map(t=>t.share)); const markDone = (a, result)=>{ setDone(d=>({ ...d, [a.title]:result })); }; const doAction = (a, bulk)=>{ if (a.kind==='extend'){ c.total += 7; c.status='live'; c.ends='7 days left'; markDone(a, `Extended to ${c.total} days · now live`); setVer(v=>v+1); app.toast(`“${c.name}” extended by 7 days`); } else if (a.kind==='budget'){ if (bulk){ c.budget += 120; markDone(a, `Budget raised to £${c.budget}`); setVer(v=>v+1); app.toast(`Budget topped up +£120 → £${c.budget}`); } else setBudgetArea(a); } else if (a.kind==='photo'){ if (bulk){ c.hasPhoto=true; const hero=MENU.flatMap(x=>x.items).find(it=>it.name===c.hero); if(hero) hero.photo=true; markDone(a, 'Hero photo attached'); setVer(v=>v+1); app.toast(`Photo added to “${c.hero}”`); } else setPhotoArea(a); } else if (a.kind==='edit' && /offer/i.test(a.action)){ if (bulk){ c.abTest={ label:'Free delivery over £20', short:'Free delivery', splitB:50, days:7 }; markDone(a, 'A/B test live · Free delivery vs current'); setVer(v=>v+1); app.toast('A/B offer test launched'); } else setOfferArea(a); } else if (a.kind==='edit'){ if (bulk){ c.audience='Tightened · lapsed 14–30d'; markDone(a, 'Audience tightened · lapsed 14–30d'); setVer(v=>v+1); app.toast('Targeting updated'); } else setTargetArea(a); } else if (a.kind==='clone'){ const e=ESTATES.find(x=>x.name===c.area); onClose(); app.openBuilder(e?e.id:null); } else { markDone(a, 'Done'); app.toast(`${a.action}…`); } }; const launchTest = (variant)=>{ c.abTest = variant; if (offerArea) markDone(offerArea, `A/B test live · ${variant.short} vs current`); setOfferArea(null); setVer(v=>v+1); app.toast(`A/B test launched — ${variant.short} vs current`); }; const confirmScale = (r)=>{ c.budget = r.newBudget; c.scaled = { add:r.add, extraOrders:r.extraOrders, extraRev:r.extraRev }; if (budgetArea) markDone(budgetArea, `+£${r.add} budget · projected +£${r.extraRev.toLocaleString()}`); setBudgetArea(null); setVer(v=>v+1); app.toast(`Scaled +£${r.add} → projected +${r.extraOrders} orders`); }; const applyTargeting = (r)=>{ c.audience = r.summary; c.targeting = r; if (targetArea) markDone(targetArea, `Audience set · ${r.reach.toLocaleString()} reached`); setTargetArea(null); setVer(v=>v+1); app.toast(`Targeting updated — ${r.reach.toLocaleString()} people, ${r.estCount} estate${r.estCount!==1?'s':''}`); }; const applyPhoto = (dataUrl)=>{ c.hasPhoto=true; c.heroPhoto=dataUrl; const hero=MENU.flatMap(x=>x.items).find(it=>it.name===c.hero); if(hero){ hero.photo=true; hero.photoUrl=dataUrl; } if (photoArea) markDone(photoArea, 'Hero photo added to the offer'); setPhotoArea(null); setVer(v=>v+1); app.toast(`Photo added to “${c.hero}”`); }; const daysLeftStr = ()=> `${Math.max(1,(c.total||7)-(c.elapsed||1))} days left`; const pause = ()=>{ c.status='paused'; setVer(v=>v+1); app.toast(`“${c.name}” paused — spend stopped`); }; const resume = ()=>{ c.status='live'; c.ends=daysLeftStr(); setVer(v=>v+1); app.toast(`“${c.name}” resumed — back live`); }; const endCampaign = ()=>{ c.status='ended'; c.ends='Ended'; setVer(v=>v+1); app.toast(`“${c.name}” ended`); }; const reactivate = ()=>{ c.status='live'; c.ends=daysLeftStr(); setVer(v=>v+1); app.toast(`“${c.name}” reactivated — live again`); }; const saveTemplateFromCampaign = ()=>{ const e=ESTATES.find(x=>x.name===c.area); CAMPAIGN_TEMPLATES.unshift({ id:'t'+Date.now().toString().slice(-6), name:c.name, typeId:c.type, estateId:e?e.id:'bletchley', budget:c.budget, duration:c.total||7, minOrder:0, newOnly:(c.newPct||0)>=70, copy:{}, lastUsed:`From “${c.name}”` }); app.toast(`Saved “${c.name}” to templates`); }; return (

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

Campaign operations

{c.name}

{(CAMP_STATUS[c.status]||CAMP_STATUS.live).label} {c.area} · Day {c.elapsed} of {c.total}

{c.offer} {c.audience} {c.abTest && A/B test running}

{c.heroPhoto && (

Hero photo live

{c.hero} · shown on the offer

)} {c.abTest && (

Testing: {c.abTest.short} vs current

{100-c.abTest.splitB}% A / {c.abTest.splitB}% B · {c.abTest.days}-day test · collecting results

)}

{/* body */}

setPhotoArea({ title:'__preview' })}/> {/* budget pacing */}

Budget pacing £{c.spend} / £{c.budget}

=90?'#E0992A':'var(--brand-orange)'} h={10}/>

£{ops.dailyBurn}/day burn · {ops.daysLeft} day{ops.daysLeft!==1?'s':''} left · projected spend £{ops.projSpend}

{c.scaled && (

Scaled +£{c.scaled.add} · projected +{c.scaled.extraOrders} orders / +£{c.scaled.extraRev.toLocaleString()} as new spend lands.

)}

{/* ops KPI grid */} Operations

=c.benchmarkRoi?'#247a41':'#b0341a'}/> =ops.benchConv?'#247a41':'#b0341a'}/>

{/* performance over time */}

Daily performance

Day 1Day {c.elapsed}

{/* funnel + items */}

Conversion funnel

Items driven

{ops.topItems.map((t,i)=>(

{t.name}

{t.orders}

))}

{/* areas for development */}

Areas for development {(()=>{ const openCount=ops.areas.filter(a=>!done[a.title]).length; return (

{openCount>0 ? `${openCount} way${openCount>1?'s':''} to get more from this campaign.` : 'All actions applied — nice work.'}

); })()} {ops.areas.map((a,i)=>{ const sv = CD_SEV[a.sev]; const AIcon = I[a.icon] || I.info; const res = done[a.title]; return (

{res ? : }

{a.title}

{a.detail}

{res ? ( {res} ) : ( <> {sv.label} )}

); })} {(()=>{ const openAreas=ops.areas.filter(a=>!done[a.title]); return openAreas.length>1 ? ( ) : null; })()}

{/* footer */}

{c.status==='ended' ? ( } onClick={reactivate}>Reactivate campaign ) : c.status==='paused' ? (

} onClick={resume}>Resume campaign } onClick={endCampaign}>End

) : (

} onClick={pause}>Pause campaign } onClick={endCampaign}>End

)}

} onClick={()=>setBudgetArea({ title:'__editbudget' })}>Edit budget } onClick={saveTemplateFromCampaign}>Save as template

{offerArea && setOfferArea(null)} onLaunch={launchTest}/>} {budgetArea && setBudgetArea(null)} onConfirm={confirmScale}/>} {targetArea && setTargetArea(null)} onApply={applyTargeting}/>} {photoArea && setPhotoArea(null)} onSave={applyPhoto}/>}

); } Object.assign(window, { CampaignDetail });

A/B test an offer

Scale this campaign

Adjust targeting

Add a hero photo

{c.name}