/* Client-facing sections: Active Projects, AI Services Marketplace, Insights & Reports. Warm, trust-building, emerald-success tone. Exposed as window.ClientViews. */ (function () { const { useState, useEffect, useRef } = React; const Icon = window.Icon; const { SERVICES, CASE_STUDIES } = window.AGENCY; const { fmtUSD, fmtMult, fmtNum } = window.FMT; const U = window.UI; const { Card, Badge, Progress, SectionTitle, Modal, InfoDot, ROAI_TIP_SHORT, C, cx } = U; // CX pillar visual maps (icon + accent), keyed by pillar name const PILLAR_ICON = { "Experience Strategy": "target", "Experience Design": "sparkles", "Experience Platform": "layers", "Commerce Platform": "grid", "Experience Insights": "chart", "Run & Optimize": "settings" }; const PILLAR_COLOR = { "Experience Strategy": C.indigo, "Experience Design": C.violet, "Experience Platform": C.sky, "Commerce Platform": C.emerald, "Experience Insights": C.amber, "Run & Optimize": C.slate }; function Avatar({ name, size = 22 }) { const initials = name.split(" ").map((w) => w[0]).slice(0, 2).join(""); return ( {initials} ); } function PillarChip({ pillar, size = 36 }) { return ( ); } // ============================ Active Projects ============================ const PSTATUS = { active: { tone: "indigo", label: "Active", color: C.indigo }, review: { tone: "amber", label: "In review", color: C.amber }, delivered: { tone: "emerald", label: "Delivered", color: C.emerald }, }; function ProjectCard({ p }) { const s = PSTATUS[p.status]; return (
{p.name}
{p.service}
{s.label}
Progress {p.progress}%
Value delivered
{fmtUSD(p.valueDelivered, { compact: true })}
{p.lead.split(" ")[0]}
Updated {p.updated}
{p.nextMilestone}
); } function ActiveProjects({ client }) { const [filter, setFilter] = useState("all"); const projects = client.projects; const counts = { all: projects.length, active: projects.filter((p) => p.status === "active").length, review: projects.filter((p) => p.status === "review").length, delivered: projects.filter((p) => p.status === "delivered").length, }; const totalValue = projects.reduce((s, p) => s + p.valueDelivered, 0); const shown = filter === "all" ? projects : projects.filter((p) => p.status === filter); const TABS = [ { k: "all", label: "All" }, { k: "active", label: "Active" }, { k: "review", label: "In review" }, { k: "delivered", label: "Delivered" }, ]; return (
In flight
{counts.active + counts.review}
active engagements
Delivered
{counts.delivered}
this quarter
Value delivered
{fmtUSD(totalValue, { compact: true })}
across all projects
Your team
{[...new Set(projects.map((p) => p.lead))].slice(0, 4).map((l) => )}
strategists on your account
{TABS.map((t) => ( ))}
} />
{shown.map((p, i) => )}
); } // ============================ Marketplace ============================ function ServiceCard({ svc, active, launched, onLaunch }) { const isAgent = svc.onEco || svc.package; return (
{svc.onEco && Vela} {svc.package && Sales Enablement} {svc.popular && !svc.onEco && !svc.package && Popular} {svc.isNew && New}
{svc.pillar}{svc.onEco && svc.stage ? " · " + svc.stage : ""}
{svc.name}
{svc.tagline}

{svc.blurb}

Typical return {fmtMult(svc.typicalRoai)}
Pricing {svc.priceLabel}
{active || launched ? (
{active ? "Active on your plan" : "Live"}
) : ( )}
); } // ---- Agent checkout (x402) — API editions on the XRP Ledger ---- // The five Vela products have per-call API editions sold over the // x402 protocol by Emerge Digital's agent-commerce worker; each paid call // is metered into Metronome (visible in Agency → Billing → Live). const X402_BASE = "https://agent-commerce.emergedigital.com/api/xrpl/"; const X402_SKUS = { "on-optima": "on-optima-aeo", "on-x": "on-x-session", "on-match": "on-match-recs", "on-e": "on-e-commerce", "on-browser": "on-browser-scan", }; function AgentCheckout({ svc }) { const slug = X402_SKUS[svc.id]; if (!slug) return null; const url = X402_BASE + slug; return (
Agent checkout · x402

AI agents can buy the API edition of this product per call over the x402 protocol — settled in XRP or RLUSD on the XRP Ledger (RLUSD at exact dollar parity with the rate card), usage metered in Metronome. Each call delivers exactly the artifact its listing describes.

curl -i {url}
); } // ---- Launch flow (mock provisioning) ---- function LaunchModal({ svc, onClose, onDone }) { const isAgent = svc.onEco || svc.package; const phases = isAgent ? ["Provisioning workspace", "Connecting your data", "Configuring the agent", "Running first pass"] : ["Scoping engagement", "Provisioning environment", "Configuring", "Kickoff"]; const [i, setI] = useState(0); const timer = useRef(null); const firedDone = useRef(false); const done = i >= phases.length; useEffect(() => { if (i < phases.length) { timer.current = setTimeout(() => setI((x) => x + 1), 850); return () => clearTimeout(timer.current); } }, [i]); useEffect(() => { if (done && !firedDone.current) { firedDone.current = true; onDone(svc.id); } }, [done]); const pct = Math.round((Math.min(i, phases.length) / phases.length) * 100); return (
{svc.name}
{svc.pillar}{svc.onEco && svc.stage ? " · " + svc.stage : ""}
{!done ? ( <>
{isAgent ? "Launching agent…" : "Starting engagement…"} {pct}%
{phases.map((p, idx) => { const state = idx < i ? "done" : idx === i ? "active" : "pending"; return (
{state === "done" ? : state === "active" ? : } {p}
); })}
) : (
{svc.name} is live

{isAgent ? "Your agent is provisioned and running. Track it in Active projects." : "Your engagement is set up — your strategist will be in touch."}

{svc.onEco && }
)}
{done ? : }
); } function Marketplace({ client }) { const B = window.Store.useBilling(); const [cat, setCat] = useState("All"); const [launching, setLaunching] = useState(null); const active = new Set(client.activeServiceIds); const cats = ["All", ...Array.from(new Set(SERVICES.map((s) => s.pillar)))]; const shown = SERVICES.filter((s) => cat === "All" || s.pillar === cat); return (
CX service catalog

Expand across the full CX lifecycle

Six service pillars — Strategy, Design, Platform, Commerce, Insights and Run — plus Vela AI accelerators and AI-first Sales Enablement. Delivered by your practice team with governed AI agents, trusted by Government and BFSI across the GCC; request one and it's usually live within weeks.

{active.size}
services active
{cats.map((cName) => ( ))}
{shown.map((s) => ( setLaunching(s)} /> ))}
setLaunching(null)} maxWidth={440} label="Launch agent"> {launching && setLaunching(null)} onDone={B.launch} />}
Not sure what to add? Human-governed AI: your practice strategist recommends the highest-return next agent for your goals.
Buying as an AI agent? API editions of the Vela products are purchasable per call over the x402 protocol on the XRP Ledger, settling in XRP or RLUSD — no account needed; usage is metered in Metronome.
View the agent catalog Read the launch note
); } // ============================ Insights & Reports ============================ const REPORT_ICON = { QBR: "briefcase", "ROAI summary": "target", "Usage statement": "cpu" }; function Insights({ client }) { const insights = client.clientInsights; const reports = client.reports; return (
{insights.map((ins, i) => { const win = ins.tone === "win"; return (
{ins.title}

{ins.body}

{ins.cta &&
{ins.cta}
} ); })}
{CASE_STUDIES.map((cs, i) => (
{cs.headline}
{cs.client} · {cs.sector}

{cs.blurb}

{cs.metrics.map((m, j) => (
{m[1]}
{m[0]}
))}
{cs.solution}
 ))}
Reports & statements
{reports.length} available
{reports.map((r, i) => (
{r.title}
{r.kind} · {r.period} · {r.date}
))}
); } window.ClientViews = { ActiveProjects, Marketplace, Insights }; })();