(null);
+
+ useEffect(() => {
+ try {
+ const savedBookings = window.localStorage.getItem(bookingStorageKey);
+ if (savedBookings) {
+ setBookings(JSON.parse(savedBookings));
+ }
+ } catch (error) {
+ console.error('Failed to load Bumper Buddies bookings from local storage:', error);
+ }
+ }, []);
+
+ const estimate = useMemo(() => {
+ const selectedServices = serviceOptions.filter((service) => form.services.includes(service.id));
+ const serviceTotal = selectedServices.reduce((total, service) => total + service.price, 0);
+ const mobileCallout = form.serviceLocationType.includes('Mobile') ? 35 : 0;
+
+ return Math.round(serviceTotal * getVehicleMultiplier(form.vehicleType) + mobileCallout);
+ }, [form.serviceLocationType, form.services, form.vehicleType]);
+
+ const selectedBooking =
+ bookings.find((booking) => booking.bookingNumber === selectedBookingNumber) || bookings[0] || null;
+
+ const updateForm = (field: keyof BookingForm, value: string) => {
+ setValidationMessage('');
+ setForm((current) => ({ ...current, [field]: value }));
+ };
+
+ const toggleService = (serviceId: string) => {
+ setValidationMessage('');
+ setForm((current) => {
+ const nextServices = current.services.includes(serviceId)
+ ? current.services.filter((id) => id !== serviceId)
+ : [...current.services, serviceId];
+
+ return { ...current, services: nextServices };
+ });
+ };
+
+ const validateStep = () => {
+ if (activeStep === 1 && (!form.date || !form.time)) {
+ return 'Choose an available date and time to continue.';
+ }
+
+ if (
+ activeStep === 2 &&
+ (!form.make || !form.model || !form.year || !form.registration || !form.vehicleType)
+ ) {
+ return 'Add your vehicle make, model, year, registration and type.';
+ }
+
+ if (activeStep === 3 && form.services.length === 0) {
+ return 'Select at least one service.';
+ }
+
+ if (activeStep === 5 && (!form.fullName || !form.email || !form.phone)) {
+ return 'Add your name, email and phone number.';
+ }
+
+ if (
+ activeStep === 6 &&
+ form.serviceLocationType.includes('Mobile') &&
+ (!form.streetAddress || !form.city || !form.postcode)
+ ) {
+ return 'Add your service address, city and postcode.';
+ }
+
+ return '';
+ };
+
+ const goToNextStep = () => {
+ const error = validateStep();
+ if (error) {
+ setValidationMessage(error);
+ return;
+ }
+
+ setValidationMessage('');
+ setActiveStep((step) => Math.min(step + 1, 8));
+ };
+
+ const confirmBooking = () => {
+ const bookingNumber = `BB-${new Date().getFullYear()}-${Math.floor(1000 + Math.random() * 9000)}`;
+ const booking: BookingRecord = {
+ ...form,
+ bookingNumber,
+ estimate,
+ createdAt: new Date().toISOString(),
+ status: 'Pending confirmation',
};
+ const nextBookings = [booking, ...bookings];
+
+ setBookings(nextBookings);
+ setConfirmedBooking(booking);
+ setSelectedBookingNumber(booking.bookingNumber);
+ setForm(initialForm);
+ setActiveStep(1);
+
+ try {
+ window.localStorage.setItem(bookingStorageKey, JSON.stringify(nextBookings));
+ } catch (error) {
+ console.error('Failed to save Bumper Buddies booking to local storage:', error);
+ }
+ };
+
+ const inputClass =
+ 'w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm text-zinc-950 shadow-sm outline-none transition focus:border-red-600 focus:ring-4 focus:ring-red-100';
+ const labelClass = 'mb-2 block text-sm font-semibold text-zinc-800';
+
+ const renderBookingStep = () => {
+ if (activeStep === 1) {
+ return (
+
+
+
+
+ );
+ }
+
+ if (activeStep === 2) {
+ return (
+
+ {[
+ ['make', 'Vehicle Make', 'Toyota'],
+ ['model', 'Vehicle Model', 'Hilux'],
+ ['year', 'Year', '2021'],
+ ['registration', 'Registration Number', 'ABC123'],
+ ].map(([field, label, placeholder]) => (
+
+ ))}
+
+
+ );
+ }
+
+ if (activeStep === 3) {
+ return (
+
+ {serviceOptions.map((service) => {
+ const isSelected = form.services.includes(service.id);
+ return (
+
+ );
+ })}
+
+ );
+ }
+
+ if (activeStep === 4) {
+ return (
+
+
Estimated Total
+
{formatCurrency(estimate)}
+
GST included. Final price confirmed after inspection if required.
+
+ Vehicle: {form.vehicleType}
+ Services: {form.services.length}
+
+ {form.serviceLocationType.includes('Mobile') ? 'Mobile call-out included' : 'Workshop visit'}
+
+
+
+
+
+
+
+