Bepro 2256 when i confirm the user email the user should be redirected

components/profile/notification-form/controller.tsx

@@ -11,6 +11,7 @@ import { lowerCaseCompare } from "helpers/string";
 import { isValidEmail } from "helpers/validators/email";
 
 import { CustomSession } from "interfaces/custom-session";
+import { EmailConfirmationErrors } from "interfaces/enums/Errors";
 import { NotificationSettings } from "interfaces/user-notification";
 
 import { useUpdateEmail } from "x-hooks/api/user";
@@ -90,8 +91,12 @@ export default function NotificationForm() {
   const sessionUser = (sessionData as CustomSession)?.user;
   const userEmail = sessionUser?.email || "";
   const isConfirmationPending = !!userEmail && !sessionUser?.isEmailConfirmed;
+  const isEmailConfirmed = !!userEmail && !!sessionUser?.isEmailConfirmed;
   const isSameEmail = lowerCaseCompare(userEmail, inputEmail);
-  const emailVerificationError = query?.emailVerificationError?.toString()?.replace("Error: ", "");
+  const emailVerification = query?.emailVerification?.toString();
+  const emailVerificationError = !isEmailConfirmed && emailVerification && emailVerification !== "success" ? 
+    emailVerification : null;
+  const canResend = !!emailVerificationError && emailVerification !== EmailConfirmationErrors.ALREADY_CONFIRMED;
 
   function handleEmailChange(e) {
     setInputEmail(e.target.value);
@@ -105,7 +110,7 @@ export default function NotificationForm() {
   function onResend() {
     updateEmail(userEmail, {
       onSuccess: () => {
-        goToProfilePage("dashboard", { emailVerificationError: "" });
+        goToProfilePage("dashboard", { emailVerification: "" });
       }
     });
   }
@@ -151,7 +156,9 @@ export default function NotificationForm() {
       isInvalid={isEmailInvalid}
       isConfirmationPending={isConfirmationPending}
       isExecuting={isExecutingEmail}
+      isEmailConfirmed={isEmailConfirmed}
       emailVerificationError={emailVerificationError}
+      canResend={canResend}
       notificationSettings={userNotificationSettings || {}}
       toggleNotificationItem={toggleNotificationItem}
       onChange={handleEmailChange}

components/profile/notification-form/view.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import {useTranslation} from "next-i18next";
 
+import DoneIcon from "assets/icons/done-icon";
 import InfoIconEmpty from "assets/icons/info-icon-empty";
 
 import Button from "components/button";
@@ -19,6 +20,8 @@ interface NotificationFormViewProps {
   isInvalid: boolean;
   isConfirmationPending: boolean;
   isExecuting: boolean;
+  isEmailConfirmed: boolean;
+  canResend: boolean;
   emailVerificationError: string;
   notificationSettings: Partial<NotificationSettings>;
   onChange: (e) => void;
@@ -36,6 +39,8 @@ export default function NotificationFormView({
   isInvalid,
   isConfirmationPending,
   isExecuting,
+  isEmailConfirmed,
+  canResend,
   emailVerificationError,
   notificationSettings,
   onChange,
@@ -78,7 +83,7 @@ export default function NotificationFormView({
               <Button
                 onClick={onSave}
                 disabled={isSaveButtonDisabled}
-                isLoading={isExecuting}
+                isLoading={!emailVerificationError && isExecuting}
                 data-testid="notification-save-btn">
                 {t("actions.save")}
               </Button>
@@ -99,22 +104,24 @@ export default function NotificationFormView({
 
         <If condition={!!emailVerificationError}>
           <div className="row align-items-center mt-2">
-            <div className="col-6">
+            <div className="col-6 col-lg-4">
               <small className="xs-medium text-danger">
                 {t(`profile:email-errors.${emailVerificationError}`)}
               </small>
             </div>
 
-            <div className="col-auto">
-              <Button
-                onClick={onResend}
-                disabled={isExecuting || !emailVerificationError}
-                isLoading={emailVerificationError && isExecuting}
-                data-testid="notification-re-send-btn"
-              >
-                {t("profile:notifications-form.re-send")}
-              </Button>
-            </div>
+            <If condition={!!canResend}>
+              <div className="col-auto">
+                <Button
+                  onClick={onResend}
+                  disabled={isExecuting || !emailVerificationError}
+                  isLoading={emailVerificationError && isExecuting}
+                  data-testid="notification-re-send-btn"
+                >
+                  {t("profile:notifications-form.re-send")}
+                </Button>
+              </div>
+            </If>
           </div>
         </If>
 
@@ -127,6 +134,19 @@ export default function NotificationFormView({
             </div>
           </div>
         </If>
+
+        <If condition={isEmailConfirmed && !emailVerificationError}>
+          <div className="row align-items-center mt-2">
+            <div className="col">
+                <span className="text-green-500 xs-medium">
+                  <DoneIcon className="mr-1" />
+                </span>
+                <span className="text-green-500 xs-medium font-weight-normal">
+                  {t("profile:notifications-form.email-confirmed")}
+                </span>
+            </div>
+          </div>
+        </If>
       </div>
 
       <div className="row align-items-center mt-4">

pages/api/user/connect/confirm-email.ts

@@ -1,22 +1,40 @@
-import {NextApiRequest, NextApiResponse} from "next";
+import { NextApiRequest, NextApiResponse } from "next";
 
-import {withCORS} from "middleware";
+import { withCORS } from "middleware";
 
-import {get} from "server/common/user/email";
+import { Logger } from "services/logging";
+
+import { get } from "server/common/user/email";
+import { HttpBadRequestError, HttpConflictError } from "server/errors/http-errors";
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const url = "/dashboard?emailVerification=";
 
   switch (req.method.toLowerCase()) {
   case "get":
-    await get(req)
-    res.redirect("/profile?emailVerification=success");
+    try {
+      await get(req);
+      res.redirect(`${url}success`);
+    } catch(error) {
+      Logger.error(error, "Failed to confirm email", {
+        query: req.query,
+        url: req.url,
+        method: req.method,
+        cookies: req.cookies,
+        headers: req.headers
+      });
+
+      if (error instanceof HttpBadRequestError || error instanceof HttpConflictError) {
+        res.redirect(`${url}${error.message}`);
+      } else 
+        res.redirect(`${url}server-error`);
+    }
     break;
 
   default:
     res.status(405);
   }
 
-
   res.end();
 }
 

public/locales/en/profile.json

@@ -49,12 +49,13 @@
       "update-handle": "Error update handle"
     }
   },
-   "notifications-form": {
+  "notifications-form": {
       "title": "Notifications",
       "message": "Allow Bepro Marketplace to send you updates in-app and via email. These can include updates to tasks, app updates, etc.",
       "invalid-email": "Invalid email",
       "re-send-email": "A confirmation email was sent, please check your inbox and spam box.",
       "re-send": "Re-send",
+      "email-confirmed": "Email verified",
       "success-toast": {
         "title": "Success",
         "content": "Email confirmed",
@@ -65,14 +66,15 @@
       }
   },
   "email-errors": {
-    "invalid-link": "Invalid confirmation link",
-    "already-confirmed": "Email already confirmed",
+    "invalid-link": "Invalid confirmation link.",
+    "already-confirmed": "Email already confirmed.",
     "expired-link": "This confirmation link is expired. Try re-sending another email.",
-    "failed-to-update": "Failed to update email",
+    "failed-to-update": "Failed to update email.",
     "try-again-later": "Something went wrong, try again later",
-    "email-already-in-use": "Email already in use",
+    "email-already-in-use": "Email already in use.",
     "invalid-email": "Invalid email",
-    "nothing-to-change": "Nothing to change"
+    "nothing-to-change": "Nothing to change",
+    "server-error": "Something went wrong, please try re-send the email or send us a message on our discord."
   },
   "take-back-success": "Take back",
   "take-back-fail": "Failed to take back",