Auth OTP Verify

1"use client";
2 
3import { Loader2, Mail, MessageSquare, Phone, RefreshCw } from "lucide-react";
4import { useCallback, useEffect, useState } from "react";
5import { cn } from "@/lib/utils";
6import { Button } from "@/registry/new-york/ui/button";
7import {
8  Card,
9  CardContent,
10  CardDescription,
11  CardHeader,
12  CardTitle,
13} from "@/registry/new-york/ui/card";
14import {
15  Field,
16  FieldContent,
17  FieldDescription,
18  FieldError,
19  FieldLabel,
20} from "@/registry/new-york/ui/field";
21import {
22  InputOTP,
23  InputOTPGroup,
24  InputOTPSlot,
25} from "@/registry/new-york/ui/input-otp";
26import {
27  Select,
28  SelectContent,
29  SelectItem,
30  SelectTrigger,
31  SelectValue,
32} from "@/registry/new-york/ui/select";
33 
34export type OTPDeliveryMethod = "email" | "sms" | "whatsapp";
35 
36export interface AuthOTPVerifyProps {
37  deliveryMethod?: OTPDeliveryMethod;
38  deliveryAddress?: string;
39  onDeliveryMethodChange?: (method: OTPDeliveryMethod) => void;
40  onSubmit?: (code: string) => void;
41  onResend?: (method: OTPDeliveryMethod) => void;
42  className?: string;
43  isLoading?: boolean;
44  resendCooldown?: number;
45  errors?: {
46    code?: string;
47    general?: string;
48  };
49  autoSubmit?: boolean;
50  codeLength?: number;
51  availableMethods?: OTPDeliveryMethod[];
52}
53 
54const DELIVERY_METHOD_CONFIG: Record<
55  OTPDeliveryMethod,
56  { label: string; icon: React.ComponentType<{ className?: string }> }
57> = {
58  email: {
59    label: "Email",
60    icon: Mail,
61  },
62  sms: {
63    label: "SMS",
64    icon: MessageSquare,
65  },
66  whatsapp: {
67    label: "WhatsApp",
68    icon: Phone,
69  },
70};
71 
72function formatDeliveryAddress(
73  address: string | undefined,
74  method: OTPDeliveryMethod
75): string {
76  if (!address) return "";
77  if (method === "email") return address;
78  if (address.length > 4) {
79    const visible = address.slice(-4);
80    const masked = "*".repeat(address.length - 4);
81    return `${masked}${visible}`;
82  }
83  return address;
84}
85 
86interface ErrorAlertProps {
87  message: string;
88}
89 
90function ErrorAlert({ message }: ErrorAlertProps) {
91  return (
92    <div
93      aria-live="polite"
94      className="rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-destructive text-sm"
95      role="alert"
96    >
97      {message}
98    </div>
99  );
100}
101 
102interface DeliveryMethodSelectProps {
103  availableMethods: OTPDeliveryMethod[];
104  deliveryMethod: OTPDeliveryMethod;
105  onDeliveryMethodChange: (method: OTPDeliveryMethod) => void;
106}
107 
108function DeliveryMethodSelect({
109  availableMethods,
110  deliveryMethod,
111  onDeliveryMethodChange,
112// … truncated