// screens/upload.jsx — Quote configurator, card-based 3-column layout. // Left: price + 3D viewer with analysis. Middle: process / materials / // notes accordions. Right: cart rail with live draft item + totals. // The four families we stock. `available: false` = listed but awaiting // stock — shown greyed-out and unselectable until filament arrives. const UPLOAD_MATERIALS = [ { code: "PETG Premium", density: 1.27, perGram: 0.13, type: "PETG", tag: "Tough, water-tight", available: true }, { code: "PLA Premium", density: 1.24, perGram: 0.10, type: "PLA", tag: "Workhorse", available: false }, { code: "ASA Premium", density: 1.07, perGram: 0.15, type: "ASA", tag: "UV-stable", available: false }, { code: "TPU 95A", density: 1.21, perGram: 0.18, type: "TPU", tag: "Flexible", available: false }, ]; const PROCESSES = [ { id: "FDM", label: "FDM", desc: "Fused filament", available: true }, { id: "SLA", label: "SLA", desc: "Resin · soon", available: false }, { id: "SLS", label: "SLS", desc: "Sintering · soon", available: false }, ]; // stock: 0 = shown greyed-out (coming soon) and unselectable. // Currently only black PETG is on the shelf. const FILAMENTS = [ { id: "black", hex: "#1d1d1f", name: "Black", stock: 2400 }, { id: "white", hex: "#f2f0ea", name: "White", stock: 0 }, { id: "grey", hex: "#9a9da2", name: "Grey", stock: 0 }, { id: "blue", hex: "#2456c4", name: "Blue", stock: 0 }, { id: "red", hex: "#c43a2e", name: "Red", stock: 0 }, { id: "yellow", hex: "#e3b93a", name: "Yellow", stock: 0 }, { id: "green", hex: "#3d7a4e", name: "Green", stock: 0 }, { id: "orange", hex: "#d76b2a", name: "Orange", stock: 0 }, ]; const LAYER_OPTIONS = [ { v: "0.28", l: "Draft (0.28mm)" }, { v: "0.20", l: "Standard (0.2mm)" }, { v: "0.16", l: "Quality (0.16mm)" }, { v: "0.12", l: "Fine (0.12mm)" }, { v: "0.08", l: "Ultra (0.08mm)" }, ]; const INFILL_OPTIONS = [5, 10, 15, 20, 25, 30, 40, 50, 75, 100]; const LEAD_TIMES = [ { id: "standard", label: "Standard : 3 Days", mult: 1.0 }, { id: "priority", label: "Priority : Next day", mult: 1.35 }, { id: "express", label: "Express : Same day", mult: 1.85 }, ]; const track = (e, p) => window.syncAnalytics && window.syncAnalytics.track(e, p); function UploadScreen({ cart = [], removeCartItem, onAddToCart, onPlaceOrder, preloadBuffer, preloadName, onNav, brand }) { const [stage, setStage] = React.useState("drop"); const [progress, setProgress] = React.useState(0); const [error, setError] = React.useState(""); const [file, setFile] = React.useState(null); const [viewerKey, setViewerKey] = React.useState(0); const [units, setUnits] = React.useState("mm"); const [parseKind, setParseKind] = React.useState("stl"); // config const [proc, setProc] = React.useState("FDM"); const [matCode, setMatCode] = React.useState("PETG Premium"); const [filament, setFilament] = React.useState(FILAMENTS[0]); const [layer, setLayer] = React.useState("0.20"); const [infill, setInfill] = React.useState(20); const [quantity, setQuantity] = React.useState(1); const [leadTime, setLeadTime] = React.useState("standard"); const [matSearch, setMatSearch] = React.useState(""); const [notes, setNotes] = React.useState(""); const [open, setOpen] = React.useState({ process: true, materials: true, notes: false }); const material = UPLOAD_MATERIALS.find(m => m.code === matCode) || UPLOAD_MATERIALS[0]; const leadOpt = LEAD_TIMES.find(l => l.id === leadTime) || LEAD_TIMES[0]; const fileInputRef = React.useRef(null); const addInputRef = React.useRef(null); const [dragOver, setDragOver] = React.useState(false); // ── parse ──────────────────────────────────────────────────────────────── // Accepts STL natively; 3MF is unzipped + XML-parsed; STEP is tessellated // by the lazily-loaded OpenCascade WASM kernel. Non-STL formats are // converted to binary STL so the viewer / analysis / cart reuse one path. async function handleArrayBuffer(arrayBuffer, name) { const ext = ((name.match(/\.(\w+)$/) || [])[1] || "stl").toLowerCase(); const kind = ext === "3mf" ? "3mf" : (ext === "step" || ext === "stp") ? "step" : "stl"; setParseKind(kind); setStage("parsing"); setProgress(8); track("upload_parse_started", { name, kind }); const tick = (p, ms = 60) => new Promise(r => { setProgress(p); setTimeout(r, ms); }); try { let geo, stlBuffer; if (kind === "step") { await tick(12); await SyncSTL.loadOcct(); // lazy CAD kernel (~one-time) await tick(40); geo = await SyncSTL.parseSTEP(arrayBuffer); await tick(60); stlBuffer = SyncSTL.geometryToSTL(geo); } else if (kind === "3mf") { await tick(20); geo = SyncSTL.parse3MF(arrayBuffer); await tick(55); stlBuffer = SyncSTL.geometryToSTL(geo); } else { await tick(20); geo = SyncSTL.parse(arrayBuffer); stlBuffer = arrayBuffer; } await tick(70); geo.computeBoundingBox(); const bb = geo.boundingBox; const dims = [ +(bb.max.x - bb.min.x).toFixed(1), +(bb.max.y - bb.min.y).toFixed(1), +(bb.max.z - bb.min.z).toFixed(1), ]; const triangles = Math.round(geo.attributes.position.count / 3); const volMm3 = SyncSTL.volume(geo); await tick(84); const analysis = SyncSTL.analyze(geo, { orient: "zup", overhangAngleDeg: 45 }); setProgress(95); geo.dispose(); const meta = { name, arrayBuffer: stlBuffer, dims, triangles, volMm3, volCm3: volMm3 / 1000, analysis, sourceFormat: kind }; track("upload_parse_ok", { name, kind, triangles, volCm3: +(volMm3 / 1000).toFixed(1), watertight: analysis.watertight }); setTimeout(() => { setFile(meta); setStage("configure"); setProgress(100); }, 240); } catch (e) { console.error(e); track("upload_parse_failed", { name, kind }); setError( kind === "step" ? "STEP import needs the CAD kernel and it couldn't load or read this file. Try again, or request a manual quote via Contact." : kind === "3mf" ? "Couldn't read a mesh out of that 3MF." : "Couldn't parse that file as STL." ); setStage("drop"); } } function handleFile(f) { if (!f) return; if (!/\.(stl|3mf|step|stp)$/i.test(f.name)) { setError("Supported formats: STL, 3MF, STEP."); return; } setError(""); const reader = new FileReader(); reader.onerror = () => setError("Couldn't read that file."); reader.onload = () => handleArrayBuffer(reader.result, f.name); reader.readAsArrayBuffer(f); } React.useEffect(() => { if (preloadBuffer && stage === "drop") { handleArrayBuffer(preloadBuffer, preloadName || "preview.stl"); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [preloadBuffer]); // ── pricing ──────────────────────────────────────────────────────────── const slice = file ? SyncSTL.estimateSlice( file, { layerHeight: layer, infillPct: infill, walls: 3, nozzleWidth: 0.4, topBottomLayers: 4, supportsEnabled: file.analysis.needsSupport }, material ) : null; const mass = slice?.massG ?? 0; const printHours = slice?.printHours ?? 0; // Full cost-model quote (no VAT — not VAT registered). Support material and // its print time are already inside `slice`; we never surface it separately. const q = slice ? SyncSTL.quote(slice, material.type, quantity) : null; const draftEx = q ? q.total * leadOpt.mult : 0; const draftInc = draftEx; // alias kept for existing JSX; no VAT applied const cartTotalInc = cart.reduce((a, b) => a + (b.subtotal || 0), 0); const grandInc = cartTotalInc + (file ? draftInc : 0); // ── cart ops ─────────────────────────────────────────────────────────── function buildDraftItem() { return { file, filament, material, layer, infill, quantity, supports: file.analysis.needsSupport, leadTime: leadOpt, notes, unitPrice: draftInc / Math.max(1, quantity), subtotal: draftInc, analysis: file.analysis, }; } function commitDraft() { if (!file) return; onAddToCart(buildDraftItem()); track("added_to_cart", { name: file.name, value: +draftInc.toFixed(2), qty: quantity, material: material.code }); setFile(null); setNotes(""); } function addAnotherFile(f) { if (!f) return; if (file) commitDraft(); handleFile(f); } function placeOrder() { if (file) commitDraft(); track("place_order_clicked", { value: +grandInc.toFixed(2), items: cart.length + (file ? 1 : 0) }); onPlaceOrder && onPlaceOrder(); } // ── DROP STAGE ───────────────────────────────────────────────────────── if (stage === "drop") { return (
Instant quote · no signup

Upload your model, see the price.

Parsed locally in your browser — your file never leaves your machine until you place the order.

fileInputRef.current?.click()} onDragOver={(e) => { e.preventDefault(); setDragOver(true); }} onDragLeave={() => setDragOver(false)} onDrop={(e) => { e.preventDefault(); setDragOver(false); handleFile(e.dataTransfer.files?.[0]); }} style={{ maxWidth: 860, margin: "28px auto 0", padding: "clamp(48px,7vw,96px) 24px", textAlign: "center", cursor: "pointer", display: "flex", flexDirection: "column", alignItems: "center", gap: 16, borderStyle: "dashed", borderColor: dragOver ? "var(--primary)" : "var(--line)", background: dragOver ? "var(--primary-soft)" : "var(--card)", transition: "all .15s", }}>
Drop your 3D file here
STL · 3MF · STEP · ≤ 50MB · parsed locally
e.stopPropagation()} onChange={(e) => handleFile(e.target.files?.[0])} />
{error &&
{error}
}
By uploading you confirm you own the model or have rights to print it.
); } // ── PARSING STAGE ────────────────────────────────────────────────────── if (stage === "parsing") { return (
Parsing · running geometry analysis
{({ stl: ["Reading triangles…", "Computing volume…", "Checking watertight & overhangs…"], "3mf": ["Unzipping 3MF…", "Reading mesh XML…", "Checking watertight & overhangs…"], step: ["Loading CAD kernel…", "Tessellating B-rep surfaces…", "Checking watertight & overhangs…"], }[parseKind] || [])[progress < 50 ? 0 : progress < 80 ? 1 : 2]}
{progress < 30 ? "parsing" : progress < 60 ? "bounding box" : progress < 90 ? "overhang scan" : "final checks"} {Math.round(progress)}%
); } // ── CONFIGURE STAGE ──────────────────────────────────────────────────── const filteredMats = UPLOAD_MATERIALS.filter(m => !matSearch || m.code.toLowerCase().includes(matSearch.toLowerCase()) || m.type.toLowerCase().includes(matSearch.toLowerCase()) ); const dimsLabel = units === "mm" ? file.dims.map(d => d.toFixed(1)).join(" × ") + " mm" : file.dims.map(d => (d / 25.4).toFixed(2)).join(" × ") + " in"; return (
{/* ── LEFT — price + viewer ─────────────────────────────────── */}
{file.name}
Price · no VAT
£{draftEx.toFixed(2)}
£{(draftEx / Math.max(1, quantity)).toFixed(2)}/Unit setQuantity(v)} min={1} max={500} />
{mass < 1 ? mass.toFixed(2) : mass.toFixed(1)} g filament {(mass * quantity).toFixed(mass * quantity < 10 ? 1 : 0)} g total · {(mass * quantity / 1000).toFixed(2)} kg ≈ {formatFilamentLength(mass * quantity, material.density)} of 1.75mm
{/* volume + units */}
Volume: {file.volMm3.toFixed(0)} mm³
{/* analysis */}
{/* colour list */}
{FILAMENTS.map(f => { const oos = f.stock === 0; const active = filament.id === f.id; return ( ); })}
{/* bottom toolbar */}
{dimsLabel} · drag to rotate
{/* ── MIDDLE — accordions ───────────────────────────────────── */}
setOpen(o => ({ ...o, process: !o.process }))} >
{PROCESSES.map(p => { const active = proc === p.id; return ( ); })}
setOpen(o => ({ ...o, materials: !o.materials }))} >
setMatSearch(e.target.value)} placeholder={`Search material (${UPLOAD_MATERIALS.length})`} style={{ paddingRight: 38 }} />
{filteredMats.map((m, i) => { const active = m.code === matCode; const oos = m.available === false; return ( ); })} {filteredMats.length === 0 && (
No matches
)}
setOpen(o => ({ ...o, notes: !o.notes }))} >