/* ============ MAKI — Drawer de detalle de pedido ============ */
function StateStepper({ order, onSet }) {
const states = MAKI.STATES;
const idx = states.findIndex(s => s.id === order.state);
return (
{states.map((s, i) => {
const done = i < idx, current = i === idx;
const c = done || current ? cv(s.color) : cv("--line-2");
return (
{i < states.length - 1 && }
);
})}
);
}
function OrderDrawer({ order, onClose, onSet, onAdvance }) {
const [tab, setTab] = useState("detalle");
const [reply, setReply] = useState("");
if (!order) return null;
const client = MAKI.CLIENTS.find(c => c.name === order.client);
const idx = MAKI.STATES.findIndex(s => s.id === order.state);
const next = MAKI.STATES[idx + 1];
return (
{/* Header */}
{order.client}
·
{order.clientType === "empresa" ? "Empresarial" : "Particular"}
{/* Stepper */}
{/* Tabs */}
{[["detalle", "Detalle"], ["hilo", `Conversación${order.thread.length ? " · " + order.thread.length : ""}`]].map(([id, lbl]) => (
))}
{/* Body */}
{tab === "detalle" ? (
{/* Entrega */}
|
{order.mode === "Envío"
? |
: |
}
|
{/* Items */}
s + i.qty, 0)} ítems`}>
{order.items.map((it, i) => (
{it.qty}×
{it.name}
{MAKI.money(it.price * it.qty)}
))}
Total
{MAKI.money(order.total)}
) : (
)}
{/* Footer acción */}
{next ? (
onAdvance(order)}>
Pasar a "{next.label}"
) : (
Pedido completado
)}
);
}
function Section({ title, children }) {
return (
);
}
function Row({ icon, label, value }) {
return (
{label}
{value}
);
}
function Thread({ order, reply, setReply }) {
const ch = MAKI.CHANNELS[order.channel];
return (
Conversación unificada · {ch.label}
{order.thread.length === 0 && (
Pedido cargado por {ch.label}.
No hay mensajes todavía.
)}
{order.thread.map((m, i) => {
const mine = m.from === "agent";
return (
);
})}
setReply(e.target.value)} placeholder={`Responder por ${ch.label}…`}
style={{ flex: 1, border: "none", outline: "none", fontSize: 13.5, padding: "6px 8px", background: "transparent", fontFamily: "inherit" }} />
);
}
Object.assign(window, { OrderDrawer, StateStepper });