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

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/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.scss

@@ -18,16 +18,6 @@
             gap: 0.8rem;
             align-self: stretch;
 
-            &-text {
-                color: var(--system-light-2-general-text, #333);
-
-                /* desktop/paragraph/P2 - regular */
-                font-size: 1.4rem;
-                font-style: normal;
-                font-weight: 400;
-                line-height: 2rem; /* 142.857% */
-            }
-
             &-landing-company {
                 display: flex;
                 height: 2.4rem;
@@ -37,37 +27,19 @@
                 border-radius: 0.4rem;
                 background: var(--system-light-7-secondary-background, #f2f3f4);
             }
-
-            &-landing-company-text {
-                color: var(--system-light-1-prominent-text, #333);
-
-                /* desktop/extra small/XS - bold */
-                font-size: 1rem;
-                font-style: normal;
-                font-weight: 700;
-                line-height: 1.4rem; /* 140% */
-                text-transform: uppercase;
-            }
         }
 
-        &-loginid {
-            color: var(--system-light-3-less-prominent-text, #999);
-
-            /* desktop/small/S - bold */
-            font-size: 1.2rem;
-            font-style: normal;
-            font-weight: 700;
-            line-height: 1.8rem; /* 150% */
-        }
+        &-badge {
+            width: fit-content;
 
-        &-balance {
-            color: var(--system-light-1-prominent-text, #333);
+            & a {
+                cursor: pointer;
+                text-decoration: underline;
+            }
 
-            /* desktop/paragraph/P2 - bold */
-            font-size: 1.4rem;
-            font-style: normal;
-            font-weight: 700;
-            line-height: 2rem; /* 142.857% */
+            & > .wallets-inline-message {
+                padding: 0.5rem 0.8rem;
+            }
         }
 
         &-description {

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

@@ -1,14 +1,14 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import { useAuthorize } from '@deriv/api';
-import { WalletButton } from '../../../../../components/Base';
+import { useAuthorize, useJurisdictionStatus } 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 { MT5TradeModal, VerificationFailedModal } from '../../../modals';
 import './AddedMT5AccountsList.scss';
-import { useModal } from '../../../../../components/ModalProvider';
-import { MT5TradeModal } from '../../../modals';
 
 type TProps = {
     account: THooks.MT5AccountsList;
@@ -35,22 +35,25 @@ const MT5AccountIcon: React.FC<TProps> = ({ account }) => {
 const AddedMT5AccountsList: React.FC<TProps> = ({ account }) => {
     const { data: activeWallet } = useAuthorize();
     const history = useHistory();
-    const { show } = useModal();
+    const { data: jurisdictionStatus } = useJurisdictionStatus(account.landing_company_short || 'svg', account.status);
     const { title } = MarketTypeDetails[account.market_type || 'all'];
+    const { show } = useModal();
 
     return (
         <TradingAccountCard
             leading={() => <MT5AccountIcon account={account} />}
             trailing={() => (
                 <div className='wallets-added-mt5__actions'>
                     <WalletButton
+                        disabled={jurisdictionStatus.is_failed || jurisdictionStatus.is_pending}
                         onClick={() => {
                             history.push('/wallets/cashier/transfer');
                         }}
                         text='Transfer'
                         variant='outlined'
                     />
                     <WalletButton
+                        disabled={jurisdictionStatus.is_failed || jurisdictionStatus.is_pending}
                         onClick={() => show(<MT5TradeModal marketType={account.market_type || 'all'} platform='mt5' />)}
                         text='Open'
                     />
@@ -59,17 +62,50 @@ const AddedMT5AccountsList: React.FC<TProps> = ({ account }) => {
         >
             <div className='wallets-added-mt5__details'>
                 <div className='wallets-added-mt5__details-title'>
-                    <p className='wallets-added-mt5__details-title-text'>{title}</p>
+                    <WalletText size='2xs'>{title}</WalletText>
                     {!activeWallet?.is_virtual && (
                         <div className='wallets-added-mt5__details-title-landing-company'>
-                            <p className='wallets-added-mt5__details-title-landing-company-text'>
-                                {account.landing_company_short}
-                            </p>
+                            <WalletText size='2xs' weight='bold'>
+                                {account.landing_company_short?.toUpperCase()}
+                            </WalletText>
                         </div>
                     )}
                 </div>
-                <p className='wallets-added-mt5__details-balance'>{account.display_balance}</p>
-                <p className='wallets-added-mt5__details-loginid'>{account.display_login}</p>
+                {!(jurisdictionStatus.is_failed || jurisdictionStatus.is_pending) && (
+                    <WalletText size='sm' weight='bold'>
+                        {account.display_balance}
+                    </WalletText>
+                )}
+                <WalletText as='p' color='primary' size='xs' weight='bold'>
+                    {account.display_login}
+                </WalletText>
+                {jurisdictionStatus.is_pending && (
+                    <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>
+                )}
+                {jurisdictionStatus.is_failed && (
+                    <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 />, {
+                                            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 = () => {
+    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

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