Quote Summary

Name: ${formData.name || "Not provided"}

Phone: ${formData.phone || "Not provided"}

Email: ${formData.email || "Not provided"}

Collection: ${formData.collectionPostcode}

Delivery: ${formData.deliveryPostcode}

Weight: ${formData.weight}kg

Price: £${quoteData.price}

Distance: ${routeData.distance} miles

Duration: ${routeData.duration}

Collection Date: ${formData.collectionDate}

Collection Time: ${formData.collectionTime}

Tail Lift Required: ${formData.tailLift ? "Yes" : "No"}

${quoteData.surchargeApplied ? `

Note: £${quoteData.surchargeAmount} ${quoteData.surchargeReason} surcharge applied

` : ""} `; const emailResponse = await fetch("/api/resend-email", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ to: "sales@routeeasyltd.com", subject: "New Quote from RouteEasy", html: emailHtml }) }); if (!emailResponse.ok) { console.error("Failed to send email notification:", await emailResponse.text()); } if (formData.email) { const customerEmailResponse = await fetch("/api/resend-email", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ to: formData.email, subject: "Your RouteEasy Quote", html: emailHtml }) }); if (!customerEmailResponse.ok) { console.error("Failed to send customer email:", await customerEmailResponse.text()); } } } catch (err) { console.error("❌ Error:", err); setError(err.message || "Failed to calculate quote. Please try again."); } finally{ setLoading(false); } }; useEffect(()=>{ const script = document.createElement("script"); script.src = `https://maps.googleapis.com/maps/api/js?key=AIzaSyCPASsnC6cC_0_RPQC1KQ7eYd4HPYUXJMA&libraries=geometry`; script.async = true; script.onload = ()=>setMapsLoaded(true); script.onerror = ()=>setMapError("Failed to load Google Maps"); document.body.appendChild(script); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212]", __source: { fileName: "", lineNumber: 183, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "fixed top-0 left-0 right-0 bg-[#1a1a1a] border-b border-[#333333] z-50", __source: { fileName: "", lineNumber: 184, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 185, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex h-16", __source: { fileName: "", lineNumber: 186, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsMenuOpen(!isMenuOpen), className: "text-white p-2 hover:bg-[#2a2a2a] rounded-lg transition-colors", "aria-label": "Toggle menu", __source: { fileName: "", lineNumber: 187, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars text-xl", __source: { fileName: "", lineNumber: 192, columnNumber: 15 }, __self: this })))), isMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute top-16 left-0 right-0 bg-[#1a1a1a] border-b border-[#333333]", __source: { fileName: "", lineNumber: 198, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4", __source: { fileName: "", lineNumber: 199, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "space-y-2", __source: { fileName: "", lineNumber: 200, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "block px-3 py-2 rounded-lg text-white hover:bg-[#2a2a2a] transition-colors", __source: { fileName: "", lineNumber: 201, columnNumber: 17 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "/van-quote", className: "block px-3 py-2 rounded-lg text-white hover:bg-[#2a2a2a] transition-colors", __source: { fileName: "", lineNumber: 207, columnNumber: 17 }, __self: this }, "Van Quote"), /*#__PURE__*/ React.createElement("a", { href: "/ftl-quote", className: "block px-3 py-2 rounded-lg text-white hover:bg-[#2a2a2a] transition-colors", __source: { fileName: "", lineNumber: 213, columnNumber: 17 }, __self: this }, "Full Truck Load Quote"))))), /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 pt-[calc(64px+2rem)]", __source: { fileName: "", lineNumber: 225, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 226, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-inter font-bold text-[#FFD700] mb-4", __source: { fileName: "", lineNumber: 227, columnNumber: 11 }, __self: this }, "Van Quote")), /*#__PURE__*/ React.createElement("form", { onSubmit: calculateQuote, className: "max-w-xl mx-auto bg-[#1a1a1a] rounded-lg p-8 border border-[#333333]", __source: { fileName: "", lineNumber: 232, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 236, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 237, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#FFD700] font-inter mb-2", __source: { fileName: "", lineNumber: 238, columnNumber: 15 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: formData.name, onChange: handleInputChange, className: "w-full bg-[#2a2a2a] text-white border border-[#333333] rounded-lg p-3 font-inter", required: true, __source: { fileName: "", lineNumber: 241, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 251, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#FFD700] font-inter mb-2", __source: { fileName: "", lineNumber: 252, columnNumber: 15 }, __self: this }, "Phone"), /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phone", value: formData.phone, onChange: handleInputChange, className: "w-full bg-[#2a2a2a] text-white border border-[#333333] rounded-lg p-3 font-inter", required: true, __source: { fileName: "", lineNumber: 255, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 265, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#FFD700] font-inter mb-2", __source: { fileName: "", lineNumber: 266, columnNumber: 15 }, __self: this }, "Email (optional)"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: formData.email, onChange: handleInputChange, className: "w-full bg-[#2a2a2a] text-white border border-[#333333] rounded-lg p-3 font-inter", __source: { fileName: "", lineNumber: 269, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 278, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#FFD700] font-inter mb-2", __source: { fileName: "", lineNumber: 279, columnNumber: 15 }, __self: this }, "Pickup Postcode"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "collectionPostcode", value: formData.collectionPostcode, onChange: handleInputChange, className: "w-full bg-[#2a2a2a] text-white border border-[#333333] rounded-lg p-3 font-inter uppercase", required: true, __source: { fileName: "", lineNumber: 282, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 292, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#FFD700] font-inter mb-2", __source: { fileName: "", lineNumber: 293, columnNumber: 15 }, __self: this }, "Delivery Postcode"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "deliveryPostcode", value: formData.deliveryPostcode, onChange: handleInputChange, className: "w-full bg-[#2a2a2a] text-white border border-[#333333] rounded-lg p-3 font-inter uppercase", required: true, __source: { fileName: "", lineNumber: 296, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 306, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#FFD700] font-inter mb-2", __source: { fileName: "", lineNumber: 307, columnNumber: 15 }, __self: this }, "Collection Date"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "collectionDate", value: formData.collectionDate, onChange: handleInputChange, className: "w-full bg-[#2a2a2a] text-white border border-[#333333] rounded-lg p-3 font-inter", required: true, __source: { fileName: "", lineNumber: 310, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 320, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#FFD700] font-inter mb-2", __source: { fileName: "", lineNumber: 321, columnNumber: 15 }, __self: this }, "Collection Time"), /*#__PURE__*/ React.createElement("input", { type: "time", name: "collectionTime", value: formData.collectionTime, onChange: handleInputChange, className: "w-full bg-[#2a2a2a] text-white border border-[#333333] rounded-lg p-3 font-inter", required: true, __source: { fileName: "", lineNumber: 324, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 334, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#FFD700] font-inter mb-2", __source: { fileName: "", lineNumber: 335, columnNumber: 15 }, __self: this }, "Weight (kg)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "weight", value: formData.weight, onChange: handleInputChange, className: "w-full bg-[#2a2a2a] text-white border border-[#333333] rounded-lg p-3 font-inter", required: true, min: "0", __source: { fileName: "", lineNumber: 338, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 349, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center space-x-3 cursor-pointer", __source: { fileName: "", lineNumber: 350, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "tailLift", checked: formData.tailLift, onChange: handleInputChange, className: "form-checkbox h-5 w-5 text-[#FFD700]", __source: { fileName: "", lineNumber: 351, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-white font-inter", __source: { fileName: "", lineNumber: 358, columnNumber: 17 }, __self: this }, "Tail Lift Required")))), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-red-900 text-white rounded-lg font-inter", __source: { fileName: "", lineNumber: 366, columnNumber: 13 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "mt-8 w-full bg-[#FFD700] text-[#121212] font-inter font-semibold py-4 px-6 rounded-lg hover:bg-[#E5C100] transition-colors", __source: { fileName: "", lineNumber: 371, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 377, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 378, columnNumber: 17 }, __self: this }), " Getting Quote...") : "Get Quote")), quote && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mt-8 max-w-xl mx-auto", __source: { fileName: "", lineNumber: 388, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] rounded-lg overflow-hidden border border-[#333333]", style: { minHeight: "400px" }, __source: { fileName: "", lineNumber: 389, columnNumber: 15 }, __self: this }, mapsLoaded && !mapError && /*#__PURE__*/ React.createElement(GoogleMapComponent, { collectionPoint: quote.collectionPoint, deliveryPoint: quote.deliveryPoint, route: quote.route, __source: { fileName: "", lineNumber: 394, columnNumber: 19 }, __self: this }), mapError && /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex items-center justify-center text-red-500", __source: { fileName: "", lineNumber: 401, columnNumber: 19 }, __self: this }, mapError))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 max-w-xl mx-auto bg-[#1a1a1a] rounded-lg p-8 border border-[#333333]", __source: { fileName: "", lineNumber: 407, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 408, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-6xl font-inter font-bold text-[#FFD700]", __source: { fileName: "", lineNumber: 409, columnNumber: 17 }, __self: this }, "£", quote.price.toFixed(2)), quote.surchargeApplied && /*#__PURE__*/ React.createElement("p", { className: "text-[#FFD700] mt-2 font-inter", __source: { fileName: "", lineNumber: 413, columnNumber: 19 }, __self: this }, "*£", quote.surchargeAmount, " ", quote.surchargeReason, " surcharge applied"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4 mt-6 text-center", __source: { fileName: "", lineNumber: 418, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 419, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#FFD700] font-inter text-sm mb-1", __source: { fileName: "", lineNumber: 420, columnNumber: 21 }, __self: this }, "Distance"), /*#__PURE__*/ React.createElement("p", { className: "text-white font-inter", __source: { fileName: "", lineNumber: 423, columnNumber: 21 }, __self: this }, quote.distance, " miles")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 427, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#FFD700] font-inter text-sm mb-1", __source: { fileName: "", lineNumber: 428, columnNumber: 21 }, __self: this }, "Duration"), /*#__PURE__*/ React.createElement("p", { className: "text-white font-inter", __source: { fileName: "", lineNumber: 431, columnNumber: 21 }, __self: this }, quote.duration)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 433, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#FFD700] font-inter text-sm mb-1", __source: { fileName: "", lineNumber: 434, columnNumber: 21 }, __self: this }, "Vehicle"), /*#__PURE__*/ React.createElement("p", { className: "text-white font-inter", __source: { fileName: "", lineNumber: 437, columnNumber: 21 }, __self: this }, quote.vehicleType)))))))); } function GoogleMapComponent({ collectionPoint, deliveryPoint, route }) { const mapRef = useRef(null); const [map, setMap] = useState(null); const markersRef = useRef([]); const polylineRef = useRef(null); useEffect(()=>{ if (!window.google || !mapRef.current) return; const mapInstance = new window.google.maps.Map(mapRef.current, { zoom: 7, center: { lat: 54.5, lng: -4 }, mapTypeId: "roadmap", mapTypeControl: false, fullscreenControl: false, streetViewControl: false }); setMap(mapInstance); }, [ mapRef.current ]); useEffect(()=>{ if (!map || !collectionPoint || !deliveryPoint) return; markersRef.current.forEach((marker)=>marker.setMap(null)); markersRef.current = []; if (polylineRef.current) { polylineRef.current.setMap(null); } map.setCenter(collectionPoint); markersRef.current.push(new window.google.maps.Marker({ position: collectionPoint, map: map, title: "Collection Point", label: "A" }), new window.google.maps.Marker({ position: deliveryPoint, map: map, title: "Delivery Point", label: "B" })); if (route && route.steps) { const path = route.steps.map((step)=>window.google.maps.geometry.encoding.decodePath(step.polyline)).flat(); polylineRef.current = new window.google.maps.Polyline({ path: path, geodesic: true, strokeColor: "#4285F4", strokeOpacity: 1.0, strokeWeight: 3, map: map }); const bounds = new window.google.maps.LatLngBounds(); path.forEach((point)=>bounds.extend(point)); map.fitBounds(bounds); } }, [ map, collectionPoint, deliveryPoint, route ]); return /*#__PURE__*/ React.createElement("div", { ref: mapRef, className: "w-full h-[400px]", role: "region", "aria-label": "Route map showing collection and delivery points", __source: { fileName: "", lineNumber: 519, columnNumber: 5 }, __self: this }); }