Auth Phone Verify

1"use client";
2 
3import {
4  CheckCircle2,
5  Loader2,
6  MessageSquare,
7  Phone,
8  RefreshCw,
9  XCircle,
10} from "lucide-react";
11import { useCallback, useEffect, useState } from "react";
12import { cn } from "@/lib/utils";
13import { Button } from "@/registry/new-york/ui/button";
14import {
15  Card,
16  CardContent,
17  CardDescription,
18  CardHeader,
19  CardTitle,
20} from "@/registry/new-york/ui/card";
21import {
22  Field,
23  FieldContent,
24  FieldError,
25  FieldLabel,
26} from "@/registry/new-york/ui/field";
27import {
28  InputGroup,
29  InputGroupAddon,
30  InputGroupInput,
31} from "@/registry/new-york/ui/input-group";
32import {
33  InputOTP,
34  InputOTPGroup,
35  InputOTPSlot,
36} from "@/registry/new-york/ui/input-otp";
37import {
38  Select,
39  SelectContent,
40  SelectItem,
41  SelectTrigger,
42  SelectValue,
43} from "@/registry/new-york/ui/select";
44import { Separator } from "@/registry/new-york/ui/separator";
45 
46export interface Country {
47  code: string;
48  name: string;
49  dialCode: string;
50  flag: string;
51}
52 
53export type VerificationStatus =
54  | "pending"
55  | "sent"
56  | "verifying"
57  | "verified"
58  | "expired"
59  | "error";
60 
61export interface AuthPhoneVerifyProps {
62  phoneNumber?: string;
63  countryCode?: string;
64  onPhoneSubmit?: (phoneNumber: string, countryCode: string) => void;
65  onOTPSubmit?: (code: string) => void;
66  onResend?: () => void;
67  onChangePhone?: () => void;
68  className?: string;
69  isLoading?: boolean;
70  status?: VerificationStatus;
71  resendCooldown?: number;
72  errors?: {
73    phone?: string;
74    code?: string;
75    general?: string;
76  };
77  autoSubmit?: boolean;
78  countries?: Country[];
79}
80 
81const DEFAULT_COUNTRIES: Country[] = [
82  { code: "US", name: "United States", dialCode: "+1", flag: "🇺🇸" },
83  { code: "GB", name: "United Kingdom", dialCode: "+44", flag: "🇬🇧" },
84  { code: "CA", name: "Canada", dialCode: "+1", flag: "🇨🇦" },
85  { code: "AU", name: "Australia", dialCode: "+61", flag: "🇦🇺" },
86  { code: "DE", name: "Germany", dialCode: "+49", flag: "🇩🇪" },
87  { code: "FR", name: "France", dialCode: "+33", flag: "🇫🇷" },
88  { code: "IN", name: "India", dialCode: "+91", flag: "🇮🇳" },
89  { code: "JP", name: "Japan", dialCode: "+81", flag: "🇯🇵" },
90  { code: "CN", name: "China", dialCode: "+86", flag: "🇨🇳" },
91  { code: "BR", name: "Brazil", dialCode: "+55", flag: "🇧🇷" },
92];
93 
94function formatPhoneNumber(value: string, countryCode: string): string {
95  const digits = value.replace(/\D/g, "");
96  if (countryCode === "US" || countryCode === "CA") {
97// … truncated