diff --git a/src/components/BookingForm.tsx b/src/components/BookingForm.tsx index d27283e..d6cfc08 100644 --- a/src/components/BookingForm.tsx +++ b/src/components/BookingForm.tsx @@ -4,6 +4,12 @@ import React, { useState, useEffect } from 'react'; export default function BookingForm() { const [submitted, setSubmitted] = useState(false); + const [attachedDesign, setAttachedDesign] = useState<{ + eventType: string; + vision: string; + services: string[]; + } | null>(null); + const [formData, setFormData] = useState({ name: '', email: '', @@ -19,10 +25,34 @@ export default function BookingForm() { useEffect(() => { const handlePrefill = (e: any) => { if (e.detail) { + const detail = e.detail; + setAttachedDesign(detail); + + // Map event type string to dropdown value + let mappedType = 'Birthday Party'; + const lowerType = (detail.eventType || '').toLowerCase(); + if (lowerType.includes('wedding')) mappedType = 'Wedding / Engagement'; + else if (lowerType.includes('baby')) mappedType = 'Baby Shower'; + else if (lowerType.includes('graduation')) mappedType = 'Graduation'; + else if (lowerType.includes('corporate') || lowerType.includes('gala')) mappedType = 'Corporate / Grand Opening'; + else if (lowerType.includes('themed') || lowerType.includes('1st')) mappedType = 'Holiday / Themed Party'; + + // Auto-check corresponding checkboxes + const mappedServices: string[] = []; + if (detail.vision) { + if (detail.vision.includes('Balloon')) mappedServices.push('Organic Balloon Garland'); + if (detail.vision.includes('Arch') || detail.vision.includes('Panel')) mappedServices.push('Custom Arched Backdrops'); + if (detail.vision.includes('Floral') || detail.vision.includes('Botanical')) mappedServices.push('Faux Florals & Greenery'); + if (detail.vision.includes('Mosaic') || detail.vision.includes('Letter')) mappedServices.push('Mosaic Letters / Numbers'); + if (detail.vision.includes('Drink') || detail.vision.includes('Station')) mappedServices.push('Beverage / Dessert Station'); + if (detail.vision.includes('Gold') || detail.vision.includes('Styling')) mappedServices.push('Full Event Styling Package'); + } + setFormData(prev => ({ ...prev, - eventType: e.detail.eventType || prev.eventType, - vision: e.detail.vision ? (prev.vision ? `${e.detail.vision}\n\nAdditional Notes:\n${prev.vision}` : e.detail.vision) : prev.vision, + eventType: mappedType, + services: Array.from(new Set([...prev.services, ...mappedServices])), + vision: detail.vision || prev.vision, })); } }; @@ -77,7 +107,7 @@ export default function BookingForm() { padding: '10px 20px', textAlign: 'center', maxWidth: '680px', - margin: '0 auto 30px', + margin: '0 auto 24px', display: 'flex', alignItems: 'center', justifyContent: 'center', @@ -89,6 +119,47 @@ export default function BookingForm() { 2026/2027 Calendar Open: Weekend dates book 4–8 weeks in advance. Reserve early to lock in your date! + {/* Dynamic Studio Design Specification Attachment Card */} + {attachedDesign && ( +
+
+
+ ✨ Custom Design Spec Attached from Studio +
+
+ {attachedDesign.eventType} +
+
+ Your custom palette and decor choices have been automatically loaded into your quote request below. +
+
+ + Edit in Studio ↗ + +
+ )} + {/* Form Box */}