// ============================================================ // Nami Order Portal — Customer-facing review surface // ============================================================ const CustomerReview = ({ deal, onExit, onApprove, onSendBack, onSubmitComment, onSendForSignature, onSaveCustomerEdits, remoteMode }) => { const variants = window.NAMI_DATA.VARIANTS; const trims = window.NAMI_DATA.TRIM_TIERS; const t = trims[deal.trim || "premier"]; const [comments, setComments] = React.useState(deal.comments || []); React.useEffect(() => { setComments(deal.comments || []); }, [deal.comments]); const [decisions, setDecisions] = React.useState({}); // amendId -> 'accept' | 'change' const [active, setActive] = React.useState(null); // {anchor, label} const [draft, setDraft] = React.useState(""); // group comments const byAnchor = React.useMemo(() => { const m = {}; comments.forEach((c) => { (m[c.anchor] = m[c.anchor] || []).push(c); }); return m; }, [comments]); const amendments = variants .map((v) => { const val = (deal.variants || {})[v.id]; if (val == null || val === false || (Array.isArray(val) && !val.length)) return null; const text = v.langTemplate(val); if (!text) return null; return { variant: v, text }; }) .filter(Boolean); const commits = deal.commits || [50_000_000]; const cpm = deal.cpm || t.cpmRepresentative; const openComposer = (anchor, label) => { setActive({ anchor, label }); setDraft(""); setTimeout(() => { const el = document.getElementById("composer-input"); if (el) el.focus(); }, 50); }; const submitComment = () => { if (!draft.trim() || !active) return; const optimistic = { id: "new-" + Date.now(), anchor: active.anchor, anchorLabel: active.label, author: deal.contractAdmin?.name || "Reviewer", role: "customer", time: "just now", body: draft.trim(), status: "open", }; setComments([...comments, optimistic]); setDraft(""); setActive(null); if (onSubmitComment) { onSubmitComment(optimistic); } }; const setDecision = (id, val) => { setDecisions((d) => ({ ...d, [id]: d[id] === val ? null : val })); }; const scrollTo = (anchor) => { const el = document.querySelector(`[data-anchor="${anchor}"]`); if (el) { el.scrollIntoView({ block: "center", behavior: "smooth" }); setActive({ anchor, label: el.dataset.anchorLabel }); } }; const openComments = comments.filter((c) => c.status === "open").length; const allDecisionsMade = amendments.every((a) => decisions[a.variant.id]); const [showApproveConfirm, setShowApproveConfirm] = React.useState(false); const pendingDecisions = amendments.filter((a) => !decisions[a.variant.id]).length; const [showForward, setShowForward] = React.useState(false); const [showRequestChanges, setShowRequestChanges] = React.useState(false); const [showEditDetails, setShowEditDetails] = React.useState(false); return (
{/* DRAFT banner — always visible so the customer never confuses this surface with the binding DocuSign envelope. */}
Draft — not yet binding. This document becomes binding only when you trigger DocuSign signature below and both parties sign.
{/* Navy topbar */}
Nami
You're reviewing on behalf of {deal.customer}
Sent by Marcus Reid · Nami ML
{/* Sub-bar */}
{deal.name}
Service Order package · 4 pages · {amendments.length} pre-approved amendments
{deal.termYears}-year term {money(deal.tcv, { compact: true })} TCV
{/* Document */}
{/* Comments rail */}