address-02-block-ex

1"use client";
2 
3import React, { useState } from "react";
4import { z } from "zod";
5import Address_02 from "@/components/commerce-ui/address-02";
6 
7export const addressFormSchema = z.object({
8  address1: z.string().min(1, "Address is required"),
9  address2: z.string().optional(),
10  city: z.string().min(1, "City is required"),
11  country: z.string().min(1, "Country is required"),
12  email: z.string().email("Invalid email").optional(),
13  firstName: z.string().min(1, "First name is required"),
14  isBillingAddress: z.boolean(),
15  lastName: z.string().min(1, "Last name is required"),
16  phone: z.string().optional(),
17  postalCode: z.string().min(1, "Postal code is required"),
18  state: z.string().min(1, "State is required"),
19});
20 
21export type AddressFormValues = z.infer<typeof addressFormSchema>;
22 
23export type AddressCardProps = {
24  value?: AddressFormValues;
25  onChange?: (value: AddressFormValues) => void;
26  onSubmit?: (value: AddressFormValues) => void;
27  title?: string;
28  editButtonLabel?: string;
29  saveButtonLabel?: string;
30  cancelButtonLabel?: string;
31  disabled?: boolean;
32  className?: string;
33  showBillingBadge?: boolean;
34};
35 
36export default function Address_02_Ex_01() {
37  const [address, setAddress] = useState<AddressFormValues>({
38    address1: "12 Main Street",
39    address2: "Apt 4B",
40    city: "New York",
41    country: "USA",
42    email: "john.doe@example.com",
43    firstName: "John",
44    isBillingAddress: true,
45    lastName: "Doe",
46    phone: "+441234567890",
47    postalCode: "10001",
48    state: "NY",
49  });
50 
51  const handleAddressSubmit = (value: AddressFormValues) => {
52    console.log("Address submitted:", value);
53    setAddress(value); // Update the state to reflect changes in the card
54  };
55 
56  return (
57    <div>
58      <Address_02
59        className=""
60        value={address}
61        onChange={(value) => console.log("Address changed:", value)}
62        onSubmit={handleAddressSubmit}
63      />
64    </div>
65  );
66}