address-01-block

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