import { BreadcrumbItem } from '@/types'; import { Head, useForm } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import SettingsLayout from '@/layouts/settings/layout'; import HeadingSmall from '@/components/heading-small'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'; import { Shield, Clock, ChevronLeft, RefreshCw } from 'lucide-react'; import { Link } from '@inertiajs/react'; import InputError from '@/components/input-error'; import { useEffect, useState } from 'react'; import { router } from '@inertiajs/react'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Settings', href: '/settings/profile', }, { title: 'KYC Verification', href: '/settings/kyc', }, { title: 'Verify Phone', href: '/settings/kyc/verify-phone', }, ]; interface Props { phone_number: string; attempts_remaining: number; code_expires_at: string; } export default function VerifyPhone({ phone_number, attempts_remaining, code_expires_at }: Props) { const { data, setData, post, processing, errors } = useForm({ code: '', }); const [timeRemaining, setTimeRemaining] = useState(0); const [resendCooldown, setResendCooldown] = useState(0); useEffect(() => { const expiryTime = new Date(code_expires_at).getTime(); const updateTimer = () => { const now = new Date().getTime(); const diff = Math.floor((expiryTime - now) / 1000); setTimeRemaining(Math.max(0, diff)); }; updateTimer(); const interval = setInterval(updateTimer, 1000); return () => clearInterval(interval); }, [code_expires_at]); useEffect(() => { if (resendCooldown > 0) { const timer = setTimeout(() => setResendCooldown(resendCooldown - 1), 1000); return () => clearTimeout(timer); } }, [resendCooldown]); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); post('/settings/kyc/verify-phone'); }; const handleResend = () => { setResendCooldown(60); router.post('/settings/kyc/resend-code'); }; const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60); const secs = seconds % 60; return `${mins}:${secs.toString().padStart(2, '0')}`; }; const maskPhoneNumber = (phone: string) => { if (phone.length <= 4) return phone; return phone.slice(0, -4).replace(/./g, '•') + phone.slice(-4); }; return (
{/* Header */}
{/* Timer Alert */} {timeRemaining > 0 ? ( Code Expires In
{formatTime(timeRemaining)}
) : ( Code Expired Your verification code has expired. Please request a new code. )} {/* Attempts Warning */} {attempts_remaining <= 2 && attempts_remaining > 0 && ( ⚠️ Only {attempts_remaining} {attempts_remaining === 1 ? 'attempt' : 'attempts'} remaining )} {/* Verification Form */}
Enter Verification Code We sent a 6-digit code to {maskPhoneNumber(phone_number)}
{ const value = e.target.value.replace(/\D/g, ''); setData('code', value); }} placeholder="000000" className="text-center text-2xl font-bold tracking-widest" disabled={processing || timeRemaining === 0} autoFocus required />
{/* Resend Code */}

Didn't receive the code?

Check your spam folder or request a new code

{/* Help Text */}

Troubleshooting

  • • Make sure you entered your phone number correctly
  • • Check if SMS is being blocked by your carrier
  • • Wait a few moments for the message to arrive
  • • Try resending the code if it doesn't arrive
); }