// booking.jsx — multi-step same-day booking wizard const { useState: useStateBk, useMemo: useMemoBk, useEffect: useEffectBk } = React; const STEP_LABELS = { service: "Service", addresses: "Addresses", time: "Pickup time", airfreight: "Air freight", details: "Details", notify: "Notify", review: "Review" }; const STD_KEYS = ["service", "addresses", "time", "details", "notify", "review"]; const NF_KEYS = ["service", "addresses", "time", "airfreight", "details", "notify", "review"]; function now15() { const d = new Date(); let m = Math.ceil(d.getMinutes() / 15) * 15; let h = d.getHours(); if (m === 60) { m = 0; h = (h + 1) % 24; } return String(h).padStart(2, "0") + ":" + String(m).padStart(2, "0"); } function fmt12(t) { const m = /^(\d{1,2}):(\d{2})/.exec(t || ""); if (!m) return ""; let h = +m[1]; const ap = h < 12 ? "AM" : "PM"; h = (h % 12) || 12; return h + ":" + m[2] + " " + ap; } function serviceTimeWarning(serviceId, time) { if (!time) return null; const hr = parseInt(String(time).slice(0, 2), 10); if (isNaN(hr)) return null; if (serviceId === "direct" && hr >= 16) return "Direct (fastest) service booked after 4 PM may not complete today — consider an earlier ready time or a slower service tier."; if (serviceId === "premium" && hr >= 17) return "Premium service booked this late in the day may roll to the next business day."; return null; } function DraftsResume({ drafts, onResume, onDelete, currency, savedNote }) { return (
Saved bookings {drafts.length}
{savedNote ? "Saved — pick it up any time. It won't be processed until you place it." : "Bookings you saved to finish later. Resume to review and place — they aren't processed until placed."}
{drafts.map(d => (
{(d.from || "—")} → {(d.to || "—")}
Saved {new Date(d.savedAt).toLocaleDateString("en-AU", { day: "numeric", month: "short" })} · {d.deliveryType === "nextflight" ? "Next Flight" : "Standard"}{d.total ? " · " + window.FX.money(d.total, currency) : ""}
))}
); } function Stepper({ steps, step, onJump, maxReached }) { return (
{steps.map((s, i) => { const done = i < step, active = i === step, reachable = i <= maxReached; return ( {i < steps.length - 1 && } ); })}
); } function Booking({ addressBook, currency, rateMult, onPlaced, nav, accounts, activeAccount, seedQuote, drafts = [], onSaveDraft, onDeleteDraft }) { const [step, setStep] = useStateBk(0); const [maxReached, setMaxReached] = useStateBk(0); const [placed, setPlaced] = useStateBk(null); const resumeDraft = (seedQuote && seedQuote.resumeDraft) || null; const src = resumeDraft || seedQuote || {}; const seededStops = (resumeDraft && resumeDraft.stops) ? resumeDraft.stops : (src.from ? [{ ...window.FX.emptyAddr(), suburb: src.from, postcode: src.fromPc || "" }, { ...window.FX.emptyAddr(), suburb: src.to, postcode: src.toPc || "" }] : [window.FX.emptyAddr(), window.FX.emptyAddr()]); const [items, setItems] = useStateBk((src.items && src.items.length) ? src.items : [window.FX.blankItem()]); const [stops, setStops] = useStateBk(seededStops); const [date, setDate] = useStateBk((resumeDraft && resumeDraft.date) || window.FX.todayISO()); const [time, setTime] = useStateBk(resumeDraft ? "" : now15()); const [serviceId, setServiceId] = useStateBk(src.serviceId || "standard"); const [isReturn, setIsReturn] = useStateBk(!!src.isReturn); const [accountId, setAccountId] = useStateBk((resumeDraft && resumeDraft.accountId) || (activeAccount && activeAccount.id) || "acc1"); const [ref1, setRef1] = useStateBk((resumeDraft && resumeDraft.ref1) || ""); const [ref2, setRef2] = useStateBk((resumeDraft && resumeDraft.ref2) || ""); const [notify, setNotify] = useStateBk((resumeDraft && resumeDraft.notify) || { pickupOn: true, pickupSms: true, pickupEmail: true, recipOn: true, recipSms: true, recipEmail: true, returnOn: true, returnSms: true, returnEmail: true, extra: [] }); const [decl, setDecl] = useStateBk((resumeDraft && resumeDraft.decl) || { dg: null, dgType: "", desc: "", length: "", width: "", height: "", weight: "", qty: "1", agree: false, dgPackages: "1", dgNetQty: "", dgEmergency: "", dgShipperDecl: false, noDgAck: false, declaredBy: "" }); const setD = (k, val) => setDecl(prev => ({ ...prev, [k]: val })); const [deliveryType, setDeliveryType] = useStateBk((resumeDraft && resumeDraft.deliveryType) || "standard"); const [resuming, setResuming] = useStateBk(!!resumeDraft); const [savedNote, setSavedNote] = useStateBk(false); const auto = useMemoBk(() => window.FX.autoVehicleForItems(items), [items]); const vehicleId = auto.vehicleId; const itemTot = useMemoBk(() => window.FX.itemTotals(items), [items]); const hasItems = itemTot.kg > 0; const account = (accounts || window.FX.ACCOUNTS).find(a => a.id === accountId) || (accounts || window.FX.ACCOUNTS)[0]; const pickup = stops[0]; const dropoff = stops[stops.length - 1]; const puState = window.FX.suburbState(pickup.suburb); const doState = window.FX.suburbState(dropoff.suburb); const routeInterstate = !!(puState && doState && puState !== doState); const isInterstate = deliveryType === "nextflight"; const stepKeys = isInterstate ? NF_KEYS : STD_KEYS; const steps = stepKeys.map(k => STEP_LABELS[k]); const curKey = stepKeys[Math.min(step, stepKeys.length - 1)]; useEffectBk(() => { if (routeInterstate) setDeliveryType("nextflight"); }, [routeInterstate]); useEffectBk(() => { if (isInterstate && isReturn) setIsReturn(false); }, [isInterstate]); useEffectBk(() => { setStep(s => Math.min(s, stepKeys.length - 1)); setMaxReached(m => Math.min(m, stepKeys.length - 1)); }, [isInterstate]); const setStop = (i, val) => setStops(prev => prev.map((s, idx) => (idx === i ? val : s))); const addStop = () => setStops(prev => [...prev, window.FX.emptyAddr()]); const removeStop = (i) => setStops(prev => prev.filter((_, idx) => idx !== i)); const stopComplete = (s) => !!(s && s.suburb && s.contact); const allStopsComplete = stops.every(stopComplete); const km = useMemoBk(() => { if (!allStopsComplete) return null; let total = 0; for (let i = 0; i < stops.length - 1; i++) { const d = window.FX.distanceKm(stops[i].suburb, stops[i + 1].suburb); if (d == null) return null; total += d; } return total; }, [stops, allStopsComplete]); const q = useMemoBk(() => vehicleId ? window.FX.quote({ vehicleId, km: km || 0, serviceId, isReturn, rateMult }) : null, [vehicleId, km, serviceId, isReturn, rateMult]); function goNext() { const n = Math.min(step + 1, steps.length - 1); setStep(n); setMaxReached(m => Math.max(m, n)); } function goBack() { setStep(s => Math.max(0, s - 1)); } function jump(i) { setStep(i); } function resetForm() { setStep(0); setMaxReached(0); setResuming(false); setItems([window.FX.blankItem()]); setStops([window.FX.emptyAddr(), window.FX.emptyAddr()]); setDate(window.FX.todayISO()); setTime(now15()); setServiceId("standard"); setIsReturn(false); setRef1(""); setRef2(""); setDeliveryType("standard"); setNotify({ pickupOn: true, pickupSms: true, pickupEmail: true, recipOn: true, recipSms: true, recipEmail: true, returnOn: true, returnSms: true, returnEmail: true, extra: [] }); setDecl({ dg: null, dgType: "", desc: "", length: "", width: "", height: "", weight: "", qty: "1", agree: false, dgPackages: "1", dgNetQty: "", dgEmergency: "", dgShipperDecl: false, noDgAck: false, declaredBy: "" }); } function saveForLater() { const draft = { id: resumeDraft ? resumeDraft.id : "D-" + Date.now(), savedAt: new Date().toISOString(), deliveryType, items, stops, date, serviceId, isReturn, accountId, ref1, ref2, notify, decl, from: pickup.suburb, to: dropoff.suburb, total: q ? q.total : 0 }; onSaveDraft && onSaveDraft(draft); resetForm(); setSavedNote(true); window.scrollTo({ top: 0 }); } const dgAssessment = (decl.dg === "yes" && decl.dgType) ? window.FX.dgAssess(decl.dgType, decl.dgPackages || "1") : null; const declReady = decl.dg === "no" ? !!decl.noDgAck : decl.dg === "yes" && !!decl.dgType && !!(decl.dgEmergency || "").trim() && decl.dgShipperDecl && !!dgAssessment && dgAssessment.status === "accept"; const airFreightReady = !!decl.desc.trim() && !!(decl.declaredBy || "").trim() && declReady && decl.agree; const stdDeclReady = decl.dg === "no" ? !!decl.noDgAck : (decl.dg === "yes" && !!decl.dgType && !!decl.dgShipperDecl && !!dgAssessment && dgAssessment.status === "accept"); const canNext = { service: hasItems && !!serviceId, addresses: allStopsComplete, time: !!date && !!time, airfreight: airFreightReady, details: isInterstate ? true : stdDeclReady, notify: true, review: true, }[curKey]; const svcWarn = serviceTimeWarning(serviceId, time); function place() { const effReturn = isInterstate ? false : isReturn; const booking = { tracking: window.FX.genTracking(), vehicleId, serviceId, isReturn: effReturn, pickup, dropoff, stops, date, time, km: km || 0, lineItems: items, notify, account, ref1, ref2, typeId: isInterstate ? "nextflight" : "standard", interstate: isInterstate, audit: [{ at: new Date().toISOString(), by: "Customer portal", action: "created", detail: "Booked online" }], declaration: isInterstate ? { ...decl, puState, doState } : ((decl.dg === "yes" || decl.dg === "no") ? { dg: decl.dg, dgType: decl.dgType, dgPackages: decl.dgPackages, dgShipperDecl: decl.dgShipperDecl, noDgAck: decl.noDgAck } : null), total: q.total, subtotal: q.subtotal, gst: q.gst, oneWay: q.oneWay, returnLeg: q.returnLeg, placedAt: new Date().toISOString(), }; setPlaced(booking); onPlaced && onPlaced(booking); if (resumeDraft && onDeleteDraft) onDeleteDraft(resumeDraft.id); window.scrollTo({ top: 0 }); } const showPrice = curKey === "review"; if (placed) { return { setPlaced(null); setStep(0); setMaxReached(0); setItems([window.FX.blankItem()]); setStops([window.FX.emptyAddr(), window.FX.emptyAddr()]); setTime(new Date().toTimeString().slice(0, 5)); setServiceId("standard"); setIsReturn(false); setRef1(""); setRef2(""); setDecl({ dg: null, dgType: "", desc: "", length: "", width: "", height: "", weight: "", qty: "1", agree: false, dgPackages: "1", dgNetQty: "", dgEmergency: "", dgShipperDecl: false, noDgAck: false, declaredBy: "" }); }} onTrack={() => window.open("Fedex Track.html#t=" + encodeURIComponent(placed.tracking), "_blank")} onHistory={() => nav("history")} />; } return (
{resuming && (
Resuming a saved booking. Step through and confirm each detail — in particular update the ready date & time and check the service level still suits it before placing.
)}
{curKey === "service" && {!resuming && drafts && drafts.length > 0 && nav("book", { resumeDraft: d })} onDelete={onDeleteDraft} currency={currency} savedNote={savedNote} />} } {curKey === "addresses" && } {curKey === "time" && } {curKey === "airfreight" && } {curKey === "details" && } {curKey === "notify" && } {curKey === "review" && }
{step > 0 ? : }
{curKey !== "review" ? : }
); } /* ---------- Step 1: Service (size + tier) ---------- */ function StepService({ items, setItems, auto, itemTot, serviceId, setServiceId, km, isReturn, rateMult, currency, showPrice, deliveryType, setDeliveryType, routeInterstate }) { const vehicleId = auto.vehicleId; const vSel = window.FX.VEHICLES.find(x => x.id === vehicleId); return (
Delivery type
{[ { id: "standard", icon: "truck", title: "Standard courier", sub: "Same-day, door to door by road — within your city." }, { id: "nextflight", icon: "plane", title: "Next Flight", sub: "Interstate air freight — on the next available flight." }, ].map(o => { const active = deliveryType === o.id; return ( ); })}
{deliveryType === "nextflight" && !routeInterstate && (
At the address step, pick a pickup and delivery in different states — e.g. Sydney → Melbourne. You'll complete the air-freight declaration before review.
)}
Items
Vehicle · selected for you
{auto.over ? "Taxi truck (we'll call you)" : (vSel ? vSel.name : "—")} · {itemTot.kg} kg · {itemTot.m3} m³
Service tier
{vehicleId ? "Faster tiers deliver within a tighter window." : "Select a size above, then choose how fast you need it."}
{window.FX.SERVICES.map(s => { const active = s.id === serviceId; const price = vehicleId ? window.FX.quote({ vehicleId, km: km || 0, serviceId: s.id, isReturn, rateMult }).total : null; const code = vehicleId ? window.FX.serviceCode(s.id, vehicleId) : null; return ( ); })}
); } /* ---------- Step 2: Addresses (multi-leg) ---------- */ function StepAddresses({ stops, setStop, addStop, removeStop, addressBook, km, isReturn, setIsReturn, isInterstate }) { return (
{stops.map((s, i) => { const isFirst = i === 0, isLast = i === stops.length - 1; const role = isFirst ? "Pickup from" : (stops.length > 2 ? `Drop-off ${i}` : "Deliver to"); const accent = isFirst ? "var(--brand)" : "var(--accent)"; const removable = i > 0 && stops.length > 2; const legKm = (!isLast && s.suburb && stops[i + 1].suburb) ? window.FX.distanceKm(s.suburb, stops[i + 1].suburb) : null; return ( setStop(i, v)} addressBook={addressBook} role={role} accent={accent} index={i} onRemove={removable ? () => removeStop(i) : undefined} /> {!isLast && (
{legKm != null && {legKm} km}
)} ); })}
{km != null &&
Total distance {km} km across {stops.length - 1} leg{stops.length - 1 > 1 ? "s" : ""}
} {!isInterstate && (
)} ); } /* ---------- Step 3: Time (15-minute intervals, 24 h) ---------- */ function StepTime({ date, setDate, time, setTime, serviceId, resuming, svcWarn }) { const parts = (time && /^\d{2}:\d{2}$/.test(time)) ? time.split(":") : ["", ""]; const h = parts[0], mn = parts[1]; const setH = nh => setTime(nh + ":" + (mn || "00")); const setM = nm => setTime((h || "09") + ":" + nm); const hourOpts = Array.from({ length: 24 }, (_, i) => ({ value: String(i).padStart(2, "0"), label: (((i % 12) || 12) + ":00 " + (i < 12 ? "AM" : "PM")) })); return ( {resuming && (
This is a saved booking — set a fresh ready date and time for when it will actually be collected.
)}
setD("dgType", v)} placeholder="Please select" options={window.FX.DANGEROUS_GOODS} />
Packages *}> setD("dgPackages", v)} mono /> setD("dgNetQty", v)} placeholder="e.g. 2.5 kg / 100 Wh" mono /> 24-hr emergency contact *}> setD("dgEmergency", v)} placeholder="+61 4XX XXX XXX" mono />
{dgAssessment && ( dgAssessment.status === "accept" ? (
Within limited quantities — accepted for air transport. {dgAssessment.reason}
) : (
This can't be booked online. {dgAssessment.reason} Call Customer Service on 1300 131 150 to have this shipment checked for travel.
) )}
)} {decl.dg === "no" && ( )}
Declared by (full name) *} hint="The person making this declaration, as the shipper or their authorised agent."> setD("declaredBy", v)} placeholder="e.g. Priya Sharma" /> {}} readOnly mono />
{(() => { const missing = []; if (!decl.desc.trim()) missing.push("description of goods"); if (decl.dg == null) missing.push("dangerous-goods answer"); if (decl.dg === "no" && !decl.noDgAck) missing.push("no-DG declaration"); if (decl.dg === "yes") { if (!decl.dgType) missing.push("DG type"); if (!(decl.dgEmergency || "").trim()) missing.push("24-hr emergency contact"); if (!decl.dgShipperDecl) missing.push("shipper's declaration"); if (dgAssessment && dgAssessment.status !== "accept") missing.push("Customer Service check — can't continue online"); } if (!(decl.declaredBy || "").trim()) missing.push("declarant name"); if (!decl.agree) missing.push("terms acceptance"); return missing.length ?
Still needed to continue: {missing.join(" · ")}.
: null; })()}
); } /* ---------- Step 4: Return ---------- */ function StepReturn({ isReturn, setIsReturn, pickup, dropoff }) { return (
{[{ v: false, t: "One-way delivery", d: "Driver completes the drop-off and the job is done." }, { v: true, t: "Return trip", d: "After delivering, the driver returns to the pickup point." }].map(o => { const active = isReturn === o.v; return ( ); })}
{isReturn && pickup && dropoff && (
Return route: {dropoff.suburb} back to {pickup.suburb}
)} ); } /* ---------- Step 6: Details (account + references) ---------- */ function StepDetails({ accounts, accountId, setAccountId, ref1, setRef1, ref2, setRef2, decl, setD, dgAssessment, isInterstate }) { const dgBlockedStd = decl && decl.dg === "yes" && dgAssessment && dgAssessment.status === "blocked"; return (
Billing account
{accounts.map(a => { const active = a.id === accountId; return ( ); })}
{!isInterstate && decl && (
Dangerous goods *
Does your shipment contain any dangerous goods?
{[["no", "No"], ["yes", "Yes"]].map(([val, lbl]) => { const on = decl.dg === val; return ( ); })}
{decl.dg === "no" && ( )} {decl.dg === "yes" && (
Type of dangerous goods *}>