refactor: useSortedMT5Accounts to get default jurisdiction accounts

deriv-com · Sep 19, 2024 · 5711c04 · 5711c04
1 parent d19ae44
commit 5711c04
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 88 deletions.
diff --git a/packages/api-v2/src/hooks/useSortedMT5Accounts.ts b/packages/api-v2/src/hooks/useSortedMT5Accounts.ts
@@ -55,29 +55,36 @@ const useSortedMT5Accounts = (regulation?: string) => {
     const filtered_data = useMemo(() => {
         if (!modified_data) return;
 
-        const added_accounts = modified_data.filter(account => account.is_added);
-        const non_added_accounts = modified_data.filter(account => !account.is_added);
-
-        const filtered_non_added_accounts = non_added_accounts.reduce((acc, account) => {
-            const { market_type, product } = account;
-            const key = product === 'zero_spread' ? `${market_type}_${product}` : market_type;
-
-            const existing_account = acc.find(acc_account =>
-                acc_account.product === 'zero_spread'
-                    ? `${acc_account.market_type}_${acc_account.product}` === key
-                    : acc_account.market_type === key
-            );
-            const added_account = added_accounts.find(acc_account =>
-                acc_account.product === 'zero_spread'
-                    ? `${acc_account.market_type}_${acc_account.product}` === key
-                    : acc_account.market_type === key
-            );
-            if (existing_account || added_account) return acc;
-
-            return [...acc, account];
-        }, [] as typeof non_added_accounts);
-
-        return [...added_accounts, ...filtered_non_added_accounts];
+        // console.log(modified_data.filter(account => account.is_default_jurisdiction === 'true'));
+        // console.log(
+        //     modified_data.filter(
+        //         account => 'client_kyc_status' in account && account.is_default_jurisdiction === 'true'
+        //     )
+        // );
+
+        const added_accounts = modified_data.filter(
+            account => account.is_added && account.is_default_jurisdiction === 'true'
+        );
+        const non_added_accounts = modified_data.filter(
+            account => !account.is_added && account.is_default_jurisdiction === 'true'
+        );
+
+        // const filtered_non_added_accounts = non_added_accounts.reduce((acc, account) => {
+        //     const { market_type, product } = account;
+        //     const key = product === 'zero_spread' ? `${market_type}_${product}` : market_type;
+
+        //     const existing_account = acc.find(acc_account =>
+        //         acc_account.product === 'zero_spread'
+        //             ? `${acc_account.market_type}_${acc_account.product}` === key
+        //             : acc_account.market_type === key
+        //     );
+
+        //     if (existing_account) return acc;
+
+        //     return [...acc, account];
+        // }, [] as typeof non_added_accounts);
+
+        return [...added_accounts, ...non_added_accounts];
     }, [modified_data]);
 
     // Sort the data by market_type and product to make sure the order is 'synthetic', 'financial', 'swap_free' and 'zero_spread'

diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js
@@ -792,7 +792,6 @@ import './option/ic-option-over-under.svg';
 import './option/ic-option-raise-fall.svg';
 import './option/ic-option-touch-notouch.svg';
 import './option/ic-option-up-down-asian.svg';
-import './rebranding/ic-rebranding-binary-bot.svg';
 import './rebranding/ic-rebranding-ctrader-dashboard.svg';
 import './rebranding/ic-rebranding-deriv-bot-dashboard.svg';
 import './rebranding/ic-rebranding-deriv-bot.svg';

diff --git a/.../wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx b/.../wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx
@@ -1,18 +1,14 @@
-import React, { lazy, Suspense, useCallback, useEffect, useState } from 'react';
+import React, { useCallback } from 'react';
 import { useActiveWalletAccount, useMT5AccountsList, useTradingPlatformStatus } from '@deriv/api-v2';
 import { LabelPairedChevronRightCaptionRegularIcon } from '@deriv/quill-icons';
-import { Loader, Text } from '@deriv-com/ui';
+import { Text } from '@deriv-com/ui';
 import { TradingAccountCard } from '../../../../../components';
 import { useModal } from '../../../../../components/ModalProvider';
 import { THooks } from '../../../../../types';
 import { getMarketTypeDetails, MARKET_TYPE, PRODUCT, TRADING_PLATFORM_STATUS } from '../../../constants';
-import { JurisdictionModal, MT5PasswordModal, TradingPlatformStatusModal } from '../../../modals';
+import { ClientVerificationModal, MT5PasswordModal, TradingPlatformStatusModal } from '../../../modals';
 import './AvailableMT5AccountsList.scss';
 
-const LazyVerification = lazy(
-    () => import(/* webpackChunkName: "wallets-client-verification" */ '../../ClientVerification/ClientVerification')
-);
-
 type TProps = {
     account: THooks.AvailableMT5Accounts;
 };
@@ -22,7 +18,6 @@ const AvailableMT5AccountsList: React.FC<TProps> = ({ account }) => {
     const { getPlatformStatus } = useTradingPlatformStatus();
     const { setModalState, show } = useModal();
     const { description, title } = getMarketTypeDetails(account.product)[account.market_type || MARKET_TYPE.ALL];
-    const [showMt5PasswordModal, setShowMt5PasswordModal] = useState(false);
     const { data: mt5Accounts } = useMT5AccountsList();
     const platformStatus = getPlatformStatus(account.platform);
     const hasUnavailableAccount = mt5Accounts?.some(account => account.status === 'unavailable');
@@ -37,7 +32,9 @@ const AvailableMT5AccountsList: React.FC<TProps> = ({ account }) => {
                 return show(<TradingPlatformStatusModal />);
             case TRADING_PLATFORM_STATUS.ACTIVE:
             default:
-                if (activeWallet?.is_virtual || account.product === PRODUCT.SWAPFREE) {
+                if (account.client_kyc_status?.poi_status && account.client_kyc_status?.poi_status !== 'verified') {
+                    show(<ClientVerificationModal account={account} />);
+                } else {
                     show(
                         <MT5PasswordModal
                             isVirtual={activeWallet?.is_virtual}
@@ -46,49 +43,12 @@ const AvailableMT5AccountsList: React.FC<TProps> = ({ account }) => {
                             product={account.product}
                         />
                     );
-                } else if (account.product === PRODUCT.ZEROSPREAD) {
-                    show(
-                        <Suspense fallback={<Loader />}>
-                            <LazyVerification
-                                onCompletion={() => {
-                                    setShowMt5PasswordModal(true);
-                                }}
-                                selectedJurisdiction={account.shortcode}
-                            />
-                        </Suspense>
-                    );
-                } else {
-                    show(<JurisdictionModal />);
                 }
                 setModalState('marketType', account.market_type);
                 setModalState('selectedJurisdiction', account.shortcode);
                 break;
         }
-    }, [
-        hasUnavailableAccount,
-        show,
-        platformStatus,
-        account.platform,
-        account.market_type,
-        account.product,
-        account.shortcode,
-        activeWallet?.is_virtual,
-        setModalState,
-    ]);
-
-    useEffect(() => {
-        if (showMt5PasswordModal) {
-            show(
-                <MT5PasswordModal
-                    isVirtual={activeWallet?.is_virtual}
-                    marketType={account?.market_type || 'all'}
-                    platform={account.platform}
-                    product={account.product}
-                />
-            );
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [showMt5PasswordModal]);
+    }, [hasUnavailableAccount, show, platformStatus, activeWallet?.is_virtual, account, setModalState]);
 
     return (
         <TradingAccountCard onClick={onButtonClick}>

diff --git a/...ages/wallets/src/features/cfd/modals/ClientVerificationModal/ClientVerificationModal.scss b/...ages/wallets/src/features/cfd/modals/ClientVerificationModal/ClientVerificationModal.scss
@@ -7,8 +7,4 @@
     flex-direction: column;
     align-items: center;
     gap: 2.4rem;
-
-    @include mobile-or-tablet-screen {
-        max-width: 36rem;
-    }
 }
diff --git a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/ClientVerificationModal.tsx b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/ClientVerificationModal.tsx
@@ -3,24 +3,33 @@ import { DerivLightUploadPoiIcon } from '@deriv/quill-icons';
 import { Localize } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import { ModalStepWrapper } from '../../../../components';
+import { THooks } from '../../../../types';
+import { getMarketTypeDetails, MARKET_TYPE } from '../../constants';
 import { DocumentsList } from './components';
 import './ClientVerificationModal.scss';
 
-const getDescriptionText = () => {
+type TClientVerificationModal = {
+    account: THooks.AvailableMT5Accounts;
+};
+
+const getDescriptionText = (account: THooks.AvailableMT5Accounts) => {
+    const { title } = getMarketTypeDetails(account.product)[account.market_type || MARKET_TYPE.ALL];
+
     return (
         <Localize
             i18n_default_text={
                 'Once your account details are complete, your {{accountName}} account will be ready for you.'
             }
+            values={{ accountName: `MT5 ${title}` }}
         />
     );
 
     return <Localize i18n_default_text='Your account needs verification.' />;
 };
 
-const ClientVerificationModal = () => {
+const ClientVerificationModal: React.FC<TClientVerificationModal> = ({ account }) => {
     const { isMobile } = useDevice();
-    const description = getDescriptionText();
+    const description = getDescriptionText(account);
 
     return (
         <ModalStepWrapper title='Default service'>
@@ -29,7 +38,7 @@ const ClientVerificationModal = () => {
                 <Text align='center' size={isMobile ? 'md' : 'sm'}>
                     {description}
                 </Text>
-                <DocumentsList />
+                <DocumentsList statuses={account.client_kyc_status} />
             </div>
         </ModalStepWrapper>
     );

diff --git a/...rc/features/cfd/modals/ClientVerificationModal/components/DocumentsList/DocumentsList.tsx b/...rc/features/cfd/modals/ClientVerificationModal/components/DocumentsList/DocumentsList.tsx
@@ -1,13 +1,46 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { THooks } from '../../../../../../types';
 import { DocumentTile } from './components';
 import './DocumentsList.scss';
 
-const DocumentsList = () => {
+type TDocumentsListProps = {
+    statuses: THooks.AvailableMT5Accounts['client_kyc_status'];
+};
+
+type TStatuses = 'expired' | 'none' | 'pending' | 'rejected' | 'suspected' | 'verified';
+
+const statusBadge: Record<TStatuses, JSX.Element | null> = {
+    expired: <div>Failed</div>,
+    none: <div>none</div>,
+    pending: <div>In review</div>,
+    rejected: <div>Failed</div>,
+    suspected: <div>Failed</div>,
+    verified: <div>Verified</div>,
+};
+
+const DocumentsList: React.FC<TDocumentsListProps> = ({ statuses }) => {
+    const history = useHistory();
+
     return (
         <div className='wallets-documents-list'>
-            <DocumentTile title='Proof of identity' />
-            <DocumentTile title='Proof of address' />
-            <DocumentTile title='Personal Details' />
+            {'poi_status' in statuses && (
+                <DocumentTile
+                    badge={statusBadge[statuses.poi_status]}
+                    onClick={() => history.push('/account/proof-of-identity')}
+                    title='Proof of identity'
+                />
+            )}
+            {'poa_status' in statuses && (
+                <DocumentTile
+                    badge={statusBadge[statuses.poa_status]}
+                    onClick={() => history.push('/account/proof-of-address')}
+                    title='Proof of address'
+                />
+            )}
+            {'valid_tin' in statuses && (
+                <DocumentTile onClick={() => history.push('/account/personal-details')} title='Personal Details' />
+            )}
         </div>
     );
 };

diff --git a/...lientVerificationModal/components/DocumentsList/components/DocumentTile/DocumentTile.scss b/...lientVerificationModal/components/DocumentsList/components/DocumentTile/DocumentTile.scss
@@ -8,8 +8,11 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    cursor: pointer;
 
-    &__badge {
-        margin-right: 0.8rem;
+    &__status {
+        display: flex;
+        align-items: center;
+        gap: 0.8rem;
     }
 }
diff --git a/...ClientVerificationModal/components/DocumentsList/components/DocumentTile/DocumentTile.tsx b/...ClientVerificationModal/components/DocumentsList/components/DocumentTile/DocumentTile.tsx
@@ -4,17 +4,17 @@ import { Text } from '@deriv-com/ui';
 import './DocumentTile.scss';
 
 type TDocumentTileProps = {
-    badge: JSX.Element;
+    badge?: JSX.Element;
     onClick: VoidFunction;
     title: string;
 };
 
 const DocumentTile: React.FC<TDocumentTileProps> = ({ badge, onClick, title }) => {
     return (
         <button className='wallets-document-tile' onClick={onClick}>
-            <Text>{title}</Text>
+            <Text align='start'>{title}</Text>
             <div className='wallets-document-tile__status'>
-                <div className='wallets-document-tile__badge'>{badge}</div>
+                {badge}
                 <LabelPairedChevronRightMdRegularIcon />
             </div>
         </button>