support-ticket-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";
19import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
20 
21const formSchema = z.object({
22  email: z.string().email("Invalid email address").min(1, "Contact Email is required"),
23  category: z.enum(["bug", "feature", "billing", "other"]),
24  priority: z.enum(["low", "medium", "high", "urgent"]),
25  subject: z.string().min(1, "Subject is required"),
26  description: z.string().min(1, "Description is required"),
27});
28 
29type FormValues = z.infer<typeof formSchema>;
30export function SupportTicketForm() {
31  const form = useForm<FormValues>({
32    resolver: zodResolver(formSchema),
33    defaultValues: {
34      email: "",
35      category: "bug",
36      priority: "low",
37      subject: "",
38      description: "",
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>Support Ticket</CardTitle>
51        <CardDescription>Submit a support request or bug report</CardDescription>
52      </CardHeader>
53      <CardContent>
54        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
55          <div className="space-y-2">
56            <Label htmlFor="email">Contact Email</Label>
57            <Input
58              id="email"
59              type="email"
60              placeholder="you@company.com"
61              {...form.register("email")}
62            />
63            {form.formState.errors.email && (
64            <p className="text-sm text-destructive">{form.formState.errors.email.message}</p>
65          )}
66          </div>
67 
68          <div className="space-y-2">
69            <Label htmlFor="category">Issue Category</Label>
70            <Controller
71              control={form.control}
72              name="category"
73              render={({ field }) => (
74// … truncated