/* ============================================================ Carzello — responsive app shell + router ============================================================ */ const NAV = [ { id: "browse", tkey: "nav.buy", icon: I.search, path: "/browse" }, { id: "watchlist", tkey: "nav.watchlist", icon: I.star, path: "/watchlist" }, { id: "activity", tkey: "nav.bids", icon: I.gavel, path: "/activity" }, { id: "purchases", tkey: "nav.purchases", icon: I.truck, path: "/purchases" }, { id: "account", tkey: "nav.account", icon: I.user, path: "/account" }, ]; function unreadCount(s) { return s.notifications.filter(n => n.ts > s.notifReadAt).length; } function activeBidsBadge(s) { return Object.values(s.lots).filter(L => L.yourMax != null && L.status === "live" && L.highBidder !== "you").length; } function GlobalSearch({ onClose }) { const s = useStore(); const [q, setQ] = useState(""); const [copart, setCopart] = useState([]); const inputRef = useRef(null); useEffect(() => { inputRef.current?.focus(); }, []); const results = q ? Object.values(s.lots).filter(L => !L.hidden && `${L.year} ${L.make} ${L.model} ${L.trim} ${L.vin} ${L.id}`.toLowerCase().includes(q.toLowerCase())).slice(0, 8) : []; // the Copart feed is part of what's on the page — search must cover it too useEffect(() => { if (!q.trim()) { setCopart([]); return; } const t = setTimeout(() => { fetch(`/api/copart/sales-data?search=${encodeURIComponent(q.trim())}&limit=6`) .then((r) => r.json()) .then((d) => setCopart(d.success ? d.data : [])) .catch(() => setCopart([])); }, 350); return () => clearTimeout(t); }, [q]); return (
setQ(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" && results[0]) { navigate(`/lot/${results[0].id}`); onClose(); } }} /> esc
{q && results.length === 0 && copart.length === 0 &&
No matches for "{q}"
} {results.map(L => (
{ navigate(`/lot/${L.id}`); onClose(); }}>
{L.year} {L.make} {L.model}
{L.trim} · {L.id}
{fmtUSD(L.highBid)}
))} {copart.length > 0 && ( <>
COPART DATA sourcing candidates — request a quote
{copart.map((v) => (
{ openCopartLot(v); onClose(); }}>
{copartTitle(v)}
{Number(v.odometer || 0).toLocaleString("en-US")} mi · {v.damageDescription || "—"} · Lot {v.lotNumber}
{fmtUSD(Number(v.estRetailValue) || 0)}
))} )} {!q &&
Type to search the wholesale inventory and the Copart feed.
}
); } const FAQS = [ { q: "How does proxy bidding work?", a: "Set the maximum you're willing to pay. The system bids the minimum needed to keep you in the lead, one increment above the next-highest bidder, never exceeding your max. Your max is never revealed." }, { q: "What are the fees?", a: "A fixed $345 buyer fee and $170 title & inspection on every vehicle — disclosed before you bid. Freight, duty, and VAT for your destination are shown as an estimate in the landed-cost panel on every lot." }, { q: "When do I have to pay?", a: "Payment in full is due within 48 hours of winning. After that a $50/day late fee applies; unpaid orders default after 5 days — the vehicle is relisted and a penalty of 10% or $800 (whichever is greater) is charged." }, { q: "What is the gate pass?", a: "Once your payment clears, the system issues a gate pass — present it at the yard to release your vehicle. Pick up within 7 days; storage is $25/day afterwards." }, { q: "What if the car doesn't match the condition report?", a: "Every lot is inspected and AutoGraded, and the condition is guaranteed to match the report. You have a 48-hour arbitration window from delivery to file a claim, plus optional Sayarah Assurance buyback at checkout." }, { q: "What does 'reserve not met' mean?", a: "The seller set a minimum price the bidding didn't reach. If you were the high bidder, your bid is sent to the seller as an if-sale — they can accept it, counter, or decline. You can also make a direct offer on any lot." }, { q: "How does shipping work?", a: "Sayarah handles export logistics door-to-port: gate release, trucking to port, ocean freight, and destination customs guidance. You can track milestones and documents in My Purchases." }, ]; function HelpPage() { const [open, setOpen] = useState(0); return (
Support

How Sayarah works

Bidding, fees, payment, shipping, and arbitration — the whole deal, in plain terms.
{FAQS.map((f, i) => (
{open === i &&
{f.a}
}
))}
Privacy notice (summary)
Terms of sale (summary)
); } function Footer() { return ( ); } /* ============================================================ Operator console loader — the admin source is NOT shipped to buyers. Verified operators fetch /app/admin.jsx with their Firebase token (server-enforced), compile it, and mount it. ============================================================ */ function OperatorGate({ err }) { const [email, setEmail] = useState(""); const [pw, setPw] = useState(""); const [busy, setBusy] = useState(false); const [msg, setMsg] = useState(err || null); function go() { if (busy) return; setMsg(null); setBusy(true); const enter = (cred) => { if (!FB.isAdmin(cred.user)) { setMsg("This account does not have operator access."); setBusy(false); return FB.signOut(); } return FB.adoptAccountState().then(() => location.reload()); }; FB.signIn(email, pw) .then(enter) .catch((e) => { if (FB.ADMIN_EMAILS.includes(email.toLowerCase().trim())) { return FB.signUp(email, pw).then(enter).catch((e2) => { setMsg(/already exists/i.test(e2.message) ? e.message : e2.message); setBusy(false); }); } setMsg(e.message); setBusy(false); }); } return (
Carzello
Operator console
setEmail(e.target.value)} autoComplete="email" />
{ setPw(e.target.value); setMsg(null); }} onKeyDown={(e) => e.key === "Enter" && go()} autoComplete="current-password" />
{msg &&
{msg}
}
Operator accounts only. Back to buyer site
); } function AdminLoader({ section, sub }) { const user = useAuthUser(); const [ready, setReady] = useState(() => typeof window.Admin === "function"); const [err, setErr] = useState(null); const isOp = FB.enabled && FB.isAdmin(user); useEffect(() => { if (ready || !isOp) return; let dead = false; FB.currentUser().getIdToken() .then((tk) => fetch("/app/admin.jsx", { headers: { authorization: "Bearer " + tk } })) .then((r) => { if (!r.ok) throw new Error("Operator verification failed."); return r.text(); }) .then((code) => { const js = Babel.transform(code, { presets: ["react"], filename: "admin.jsx" }).code; (0, eval)(js); if (!dead) setReady(typeof window.Admin === "function"); }) .catch((e) => { if (!dead) setErr(e.message || "Could not load the console."); }); return () => { dead = true; }; }, [isOp, ready]); if (ready) return ; if (isOp && !err) return
Loading operator console…
; return ; } function App() { const route = useRoute(); const s = useStore(); const { t } = useT(); const [searchOpen, setSearchOpen] = useState(false); const user = useAuthUser(); const [authOpen, setAuthOpen] = useState(false); // sign-in modal opens on the global event fired by requireAuth() useEffect(() => { const open = () => setAuthOpen(true); window.addEventListener("carzello:auth", open); return () => window.removeEventListener("carzello:auth", open); }, []); // keep the buyer identity in sync with the signed-in account useEffect(() => { if (user && user.email && s.buyer && s.buyer.email !== user.email) { Engine.setBuyerIdentity({ name: user.displayName || user.email.split("@")[0], email: user.email }); } }, [user && user.uid]); useEffect(() => { const on = (e) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); setSearchOpen(true); } }; window.addEventListener("keydown", on); return () => window.removeEventListener("keydown", on); }, []); // scroll to top on route change useEffect(() => { window.scrollTo(0, 0); }, [route.name, route.param]); // Admin / consignor portals render their own full-screen shells (no buyer chrome) if (route.name === "admin") return (<>); if (route.name === "consignor") return (<>); const unread = unreadCount(s); const bidsBadge = activeBidsBadge(s); function screen() { switch (route.name) { case "browse": return ; case "lot": return ; case "live": return ; case "watchlist": return ; case "activity": return ; case "purchases": return ; case "notifications": return ; case "account": return ; case "sell": return ; case "help": return ; default: return ; } } const navActive = (id) => { if (route.name === "lot" || route.name === "live") return id === "browse"; return route.name === id; }; return (
{/* TOP BAR */}
Carzello
{/* WORKSPACE */}
{screen()}
); } ReactDOM.createRoot(document.getElementById("root")).render();