ecommerce-checkout-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 { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
12 
13const formSchema = z.object({
14  fullName: z.string().min(2, "Full name is required"),
15  email: z.string().email("Invalid email"),
16  address: z.string().min(5, "Address is required"),
17  city: z.string().min(2, "City is required"),
18  zipCode: z.string().min(4, "ZIP code is required"),
19  paymentMethod: z.enum(["credit_card", "paypal", "apple_pay"]),
20});
21 
22type FormValues = z.infer<typeof formSchema>;
23 
24export function EcommerceCheckoutForm() {
25  const form = useForm<FormValues>({
26    resolver: zodResolver(formSchema),
27    defaultValues: {
28      fullName: "",
29      email: "",
30      address: "",
31      city: "",
32      zipCode: "",
33      paymentMethod: "credit_card",
34    },
35  });
36 
37  const onSubmit = async (data: FormValues) => {
38    console.log("Form submitted:", data);
39    toast.success("Form submitted successfully!");
40  };
41 
42  return (
43    <Card className="w-full max-w-md mx-auto">
44      <CardHeader>
45        <CardTitle>Checkout</CardTitle>
46        <CardDescription>Checkout form with shipping and payment details</CardDescription>
47      </CardHeader>
48      <CardContent>
49        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
50          <div className="space-y-2">
51            <Label htmlFor="fullName">Full Name</Label>
52            <Input
53              id="fullName"
54              type="text"
55              placeholder="John Doe"
56              {...form.register("fullName")}
57            />
58            {form.formState.errors.fullName && (
59            <p className="text-sm text-destructive">{form.formState.errors.fullName.message}</p>
60          )}
61          </div>
62 
63          <div className="space-y-2">
64            <Label htmlFor="email">Email Address</Label>
65            <Input
66              id="email"
67              type="email"
68              placeholder="john@example.com"
69              {...form.register("email")}
70            />
71            {form.formState.errors.email && (
72// … truncated