/* eslint-disable react/no-unescaped-entities */ /* ============================================================ Consumer Journey — Declared-data flow for CGO/CMO view 9 screens × 3 variants. Real form entry + 3 declared-insight questions. Right panel shows marketing-grade signal at every step: ZIP enrichment, identity graph, declared psychographics, predicted LTV, CAC savings, retention forecast. ============================================================ */ const CJ_VARIANTS = { one: { id: "one", label: "UBER ONE", tint: "#d4b370", tintSoft: "rgba(212,179,112,0.18)", headline: "Free month of Uber One.", sub: "30 days. No charge. Member perks across rides and Eats.", rewardLabel: "30-DAY FREE TRIAL", rewardWord: "Uber One", rewardCurrency: "", rewardAmount: "", ctaClaim: "Start Free Trial", confirmedH: "You're in.", confirmedSub: "Uber One Free Trial activated. 30 days on us — cancel anytime.", perks: ["Free delivery on Eats", "$0 cancellation on rides", "10% back on select rides"], funnel: "Uber One trial-start", funnelTag: "UBER_ONE_TRIAL", primaryKpi: "Trial-to-paid conversion", lift: "+18% vs paid-digital control", ltv: 187, cacSave: 14.2, retention: { d30: 62, d60: 48, d90: 38 }, crossFunnel: 0.41, }, cash: { id: "cash", label: "UBER CASH", tint: "#5fb3ff", tintSoft: "rgba(95,179,255,0.16)", headline: "$15 in Uber Cash.", sub: "Use it on rides, Eats, or anything Uber. Yours instantly.", rewardLabel: "ADDED TO YOUR ACCOUNT", rewardWord: "", rewardCurrency: "$", rewardAmount: "15", ctaClaim: "Add to Wallet", confirmedH: "$15 added.", confirmedSub: "It's in your Uber Cash wallet — use it on your next ride or order.", perks: ["Works on rides", "Works on Eats", "No expiration"], funnel: "Cross-funnel acquisition", funnelTag: "CROSS_FUNNEL", primaryKpi: "First-trip + Eats attach", lift: "+24% vs paid-digital control", ltv: 142, cacSave: 11.6, retention: { d30: 71, d60: 54, d90: 42 }, crossFunnel: 0.58, }, eats: { id: "eats", label: "UBER EATS", tint: "#06c167", tintSoft: "rgba(6,193,103,0.16)", headline: "$15 off your next Eats order.", sub: "On the way home, get the food you didn't eat at the venue.", rewardLabel: "PROMO APPLIED", rewardWord: "", rewardCurrency: "$", rewardAmount: "15", ctaClaim: "Order Food", confirmedH: "Promo applied.", confirmedSub: "Auto-applied to your next Eats order over $25. Valid for 14 days.", perks: ["No min. order code", "Valid 14 days", "Stacks with member offers"], funnel: "Eats first-order acquisition", funnelTag: "EATS_FIRST_ORDER", primaryKpi: "Eats first-order conversion", lift: "+32% vs paid-digital control", ltv: 164, cacSave: 16.8, retention: { d30: 58, d60: 41, d90: 33 }, crossFunnel: 0.36, }, }; const CJ_STEP_LABELS = [ "WELCOME", "CONSENT", "IDENTITY", "VERIFY", "DECLARED", "ACCOUNT", "REWARD", "SWEEPSTAKES", "ATTRIBUTED", ]; // declared-data choices (rich psychographics — CMO gold) const Q_REASON = [ { id: "headliner", label: "The headliner", tax: "music · headliner-driven" }, { id: "vibes", label: "The vibes", tax: "social · scene-driven" }, { id: "friend", label: "Came with a friend", tax: "social · referred audience" }, { id: "trying", label: "Trying something new", tax: "discovery · explorer cohort" }, ]; const Q_GROUP = [ { id: "solo", label: "Just me", size: 1, tax: "solo rider" }, { id: "pair", label: "One other", size: 2, tax: "couple / pair" }, { id: "small", label: "Group of 3–4", size: 4, tax: "small group · UberX/UberXL" }, { id: "large", label: "5 or more", size: 6, tax: "large group · UberXL/SUV" }, ]; const Q_FREQ = [ { id: "rare", label: "1–2 times a year", cohort: "low-frequency", retention: 28 }, { id: "regular", label: "A few times a year", cohort: "regular-attender", retention: 44 }, { id: "monthly", label: "Monthly or more", cohort: "high-frequency", retention: 62 }, { id: "weekly", label: "Weekly+", cohort: "super-fan", retention: 78 }, ]; // ZIP-based geo-enrichment lookup (illustrative — top markets) function enrichZip(zip) { const z = (zip || "").trim(); if (z.length < 5) return null; const prefix = z.slice(0, 3); const map = { "100": { metro: "NYC · Manhattan", tier: "TIER 1", hhi: 122 }, "101": { metro: "NYC · Manhattan", tier: "TIER 1", hhi: 134 }, "112": { metro: "NYC · Brooklyn", tier: "TIER 1", hhi: 98 }, "900": { metro: "LA · West", tier: "TIER 1", hhi: 118 }, "902": { metro: "LA · Beverly Hills", tier: "TIER 1", hhi: 148 }, "941": { metro: "SF · San Francisco", tier: "TIER 1", hhi: 156 }, "945": { metro: "SF · Oakland", tier: "TIER 1", hhi: 92 }, "946": { metro: "SF · Berkeley", tier: "TIER 1", hhi: 104 }, "021": { metro: "Boston · Cambridge", tier: "TIER 1", hhi: 116 }, "606": { metro: "Chicago · North", tier: "TIER 1", hhi: 102 }, "200": { metro: "DC · NW", tier: "TIER 1", hhi: 124 }, "303": { metro: "Atlanta · ITP", tier: "TIER 1", hhi: 96 }, "750": { metro: "Dallas · Uptown", tier: "TIER 1", hhi: 88 }, "770": { metro: "Houston · Inner Loop", tier: "TIER 1", hhi: 84 }, "850": { metro: "Phoenix · Central", tier: "TIER 2", hhi: 78 }, "981": { metro: "Seattle · Capitol Hill", tier: "TIER 1", hhi: 112 }, "972": { metro: "Portland · NE", tier: "TIER 1", hhi: 92 }, "331": { metro: "Miami · Beach", tier: "TIER 1", hhi: 102 }, }; if (map[prefix]) return map[prefix]; // Fallback: synth from first digit const first = parseInt(z[0], 10); if (Number.isNaN(first)) return null; const fallbacks = [ { metro: "Northeast metro", tier: "TIER 2", hhi: 78 }, { metro: "Northeast metro", tier: "TIER 2", hhi: 82 }, { metro: "Mid-Atlantic", tier: "TIER 2", hhi: 76 }, { metro: "Southeast metro", tier: "TIER 2", hhi: 72 }, { metro: "Midwest metro", tier: "TIER 2", hhi: 70 }, { metro: "Midwest metro", tier: "TIER 3", hhi: 64 }, { metro: "South-central", tier: "TIER 2", hhi: 68 }, { metro: "Mountain West", tier: "TIER 2", hhi: 74 }, { metro: "West coast metro",tier: "TIER 1", hhi: 88 }, { metro: "Pacific Northwest", tier: "TIER 1", hhi: 86 }, ]; return fallbacks[first] || { metro: "US metro", tier: "TIER 2", hhi: 72 }; } // Build the marketing-insights overlay rows + an insight callout per step function buildOverlay(state, v) { const geo = enrichZip(state.zip); const declared = (state.qReason && state.qGroup && state.qFreq); const reason = Q_REASON.find(q => q.id === state.qReason); const group = Q_GROUP.find(q => q.id === state.qGroup); const freq = Q_FREQ.find(q => q.id === state.qFreq); // LTV uplift from declared data (illustrative) const ltvBoost = (freq ? (freq.cohort === "super-fan" ? 1.42 : freq.cohort === "high-frequency" ? 1.22 : freq.cohort === "regular-attender" ? 1.06 : 0.88) : 1) * (group && group.size >= 4 ? 1.12 : 1) * (geo && geo.tier === "TIER 1" ? 1.18 : 1); const projectedLtv = Math.round(v.ltv * ltvBoost); const cacSave = (v.cacSave * (geo && geo.tier === "TIER 1" ? 1.15 : 1)).toFixed(2); const newRider = state.userKind === "new"; // ROWS PER STEP and INSIGHT CALLOUT const rows = [ // 0 — WELCOME { rows: [ ["venue.tier", "Anchor circuit · NCA-AMP-001"], ["scan.event", "qr.scan · t=21:48 PT"], ["variant.arm", v.id.toUpperCase() + " · " + v.funnelTag], ["audience.size", "~8,400 above usable concourse"], ], insight: { k: "MARKETING CONTEXT", v: "Inaugural rideshare moment. Variant " + v.label + " serves to a captive, high-intent crowd in the post-event mobility window.", }, }, // 1 — CONSENT { rows: [ ["consent.21plus", state.age21 ? "✓ confirmed" : "pending"], ["consent.ccpa", state.ccpa ? "✓ explicit · granular" : "pending"], ["marketable", state.age21 && state.ccpa ? "✓ true · permissioned" : "false"], ["audience.bucket", state.age21 && state.ccpa ? "CCPA-consented · marketable" : "—"], ], insight: { k: "MARKETING INSIGHT", v: state.age21 && state.ccpa ? "Marketable audience record created. Every signal from here forward is fully consented and re-usable across Uber's CRM." : "Consent gate is the cleanliness guarantee — no PII collected without explicit opt-in.", }, }, // 2 — IDENTITY (name + email + zip) { rows: [ ["identity.name", state.firstName ? state.firstName + " " + (state.lastName || "") : "—"], ["identity.email", state.email || "—"], ["email.domain", state.email && state.email.includes("@") ? state.email.split("@")[1] : "—"], ["geo.zip", state.zip || "—"], ["geo.market", geo ? geo.metro + " · " + geo.tier : "—"], ["geo.est_hhi", geo ? "$" + geo.hhi + "K (median)" : "—"], ], insight: { k: "FIRST-PARTY ENRICHMENT", v: geo ? "ZIP → " + geo.metro + " · " + geo.tier + ". Census-tract median HHI $" + geo.hhi + "K. Hashed email queued for Uber CRM match." : "Email + ZIP unlocks geo-enrichment + CRM identity match. Required for cohort modeling.", }, }, // 3 — VERIFY { rows: [ ["identity.phone", state.phone ? "•••• " + state.phone.replace(/\D/g,"").slice(-4) : "—"], ["otp.verified", state.otpCode.length === 4 ? "✓ verified" : "pending"], ["sms.optin", "✓ marketing opt-in"], ["identity.graph", state.phone && state.email ? "phone + email · HIGH match" : "partial"], ["dedupe.key", state.email || "—"], ], insight: { k: "IDENTITY GRAPH", v: "Phone + email cross-match = HIGH-confidence identity. Cross-device & cross-funnel attribution unlocked. SMS opt-in extends retargeting surface.", }, }, // 4 — DECLARED { rows: [ ["declared.reason", reason ? reason.tax : "—"], ["declared.party", group ? "size=" + group.size + " · " + group.tax : "—"], ["declared.freq", freq ? freq.cohort + " · base ret=" + freq.retention + "%" : "—"], ["audience.profile", declared ? "Declared · " + (reason && reason.id === "headliner" ? "music-driven" : reason && reason.id === "vibes" ? "scene-driven" : reason && reason.id === "friend" ? "social-referral" : "explorer") + " · " + (freq ? freq.cohort : "—") : "—"], ["lookalike.seed", declared ? "✓ eligible · post-claim" : "pending"], ], insight: { k: "DECLARED PSYCHOGRAPHICS", v: declared ? "Real, opted-in psychographic signal — not inferred. Feeds audience taxonomy + lookalike seed. Group size " + group.size + " maps directly to UberX/XL/SUV product mix." : "Three taps. Three signals Uber's growth team can't buy anywhere else: why they came, who's with them, how often they go.", }, }, // 5 — ACCOUNT { rows: [ ["user.state", state.userKind === "new" ? "non_rider · device_first_seen" : state.userKind === "existing" ? "existing_rider · re-engaged" : "—"], ["acquisition.path", "ape_uber_pilot/v=" + v.id], ["projected.ltv_90d", "$" + projectedLtv + " (declared-adjusted)"], ["cac.savings", "$" + cacSave + " vs paid-digital benchmark"], ["funnel.target", v.primaryKpi], ], insight: { k: "ECONOMIC ATTRIBUTION", v: (newRider ? "Net-new acquisition. " : "Re-engagement. ") + "Projected 90-day LTV $" + projectedLtv + " — uplifted by declared frequency + Tier-" + (geo && geo.tier === "TIER 1" ? "1" : "2") + " geo. CAC saving $" + cacSave + " per acquired user vs paid-digital baseline.", }, }, // 6 — REWARD { rows: [ ["incentive.served", "v=" + v.id + " · " + (v.id === "one" ? "30d trial" : v.id === "cash" ? "$15 cash" : "$15 Eats credit")], ["funnel.entered", v.funnel], ["model.lift", v.lift], ["cohort.tag", "ape_uber_pilot · " + v.id + " · " + (freq ? freq.cohort : "—")], ["conversion.event", "claim_started"], ], insight: { k: "FUNNEL ENTRY", v: v.label + " is the headline " + (v.id === "one" ? "subscription" : v.id === "cash" ? "wallet" : "Eats") + " incentive. Modeled lift " + v.lift + ". Cohort-tagged for variant A/B/C readout against control.", }, }, // 7 — SWEEPSTAKES { rows: [ ["sweeps.entry", state.entryId || "—"], ["sweeps.prize", "$5,000 Uber credit"], ["sweeps.drawing", "post-season · 90d window"], ["email.window", "✓ 90-day marketing window opened"], ["secondary.event", "newsletter_optin · soft_optin"], ], insight: { k: "EMAIL CAPTURE", v: "Sweepstakes opt-in extends the marketing window 90 days. Email enters Uber's lifecycle pipeline. One entry per dedupe key.", }, }, // 8 — ATTRIBUTED (final) { rows: [ ["conversion.event", "claim_completed"], ["funnel.cohort", "ape_uber_pilot · " + v.id + " · " + (state.userKind === "new" ? "new" : "existing")], ["projected.ltv_90d", "$" + projectedLtv], ["retention.30d", v.retention.d30 + "%"], ["retention.60d", v.retention.d60 + "%"], ["retention.90d", v.retention.d90 + "%"], ["crossfunnel.score", v.crossFunnel.toFixed(2) + " · " + v.funnelTag], ], insight: { k: "ATTRIBUTED ACQUISITION", v: (newRider ? "Net-new " : "Re-engaged ") + v.label + " acquisition. Predicted 30/60/90-day retention " + v.retention.d30 + "/" + v.retention.d60 + "/" + v.retention.d90 + "%. Cross-funnel propensity " + v.crossFunnel.toFixed(2) + ". Every signal first-party · Uber-owned.", }, }, ]; return rows; } function genEntryId() { const ch = "ABCDEFGHJKMNPQRSTUVWXYZ23456789"; let s = ""; for (let i = 0; i < 6; i++) s += ch[Math.floor(Math.random() * ch.length)]; return "UB-" + s; } function ConsumerJourney({ variantKey, onVariantChange }) { const [step, setStep] = useState(0); const [direction, setDirection] = useState(1); // form state const [age21, setAge21] = useState(false); const [ccpa, setCcpa] = useState(false); const [firstName, setFirstName] = useState(""); const [lastName, setLastName] = useState(""); const [email, setEmail] = useState(""); const [zip, setZip] = useState(""); const [phone, setPhone] = useState(""); const [otpSent, setOtpSent] = useState(false); const [otpCode, setOtpCode] = useState(""); const [qReason, setQReason] = useState(null); const [qGroup, setQGroup] = useState(null); const [qFreq, setQFreq] = useState(null); const [userKind, setUserKind] = useState(null); const [entryId, setEntryId] = useState(""); const v = CJ_VARIANTS[variantKey]; const total = 9; function go(n) { setDirection(n > step ? 1 : -1); setStep(n); if (n === 7 && !entryId) setEntryId(genEntryId()); } function next() { if (step < total - 1) go(step + 1); } function back() { if (step > 0) go(step - 1); } function restart() { setDirection(-1); setStep(0); setAge21(false); setCcpa(false); setFirstName(""); setLastName(""); setEmail(""); setZip(""); setPhone(""); setOtpSent(false); setOtpCode(""); setQReason(null); setQGroup(null); setQFreq(null); setUserKind(null); setEntryId(""); } function switchVariant(k) { onVariantChange(k); restart(); } useEffect(() => { restart(); /* eslint-disable-next-line */ }, [variantKey]); // ---- validators ---- const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); const nameOk = firstName.trim().length >= 1 && lastName.trim().length >= 1; const zipOk = /^\d{5}$/.test(zip); const phoneDigits = phone.replace(/\D/g, ""); const phoneOk = phoneDigits.length === 10; const otpOk = otpCode.length === 4; const declaredOk = qReason && qGroup && qFreq; function canAdvance() { if (step === 1) return age21 && ccpa; if (step === 2) return nameOk && emailOk && zipOk; if (step === 3) return phoneOk && otpSent && otpOk; if (step === 4) return declaredOk; if (step === 5) return !!userKind; return true; } function fmtPhoneInput(raw) { const d = raw.replace(/\D/g, "").slice(0, 10); if (d.length === 0) return ""; if (d.length < 4) return "(" + d; if (d.length < 7) return "(" + d.slice(0, 3) + ") " + d.slice(3); return "(" + d.slice(0, 3) + ") " + d.slice(3, 6) + "-" + d.slice(6); } function sendOtp() { setOtpSent(true); setTimeout(() => setOtpCode("4825"), 800); } const overlay = buildOverlay( { age21, ccpa, firstName, lastName, email, zip, phone, otpCode, qReason, qGroup, qFreq, userKind, entryId }, v ); const stepData = overlay[step]; const times = ["21:48", "21:48", "21:49", "21:49", "21:50", "21:50", "21:51", "21:51", "21:52"]; const geo = enrichZip(zip); return (
{/* LEFT */}
{Object.values(CJ_VARIANTS).map((vv) => ( ))}
Uber co-branded water can
Declared-data consumer flow. 9 screens. Every tap, declaration, and confirmation surfaces a marketing-grade signal on the right — predicted LTV, CAC savings, declared psychographics, cohort fit, retention forecast.
{CJ_STEP_LABELS.map((lbl, i) => (
{ if (i <= step) go(i); }} >
{String(i + 1).padStart(2, "0")}
{lbl}
))}
{/* PHONE */}
{times[step]}
{/* 0 — WELCOME */}
Uber
01 · SCAN · {v.id.toUpperCase()}
{v.label}

{v.headline}

{v.sub}

You scanned an Ape × Uber can. Two minutes — and you're entered into our $5,000 Uber-credit sweepstakes.

SWEEPSTAKES PRIZE
$5,000
UBER CREDIT · DRAWING POST-SEASON
~2 MIN · CCPA · 21+
 {/* 1 — CONSENT */}
Uber
02 · CONSENT

A couple of confirmations.

We don't collect a single signal without them.

setAge21(!age21)} role="button" tabIndex={0}>
I'm 21 or older. Required for venue activations.
setCcpa(!ccpa)} role="button" tabIndex={0}>
I agree to Uber's privacy terms. CCPA-compliant. Granular opt-in. You can withdraw any time.
{/* 2 — IDENTITY (name + email + zip) */}
Uber
03 · YOUR INFO

Name, email, ZIP.

For sweepstakes entry, account match, and tonight's nearest pickup.

setFirstName(e.target.value)}/>
setLastName(e.target.value)}/>
setEmail(e.target.value)} autoComplete="email" /> {email && !emailOk &&
CHECK YOUR EMAIL FORMAT
}
setZip(e.target.value.replace(/\D/g, "").slice(0, 5))} /> {zip && !zipOk &&
5 DIGITS
}
{zipOk && geo && (
DETECTED MARKET
{geo.metro} · {geo.tier} · est. HHI ${geo.hhi}K
)}
{/* 3 — VERIFY */}
Uber
04 · VERIFY

Verify your phone.

We text a 4-digit code. Used once, then discarded.

{ setPhone(fmtPhoneInput(e.target.value)); setOtpSent(false); setOtpCode(""); }} autoComplete="tel" /> {phone && !phoneOk &&
10 DIGITS, US FORMAT
}
{!otpSent && ( )} {otpSent && (
{[0,1,2,3].map((i) => ( { const d = e.target.value.replace(/\D/g, "").slice(0, 1); const arr = otpCode.split(""); arr[i] = d; setOtpCode(arr.join("").slice(0, 4)); if (d && e.target.nextSibling) e.target.nextSibling.focus(); }} /> ))}
{otpOk ? "✓ CODE VERIFIED" : "WAITING FOR CODE…"}
)}
{/* 4 — DECLARED INSIGHTS */}
Uber
05 · TONIGHT

Quick three.

Helps us send the right rides home.

WHAT BROUGHT YOU OUT?
{Q_REASON.map(q => ( ))}
WHO'S WITH YOU?
{Q_GROUP.map(q => ( ))}
HOW OFTEN DO YOU GO OUT LIKE THIS?
{Q_FREQ.map(q => ( ))}
{/* 5 — ACCOUNT */}
Uber
06 · ACCOUNT

Existing Uber rider?

We'll match your reward — or create your account.

 {/* 6 — CLAIM */}
Uber
07 · CLAIM
{v.label}

Here's your reward, {firstName || "friend"}.

{v.rewardLabel}
{v.rewardCurrency && {v.rewardCurrency}} {v.rewardAmount && {v.rewardAmount}} {v.rewardWord && {v.rewardWord}}
    {v.perks.map((p) =>
  • {p}
    • )}

One tap — applies instantly to your Uber account.

{/* 7 — SWEEPSTAKES */}
Uber
08 · SWEEPSTAKES

You're entered.

One entry per email. Drawing held post-season.

GRAND PRIZE
$5,000
UBER CREDIT · ANY UBER PRODUCT
YOUR ENTRY ID
{entryId || "—"}
CONFIRMED
The fine print, short version No purchase necessary. Open to US residents 21+. One entry per email. Drawing within 14 days of season close. Prize delivered as Uber credit. Full terms at uber.com/apewater-terms.
{/* 8 — ATTRIBUTED (final) */}
Uber
09 · ALL SET

{v.confirmedH}

{v.confirmedSub}

REWARD {v.rewardCurrency}{v.rewardAmount}{v.rewardWord} {v.id === "one" ? "free trial" : v.id === "cash" ? "in Uber Cash" : "off Eats"}
SWEEPS ENTRY {entryId}
CONFIRMATION {email ? (email.length > 18 ? email.slice(0, 16) + "…" : email) : "—"}
ACCOUNT {userKind === "new" ? "New · created" : "Existing · matched"}
DEMO · NOT AFFILIATED WITH UBER TECHNOLOGIES, INC.
{String(step + 1).padStart(2, "0")} / 09
{/* RIGHT: marketing-insights overlay */}
DECLARED-DATA · CGO VIEW
{CJ_STEP_LABELS[step]} · {String(step + 1).padStart(2, "0")} / 09
{stepData.rows.map(([k, val], i) => (
{k}
{val}
))}
{stepData.insight && (
{stepData.insight.k}
{stepData.insight.v}
)}
FIRST-PARTY · UBER WAREHOUSE · NO MIDDLEWARE
DEDUPED ON EMAIL · CONSENT REVOCABLE
); } function Screen({ active, dir, children }) { const cls = active ? "cj-screen active" : "cj-screen " + (dir > 0 ? "exit-left" : "exit-right"); return
{children}
; } function Progress({ step, total, tint }) { return (
{Array.from({ length: total }).map((_, i) => ( ))}
); } function ExperienceIt() { const [variantKey, setVariantKey] = useState("one"); return (
EXPERIENCE IT · DECLARED-DATA FLOW

The consumer journey.
What a CGO sees on the right.

Every tap on the phone surfaces a marketing-grade insight on the right: ZIP enrichment, identity-graph confidence, declared psychographics, predicted 90-day LTV, CAC savings, retention forecast. This is what Uber's growth team can't buy anywhere else — declared, first-party, attributable.

); } Object.assign(window, { ExperienceIt, ConsumerJourney });