// ESIGN PLATFORM — enterprise extension views (improvements #1-#18) // Additive components wired to EsStore via useEsStore; rendered by patched hubs. (function () { const { useState, useMemo, useEffect } = React; const Tx = window.ArbiterTokens; // ────────────────────────────────────────────────────────────────────────────── // Small utility components // ────────────────────────────────────────────────────────────────────────────── function EsModal({ open, title, onClose, width = 720, children }) { if (!open) return null; const es = window.__es; return (
e.stopPropagation()} style={{ width, maxWidth: '92vw', maxHeight: '86vh', overflow: 'auto', background: Tx.color.bg.card, borderRadius: '12px', boxShadow: '0 20px 60px rgba(0,0,0,0.35)', border: `1px solid ${Tx.color.border.light}` }}>
{title}
{children}
); } window.EsModal = EsModal; function EsActionButton({ onClick, label, variant = 'secondary', icon = null, disabled = false }) { const es = window.__es; const style = variant === 'primary' ? es.btnPrimary : variant === 'ghost' ? es.btnGhost : es.btnSecondary; return ( ); } window.EsActionButton = EsActionButton; // ────────────────────────────────────────────────────────────────────────────── // #1 — Signer Flow Preview (end-to-end signer experience) // ────────────────────────────────────────────────────────────────────────────── function EsSignerPreview({ envelopeId, onClose }) { const es = window.__es; const s = window.useEsStore(['envelope.created', 'envelope.sent']); const env = s.envelopes.find(e => e.id === envelopeId); const [step, setStep] = useState(0); const steps = ['Consent (ESIGN Act)', 'Identity Check (KBA)', 'Review Document', 'Sign Fields', 'Confirm & Submit']; if (!env) return null; return (
{steps.map((name, i) => (
setStep(i)}>
STEP {i + 1}
{name}
))}
{step === 0 && (
Electronic Signature Consent
By clicking I Agree, you consent to use electronic records and signatures under the ESIGN Act (15 U.S.C. §7001) and UETA where applicable. System records your consent, IP, user agent, and timestamp.
ok Consent captured · logged to audit trail
)} {step === 1 && (
Knowledge-Based Authentication
5 identity questions sourced from credit bureau. Score ≥ 4/5 required.
{[1,2,3,4,5].map(q => (
Q{q}: Public-records identity question ok Correct
))}
)} {step === 2 && (
Document Review
{env.subject}
{env.pages} pages · {env.fields} required fields
)} {step === 3 && } {step === 4 && (
Confirm & Submit
Signer: {(env.recipients[0] || {}).name || 'Current User'}
Envelope: {env.id}
Pages: {env.pages}
Hash: sha256 · locked on submit
ok Signature bound · Certificate enqueued
)}
); } window.EsSignerPreview = EsSignerPreview; // ────────────────────────────────────────────────────────────────────────────── // #2 — Field Placement Canvas // ────────────────────────────────────────────────────────────────────────────── function EsFieldCanvas({ envelopeId, readOnly = false }) { const es = window.__es; const s = window.useEsStore(); const fields = (s.fieldPlacements && s.fieldPlacements[envelopeId]) || []; const env = s.envelopes.find(e => e.id === envelopeId); const [page, setPage] = useState(fields[0] ? fields[0].page : 1); const pages = Array.from(new Set(fields.map(f => f.page))).sort((a, b) => a - b); const visible = fields.filter(f => f.page === page); const fieldColor = { signature: es.indigo, date: es.teal, initials: es.violet, text: es.slate, checkbox: es.amber }; if (!env) return
Envelope not found.
; if (fields.length === 0) return
No field placements recorded for this envelope.
; return (
Page: {pages.map(p => ( ))} {visible.length} field(s) on page {page}
PAGE {page} OF {env.pages}
{visible.map(f => { const rec = (env.recipients.find(r => r.id === f.recipient) || {}); return (
{f.type}
); })}
{Object.keys(fieldColor).map(k => (
{k}
))}
); } window.EsFieldCanvas = EsFieldCanvas; // ────────────────────────────────────────────────────────────────────────────── // #3 — Routing Visualizer (signer order graph) // ────────────────────────────────────────────────────────────────────────────── function EsRoutingVisualizer({ envelopeId }) { const es = window.__es; const s = window.useEsStore(); const env = s.envelopes.find(e => e.id === envelopeId); if (!env) return null; const byOrder = [...env.recipients].sort((a, b) => (a.order || 0) - (b.order || 0)); return (
Routing Order
{byOrder.map((r, i) => { const st = es.signerStatus(r.status); return (
#{r.order} · {r.role.toUpperCase()}
{r.name}
{r.status}{r.signedAt ? ' · ' + new Date(r.signedAt).toLocaleDateString() : ''}
{i < byOrder.length - 1 && →} ); })}
); } window.EsRoutingVisualizer = EsRoutingVisualizer; // ────────────────────────────────────────────────────────────────────────────── // #4 — Redline Queue (Accept/Reject/Counter workflow) // ────────────────────────────────────────────────────────────────────────────── function EsRedlineQueue() { const es = window.__es; const s = window.useEsStore(['redline.proposed', 'redline.decided']); const [editing, setEditing] = useState(null); const [counter, setCounter] = useState(''); return (
Redline Workflow Queue {s.redlines.length} proposals · {s.redlines.filter(r => r.status === 'Pending Review').length} pending
{s.redlines.map(r => { const env = s.envelopes.find(e => e.id === r.envelopeId); const pending = r.status === 'Pending Review'; return ( ); })}
Clause Envelope Proposer Summary Status Actions
{r.clause} {env ? env.subject : r.envelopeId} {r.proposer} {r.summary.length > 60 ? r.summary.slice(0, 60) + '…' : r.summary} {r.status} {pending ? ( ) : {r.decidedBy || '—'}}
setEditing(null)} width={600}> {editing && (
Original proposer summary
{editing.summary}
Counter-text