diff --git a/src/client/components/booking-form.tsx b/src/client/components/booking-form.tsx index aab9d10..0759933 100644 --- a/src/client/components/booking-form.tsx +++ b/src/client/components/booking-form.tsx @@ -14,6 +14,48 @@ export function BookingForm() { const [inspirationPhoto, setInspirationPhoto] = useState(""); const [photoPreview, setPhotoPreview] = useState(""); const [errorMessage, setErrorMessage] = useState(""); + const [isInitialized, setIsInitialized] = useState(false); + + // Load saved customer data from localStorage on mount + useEffect(() => { + const savedName = localStorage.getItem("bookingForm_customerName"); + const savedEmail = localStorage.getItem("bookingForm_customerEmail"); + const savedPhone = localStorage.getItem("bookingForm_customerPhone"); + + if (savedName) setCustomerName(savedName); + if (savedEmail) setCustomerEmail(savedEmail); + if (savedPhone) setCustomerPhone(savedPhone); + + setIsInitialized(true); + }, []); + + // Save customer data to localStorage when it changes (after initial load) + useEffect(() => { + if (!isInitialized) return; + if (customerName) { + localStorage.setItem("bookingForm_customerName", customerName); + } else { + localStorage.removeItem("bookingForm_customerName"); + } + }, [customerName, isInitialized]); + + useEffect(() => { + if (!isInitialized) return; + if (customerEmail) { + localStorage.setItem("bookingForm_customerEmail", customerEmail); + } else { + localStorage.removeItem("bookingForm_customerEmail"); + } + }, [customerEmail, isInitialized]); + + useEffect(() => { + if (!isInitialized) return; + if (customerPhone) { + localStorage.setItem("bookingForm_customerPhone", customerPhone); + } else { + localStorage.removeItem("bookingForm_customerPhone"); + } + }, [customerPhone, isInitialized]); const { data: treatments } = useQuery( queryClient.treatments.live.list.experimental_liveOptions()