feat(wallets): 🎨 add poipoadocssubmitted screen, fix logic for resubm…

…ission (deriv-com#15341)

packages/wallets/src/features/accounts/screens/PoiPoaDocsSubmitted/PoiPoaDocsSubmitted.scss

@@ -0,0 +1,13 @@
+.wallets-poi-poa-submitted {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 99.6rem;
+    height: 60rem;
+
+    @include mobile {
+        width: 100%;
+        height: 100%;
+        padding: 0 1.6rem;
+    }
+}

packages/wallets/src/features/accounts/screens/PoiPoaDocsSubmitted/PoiPoaDocsSubmitted.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { useInvalidateQuery } from '@deriv/api-v2';
+import { DerivLightWaitingPoiIcon } from '@deriv/quill-icons';
+import { WalletButton, WalletsActionScreen } from '../../../../components';
+import { useModal } from '../../../../components/ModalProvider';
+import './PoiPoaDocsSubmitted.scss';
+
+const PoiPoaDocsSubmitted = () => {
+    const invalidate = useInvalidateQuery();
+    const { hide } = useModal();
+
+    // need invalidate queries in order to update status badge of CFD account
+    useEffect(() => {
+        return () => {
+            invalidate('get_account_status');
+            invalidate('mt5_login_list');
+        };
+    }, [invalidate]);
+
+    return (
+        <div className='wallets-poi-poa-submitted'>
+            <WalletsActionScreen
+                description="We'll review your documents and notify you of its status within 1 - 3 working days."
+                icon={<DerivLightWaitingPoiIcon height={128} width={128} />}
+                renderButtons={() => (
+                    <WalletButton onClick={hide} size='lg'>
+                        Ok
+                    </WalletButton>
+                )}
+                title='Your documents were submitted successfully'
+            />
+        </div>
+    );
+};
+
+export default PoiPoaDocsSubmitted;

packages/wallets/src/features/accounts/screens/PoiPoaDocsSubmitted/index.ts

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

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

@@ -5,5 +5,6 @@ export * from './IDVDocumentUpload';
 export * from './ManualDocumentUpload';
 export * from './PersonalDetails';
 export * from './PoaScreen';
+export * from './PoiPoaDocsSubmitted';
 export * from './PoiUploadError';
 export * from './SelfieDocumentUpload';

packages/wallets/src/features/cfd/flows/Verification/Verification.tsx

@@ -1,5 +1,12 @@
 import React, { FC, useCallback, useMemo } from 'react';
-import { useDocumentUpload, useIdentityDocumentVerificationAdd, usePOA, usePOI, useSettings } from '@deriv/api-v2';
+import {
+    useDocumentUpload,
+    useIdentityDocumentVerificationAdd,
+    useMT5AccountsList,
+    usePOA,
+    usePOI,
+    useSettings,
+} from '@deriv/api-v2';
 import { ModalStepWrapper, WalletButton, WalletButtonGroup } from '../../../../components/Base';
 import { FlowProvider, TFlowProviderContext } from '../../../../components/FlowProvider';
 import { Loader } from '../../../../components/Loader';
@@ -8,14 +15,15 @@ import useDevice from '../../../../hooks/useDevice';
 import { THooks } from '../../../../types';
 import { ErrorCode } from '../../../accounts/constants';
 import {
+    IDVDocumentUpload,
     ManualDocumentUpload,
+    PersonalDetails,
     PoaScreen,
+    PoiPoaDocsSubmitted,
+    PoiUploadError,
     SelfieDocumentUpload,
     useHandleManualDocumentUpload,
 } from '../../../accounts/screens';
-import { IDVDocumentUpload } from '../../../accounts/screens/IDVDocumentUpload';
-import { PersonalDetails } from '../../../accounts/screens/PersonalDetails';
-import { PoiUploadError } from '../../../accounts/screens/PoiUploadError';
 import { PlatformDetails } from '../../constants';
 import { MT5PasswordModal } from '../../modals';
 import { Onfido } from '../../screens';
@@ -36,6 +44,7 @@ const screens = {
     onfidoScreen: <Onfido />,
     personalDetailsScreen: <PersonalDetails />,
     poaScreen: <PoaScreen />,
+    poiPoaDocsSubmitted: <PoiPoaDocsSubmitted />,
     selfieScreen: <SelfieDocumentUpload />,
 };
 
@@ -78,6 +87,7 @@ const getManualVerificationFooter = ({
 };
 
 const Verification: FC<TVerificationProps> = ({ selectedJurisdiction }) => {
+    const { data: mt5AccountsList } = useMT5AccountsList();
     const { data: poiStatus, isSuccess: isSuccessPOIStatus } = usePOI();
     const { data: poaStatus, isSuccess: isSuccessPOAStatus } = usePOA();
     const { isLoading: isUploadLoading, upload } = useDocumentUpload();
@@ -94,6 +104,7 @@ const Verification: FC<TVerificationProps> = ({ selectedJurisdiction }) => {
 
     const selectedMarketType = getModalState('marketType') ?? 'all';
     const platform = getModalState('platform') ?? PlatformDetails.mt5.platform;
+    const hasCreatedMT5Accounts = mt5AccountsList?.some(account => account.account_type === 'real');
 
     const shouldSubmitPOA = useMemo(() => {
         if (poaStatus?.is_pending) return false;
@@ -245,6 +256,8 @@ const Verification: FC<TVerificationProps> = ({ selectedJurisdiction }) => {
                     switchScreen('poaScreen');
                 } else if (shouldFillPersonalDetails) {
                     switchScreen('personalDetailsScreen');
+                } else if (hasCreatedMT5Accounts) {
+                    switchScreen('poiPoaDocsSubmitted');
                 } else {
                     show(<MT5PasswordModal marketType={selectedMarketType} platform={platform} />);
                 }
@@ -282,6 +295,7 @@ const Verification: FC<TVerificationProps> = ({ selectedJurisdiction }) => {
             }
         },
         [
+            hasCreatedMT5Accounts,
             hide,
             platform,
             selectedMarketType,
@@ -307,30 +321,32 @@ const Verification: FC<TVerificationProps> = ({ selectedJurisdiction }) => {
             screens={screens}
         >
             {context => {
+                const footer = ['duplicateUploadErrorScreen', 'manualScreen', 'selfieScreen'].includes(
+                    context.currentScreenId
+                )
+                    ? getManualVerificationFooter({
+                          context,
+                          isNextDisabled: isNextDisabled(context),
+                          isNextLoading: isNextLoading(context),
+                          nextFlowHandler: () => nextFlowHandler(context),
+                      })
+                    : () => (
+                          <WalletButton
+                              disabled={isNextDisabled(context)}
+                              isFullWidth={isMobile}
+                              isLoading={isNextLoading(context)}
+                              onClick={() => nextFlowHandler(context)}
+                              size='lg'
+                          >
+                              Next
+                          </WalletButton>
+                      );
+
+                const renderFooter = context.currentScreenId === 'poiPoaDocsSubmitted' ? undefined : footer;
+
                 return (
                     <ModalStepWrapper
-                        renderFooter={
-                            ['duplicateUploadErrorScreen', 'manualScreen', 'selfieScreen'].includes(
-                                context.currentScreenId
-                            )
-                                ? getManualVerificationFooter({
-                                      context,
-                                      isNextDisabled: isNextDisabled(context),
-                                      isNextLoading: isNextLoading(context),
-                                      nextFlowHandler: () => nextFlowHandler(context),
-                                  })
-                                : () => (
-                                      <WalletButton
-                                          disabled={isNextDisabled(context)}
-                                          isFullWidth={isMobile}
-                                          isLoading={isNextLoading(context)}
-                                          onClick={() => nextFlowHandler(context)}
-                                          size='lg'
-                                      >
-                                          Next
-                                      </WalletButton>
-                                  )
-                        }
+                        renderFooter={renderFooter}
                         title={
                             context.currentScreenId === 'duplicateUploadErrorScreen'
                                 ? 'Submit your proof of identity'