fix: show the kyc status message on the frontend

Author: mhenriette

src/components/popups/KYCVerification.tsx

@@ -2,8 +2,9 @@ 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";
 
 /**
  * KYCVerification Props Interface
@@ -32,8 +33,9 @@ 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 closeModal = () => {
     dispatch(closeVerificationModal());
   };
@@ -48,13 +50,20 @@ export default function KYCVerification({ onCompleted }: KYCVerificationProps) {
     triggerCompleteAction();
   };
 
+  const statuMessage = useMemo(() => {
+    if (user?.kycStatus === KYCSTATUS.VERIFIED) return t("kyc.default.completed");
+    if (user?.kycStatus === KYCSTATUS.PENDING) return "Your verification is currently being processed. Thank you for your patience";
+    if (user?.kycStatus === KYCSTATUS.REJECTED) return "We regret to inform you that your verification process has been rejected. Please review your submitted information and try again.";
+    return t("kyc.default.reason");
+  }, [user?.kycStatus]);
+
   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">{statuMessage}</p>
           </div>
         ) : (
           <></>

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,7 +10,7 @@ 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";
@@ -41,7 +41,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(() => {

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;
 }