From 5b4a490ba7ecdf6100b06a1d3f3d49bf1002bf99 Mon Sep 17 00:00:00 2001 From: bender Date: Sat, 7 Mar 2026 13:05:25 +0000 Subject: [PATCH] Add src/app/book-appointment/page.tsx --- src/app/book-appointment/page.tsx | 352 ++++++++++++++++++++++++++++++ 1 file changed, 352 insertions(+) create mode 100644 src/app/book-appointment/page.tsx diff --git a/src/app/book-appointment/page.tsx b/src/app/book-appointment/page.tsx new file mode 100644 index 0000000..71a1488 --- /dev/null +++ b/src/app/book-appointment/page.tsx @@ -0,0 +1,352 @@ +"use client"; +import { useState } from "react"; +import { Calendar, Phone, Mail, User, MessageSquare } from "lucide-react"; +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline"; +import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal"; +import Textarea from "@/components/form/Textarea"; + +interface FormData { + fullName: string; + email: string; + phone: string; + serviceType: string; + preferredDate: string; + preferredTime: string; + message: string; +} + +interface FormErrors { + [key: string]: string; +} + +export default function BookAppointmentPage() { + const [formData, setFormData] = useState({ + fullName: "", email: "", phone: "", serviceType: "", preferredDate: "", preferredTime: "", message: ""}); + + const [errors, setErrors] = useState({}); + const [submitted, setSubmitted] = useState(false); + + const validateForm = (): boolean => { + const newErrors: FormErrors = {}; + + if (!formData.fullName.trim()) { + newErrors.fullName = "Full name is required"; + } + + if (!formData.email.trim()) { + newErrors.email = "Email is required"; + } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) { + newErrors.email = "Please enter a valid email address"; + } + + if (!formData.phone.trim()) { + newErrors.phone = "Phone number is required"; + } else if (!/^[\d\s\-\+\(\)]+$/.test(formData.phone) || formData.phone.replace(/\D/g, "").length < 9) { + newErrors.phone = "Please enter a valid phone number"; + } + + if (!formData.serviceType) { + newErrors.serviceType = "Please select a service"; + } + + if (!formData.preferredDate) { + newErrors.preferredDate = "Please select a preferred date"; + } + + if (!formData.preferredTime) { + newErrors.preferredTime = "Please select a preferred time"; + } + + setErrors(newErrors); + return Object.keys(newErrors).length === 0; + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + if (validateForm()) { + setSubmitted(true); + setFormData({ + fullName: "", email: "", phone: "", serviceType: "", preferredDate: "", preferredTime: "", message: ""}); + + setTimeout(() => { + setSubmitted(false); + }, 5000); + } + }; + + const handleChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData((prev) => ({ + ...prev, + [name]: value, + })); + if (errors[name]) { + setErrors((prev) => { + const newErrors = { ...prev }; + delete newErrors[name]; + return newErrors; + }); + } + }; + + const handleTextareaChange = (value: string) => { + setFormData((prev) => ({ + ...prev, + message: value, + })); + }; + + return ( + + + +
+
+
+

Book Your Appointment

+

Schedule your visit to Rehoboth Dental Clinic

+
+ + {submitted && ( +
+

✓ Your appointment request has been submitted successfully! We'll contact you shortly to confirm your booking.

+
+ )} + +
+
+ {/* Full Name */} +
+ + + {errors.fullName &&

{errors.fullName}

} +
+ + {/* Email */} +
+ + + {errors.email &&

{errors.email}

} +
+ + {/* Phone */} +
+ + + {errors.phone &&

{errors.phone}

} +
+ + {/* Service Type */} +
+ + + {errors.serviceType &&

{errors.serviceType}

} +
+ + {/* Preferred Date */} +
+ + + {errors.preferredDate &&

{errors.preferredDate}

} +
+ + {/* Preferred Time */} +
+ + + {errors.preferredTime &&

{errors.preferredTime}

} +
+
+ + {/* Message */} +
+ +