\n {[1, 2, 3, 4].map((stepNum) => (\n \n

= stepNum \n ? 'bg-blue-600 text-white' \n : 'bg-gray-200 text-gray-600'\n }`}>\n {stepNum}\n

\n {stepNum < 4 && (\n

stepNum ? 'bg-blue-600' : 'bg-gray-200'\n }`} />\n )}\n \n ))}\n

\n );\n\n const renderStep1 = () => (\n

Select Service

\n {services.map((service) => (\n handleInputChange('serviceId', service.id)}\n className={`service-option p-6 rounded-lg cursor-pointer ${\n formData.serviceId === service.id ? 'selected' : ''\n }`}\n >\n

\n {service.name === 'Tyre Replacement' ? '🛞' : \n service.name === 'Wheel Alignment' ? '⚖️' : '🛑'}\n

{service.name}

{service.description}

£{service.price}

{service.duration} minutes

\n ))}\n

\n );\n\n const renderStep2 = () => (\n

Choose Branch

\n {branches.map((branch) => (\n handleInputChange('branchId', branch.id)}\n className={`service-option p-6 rounded-lg cursor-pointer ${\n formData.branchId === branch.id ? 'selected' : ''\n }`}\n >\n

{branch.name}

{branch.address}

📞 {branch.phone}

\n ))}\n

\n \n );\n\n const renderStep3 = () => {\n const today = new Date().toISOString().split('T')[0];\n const maxDate = new Date();\n maxDate.setDate(maxDate.getDate() + 30);\n const maxDateStr = maxDate.toISOString().split('T')[0];\n\n return (\n

Select Date & Time

\n \n

\n \n Preferred Date\n \n handleInputChange('date', e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n\n {formData.date && (\n

Available Time Slots

\n {loading ? (\n

\n ) : availableSlots.length > 0 ? (\n

\n {availableSlots.map((slot) => {\n const slotKey = `${slot.startTime}-${slot.endTime}`;\n return (\n handleInputChange('timeSlot', slotKey)}\n className={`time-slot p-3 rounded-md border text-sm font-medium ${\n formData.timeSlot === slotKey ? 'selected' : 'border-gray-300 hover:border-blue-500'\n }`}\n >\n {slot.startTime}\n \n );\n })}\n

\n ) : (\n

\n No available slots for this date. Please select another date.\n

\n )}\n

\n );\n };\n\n const renderStep4 = () => (\n

Your Details

\n \n

\n \n Full Name *\n \n handleInputChange('customerName', e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"John Smith\"\n />\n

\n\n

\n \n Phone Number *\n \n handleInputChange('customerPhone', e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"07123 456789\"\n />\n

\n\n

\n \n Email Address\n \n handleInputChange('customerEmail', e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"john.smith@email.com\"\n />\n

\n\n

\n \n Vehicle Make *\n \n handleInputChange('vehicleMake', e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"Ford\"\n />\n

\n\n

\n \n Vehicle Model *\n \n handleInputChange('vehicleModel', e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"Focus\"\n />\n

\n\n

\n \n Vehicle Year *\n \n handleInputChange('vehicleYear', parseInt(e.target.value))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n\n

\n \n Registration Number *\n \n handleInputChange('vehicleReg', e.target.value.toUpperCase())}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"AB12 CDE\"\n />\n

\n );\n\n const renderStep5 = () => (\n

✅

Booking Confirmed!

Booking Summary

\n Service:\n {services.find(s => s.id === formData.serviceId)?.name}\n

\n Date:\n {formData.date}\n

\n Time:\n {formData.timeSlot}\n

\n Branch:\n {branches.find(b => b.id === formData.branchId)?.name}\n

\n Vehicle:\n {formData.vehicleMake} {formData.vehicleModel}\n

\n You will receive confirmation via SMS and email shortly.\n We'll also send you a reminder 24 hours before your appointment.\n

\n {\n setStep(1);\n setFormData({\n serviceId: '',\n branchId: '',\n date: '',\n timeSlot: '',\n customerName: '',\n customerPhone: '',\n customerEmail: '',\n vehicleMake: '',\n vehicleModel: '',\n vehicleYear: new Date().getFullYear(),\n vehicleReg: ''\n });\n }}\n className=\"bg-blue-600 text-white px-6 py-3 rounded-md hover:bg-blue-700 transition-colors\"\n >\n Book Another Service\n \n

\n );\n\n const renderNavigationButtons = () => {\n if (step === 5) return null;\n\n return (\n

\n \n Previous\n \n\n {step < 4 ? (\n \n Next\n \n ) : (\n \n {loading &&

}\n Confirm Booking\n \n )}\n

\n );\n };\n\n return (\n

\n {step < 5 && renderStepIndicator()}\n \n {step === 1 && renderStep1()}\n {step === 2 && renderStep2()}\n {step === 3 && renderStep3()}\n {step === 4 && renderStep4()}\n {step === 5 && renderStep5()}\n \n {renderNavigationButtons()}\n

\n );\n};\n\nexport default BookingForm;","deleted","label",[171,172,154],"frontend","components","permalink","https://www.val.town/x/Mastermind/Protyre_SmartServiceScheduler/code/frontend/components/BookingForm.tsx","extension","actionData","errors"]