// tow-screens-b.jsx — Results hub (Offers / Map / Dispatcher), Confirm sheet, Tracking const RADIUS_PX = { 3: 70, 5: 105, 10: 150, 20: 200 }; // ── RESULTS HUB ────────────────────────────────────────────────────── function Results({ go, count, cardStyle, defaultRadius, onPick }) { const accent = window.useAccent(); const [tab, setTab] = React.useState('offers'); const TABS = [ { id: 'offers', label: 'Офферы', icon: 'thumbs-up' }, { id: 'map', label: 'Карта', icon: 'map' }, { id: 'dispatch', label: 'Диспетчер', icon: 'headset' }, ]; return (
go('hero')} right={ } /> {/* segmented */}
{TABS.map(t => { const on = tab === t.id; return ( ); })}
{tab === 'offers' && } {tab === 'map' && } {tab === 'dispatch' && }
); } window.Results = Results; // ── OFFERS TAB ─────────────────────────────────────────────────────── function OffersTab({ count, cardStyle, accent, onPick }) { const tows = window.TOWS.slice(0, count); const [sort, setSort] = React.useState('eta'); const sorted = [...tows].sort((a, b) => sort === 'eta' ? a.eta - b.eta : sort === 'price' ? a.price - b.price : b.rating - a.rating); const SORTS = [['eta', 'Быстрее'], ['price', 'Дешевле'], ['rating', 'Рейтинг']]; return (
{count} {count === 1 ? 'предложение' : count < 5 ? 'предложения' : 'предложений'}
{SORTS.map(([id, label]) => { const on = sort === id; return ( ); })}
{sorted.map((tow) => ( onPick(tow, {})}/> ))}
Предложения обновляются в реальном времени
); } // ── MAP TAB ────────────────────────────────────────────────────────── function MapTab({ count, defaultRadius, accent, onPick }) { const all = window.TOWS.slice(0, count); const [radius, setRadius] = React.useState(defaultRadius); const [selId, setSelId] = React.useState(null); const inRadius = all.filter(t => t.dist <= radius); const selected = inRadius.find(t => t.id === selId); return (
{/* radius selector */}
Радиус поиска {inRadius.length} онлайн в радиусе
{ setRadius(r); setSelId(null); }} accent={accent}/>
{/* map */}
{/* selected floating card */} {selected ? (
setSelId(null)} onSend={() => onPick(selected, {})}/>
) : (
Нажмите на эвакуатор на карте, чтобы выбрать
)}
); } function FloatingTow({ tow, accent, onClose, onSend }) { return (
{tow.name} {tow.verified && }
{tow.eta} мин подача ·{tow.dist} км ≈ {window.fmtTg(tow.price)}
); } // ── DISPATCHER TAB ─────────────────────────────────────────────────── function DispatcherTab({ count, accent, onPick }) { const best = window.TOWS.slice(0, count).reduce((a, b) => (a.eta <= b.eta ? a : b)); const steps = [ { icon: 'check', label: 'Заявка принята диспетчером', done: true }, { icon: 'sliders', label: `Анализирует ${count} вариантов рядом`, active: true }, { icon: 'tag', label: 'Согласует стоимость и подачу' }, { icon: 'shield-check', label: 'Контролирует выполнение заказа' }, ]; return (
{/* dispatcher hero card */}
Диспетчер AIDAPP
Подбирает оптимальный эвакуатор за вас
{[['Среднее время', '~2 мин'], ['Сэкономлено', 'до 15%'], ['Контроль', '24/7']].map(([k, v]) => (
{v}
{k}
))}
{/* live status */}
Статус подбора
{steps.map((s, i) => (
{s.done ? : }
{s.label}
{s.active && ( {[0, 1, 2].map(d => )} )}
))}
Диспетчер согласует лучший вариант и подтвердит заказ
); } // ── CONFIRM SHEET (overlay) ────────────────────────────────────────── function ConfirmSheet({ tow, via, accent, onClose, onConfirm }) { if (!tow) return null; const dispatcher = via === 'dispatcher'; return (
e.stopPropagation()} style={{ background: '#fff', borderRadius: '22px 22px 0 0', padding: '8px 20px 22px', animation: 'tow-sheet .25s cubic-bezier(.3,.8,.4,1) both' }}>
{dispatcher ? 'Передать диспетчеру?' : 'Отправить запрос?'}
{dispatcher ? 'Диспетчер согласует и подтвердит заказ' : 'Эвакуатор увидит вашу заявку и подтвердит подачу'}
{/* tow summary */}
{tow.name} {tow.verified && }
{tow.eta} мин
≈ {window.fmtTg(tow.price)}
{/* number reveal note */}
Ваш номер откроется только этому эвакуатору после подтверждения. Остальные его не увидят.
); } window.ConfirmSheet = ConfirmSheet; // ── TRACKING ───────────────────────────────────────────────────────── function Tracking({ go, tow, via, stage, setStage }) { const accent = window.useAccent(); const cancelled = stage === 'cancelled'; const idx = window.STATUS_FLOW.indexOf(stage); const hasTow = !cancelled && idx >= window.STATUS_FLOW.indexOf('accepted'); const showCountdown = stage === 'assigned' || stage === 'arriving'; const [eta, setEta] = React.useState(tow ? tow.eta : 12); React.useEffect(() => { setEta(stage === 'arriving' ? 3 : (tow ? tow.eta : 12)); }, [stage]); React.useEffect(() => { if (!showCountdown) return; const i = setInterval(() => setEta(e => Math.max(1, e - 1)), 1800); return () => clearInterval(i); }, [showCountdown]); return (
№ A-2481 · {cancelled ? 'отменена' : 'активна'}} onBack={() => go('hero')} right={} />
{/* status hero */}
{window.STATUS_META[stage].hint}
{window.STATUS_META[stage].label}
{showCountdown && (
Подача через ~ {eta} мин
)} {via === 'dispatcher' && !cancelled && (
Подобрано диспетчером AIDAPP
)}
{/* assigned tow card */} {hasTow && tow && (
{tow.name} {tow.verified && }
{tow.driver} · {window.TOW_TYPES[tow.type].label}
≈ {window.fmtTg(tow.price)}
ориент. цена
{/* contact now unlocked */}
)} {/* timeline */}
Этапы заявки
{window.STATUS_FLOW.map((st, i) => { const done = !cancelled && i < idx; const active = !cancelled && i === idx; const last = i === window.STATUS_FLOW.length - 1; return (
{done && } {active && }
{!last &&
}
{window.STATUS_META[st].label}
{active &&
{window.STATUS_META[st].hint}
}
); })}
{/* actions */} {cancelled ? ( ) : stage === 'completed' ? ( ) : ( )}
); } window.Tracking = Tracking;