// ============================================================================ // Вкладка «Пошта» — спільна скринька компанії info@digital-shop.com.ua. // Десктоп: 3 панелі (папки · список · читання). Мобільний: список → читання → // композер. Підключено до реального бекенду /api/mail/* (emailsDb + mailService). // // Перенесено з дизайн-прототипу (mail/HANDOFF.md). Глобальні примітиви Icon/Button // беремо з ui.jsx; решта (статуси листа, чипи, кольоровий аватар, модалки) — // локальні, з префіксом, щоб не конфліктувати з рештою CRM. // ============================================================================ const { useState, useEffect, useRef, useMemo, useCallback } = React; const MAILBOX = "info@digital-shop.com.ua"; // Статус листа (міні-хелпдеск). Ключі = значення в БД (emailsDb.status). const MAIL_STATUS = { needs_reply: { label: "Потрібна відповідь", color: "var(--warning)", soft: "rgba(245,158,11,.14)", icon: "reply" }, in_progress: { label: "В роботі", color: "var(--info)", soft: "rgba(59,130,246,.14)", icon: "loader" }, done: { label: "Оброблено", color: "var(--success)", soft: "rgba(16,185,129,.14)", icon: "check" }, }; const MAIL_FOLDERS = [ { key: "inbox", label: "Вхідні", icon: "inbox" }, { key: "sent", label: "Відправлені", icon: "send" }, { key: "drafts", label: "Чернетки", icon: "file-edit" }, { key: "archive", label: "Архів", icon: "archive" }, ]; // Авто-категорії (правила на бекенді: mailService.classify) const MAIL_CATEGORIES = [ { key: "client", label: "Клієнти", color: "#10B981", icon: "user" }, { key: "cooperation", label: "Співпраця", color: "#6366F1", icon: "handshake" }, { key: "system", label: "Системні", color: "#3B82F6", icon: "bell" }, { key: "spam", label: "Спам", color: "#F43F5E", icon: "ban" }, ]; const catMeta = (k) => MAIL_CATEGORIES.find(c => c.key === k) || null; const MAIL_MONTHS = ["січ.", "лют.", "бер.", "квіт.", "трав.", "черв.", "лип.", "серп.", "вер.", "жовт.", "лист.", "груд."]; function mmoney(n) { if (n == null || n === "") return "—"; return new Intl.NumberFormat("uk-UA").format(Number(n)).replace(/,/g, " ") + " ₴"; } // epoch ms → {label (Сьогодні/Вчора/12 черв.), time, dateFull} function fmtMailDate(ms) { const d = new Date(Number(ms) || Date.now()); const now = new Date(); const time = String(d.getHours()).padStart(2, "0") + ":" + String(d.getMinutes()).padStart(2, "0"); const yest = new Date(now); yest.setDate(now.getDate() - 1); let label; if (d.toDateString() === now.toDateString()) label = "Сьогодні"; else if (d.toDateString() === yest.toDateString()) label = "Вчора"; else label = d.getDate() + " " + MAIL_MONTHS[d.getMonth()]; const dateFull = d.getDate() + " " + MAIL_MONTHS[d.getMonth()] + " " + d.getFullYear() + ", " + time; return { label, time, dateFull }; } // Сирий рядок з /api/mail → плоский об'єкт для рендера function mapMailRow(r) { const dt = fmtMailDate(r.date); const outgoing = r.direction === "out"; return { id: r.id, folder: r.folder, outgoing, unread: !r.is_read, status: r.status || null, from: { name: r.from_name || r.from_addr || "—", email: r.from_addr || "" }, to: { name: r.to_addr || "", email: r.to_addr || "" }, subject: r.subject || "(без теми)", preview: r.preview || "", orderId: r.order_id || null, hasAttach: !!r.has_attach, category: r.category || null, assignedTo: r.assigned_to || "", date: r.date, dateLabel: dt.label, time: dt.time, dateFull: dt.dateFull, }; } // Horoshop numeric status → ключ STATUSES (для StatusChip) function orderStatusKey(status) { if (status == null) return "new"; return HOROSHOP_STATUS_MAP[Number(status)] || "new"; } // ── Шаблони відповідей (клієнтські; підставляють дані прив'язаного замовлення) ─ const MAIL_TEMPLATES = [ { key: "invoice", title: "Ваш рахунок", icon: "file-text", desc: "Лист із рахунком на оплату", subject: "Рахунок на оплату за замовленням {order}", body: "Доброго дня!\n\nНадсилаємо рахунок на оплату за замовленням {order} на суму {sum}.\nРахунок у вкладенні. Після оплати надішлемо ТТН.\n\nДякуємо за замовлення." }, { key: "requisites", title: "Реквізити", icon: "credit-card", desc: "Картка для оплати (з ваших карток)", subject: "Реквізити для оплати — Digitalshop", body: "" }, { key: "ttn", title: "Відправили ТТН", icon: "truck", desc: "Номер експрес-накладної", subject: "Ваше замовлення {order} відправлено", body: "Доброго дня!\n\nЗамовлення {order} передано в Нову пошту.\nЕкспрес-накладна: {ttn}\nВідстежити: novaposhta.ua/tracking\n\nОрієнтовна доставка — 1–2 дні." }, ]; function signatureHtml() { const lines = ["digital-shop.com.ua", MAILBOX]; return `
` + `
DIGITALSHOP
` + lines.map(l => `
${l}
`).join("") + `
`; } // Заповнення плейсхолдерів шаблону даними замовлення function fillTemplate(s, order) { const num = order ? `№${order.order_id}` : "№____"; const sum = order && order.total != null ? mmoney(order.total) : "____ ₴"; const ttn = order && order.ttn ? order.ttn : "____"; return String(s).replace(/{order}/g, num).replace(/{sum}/g, sum).replace(/{ttn}/g, ttn); } // ── API ─────────────────────────────────────────────────────────────────────── const MailAPI = { list: (params) => fetch("/api/mail?" + new URLSearchParams(params)).then(r => r.json()), counts: () => fetch("/api/mail/counts").then(r => r.json()), sync: () => fetch("/api/mail/sync", { method: "POST" }).then(r => r.json()), full: (id) => fetch("/api/mail/" + id).then(r => r.json()), suggestions: (id) => fetch(`/api/mail/${id}/suggestions`).then(r => r.json()), searchOrders: (q) => fetch("/api/mail/search-orders?q=" + encodeURIComponent(q)).then(r => r.json()), orderDocs: (orderId) => fetch("/api/mail/order-docs?orderId=" + orderId).then(r => r.json()), setStatus: (id, status) => fetch(`/api/mail/${id}/status`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ status }) }).then(r => r.json()), setRead: (id, read) => fetch(`/api/mail/${id}/read`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ read }) }).then(r => r.json()), link: (id, orderId) => fetch(`/api/mail/${id}/link`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ orderId }) }).then(r => r.json()), setLabels: (id, labels) => fetch(`/api/mail/${id}/labels`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ labels }) }).then(r => r.json()), assign: (id, manager) => fetch(`/api/mail/${id}/assign`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ manager }) }).then(r => r.json()), setCategory: (id, category) => fetch(`/api/mail/${id}/category`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ category }) }).then(r => r.json()), managers: () => fetch("/api/managers").then(r => r.json()), moveFolder: (id, folder) => fetch(`/api/mail/${id}/folder`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ folder }) }).then(r => r.json()), send: (body) => fetch("/api/mail/send", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) }).then(r => r.json()), }; // ── Дрібні примітиви ─────────────────────────────────────────────────────────── function MailAvatar({ name, size = 36 }) { const initials = (name || "?").replace(/[«»"]/g, "").split(" ").filter(Boolean).map(s => s[0]).slice(0, 2).join("").toUpperCase(); const palette = ["#6366F1", "#8B5CF6", "#3B82F6", "#10B981", "#F59E0B", "#F43F5E", "#0EA5E9"]; let hash = 0; for (const c of (name || "")) hash = (hash * 31 + c.charCodeAt(0)) >>> 0; const bg = palette[hash % palette.length]; return (
{initials}
); } function MailStatusChip({ status, size = "md" }) { const s = MAIL_STATUS[status]; if (!s) return null; const sm = size === "sm"; return ( {s.label} ); } function MailOrderBadge({ id, onClick, size = "md" }) { const [h, setH] = useState(false); const sm = size === "sm"; return ( { e.stopPropagation(); onClick(id); } : undefined} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{ display: "inline-flex", alignItems: "center", gap: 4, height: sm ? 18 : 20, padding: sm ? "0 6px" : "0 7px", borderRadius: 6, background: h ? "var(--accent-soft)" : "rgba(99,102,241,.10)", color: "var(--accent)", fontSize: sm ? 10.5 : 11.5, fontWeight: 600, fontFamily: "var(--font-mono)", cursor: onClick ? "pointer" : "default", border: "1px solid rgba(99,102,241,.22)", whiteSpace: "nowrap", }}> №{id} ); } function LabelDot({ color, size = 8 }) { return ; } function CategoryChip({ cat, size = "md" }) { const c = catMeta(cat); if (!c) return null; const sm = size === "sm"; return ( {c.label} ); } function AssigneeChip({ name, size = "md" }) { if (!name) return null; const sm = size === "sm"; return ( {name.split(" ")[0]} ); } // Випадайка вибору відповідального (десктоп). managers: [{name,...}] function AssignMenu({ value, managers, onChange }) { const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { const h = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h); }, []); return (
{open && (
{(managers || []).map(m => ( ))}
)}
); } // Мобільна шторка вибору відповідального function AssignSheet({ current, managers, onPick, onClose }) { return (
e.stopPropagation()} style={{ background: "var(--bg-raised)", borderRadius: "18px 18px 0 0", padding: "8px 12px 22px", maxHeight: "70%", overflowY: "auto", animation: "msheetUp 200ms var(--ease)" }} className="no-bar">
Відповідальний менеджер
{(managers || []).map(m => ( ))}
); } // Іконкова кнопка тулбарів function MIconBtn({ name, title, onClick, size = 18, danger, active, style }) { const [h, setH] = useState(false); return ( ); } // ── Модалка-оболонка ─────────────────────────────────────────────────────────── function ModalShell({ children, onClose, width = 520, align = "center" }) { return (
e.stopPropagation()} style={{ width, maxWidth: "100%", maxHeight: "calc(100vh - 48px)", background: "var(--bg-raised)", border: "1px solid var(--border-default)", borderRadius: 14, boxShadow: "var(--shadow-2)", display: "flex", flexDirection: "column", overflow: "hidden", animation: "popIn 160ms var(--ease)", }}>{children}
); } function OrderResultRow({ order, onPick, badge }) { const [h, setH] = useState(false); return ( ); } // ── Модалка прив'язки до замовлення ───────────────────────────────────────────── function LinkOrderModal({ suggestions, onClose, onPick }) { const [q, setQ] = useState(""); const [results, setResults] = useState([]); const [busy, setBusy] = useState(false); useEffect(() => { const s = q.trim(); if (!s) { setResults([]); return; } let dead = false; setBusy(true); const t = setTimeout(async () => { try { const r = await MailAPI.searchOrders(s); if (!dead) setResults(r.ok ? r.orders : []); } catch { if (!dead) setResults([]); } finally { if (!dead) setBusy(false); } }, 280); return () => { dead = true; clearTimeout(t); }; }, [q]); return (

Прив'язати до замовлення

{suggestions && suggestions.length > 0 && !q && (
Знайдені збіги
{suggestions.map(s => )}
)}
setQ(e.target.value)} placeholder="№ замовлення, ім'я, телефон, email…" style={{ width: "100%", height: 40, boxSizing: "border-box", padding: "0 12px 0 36px", background: "var(--bg-base)", color: "var(--fg-primary)", border: "1px solid var(--border-default)", borderRadius: 10, fontSize: 13, outline: "none", fontFamily: "inherit" }} />
{q && (
{busy &&
Пошук…
} {!busy && results.length > 0 && results.map(o => )} {!busy && results.length === 0 &&
За запитом «{q}» замовлень не знайдено
}
)} {!q && (!suggestions || !suggestions.length) && (
Почніть вводити, щоб знайти замовлення
)}
); } // ── Пікер документів (рахунки/видаткові з invoicesDb) ─────────────────────────── const DOC_KIND_LABEL = { invoice: "Рахунок", vydatkova: "Видаткова" }; function AttachDocPicker({ initialOrderId, initialOrder, onClose, onAttach }) { const [q, setQ] = useState(""); const [orders, setOrders] = useState(initialOrder ? [initialOrder] : []); const [docs, setDocs] = useState({}); // orderId → invoices[] const [openId, setOpenId] = useState(initialOrderId || null); const [busy, setBusy] = useState(false); const loadDocs = useCallback(async (orderId) => { if (docs[orderId]) return; try { const r = await MailAPI.orderDocs(orderId); setDocs(d => ({ ...d, [orderId]: r.ok ? r.invoices : [] })); } catch { setDocs(d => ({ ...d, [orderId]: [] })); } }, [docs]); useEffect(() => { if (initialOrderId) loadDocs(initialOrderId); }, []); useEffect(() => { const s = q.trim(); if (!s) { setOrders(initialOrder ? [initialOrder] : []); return; } let dead = false; setBusy(true); const t = setTimeout(async () => { try { const r = await MailAPI.searchOrders(s); if (!dead) setOrders(r.ok ? r.orders : []); } catch { if (!dead) setOrders([]); } finally { if (!dead) setBusy(false); } }, 280); return () => { dead = true; clearTimeout(t); }; }, [q]); const toggle = (id) => { const nx = openId === id ? null : id; setOpenId(nx); if (nx) loadDocs(nx); }; return (

Прикріпити документ

setQ(e.target.value)} placeholder="Пошук: № замовлення, ім'я, телефон…" style={{ width: "100%", height: 40, boxSizing: "border-box", padding: "0 12px 0 36px", background: "var(--bg-base)", color: "var(--fg-primary)", border: "1px solid var(--border-default)", borderRadius: 10, fontSize: 13, outline: "none", fontFamily: "inherit" }} />
{initialOrderId && !q &&
Документи цього замовлення
}
{busy &&
Пошук…
} {orders.map(o => { const id = o.order_id; const expanded = openId === id; const list = docs[id]; return (
{expanded && (
{list == null &&
Завантаження…
} {list && list.length === 0 &&
Немає документів
} {list && list.map(inv => (inv.files || []).filter(f => f.alive).map(f => ( )))} {list && list.length > 0 && list.every(inv => !(inv.files || []).some(f => f.alive)) && (
Файли рахунків відсутні або застаріли
)}
)}
); })} {!busy && orders.length === 0 &&
{q ? "Документів не знайдено" : "Почніть вводити № замовлення або ім'я"}
}
); } // ── Композер (десктоп-модалка + мобільний повний екран) ───────────────────────── function ComposerField({ label, value, onChange, placeholder, mono }) { return (
{label} onChange(e.target.value)} placeholder={placeholder} style={{ flex: 1, height: "100%", border: 0, background: "transparent", color: "var(--fg-primary)", fontSize: 13.5, outline: "none", fontFamily: mono ? "var(--font-mono)" : "inherit" }} />
); } function ToolbarBtn({ icon, title, onClick }) { const [h, setH] = useState(false); return ( ); } // Пікер активної картки для оплати (шаблон «Реквізити») function CardPicker({ onClose, onPick }) { const [cards, setCards] = useState(null); useEffect(() => { fetch("/api/cards/active").then(r => r.json()).then(r => setCards(r.cards || [])).catch(() => setCards([])); }, []); return (

Картка для оплати

{cards == null &&
Завантаження…
} {cards && cards.length === 0 &&
Немає активних карток. Додай у розділі «Картки».
} {cards && cards.map(c => ( ))}
); } function MailComposer({ initial, isMobile, onClose, onSent, showToast }) { const [to, setTo] = useState(initial.to || ""); const [subject, setSubject] = useState(initial.subject || ""); const [order, setOrder] = useState(initial.order || null); // {order_id,client,total,ttn} const [attachments, setAttachments] = useState(initial.attachments || []); // [{invoiceId,kind,name,sub}] const [showSig, setShowSig] = useState(true); const [showTemplates, setShowTemplates] = useState(!isMobile); const [tplSheet, setTplSheet] = useState(false); const [picker, setPicker] = useState(false); const [cardPicker, setCardPicker] = useState(false); const [linkOpen, setLinkOpen] = useState(false); const [sending, setSending] = useState(false); const bodyRef = useRef(null); useEffect(() => { if (bodyRef.current && initial.body != null && bodyRef.current.innerHTML === "") bodyRef.current.innerHTML = initial.body; }, []); const fmt = cmd => document.execCommand(cmd, false, null); // «Реквізити» → вставляємо реальну картку для оплати (з cardsDb) const insertRequisites = (card) => { const num = card.numberGrouped || card.number; const sum = order && order.total != null ? mmoney(order.total) : null; const lines = [ "Доброго дня!", "", `Реквізити для оплати${order ? ` за замовленням №${order.order_id}` : ""}:`, "", `Картка: ${num}`, card.bank ? `Банк: ${card.bank}` : "", card.holder ? `Отримувач: ${card.holder}` : "", sum ? `Сума до сплати: ${sum}` : "", "", "Після оплати надішліть, будь ласка, скрін квитанції у відповідь.", ].filter(l => l !== "" || true); setSubject(`Реквізити для оплати${order ? ` за замовленням №${order.order_id}` : ""}`); if (bodyRef.current) bodyRef.current.innerHTML = lines.map(l => l ? `
${l}
` : "

").join(""); setCardPicker(false); setTplSheet(false); }; const applyTemplate = (t) => { if (t.key === "requisites") { setCardPicker(true); setTplSheet(false); return; } // вибір картки setSubject(fillTemplate(t.subject, order)); if (bodyRef.current) bodyRef.current.innerHTML = fillTemplate(t.body, order).split("\n").map(l => l ? `
${l}
` : "

").join(""); if (t.key === "invoice" && order) { // авто-додати рахунок замовлення MailAPI.orderDocs(order.order_id).then(r => { if (!r.ok) return; for (const inv of r.invoices) { const f = (inv.files || []).find(x => x.alive && x.kind === "invoice"); if (f) { setAttachments(a => a.some(x => x.invoiceId === inv.id && x.kind === "invoice") ? a : [...a, { invoiceId: inv.id, kind: "invoice", name: `Рахунок №${inv.invoice_no}`, sub: mmoney(inv.total) }]); break; } } }).catch(() => {}); } setTplSheet(false); }; const doSend = async () => { if (!to.trim()) { showToast && showToast("Вкажіть отримувача", "error"); return; } setSending(true); try { let html = bodyRef.current ? bodyRef.current.innerHTML : ""; if (showSig) html += signatureHtml(); const text = bodyRef.current ? (bodyRef.current.innerText || "") : ""; const r = await MailAPI.send({ to: to.trim(), subject, text, html, orderId: order ? order.order_id : undefined, replyTo: initial.replyTo || undefined, attachInvoices: attachments.map(a => ({ invoiceId: a.invoiceId, kind: a.kind })), }); if (!r.ok) throw new Error(r.error || "Помилка відправки"); onSent && onSent(); } catch (e) { showToast && showToast("❌ " + e.message, "error"); } finally { setSending(false); } }; const orderChip = order ? ( №{order.order_id} · {(order.client || "").split(" ")[0]} ) : ( ); const attachStrip = attachments.length > 0 && (
{attachments.map((a, i) => (
{a.name}
{a.sub}
))}
); const editor = ( <>
fmt("bold")} /> fmt("italic")} /> fmt("underline")} />
fmt("insertUnorderedList")} /> fmt("insertOrderedList")} /> { const u = prompt("URL:"); if (u) document.execCommand("createLink", false, u); }} />
{showSig && (
DIGITALSHOP
digital-shop.com.ua
{MAILBOX}
)}
{attachStrip} ); const templatesPanel = (
Шаблони відповідей
{!order &&
Прив'яжіть замовлення — дані (№, сума, ТТН) підставляться автоматично.
} {MAIL_TEMPLATES.map(t => ( ))}
); const modals = ( <> {picker && setPicker(false)} onAttach={(d) => { setAttachments(a => a.some(x => x.invoiceId === d.invoiceId && x.kind === d.kind) ? a : [...a, d]); setPicker(false); }} />} {cardPicker && setCardPicker(false)} onPick={insertRequisites} />} {linkOpen && setLinkOpen(false)} onPick={(id, o) => { setOrder({ order_id: id, client: o.client, total: o.total, ttn: o.ttn }); setLinkOpen(false); }} />} {tplSheet && (
setTplSheet(false)} style={{ position: "absolute", inset: 0, zIndex: 90, background: "rgba(0,0,0,.5)", display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
e.stopPropagation()} style={{ background: "var(--bg-raised)", borderRadius: "18px 18px 0 0", padding: "8px 12px 22px", animation: "msheetUp 200ms var(--ease)" }}>
Шаблони відповідей
{!order &&
Прив'яжіть замовлення — дані підставляться автоматично.
} {MAIL_TEMPLATES.map(t => ( ))}
)} ); // ── Мобільний: повний екран ── if (isMobile) { return (
{initial.title || "Нове письмо"}
{orderChip}
{editor}
{modals}
); } // ── Десктоп: модалка ── return (
e.stopPropagation()} style={{ width: 940, maxWidth: "100%", height: "min(86vh, 760px)", background: "var(--bg-raised)", border: "1px solid var(--border-default)", borderRadius: "14px 14px 0 0", boxShadow: "var(--shadow-2)", display: "flex", flexDirection: "column", overflow: "hidden", animation: "sheetUp 200ms var(--ease)" }}>
{initial.title || "Нове письмо"} {orderChip}
{editor}
{showTemplates && templatesPanel}
{modals}
); } // ── Десктоп: ліва панель папок ────────────────────────────────────────────────── function FoldersPanel({ folder, category, onFolder, onCategory, onCompose, counts }) { const Item = ({ active, icon, iconColor, children, badge, onClick }) => { const [h, setH] = useState(false); return ( ); }; return (
{MAIL_FOLDERS.map(f => ( onFolder(f.key)}>{f.label} ))}
Категорії
{MAIL_CATEGORIES.map(c => ( onCategory(category === c.key ? null : c.key)}>{c.label} ))}
{MAILBOX}
); } function StatusFilter({ value, onChange }) { const opts = [{ key: "all", label: "Усі" }, { key: "needs_reply", label: "Потрібна відповідь" }, { key: "in_progress", label: "В роботі" }, { key: "done", label: "Оброблено" }]; return (
{opts.map(o => { const active = value === o.key; const c = o.key === "needs_reply" ? "var(--warning)" : o.key === "in_progress" ? "var(--info)" : o.key === "done" ? "var(--success)" : null; return ( ); })}
); } function MailRow({ mail, selected, onSelect, onOrder }) { const [h, setH] = useState(false); const who = mail.outgoing ? mail.to : mail.from; const hasChips = mail.status || mail.orderId || mail.hasAttach || mail.category || mail.assignedTo; return (
onSelect(mail.id)} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{ display: "flex", gap: 11, alignItems: "flex-start", padding: "12px 16px 13px", cursor: "pointer", position: "relative", borderBottom: "1px solid var(--border-subtle)", background: selected ? "var(--bg-active)" : (h ? "var(--bg-hover)" : (mail.unread ? "rgba(99,102,241,.045)" : "transparent")) }}> {selected && }
{mail.unread && }
{mail.outgoing && До: }{who.name} {mail.dateLabel} · {mail.time}
{mail.subject}
{mail.preview}
{hasChips ? (
{mail.category && } {mail.status && } {mail.orderId && } {mail.assignedTo && } {mail.hasAttach && }
) : null}
); } function SkeletonRow() { const bar = (w, h = 10) =>
; return (
{bar(120)}{bar(54)}
{bar(180, 11)}
{bar("80%", 9)}
); } function ListPlaceholder({ icon, title, sub, action }) { return (
{title}
{sub &&
{sub}
} {action &&
{action}
}
); } function MailListPanel({ list, folder, category, selected, onSelect, status, onStatus, query, onQuery, loading, error, onOrder, onReload }) { const folderObj = MAIL_FOLDERS.find(f => f.key === folder); const catObj = category ? catMeta(category) : null; const title = (folderObj ? folderObj.label : "Вхідні") + (catObj ? " · " + catObj.label : ""); let body; if (loading) body =
{Array.from({ length: 6 }).map((_, i) => )}
; else if (error) body = Повторити} />; else if (list.length === 0) body = query ? : ; else body =
{list.map(m => )}
; return (

{title}

{!loading && !error && list.length > 0 && {list.length}}
onQuery(e.target.value)} placeholder="Пошук за відправником, темою, текстом…" style={{ width: "100%", height: 34, boxSizing: "border-box", padding: "0 12px 0 34px", background: "var(--bg-panel)", color: "var(--fg-primary)", border: "1px solid var(--border-default)", borderRadius: 8, fontSize: 12.5, outline: "none", fontFamily: "inherit" }} /> {query && }
{body}
); } // ── Десктоп: читання ─────────────────────────────────────────────────────────── function StatusMenu({ status, onChange }) { const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { const h = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h); }, []); const cur = MAIL_STATUS[status]; return (
{open && (
{Object.entries(MAIL_STATUS).map(([k, s]) => ( ))}
)}
); } // Відкрити/скачати вкладення: звичайний НЕ несе Authorization (токен додає // лише пропатчений window.fetch у index.html) → тягнемо blob через fetch і відкриваємо його. async function mailOpenAttachment(att, asDownload) { try { const r = await fetch("/api/mail/attachment/" + att.id); if (!r.ok) { let j = {}; try { j = await r.json(); } catch {} throw new Error(j.error || ("HTTP " + r.status)); } const blob = await r.blob(); const u = URL.createObjectURL(blob); if (asDownload) { const a = document.createElement("a"); a.href = u; a.download = att.name || "file"; document.body.appendChild(a); a.click(); a.remove(); } else { window.open(u, "_blank"); } setTimeout(() => URL.revokeObjectURL(u), 60000); } catch (e) { window.alert("Не вдалося відкрити файл: " + e.message); } } function AttachChip({ att }) { const [h, setH] = useState(false); const kb = att.size ? Math.max(1, Math.round(att.size / 1024)) + " КБ" : ""; const btn = { width: 30, height: 30, borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", color: "var(--fg-secondary)", border: 0, background: "transparent", cursor: "pointer" }; return (
setH(true)} onMouseLeave={() => setH(false)} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 12px 8px 10px", background: "var(--bg-raised)", border: "1px solid " + (h ? "var(--border-strong)" : "var(--border-default)"), borderRadius: 10, minWidth: 220 }}>
{att.name}
{kb}
); } function LinkedOrderCard({ order, onOrder, onUnlink }) { const key = orderStatusKey(order.status); return (
Прив'язане замовлення
№{order.order_id} {mmoney(order.total)}
{order.client}
{order.phone &&
{order.phone}
} {order.ttn &&
ТТН: {order.ttn}
}
{order.created || ""}
); } function UnlinkedOrderCard({ suggestion, onOpenLink, onQuickLink }) { return (
Замовлення не прив'язане
{suggestion && ( )}
); } function ReaderEmpty() { return (
Оберіть лист
Виберіть лист зі списку, щоб прочитати його тут.
); } function MailBody({ email }) { if (email.body_html) return
; const paras = String(email.body_text || "").split(/\n{2,}/).filter(Boolean); return
{paras.length ? paras.map((p, i) =>

{p}

) : (порожній лист)}
; } function MailReader({ data, loading, managers, onAssign, onReply, onForward, onArchive, onStatus, onOrder, onOpenLink, onQuickLink, onUnlink }) { if (loading) return
; if (!data) return ; const { email, attachments, order, suggestion } = data; const m = mapMailRow(email); const who = m.outgoing ? { name: email.to_addr || "", email: email.to_addr || "" } : m.from; return (
onAssign(email.id, m2)} /> onStatus(email.id, s)} />
onArchive(email.id)} />

{m.subject}

{m.status && }
{who.name || who.email} <{who.email}>
{m.outgoing ? `Від ${MAILBOX}` : `Кому: ${MAILBOX}`} · {m.dateFull}
{attachments && attachments.length > 0 && (
Вкладення · {attachments.length}
{attachments.map(a => )}
)}
{order ? onUnlink(email.id)} /> : onOpenLink(email)} onQuickLink={(id, o) => onQuickLink(email.id, id, o)} />}
); } // ── Мобільні підкомпоненти ────────────────────────────────────────────────────── function groupByDate(emails) { const out = []; const idx = {}; emails.forEach(m => { if (!(m.dateLabel in idx)) { idx[m.dateLabel] = out.length; out.push({ label: m.dateLabel, items: [] }); } out[idx[m.dateLabel]].items.push(m); }); return out; } function MRow({ mail, onOpen, last }) { const who = mail.outgoing ? mail.to : mail.from; const hasChips = mail.status || mail.orderId || mail.hasAttach || mail.category || mail.assignedTo; return ( ); } function MSkeleton({ last }) { const bar = (w, h = 11) =>
; return
{bar(120)}{bar(38)}
{bar(190, 11)}
{bar("80%", 10)}
; } function MPlaceholder({ icon, title, sub, action }) { return
{title}
{sub &&
{sub}
} {action &&
{action}
}
; } function FolderSheet({ folder, category, onPick, onClose, counts }) { return (
e.stopPropagation()} style={{ background: "var(--bg-raised)", borderRadius: "18px 18px 0 0", padding: "8px 12px 20px", animation: "msheetUp 200ms var(--ease)" }}>
{MAIL_FOLDERS.map(f => ( ))}
Категорії
{MAIL_CATEGORIES.map(c => ( ))}
); } function StatusSheet({ current, onPick, onClose }) { return
e.stopPropagation()} style={{ background: "var(--bg-raised)", borderRadius: "18px 18px 0 0", padding: "8px 12px 22px", animation: "msheetUp 200ms var(--ease)" }}>
Статус листа
{Object.entries(MAIL_STATUS).map(([k, s]) => )}
; } function MListScreen({ list, folder, category, status, onStatus, query, onQuery, loading, error, onOpen, onCompose, onFolderSheet, onReload, onExit, counts }) { const folderObj = MAIL_FOLDERS.find(f => f.key === folder); const catObj = category ? catMeta(category) : null; const title = catObj ? catObj.label : (folderObj ? folderObj.label : "Вхідні"); const chips = [{ k: "all", t: "Усі" }, { k: "needs_reply", t: "Відповідь" }, { k: "in_progress", t: "В роботі" }, { k: "done", t: "Оброблено" }]; const card = (children) =>
{children}
; let body; if (loading) body =
{card(Array.from({ length: 6 }).map((_, i) => ))}
; else if (error) body = Повторити} />; else if (list.length === 0) body = query ? : ; else body =
{groupByDate(list).map(g => (
{g.label}
{card(g.items.map((m, i) => ))}
))}
; return (
{onExit && } {counts.unread > 0 && {counts.unread} нових}
onQuery(e.target.value)} placeholder="Пошук пошти…" style={{ width: "100%", height: 44, boxSizing: "border-box", padding: "0 14px 0 40px", background: "var(--bg-panel)", color: "var(--fg-primary)", border: "1px solid var(--border-subtle)", borderRadius: 14, fontSize: 14.5, outline: "none", fontFamily: "inherit" }} />
{chips.map(c => { const active = status === c.k; const col = c.k === "needs_reply" ? "var(--warning)" : c.k === "in_progress" ? "var(--info)" : c.k === "done" ? "var(--success)" : null; return ; })}
{body}
); } function MReadScreen({ data, loading, onBack, onReply, onStatusSheet, onAssignSheet, onLink, onArchive, onUnlink, onQuickLink }) { if (loading || !data) return
; const { email, attachments, order, suggestion } = data; const m = mapMailRow(email); const who = m.outgoing ? { name: email.to_addr || "", email: email.to_addr || "" } : m.from; return (
{MAIL_FOLDERS.find(f => f.key === email.folder)?.label || "Вхідні"}

{m.subject}

{(m.status || m.category || m.assignedTo) && (
{m.category && } {m.status && } {m.assignedTo && }
)}
{who.name || who.email}
{who.email}
{m.dateFull}
{order ? (
Замовлення
№{order.order_id}{mmoney(order.total)}
{order.client}
) : (
Не прив'язане
{suggestion && }
)} {attachments && attachments.length > 0 && (
Вкладення
{attachments.map(a => { const kb = a.size ? Math.max(1, Math.round(a.size / 1024)) + " КБ" : ""; return ; })}
)}
); } // ── Головний компонент ────────────────────────────────────────────────────────── function Mail({ isMobile, showToast, onExit }) { const [folder, setFolder] = useState("inbox"); const [category, setCategory] = useState(null); const [status, setStatus] = useState("all"); const [query, setQuery] = useState(""); const [debQuery, setDebQuery] = useState(""); const [list, setList] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [counts, setCounts] = useState({ unread: 0, needsReply: 0 }); const [managers, setManagers] = useState([]); const [selectedId, setSelectedId] = useState(null); const [reader, setReader] = useState(null); // {email, attachments, order, suggestion} const [readerLoading, setReaderLoading] = useState(false); const [screen, setScreen] = useState("list"); // mobile: list | read const [composer, setComposer] = useState(null); const [linkFor, setLinkFor] = useState(null); // {emailId, suggestions} const [folderSheet, setFolderSheet] = useState(false); const [statusSheetFor, setStatusSheetFor] = useState(null); const [assignSheetFor, setAssignSheetFor] = useState(null); const toast = (m, t) => showToast ? showToast(m, t) : null; // Список менеджерів для призначення (один раз) useEffect(() => { MailAPI.managers().then(r => { if (r && r.ok) setManagers(r.managers || []); }).catch(() => {}); }, []); // debounce пошуку useEffect(() => { const t = setTimeout(() => setDebQuery(query), 320); return () => clearTimeout(t); }, [query]); const load = useCallback(async () => { setLoading(true); setError(null); try { const params = { folder }; if (category) params.category = category; if (status !== "all") params.status = status; if (debQuery.trim()) params.search = debQuery.trim(); const r = await MailAPI.list(params); if (!r.ok) throw new Error(r.error || "Помилка завантаження"); setList((r.emails || []).map(mapMailRow)); if (r.counts) setCounts(r.counts); if (window._setMailUnread) window._setMailUnread(r.counts ? r.counts.unread : 0); } catch (e) { setError(e.message); setList([]); } finally { setLoading(false); } }, [folder, category, status, debQuery]); useEffect(() => { load(); }, [load]); // Кнопка «Оновити» — примусовий збір з IMAP, далі перечитати список const syncNow = useCallback(async () => { setLoading(true); try { const r = await MailAPI.sync(); if (r && r.ok && r.ingested) toast(`Завантажено листів: ${r.ingested}`); } catch (e) { toast("❌ " + e.message, "error"); } await load(); }, [load]); // Живе оновлення списку при новому/відправленому листі (WS-подія з App.jsx) useEffect(() => { window._mailOnPush = () => load(); return () => { delete window._mailOnPush; }; }, [load]); // Відкриття композера ззовні (кнопка «Пошта» в картці замовлення). // Якщо вкладку щойно змонтували — підхоплюємо «відкладений» prefill. useEffect(() => { window._mailCompose = (p) => { window._mailPendingCompose = null; if (isMobile) setScreen("list"); // attachments — попередньо прикріплені документи (кнопка «На email» з картки РАХУНКУ): // [{invoiceId, kind, name, sub}] — той самий формат, що дає AttachDocPicker setComposer({ title: "Нове письмо", to: (p && p.to) || "", subject: (p && p.subject) || "", order: (p && p.order) || null, body: (p && p.body) || "", attachments: (p && p.attachments) || [] }); }; if (window._mailPendingCompose) window._mailCompose(window._mailPendingCompose); return () => { delete window._mailCompose; }; }, [isMobile]); const openMail = async (id) => { setSelectedId(id); if (isMobile) setScreen("read"); setReader(null); setReaderLoading(true); setList(l => l.map(m => m.id === id ? { ...m, unread: false } : m)); try { const r = await MailAPI.full(id); if (!r.ok) throw new Error(r.error || "Не вдалося відкрити лист"); let suggestion = null; if (!r.order) { try { const sg = await MailAPI.suggestions(id); if (sg.ok && sg.suggestions[0]) suggestion = sg.suggestions[0]; } catch {} } setReader({ email: r.email, attachments: r.attachments || [], order: r.order || null, suggestion }); MailAPI.counts().then(c => { if (c.ok) { setCounts(c); if (window._setMailUnread) window._setMailUnread(c.unread); } }).catch(() => {}); } catch (e) { toast("❌ " + e.message, "error"); setReader(null); } finally { setReaderLoading(false); } }; const changeStatus = async (id, st) => { try { await MailAPI.setStatus(id, st); setReader(r => r && r.email.id === id ? { ...r, email: { ...r.email, status: st } } : r); setList(l => l.map(m => m.id === id ? { ...m, status: st } : m)); toast(`Статус → «${MAIL_STATUS[st].label}»`); setStatusSheetFor(null); } catch (e) { toast("❌ " + e.message, "error"); } }; const archive = async (id) => { try { await MailAPI.moveFolder(id, "archive"); setList(l => l.filter(m => m.id !== id)); setSelectedId(null); setReader(null); if (isMobile) setScreen("list"); toast("Лист переміщено в архів"); } catch (e) { toast("❌ " + e.message, "error"); } }; const linkOrder = async (emailId, orderId, orderObj) => { try { await MailAPI.link(emailId, orderId); const order = orderObj ? { order_id: orderId, client: orderObj.client, total: orderObj.total, status: orderObj.status, created: orderObj.created, phone: orderObj.phone, ttn: orderObj.ttn } : { order_id: orderId }; setReader(r => r && r.email.id === emailId ? { ...r, order, suggestion: null, email: { ...r.email, order_id: orderId } } : r); setList(l => l.map(m => m.id === emailId ? { ...m, orderId } : m)); setLinkFor(null); toast(`Прив'язано до замовлення №${orderId}`); } catch (e) { toast("❌ " + e.message, "error"); } }; const unlink = async (emailId) => { try { await MailAPI.link(emailId, null); setReader(r => r && r.email.id === emailId ? { ...r, order: null, email: { ...r.email, order_id: null } } : r); setList(l => l.map(m => m.id === emailId ? { ...m, orderId: null } : m)); toast("Замовлення відв'язано"); } catch (e) { toast("❌ " + e.message, "error"); } }; const doAssign = async (emailId, manager) => { try { await MailAPI.assign(emailId, manager); setReader(r => r && r.email.id === emailId ? { ...r, email: { ...r.email, assigned_to: manager } } : r); setList(l => l.map(m => m.id === emailId ? { ...m, assignedTo: manager } : m)); setAssignSheetFor(null); toast(manager ? `Призначено: ${manager}` : "Відповідального знято"); } catch (e) { toast("❌ " + e.message, "error"); } }; const openLink = (email) => setLinkFor({ emailId: email.id, suggestions: reader && reader.suggestion ? [reader.suggestion] : [] }); const reply = (email, order) => { const who = email.direction === "out" ? { email: email.to_addr } : { name: email.from_name, email: email.from_addr }; setComposer({ title: "Відповідь", to: who.email || "", subject: "Re: " + String(email.subject || "").replace(/^Re:\s*/i, ""), replyTo: email.id, order: order || null, body: "" }); }; const forward = (email, order) => { const orig = email.body_html || String(email.body_text || "").split("\n").map(l => `
${l || "
"}
`).join(""); setComposer({ title: "Переслати", to: "", subject: "Fwd: " + String(email.subject || ""), order: order || null, body: `

— Початкове повідомлення —
${orig}` }); }; const compose = () => setComposer({ title: "Нове письмо", to: "", subject: "", body: "" }); const onSent = () => { setComposer(null); toast("Лист відправлено"); load(); if (reader) openMail(reader.email.id); }; const openOrder = (id) => { if (window._crmNavigate) { window._crmNavigate("orders"); if (window._ordersOpenById) window._ordersOpenById(id); } }; // ── Мобільний ── if (isMobile) { return (
{screen === "list" ? setFolderSheet(true)} onReload={syncNow} onExit={onExit} /> : setScreen("list")} onReply={reply} onArchive={archive} onStatusSheet={(email) => setStatusSheetFor(email)} onAssignSheet={(email) => setAssignSheetFor(email)} onLink={openLink} onUnlink={unlink} onQuickLink={linkOrder} />} {folderSheet && setFolderSheet(false)} onPick={(f, c) => { setFolder(f); setCategory(c); setFolderSheet(false); }} />} {statusSheetFor && setStatusSheetFor(null)} onPick={(st) => changeStatus(statusSheetFor.id, st)} />} {assignSheetFor && setAssignSheetFor(null)} onPick={(mgr) => doAssign(assignSheetFor.id, mgr)} />} {linkFor && setLinkFor(null)} onPick={(id, o) => linkOrder(linkFor.emailId, id, o)} />} {composer && setComposer(null)} onSent={onSent} showToast={showToast} />}
); } // ── Десктоп: 3 панелі ── return (
{ setFolder(f); setSelectedId(null); setReader(null); }} onCategory={setCategory} /> {composer && setComposer(null)} onSent={onSent} showToast={showToast} />} {linkFor && setLinkFor(null)} onPick={(id, o) => linkOrder(linkFor.emailId, id, o)} />}
); } window.Mail = Mail;