{drop && (
<>
setDrop(false)} style={{ position: "fixed", inset: 0, zIndex: 4 }}/>
{n > 0 && (
<>
)}
{allStatusKeys.map(s => {
const on = statusFilters.includes(s);
return (
);
})}
)}
{/* Kanban column picker */}
{view === "kanban" && (
{dropCols && (
<>
setDropCols(false)} style={{ position: "fixed", inset: 0, zIndex: 4 }}/>
{allStatusKeys.map(s => {
const on = kanbanCols.includes(s);
return (
);
})}
)}
)}
);
}
// ── Table column definitions (order = user preference) ────────────
const COLUMNS = [
{ key: 'id', label: '№', w: 64, render: (o) => `#${o.id}` },
{ key: 'client', label: 'Клієнт', w: 180, render: (o) => o.client },
{ key: 'phone', label: 'Телефон', w: 160, render: (o) => fmtPhone(o.phone) },
{ key: 'products', label: 'Товари', w: 220, render: (o) => o.products.join(' · ') || '—' },
{ key: 'address', label: 'Адреса', w: 200, render: (o) => o.address || '—' },
{ key: 'total', label: 'Сума', w: 110, render: (o) => fmtMoney(o.total) },
{ key: 'payment', label: 'Оплата', w: 110, render: (o) =>
},
{ key: 'supplier', label: 'Постачальник', w: 160, render: (o, sm) => { const s = sm[String(o.id)]; return s ? : null; } },
{ key: 'status', label: 'Статус', w: 190, render: (o) => },
{ key: 'created', label: 'Дата', w: 120, render: (o) => o.created },
];
const COL_KEYS = COLUMNS.map(c => c.key);
const COL_DEF_W = Object.fromEntries(COLUMNS.map(c => [c.key, c.w]));
function OrderTable({ orders, onSelect, selectedId, supplierMap = {} }) {
const [colOrder, setColOrder] = useState(() => {
try { const s = localStorage.getItem('crm_col_order'); return s ? JSON.parse(s) : COL_KEYS; } catch { return COL_KEYS; }
});
const [colWidths, setColWidths] = useState(() => {
try { const s = localStorage.getItem('crm_col_widths2'); return s ? JSON.parse(s) : COL_DEF_W; } catch { return COL_DEF_W; }
});
const [dragOver, setDragOver] = useState(null);
const dragKey = useRef(null);
const orderedCols = colOrder.map(k => COLUMNS.find(c => c.key === k)).filter(Boolean);
const minW = colOrder.reduce((s, k) => s + (colWidths[k] || COL_DEF_W[k] || 80), 0) + 48;
const cellSt = (col, extra = {}) => {
const isLast = orderedCols[orderedCols.length - 1]?.key === col.key;
return {
...(isLast ? { flex: 1, minWidth: colWidths[col.key] } : { width: colWidths[col.key], flexShrink: 0 }),
overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', ...extra,
};
};
const startResize = (e, key) => {
e.preventDefault(); e.stopPropagation();
const startX = e.clientX, startW = colWidths[key] || COL_DEF_W[key] || 80;
const onMove = ev => setColWidths(w => ({ ...w, [key]: Math.max(50, startW + ev.clientX - startX) }));
const onUp = () => {
document.removeEventListener('mousemove', onMove);
document.removeEventListener('mouseup', onUp);
setColWidths(w => { try { localStorage.setItem('crm_col_widths2', JSON.stringify(w)); } catch {} return w; });
};
document.addEventListener('mousemove', onMove);
document.addEventListener('mouseup', onUp);
};
const handleDrop = (toKey) => {
const fromKey = dragKey.current;
setDragOver(null); dragKey.current = null;
if (!fromKey || fromKey === toKey) return;
const next = [...colOrder];
next.splice(next.indexOf(fromKey), 1);
next.splice(next.indexOf(toKey), 0, fromKey);
setColOrder(next);
try { localStorage.setItem('crm_col_order', JSON.stringify(next)); } catch {}
};
return (
{/* Header */}
{orderedCols.map(col => (
{ dragKey.current = col.key; }}
onDragOver={e => { e.preventDefault(); setDragOver(col.key); }}
onDragLeave={() => setDragOver(d => d === col.key ? null : d)}
onDrop={() => handleDrop(col.key)}
onDragEnd={() => { setDragOver(null); dragKey.current = null; }}
style={{ ...cellSt(col), position: 'relative', height: 40, display: 'flex', alignItems: 'center', cursor: 'grab', userSelect: 'none',
borderLeft: dragOver === col.key ? '2px solid var(--accent)' : '2px solid transparent',
transition: 'border-color 80ms',
}}>
{col.label}
{/* Visible resize handle */}
startResize(e, col.key)}
onMouseEnter={e => e.currentTarget.firstChild.style.background = 'var(--accent)'}
onMouseLeave={e => e.currentTarget.firstChild.style.background = 'var(--border-strong)'}
style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: 10, cursor: 'col-resize', zIndex: 2, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
))}
{/* Rows */}
{orders.length === 0 ? (
Замовлень не знайдено
) : orders.map(o => (
onSelect(o)}
style={{ display: 'flex', padding: '12px 24px', borderBottom: '1px solid var(--border-subtle)', alignItems: 'center', cursor: 'pointer', background: selectedId === o.id ? 'var(--bg-active)' : 'transparent', transition: 'background 120ms' }}
onMouseEnter={e => { if (selectedId !== o.id) e.currentTarget.style.background = 'var(--bg-hover)'; }}
onMouseLeave={e => { if (selectedId !== o.id) e.currentTarget.style.background = 'transparent'; }}>
{orderedCols.map(col => (
{col.render(o, supplierMap)}
))}
))}
);
}
function OrderKanban({ orders, onSelect, visibleCols, supplierMap = {} }) {
const cols = (visibleCols || Object.keys(STATUSES));
return (
{cols.map(s => {
const items = orders.filter(o => o.status === s);
return (
{items.length}
{items.map(o => (
onSelect(o)} style={{
background: "var(--bg-panel)", border: "1px solid var(--border-subtle)", borderRadius: 10,
padding: 14, display: "flex", flexDirection: "column", gap: 8, cursor: "pointer",
transition: "border-color 120ms",
}}
onMouseEnter={e => e.currentTarget.style.borderColor = "var(--border-strong)"}
onMouseLeave={e => e.currentTarget.style.borderColor = "var(--border-subtle)"}>
{o.client}
{fmtPhone(o.phone)}
{o.products.slice(0,2).join(" · ")}{o.products.length > 2 ? ` +${o.products.length - 2}` : ""}
{o.address && (
{o.address}
)}
{(() => { const s = supplierMap[String(o.id)]; return s ?
: null; })()}
{o.created}
{fmtMoney(o.total)}
))}
{items.length === 0 && (
Порожньо
)}
);
})}
);
}
const DELIVERY_TYPES = [
{ id: 34, key: 'warehouse', label: 'Відділення Нової Пошти' },
{ id: 35, key: 'courier', label: "Кур'єр Нової Пошти" },
{ id: 36, key: 'postomat', label: 'Поштомат Нової Пошти' },
{ id: 8, key: 'pickup', label: 'Самовивіз' },
];
function deriveDeliveryKey(deliveryLabel) {
if (!deliveryLabel) return null;
const dl = deliveryLabel.toLowerCase();
if (dl.includes('поштомат')) return 'postomat';
if (dl.includes("кур'єр") || dl.includes('courier')) return 'courier';
if (dl.includes('відділення')) return 'warehouse';
if (dl.includes('самовив')) return 'pickup';
return null;
}
function DeliveryEditor({ order, onFieldChange, onDeliveryTypeSelect, onClose }) {
const [deliveryTypeKey, setDeliveryTypeKey] = useState(null);
const [cityQuery, setCityQuery] = useState('');
const [citySuggestions, setCitySuggestions] = useState([]);
const [selectedNPCity, setSelectedNPCity] = useState(null);
const [selectedHoroshopCity, setSelectedHoroshopCity] = useState(null);
const [warehouseQuery, setWarehouseQuery] = useState('');
const [warehouseSuggestions, setWarehouseSuggestions] = useState([]);
const [selectedWarehouse, setSelectedWarehouse] = useState(null);
const [streetQuery, setStreetQuery] = useState('');
const [streetSuggestions, setStreetSuggestions] = useState([]);
const [selectedStreet, setSelectedStreet] = useState(null);
const [building, setBuilding] = useState('');
const [flat, setFlat] = useState('');
const [saving, setSaving] = useState(false);
const [searchingCity, setSearchingCity] = useState(false);
const [searchingWarehouse, setSearchingWarehouse] = useState(false);
const [searchingStreet, setSearchingStreet] = useState(false);
const [loadingKyiv, setLoadingKyiv] = useState(false);
const timerRef = useRef(null);
const debounce = (fn, ms = 400) => {
clearTimeout(timerRef.current);
timerRef.current = setTimeout(fn, ms);
};
const handleCityQueryChange = (val) => {
setCityQuery(val);
setSelectedNPCity(null);
setSelectedHoroshopCity(null);
setCitySuggestions([]);
setWarehouseQuery(''); setWarehouseSuggestions([]); setSelectedWarehouse(null);
setStreetQuery(''); setStreetSuggestions([]); setSelectedStreet(null);
if (val.length < 2) return;
debounce(async () => {
setSearchingCity(true);
try {
const results = await API.searchNPCities(val);
setCitySuggestions(results);
} catch {}
setSearchingCity(false);
});
};
const handleSelectNPCity = async (city) => {
setSelectedNPCity(city);
setCityQuery(city.Present || city.MainDescription);
setCitySuggestions([]);
setWarehouseQuery(''); setWarehouseSuggestions([]); setSelectedWarehouse(null);
setStreetQuery(''); setStreetSuggestions([]); setSelectedStreet(null);
// знаходимо Horoshop-місто
try {
const realOrderId = order.id + 16; // PAYMENT_ID_OFFSET
const cities = await API.findHoroshopCities(city.MainDescription, realOrderId, order.userId);
if (cities && cities.length > 0) setSelectedHoroshopCity(cities[0]);
} catch {}
};
const handleWarehouseQueryChange = (val) => {
setWarehouseQuery(val);
setSelectedWarehouse(null);
setWarehouseSuggestions([]);
if (!selectedNPCity || val.length < 1) return;
debounce(async () => {
setSearchingWarehouse(true);
try {
const results = await API.searchNPWarehouses(selectedNPCity.MainDescription, val);
setWarehouseSuggestions(results);
} catch {}
setSearchingWarehouse(false);
});
};
const handleStreetQueryChange = (val) => {
setStreetQuery(val);
setSelectedStreet(null);
setStreetSuggestions([]);
if (!selectedNPCity || val.length < 1) return;
debounce(async () => {
setSearchingStreet(true);
try {
const results = await API.searchNPStreets(selectedNPCity.DeliveryCity, val);
setStreetSuggestions(results);
} catch {}
setSearchingStreet(false);
});
};
const handleDeliveryTypeClick = async (key) => {
const newKey = deliveryTypeKey === key ? null : key;
setDeliveryTypeKey(newKey);
onDeliveryTypeSelect?.(newKey);
setWarehouseQuery(''); setWarehouseSuggestions([]); setSelectedWarehouse(null);
setStreetQuery(''); setStreetSuggestions([]); setSelectedStreet(null);
if (newKey === 'pickup') {
setCityQuery('Київ');
setSelectedNPCity(null);
setSelectedHoroshopCity(null);
setLoadingKyiv(true);
try {
const realOrderId = order.id + 16;
const cities = await API.findHoroshopCities('Київ', realOrderId, order.userId);
if (cities && cities.length > 0) setSelectedHoroshopCity(cities[0]);
} catch {}
setLoadingKyiv(false);
}
};
const handleSave = async () => {
setSaving(true);
try {
// 1. Тип доставки
if (deliveryTypeKey) {
const dt = DELIVERY_TYPES.find(d => d.key === deliveryTypeKey);
if (dt) await API.setDeliveryType(order.id, dt.id, order.userId);
}
// 2. Атрибути
const fields = {};
if (selectedHoroshopCity) {
fields['Recipient[delivery_city_id]'] = selectedHoroshopCity.id;
fields['Recipient[delivery_city]'] = selectedHoroshopCity.label;
fields['Recipient[np_city_name]'] = selectedHoroshopCity.NPCityDescription || selectedHoroshopCity.label;
}
if ((deliveryTypeKey === 'warehouse' || deliveryTypeKey === 'postomat') && selectedWarehouse) {
fields['Delivery[delivery_method][@instance.parameters.destination.warehouse.id]'] = selectedWarehouse.Ref;
fields['Delivery[delivery_method][@instance.parameters.destination.warehouse.name]'] = selectedWarehouse.Description;
}
if (deliveryTypeKey === 'courier' && selectedStreet) {
fields['Delivery[delivery_method][@instance.parameters.destination.address.streetId]'] = selectedStreet.Ref;
fields['Delivery[delivery_method][@instance.parameters.destination.address.streetName]'] = `${selectedStreet.StreetsType} ${selectedStreet.Description}`;
fields['Delivery[delivery_method][@instance.parameters.destination.address.meta.streetUa]'] = selectedStreet.Description;
fields['Delivery[delivery_method][@instance.parameters.destination.address.meta.streetType]'] = selectedStreet.StreetsType;
if (building.trim()) fields['Delivery[delivery_method][@instance.parameters.destination.address.buildingNumber]'] = building.trim();
if (flat.trim()) fields['Delivery[delivery_method][@instance.parameters.destination.address.flat]'] = flat.trim();
}
if (Object.keys(fields).length > 0) {
await API.setAttributes(order.id, fields, order.userId);
}
// 3. Оновлюємо список
const newDeliveryLabel = deliveryTypeKey ? (DELIVERY_TYPES.find(d => d.key === deliveryTypeKey)?.label || order.delivery) : order.delivery;
let newAddressParts = [];
if (selectedHoroshopCity) newAddressParts.push(selectedHoroshopCity.label);
if ((deliveryTypeKey === 'warehouse' || deliveryTypeKey === 'postomat') && selectedWarehouse) newAddressParts.push(selectedWarehouse.Description);
if (deliveryTypeKey === 'courier' && selectedStreet) {
newAddressParts.push(`${selectedStreet.StreetsType} ${selectedStreet.Description}${building.trim() ? ', ' + building.trim() : ''}${flat.trim() ? '/' + flat.trim() : ''}`);
}
const newAddressText = newAddressParts.length > 0 ? newAddressParts.join(', ') : order.address;
onFieldChange(order.id, { address: newAddressText, delivery: newDeliveryLabel });
onClose();
} catch (e) {
alert('Помилка: ' + e.message);
}
setSaving(false);
};
const inputStyle = {
width: '100%', boxSizing: 'border-box', height: 36, padding: '0 10px',
background: 'var(--bg-raised)', color: 'var(--fg-primary)',
border: '1px solid var(--border-default)', borderRadius: 8,
fontSize: 13, fontFamily: 'inherit', outline: 'none',
};
const dropdownStyle = {
position: 'absolute', top: 'calc(100% + 2px)', left: 0, right: 0,
background: 'var(--bg-raised)', border: '1px solid var(--border-default)',
borderRadius: 8, boxShadow: 'var(--shadow-1)', zIndex: 5,
maxHeight: 200, overflowY: 'auto',
};
const dropItemStyle = {
display: 'block', width: '100%', textAlign: 'left', padding: '8px 10px',
border: 0, background: 'transparent', color: 'var(--fg-primary)',
fontSize: 12, cursor: 'pointer', fontFamily: 'inherit',
};
const needsWarehouse = deliveryTypeKey === 'warehouse' || deliveryTypeKey === 'postomat';
const needsStreet = deliveryTypeKey === 'courier';
const canSave = deliveryTypeKey || selectedHoroshopCity;
return (
{/* Тип доставки */}
Тип доставки
{DELIVERY_TYPES.map(dt => (
))}
{/* Місто */}
{deliveryTypeKey === 'pickup' ? (
Місто
{loadingKyiv ? Завантаження… : <>
Київ
{!selectedHoroshopCity && (не знайдено в Horoshop)}
}
) : (
Місто
handleCityQueryChange(e.target.value)}
placeholder="Введіть місто…"
style={{ ...inputStyle, borderColor: selectedNPCity ? 'var(--accent)' : 'var(--border-default)' }}
/>
{searchingCity &&
Пошук…
}
{citySuggestions.length > 0 && (
{citySuggestions.map((c, i) => (
))}
)}
{selectedNPCity && !selectedHoroshopCity && (
Місто в Horoshop не знайдено
)}
)}
{/* Відділення / Поштомат */}
{needsWarehouse && selectedNPCity && (
{deliveryTypeKey === 'postomat' ? 'Поштомат' : 'Відділення'}
handleWarehouseQueryChange(e.target.value)}
placeholder="Номер або адреса…"
style={{ ...inputStyle, borderColor: selectedWarehouse ? 'var(--accent)' : 'var(--border-default)' }}
/>
{searchingWarehouse &&
Пошук…
}
{warehouseSuggestions.length > 0 && (
{warehouseSuggestions.map((w, i) => (
))}
)}
)}
{/* Вулиця + будинок + квартира */}
{needsStreet && selectedNPCity && (
<>
Вулиця
handleStreetQueryChange(e.target.value)}
placeholder="Назва вулиці…"
style={{ ...inputStyle, borderColor: selectedStreet ? 'var(--accent)' : 'var(--border-default)' }}
/>
{searchingStreet &&
Пошук…
}
{streetSuggestions.length > 0 && (
{streetSuggestions.map((s, i) => (
))}
)}
)}
{/* Кнопки */}
Дзвінки ({calls.length})
{calls.map(c => {
const isPlaying = playingId === c.uniqueid;
return (
{c.employee_fio || '—'}
{fmtDur(c.billsec)}
{fmtCallDate(c.calldate)}
handleToggle(c)} progress={isPlaying ? progress : 0}/>
);
})}
);
}
function OrderDetail({ order, onClose, onStatusChange, onPaymentChange, onPhoneChange, onFieldChange, supplierMap = {} }) {
const [dropStatus, setDropStatus] = useState(false);
const [dropPayment, setDropPayment] = useState(false);
const [localStatus, setLocalStatus] = useState(order?.status);
const [localPayment, setLocalPayment] = useState(order?.payment);
const [pendingStatus, setPendingStatus] = useState(null);
const [pendingPayment, setPendingPayment] = useState(null);
const [saving, setSaving] = useState(false);
const [editPhone, setEditPhone] = useState(false);
const [phoneVal, setPhoneVal] = useState(order?.phone || "");
const [editName, setEditName] = useState(false);
const [nameVal, setNameVal] = useState(order?.client || "");
const [commentVal, setCommentVal] = useState(order?.managerComment || "");
const [savingField, setSavingField] = useState(null);
const [editDelivery, setEditDelivery] = useState(false);
const [localDeliveryKey, setLocalDeliveryKey] = useState(() => deriveDeliveryKey(order?.delivery));
useEffect(() => {
setLocalStatus(order?.status); setLocalPayment(order?.payment);
setPendingStatus(null); setPendingPayment(null);
setDropStatus(false); setDropPayment(false);
setEditPhone(false); setPhoneVal(order?.phone || "");
setEditName(false); setNameVal(order?.client || "");
setCommentVal(order?.managerComment || "");
setEditDelivery(false);
setLocalDeliveryKey(deriveDeliveryKey(order?.delivery));
}, [order?.id]);
useEffect(() => {
setLocalDeliveryKey(deriveDeliveryKey(order?.delivery));
}, [order?.delivery]);
const blockedPaymentIds =
localDeliveryKey === 'postomat' ? new Set([15]) :
localDeliveryKey === 'pickup' ? new Set([29, 32]) : new Set();
useEffect(() => {
if (pendingPayment && blockedPaymentIds.has(pendingPayment.id)) setPendingPayment(null);
}, [localDeliveryKey]);
if (!order) return null;
const locked = !!order.ttn?.number;
const hasPending = pendingStatus || pendingPayment;
const handleDone = async () => {
setSaving(true);
try {
if (pendingStatus) {
const newId = STATUSES[pendingStatus]?.horoshopId;
await API.setOrderStatus(order.id, newId);
setLocalStatus(pendingStatus);
onStatusChange(order.id, pendingStatus);
setPendingStatus(null);
}
if (pendingPayment) {
await API.setPaymentType(order.id, pendingPayment.id, order.userId);
const fresh = await API.getOrder(order.id).catch(() => null);
const mapped = fresh ? mapOrder(fresh.response.order) : null;
const newPayment = mapped?.payment || pendingPayment.label;
const newPaymentPrice = mapped?.paymentPrice ?? order.paymentPrice;
setLocalPayment(newPayment);
onPaymentChange(order.id, newPayment, newPaymentPrice);
setPendingPayment(null);
}
} catch (e) {
alert("Помилка: " + e.message);
setSaving(false);
return;
}
setSaving(false);
onClose();
};
const saveAttr = async (fields, onSuccess) => {
try {
await API.setAttributes(order.id, fields, order.userId);
onSuccess();
} catch (e) {
alert("Помилка: " + e.message);
throw e;
}
};
const handleSavePhone = async () => {
if (!phoneVal.trim() || phoneVal.trim() === order.phone) { setEditPhone(false); return; }
setSavingField('phone');
try {
await saveAttr({ 'Recipient[delivery_phone]': phoneVal.trim() }, () => {
onFieldChange(order.id, { phone: phoneVal.trim() });
setEditPhone(false);
});
} finally { setSavingField(null); }
};
const handleSaveName = async () => {
if (!nameVal.trim() || nameVal.trim() === order.client) { setEditName(false); return; }
setSavingField('name');
try {
await saveAttr({ 'Recipient[delivery_name]': nameVal.trim() }, () => {
onFieldChange(order.id, { client: nameVal.trim() });
setEditName(false);
});
} finally { setSavingField(null); }
};
const handleSaveComment = async () => {
if (commentVal === (order.managerComment || "")) return;
setSavingField('comment');
try {
await saveAttr({ 'Recipient[admin_comment]': commentVal }, () => {
onFieldChange(order.id, { managerComment: commentVal });
});
} finally { setSavingField(null); }
};
const Field = ({ label, value, mono }) => (
{label}
{value || "—"}
);
const dropBtn = (label, onClick, pending) => ({
display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%",
height: 40, padding: "0 14px", fontFamily: "inherit", fontSize: 13, cursor: "pointer",
background: pending ? "var(--accent-soft)" : "var(--bg-raised)",
color: pending ? "var(--accent)" : "var(--fg-primary)",
border: `1px solid ${pending ? "var(--accent)" : "var(--border-default)"}`,
borderRadius: 8,
});
return (
{/* Header */}
Замовлення №{order.id}
{(() => { const s = supplierMap[String(order.id)]; return s ?
Відповідь постачальника:
: null; })()}
{/* Scrollable body */}
{/* Status */}
Статус
{dropStatus && (
<>
setDropStatus(false)} style={{ position: "fixed", inset: 0, zIndex: 4 }}/>
{Object.keys(STATUSES).map(s => {
const active = (pendingStatus || localStatus) === s;
return (
);
})}
)}
{/* Client */}
Клієнт
{editName ? (
setNameVal(e.target.value)} autoFocus
onKeyDown={e => { if (e.key === "Enter") handleSaveName(); if (e.key === "Escape") setEditName(false); }}
style={{ flex: 1, height: 32, padding: "0 10px", background: "var(--bg-raised)", color: "var(--fg-primary)", border: "1px solid var(--accent)", borderRadius: 6, fontSize: 13, fontFamily: "inherit", outline: "none" }}/>
) : (
{order.client || "—"}
{!locked && }
)}
{/* Phone */}
Телефон
{editPhone ? (
setPhoneVal(e.target.value)} autoFocus
onKeyDown={e => { if (e.key === "Enter") handleSavePhone(); if (e.key === "Escape") setEditPhone(false); }}
style={{ flex: 1, height: 36, padding: "0 12px", background: "var(--bg-raised)", color: "var(--fg-primary)", border: "1px solid var(--accent)", borderRadius: 8, fontSize: 14, fontFamily: "var(--font-mono)", outline: "none" }}/>
) : (
{fmtPhone(order.phone)}
{!locked && (
)}
)}
{/* Address */}
Адреса доставки
{order.address || "—"}
{order.delivery}
{!locked && !editDelivery && (
)}
{!locked && editDelivery && (
setEditDelivery(false)}
/>
)}
{/* TTN */}
{order.ttn?.number && (
ТТН
{order.ttn.number}
{order.ttn.status &&
{order.ttn.status}
}
{order.ttn.deliveryDate &&
Очікувана доставка: {order.ttn.deliveryDate}
}
{order.ttn.updatedAt &&
Оновлено: {order.ttn.updatedAt}
}
)}
{/* Payment */}
Спосіб оплати
{locked ? (
{localPayment || "—"}
) : (
<>
{dropPayment && (
<>
setDropPayment(false)} style={{ position: "fixed", inset: 0, zIndex: 4 }}/>
{PAYMENT_TYPES.filter(pt => !blockedPaymentIds.has(pt.id)).map(pt => {
const active = (pendingPayment?.id === pt.id);
return (
);
})}
)}
)}
{order.paymentPrice > 0 && (
Комісія за оплату
{fmtMoney(order.paymentPrice)}
)}
{/* Products */}
Товари
{order.productsRaw.length ? order.productsRaw.map((p, i) => (
{p.title}
{p.article &&
Арт: {p.article}
}
{fmtMoney(p.total_price ?? p.price)}
{p.quantity} шт × {fmtMoney(p.price)}
)) : (
Товари не вказані
)}
{/* Total */}
Сума товарів
{fmtMoney(order.totalDefault)}
{order.paymentPrice > 0 && (
Комісія за оплату
+ {fmtMoney(order.paymentPrice)}
)}
До сплати
{fmtMoney(order.totalDefault + order.paymentPrice)}
{/* Comments */}
Коментарі
{order.comment && (
)}