// Reseller portal — Orders. Strictly READ-ONLY (Orders are raised and
// progressed by Solo staff — see routes/admin-orders.ts; the reseller
// equivalent, routes/portal-orders.ts, has no status-mutation route at
// all). Force-scoped server-side to the signed-in reseller's own
// company — no company filter is ever shown here (there's only ever
// one company to see).
//
// Modeled on admin-orders-page.jsx's OrderRow/OrderDetail, minus the
// Xero sync badge (Solo-internal signal) and the build-status change
// buttons (staff-only action) — a reseller sees the current status as
// plain text and the full read-only order detail underneath.
const RESELLER_ORDER_STATUS_LABELS = { ordered: "Ordered", in_build: "In Build", ready_to_ship: "Ready to Ship", shipped: "Shipped", cancelled: "Cancelled" };
const RESELLER_ORDER_STATUS_COLORS = {
ordered: "var(--pt-fg-dim)",
in_build: "var(--pt-status-po-requested)",
ready_to_ship: "var(--pt-link)",
shipped: "var(--pt-status-accepted)",
cancelled: "var(--pt-status-rejected)",
};
function ResellerOrdersPage({ onNavigate }) {
const [state, setState] = useState({ status: "loading", user: null, company: null, isSoloStaff: false });
const [companies, setCompanies] = useState([]);
const [orders, setOrders] = useState({ status: "loading", items: [] });
const [statusFilter, setStatusFilter] = useState("");
const [openId, setOpenId] = useState(null);
const loadOrders = (status) => {
setOrders((o) => ({ ...o, status: "loading" }));
const params = new URLSearchParams();
if (status) params.set("status", status);
fetch(`/api/portal/orders?${params.toString()}`, { credentials: "same-origin" })
.then((r) => (r.ok ? r.json() : { orders: [] }))
.then((data) => setOrders({ status: "ready", items: data.orders || [] }))
.catch(() => setOrders({ status: "ready", items: [] }));
};
const loadMe = (onDone) => {
fetch("/api/portal/me", { credentials: "same-origin" })
.then(async (r) => {
if (!r.ok) throw new Error("not signed in");
return r.json();
})
.then((data) => {
setState({ status: "ready", user: data.user, company: data.company, isSoloStaff: !!data.isSoloStaff });
if (data.isSoloStaff) {
fetch("/api/portal/companies", { credentials: "same-origin" })
.then((r) => (r.ok ? r.json() : { companies: [] }))
.then((d) => setCompanies(d.companies || []))
.catch(() => setCompanies([]));
}
if (onDone) onDone();
})
.catch(() => onNavigate("reseller-login"));
};
const handleSwitchCompany = (companyId) => {
fetch("/api/portal/switch-company", {
method: "POST", credentials: "same-origin",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ companyId }),
})
.then((r) => (r.ok ? r.json() : Promise.reject()))
.then(() => loadMe(() => loadOrders(statusFilter)))
.catch(() => { /* switch failed silently */ });
};
useEffect(() => { loadMe(); }, []); // eslint-disable-line react-hooks/exhaustive-deps -- mount-only
useEffect(() => { loadOrders(statusFilter); }, [statusFilter]); // eslint-disable-line react-hooks/exhaustive-deps
if (state.status === "loading") {
return ;
}
const { user, company, isSoloStaff } = state;
return (
Every order raised against your company, tracked from placement through to shipping.
Orders {orders.status === "ready" && `(${orders.items.length})`}
{orders.status === "loading" ? (
Loading\u2026
) : orders.items.length === 0 ? (
No orders yet — once one of your quotes is accepted, it'll appear here.
) : (
{orders.items.map((o) => (
setOpenId(openId === o.id ? null : o.id)}
/>
))}
)}
);
}
function ResellerOrderRow({ order, open, onToggle }) {
return (
{open &&
}
);
}
function ResellerOrderDetail({ orderId }) {
const [data, setData] = useState(null);
const [error, setError] = useState("");
useEffect(() => {
fetch(`/api/portal/orders/${orderId}`, { credentials: "same-origin" })
.then((r) => (r.ok ? r.json() : Promise.reject()))
.then((d) => setData(d))
.catch(() => setError("Couldn't load this order."));
}, [orderId]);
if (!data) {
return (
{error || "Loading\u2026"}
);
}
const { order, items, history, total } = data;
const subtotal = items.reduce((sum, it) => sum + it.unit_price * it.quantity * (1 - (it.discount_percent || 0) / 100), 0);
return (
Line items ({items.length})
{items.map((it) => (
{it.product_name} \u00d7 {it.quantity} @ {portalMoney(it.unit_price, order.currency)}
{it.discount_percent ? ` (-${it.discount_percent}%)` : ""}
{portalMoney(it.unit_price * it.quantity * (1 - (it.discount_percent || 0) / 100), order.currency)}
))}
{(order.discount_percent > 0 || order.notes || order.purchase_order_number) && (
{order.discount_percent > 0 && }
{order.purchase_order_number && }
{order.notes && }
)}
Subtotal {portalMoney(subtotal, order.currency)} \u2192 Total {portalMoney(total, order.currency)}
Status history
{history.map((h, i) => (
{String(h.changed_at).slice(0, 10)} \u2014 {RESELLER_ORDER_STATUS_LABELS[h.status] || h.status}
{h.notes && <> \u2014 {h.notes}}
))}
);
}
function MiniDetail({ label, value }) {
return (
);
}
Object.assign(window, { ResellerOrdersPage });