// ============================================================================ // CLIENT CARD — картка клієнта CRM (Digitalshop) // Дизайн із handoff_client_card, підключений до реального /api/client/:phone. // Зміни проти оригіналу: реальна мапа статусів Хорошопа (CC_ORDER_STATUS), // кольори статусів заявок (CC_REQ_STATUS), збереження мітки/замітки на бекенд // (CcNoteBlock → API.setClientNote). Решта — як у дизайні. // // API: ClientCard({ phone, manager, isMobile, callType, onClose, onCreateLead, // onOpenOrder, onOpenRequest, showToast }) // ============================================================================ const { useState: ccUseState, useEffect: ccUseEffect, useRef: ccUseRef } = React; // ── format helpers ────────────────────────────────────────────────────────── const ccFmt = (n) => (Math.round(n || 0)).toLocaleString("uk-UA").replace(/ /g, " "); const ccPhone = (p) => "+" + (p || "").replace(/\D/g, "").replace(/^(\d{2})(\d{3})(\d{3})(\d{2})(\d{2}).*/, "$1 ($2) $3-$4-$5"); const ccSoft = (c, pct = 14) => `color-mix(in oklab, ${c} ${pct}%, transparent)`; const ccDur = (s) => { s = s || 0; const m = Math.floor(s / 60); return (m < 10 ? "0" : "") + m + ":" + (s % 60 < 10 ? "0" : "") + (s % 60); }; const ccInitials = (name) => (name || "").trim().split(/\s+/).slice(0, 2).map(w => w[0] || "").join("").toUpperCase() || "?"; const CC_GOLD = "#F5C451"; // VIP неон // ── статуси замовлень (РЕАЛЬНІ id Хорошопа) → підпис + колір з палітри теми ─── const CC_ORDER_STATUS = { 1: { label: "Новий", color: "var(--status-new)" }, 9: { label: "Очікуємо відповідь", color: "var(--status-preparing)" }, 2: { label: "В обробці", color: "var(--status-confirmed)" }, 16: { label: "Очікуємо Оплату", color: "var(--status-preparing)" }, 10: { label: "Готуємо до відправки",color: "var(--status-confirmed)" }, 7: { label: "Очікує поставку", color: "var(--status-preparing)" }, 13: { label: "Готова ТТН", color: "var(--status-shipped)" }, 6: { label: "Надіслане", color: "var(--status-shipped)" }, 3: { label: "В відділенні", color: "var(--status-shipped)" }, 14: { label: "Очікує переміщення", color: "var(--status-preparing)" }, 15: { label: "Очікує самовивіз", color: "var(--status-preparing)" }, 11: { label: "Клієнт думає", color: "var(--status-new)" }, 8: { label: "Виконано", color: "var(--status-completed)" }, 4: { label: "Скасовано", color: "var(--status-cancelled)" }, }; const ccStatus = (n) => CC_ORDER_STATUS[n] || CC_ORDER_STATUS[1]; // ── статуси заявок (рядкові, з LEAD_STATUSES) → колір дот-індикатора ────────── const CC_REQ_STATUS = { "Нова": "var(--accent)", "В роботі": "var(--warning)", "Конвертовано": "var(--success)", "Закрита": "var(--fg-muted)", }; const ccReqColor = (s) => CC_REQ_STATUS[s] || "var(--fg-muted)"; // ── теги-мітки клієнта ──────────────────────────────────────────────────────── const CC_TAGS = [ { key: "norm", emoji: "🟢", label: "Норм", color: "var(--success)" }, { key: "problem", emoji: "🔴", label: "Проблемний", color: "var(--danger)" }, { key: "messenger", emoji: "💬", label: "Месенджер", color: "var(--info)" }, ]; // ── месенджери (бренд-марки) ────────────────────────────────────────────────── const CC_MSG = { viber: { color: "#7360F2", path: "M11.4 0c-.7 0-2.7.1-4.1.6C5 1.4 4 2.7 3.5 4.4 3 6.1 3 7.8 3 9.6c0 1.7.1 3.5.5 5 .5 1.7 1.4 3 3.7 3.6.4.1.5.2.5.6v1.7c0 .4.3.5.6.3l2-1.6c.2-.2.4-.2.7-.2 1.5.1 3.2 0 4.7-.4 1.7-.5 2.7-1.6 3.2-3.3.4-1.5.5-3.2.5-5 0-1.7 0-3.5-.5-5-.5-1.7-1.6-3-3.4-3.5C13.9 0 12.4 0 11.4 0z" }, telegram: { color: "#229ED9", path: "M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.6 8.2-1.9 8.9c-.1.6-.5.8-1.1.5l-3-2.2-1.4 1.4c-.2.2-.3.3-.6.3l.2-3 5.6-5c.2-.2 0-.3-.3-.1l-6.9 4.3-3-.9c-.6-.2-.6-.6.1-.9l11.7-4.5c.5-.2 1 .1.6 1.2z" }, }; // ── keyframes (інжектяться один раз) ───────────────────────────────────────── const CC_KEYFRAMES = ` @keyframes ccRise { from { transform: translateY(10px) } to { transform: none } } @keyframes ccRing { 0% { transform: scale(.7); opacity: .55 } 70% { opacity: 0 } 100% { transform: scale(2.6); opacity: 0 } } @keyframes ccBlink { 0%,100% { opacity: 1 } 50% { opacity: .35 } } @keyframes ccShimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } } @keyframes ccSkel { 0%,100% { opacity: .45 } 50% { opacity: .9 } } @keyframes ccGlow { 0%,100% { box-shadow: 0 0 0 1px ${ccSoft(CC_GOLD,45)}, 0 0 22px ${ccSoft(CC_GOLD,22)} } 50% { box-shadow: 0 0 0 1px ${ccSoft(CC_GOLD,60)}, 0 0 34px ${ccSoft(CC_GOLD,34)} } } `; // інжектимо ОДРАЗУ при завантаженні скрипта — до першого рендеру, інакше // анімація въезду стартує без оголошених keyframes і застрягає на opacity:0. (function ccInjectKeyframes() { if (typeof document === "undefined" || document.getElementById("cc-keyframes")) return; const el = document.createElement("style"); el.id = "cc-keyframes"; el.textContent = CC_KEYFRAMES; document.head.appendChild(el); })(); function CcStyleInjector() { return null; } // ════════════════════════════════════════════════════════════════════════════ // PRIMITIVES // ════════════════════════════════════════════════════════════════════════════ // кнопка-іконка зі скляним фоном + hover-свічення function CcIconBtn({ icon, title, onClick, size = 36, glow = "var(--accent)", danger }) { const [h, setH] = ccUseState(false); const tint = danger ? "var(--danger)" : glow; return ( ); } // месенджер: сірий, бренд-колір + свічення на hover function CcMsgBtn({ brand, title, onClick }) { const m = CC_MSG[brand]; const [h, setH] = ccUseState(false); if (!m) return null; return ( ); } // секція з заголовком, лічильником і м'яким fade-up function CcSection({ title, count, action, delay = 0, children }) { return (
{title} {count != null && count > 0 && ( {count} )}
{action}
{children}
); } // рядок-карточка з hover-підйомом function CcRow({ children, onClick, accent }) { const [h, setH] = ccUseState(false); return (
setH(true)} onMouseLeave={() => setH(false)} style={{ cursor: onClick ? "pointer" : "default", borderRadius: 12, padding: "11px 13px", background: h ? "rgba(255,255,255,0.035)" : "rgba(255,255,255,0.018)", border: "1px solid " + (h ? ccSoft(accent || "var(--accent)", 38) : "var(--border-subtle)"), boxShadow: h && onClick ? "0 0 22px " + ccSoft(accent || "var(--accent)", 14) : "none", transform: h && onClick ? "translateY(-1px)" : "none", transition: "all 150ms cubic-bezier(.2,0,0,1)", }}>{children}
); } function CcStatusChip({ n, sm }) { const s = ccStatus(n); return ( {s.label} ); } // скелетон-плашка в стилі теми function CcSkel({ w = "100%", h = 14, r = 7, style }) { return
; } // ════════════════════════════════════════════════════════════════════════════ // HEADER // ════════════════════════════════════════════════════════════════════════════ function CcHeader({ data, manager, callType, onClose, showToast, isVip, isNew, isMobile }) { const name = data && data.name; const phoneStr = ccPhone(data ? data.phone : ""); const digits = (data && data.phone || "").replace(/\D/g, ""); const copy = () => { try { navigator.clipboard && navigator.clipboard.writeText("+" + digits); } catch (e) {} showToast && showToast("Номер скопійовано"); }; const openMsg = (brand) => { const url = brand === "viber" ? `viber://chat?number=${encodeURIComponent("+" + digits)}` : `https://t.me/+${digits}`; try { window.open(url, "_blank"); } catch (e) {} }; // аватар: VIP — золоте кільце+свічення; новий — пунктир+іконка; звичайний — акцент const avatarRing = isVip ? { background: `conic-gradient(from 140deg, ${CC_GOLD}, #FFE7A8, ${CC_GOLD}, #C99A2E, ${CC_GOLD})`, animation: "ccGlow 3.2s ease-in-out infinite" } : isNew ? { background: "transparent", border: "1.5px dashed var(--border-strong)" } : { background: `linear-gradient(135deg, var(--accent), #8B8DF7)`, boxShadow: "0 0 22px " + ccSoft("var(--accent)", 30) }; return (
{/* декоративне свічення згори */}
{/* верхній рядок: індикатор дзвінка + закрити */}
{callType === "out" ? "Вихідний дзвінок" : "Вхідний дзвінок"}
{/* клієнт */}
{/* аватар */}
{isNew ? : ccInitials(name)}

{isNew ? "🆕 Новий клієнт" : name}

{isVip && }
{phoneStr}
openMsg("viber")}/> openMsg("telegram")}/>
{/* з'єднано з */} {manager && (
З'єднано з: {manager}
)}
); } function CcVipBadge() { return ( VIP ); } // ════════════════════════════════════════════════════════════════════════════ // BADGES + SUMMARY // ════════════════════════════════════════════════════════════════════════════ function CcSummary({ data, isVip, delay }) { const c = data.counts || {}; const isRegular = (c.orders || 0) >= 3; const others = (data.names || []).filter(n => n && n !== data.name); const chips = []; if (isRegular && !isVip) chips.push({ icon: "repeat", label: "Постійний", color: "var(--accent)" }); if (data.lastManager) chips.push({ icon: "user-check", label: "Веде: " + data.lastManager, color: "var(--info)" }); const metrics = [ { label: "Замовлень", value: c.orders || 0 }, { label: "Заявок", value: c.requests || 0 }, { label: "LTV", value: ccFmt(data.ltv) + " ₴", accent: isVip ? CC_GOLD : null, big: true }, { label: "Дзвінків", value: c.calls || 0 }, ]; return (
{chips.length > 0 && (
{chips.map((ch, i) => ( {ch.label} ))}
)} {/* 4 метрики */}
{metrics.map((m, i) => (
{m.value}
{m.label}
))}
{others.length > 0 && (
Також замовляв як: {others.map((n, i) => ( {n}{i < others.length - 1 ? "," : ""} ))}
)}
); } // ════════════════════════════════════════════════════════════════════════════ // TAG + NOTE (з персистом на бекенд) // ════════════════════════════════════════════════════════════════════════════ function CcNoteBlock({ data, delay, showToast, phone }) { const [tag, setTag] = ccUseState((data.note && data.note.tag) || null); const [text, setText] = ccUseState((data.note && data.note.note) || ""); const [saved, setSaved] = ccUseState(false); const timer = ccUseRef(null); const persist = (noteText, tagVal) => { if (window.API && API.setClientNote) API.setClientNote(phone, { note: noteText, tag: tagVal || "" }).catch(() => {}); }; const flagSaved = () => { setSaved(true); clearTimeout(timer.current); timer.current = setTimeout(() => setSaved(false), 1600); }; const onText = (v) => { setText(v); clearTimeout(timer.current); timer.current = setTimeout(() => { persist(v, tag); setSaved(true); setTimeout(() => setSaved(false), 1600); }, 700); }; const pickTag = (k) => { const next = tag === k ? null : k; setTag(next); persist(text, next); flagSaved(); showToast && showToast("Мітку оновлено"); }; return (
Мітка та замітка
Збережено
{CC_TAGS.map(t => { const on = tag === t.key; return ( ); })}
{data.note && data.note.updatedBy && (
оновив {data.note.updatedBy}{data.note.updatedAt ? " · " + data.note.updatedAt : ""}
)}
); } function CcNoteField({ text, onText }) { const [foc, setFoc] = ccUseState(false); return (