booking-request-form

1"use client";
2 
3import { useForm, Controller } from "react-hook-form";
4import { zodResolver } from "@hookform/resolvers/zod";
5import * as z from "zod";
6import { Button } from "@/components/ui/button";
7import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
8import { Input } from "@/components/ui/input";
9import { Label } from "@/components/ui/label";
10import { toast } from "sonner";
11import { Textarea } from "@/components/ui/textarea";
12import {
13  Select,
14  SelectContent,
15  SelectItem,
16  SelectTrigger,
17  SelectValue,
18} from "@/components/ui/select";
19 
20const formSchema = z.object({
21  name: z.string().min(2, "Name is required"),
22  email: z.string().email("Invalid email"),
23  date: z.string().min(1, "Date is required"),
24  service: z.enum(["consultation", "demo", "support"]),
25  notes: z.string().optional(),
26});
27 
28type FormValues = z.infer<typeof formSchema>;
29 
30export function BookingRequestForm() {
31  const form = useForm<FormValues>({
32    resolver: zodResolver(formSchema),
33    defaultValues: {
34      name: "",
35      email: "",
36      date: "",
37      service: "consultation",
38      notes: "",
39    },
40  });
41 
42  const onSubmit = async (data: FormValues) => {
43    console.log("Form submitted:", data);
44    toast.success("Form submitted successfully!");
45  };
46 
47  return (
48    <Card className="w-full max-w-md mx-auto">
49      <CardHeader>
50        <CardTitle>Booking Request</CardTitle>
51        <CardDescription>Request a booking or appointment</CardDescription>
52      </CardHeader>
53      <CardContent>
54        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
55          <div className="space-y-2">
56            <Label htmlFor="name">Your Name</Label>
57            <Input
58              id="name"
59              type="text"
60              placeholder="John Doe"
61              {...form.register("name")}
62            />
63            {form.formState.errors.name && (
64            <p className="text-sm text-destructive">{form.formState.errors.name.message}</p>
65          )}
66          </div>
67 
68          <div className="space-y-2">
69            <Label htmlFor="email">Email Address</Label>
70            <Input
71              id="email"
72              type="email"
73              placeholder="john@example.com"
74              {...form.register("email")}
75            />
76            {form.formState.errors.email && (
77            <p className="text-sm text-destructive">{form.formState.errors.email.message}</p>
78          )}
79          </div>
80 
81// … truncated