// T2 Falcon Admin — IVR Voice template wizard // Mirrors the WhatsApp template flow (3 steps + maker/checker lifecycle). // Shape used inside the wizard's `data.ivr`: // { // type: 'static' | 'dynamic', // nodes: [ // { id, parent: parentId|null, key: '0'..'9'|'*'|'#'|null, label, segments: [Segment], terminal: TerminalAction|null } // ], // variables: [ { key, type: 'digit'|'number'|'date'|'time', sample } ], // } // Segment: { kind: 'recording', name, dur } | { kind: 'variable', key } const { useState: useStateIvr, useMemo: useMemoIvr, useEffect: useEffectIvr, useRef: useRefIvr, useLayoutEffect: useLayoutEffectIvr } = React; // ------------------------------ Defaults / utils ------------------------------ const ivrUid = () => 'n_' + Math.random().toString(36).slice(2, 9); const defaultIvrData = (type) => ({ type: type || 'static', nodes: [], variables: [], }); // Sample variables offered in the dynamic "Variable" dropdown out of the box (the user // can still add their own via the "+" button). One per supported type. const IVR_DEFAULT_VARS = [ { key: 'customer_name', type: 'string', sample: 'Ahmed Ali' }, { key: 'account_balance', type: 'number', sample: '1,500.50' }, { key: 'otp_code', type: 'digit', sample: '123456' }, { key: 'appointment_date', type: 'date', sample: '2026-03-05' }, { key: 'appointment_time', type: 'time', sample: '14:30' }, ]; const ivrVarTypeLabel = (type) => ({ number: 'Number', digit: 'Digit', date: 'Date', time: 'Time', string: 'String', name: 'String', datetime: 'Date' }[type] || type || ''); // Build a parent → children map from a flat node list const buildIvrTree = (nodes) => { const byParent = {}; nodes.forEach(n => { const p = n.parent || '__root__'; (byParent[p] = byParent[p] || []).push(n); }); Object.values(byParent).forEach(list => list.sort((a, b) => (a.key || '').localeCompare(b.key || ''))); return byParent; }; // Estimate playback duration (recordings sum + 0.5s per variable read) // A node's DTMF keys (supports multi-select). Falls back to the legacy single `key`. const ivrNodeKeys = (n) => (n && Array.isArray(n.keys) && n.keys.length) ? n.keys : (n && n.key ? [n.key] : []); // Compact key list for an edge label — keeps "Press N" pills small even when a node // is reachable by many keys (show the first few, then "+N more" as a count). const ivrKeysLabel = (keys) => (keys.length > 5) ? `${keys.slice(0, 4).join(' / ')} +${keys.length - 4}` : keys.join(' / '); const estimateNodeDuration = (node) => { let s = 0; (node.segments || []).forEach(seg => { if (seg.kind === 'recording') s += (seg.dur || 5); else if (seg.kind === 'variable') s += 1.2; }); return s; }; // ------------------------------ Type picker ------------------------------ const IvrTypeCard = ({ id, title, desc, icon, selected, onSelect }) => ( ); const IcIvrStatic = ( ); const IcIvrDynamic = ( ); // ------------------------------ Step 1: Basics + Type ------------------------------ const TplIvrStep1 = ({ data, setData, t }) => { const ivr = data.ivr || defaultIvrData('static'); const setType = (type) => setData({ ...data, ivr: { ...ivr, type } }); return (
setData({ ...data, name: e.target.value.slice(0, 512) })} /> {(data.name || '').length}/512
setData({ ...data, referenceId: e.target.value })} />

{t.ivrChooseType || 'Choose IVR type'}

{t.ivrChooseTypeDesc || 'Static plays one recording per node. Dynamic mixes recordings with resolvable variables.'}

); }; // ------------------------------ Step 2: Tree builder ------------------------------ const IcUpload = ; const IcPlusSm = ; const IvrIcTrash = ; const IcChev = ; const IcChevDownTree = ; const IcChevRightTree = ; const IcTree = ; const IcZoomIn = ; const IcZoomOut = ; const IvrIcClose = ; const IcPlusBig = ; const IcVoice = ; const IcReset = ; const IcPlay = ; const IcPause = ; const IcPlaySm = ; const IcPauseSm = ; const IcStopSm = ; // "Unfold" (chevrons apart) = expand all · "Fold" (chevrons together) = collapse all const IcExpandAll = ; const IcCollapseAll = ; const IcJump = ; const IvrIcMore = ; const IvrIcCenter = ; const IvrIcExpand = ; const IvrIcCompress = ; // Tree row (recursive) const IvrTreeRow = ({ nodeId, byParent, nodesMap, selectedId, onSelect, onAddChild, onDelete, depth = 0 }) => { const node = nodesMap[nodeId]; if (!node) return null; const kids = byParent[nodeId] || []; return (
onSelect(nodeId)}> {kids.length > 0 ? IcChev : } {node.key && {node.key}} {node.label || 'Untitled'} {(node.segments || []).length} seg e.stopPropagation()}> {node.parent && ( )}
{kids.map(k => ( ))}
); }; // Segment editor for the selected node const IvrSegmentEditor = ({ node, ivr, onChangeSegments, onAddRecording, onAddVariable, onRemoveSegment, t }) => { if (!node) return null; return (
{(node.segments || []).length === 0 && (
{t.ivrEmptySegments || 'No segments yet. Add a recording to get started.'}
)} {(node.segments || []).map((seg, idx) => (
{idx + 1} {seg.kind === 'recording' ? ( <> {IcUpload} {seg.name || 'recording.wav'} {seg.dur ? seg.dur + 's' : ''} ) : ( <> {`{${seg.key}}`} {(ivr.variables.find(v => v.key === seg.key) || {}).type || 'variable'} )}
))}
{ivr.type === 'dynamic' && ( )}
); }; // Voice picker — a Falcon-styled dropdown whose list is split into two source // tabs: "Uploaded by me" (the client's own recordings + uploads) and "Shared // with me" (the shared voice library), so you can tell where each voice comes from. const IcChevDown = ; const IcCheckSm = ; const IvrVoicePicker = ({ value, onChange, myVoices, sharedVoices, t }) => { const [open, setOpen] = useStateIvr(false); const [tab, setTab] = useStateIvr('mine'); const rootRef = useRefIvr(null); useEffectIvr(() => { if (!open) return; const onDoc = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false); }; document.addEventListener('mousedown', onDoc); return () => document.removeEventListener('mousedown', onDoc); }, [open]); const list = tab === 'mine' ? (myVoices || []) : (sharedVoices || []); return (
{open && (
{list.length === 0 &&
{t.ivrVoiceNone || 'Nothing here yet.'}
} {list.map(v => ( ))}
)}
); }; // Falcon-themed dropdown for a simple option list — same chrome as the voice picker // (custom trigger + white card menu), so every IVR dropdown matches the theme. // options: [{ value, label }]. const IvrSelect = ({ value, onChange, options, placeholder, onAddNew, addNewLabel, emptyLabel, t }) => { const [open, setOpen] = useStateIvr(false); const rootRef = useRefIvr(null); useEffectIvr(() => { if (!open) return; const onDoc = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false); }; document.addEventListener('mousedown', onDoc); return () => document.removeEventListener('mousedown', onDoc); }, [open]); const sel = (options || []).find(o => o.value === value); return (
{open && (
{(options || []).length === 0 &&
{emptyLabel || t.ivrNoOptions || 'Nothing here yet.'}
} {(options || []).map(o => ( ))}
{onAddNew && ( )}
)}
); }; // `inspect`: in a read-only canvas (template details), still let the user CLICK a node to // open its side panel and view/tweak each value (defaults) — but keep add/delete hidden. const TplIvrStep2 = ({ data, setData, t, readOnly = false, inspect = false }) => { const ivr = data.ivr || defaultIvrData('static'); // Read-only views (More Details / Share / Pending review): clicking a node opens the panel // ONLY to edit its Variables — and only for a dynamic flow (a static node has no variables). const canOpenNode = !readOnly || (inspect && ivr.type === 'dynamic'); // Empty canvas to start. The canvas "+" creates the ENTRY ("Voice 1"); each // node's bottom dot / in-card "+" adds a CHILD ("Voice 1.1") reached by a DTMF // key, drawn with a curved "Press N" connector. const updateIvr = (patch) => setData({ ...data, ivr: { ...ivr, ...patch } }); const [zoom, setZoom] = useStateIvr(1); const [pan, setPan] = useStateIvr({ x: 0, y: 0 }); // canvas offset (drag to move, like a map) const [panning, setPanning] = useStateIvr(false); const [fullscreen, setFullscreen] = useStateIvr(false); // canvas blown up to fill the viewport const dragRef = useRefIvr({ active: false, sx: 0, sy: 0, px: 0, py: 0 }); const [panelOpen, setPanelOpen] = useStateIvr(false); const [panelTab, setPanelTab] = useStateIvr('node'); // edit panel: 'node' form | 'variables' values const [editId, setEditId] = useStateIvr(null); const [parentForNew, setParentForNew] = useStateIvr(null); // parent id when ADDING a child (null = entry) const [selectedId, setSelectedId] = useStateIvr(null); // highlighted node; the stage "+" adds a child under it const [draft, setDraft] = useStateIvr({ name: '', voice: '', timeout: '', varType: '', varName: '', keys: [], kind: 'voice', segments: [] }); const [draftPos, setDraftPos] = useStateIvr({ x: 80, y: 80 }); // Voice sources, split for the picker's two tabs. const [myVoices, setMyVoices] = useStateIvr(['sound name 1', 'IVR-welcome.wav', 'Main-menu-AR.mp3']); const sharedVoices = ['Layla — Female (AR)', 'Omar — Male (AR)', 'Sara — Female (EN)']; const [play, setPlay] = useStateIvr(null); // { nodeId, idx, paused } — sequences a node's voice segments; pause freezes the progress bar at its position and resumes from there const scrollRef = useRefIvr(null); const fileRef = useRefIvr(null); const [varModalOpen, setVarModalOpen] = useStateIvr(false); // "add variable" modal (dynamic) const [varModalSegIdx, setVarModalSegIdx] = useStateIvr(null); // which dynamic segment the var modal targets const uploadSegIdxRef = useRefIvr(null); // which dynamic segment an upload targets const [confirmDel, setConfirmDel] = useStateIvr(null); // node id pending delete confirmation const [nodeHeights, setNodeHeights] = useStateIvr({}); // measured card heights so connectors meet variable-height cards // ----- Resizable canvas | panel split (drag the divider — same as Wallet & Balance) ----- // Panel width lives in state (null → CSS default 340px). Dragging the divider LEFT // widens the panel so the caller can inspect the construction more clearly; the // canvas keeps the rest. Double-click resets to default. const stepRef = useRefIvr(null); const [panelW, setPanelW] = useStateIvr(null); const [resizing, setResizing] = useStateIvr(false); // Tree (outline) view — toggled from the stage; collapse state per node. const [treeView, setTreeView] = useStateIvr(false); const [treeCollapsed, setTreeCollapsed] = useStateIvr({}); const PANEL_MIN = 300, CANVAS_MIN = 280; const panelMaxW = () => { const c = stepRef.current; return c ? Math.max(PANEL_MIN, c.getBoundingClientRect().width - CANVAS_MIN - 16) : 720; }; const startPanelResize = (startEv) => { startEv.preventDefault(); const c = stepRef.current; if (!c) return; const rect = c.getBoundingClientRect(); setResizing(true); document.body.style.userSelect = 'none'; document.body.style.cursor = 'col-resize'; const onMove = (ev) => { if (ev.cancelable) ev.preventDefault(); const clientX = ev.touches ? ev.touches[0].clientX : ev.clientX; const max = Math.max(PANEL_MIN, rect.width - CANVAS_MIN - 16); setPanelW(Math.round(Math.min(max, Math.max(PANEL_MIN, rect.right - clientX)))); }; const stop = () => { setResizing(false); document.body.style.userSelect = ''; document.body.style.cursor = ''; document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', stop); document.removeEventListener('touchmove', onMove); document.removeEventListener('touchend', stop); }; document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', stop); document.addEventListener('touchmove', onMove, { passive: false }); document.addEventListener('touchend', stop); }; const onPanelResizeKey = (e) => { if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return; e.preventDefault(); const base = panelW || 340; const next = e.key === 'ArrowLeft' ? base + 24 : base - 24; // ◄ widens the panel (divider moves left) setPanelW(Math.round(Math.min(panelMaxW(), Math.max(PANEL_MIN, next)))); }; const NODE_W = 260, NODE_H = 112, V_GAP = 74, H_GAP = 40; const KEYS = ['1','2','3','4','5','6','7','8','9','0','*','#']; const fmtDur = (s) => `00:${String(Math.max(0, Math.round(s || 0))).padStart(2, '0')}s`; // Canvas position for every node — a TIDY TREE layout so cards never stack on top of one // another. Each subtree gets its own horizontal band: siblings (with their whole subtrees) // are laid out left-to-right by subtree width, and every parent is centred over its children. // Y flows top-down from each parent's MEASURED bottom, so a card that grows (more segments) // pushes its children DOWN and the parent→child connectors stay correctly shaped. const nodes = ivr.nodes.map(n => ({ ...n, _x: 0, _y: 0 })); (() => { const kidsOf = (pid) => nodes.filter(n => (n.parent || null) === pid); const wCache = {}; const subtreeW = (n) => { if (wCache[n.id] != null) return wCache[n.id]; const kids = kidsOf(n.id); let w = NODE_W; if (kids.length) w = Math.max(NODE_W, kids.reduce((s, c) => s + subtreeW(c), 0) + H_GAP * (kids.length - 1)); wCache[n.id] = w; return w; }; const placeX = (n, leftX) => { const kids = kidsOf(n.id); if (!kids.length) { n._x = leftX; return; } let cx = leftX; kids.forEach(c => { placeX(c, cx); cx += subtreeW(c) + H_GAP; }); n._x = (kids[0]._x + kids[kids.length - 1]._x) / 2; // centre the parent over its children }; const flowY = (n, y) => { n._y = y; const h = nodeHeights[n.id] || NODE_H; kidsOf(n.id).forEach(c => flowY(c, y + h + V_GAP)); }; let rootX = 60; nodes.filter(n => !n.parent).forEach(r => { placeX(r, rootX); flowY(r, 48); rootX += subtreeW(r) + H_GAP; }); })(); const nodeById = (id) => nodes.find(n => n.id === id); const childrenOf = (pid) => ivr.nodes.filter(n => n.parent === pid); const nextKeyFor = (pid) => { const used = new Set(childrenOf(pid).flatMap(c => ivrNodeKeys(c))); return KEYS.find(k => !used.has(k)) || '#'; }; const hasRoot = ivr.nodes.some(n => !n.parent); const zoomIn = () => setZoom(z => Math.min(1.6, +(z + 0.15).toFixed(2))); const zoomOut = () => setZoom(z => Math.max(0.5, +(z - 0.15).toFixed(2))); // Fit the whole tree into view: zoom so the nodes' bounding box fits (with padding), then // pan so it's centred. Handles wide tidy trees that don't fit at zoom 1. const recenter = () => { const el = scrollRef.current; const r = el ? el.getBoundingClientRect() : { width: 900, height: 520 }; if (nodes.length === 0) { setZoom(1); setPan({ x: 0, y: 0 }); return; } const minX = Math.min(...nodes.map(n => n._x)); const maxX = Math.max(...nodes.map(n => n._x + NODE_W)); const minY = Math.min(...nodes.map(n => n._y)); const maxY = Math.max(...nodes.map(n => n._y + (nodeHeights[n.id] || NODE_H))); const bw = Math.max(1, maxX - minX), bh = Math.max(1, maxY - minY); const PAD = 56; const z = Math.max(0.3, Math.min(1, +Math.min((r.width - 2 * PAD) / bw, (r.height - 2 * PAD) / bh).toFixed(2))); setZoom(z); setPan({ x: r.width / 2 - z * (minX + maxX) / 2, y: r.height / 2 - z * (minY + maxY) / 2 }); }; // Auto-fit the tree into view once, after every card's height has been measured, so the // builder opens showing the whole flow (a tidy tree can be wide and its root centred far in). const recenterRef = useRefIvr(recenter); recenterRef.current = recenter; const didFitRef = useRefIvr(false); useLayoutEffectIvr(() => { if (didFitRef.current || !nodes.length || !scrollRef.current) return; if (!nodes.every(n => nodeHeights[n.id] != null)) return; // wait for measured heights didFitRef.current = true; recenterRef.current(); }); // Full screen: blow the canvas up to fill the viewport, and re-fit the tree to the new size. // Toggling back off restores the canvas to its original in-page position (a fresh re-fit). const toggleFullscreen = () => setFullscreen(v => !v); const fsMountRef = useRefIvr(false); useLayoutEffectIvr(() => { if (!fsMountRef.current) { fsMountRef.current = true; return; } // skip first render // Re-fit once the fixed full-screen (or restored in-page) layout has settled. setTimeout — // not requestAnimationFrame — so it still fires in a backgrounded/headless tab where rAF is paused. const id = setTimeout(() => recenterRef.current && recenterRef.current(), 60); return () => clearTimeout(id); }, [fullscreen]); useEffectIvr(() => { if (!fullscreen) return; const onKey = (e) => { if (e.key === 'Escape') setFullscreen(false); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [fullscreen]); // Pan the canvas like a map: grab the empty grid and drag in any direction. const onCanvasDown = (e) => { if (e.button !== 0) return; if (treeView) return; // tree view scrolls/clicks normally — no canvas panning if (e.target.closest('.ivr-cnode, .ivr-canvas-add, .ivr-canvas-zoom, .ivr-canvas-tree, .ivr-canvas-sim, .ivr-tv')) return; // let nodes/buttons handle their own clicks const d = dragRef.current; d.active = true; d.sx = e.clientX; d.sy = e.clientY; d.px = pan.x; d.py = pan.y; setPanning(true); e.preventDefault(); }; useEffectIvr(() => { const onMove = (e) => { const d = dragRef.current; if (!d.active) return; setPan({ x: d.px + (e.clientX - d.sx), y: d.py + (e.clientY - d.sy) }); }; const onUp = () => { if (dragRef.current.active) { dragRef.current.active = false; setPanning(false); } }; window.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onUp); return () => { window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); }; }, []); // Seed Step 2's canvas ONCE per IVR type, before paint (no flash of the old canvas). // On the FIRST entry for a template — or after the type is changed in Step 1 — we // start from a clean canvas and make sure the default variables are available. On // RE-ENTRY with the SAME type (coming back from Step 3, or from Step 1 without // changing the type) we KEEP every node the user already built instead of wiping // their work. `_seededType` records which type the current canvas was seeded for. useLayoutEffectIvr(() => { if (ivr._seededType === ivr.type) return; // already seeded for this type → preserve the nodes updateIvr({ nodes: [], variables: (ivr.variables || []).length ? ivr.variables : IVR_DEFAULT_VARS, _seededType: ivr.type }); // eslint-disable-next-line }, []); // The Add panel shrinks the canvas; recompute the ENTRY (centred) draft position // AFTER that reflow so the first card lands dead-centre of the *visible* stage. useLayoutEffectIvr(() => { if (!panelOpen || editId || parentForNew) return; const el = scrollRef.current; if (!el) return; const r = el.getBoundingClientRect(); setDraftPos({ x: (r.width / 2 - pan.x) / zoom - NODE_W / 2, y: (r.height / 2 - pan.y) / zoom - NODE_H / 2 }); // eslint-disable-next-line }, [panelOpen, editId, parentForNew]); // Where the about-to-be-created node sits (entry = centre of view; child = below its parent). const newNodePos = (parentId) => { const parent = parentId ? ivr.nodes.find(n => n.id === parentId) : null; if (!parent) { // First/entry node: drop it in the DEAD CENTRE of the visible stage. const el = scrollRef.current; const r = el ? el.getBoundingClientRect() : { width: 900, height: 520 }; return { x: (r.width / 2 - pan.x) / zoom - NODE_W / 2, y: (r.height / 2 - pan.y) / zoom - NODE_H / 2 }; } const sibs = childrenOf(parentId); return { x: (parent.x != null ? parent.x : 60) + sibs.length * (NODE_W + H_GAP) - NODE_W * 0.15, y: (parent.y != null ? parent.y : 48) + (nodeHeights[parentId] || NODE_H) + V_GAP, }; }; // Clicking any "Add" affordance opens the "Add node" side panel with an EMPTY // node previewed on the canvas; fill it in and Add to commit. Entry when // parentId is null, otherwise a keyed child of that parent. const openAdd = (parentId) => { setEditId(null); setParentForNew(parentId || null); setDraft({ name: '', voice: '', timeout: '', varType: '', varName: '', keys: parentId ? [nextKeyFor(parentId)] : [], kind: 'voice', segments: [] }); setDraftPos(newNodePos(parentId || null)); setPanelTab('node'); setPanelOpen(true); }; const openEdit = (n) => { const firstRec = (n.segments || []).find(s => s.kind === 'recording'); setEditId(n.id); setParentForNew(null); setDraft({ name: n.label || '', voice: n.voice || (firstRec ? firstRec.name : ''), timeout: n.timeout != null ? String(n.timeout) : '', varType: n.varType || '', varName: n.varName || '', keys: ivrNodeKeys(n), kind: n.varName ? 'variable' : 'voice', segments: (n.segments || []).map(s => ({ ...s })) }); setPanelTab(readOnly && ivr.type === 'dynamic' ? 'variables' : 'node'); setPanelOpen(true); }; const closePanel = () => { setPanelOpen(false); setEditId(null); setParentForNew(null); }; // Upload Voice → open the OS file picker; the chosen file's name becomes the sound. const onVoiceFile = (e) => { const f = e.target.files && e.target.files[0]; if (f) { setMyVoices(opts => opts.includes(f.name) ? opts : [...opts, f.name]); const segIdx = uploadSegIdxRef.current; if (segIdx != null) { setDraft(d => ({ ...d, segments: (d.segments || []).map((s, i) => i === segIdx ? { ...s, name: f.name } : s) })); uploadSegIdxRef.current = null; } else { setDraft(d => ({ ...d, voice: f.name })); } } e.target.value = ''; }; const isDyn = ivr.type === 'dynamic'; // A node only needs a NAME to be saved — the voice recording is OPTIONAL, so a // node can act as a pure router (e.g. a keypad-triggered Jump with no voice). const canSave = (draft.name || '').trim().length > 0; // A node can route the caller on with at most ONE "Go to node" — disable "+ Node" once added. const draftHasGoto = (draft.segments || []).some(s => s.kind === 'goto'); // A node is EITHER a Jump OR voice/variable content — never both (mutually exclusive). const draftHasContent = isDyn ? (draft.segments || []).some(s => s.kind === 'recording' || s.kind === 'variable') : !!(draft.voice || '').trim(); // The Voice chooser (tabbed picker + upload) — shared by the static form and the // dynamic "Voice" type so they look and behave identically. const voiceField = (
setDraft(d => ({ ...d, voice: v }))} myVoices={myVoices} sharedVoices={sharedVoices} t={t} />
); // ---- Dynamic node content: an ordered list of voice + variable segments ---- const addSeg = (seg) => setDraft(d => ({ ...d, segments: [...(d.segments || []), seg] })); const updateSeg = (idx, patch) => setDraft(d => ({ ...d, segments: (d.segments || []).map((s, i) => i === idx ? { ...s, ...patch } : s) })); const removeSeg = (idx) => setDraft(d => ({ ...d, segments: (d.segments || []).filter((_, i) => i !== idx) })); // Reorder segments — drag the row number, or use the up / down arrows. const [dragIdx, setDragIdx] = useStateIvr(null); const [overIdx, setOverIdx] = useStateIvr(null); const moveSeg = (from, to) => setDraft(d => { const segs = [...(d.segments || [])]; if (from == null || to == null || from < 0 || from >= segs.length || to < 0 || to >= segs.length || from === to) return d; const [m] = segs.splice(from, 1); segs.splice(to, 0, m); return { ...d, segments: segs }; }); const openUploadForSeg = (idx) => { uploadSegIdxRef.current = idx; if (fileRef.current) fileRef.current.click(); }; // Short content summary for a node card (its segments joined in play order). const contentSummary = (n) => { const segs = n.segments || []; if (segs.length) return segs.map(s => s.kind === 'recording' ? (s.name || (t.ivrRecording || 'recording')) : `{${s.key}}`).join(' · '); return n.voice || (n.varName ? `{${n.varName}}` : (t.ivrNoVoice || 'sound name')); }; // Render a node's content as a sequence of chips: voice = name pill, variable = {key}. // Render a node's segments as chips. When `nodeId` is given (a committed card), each // RECORDING chip becomes its own play/pause button so the user can hear each sound // individually; a thin bar animates for that segment's duration, then resets. const isVoiceSeg = (s) => !!s && (s.kind === 'recording' || s.kind === 'variable'); const segDurOf = (seg, nodeDur) => (seg && seg.kind === 'variable') ? 1.6 : ((seg && seg.dur) || nodeDur || 8); const renderSegChips = (segments, fallbackText, nodeId, nodeDur) => { const segs = (segments || []).filter(Boolean); if (!segs.length) return {fallbackText || (t.ivrNoVoice || 'sound name')}; // After the current segment finishes, jump to the next playable one — or stop at the end. const advance = (from) => { for (let j = from; j < segs.length; j++) { if (isVoiceSeg(segs[j])) { setPlay({ nodeId, idx: j, paused: false }); return; } } setPlay(null); }; return segs.map((seg, i) => { const playable = !!nodeId && isVoiceSeg(seg); const active = playable && play && play.nodeId === nodeId && play.idx === i; const paused = active && play.paused; const onClick = playable ? (e) => { e.stopPropagation(); if (active) setPlay(p => ({ ...p, paused: !p.paused })); else setPlay({ nodeId, idx: i, paused: false }); } : undefined; // The bar freezes where it reached on pause (animation-play-state) and resumes from there. const bar = active && advance(i + 1)} />; if (seg.kind === 'recording') { return ( {playable ? (active && !paused ? IcPauseSm : IcPlaySm) : IcVoice} {seg.name || (t.ivrRecording || 'voice')} {bar} ); } if (seg.kind === 'goto') return ↻ {(nodeById(seg.target) || {}).label || (t.ivrNode || 'node')}; return ( {'{' + (seg.key || '?') + '}'} {bar} ); }); }; // A node/draft "has audio" only when it contains at least one named recording. const segHasRecording = (segments) => (segments || []).some(s => s.kind === 'recording' && (s.name || '').trim()); // ----- Full-call simulation on the canvas ----- // Play every node's voice in DFS order, following (centring) the active node. Reuses // the per-node `play` mechanism: when a node's voice finishes (play → null), advance // to the next node. Pause freezes the active node's bar; Stop clears the queue. const [simActive, setSimActive] = useStateIvr(false); const simRef = useRefIvr({ list: [], pos: 0 }); const nodeVoiceSegs = (n) => (n && n.segments && n.segments.length) ? n.segments : (n && n.voice ? [{ kind: 'recording', name: n.voice, dur: n.dur }] : []); const nodeHasVoice = (n) => nodeVoiceSegs(n).some(isVoiceSeg); const playNodeForSim = (id) => { const segs = nodeVoiceSegs(nodeById(id)); for (let j = 0; j < segs.length; j++) { if (isVoiceSeg(segs[j])) { setPlay({ nodeId: id, idx: j, paused: false }); return true; } } return false; }; const playFullCall = () => { const list = ivrDfsNodes(buildIvrTree(ivr.nodes)).filter(nodeHasVoice).map(n => n.id); if (!list.length) return; simRef.current = { list, pos: 0 }; setSelectedId(null); setSimActive(true); playNodeForSim(list[0]); }; const stopSim = () => { simRef.current = { list: [], pos: 0 }; setSimActive(false); setPlay(null); }; const toggleSimPause = () => setPlay(p => p ? { ...p, paused: !p.paused } : p); // When the active node finishes (play → null) mid-sim, advance to the next node (or end). useEffectIvr(() => { if (!simActive) return; if (play == null) { const { list, pos } = simRef.current; const next = pos + 1; if (next < list.length) { simRef.current = { list, pos: next }; playNodeForSim(list[next]); } else { simRef.current = { list: [], pos: 0 }; setSimActive(false); } } }, [play, simActive]); // Keep the currently-playing node centred in the canvas during a sim. useEffectIvr(() => { if (!simActive || !play || !play.nodeId) return; const n = nodeById(play.nodeId), sc = scrollRef.current; if (!n || !sc) return; const r = sc.getBoundingClientRect(), h = nodeHeights[n.id] || NODE_H; setPan({ x: r.width / 2 - (n._x + NODE_W / 2) * zoom, y: r.height / 2 - (n._y + h / 2) * zoom }); }, [simActive, play && play.nodeId]); // Add a dynamic variable (from the modal): store it globally and select it on the // segment row that opened the modal. const addVariable = ({ key, type, sample }) => { updateIvr({ variables: [...(ivr.variables || []), { key, type, sample }] }); if (varModalSegIdx != null) updateSeg(varModalSegIdx, { key }); setVarModalOpen(false); setVarModalSegIdx(null); }; const saveNode = () => { if (!canSave) return; const name = draft.name.trim(); const timeout = draft.timeout === '' ? null : (parseInt(draft.timeout, 10) || 0); // Static = one recording (draft.voice). Dynamic = the ordered segment list // (multiple recordings and/or variables) the caller hears, built in the panel. const staticGoto = (draft.segments || []).find(s => s.kind === 'goto' && (s.target || '').trim()); // XOR: a node is EITHER a Jump OR voice/variable content — never both. A jump wins. const segments = isDyn ? (() => { const valid = (draft.segments || []).filter(s => s.kind === 'recording' ? (s.name || '').trim() : s.kind === 'goto' ? (s.target || '').trim() : (s.key || '').trim()); const goto = valid.find(s => s.kind === 'goto'); return (goto ? [goto] : valid.filter(s => s.kind !== 'goto')) .map(s => s.kind === 'recording' ? { kind: 'recording', name: s.name, dur: s.dur || 8 } : s.kind === 'goto' ? { kind: 'goto', target: s.target } : { kind: 'variable', key: s.key }); })() : staticGoto ? [{ kind: 'goto', target: staticGoto.target }] : ((draft.voice || '') ? [{ kind: 'recording', name: draft.voice, dur: 8 }] : []); const voice = (isDyn || staticGoto) ? '' : (draft.voice || ''); if (editId) { updateIvr({ nodes: ivr.nodes.map(n => { if (n.id !== editId) return n; const keys = n.parent ? (draft.keys.length ? draft.keys : ivrNodeKeys(n)) : []; return { ...n, label: name, key: keys[0] || null, keys, voice, varType: '', varName: '', timeout, segments }; }) }); } else { const parent = parentForNew ? ivr.nodes.find(n => n.id === parentForNew) : null; const keys = parent ? (draft.keys.length ? draft.keys : [nextKeyFor(parentForNew)]) : []; const node = { id: (!parent && !hasRoot) ? 'n_root' : ivrUid(), parent: parentForNew || null, key: keys[0] || null, keys, label: name, voice, varType: '', varName: '', timeout, dur: 8, segments, terminal: null, x: draftPos.x, y: draftPos.y, }; updateIvr({ nodes: [...ivr.nodes, node] }); if (!parent) setSelectedId(node.id); // entry → select it; a child keeps the parent selected } closePanel(); }; // Auto-commit an open, valid node draft when this step unmounts — i.e. clicking // "Next" (→ step 3) or "Previous" (→ step 1) while a node panel is open. Without // this, the node you were creating/editing in the panel would be silently lost // when you navigate away and come back to step 2. `commitDraftRef` always holds // the latest draft state (refreshed every render); the unmount cleanup runs it. const commitDraftRef = useRefIvr(() => {}); useEffectIvr(() => { commitDraftRef.current = () => { if (panelOpen && canSave) saveNode(); }; }); useEffectIvr(() => () => { commitDraftRef.current(); }, []); // How many nodes would a delete remove (the node + its whole subtree). const subtreeIds = (id) => { const remove = new Set([id]); let changed = true; while (changed) { changed = false; ivr.nodes.forEach(n => { if (n.parent && remove.has(n.parent) && !remove.has(n.id)) { remove.add(n.id); changed = true; } }); } return remove; }; // Deleting asks for confirmation first; the actual removal runs on confirm. const requestDelete = (id) => setConfirmDel(id); const doDeleteNode = (id) => { const remove = subtreeIds(id); updateIvr({ nodes: ivr.nodes.filter(n => !remove.has(n.id)) }); if (remove.has(editId)) closePanel(); if (remove.has(selectedId)) setSelectedId(null); setConfirmDel(null); }; const edges = nodes.filter(n => n.parent && nodeById(n.parent)); const draftParent = (panelOpen && !editId && parentForNew) ? nodeById(parentForNew) : null; const draftKeys = parentForNew ? (draft.keys.length ? draft.keys : [nextKeyFor(parentForNew)]) : []; // "Go to node" routes — drawn as dashed return/repeat lines on the canvas. const gotoEdges = nodes.flatMap(n => (n.segments || []).filter(s => s.kind === 'goto' && s.target && nodeById(s.target)).map(s => ({ from: n, to: nodeById(s.target) }))); // A return/goto edge is drawn as ONE dashed connector anchored at the vertical centre of // BOTH cards' side edges, routed like a rounded "racetrack": OUT from the source's row, // straight UP/DOWN a clear vertical CHANNEL beyond the cards, then back IN to the target // ALONG THE TARGET'S OWN ROW (entering on the target's row keeps it off whatever sits on the // row just below it). The channel runs down ONE SIDE — left or right, whichever crosses fewer // cards (ties → the more compact route). The source and target are INCLUDED when finding that // outer edge, so the channel always clears them and each end anchors on the edge that FACES // the channel — that's what stops the line from cutting back across its own card. Rendered // ABOVE the cards with a ring anchor at each end. const gotoGeom = (f, tg) => { const fh = nodeHeights[f.id] || NODE_H, th = nodeHeights[tg.id] || NODE_H; const fcy = f._y + fh / 2, tcy = tg._y + th / 2; // each card's vertical centre if (f.id === tg.id) { // self-loop ("Repeat") — small curl off the left edge const x = f._x, y = fcy; return { d: `M ${x} ${y - 16} C ${x - 76} ${y - 40}, ${x - 76} ${y + 40}, ${x} ${y + 16}`, lx: x - 54, ly: y, a1: [x, y - 16], a2: [x, y + 16] }; } const NW = NODE_W, yLo = Math.min(fcy, tcy), yHi = Math.max(fcy, tcy); // Occupied x-intervals across the band (INCLUDING source & target), merged into solid // blocks; the gaps between them are the clear lanes a channel can sit in. const bandIv = nodes.filter(n => { const h = nodeHeights[n.id] || NODE_H; return n._y < yHi && n._y + h > yLo; }) .map(n => [n._x, n._x + NW]).sort((a, b) => a[0] - b[0]); const occ = []; for (const iv of bandIv) { if (!occ.length || iv[0] > occ[occ.length - 1][1] + 1) occ.push([iv[0], iv[1]]); else occ[occ.length - 1][1] = Math.max(occ[occ.length - 1][1], iv[1]); } const candidates = [occ[0][0] - 34, occ[occ.length - 1][1] + 34]; // the lane just beyond everything, left & right const rects = nodes.filter(n => n.id !== f.id && n.id !== tg.id) .map(n => ({ x: n._x, y: n._y, w: NW, h: nodeHeights[n.id] || NODE_H })); // does a horizontal run at height `y` between x = xa..xb pass through a card's interior? const hitH = (r, y, xa, xb) => (r.y + 6 < y && y < r.y + r.h - 6) && (r.x + 6 < Math.max(xa, xb)) && (r.x + r.w - 6 > Math.min(xa, xb)); const fcx = f._x + NW / 2, tcx = tg._x + NW / 2; let best = null; for (const chX of candidates) { const p1x = chX >= fcx ? f._x + NW : f._x; // anchor on the edge that faces the channel const p2x = chX >= tcx ? tg._x + NW : tg._x; let c = 0; // only the two short IN/OUT runs can clip a neighbour for (let k = 0; k < rects.length; k++) { if (hitH(rects[k], fcy, p1x, chX) || hitH(rects[k], tcy, p2x, chX)) c++; } const detour = Math.abs(chX - p1x) + Math.abs(chX - p2x); if (!best || c < best.c || (c === best.c && detour < best.detour)) best = { p1x, p2x, chX, c, detour }; } const { p1x, p2x, chX } = best; const sgnX = chX >= p1x ? 1 : -1, sgnY = Math.sign(tcy - fcy) || 1; const r = Math.max(2, Math.min(28, Math.abs(chX - p1x) / 2, Math.abs(chX - p2x) / 2, Math.abs(tcy - fcy) / 2)); const d = `M ${p1x} ${fcy}` + ` L ${chX - sgnX * r} ${fcy} Q ${chX} ${fcy} ${chX} ${fcy + sgnY * r}` // out, round into the channel + ` L ${chX} ${tcy - sgnY * r} Q ${chX} ${tcy} ${chX - sgnX * r} ${tcy}` // up/down the channel, round onto target row + ` L ${p2x} ${tcy}`; // in along the target's row return { d, lx: chX, ly: (fcy + tcy) / 2, a1: [p1x, fcy], a2: [p2x, tcy] }; }; // ----- Edge-label layout (with de-overlap) ----- // "Press N" (parent→child) and "↻ Return/Repeat" (goto) pills are positioned // independently along different curves, so where edges cross they can land on // top of each other (e.g. "Press 3" under "↻ Return"). Build them as data, then // nudge any colliding pills apart VERTICALLY so every label stays readable while // keeping its horizontal position on its own edge. const LBL_H = 26; const estLblW = (txt) => (txt || '').length * 6.6 + 22; // rough pill width from text length // One "Press " pill PER child edge, sitting on that edge between the parent and the // child — exactly like the create flow. Each pill shows that single child's keypad key(s), // so the numbering is unambiguous (the pill belongs to the edge it sits on). const edgeLabels = [ ...edges.map(n => { const p = nodeById(n.parent); const text = `${t.ivrPress || 'Press'} ${ivrKeysLabel(ivrNodeKeys(n))}`; return { id: 'l' + n.id, cls: 'ivr-edge-label', text, x: (p._x + NODE_W / 2 + n._x + NODE_W / 2) / 2, y: (p._y + (nodeHeights[p.id] || NODE_H) + n._y) / 2, w: estLblW(text) }; }), ...gotoEdges.map((e, i) => { const self = e.from.id === e.to.id; const g = gotoGeom(e.from, e.to); // pill sits on the curve's midpoint const text = `↻ ${self ? (t.ivrRepeat || 'Repeat') : (t.ivrReturn || 'Return')}`; return { id: 'gl' + i, cls: 'ivr-edge-label is-return', text, x: g.lx, y: g.ly, w: estLblW(text) }; }), ]; // Greedy separation: push any overlapping pair apart along the vertical axis. for (let iter = 0; iter < 8; iter++) { let moved = false; for (let a = 0; a < edgeLabels.length; a++) { for (let b = a + 1; b < edgeLabels.length; b++) { const A = edgeLabels[a], B = edgeLabels[b]; const ox = (A.w + B.w) / 2 + 6 - Math.abs(A.x - B.x); // horizontal overlap (+6px gap) const oy = LBL_H + 4 - Math.abs(A.y - B.y); // vertical overlap (+4px gap) if (ox > 0 && oy > 0) { const push = oy / 2 + 0.5; if (A.y <= B.y) { A.y -= push; B.y += push; } else { A.y += push; B.y -= push; } moved = true; } } } if (!moved) break; } // ----- Tree (outline) view — a nested, collapsible list of the same nodes ----- // Renders the hierarchy as indented "IVR List" rows (chevron · name · Press key · // delete). Clicking a row's body opens its editor; the chevron collapses its branch. const renderTreeRows = (parentId, depth) => { const kids = ivr.nodes.filter(n => (n.parent || null) === parentId); return kids.flatMap((node) => { const hasKids = ivr.nodes.some(n => n.parent === node.id); const isCol = !!treeCollapsed[node.id]; // Same content the canvas card shows — voice / variable / goto chips (recordings // are individually playable). Static nodes fold their single voice into a chip. const segs = (node.segments && node.segments.length) ? node.segments : (node.voice ? [{ kind: 'recording', name: node.voice, dur: node.dur }] : []); const row = (
{ setSelectedId(node.id); openEdit(node); } : undefined}>
{node.label || (t.ivrUntitled || 'Untitled')} {node.parent && {(t.ivrPress || 'Press')} {ivrNodeKeys(node).join(' / ')}}
{segs.length > 0 &&
{renderSegChips(segs, node.voice, node.id, node.dur)}
}
{!readOnly && }
); return (hasKids && !isCol) ? [row, ...renderTreeRows(node.id, depth + 1)] : [row]; }); }; // DTMF keypad selector — shown only for CHILD nodes (the entry/root node has no key). // The node's own key is highlighted; keys already used by sibling nodes are disabled. const editingNode = editId ? ivr.nodes.find(n => n.id === editId) : null; const keyParentId = editId ? (editingNode ? editingNode.parent : null) : parentForNew; const showKeypad = panelOpen && (editId ? !!(editingNode && editingNode.parent) : !!parentForNew); const takenKeys = new Set(ivr.nodes.filter(n => n.parent === keyParentId && n.id !== editId).flatMap(n => ivrNodeKeys(n))); // The root / entry node (no parent) gets NO "Jump" option. const isRootNode = panelOpen && (editId ? !!(editingNode && !editingNode.parent) : !parentForNew); // Jump targets exclude the node being edited (a node can't jump to itself); a // brand-new node (editId == null) isn't in ivr.nodes yet, so nothing is excluded. const jumpTargetOptions = ivr.nodes.filter(nd => nd.id !== editId).map(nd => ({ value: nd.id, label: nd.label || (t.ivrUntitled || 'Untitled') })); return (
{nodes.length === 0 && !panelOpen && (
{t.ivrCanvasHint || 'Click + to create your first IVR node'}
)} {/* curved parent → child connectors */} {edges.map(n => { const p = nodeById(n.parent); const x1 = p._x + NODE_W / 2, y1 = p._y + (nodeHeights[p.id] || NODE_H); const x2 = n._x + NODE_W / 2, y2 = n._y; const dy = Math.max(46, (y2 - y1) * 0.5); return ; })} {draftParent && (() => { const x1 = draftParent._x + NODE_W / 2, y1 = draftParent._y + (nodeHeights[draftParent.id] || NODE_H); const x2 = draftPos.x + NODE_W / 2, y2 = draftPos.y; const dy = Math.max(46, (y2 - y1) * 0.5); return ; })()} {edgeLabels.map(L => (
{L.text}
))} {draftParent && (
{(t.ivrPress || 'Press')} {ivrKeysLabel(draftKeys)}
)} {nodes.map(n => { const allSegs = (n.segments && n.segments.length) ? n.segments : (n.voice ? [{ kind: 'recording', name: n.voice, dur: n.dur }] : []); const gotoSeg = allSegs.find(s => s.kind === 'goto' && s.target); const contentSegs = allSegs.filter(s => s.kind !== 'goto'); const hasVoice = contentSegs.some(isVoiceSeg); const nodeActive = play && play.nodeId === n.id; // Node play/pause: play the whole message from the first voice segment; pause toggles freeze/resume. const toggleNode = (e) => { e.stopPropagation(); if (nodeActive) { setPlay(p => ({ ...p, paused: !p.paused })); return; } for (let j = 0; j < contentSegs.length; j++) { if (isVoiceSeg(contentSegs[j])) { setPlay({ nodeId: n.id, idx: j, paused: false }); return; } } }; return (
{ if (el) { const h = el.offsetHeight; if (nodeHeights[n.id] !== h) setNodeHeights(prev => prev[n.id] === h ? prev : { ...prev, [n.id]: h }); } }} onClick={canOpenNode ? () => { setSelectedId(n.id); openEdit(n); } : undefined} >
{n.label || 'Voice'}
{gotoSeg && ↻ {(nodeById(gotoSeg.target) || {}).label || (t.ivrNode || 'node')}}
{contentSegs.length > 0 &&
{renderSegChips(contentSegs, n.voice, n.id, n.dur)}
}
{hasVoice && ( )} {!readOnly && (<> )}
{!readOnly &&
); })} {/* empty preview of the node being added — mirrors the "Add node" panel live */} {panelOpen && !editId && (
{(() => { const allSegs = isDyn ? (draft.segments || []) : (draft.voice ? [{ kind: 'recording', name: draft.voice }] : []); const gotoSeg = allSegs.find(s => s.kind === 'goto' && s.target); const contentSegs = allSegs.filter(s => s.kind !== 'goto'); return ( <>
{draft.name ? draft.name : {t.ivrNewNode || 'New node'}}
{gotoSeg && ↻ {(nodeById(gotoSeg.target) || {}).label || (t.ivrNode || 'node')}}
{renderSegChips(contentSegs, draft.voice || (t.ivrNoSound || 'No sound'))}
); })()} {(isDyn ? segHasRecording(draft.segments) : !!(draft.voice || '').trim()) && (
{IcPlay}
{fmtDur(8)}
)}
)} {/* return / goto edges — drawn ABOVE the cards so the dashed line is never chopped behind a node; one continuous, gentle curve per return */} {gotoEdges.map((e, i) => { const g = gotoGeom(e.from, e.to); return ( ); })}
{nodes.length > 0 && (
{simActive ? (<> ) : ( )}
)} {!readOnly && }
{treeView && (
{IcTree}{t.ivrListTitle || 'IVR List'}
{nodes.length === 0 ?
{t.ivrCanvasHint || 'Click + to create your first IVR node'}
: renderTreeRows(null, 0)}
)}
{panelOpen && (
setPanelW(null)} onKeyDown={onPanelResizeKey} >
)} {panelOpen && (
{/* Read-only views can only edit Variables, so the panel is titled "Edit variable". */}

{readOnly ? (t.ivrEditVariableTitle || 'Edit variable') : (editId ? (t.ivrEditTitle || 'Edit node') : (t.ivrAddNodeTitle || 'Add node'))}

{/* Node/Variables tabs only when EDITING a dynamic flow. In read-only views the node form is removed entirely — only the Variables editor is shown (no tabs). */} {isDyn && !readOnly && (
)} {(!readOnly && (!isDyn || panelTab === 'node')) ? ( /* The node form (the IVR "tree") is editable only when NOT read-only. In More Details it renders disabled — view the node, but the tree can't be edited (variables can). */
setDraft({ ...draft, name: e.target.value.slice(0, 60) })} />
{isDyn ? (
{!isRootNode && }
{(draft.segments || []).length === 0 && (
{t.ivrSegEmpty || 'Add voices and variables to build the message.'}
)} {(draft.segments || []).map((seg, idx) => (
{ if (dragIdx !== null) { e.preventDefault(); if (overIdx !== idx) setOverIdx(idx); } }} onDrop={(e) => { e.preventDefault(); let from = dragIdx; if (from === null && e.dataTransfer) { const raw = e.dataTransfer.getData('text/plain'); if (raw !== '' && raw != null) from = parseInt(raw, 10); } if (from !== null && !isNaN(from)) moveSeg(from, idx); setDragIdx(null); setOverIdx(null); }} > { setDragIdx(idx); e.dataTransfer.effectAllowed = 'move'; try { e.dataTransfer.setData('text/plain', String(idx)); } catch (_) {} }} onDragEnd={() => { setDragIdx(null); setOverIdx(null); }}>{idx + 1} {seg.kind === 'recording' ? ( <> updateSeg(idx, { name: v })} myVoices={myVoices} sharedVoices={sharedVoices} t={t} /> ) : seg.kind === 'goto' ? ( updateSeg(idx, { target: v })} placeholder={t.ivrGotoPh || 'Go to node…'} options={jumpTargetOptions} emptyLabel={t.ivrJumpNoTargets || 'No other nodes yet — add one to jump to it.'} t={t} /> ) : ( <> updateSeg(idx, { key: v })} options={(ivr.variables || []).map(v => ({ value: v.key, label: v.key, hint: ivrVarTypeLabel(v.type) }))} t={t} /> )}
))}
) : ( <> {/* A node is EITHER a voice OR a jump — hide the voice picker once a jump is added. */} {!draftHasGoto && voiceField} {/* Static nodes can also "Jump" to an existing node — but the ROOT node cannot. */} {!isRootNode && (
{(draft.segments || []).map((seg, idx) => seg.kind === 'goto' ? (
updateSeg(idx, { target: v })} placeholder={t.ivrGotoPh || 'Go to node…'} options={jumpTargetOptions} emptyLabel={t.ivrJumpNoTargets || 'No other nodes yet — add one to jump to it.'} t={t} />
) : null)}
)} )}
setDraft({ ...draft, timeout: e.target.value.replace(/[^\d]/g, '').slice(0, 3) })} /> {t.ivrSec || 'sec'}
{showKeypad && (
{['1','2','3','4','5','6','7','8','9','*','0','#'].map(k => { const isSel = (draft.keys || []).includes(k); const isTaken = takenKeys.has(k) && !isSel; return ( ); })}
{t.ivrKeyHint || 'The keypad number(s) the caller presses to reach this node — tap to select one or more.'}
)} {!readOnly && (
{editId && }
)}
) : (
{t.ivrVariablesHead || 'Variables'}{t.ivrVarsExampleHint || 'add an example value'}
{(() => { // Only the variables actually USED in the flow (any node) or in the node being // edited — each with an editable EXAMPLE value the caller will hear in preview. const usedKeys = new Set([...ivr.nodes, { segments: draft.segments }] .flatMap(n => (n.segments || []).filter(s => s.kind === 'variable' && s.key).map(s => s.key))); const shown = (ivr.variables || []).filter(v => usedKeys.has(v.key)); return shown.length === 0 ?
{t.ivrNoVarsUsed || 'No variables yet — add a variable to a node to set its example here.'}
: shown.map(v => (
{'{' + v.key + '}'} {ivrVarTypeLabel(v.type)}
updateIvr({ variables: (ivr.variables || []).map(x => x.key === v.key ? { ...x, sample: e.target.value } : x) })} />
)); })()}
)}
)} {/* Dynamic: add-variable modal */} {varModalOpen && ( v.key)} onClose={() => { setVarModalOpen(false); setVarModalSegIdx(null); }} onAdd={addVariable} t={t} /> )} {/* Confirm before deleting a node (and its subtree) */} {confirmDel != null && (() => { const node = ivr.nodes.find(n => n.id === confirmDel); const kids = subtreeIds(confirmDel).size - 1; return (
setConfirmDel(null)}>
e.stopPropagation()}>

{t.ivrDeleteTitle || 'Delete node?'}

{t.ivrDeleteConfirm || 'Are you sure you want to delete'} {node && node.label ? `"${node.label}"` : (t.ivrThisNode || 'this node')}? {kids > 0 ? ` This also removes its ${kids} sub-node${kids > 1 ? 's' : ''}.` : ''} {' '}{t.ivrDeleteUndo || 'This action cannot be undone.'}

); })()}
); }; // ------------------------------ Variable creation modal ------------------------------ const IvrVariableModal = ({ existingKeys, onClose, onAdd, t }) => { const [key, setKey] = useStateIvr(''); const [type, setType] = useStateIvr('number'); const [sample, setSample] = useStateIvr(''); const valid = /^[a-z][a-z0-9_]{1,31}$/.test(key) && !existingKeys.includes(key) && sample.trim().length > 0; return (
e.stopPropagation()}>

{t.ivrAddVariableTitle || 'Add variable'}

setKey(e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, ''))} /> {t.ivrVarKeyHint || 'Lower-case letters, digits and underscore. Starts with a letter.'}
setSample(e.target.value)} placeholder={type === 'digit' ? '123456' : type === 'number' ? '1500.50' : type === 'string' ? 'Ahmed Ali' : type === 'date' ? '2026-03-05' : '14:30'} />
); }; // ------------------------------ Step 3: Share & Submit ------------------------------ const TplIvrStep3 = ({ data, setData, t }) => { // Identical "Share & Submit" experience as the WhatsApp template wizard // (Shared With picker + Selected Users). Reused via the window global so the // two flows stay in lockstep. const Share = window.TplWizardStep3; return Share ? : null; }; // ------------------------------ Wizard wrapper ------------------------------ const TplIvrWizard = ({ t, lang, step, data, setData }) => { // Ensure ivr scaffolding exists once useEffectIvr(() => { if (!data.ivr) setData({ ...data, ivr: defaultIvrData('static') }); // eslint-disable-next-line }, []); return (
{t.ivrWizardTitle || 'Create IVR Voice Template'}
{(t.stepNum || 'step').toLowerCase()} {step}/3
{step === 1 && } {step === 2 && } {step === 3 && }
); }; // ------------------------------ Right-rail IVR preview (phone + DTMF) ------------------------------ const TplIvrPreview = ({ tpl, t }) => { if (!tpl || !tpl.ivr) { return (
{t.ivrPreviewEmpty || 'Build a node and add a recording to start the preview.'}
); } const { ivr } = tpl; const nodesMap = useMemoIvr(() => Object.fromEntries(ivr.nodes.map(n => [n.id, n])), [ivr.nodes]); const byParent = useMemoIvr(() => buildIvrTree(ivr.nodes), [ivr.nodes]); const [currentId, setCurrentId] = useStateIvr('n_root'); const [path, setPath] = useStateIvr(['n_root']); const [transcript, setTranscript] = useStateIvr([]); const [playing, setPlaying] = useStateIvr(false); const playTimer = useRefIvr(null); const current = nodesMap[currentId]; // Build a readable transcript for a node const renderSegment = (seg) => { if (seg.kind === 'recording') return `[♪ ${seg.name || 'recording'}]`; const v = ivr.variables.find(x => x.key === seg.key); if (!v) return `{${seg.key}}`; if (v.type === 'digit') return (v.sample || '').split('').join(' '); return v.sample || ''; }; const playNode = (id) => { if (playTimer.current) clearTimeout(playTimer.current); const n = nodesMap[id]; if (!n) return; setCurrentId(id); setPath(p => p[p.length - 1] === id ? p : [...p, id]); setPlaying(true); const lines = (n.segments || []).map(renderSegment); setTranscript(lines.length ? lines : ['[silent node]']); const dur = Math.max(1500, estimateNodeDuration(n) * 600); playTimer.current = setTimeout(() => setPlaying(false), dur); }; useEffectIvr(() => { playNode('n_root'); return () => playTimer.current && clearTimeout(playTimer.current); // eslint-disable-next-line }, [tpl]); const onKeyPress = (k) => { if (!current) return; const kids = byParent[current.id] || []; const match = kids.find(c => c.key === k); if (match) { playNode(match.id); return; } // No match — replay current playNode(current.id); }; const onRestart = () => { setPath(['n_root']); playNode('n_root'); }; const onBack = () => { if (!current?.parent) return; playNode(current.parent); }; return (
{t.ivrCallStatus || 'In call · Aramco IVR'}
{current?.key || '·'}
{current?.label || ''}
{transcript.map((line, i) =>
{line}
)}
{(byParent[currentId] || []).map(c => (
{c.key}{c.label}
))} {(byParent[currentId] || []).length === 0 && (
{t.ivrTerminalNode || 'Terminal node — no further options'}
)}
{['1','2','3','4','5','6','7','8','9','*','0','#'].map(k => ( ))}
); }; // ------------------------------ Right-rail IVR review (Checker details view) ------------------------------ // Replaces the phone simulator: a structured, read-only view of the whole IVR tree // so a Checker can review the template and everything created within it — every node, // the DTMF key that reaches it, its voice/variable content, and its terminal action. const ivrTermLabel = (terminal, t) => { if (!terminal || !terminal.type) return null; const map = { hangup: t.ivrTermHangup || 'End the call', return_parent: t.ivrTermReturn || 'Return to previous menu', return_root: t.ivrTermRoot || 'Return to main menu', transfer: t.ivrTermTransfer || 'Transfer to an agent', repeat: t.ivrTermRepeat || 'Repeat this message', }; return map[terminal.type] || terminal.type; }; // Recording file name → a human label for review (drop extension/locale suffix). const ivrPrettyName = (name) => { if (!name) return 'Recording'; const s = String(name).replace(/\.(wav|mp3|m4a|ogg)$/i, '').replace(/[-_](ar|en)$/i, '').replace(/[-_]+/g, ' ').trim(); return s.charAt(0).toUpperCase() + s.slice(1); }; // Friendly clip-duration label. const ivrFmtDur = (s) => `00:${String(Math.max(0, Math.round(s || 8))).padStart(2, '0')}s`; // Short clip duration for the step rows (e.g. "4s"). const ivrShortDur = (s) => `${Math.max(1, Math.round(s || 8))}s`; // Spoken read time (seconds) for a variable value — paces the preview playback. const ivrVarReadDur = (val) => { const s = String(val == null ? '' : val).trim(); return Math.max(1, Math.min(6, s.length * 0.13 + 0.7)); }; // The audible items of a node, in order (recordings + variables; a "go to" carries no audio). const ivrNodeItems = (n) => { const segs = (n.segments && n.segments.length) ? n.segments : (n.voice ? [{ kind: 'recording', name: n.voice, dur: n.dur }] : []); const out = []; segs.forEach((seg, i) => { if (seg.kind === 'recording' || seg.kind === 'variable') out.push({ key: n.id + '-' + i, nodeId: n.id }); }); return out; }; // Depth-first walk of the whole tree (for "simulate full call"). const ivrDfsNodes = (byParent) => { const out = []; const walk = (pid) => (byParent[pid] || []).forEach(n => { out.push(n); walk(n.id); }); walk('__root__'); return out; }; // One node as a collapsible review card: a START / PRESS-key header with a Level badge and // expand toggle, the numbered list of everything the caller hears (each step individually // playable + a "Play message" that reads the whole node with the variable values spoken in // place), and a footer with the keypad-option toggle or terminal action. Children render as // nested, collapsible cards along a connector rail; indentation is capped for deep trees. const IvrFlowNode = ({ id, byParent, nodesMap, vars, varValues, depth, isRoot, collapsed, toggleCollapse, playingKey, activeNodeId, paused, playNode, playStep, stop, togglePause, onBarEnd, nodeRefs, dfsIndex, t }) => { const n = nodesMap[id]; if (!n) return null; const kids = byParent[id] || []; const hasKids = kids.length > 0; const isCollapsed = collapsed.has(id); const term = ivrTermLabel(n.terminal, t); const segs = (n.segments && n.segments.length) ? n.segments : (n.voice ? [{ kind: 'recording', name: n.voice, dur: n.dur }] : []); const keys = ivrKeysLabel(ivrNodeKeys(n)); const hasAudio = segs.some(s => s.kind === 'recording' || s.kind === 'variable'); const isNodePlaying = activeNodeId === id; // any sound currently coming from this node // A node may route the caller onward with one "goto" — shown as a pill in the caption row. const gotoSeg = segs.find(s => s.kind === 'goto'); const gotoTgt = gotoSeg ? (((nodesMap[gotoSeg.target] || {}).label) || (t.ivrNode || 'node')) : ''; // "Return to" only when routing back to a start/root node (e.g. Main Menu); "Jump to" otherwise. const gotoTgtParent = gotoSeg ? (nodesMap[gotoSeg.target] || {}).parent : 'x'; const gotoBack = gotoSeg ? (!gotoTgtParent || gotoTgtParent === '__root__') : false; const gotoLbl = gotoBack ? (t.ivrReturnTo || 'Return to') : (t.ivrJumpTo || 'Jump to'); return (
{ if (nodeRefs && nodeRefs.current) nodeRefs.current[id] = el; }}>
{hasKids ? :
{(hasAudio || gotoSeg) && (
{gotoSeg && ( {gotoLbl} {gotoTgt} )} {hasAudio && }
)} {segs.length === 0 ?
{t.ivrNoMessage || 'No message set'}
: (
    {segs.map((seg, si) => { if (seg.kind === 'goto') return null; // routing is shown as a pill in the caption row const no = segs.slice(0, si).filter(s => s.kind !== 'goto').length + 1; const stepKey = id + '-' + si; const isP = playingKey === stepKey; if (seg.kind === 'recording') { return (
  1. {no} {ivrPrettyName(seg.name)} {ivrShortDur(seg.dur)} {isP && }
    2. ); } const vmeta = vars.find(v => v.key === seg.key) || {}; const val = varValues[seg.key]; return (
  2. {no} {'{' + seg.key + '}'} {val ? {val} : {ivrVarTypeLabel(vmeta.type)}} {isP && }
    3. ); })}
)} {hasKids ? : term ?
↳ {term}
: null}
{hasKids && !isCollapsed && (
{kids.map(k => )}
)}
); }; const TplIvrDetails = ({ tpl, t }) => { const ivr = tpl && tpl.ivr; const nodes = (ivr && ivr.nodes) || []; const vars = (ivr && ivr.variables) || []; const nodesMap = useMemoIvr(() => Object.fromEntries(nodes.map(n => [n.id, n])), [nodes]); const byParent = useMemoIvr(() => buildIvrTree(nodes), [nodes]); const parentOf = useMemoIvr(() => Object.fromEntries(nodes.map(n => [n.id, n.parent || null])), [nodes]); const depthOf = useMemoIvr(() => { const d = {}; const walk = (pid, dep) => (byParent[pid] || []).forEach(nn => { d[nn.id] = dep; walk(nn.id, dep + 1); }); walk('__root__', 0); return d; }, [byParent]); // Visual (DFS pre-order) position of each node, so a jump's arrow can point toward where the target renders (above/below). const dfsIndex = useMemoIvr(() => { const m = {}; ivrDfsNodes(byParent).forEach((nn, i) => { m[nn.id] = i; }); return m; }, [byParent]); // Editable variable values — used both inline and spoken during preview playback. const [varValues, setVarValues] = useStateIvr(() => Object.fromEntries(vars.map(v => [v.key, v.sample || '']))); // Collapse state. Large trees start with only the first level open so 10+ levels stay tidy. const [collapsed, setCollapsed] = useStateIvr(() => { if (nodes.length <= 6) return new Set(); return new Set(nodes.filter(n => (depthOf[n.id] || 0) >= 1 && (byParent[n.id] || []).length > 0).map(n => n.id)); }); const toggleCollapse = (id) => setCollapsed(prev => { const s = new Set(prev); if (s.has(id)) s.delete(id); else s.add(id); return s; }); const expandAll = () => setCollapsed(new Set()); const collapseAll = () => setCollapsed(new Set(nodes.filter(n => (byParent[n.id] || []).length > 0).map(n => n.id))); // Playback sequencer: a queue of audible items advanced by each step's progress-bar end, // so per-step, per-node and full-call playback all reuse one moving highlight. const [seq, setSeq] = useStateIvr([]); const [seqIdx, setSeqIdx] = useStateIvr(0); const [paused, setPaused] = useStateIvr(false); // freeze the active step's progress bar in place; resume continues from where it stopped const nodeRefs = useRefIvr({}); const [tab, setTab] = useStateIvr('levels'); const active = (seq.length && seqIdx < seq.length) ? seq[seqIdx] : null; const playingKey = active ? active.key : null; const activeNodeId = active ? active.nodeId : null; const isPlaying = seq.length > 0; const stop = () => { setSeq([]); setSeqIdx(0); setPaused(false); }; const onBarEnd = () => setSeqIdx(i => i + 1); const togglePause = () => setPaused(p => !p); const playNode = (id) => { const items = ivrNodeItems(nodesMap[id]); if (!items.length) return; setPaused(false); setSeq(items); setSeqIdx(0); }; const playStep = (id, i) => { const key = id + '-' + i; if (playingKey === key) { togglePause(); return; } setPaused(false); setSeq([{ key, nodeId: id }]); setSeqIdx(0); }; const playFullCall = () => { const items = ivrDfsNodes(byParent).flatMap(n => ivrNodeItems(n)); if (!items.length) return; setPaused(false); setCollapsed(new Set()); setSeq(items); setSeqIdx(0); }; // Advancement is driven by the active step's own progress bar: its onAnimationEnd calls // onBarEnd() to move to the next item. Pausing sets the bar's animation-play-state to // "paused", which freezes it where it is AND keeps it from ever reaching its end, so the // queue cannot advance while paused; resuming continues the bar from the frozen position. // Stop clears the queue (unmounts the bar), so playback can never advance on its own. // End of queue → reset. useEffectIvr(() => { if (seq.length && seqIdx >= seq.length) { setSeq([]); setSeqIdx(0); } }, [seqIdx, seq]); // Follow the playing step: open its ancestors and scroll it into view. useEffectIvr(() => { if (!playingKey || !activeNodeId) return; setCollapsed(prev => { let next = null; let p = parentOf[activeNodeId]; while (p) { if (prev.has(p)) { if (!next) next = new Set(prev); next.delete(p); } p = parentOf[p]; } return next || prev; }); const el = nodeRefs.current && nodeRefs.current[activeNodeId]; if (el && el.scrollIntoView) el.scrollIntoView({ block: 'nearest' }); }, [playingKey]); // ---- Orange "jump" connectors: EACH goto gets its OWN vertical lane inside a dedicated left // channel (the flow list's padding-left). Because every lane sits left of every card, no two // jump lines overlap and none ever crosses a card — each line runs from its source out to its // lane, up/down, then into its target card. ---- const JUMP_LANE0 = 6, JUMP_LANE_GAP = 12, MAX_JUMP_LANES = 6; const gotoCount = useMemoIvr(() => nodes.filter(n => (n.segments || []).some(s => s.kind === 'goto' && s.target)).length, [nodes]); const jumpChannel = gotoCount > 0 ? (JUMP_LANE0 + Math.min(gotoCount, MAX_JUMP_LANES) * JUMP_LANE_GAP) : 0; const listRef = useRefIvr(null); const [jumpPaths, setJumpPaths] = useStateIvr([]); const measureJumps = () => { const list = listRef.current; if (!list) return; const base = list.getBoundingClientRect(); const out = []; let lane = 0; // a fresh lane per rendered jump → separate lines nodes.forEach(n => { const g = (n.segments || []).find(s => s.kind === 'goto' && s.target); if (!g) return; const sEl = nodeRefs.current[n.id]; if (!sEl) return; // source not rendered (an ancestor is collapsed) const s = sEl.getBoundingClientRect(); const sLeft = s.left - base.left, sTop = s.top - base.top; const sY = sTop + 52; // anchor at the "Jump to" pill row const tEl = nodeRefs.current[g.target]; let d, arrow; if (tEl) { // target rendered → its own lane, connect into the card const tr = tEl.getBoundingClientRect(); const tLeft = tr.left - base.left, tTop = tr.top - base.top; const up = (tTop + tr.height / 2) < sTop; const tY = up ? (tTop + tr.height - 12) : (tTop + 12); const gx = JUMP_LANE0 + (lane % MAX_JUMP_LANES) * JUMP_LANE_GAP; // this jump's own lane lane++; d = 'M' + sLeft + ' ' + sY + ' H' + gx + ' V' + tY + ' H' + tLeft; // arrowhead sits ON the target node's left edge, pointing right INTO the card arrow = 'M' + (tLeft - 7) + ' ' + (tY - 5) + ' L' + tLeft + ' ' + tY + ' L' + (tLeft - 7) + ' ' + (tY + 5); } else { // target collapsed → short directional arrow in the gutter const ti = dfsIndex[g.target], si = dfsIndex[n.id]; const up = (typeof ti === 'number' && typeof si === 'number') ? (ti < si) : true; const gx = Math.max(6, sLeft - 14); const endY = up ? (sY - 92) : (sY + 92); d = 'M' + sLeft + ' ' + sY + ' H' + gx + ' V' + endY; arrow = up ? ('M' + (gx - 5) + ' ' + (endY + 7) + ' L' + gx + ' ' + endY + ' L' + (gx + 5) + ' ' + (endY + 7)) : ('M' + (gx - 5) + ' ' + (endY - 7) + ' L' + gx + ' ' + endY + ' L' + (gx + 5) + ' ' + (endY - 7)); } out.push({ key: n.id, d, arrow }); }); setJumpPaths(out); }; const measureRef = useRefIvr(measureJumps); measureRef.current = measureJumps; useLayoutEffectIvr(() => { measureRef.current(); }, [collapsed, byParent, nodes, tab]); useEffectIvr(() => { const list = listRef.current; if (!list || typeof ResizeObserver === 'undefined') return undefined; const ro = new ResizeObserver(() => { if (measureRef.current) measureRef.current(); }); ro.observe(list); return () => ro.disconnect(); }, []); if (!ivr || !nodes.length) { return
{t.ivrReviewEmpty || 'No IVR voice flow to display.'}
; } const isDyn = ivr.type === 'dynamic'; const roots = byParent['__root__'] || []; const recCount = nodes.reduce((a, n) => a + ((n.segments || []).filter(s => s.kind === 'recording').length || (n.voice ? 1 : 0)), 0); const deep = (Math.max(0, ...Object.values(depthOf)) + 1); const hasVars = isDyn && vars.length > 0; const tabs = [ { id: 'info', label: t.ivrTabInfo || 'Information' }, { id: 'levels', label: t.ivrTabLevels || 'Levels' }, ...(hasVars ? [{ id: 'variables', label: t.ivrTabVariables || 'Variables' }] : []), ]; const activeTab = (tab === 'variables' && !hasVars) ? 'levels' : tab; return (
{tpl.name || (t.ivrReviewTitle || 'IVR Voice flow')}
{isDyn ? (t.ivrBadgeDynamic || 'Dynamic') : (t.ivrBadgeStatic || 'Static')}
{tabs.map(tb => ( ))}
{activeTab === 'info' && (
{t.ivrInfoNodes || 'Nodes'}{nodes.length}
{t.ivrInfoRecordings || 'Recordings'}{recCount}
{isDyn &&
{t.ivrInfoVariables || 'Variables'}{vars.length}
}
{t.ivrInfoLevels || 'Levels'}{deep}
{t.ivrInfoType || 'Type'}{isDyn ? (t.ivrBadgeDynamic || 'Dynamic') : (t.ivrBadgeStatic || 'Static')}
{tpl.referenceId &&
{t.ivrInfoRef || 'Reference ID'}{tpl.referenceId}
}
{tpl.body &&

{tpl.body}

}
)} {activeTab === 'levels' && (
{isPlaying && } {isPlaying && activeNodeId && {(nodesMap[activeNodeId] || {}).label}} {!isPlaying && (
)}
{roots.map(r => )}
)} {activeTab === 'variables' && hasVars && (
{t.ivrVariablesHead || 'Variables'}{t.ivrVarsHint || 'set values to preview'}
{vars.map(v => (
{'{' + v.key + '}'} {ivrVarTypeLabel(v.type)}
setVarValues(p => ({ ...p, [v.key]: e.target.value }))} />
))}
)}
); }; // ===== Single-page Edit / Share screen for IVR voice templates ===== // Reachable from the templates-list row menu. EDIT: the template details (Name, Reference, // Language) AND the canvas tree are all editable — only Template ID and Service Type are // locked. SHARE (readOnly): every detail is read-only and the flow is shown as the read-only // review tree (IVR Voice Flow); only "Shared With" can be changed (Select-all + multi-select, // matching the WhatsApp share screen). const TplIvrEditForm = ({ data, setData, t, lang, readOnly = false }) => { const ivr = data.ivr || defaultIvrData('static'); const isDyn = ivr.type === 'dynamic'; const ShareMulti = window.TplShareMulti; const ActionHistory = window.TplActionHistory; const serviceTypeLabel = isDyn ? (t.ivrBadgeDynamic || 'Dynamic') : (t.ivrBadgeStatic || 'Static'); const statusLabel = data.status ? (data.status.charAt(0).toUpperCase() + data.status.slice(1)) : '—'; // Always-read-only display field (the Template ID, Service Type and the system fields) — // same locked look as the WhatsApp edit screen. const Locked = ({ label, value, title, full }) => (
); // User-editable field — editable in Edit mode, read-only (locked) in Share mode. const EditText = ({ label, value, onChange, placeholder }) => (
{readOnly ? : }
); return (
{readOnly ? (t.shareTemplate || 'Share Template') : (t.editTemplate || 'Edit Template')}
{serviceTypeLabel}
{readOnly && (
{t.shareNote || 'All fields are read-only. Only "Shared With" can be changed below.'}
)} {/* The SAME fields as the Template Details card. Editable where it makes sense (Name, Reference ID, Shared With); Template ID, Service Type and the system fields (Created By / Creation Date / Channel / Status) stay locked. In Share mode every field except "Shared With" is read-only. */}
setData({ ...data, name: e.target.value.slice(0, 512) })} /> setData({ ...data, referenceId: e.target.value })} /> {/* Shared With — editable in BOTH modes (Select all + multi-select) */}
{ShareMulti ? setData({ ...data, sharedIds: ids })} t={t} /> : }
{/* Action history — the same maker–checker table as the More-Details view, placed directly under the template details (both Edit and Share). */} {ActionHistory && (
)} {/* Same canvas/template section in both modes. Edit = the live builder; Share = the very same canvas, read-only — display + pan/zoom navigation only, no editing. */}
); }; Object.assign(window, { TplIvrWizard, TplIvrPreview, TplIvrDetails, TplIvrEditForm, TplIvrStep2, defaultIvrData, buildIvrTree, });