You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.8 KiB
86 lines
2.8 KiB
import { Alert, AlertDescription } from '@/components/ui/alert'
|
|
import { Button } from '@/components/ui/button'
|
|
import { ApiEndpoints } from '@/config/api'
|
|
import httpBrowserClient from '@/lib/httpBrowserClient'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import Link from 'next/link'
|
|
import { useMemo } from 'react'
|
|
import { Mail, ShieldAlert } from 'lucide-react'
|
|
|
|
export default function VerifyEmailAlert() {
|
|
const {
|
|
data: userData,
|
|
isLoading: isLoadingUserData,
|
|
error: userDataError,
|
|
} = useQuery({
|
|
queryKey: ['whoAmI'],
|
|
queryFn: () =>
|
|
httpBrowserClient
|
|
.get(ApiEndpoints.auth.whoAmI())
|
|
.then((res) => res.data.data),
|
|
})
|
|
|
|
const ctaMessages = useMemo(
|
|
() => [
|
|
'Hey there! Verify your email to keep your service running smoothly.',
|
|
'Quick heads up - we need to verify your email to prevent any interruptions.',
|
|
'Just a friendly reminder to verify your email and avoid service disruptions.',
|
|
'Your account needs email verification to ensure uninterrupted service.',
|
|
'One small step to go - verify your email to keep your account active and running.',
|
|
],
|
|
[]
|
|
)
|
|
|
|
const buttonTexts = useMemo(
|
|
() => [
|
|
'Verify Email',
|
|
"Let's Do This",
|
|
'Verify Now',
|
|
'Complete Verification',
|
|
],
|
|
[]
|
|
)
|
|
|
|
const randomCta = useMemo(() => {
|
|
const randomIndex = Math.floor(Math.random() * ctaMessages.length)
|
|
return ctaMessages[randomIndex]
|
|
}, [ctaMessages])
|
|
|
|
const randomButtonText = useMemo(() => {
|
|
const randomIndex = Math.floor(Math.random() * buttonTexts.length)
|
|
return buttonTexts[randomIndex]
|
|
}, [buttonTexts])
|
|
|
|
if (isLoadingUserData || !userData || userDataError) {
|
|
return null
|
|
}
|
|
|
|
// If email is already verified, don't show the alert
|
|
if (userData.emailVerifiedAt) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<Alert className='bg-gradient-to-r from-red-600 to-red-700 text-white'>
|
|
<AlertDescription className='flex flex-col sm:flex-row flex-wrap items-center gap-2 md:gap-4'>
|
|
<span className='w-full sm:flex-1 text-center sm:text-left text-sm md:text-base font-medium flex items-center justify-center sm:justify-start gap-2'>
|
|
<ShieldAlert className='h-5 w-5' />
|
|
{randomCta}
|
|
</span>
|
|
<div className='w-full sm:w-auto mt-2 sm:mt-0 flex justify-center sm:justify-end flex-wrap gap-1 md:gap-2'>
|
|
<Button
|
|
variant='outline'
|
|
size='sm'
|
|
asChild
|
|
className='bg-white text-indigo-700 hover:bg-gray-100 hover:text-indigo-800 border-white text-xs md:text-sm'
|
|
>
|
|
<Link href={'/verify-email'}>
|
|
<Mail className='mr-2 h-4 w-4' />
|
|
{randomButtonText}
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</AlertDescription>
|
|
</Alert>
|
|
)
|
|
}
|