Merge pull request #1081 from dacadeorg/fix/kyc-verification-frontend

fix: show the kyc status message on the frontend

Author: musayann

public/locales/bg/common.json

@@ -359,6 +359,8 @@
   "kyc.default.title": "Identity verification",
   "kyc.default.completed": "Your identity has been verified successfully.",
   "kyc.default.reason": "To ensure the safety and security of our platform, we require all users to verify their identity. This verification process helps us maintain a trusted community of members who are committed to upholding our standards. Please take a moment to complete your KYC verification to help us in our efforts to create a safe and secure environment for everyone.",
+  "kyc.verification.pending": "Вашата верификация в момента се обработва. Благодарим ви за търпението.",
+  "kyc.verification.rejected": "Съжаляваме да ви информираме, че процесът на вашата верификация е отхвърлен. Моля, свържете се с екипа за поддръжка за повече информация.",
   "kyc.default.button": "Start verification",
   "kyc.default.button.completed": "Go to profile",
   "kyc.payout.reason": "To cashout, you need to verify your identity first.",

public/locales/en/common.json

@@ -417,6 +417,8 @@
   "kyc.default.title": "Identity verification",
   "kyc.default.completed": "Your identity has been verified successfully.",
   "kyc.default.reason": "To ensure the safety and security of our platform, we require all users to verify their identity. This verification process helps us maintain a trusted community of members who are committed to upholding our standards. Please take a moment to complete your KYC verification to help us in our efforts to create a safe and secure environment for everyone.",
+  "kyc.verification.pending":"Your verification is currently being processed. Thank you for your patience",
+  "kyc.verification.rejected":"We regret to inform you that your verification process has been rejected. Please  contact support team for more information.",
   "kyc.default.button": "Start verification",
   "kyc.default.button.completed": "Go to profile",
   "kyc.payout.reason": "To cashout, you need to verify your identity first.",

public/locales/es/common.json

@@ -373,6 +373,8 @@
   "kyc.default.title": "Identity verification",
   "kyc.default.completed": "Your identity has been verified successfully.",
   "kyc.default.reason": "To ensure the safety and security of our platform, we require all users to verify their identity. This verification process helps us maintain a trusted community of members who are committed to upholding our standards. Please take a moment to complete your KYC verification to help us in our efforts to create a safe and secure environment for everyone.",
+  "kyc.verification.pending": "Su verificación está siendo procesada actualmente. Gracias por su paciencia.",
+  "kyc.verification.rejected": "Lamentamos informarle que su proceso de verificación ha sido rechazado. Por favor, póngase en contacto con el equipo de soporte para obtener más información.",
   "kyc.default.button": "Start verification",
   "kyc.default.button.completed": "Go to profile",
   "kyc.payout.reason": "To cashout, you need to verify your identity first.",

public/locales/hr/common.json

@@ -359,6 +359,8 @@
   "kyc.default.title": "Identity verification",
   "kyc.default.completed": "Your identity has been verified successfully.",
   "kyc.default.reason": "To ensure the safety and security of our platform, we require all users to verify their identity. This verification process helps us maintain a trusted community of members who are committed to upholding our standards. Please take a moment to complete your KYC verification to help us in our efforts to create a safe and secure environment for everyone.",
+  "kyc.verification.pending": "Vaša verifikacija trenutno se obrađuje. Hvala vam na strpljenju.",
+  "kyc.verification.rejected": "Žao nam je obavijestiti vas da je vaš proces verifikacije odbijen. Molimo vas da kontaktirate tim za podršku radi više informacija.",
   "kyc.default.button": "Start verification",
   "kyc.default.button.completed": "Go to profile",
   "kyc.payout.reason": "To cashout, you need to verify your identity first.",

src/components/popups/KYCVerification.tsx

@@ -2,8 +2,10 @@ import Modal from "@/components/ui/Modal";
 import { useTranslation } from "next-i18next";
 import ArrowButton from "@/components/ui/button/Arrow";
 import { useSelector } from "@/hooks/useTypedSelector";
-import { closeVerificationModal, launchWebSdk, triggerCompleteAction } from "@/store/feature/kyc.slice";
+import { KYCSTATUS, closeVerificationModal, launchWebSdk, triggerCompleteAction } from "@/store/feature/kyc.slice";
 import { useDispatch } from "@/hooks/useTypedDispatch";
+import { useMemo } from "react";
+import { toggleBodyScrolling } from "@/store/feature/ui.slice";
 
 /**
  * KYCVerification Props Interface
@@ -32,9 +34,13 @@ export default function KYCVerification({ onCompleted }: KYCVerificationProps) {
 
   const verificationData = useSelector((state) => state.sumsubVerification);
 
-  const { showModal, completed, completedText, description, verifying, completedActionText, actionText, loading, title } = verificationData;
+  const { showModal, completed, verifying, completedActionText, actionText, loading, title } = verificationData;
+  const user = useSelector((state) => state.user.data);
+
+  const kycStatus = user?.kycStatus;
 
   const closeModal = () => {
+    dispatch(toggleBodyScrolling(false));
     dispatch(closeVerificationModal());
   };
   const verify = () => {
@@ -48,13 +54,20 @@ export default function KYCVerification({ onCompleted }: KYCVerificationProps) {
     triggerCompleteAction();
   };
 
+  const statusMessage = useMemo(() => {
+    if (kycStatus === KYCSTATUS.VERIFIED) return t("kyc.default.completed");
+    if (kycStatus === KYCSTATUS.PENDING) return t("kyc.verification.pending");
+    if (kycStatus === KYCSTATUS.REJECTED) return t("kyc.verification.rejected");
+    return t("kyc.default.reason");
+  }, [kycStatus, t]);
+
   return (
     <Modal show={showModal} onClose={closeModal}>
       <div className="px-6 py-6">
         {!verifying ? (
           <div className="flex flex-col text-left">
             <h1 className="text-.5xl leading-snug font-medium">{title || t("kyc.default.title")}</h1>
-            <p className="pt-8">{completed ? completedText || t("kyc.default.completed") : description || t("kyc.default.reason")}</p>
+            <p className="pt-8">{statusMessage}</p>
           </div>
         ) : (
           <></>
@@ -65,7 +78,7 @@ export default function KYCVerification({ onCompleted }: KYCVerificationProps) {
         <span className="text-sm font-medium cursor-pointer text-primary" onClick={closeModal}>
           {t("profile.edit.close")}
         </span>
-        {!verifying && (
+        {!verifying && kycStatus !== KYCSTATUS.REJECTED && (
           <ArrowButton loading={loading} disabled={loading} onClick={verify}>
             {completed ? completedActionText || t("kyc.default.button.completed") : actionText || t("kyc.default.button")}
           </ArrowButton>

src/components/popups/user/Dropdown.tsx

@@ -16,6 +16,7 @@ import { useDispatch } from "@/hooks/useTypedDispatch";
 import VerifiedIcon from "@/icons/verified.svg";
 import { IRootState } from "@/store";
 import { Wallet } from "@/types/wallet";
+import { KYCSTATUS } from "@/store/feature/kyc.slice";
 
 /**
  * interface for UserProfileDropdown multiSelector
@@ -55,7 +56,7 @@ const UserProfileDropdown = ({ buttonStyles, onClose }: { buttonStyles?: CSSProp
     error: (state: IRootState) => state.store.error,
   });
   const username = user?.displayName;
-  const isKycVerified = useMemo(() => user?.kycStatus === "VERIFIED", [user]);
+  const isKycVerified = useMemo(() => user?.kycStatus === KYCSTATUS.VERIFIED, [user]);
 
   /**
    * Logout handler.

src/components/sections/profile/Header.tsx

@@ -10,12 +10,13 @@ import { useRouter } from "next/router";
 import { useMemo } from "react";
 import { useTranslation } from "next-i18next";
 import { useDispatch } from "@/hooks/useTypedDispatch";
-import { openVerificationModal } from "@/store/feature/kyc.slice";
+import { KYCSTATUS, openVerificationModal } from "@/store/feature/kyc.slice";
 import KYCVerification from "@/components/popups/KYCVerification";
 import { useDiscordConnect } from "@/hooks/useDiscordConnect";
 import { User } from "@/types/bounty";
 import { IRootState } from "@/store";
 import Link from "next/link";
+import { toggleBodyScrolling } from "@/store/feature/ui.slice";
 
 /**
  * interface for ProfileHeader multiSelector
@@ -41,7 +42,7 @@ export default function ProfileHeader() {
   const { authUser, profileUser, isKycVerified } = useMultiSelector<unknown, ProfileHeaderMultiSelector>({
     authUser: (state: IRootState) => state.user.data,
     profileUser: (state: IRootState) => state.profileUser.current,
-    isKycVerified: (state: IRootState) => state.user.data?.kycStatus === "VERIFIED",
+    isKycVerified: (state: IRootState) => state.user.data?.kycStatus === KYCSTATUS.VERIFIED,
   });
 
   const user = useMemo(() => {
@@ -64,8 +65,10 @@ export default function ProfileHeader() {
   }, [isCurrentUser, isKycVerified]);
 
   const dispatch = useDispatch();
+
   const triggerKYCVerification = () => {
     dispatch(openVerificationModal({}));
+    dispatch(toggleBodyScrolling(true))
   };
 
   const { canConnectDiscord, triggerDiscordOauth } = useDiscordConnect();

src/components/ui/Popup.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { ReactElement } from "react";
+import { ReactElement} from "react";
 
 /**
  * Popups interface props
@@ -31,6 +31,7 @@ interface PopupProps {
  * @returns {ReactElement}
  */
 export default function Popup({ center, onClose, show, children, className = "" }: PopupProps): ReactElement {
+
   return show ? (
     <div className={classNames(`fixed z-999 w-screen h-screen overflow-y-scroll top-0 left-0 ${className}`, { "flex items-center": center })}>
       <div className="opacity-25 fixed inset-0 z-0 bg-black w-full h-screen top-0 left-0" onClick={onClose} />

src/store/feature/kyc.slice.ts

@@ -6,6 +6,12 @@ import api from "@/config/api";
 import { fetchUser } from "../services/user.service";
 import snsWebSdk from "@sumsub/websdk";
 
+export enum KYCSTATUS {
+  PENDING = "PENDING",
+  VERIFIED = "VERIFIED",
+  REJECTED = "REJECTED",
+}
+
 interface SumsubVerificationState {
   sumsubToken: string | null;
   showModal: boolean;
@@ -59,7 +65,7 @@ export const getSumsubToken = () => async (dispatch: Dispatch) => {
  * @returns {(dispatch: any) => any}
  */
 export const openVerificationModal = (payload: any) => (dispatch: any, getState: () => IRootState) => {
-  const isKycVerified = getState().user.data?.kycStatus === "VERIFIED";
+  const isKycVerified = getState().user.data?.kycStatus === KYCSTATUS.VERIFIED;
   if (isKycVerified) {
     dispatch(closeVerificationModal());
     triggerCompleteAction();

src/types/bounty.d.ts

@@ -3,6 +3,7 @@ import { Colors, Community, Referral } from "./community";
 import { ReactNode } from "react";
 import { Feedback } from "./feedback";
 import { Team } from "./challenge";
+import { KYCSTATUS } from "@/store/feature/kyc.slice";
 
 export interface Bounty {
   url: string;
@@ -151,7 +152,7 @@ export interface User {
   discord?: {
     connected?: boolean;
   };
-  kycStatus: string;
+  kycStatus: KYCSTATUS;
   referrals: Referral;
 }