// PRLX Gear Hire — floating quote button, slide-in cart drawer with per-item tier select, and enquiry form. // The enquiry posts to Formspree → info@prlx.com.au (endpoint in window.PRLX_FORM.hireEndpoint). // Spam is handled by Formspree's built-in protection plus a honeypot field. function QuoteCart({ cart, items, onAdd, onRemove, onClear, open, setOpen }) { const { Button, Input } = window.PRLXDesignSystem_b1b8b9; const { Icon, useViewport } = window; const { isMobile } = useViewport(); const ENDPOINT = window.PRLX_FORM.hireEndpoint; const [tier, setTier] = React.useState("day"); // global tier toggle for the estimate const [status, setStatus] = React.useState("idle"); // idle | sending | sent | error const [errorMsg, setErrorMsg] = React.useState(""); const [fieldErrors, setFieldErrors] = React.useState({ email: "", phone: "" }); const formRef = React.useRef(null); const validateEmail = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test((v || "").trim()) ? "" : "Enter a valid email address"; const validatePhone = (v) => { const digits = (v || "").replace(/\D/g, ""); return digits.length >= 8 && digits.length <= 15 ? "" : "Enter a valid phone number"; }; const handleEmailChange = (e) => { if (fieldErrors.email) setFieldErrors((p) => ({ ...p, email: validateEmail(e.target.value) })); }; const handlePhoneChange = (e) => { const filtered = e.target.value.replace(/[^\d\s\+\-\(\)]/g, ""); if (filtered !== e.target.value) e.target.value = filtered; if (fieldErrors.phone) setFieldErrors((p) => ({ ...p, phone: validatePhone(filtered) })); }; const lines = items.filter((i) => (cart[i.id] || 0) > 0); const totalUnits = lines.reduce((s, i) => s + cart[i.id], 0); const tierKey = { day: "day", weekend: "weekend", week: "week" }[tier]; const estimate = lines.reduce((s, i) => s + i.rates[tierKey] * cart[i.id], 0); const tierLabel = { day: "day", weekend: "weekend", week: "week" }[tier]; const formVisible = lines.length > 0 && status !== "sent"; // Inject pulse keyframe once (shared with Contact.jsx) React.useEffect(() => { if (document.getElementById("prlx-check-pulse-kf")) return; const s = document.createElement("style"); s.id = "prlx-check-pulse-kf"; s.textContent = "@keyframes prlxCheckPulse{0%,100%{box-shadow:0 0 0 10px rgba(255,59,48,0.14),0 0 0 22px rgba(255,59,48,0.06)}50%{box-shadow:0 0 0 18px rgba(255,59,48,0.18),0 0 0 34px rgba(255,59,48,0.08)}}"; document.head.appendChild(s); }, []); const handleSubmit = async (e) => { e.preventDefault(); if (status === "sending") return; const fd0 = new FormData(formRef.current); const emailErr = validateEmail(fd0.get("email") || ""); const phoneErr = validatePhone(fd0.get("phone") || ""); if (emailErr || phoneErr) { setFieldErrors({ email: emailErr, phone: phoneErr }); return; } setStatus("sending"); setErrorMsg(""); const fd = new FormData(formRef.current); const senderName = (fd.get("name") || "").toString().trim(); const fmtDate = (iso) => { if (!iso) return ""; const [y,m,d] = iso.split("-"); return `${d}/${m}/${y.slice(2)}`; }; const dateFrom = fmtDate((fd.get("date_from") || "").toString().trim()); const dateTo = fmtDate((fd.get("date_to") || "").toString().trim()); const hireDates = dateFrom && dateTo ? `${dateFrom} → ${dateTo}` : dateFrom || dateTo || "—"; const notes = (fd.get("notes") || "").toString().trim(); const summary = lines.map((i) => `${cart[i.id]}× ${i.name} — $${i.rates[tierKey]}/${tierLabel}`).join("\n"); // Remove raw form fields — replace with a single clean message fd.delete("date_from"); fd.delete("date_to"); fd.delete("notes"); fd.set("_subject", senderName ? `Gear hire enquiry from ${senderName} — PRLX website` : "Gear hire enquiry — PRLX website"); fd.set("message", `GEAR HIRE ENQUIRY\n` + `${"-".repeat(40)}\n` + `Hire dates: ${hireDates}\n\n` + `Items (${tierLabel} rate):\n${summary}\n\n` + `Estimated ${tierLabel} total: $${estimate.toLocaleString()} (indicative, ex GST)` + (notes ? `\n\nNotes:\n${notes}` : "") ); try { const res = await fetch(ENDPOINT, { method: "POST", headers: { Accept: "application/json" }, body: fd, }); const data = await res.json(); if (res.ok) { setStatus("sent"); } else { setStatus("error"); setErrorMsg((data.errors && data.errors.map(e => e.message).join(", ")) || "Something went wrong — please email info@prlx.com.au directly."); } } catch (err) { setStatus("error"); setErrorMsg("Couldn't reach the server — please email info@prlx.com.au directly."); } }; const resetForm = () => { setStatus("idle"); setErrorMsg(""); setFieldErrors({ email: "", phone: "" }); }; return ( {/* floating launcher */} {totalUnits > 0 && !open && ( )} {/* scrim */}
setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 950, background: "rgba(5,5,5,0.6)", backdropFilter: "blur(3px)", opacity: open ? 1 : 0, pointerEvents: open ? "auto" : "none", transition: "opacity 240ms" }} /> {/* drawer */} ); } Object.assign(window, { QuoteCart });