phone-number-input-basic-ex-01

1"use client";
2 
3import PhoneNumberInput_Basic from "@/components/commerce-ui/phone-number-input-basic";
4import { Button } from "@/components/ui/button";
5import {
6  Form,
7  FormControl,
8  FormDescription,
9  FormField,
10  FormItem,
11  FormLabel,
12  FormMessage,
13} from "@/components/ui/form";
14import { zodResolver } from "@hookform/resolvers/zod";
15import { useForm } from "react-hook-form";
16import { z } from "zod";
17 
18const phoneNumberSchema = z.object({
19  phoneNumber: z.string().min(1, "Phone number is required"),
20});
21export default function PhoneNumberInput_Basic_Ex_01() {
22  const form = useForm<z.infer<typeof phoneNumberSchema>>({
23    defaultValues: {
24      phoneNumber: "+4407782700357",
25    },
26    resolver: zodResolver(phoneNumberSchema),
27  });
28 
29  function onSubmit(data: z.infer<typeof phoneNumberSchema>) {
30    console.log("Submitted phone number:", data.phoneNumber);
31    window.alert(`Submitted phone number: ${data.phoneNumber}`);
32  }
33 
34  return (
35    <Form {...form}>
36      <form
37        onSubmit={form.handleSubmit(onSubmit)}
38        className="gap-g flex max-w-md flex-col items-center gap-4"
39      >
40        <FormField
41          control={form.control}
42          name="phoneNumber"
43          render={({ field }) => (
44            <FormItem>
45              <FormLabel>Phone Number</FormLabel>
46              <FormControl>
47                <PhoneNumberInput_Basic
48                  defaultCountry="GB"
49                  value={field.value}
50                  onChange={field.onChange}
51                />
52              </FormControl>
53              <FormDescription>
54                Enter your phone number with country code. For example,
55                +4407782700357 for UK.
56              </FormDescription>
57              <FormMessage />
58            </FormItem>
59          )}
60        />
61        <Button type="submit" variant="secondary" className="w-full">
62          Submit
63        </Button>
64      </form>
65    </Form>
66  );
67}