address-03-block

1"use client";
2 
3import InputIcon from "@/components/commerce-ui/input-icon";
4import PhoneInput from "@/components/commerce-ui/phone-number-input-basic";
5import { Button } from "@/components/ui/button";
6import {
7  Form,
8  FormControl,
9  FormField,
10  FormItem,
11  FormLabel,
12  FormMessage,
13} from "@/components/ui/form";
14import { zodResolver } from "@hookform/resolvers/zod";
15import { Building, Building2, Globe, House, Mail, User } from "lucide-react";
16import { useForm } from "react-hook-form";
17import { z } from "zod";
18 
19export const addressFormSchema = z.object({
20  address1: z.string().min(1, "Address is required"),
21  address2: z.string().optional(),
22  city: z.string().min(1, "City is required"),
23  country: z.string().min(1, "Country is required"),
24  email: z.string().email("Invalid email").optional(),
25  fullName: z.string().min(5, "Full name is required"),
26  phone: z.string().optional(),
27  postalCode: z.string().min(1, "Postal code is required"),
28  state: z.string().min(1, "State is required"),
29});
30 
31export type AddressFormValues = z.infer<typeof addressFormSchema>;
32 
33export type AddressFormProps = {
34  value?: AddressFormValues;
35  onSubmit?: (value: AddressFormValues) => void;
36  submitLabel?: string;
37  disabled?: boolean;
38  className?: string;
39};
40 
41function Address_03({
42  className = "",
43  disabled = false,
44  onSubmit,
45  submitLabel = "Save Address",
46  value,
47}: AddressFormProps) {
48  const form = useForm<AddressFormValues>({
49    defaultValues: value || {
50      address1: "",
51      address2: "",
52      city: "",
53      country: "",
54      email: "",
55      fullName: "",
56      phone: "",
57      postalCode: "",
58      state: "",
59    },
60    mode: "onChange",
61    resolver: zodResolver(addressFormSchema),
62  });
63 
64  return (
65    <div className="mx-auto max-w-xl rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900">
66      <h1 className="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-100">
67        Shipping Address
68      </h1>
69      <Form {...form}>
70        <form
71          className={className}
72          onSubmit={form.handleSubmit(onSubmit ?? (() => {}))}
73        >
74          <div className="grid gap-6">
75            {/* Full Name */}
76            <div>
77              <FormField
78                control={form.control}
79                name="fullName"
80                render={({ field }) => (
81                  <FormItem>
82                    <FormLabel>Full Name</FormLabel>
83                    <FormControl>
84                      <>
85// … truncated