[WALL-2467] Verification status pending logic for POA status and default root mounts for modal provider

packages/api/src/hooks/index.ts

@@ -33,6 +33,7 @@ export { default as useExchangeRate } from './useExchangeRate';
 export { default as useGetAccountStatus } from './useGetAccountStatus';
 export { default as useLandingCompany } from './useLandingCompany';
 export { default as useMT5AccountsList } from './useMT5AccountsList';
+export { default as usePOA } from './usePOA';
 export { default as usePOI } from './usePOI';
 export { default as useResidenceList } from './useResidenceList';
 export { default as useSettings } from './useSettings';

packages/api/src/hooks/usePOA.ts

@@ -16,6 +16,7 @@ const usePOA = () => {
             is_expired: authentication_data?.document.status === 'expired',
             is_suspected: authentication_data?.document.status === 'suspected',
             is_verified: authentication_data?.document.status === 'verified',
+            is_need_submission: !['pending', 'verified'].includes(authentication_data?.document.status || ''),
         };
     }, [authentication_data]);
 

packages/wallets/src/components/ModalProvider/ModalProvider.tsx

@@ -1,4 +1,4 @@
-import React, { RefObject, createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useOnClickOutside } from 'usehooks-ts';
 import { MT5AccountType } from '../../features/cfd/screens';
@@ -9,7 +9,7 @@ type TModalContext = {
     isOpen: boolean;
     modalState?: TModalState;
     setModalState: (newModalState: Partial<TModalState>) => void;
-    show: (ModalContent: React.ReactNode, options?: TModalShowOptions) => void;
+    show: (ModalContent: React.ReactNode, options?: TModalOptions) => void;
 };
 
 type TMarketTypes = React.ComponentProps<typeof MT5AccountType>['selectedMarketType'];
@@ -19,7 +19,8 @@ type TModalState = {
     platform?: string;
 };
 
-type TModalShowOptions = {
+type TModalOptions = {
+    defaultRootId?: 'wallets_modal_responsive_root' | 'wallets_modal_root';
     rootRef?: React.RefObject<HTMLElement>;
 };
 
@@ -36,10 +37,10 @@ export const useModal = () => {
 const ModalProvider = ({ children }: React.PropsWithChildren<unknown>) => {
     const modalRef = useRef<HTMLDivElement>(null);
     const [content, setContent] = useState<React.ReactNode | null>();
+    const [modalOptions, setModalOptions] = useState<TModalOptions>({});
     const modalState = useRef<TModalState>();
     const { isDesktop } = useDevice();
 
-    const [customRootRef, setCustomRootRef] = useState<RefObject<HTMLElement> | null>(null);
     const rootRef = useRef<HTMLElement>(document.getElementById('wallets_modal_root'));
     const rootResponsiveRef = useRef<HTMLElement | null>(document.getElementById('wallets_modal_responsive_root'));
 
@@ -50,9 +51,12 @@ const ModalProvider = ({ children }: React.PropsWithChildren<unknown>) => {
         };
     };
 
-    const show = (ModalContent: React.ReactNode, options?: TModalShowOptions) => {
+    const show = (ModalContent: React.ReactNode, options?: TModalOptions) => {
         setContent(ModalContent);
-        setCustomRootRef(options?.rootRef?.current ? options?.rootRef : null);
+        setModalOptions({
+            ...modalOptions,
+            ...options,
+        });
     };
 
     useEffect(() => {
@@ -68,10 +72,10 @@ const ModalProvider = ({ children }: React.PropsWithChildren<unknown>) => {
     useOnClickOutside(modalRef, isDesktop ? hide : () => undefined);
 
     const modalRootRef = useMemo(() => {
-        if (customRootRef?.current) return customRootRef;
-        if (isDesktop) return rootRef;
+        if (modalOptions?.rootRef?.current) return modalOptions?.rootRef;
+        if (isDesktop || modalOptions?.defaultRootId === 'wallets_modal_root') return rootRef;
         return rootResponsiveRef;
-    }, [isDesktop, customRootRef]);
+    }, [isDesktop, modalOptions]);
 
     return (
         <ModalContext.Provider

packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.scss

@@ -60,6 +60,19 @@
             line-height: 1.8rem; /* 150% */
         }
 
+        &-badge {
+            width: fit-content;
+
+            & a {
+                cursor: pointer;
+                text-decoration: underline;
+            }
+
+            & > .wallets-inline-message {
+                padding: 0.5rem 0.8rem;
+            }
+        }
+
         &-balance {
             color: var(--system-light-1-prominent-text, #333);
 

packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import { useAuthorize } from '@deriv/api';
-import { WalletButton } from '../../../../../components/Base';
+import { useAuthorize, usePOA } from '@deriv/api';
+import { InlineMessage, WalletButton, WalletText } from '../../../../../components/Base';
+import { useModal } from '../../../../../components/ModalProvider';
 import { TradingAccountCard } from '../../../../../components/TradingAccountCard';
 import { getStaticUrl } from '../../../../../helpers/urls';
 import { THooks } from '../../../../../types';
 import { MarketTypeDetails } from '../../../constants';
 import './AddedMT5AccountsList.scss';
+import { getJurisdictionContents } from '../../../screens/Jurisdiction/jurisdiction-contents/jurisdiction-contents';
+import { VerificationFailedModal } from '../../../modals';
 
 type TProps = {
     account: THooks.MT5AccountsList;
@@ -33,21 +36,40 @@
 const AddedMT5AccountsList: React.FC<TProps> = ({ account }) => {
     const { data: activeWallet } = useAuthorize();
     const history = useHistory();
+    const { data: poaStatus } = usePOA();
     const { title } = MarketTypeDetails[account.market_type || 'all'];
+    const { show } = useModal();
+
+    const verificationDocs = getJurisdictionContents()[account?.landing_company_short || 'svg']?.verificationDocs;
+    const shouldRequireNameAndAddress =
+        verificationDocs && account?.market_type !== 'all'
+            ? verificationDocs?.[account.market_type || 'financial']?.some(doc => doc === 'nameAndAddress')
+            : false;
+
+    const isFailedAuthentication = () => {
+        if (shouldRequireNameAndAddress) return poaStatus?.is_need_submission;
+        return false;
+    };
+
+    const isPendingAuthentication = () => {
+        if (shouldRequireNameAndAddress) return poaStatus?.is_pending;
+        return false;
+    };
 
     return (
         <TradingAccountCard
             leading={() => <MT5AccountIcon account={account} />}
             trailing={() => (
                 <div className='wallets-added-mt5__actions'>
                     <WalletButton
+                        disabled={isFailedAuthentication() || isPendingAuthentication()}
                         onClick={() => {
                             history.push('/wallets/cashier/transfer');
                         }}
                         text='Transfer'
                         variant='outlined'
                     />
-                    <WalletButton text='Open' />
+                    <WalletButton disabled={isFailedAuthentication() || isPendingAuthentication()} text='Open' />
                 </div>
             )}
         >
@@ -62,8 +84,37 @@
                         </div>
                     )}
                 </div>
-                <p className='wallets-added-mt5__details-balance'>{account.display_balance}</p>
+                {!(isPendingAuthentication() || isFailedAuthentication()) && (
+                    <p className='wallets-added-mt5__details-balance'>{account.display_balance}</p>
+                )}
                 <p className='wallets-added-mt5__details-loginid'>{account.display_login}</p>
+                {isPendingAuthentication() && (
+                    <div className='wallets-added-mt5__details-badge'>
+                        <InlineMessage size='xs' type='warning' variant='outlined'>
+                            <WalletText color='warning' size='2xs' weight='bold'>
+                                Pending verification
+                            </WalletText>
+                        </InlineMessage>
+                    </div>
+                )}
+                {isFailedAuthentication() && (
+                    <div className='wallets-added-mt5__details-badge'>
+                        <InlineMessage size='xs' type='error' variant='outlined'>
+                            <WalletText color='error' size='2xs' weight='bold'>
+                                Verification failed.{' '}
+                                <a
+                                    onClick={() =>
+                                        show(<VerificationFailedModal verificationType='poi' />, {
+                                            defaultRootId: 'wallets_modal_root',
+                                        })
+                                    }
+                                >
+                                    Why?
+                                </a>
+                            </WalletText>
+                        </InlineMessage>
+                    </div>
+                )}
             </div>
         </TradingAccountCard>
     );

packages/wallets/src/features/cfd/modals/VerificationFailedModal/VerificationFailedModal.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+import { ModalWrapper } from '../../../../components/Base';
+import { VerificationFailed } from '../../screens';
+
+const VerificationFailedModal: FC<unknown> = () => {
+    return (
+        <ModalWrapper hideCloseButton>
+            <VerificationFailed />
+        </ModalWrapper>
+    );
+};
+
+export default VerificationFailedModal;

packages/wallets/src/features/cfd/modals/VerificationFailedModal/index.ts

@@ -0,0 +1 @@
+export { default as VerificationFailedModal } from './VerificationFailedModal';

packages/wallets/src/features/cfd/modals/index.ts

@@ -3,3 +3,4 @@ export * from './JurisdictionModal';
 export * from './MT5AccountTypeModal';
 export * from './MT5PasswordModal';
 export * from './MT5TradeModal';
+export * from './VerificationFailedModal';

packages/wallets/src/features/cfd/screens/VerificationFailed/VerificationFailed.scss

@@ -0,0 +1,29 @@
+.wallets-verification-failed {
+    display: flex;
+    flex-direction: column;
+    padding: 2.4rem;
+    gap: 2.4rem;
+    border-radius: 0.8rem;
+    background-color: #ffffff;
+    width: 44rem;
+    height: 34.4rem;
+
+    @include mobile {
+        width: 32rem;
+        height: 30rem;
+        padding: 1.6rem;
+        gap: 1.6rem;
+    }
+
+    & li {
+        left: 1rem;
+        position: relative;
+        list-style-type: disc;
+    }
+
+    &__footer {
+        display: flex;
+        justify-content: flex-end;
+        gap: 0.8rem;
+    }
+}

packages/wallets/src/features/cfd/screens/VerificationFailed/VerificationFailed.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { WalletButton, WalletText } from '../../../../components/Base';
+import { useModal } from '../../../../components/ModalProvider';
+import './VerificationFailed.scss';
+
+const VerificationFailed = () => {
+    const { hide } = useModal();
+    return (
+        <div className='wallets-verification-failed'>
+            <WalletText size='sm' weight='bold'>
+                Why did my verification fail?
+            </WalletText>
+            <WalletText size='sm'>
+                Your [dynamic document] did not pass our verification checks. This could be due to reasons such as:
+            </WalletText>
+            <ul>
+                <li>
+                    <WalletText size='sm'>Document details do not match profile details</WalletText>
+                </li>
+                <li>
+                    <WalletText size='sm'>Expired documents</WalletText>
+                </li>
+                <li>
+                    <WalletText size='sm'>Poor image quality</WalletText>
+                </li>
+            </ul>
+            <WalletText size='sm'>
+                Click <strong>Resubmit documents</strong> to find out more and submit your documents again.
+            </WalletText>
+            <div className='wallets-verification-failed__footer'>
+                <WalletButton onClick={() => hide()} size='lg' text='Maybe later' variant='outlined' />
+                <WalletButton size='lg' text='Resubmit documents' />
+            </div>
+        </div>
+    );
+};
+
+export default VerificationFailed;

packages/wallets/src/features/cfd/screens/VerificationFailed/index.ts

@@ -0,0 +1 @@
+export { default as VerificationFailed } from './VerificationFailed';

packages/wallets/src/features/cfd/screens/index.ts

@@ -5,3 +5,4 @@ export * from './MT5AccountType';
 export * from './MT5AccountTypeCard';
 export * from './MT5TradeScreen';
 export * from './Success';
+export * from './VerificationFailed';