feat: Buchungsformular merkt sich Benutzerdaten
- Name, E-Mail und Telefonnummer werden in localStorage gespeichert - Beim nächsten Besuch werden die Felder automatisch ausgefüllt - Verbessert die User Experience für wiederkehrende Buchungen
This commit is contained in:
@@ -14,6 +14,48 @@ export function BookingForm() {
|
||||
const [inspirationPhoto, setInspirationPhoto] = useState<string>("");
|
||||
const [photoPreview, setPhotoPreview] = useState<string>("");
|
||||
const [errorMessage, setErrorMessage] = useState<string>("");
|
||||
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()
|
||||
|
Reference in New Issue
Block a user