// pages/verification-complete.tsx
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
export default function VerificationComplete() {
const router = useRouter();
const { verificationSessionId, status } = router.query;
const [message, setMessage] = useState('Processing...');
useEffect(() => {
if (!router.isReady) return;
async function handleResult() {
// Optionally verify the result with your backend
await fetch('/api/verify-session', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
sessionId: verificationSessionId,
status
})
});
// Redirect based on status
switch (status) {
case 'Approved':
setMessage('Verification successful! Redirecting...');
setTimeout(() => router.push('/dashboard'), 2000);
break;
case 'Declined':
setMessage('Verification was not successful.');
setTimeout(() => router.push('/verification-failed'), 2000);
break;
case 'In Review':
setMessage('Your verification is under review.');
setTimeout(() => router.push('/verification-pending'), 2000);
break;
default:
setMessage('Unknown status. Please contact support.');
}
}
handleResult();
}, [router.isReady, verificationSessionId, status]);
return (
<div className="flex flex-col items-center justify-center min-h-screen">
<div className="animate-spin w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full mb-4" />
<p className="text-lg">{message}</p>
</div>
);
}