// Reseller portal — Quotes. This is the ONLY place a Quote is ever // created (see routes/portal.ts's POST /quotes) — the admin Quotes page // (admin-quotes-page.jsx) is strictly read-only-plus-actions (Accept / // Request PO / Reject), never a create surface. Reached via the "Quotes" // tab in ResellerShell's top nav (see reseller-shell.jsx's // RESELLER_NAV_ITEMS) — replaces the "Pricing schedules" ComingSoonCard // placeholder that used to sit on the dashboard. // // Flow (confirmed with the customer): // 1. Reseller picks products from their own priced catalogue // (GET /api/portal/products — priced by their company's tier + // default currency, same price grid the admin Price List page // edits) and quantities, chooses a tax treatment (Standard, with an // editable rate — Sales Tax varies by US state, VAT occasionally // changes — or Export - No Tax, which forces the rate to 0 // regardless of what's typed), and submits (POST /api/portal/quotes). // unit_price is snapshotted server-side at submit time from the // price grid — never trusted from the client. // 2. The quote then sits in "Submitted" until Solo staff act on it in // the admin Quotes page. The reseller can attach a PO number and/or // a PO PDF to their OWN quote AT ANY TIME regardless of status // (POST /api/portal/quotes/:id/po, multipart) — this is what // unlocks admin's Accept button; attaching a PO also auto-flips a // "PO Requested" quote back to "Submitted" so it reappears in // admin's queue. // 3. Once accepted, the quote is converted into an Order by admin and // pushed to Xero/QuickBooks — nothing further to do here. // // VAT vs Sales Tax is purely a display-label choice by the company's // region (see taxLabelFor below) — both are stored identically // server-side as tax_treatment/tax_rate (see migrations/0025_quotes.sql). // // Reuses FieldBlock/DarkInput from reseller-login-page.jsx (already // loaded earlier — see index.html; the component keeps its original // name but its internal styling is being converted to the light-theme // palette), matching ResellerShell's white theme now that the whole // portal has flipped from black-on-white to white/black text on a // white background (see reseller-shell.jsx's header comment for the // full rationale). // submitted/accepted/rejected keep their functional status colour (this // is meaningful colour-coding a user scans a list by, not decoration). // po_requested was previously a plain bright-white "action needed" flag // against the old black background — on a white background that's // invisible, so it's now a warm amber tone (matching admin's own // po_requested colour in admin-quotes-page.jsx) instead. const QUOTE_STATUS_LABELS_PORTAL = { submitted: "Submitted", po_requested: "PO Requested", accepted: "Accepted", rejected: "Rejected" }; const QUOTE_STATUS_COLORS_PORTAL = { submitted: "var(--pt-status-submitted)", po_requested: "var(--pt-status-po-requested)", accepted: "var(--pt-status-accepted)", rejected: "var(--pt-status-rejected)", }; function portalMoney(amount, currency) { const symbols = { GBP: "£", USD: "$", EUR: "€" }; return `${symbols[currency] || ""}${Number(amount).toFixed(2)}`; } // UK/EU -> VAT, North America/Rest of the World -> Sales Tax. Purely a // label — the underlying tax_treatment/tax_rate fields are identical // either way (see migrations/0025_quotes.sql's header comment). function taxLabelFor(region) { return region === "UK" || region === "EU" ? "VAT" : "Sales Tax"; } function ResellerQuotesPage({ onNavigate }) { const [state, setState] = useState({ status: "loading", user: null, company: null, isSoloStaff: false }); const [companies, setCompanies] = useState([]); const [quotes, setQuotes] = useState({ status: "loading", items: [] }); const [catalogue, setCatalogue] = useState({ status: "loading", products: [], defaultCurrency: "GBP" }); const [openId, setOpenId] = useState(null); const [showNew, setShowNew] = useState(false); const loadQuotes = () => { setQuotes((q) => ({ ...q, status: "loading" })); fetch("/api/portal/quotes", { credentials: "same-origin" }) .then((r) => (r.ok ? r.json() : { quotes: [] })) .then((data) => setQuotes({ status: "ready", items: data.quotes || [] })) .catch(() => setQuotes({ status: "ready", items: [] })); }; const loadCatalogue = () => { fetch("/api/portal/products", { credentials: "same-origin" }) .then((r) => (r.ok ? r.json() : { products: [], defaultCurrency: "GBP" })) .then((data) => setCatalogue({ status: "ready", products: data.products || [], defaultCurrency: data.defaultCurrency || "GBP" })) .catch(() => setCatalogue({ status: "ready", products: [], defaultCurrency: "GBP" })); }; 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(() => { loadQuotes(); loadCatalogue(); })) .catch(() => { /* switch failed silently */ }); }; useEffect(() => { loadMe(); loadQuotes(); loadCatalogue(); }, []); // eslint-disable-line react-hooks/exhaustive-deps -- mount-only if (state.status === "loading") { return
; } const { user, company, isSoloStaff } = state; const taxLabel = taxLabelFor(company && company.region); return ( setShowNew((v) => !v)} style={{ background: showNew ? "var(--pt-surface-strong)" : "var(--pt-accent-bg)", color: showNew ? "var(--pt-fg)" : "var(--pt-accent-fg)", border: `1px solid ${showNew ? "var(--pt-border-strong)" : "var(--pt-accent-bg)"}`, padding: "12px 20px", cursor: "pointer", fontFamily: "var(--font-body)", fontSize: 12, fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", }} >{showNew ? "Cancel" : "+ New quote"} } >

Build a quote from your priced catalogue below, submit it to Solo, then attach a PO once you have one — Solo staff will accept it and push it to your order pipeline.

{showNew && ( { setShowNew(false); loadQuotes(); }} /> )}
Your quotes {quotes.status === "ready" && `(${quotes.items.length})`}
{quotes.status === "loading" ? (
Loading…
) : quotes.items.length === 0 ? (
No quotes yet — build your first one above.
) : (
{quotes.items.map((q) => ( setOpenId(openId === q.id ? null : q.id)} onChanged={loadQuotes} taxLabel={taxLabel} /> ))}
)} ); } // ─────────────────────────── New Quote builder ─────────────────────────── function NewQuoteForm({ catalogue, taxLabel, onCreated }) { const currency = catalogue.defaultCurrency || "GBP"; const [lines, setLines] = useState([{ productId: "", quantity: 1 }]); const [taxTreatment, setTaxTreatment] = useState("standard"); const [taxRate, setTaxRate] = useState(""); const [poNumber, setPoNumber] = useState(""); const [notes, setNotes] = useState(""); const [busy, setBusy] = useState(false); const [error, setError] = useState(""); const priceFor = (productId) => { const product = catalogue.products.find((p) => String(p.id) === String(productId)); if (!product) return null; const entry = product.prices.find((pr) => pr.currency === currency); return entry ? entry.unitPrice : null; }; const updateLine = (idx, patch) => { setLines((prev) => prev.map((l, i) => (i === idx ? { ...l, ...patch } : l))); }; const addLine = () => setLines((prev) => [...prev, { productId: "", quantity: 1 }]); const removeLine = (idx) => setLines((prev) => (prev.length === 1 ? prev : prev.filter((_, i) => i !== idx))); const validLines = lines.filter((l) => l.productId && Number(l.quantity) > 0); const subtotal = validLines.reduce((sum, l) => { const price = priceFor(l.productId); return price == null ? sum : sum + price * Number(l.quantity); }, 0); const effectiveTaxRate = taxTreatment === "export_no_tax" ? 0 : (Number(taxRate) || 0); const taxAmount = subtotal * (effectiveTaxRate / 100); const total = subtotal + taxAmount; const hasMissingPrice = validLines.some((l) => priceFor(l.productId) == null); const canSubmit = validLines.length > 0 && !hasMissingPrice && (taxTreatment === "export_no_tax" || (taxRate !== "" && Number(taxRate) >= 0 && Number(taxRate) <= 100)) && !busy; const submit = async () => { if (!canSubmit) return; setBusy(true); setError(""); try { const res = await fetch("/api/portal/quotes", { method: "POST", credentials: "same-origin", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ currency, taxTreatment, taxRate: taxTreatment === "export_no_tax" ? 0 : Number(taxRate), notes: notes.trim() || undefined, poNumber: poNumber.trim() || undefined, items: validLines.map((l) => ({ productId: Number(l.productId), quantity: Number(l.quantity) })), }), }); const d = await res.json().catch(() => ({})); if (!res.ok) { setError(d.error || "Something went wrong."); setBusy(false); return; } onCreated(); } catch { setError("Couldn't reach the server. Check your connection and try again."); setBusy(false); } }; return (
New quote — priced in {currency}
{error && (
{error}
)} {/* Line items — Item, QTY, Item Price -> Total Price */}
{lines.map((line, idx) => { const price = priceFor(line.productId); const lineTotal = price != null ? price * Number(line.quantity || 0) : null; return (
updateLine(idx, { quantity: e.target.value })} />
{lineTotal != null ? portalMoney(lineTotal, currency) : No price}
); })}
{/* Tax treatment */}
setTaxRate(e.target.value)} />
{/* PO number (optional at creation — file can be attached after) */} setPoNumber(e.target.value)} placeholder="e.g. PO-48291" />