fix: mt5 get more button not launching jurisdicton modal and cfd malt…

…ainvest (#13056)
deriv-com · Jan 19, 2024 · 6509df7 · 6509df7 · vercel · Jan 19, 2024
1 parent 2380193
commit 6509df7
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/packages/api/src/hooks/useSortedMT5Accounts.ts b/packages/api/src/hooks/useSortedMT5Accounts.ts
@@ -20,7 +20,13 @@ const useSortedMT5Accounts = (regulation?: string) => {
             ? all_available_mt5_accounts.filter(account => account.shortcode === 'maltainvest')
             : all_available_mt5_accounts;
 
-        const filtered_mt5_accounts = mt5_accounts.filter(account => account.is_virtual === activeAccount?.is_virtual);
+        const filtered_mt5_accounts = mt5_accounts.filter(
+            account =>
+                account.is_virtual === activeAccount?.is_virtual &&
+                (isEU
+                    ? account.landing_company_short === 'maltainvest'
+                    : account.landing_company_short !== 'maltainvest')
+        );
 
         return filtered_available_accounts?.map(available_account => {
             const created_account = filtered_mt5_accounts?.find(account => {

diff --git a/packages/tradershub/src/features/cfd/components/MT5PlatformsList/MT5PlatformsList.tsx b/packages/tradershub/src/features/cfd/components/MT5PlatformsList/MT5PlatformsList.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useMemo } from 'react';
 import { useActiveTradingAccount, useAuthorize, useInvalidateQuery, useSortedMT5Accounts } from '@deriv/api';
 import { useUIContext } from '../../../../components';
 import { TradingAppCardLoader } from '../../../../components/Loaders/TradingAppCardLoader';
+import useRegulationFlags from '../../../../hooks/useRegulationFlags';
 import { THooks } from '../../../../types';
 import { PlatformDetails } from '../../constants';
 import { AddedMT5AccountsList, AvailableMT5AccountsList } from '../../flows/MT5';
@@ -18,6 +19,7 @@ const MT5PlatformsList = ({ onMT5PlatformListLoaded }: TMT5PlatformsListProps) =
     const activeRegulation = getUIState('regulation');
     const { areAllAccountsCreated, data, isFetchedAfterMount } = useSortedMT5Accounts(activeRegulation ?? '');
     const { data: activeTradingAccount } = useActiveTradingAccount();
+    const { isEU } = useRegulationFlags(activeRegulation);
     const invalidate = useInvalidateQuery();
 
     const hasMT5Account = useMemo(() => {
@@ -35,6 +37,9 @@ const MT5PlatformsList = ({ onMT5PlatformListLoaded }: TMT5PlatformsListProps) =
         return () => onMT5PlatformListLoaded?.(false);
     }, [isFetchedAfterMount, onMT5PlatformListLoaded]);
 
+    const shouldShowGetMoreMT5Accounts =
+        hasMT5Account && !activeTradingAccount?.is_virtual && !areAllAccountsCreated && !isEU && isFetchedAfterMount;
+
     return (
         <CFDPlatformLayout title={PlatformDetails.mt5.title}>
             {!isFetchedAfterMount && <TradingAppCardLoader />}
@@ -50,7 +55,7 @@ const MT5PlatformsList = ({ onMT5PlatformListLoaded }: TMT5PlatformsListProps) =
                         />
                     );
                 })}
-            {hasMT5Account && !activeTradingAccount?.is_virtual && !areAllAccountsCreated && <GetMoreMT5Accounts />}
+            {shouldShowGetMoreMT5Accounts && <GetMoreMT5Accounts />}
         </CFDPlatformLayout>
     );
 };

diff --git a/packages/tradershub/src/features/cfd/modals/MT5AccountTypeModal/MT5AccountTypeModal.tsx b/packages/tradershub/src/features/cfd/modals/MT5AccountTypeModal/MT5AccountTypeModal.tsx
@@ -1,14 +1,16 @@
 import React, { ComponentProps, useState } from 'react';
 import { Provider } from '@deriv/library';
-import { Button } from '@deriv/quill-design';
+import { Button } from '@deriv-com/ui/dist/components/Button';
 import { Modal } from '../../../../components';
 import { MT5AccountType } from '../../screens';
+import { JurisdictionModal } from '../JurisdictionModal';
 
 type TMarketTypes = ComponentProps<typeof MT5AccountType>['selectedMarketType'];
 
 const MT5AccountTypeModal = () => {
     const [selectedMarketType, setSelectedMarketType] = useState<TMarketTypes>(undefined);
     const { setCfdState } = Provider.useCFDContext();
+    const { show } = Provider.useModal();
 
     return (
         <Modal>
@@ -18,13 +20,12 @@ const MT5AccountTypeModal = () => {
             </Modal.Content>
             <Modal.Footer>
                 <Button
-                    colorStyle='coral'
                     disabled={!selectedMarketType}
                     onClick={() => {
                         setCfdState('marketType', selectedMarketType);
+                        show(<JurisdictionModal />);
                     }}
                     size='md'
-                    variant='primary'
                 >
                     Next
                 </Button>