[TASK-15518] Fix: KYC bugs

src/components/AddWithdraw/AddWithdrawCountriesList.tsx

@@ -27,6 +27,8 @@ import CryptoMethodDrawer from '../AddMoney/components/CryptoMethodDrawer'
 import { useAppDispatch } from '@/redux/hooks'
 import { bankFormActions } from '@/redux/slices/bank-form-slice'
 import { InitiateBridgeKYCModal } from '../Kyc/InitiateBridgeKYCModal'
+import useKycStatus from '@/hooks/useKycStatus'
+import KycVerifiedOrReviewModal from '../Global/KycVerifiedOrReviewModal'
 
 interface AddWithdrawCountriesListProps {
     flow: 'add' | 'withdraw'
@@ -51,6 +53,9 @@ const AddWithdrawCountriesList = ({ flow }: AddWithdrawCountriesListProps) => {
     )
     const [isDrawerOpen, setIsDrawerOpen] = useState(false)
 
+    const { isUserBridgeKycUnderReview } = useKycStatus()
+    const [showKycStatusModal, setShowKycStatusModal] = useState(false)
+
     useWebSocket({
         username: user?.user.username ?? undefined,
         autoConnect: !!user?.user.username,
@@ -162,6 +167,11 @@ const AddWithdrawCountriesList = ({ flow }: AddWithdrawCountriesListProps) => {
             // Manteca methods route directly (has own amount input)
             router.push(method.path)
         } else if (method.id.includes('default-bank-withdraw') || method.id.includes('sepa-instant-withdraw')) {
+            if (isUserBridgeKycUnderReview) {
+                setShowKycStatusModal(true)
+                return
+            }
+
             // Bridge methods: Set in context and navigate for amount input
             setSelectedMethod({
                 type: 'bridge',
@@ -184,6 +194,22 @@ const AddWithdrawCountriesList = ({ flow }: AddWithdrawCountriesListProps) => {
         }
     }
 
+    const handleAddMethodClick = (method: SpecificPaymentMethod) => {
+        if (method.path) {
+            if (method.id === 'crypto-add') {
+                setIsDrawerOpen(true)
+                return
+            }
+            // show kyc status modal if user is kyc under review
+            if (isUserBridgeKycUnderReview) {
+                setShowKycStatusModal(true)
+                return
+            }
+
+            router.push(method.path)
+        }
+    }
+
     const methods = useMemo(() => {
         if (!currentCountry) return undefined
 
@@ -297,11 +323,7 @@ const AddWithdrawCountriesList = ({ flow }: AddWithdrawCountriesListProps) => {
                                 if (flow === 'withdraw') {
                                     handleWithdrawMethodClick(method)
                                 } else if (method.path) {
-                                    if (method.id === 'crypto-add') {
-                                        setIsDrawerOpen(true)
-                                        return
-                                    }
-                                    router.push(method.path)
+                                    handleAddMethodClick(method)
                                 }
                             }}
                             position={
@@ -345,6 +367,10 @@ const AddWithdrawCountriesList = ({ flow }: AddWithdrawCountriesListProps) => {
                     closeDrawer={() => setIsDrawerOpen(false)}
                 />
             )}
+            <KycVerifiedOrReviewModal
+                isKycApprovedModalOpen={showKycStatusModal}
+                onClose={() => setShowKycStatusModal(false)}
+            />
             <InitiateBridgeKYCModal
                 isOpen={isKycModalOpen}
                 onClose={() => setIsKycModalOpen(false)}

src/components/Global/IframeWrapper/index.tsx

@@ -144,16 +144,15 @@ const IframeWrapper = ({ src, visible, onClose, closeConfirmMessage }: IFrameWra
                             className="rounded-md"
                             sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-modals allow-top-navigation-by-user-activation"
                         />
-                        <div className="flex h-[15%] w-full flex-col items-center justify-center gap-4 px-5">
+                        <div className="flex h-[15%] w-full flex-col items-center justify-center gap-2 px-5">
                             <Button
-                                variant={'stroke'}
-                                className={`max-w-md`}
+                                variant={'transparent'}
+                                className={`h-8 max-w-md font-normal underline`}
                                 onClick={() => {
                                     setModalVariant('stop-verification')
                                     setIsHelpModalOpen(true)
                                 }}
                                 shadowType="primary"
-                                shadowSize="4"
                             >
                                 Stop verification process
                             </Button>
@@ -165,8 +164,8 @@ const IframeWrapper = ({ src, visible, onClose, closeConfirmMessage }: IFrameWra
                                 }}
                                 className="flex items-center gap-1"
                             >
-                                <Icon name="peanut-support" size={16} />
-                                <p className="text-xs font-medium underline">Having trouble?</p>
+                                <Icon name="peanut-support" size={16} className="text-grey-1" />
+                                <p className="text-xs font-medium text-grey-1 underline">Having trouble?</p>
                             </button>
                         </div>
                     </div>

src/components/Global/KycVerifiedOrReviewModal/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import ActionModal from '../ActionModal'
+import useKycStatus from '@/hooks/useKycStatus'
+
+const KycVerifiedOrReviewModal = ({
+    isKycApprovedModalOpen,
+    onClose,
+}: {
+    isKycApprovedModalOpen: boolean
+    onClose: () => void
+}) => {
+    const { isUserBridgeKycUnderReview } = useKycStatus()
+
+    return (
+        <ActionModal
+            visible={isKycApprovedModalOpen}
+            onClose={onClose}
+            title={isUserBridgeKycUnderReview ? 'Your verification is under review' : 'You’re already verified'}
+            description={
+                isUserBridgeKycUnderReview
+                    ? 'Your verification is under review. You will be notified when it is completed.'
+                    : 'Your identity has already been successfully verified. No further action is needed.'
+            }
+            icon={isUserBridgeKycUnderReview ? 'clock' : 'shield'}
+            ctas={[
+                {
+                    text: 'Go back',
+                    shadowSize: '4',
+                    className: 'md:py-2',
+                    onClick: onClose,
+                },
+            ]}
+        />
+    )
+}
+
+export default KycVerifiedOrReviewModal

src/components/Profile/index.tsx

@@ -15,14 +15,15 @@ import Card from '../Global/Card'
 import ShowNameToggle from './components/ShowNameToggle'
 import ShareButton from '../Global/ShareButton'
 import CopyToClipboard from '../Global/CopyToClipboard'
+import KycVerifiedOrReviewModal from '../Global/KycVerifiedOrReviewModal'
 
 export const Profile = () => {
     const { logoutUser, isLoggingOut, user } = useAuth()
     const [isKycApprovedModalOpen, setIsKycApprovedModalOpen] = useState(false)
     const [isInviteFriendsModalOpen, setIsInviteFriendsModalOpen] = useState(false)
     const [showInitiateKycModal, setShowInitiateKycModal] = useState(false)
     const router = useRouter()
-    const { isUserKycApproved } = useKycStatus()
+    const { isUserKycApproved, isUserBridgeKycUnderReview } = useKycStatus()
 
     const logout = async () => {
         await logoutUser()
@@ -132,20 +133,9 @@ export const Profile = () => {
                 </div>
             </div>
 
-            <ActionModal
-                visible={isKycApprovedModalOpen}
+            <KycVerifiedOrReviewModal
+                isKycApprovedModalOpen={isKycApprovedModalOpen}
                 onClose={() => setIsKycApprovedModalOpen(false)}
-                title="You’re already verified"
-                description="Your identity has already been successfully verified. No further action is needed."
-                icon="shield"
-                ctas={[
-                    {
-                        text: 'Go back',
-                        shadowSize: '4',
-                        className: 'md:py-2',
-                        onClick: () => setIsKycApprovedModalOpen(false),
-                    },
-                ]}
             />
 
             <ActionModal

src/hooks/useBridgeKycFlow.ts

@@ -5,7 +5,7 @@ import { useWebSocket } from '@/hooks/useWebSocket'
 import { useUserStore } from '@/redux/hooks'
 import { BridgeKycStatus, convertPersonaUrl } from '@/utils'
 import { InitiateKycResponse } from '@/app/actions/types/users.types'
-import { getKycDetails } from '@/app/actions/users'
+import { getKycDetails, updateUserById } from '@/app/actions/users'
 import { IUserKycVerification } from '@/interfaces'
 
 interface UseKycFlowOptions {
@@ -137,6 +137,11 @@ export const useBridgeKycFlow = ({ onKycSuccess, flow, onManualClose }: UseKycFl
             if (source === 'completed') {
                 setIframeOptions((prev) => ({ ...prev, visible: false }))
                 setIsVerificationProgressModalOpen(true)
+                // set the status to under review explicitly to avoild delays from bridge webhook
+                updateUserById({
+                    userId: user?.user.userId,
+                    bridgeKycStatus: 'under_review' as BridgeKycStatus,
+                })
                 return
             }
 

src/hooks/useKycStatus.tsx

@@ -26,5 +26,11 @@ export default function useKycStatus() {
         [isUserBridgeKycApproved, isUserMantecaKycApproved]
     )
 
-    return { isUserBridgeKycApproved, isUserMantecaKycApproved, isUserKycApproved }
+    const isUserBridgeKycUnderReview = useMemo(
+        // Bridge kyc status is incomplete/under_review when user has started the kyc process
+        () => user?.user.bridgeKycStatus === 'under_review' || user?.user.bridgeKycStatus === 'incomplete',
+        [user]
+    )
+
+    return { isUserBridgeKycApproved, isUserMantecaKycApproved, isUserKycApproved, isUserBridgeKycUnderReview }
 }