// screens/cart.jsx — Cart & checkout // ─── Order submission ─────────────────────────────────────────────────────── // Orders are emailed to the studio via Web3Forms (free, no backend). Paste your // access key below — get it at https://web3forms.com (enter formasync3d@gmail.com, // they email you a key). The customer's STL is attached when it's small enough. const WEB3FORMS_KEY = "8ad75003-acbb-4b11-8424-6371efb47af6"; const ORDER_EMAIL = "formasync3d@gmail.com"; // Upload an STL to a free, no-account file host and return a public download // URL. Tries file.io (CORS-enabled, ~2-week retention) then tmpfiles.org. // Throws only if every host fails, so the caller can fall back to email. async function uploadOrderFile(file) { const f = new File([file.arrayBuffer], file.name, { type: "application/octet-stream" }); // 1) file.io try { const fd = new FormData(); fd.append("file", f); const r = await fetch("https://file.io/?expires=2w", { method: "POST", body: fd }); const j = await r.json(); if (j && j.success && j.link) return j.link; } catch (e) { /* try next */ } // 2) tmpfiles.org const fd2 = new FormData(); fd2.append("file", f); const r2 = await fetch("https://tmpfiles.org/api/v1/upload", { method: "POST", body: fd2 }); const j2 = await r2.json(); if (j2 && j2.data && j2.data.url) return j2.data.url.replace("tmpfiles.org/", "tmpfiles.org/dl/"); throw new Error("upload failed"); } const cartInput = { border: "1px solid var(--line)", appearance: "none", font: "inherit", width: "100%", boxSizing: "border-box", padding: "10px 12px", borderRadius: 8, background: "var(--card)", color: "var(--ink)", fontSize: 13.5, outline: "none", }; // Summary row (was previously provided by upload.jsx; owned here now) const CartRow = ({ k, v, sub, faded }) => (
{k}
{sub &&
{sub}
}
{v}
); function CartScreen({ items, removeItem, onContinue, onCheckout, onBrowse, onNav, brand }) { const [shipping, setShipping] = React.useState("tracked"); const subtotal = items.reduce((a, b) => a + b.subtotal, 0); const shippingCost = items.length === 0 ? 0 : shipping === "tracked" ? 3.95 : shipping === "express" ? 7.95 : 0; const total = subtotal + shippingCost; const [placed, setPlaced] = React.useState(false); const [orderRef, setOrderRef] = React.useState(""); const [cust, setCust] = React.useState({ name: "", email: "", phone: "", address: "", notes: "" }); const [submitting, setSubmitting] = React.useState(false); const [error, setError] = React.useState(""); const setC = (k, v) => setCust(c => ({ ...c, [k]: v })); async function submitOrder() { if (!cust.email || !cust.address) { setError("Email and delivery address are required."); return; } setError(""); setSubmitting(true); const ref = "SYNC-" + Math.floor(Math.random() * 8000 + 1000); const shipLabel = shipping === "tracked" ? "Royal Mail Tracked 48 (£3.95)" : shipping === "express" ? "Royal Mail Special (£7.95)" : "Collect in person (free)"; try { const fd = new FormData(); fd.append("access_key", WEB3FORMS_KEY); fd.append("subject", `New order ${ref} — £${total.toFixed(2)}`); fd.append("from_name", cust.name || "Sync customer"); fd.append("email", cust.email); fd.append("Reference", ref); fd.append("Customer", `${cust.name || "—"} · ${cust.email} · ${cust.phone || "no phone"}`); fd.append("Delivery address", cust.address); fd.append("Shipping", shipLabel); fd.append("Notes", cust.notes || "—"); const lines = items.map((it, i) => `${i + 1}. ${it.file.name} — ${it.material?.code || "PLA"}, ${it.filament?.name || ""}, ${it.layer}mm layer, ${it.infill}% infill, qty ${it.quantity}, ${it.file.dims.join("×")}mm, ${(it.file.volCm3 || 0).toFixed(1)}cm³, ${(it.file.triangles || 0).toLocaleString()} tris — £${it.subtotal.toFixed(2)}` ).join("\n"); fd.append("Order", `${lines}\n\nSubtotal £${subtotal.toFixed(2)}\nShipping £${shippingCost.toFixed(2)}\nTOTAL £${total.toFixed(2)} (no VAT)`); // Upload each STL to a free host and include the download links. const links = await Promise.all(items.map(async (it) => { if (!it.file?.arrayBuffer) return `${it.file.name}: (no file)`; try { return `${it.file.name}: ${await uploadOrderFile(it.file)}`; } catch (e) { return `${it.file.name}: (upload failed — reply to this email with the file)`; } })); fd.append("Download files", links.join("\n")); const res = await fetch("https://api.web3forms.com/submit", { method: "POST", body: fd }); const j = await res.json().catch(() => ({})); if (res.ok && j.success) { setOrderRef(ref); setPlaced(true); } else setError(j.message || "Couldn't submit — please email us at " + ORDER_EMAIL); } catch (e) { setError("Network error. Please try again, or email " + ORDER_EMAIL); } finally { setSubmitting(false); } } if (placed) { return (
Order placed

Thank you. We're on it.

Order {orderRef || "SYNC-0000"} has been received. We'll review your file and email you a secure Stripe payment link shortly. Nothing is charged until you pay.

{[ ["Today", "We review your file"], ["Next", "Stripe payment link emailed"], ["+ 2 days", "Printed & dispatched"], ].map(([k, v], i) => (
{k}
{v}
))}
); } if (items.length === 0) { return (
Cart

Nothing in here yet.

The cart is patiently waiting. Upload a model and we'll print it.

); } return (
Cart · {items.length} {items.length === 1 ? "item" : "items"}

Almost on the bed.

{items.map((it, i) => (
{it.file.arrayBuffer ? : }
{it.file.name}
{it.filament.name} · {it.material?.code || "PLA"} · {it.layer}mm · {it.infill}% infill · qty {it.quantity}
{it.file.dims.join(" × ")}mm
£{it.subtotal.toFixed(2)}
))}