updated the verify email resend and email visible

src/app/(auth)/verify-email/page.tsx

 "use client";
 
+import { useAppDispatch } from '@/hooks/hook';
 import { PATH } from '@/routes/PATH';
+import { useSendVerificationLinkAgainMutation } from '@/services/authApi';
+import { showToast, ToastVariant } from '@/slice/toastSlice';
 import { Box, Button, Typography } from '@mui/material'
 import Image from 'next/image'
 import Link from 'next/link'
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import React from 'react'
 
 export default function VerifyEmail() {
     const router = useRouter();
+    const searchParams = useSearchParams();
+    const email = searchParams.get("email");
+    const [sendEmailVerificationAgain, { isLoading: sendingLink }] = useSendVerificationLinkAgainMutation();
+    const dispatch = useAppDispatch();
+    const handleLinkResend = async () => {
+        try {
+            const response = await sendEmailVerificationAgain({ email: email || "" }).unwrap();
+            dispatch(
+                showToast({
+                    message: response?.message || "Link sent successfully",
+                    variant: ToastVariant.SUCCESS,
+                    autoTime: true,
+                }),
+            );
+        }
+        catch (e: any) {
+            dispatch(
+                showToast({
+                    message: e?.data?.message || "Unable to send link. Try again later",
+                    variant: ToastVariant.ERROR,
+                    autoTime: true,
+                }),
+            );
+        }
+    }
+
     return (
         <Box className="max-w-[520px] mx-auto flex flex-col gap-3 items-center text-center">
             <Image src={"/assets/images/verify-email.png"} alt='' width={180} height={140} />
             <h1 className='text-[24px] lg:text-[32px] leading-[120%] font-bold mb-4'>Verify your email to
                 get the fun started</h1>
             {/* <Typography variant="h1" className='font-[700]'></Typography> */}
-            {/* <p className='text-[14px] leading-[120%] font-normal lg:text-[16px] mb-4'>Check the link sent to <strong className='underline text-secondary'>abc@gmail.com</strong> to activate your account.</p> */}
-            <p className='text-[14px] leading-[120%] font-normal lg:text-[16px] mb-4'>Check your email for verification link.</p>
+            <p className='text-[14px] leading-[120%] font-normal lg:text-[16px] mb-4'>Check the link sent to <strong className='underline text-secondary'>{email}</strong> to activate your account.</p>
+            {/* <p className='text-[14px] leading-[120%] font-normal lg:text-[16px] mb-4'>Check your email for verification link.</p> */}
             <Button fullWidth size="large" type="submit" variant="contained" color="primary" className='!mb-6' onClick={() => {
                 router.replace(PATH.DASHBOARD.ROOT)
             }}>
@@ -24,8 +53,8 @@ export default function VerifyEmail() {
             </Button>
             <h2 className='text-[20px] lg:text-[28px] leading-[120%] font-bold'>Don’t see the email?</h2>
             <p className='text-[11px] lg:text-[14px] leading-[150%] font-normal'>Please check <strong>your spam or junk folder,</strong> as the email may have been filtered there. Also, ensure that the email address you entered is correct. Still not found?</p>
-            <Button fullWidth variant="contained" color="secondary">
-                Send Again
+            <Button fullWidth variant="contained" color="secondary" onClick={handleLinkResend}>
+                {sendingLink ? "Sending Again" : "Send Again"}
             </Button>
         </Box>
     )

src/components/pages/auth/register/index.tsx

@@ -8,7 +8,7 @@ import { useRouter } from 'next/navigation';
 import { Formik, useFormik } from 'formik';
 import Link from 'next/link';
 import { PATH } from '@/routes/PATH';
-import { useRegisterUserMutation } from '@/services/authApi';
+import { useRegisterUserMutation, useSendVerificationLinkAgainMutation } from '@/services/authApi';
 import { useAppDispatch } from '@/hooks/hook';
 import { showToast, ToastVariant } from '@/slice/toastSlice';
 import PasswordField from '@/components/molecules/PasswordField';
@@ -66,7 +66,7 @@ export default function RegisterPage() {
                             autoTime: true,
                         }),
                     );
-                    router.replace(PATH.AUTH.VERIFY_EMAIL.ROOT);
+                    router.replace(`${PATH.AUTH.VERIFY_EMAIL.ROOT}?email=${response?.data?.data?.user?.email}`);
                 }
                 catch (e: any) {
                     console.log("Error", e);
@@ -81,6 +81,7 @@ export default function RegisterPage() {
             }
         }
     )
+
     return (
         <>
             <AuthMessageBlock

src/services/authApi.ts

@@ -27,8 +27,15 @@ export const authApi = createApi({
                 method: "POST",
                 body: { email, password },
             })
+        }),
+        sendVerificationLinkAgain: builder.mutation<LoginResponse, { email: string }>({
+            query: ({ email }) => ({
+                url: `/api/email/resend`,
+                method: "POST",
+                body: { email },
+            })
         })
     })
 })
 
-export const { useLoginMutation, useRegisterUserMutation } = authApi;
\ No newline at end of file
+export const { useLoginMutation, useRegisterUserMutation, useSendVerificationLinkAgainMutation } = authApi;
\ No newline at end of file