diff --git a/src/components/AddWithdraw/AddWithdrawCountriesList.tsx b/src/components/AddWithdraw/AddWithdrawCountriesList.tsx index 3b91026e7..8ed11f6fb 100644 --- a/src/components/AddWithdraw/AddWithdrawCountriesList.tsx +++ b/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)} /> )} + setShowKycStatusModal(false)} + /> setIsKycModalOpen(false)} diff --git a/src/components/Global/IframeWrapper/index.tsx b/src/components/Global/IframeWrapper/index.tsx index 6697f4853..a4b371ae9 100644 --- a/src/components/Global/IframeWrapper/index.tsx +++ b/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" /> -
+
@@ -165,8 +164,8 @@ const IframeWrapper = ({ src, visible, onClose, closeConfirmMessage }: IFrameWra }} className="flex items-center gap-1" > - -

Having trouble?

+ +

Having trouble?

diff --git a/src/components/Global/KycVerifiedOrReviewModal/index.tsx b/src/components/Global/KycVerifiedOrReviewModal/index.tsx new file mode 100644 index 000000000..02168879b --- /dev/null +++ b/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 ( + + ) +} + +export default KycVerifiedOrReviewModal diff --git a/src/components/Profile/index.tsx b/src/components/Profile/index.tsx index 0fbc1180f..aa831928d 100644 --- a/src/components/Profile/index.tsx +++ b/src/components/Profile/index.tsx @@ -15,6 +15,7 @@ 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() @@ -22,7 +23,7 @@ export const Profile = () => { 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 = () => { - 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), - }, - ]} /> ({ ...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 } diff --git a/src/hooks/useKycStatus.tsx b/src/hooks/useKycStatus.tsx index 1bd849d59..0b6eb9c5f 100644 --- a/src/hooks/useKycStatus.tsx +++ b/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 } }