feat(user): display email on email verification remainder page (#1533)

* feat: add email on email verification remainder page

* refactor: update translation

Author: bishalshrestha013

packages/i18n/src/locales/en/user.json

@@ -37,7 +37,7 @@
       "invalidToken": "The token is invalid.",
       "resendEmailInfo": "Not received yet?",
       "success": "Email verified successfully.",
-      "unverified": "We've sent you an email with a link to verify your email address. Please check your inbox.",
+      "unverified": "We've sent an email to <strong>{{ email }}</strong> with a link for verification. Please check your inbox.",
       "unauthenticated": "User session expired. Please signin to continue."
     },
     "title": "Please verify your email address.",

packages/i18n/src/locales/fr/user.json

@@ -37,7 +37,7 @@
       "invalidToken": "The token is invalid. (fr)",
       "resendEmailInfo": "Not received yet? (fr)",
       "success": "Email verified successfully. (fr)",
-      "unverified": "We've sent you an email with a link to verify your email address. Please check your inbox. (fr)",
+      "unverified": "We've sent an email to <strong>{{ email }}</strong> with a link for verification. Please check your inbox. (fr)",
       "unauthenticated": "User session expired. Please signin to continue. (fr)"
     },
     "title": "Please verify your email address. (fr)",

packages/user/src/views/EmailVerificationReminder.tsx

@@ -1,9 +1,11 @@
-import { useTranslation } from "@dzangolab/react-i18n";
+import { Trans, useTranslation } from "@dzangolab/react-i18n";
 import { Page } from "@dzangolab/react-ui";
 import { useState } from "react";
 import { Link } from "react-router-dom";
 import { toast } from "react-toastify";
 
+import { useUser } from "@/hooks";
+
 import { EMAIL_VERIFICATION } from "../constants";
 import { resendVerificationEmail } from "../supertokens/resend-email-verification";
 
@@ -16,6 +18,8 @@ export const EmailVerificationReminder = ({
 
   const { t } = useTranslation("user");
 
+  const { user } = useUser();
+
   const handleResend = () => {
     resendVerificationEmail()
       .then((status) => {
@@ -42,7 +46,18 @@ export const EmailVerificationReminder = ({
         <p>{t("emailVerification.messages.alreadyVerified")}</p>
       ) : (
         <>
-          <p>{t("emailVerification.messages.unverified")}</p>
+          <p>
+            {
+              <Trans
+                i18nKey={"emailVerification.messages.unverified"}
+                values={{ email: user?.email }}
+                components={{
+                  strong: <strong />,
+                }}
+                t={t}
+              />
+            }
+          </p>
           <p className="resend-email">
             {t("emailVerification.messages.resendEmailInfo")}{" "}
             <Link to="#" onClick={handleResend}>