DON't MERGE - [WALL] george / WALL-5147 / Gold MT5 account creation f…

…low on Wallets (#17607)

* feat(wallets): ✨ add Gold MT5 account creation real and demo

* chore: replace company name from API for tnc, add dml shortcode support

* chore: add gold mt5 acc into compare acc table

* feat(wallets): ✨ add mt5 gold into compare accounts table real + demo

* feat(wallets): ✨ add mf mt5 gold support

* feat(wallets): ✨ implement compare accounts table for MFW clients

* fix(wallets): 🔥 remove Boom 300 from compare acc table

packages/api-v2/src/hooks/__tests__/useSortedMT5Accounts.spec.ts

@@ -1,10 +1,11 @@
+import { cleanup } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
+
 import useActiveAccount from '../useActiveAccount';
 import useAvailableMT5Accounts from '../useAvailableMT5Accounts';
 import useIsEuRegion from '../useIsEuRegion';
 import useMT5AccountsList from '../useMT5AccountsList';
 import useSortedMT5Accounts from '../useSortedMT5Accounts';
-import { cleanup } from '@testing-library/react';
 
 jest.mock('../useActiveAccount', () => jest.fn());
 jest.mock('../useAvailableMT5Accounts', () => jest.fn());
@@ -42,6 +43,11 @@ const mockMT5NonEUAvailableAccounts = [
         product: 'zero_spread',
         shortcode: 'bvi',
     },
+    {
+        is_default_jurisdiction: 'true',
+        product: 'gold',
+        shortcode: 'bvi',
+    },
     {
         is_default_jurisdiction: 'true',
         product: 'swap_free',
@@ -65,6 +71,11 @@ const mockMT5NonEUAddedAccounts = [
         landing_company_short: 'bvi',
         product: 'zero_spread',
     },
+    {
+        is_virtual: false,
+        landing_company_short: 'bvi',
+        product: 'gold',
+    },
 ];
 
 const mockMT5EUAvailableAccounts = [
@@ -135,6 +146,12 @@ describe('useSortedMT5Accounts', () => {
                 product: 'zero_spread',
                 shortcode: 'bvi',
             },
+            {
+                is_added: false,
+                is_default_jurisdiction: 'true',
+                product: 'gold',
+                shortcode: 'bvi',
+            },
         ]);
     });
 
@@ -199,6 +216,12 @@ describe('useSortedMT5Accounts', () => {
                 landing_company_short: 'bvi',
                 product: 'zero_spread',
             },
+            {
+                is_added: true,
+                is_virtual: false,
+                landing_company_short: 'bvi',
+                product: 'gold',
+            },
         ]);
     });
 
@@ -241,6 +264,7 @@ describe('useSortedMT5Accounts', () => {
             'stp',
             'swap_free',
             'zero_spread',
+            'gold',
         ]);
     });
 
@@ -297,6 +321,12 @@ describe('useSortedMT5Accounts', () => {
                 landing_company_short: 'bvi',
                 product: 'zero_spread',
             },
+            {
+                is_added: true,
+                is_virtual: false,
+                landing_company_short: 'bvi',
+                product: 'gold',
+            },
         ]);
     });
 });

packages/api-v2/src/hooks/useCFDCompareAccounts.tsx

@@ -1,9 +1,7 @@
 import { useMemo } from 'react';
-import useActiveWalletAccount from './useActiveWalletAccount';
+
 import useAvailableMT5Accounts from './useAvailableMT5Accounts';
 import useLandingCompany from './useLandingCompany';
-import useMT5AccountsList from './useMT5AccountsList';
-import useActiveTradingAccount from './useActiveTradingAccount';
 
 // Remove the hardcoded values and use the values from the API once it's ready
 export const MARKET_TYPE = {
@@ -76,89 +74,40 @@ const ctraderAccount = {
 };
 
 /** A custom hook that gets compare accounts values. */
-const useCFDCompareAccounts = (isEU?: boolean) => {
-    const { data: activeWallet } = useActiveWalletAccount();
-    const { data: activeDerivTradingAccount } = useActiveTradingAccount();
-    const { is_virtual: isDemoWallet } = activeWallet ?? {};
-    const { is_virtual: isDemoTrading } = activeDerivTradingAccount ?? {};
-
-    const isDemo = isDemoWallet || isDemoTrading;
-
-    const { data: allAvailableMt5Accounts } = useAvailableMT5Accounts();
-    const { data: addedAccounts, ...rest } = useMT5AccountsList();
-
-    const modifiedMt5Data = useMemo(() => {
-        if (!allAvailableMt5Accounts || !addedAccounts) return;
-
-        return allAvailableMt5Accounts?.map(availableAccount => {
-            const createdAccount = addedAccounts?.find(account => {
-                return (
-                    availableAccount.market_type === account.market_type &&
-                    availableAccount.shortcode === account.landing_company_short
-                );
-            });
-            if (createdAccount)
-                return {
-                    ...availableAccount,
-
-                    /** Determine if the account is added or not */
-                    is_added: true,
-                } as const;
-
-            return {
-                ...availableAccount,
-
-                /** Determine if the account is added or not */
-                is_added: false,
-            } as const;
-        });
-    }, [addedAccounts, allAvailableMt5Accounts]);
-
-    // Sort the data by market_type to make sure the order is 'synthetic', 'financial', 'all'
-    const sortedMt5Accounts = useMemo(() => {
-        const marketTypeOrder = ['synthetic', 'financial', 'all'];
-
-        if (!modifiedMt5Data) return;
-
-        if (isEU) {
-            return modifiedMt5Data.filter(
-                account => account.shortcode === 'maltainvest' && account.market_type === 'financial'
-            );
-        }
-
-        const sortedData = marketTypeOrder.reduce((acc, marketType) => {
-            const accounts = modifiedMt5Data.filter(
-                account => account.market_type === marketType && account.shortcode !== 'maltainvest'
-            );
-            if (!accounts.length) return acc;
-            return [...acc, ...accounts];
-        }, [] as typeof modifiedMt5Data);
-        return sortedData;
-    }, [isEU, modifiedMt5Data]);
-
+const useCFDCompareAccounts = () => {
+    const { data: all_available_mt5_accounts, ...rest } = useAvailableMT5Accounts();
     const { data: landingCompany } = useLandingCompany();
 
     const hasDxtradeAccountAvailable = landingCompany?.dxtrade_all_company;
     const hasCTraderAccountAvailable = landingCompany?.ctrader?.all?.standard === JURISDICTION.SVG;
 
-    const demoAvailableAccounts = useMemo(() => {
-        if (!sortedMt5Accounts) return;
-        if (isEU) return sortedMt5Accounts.filter(account => account.shortcode === JURISDICTION.MALTAINVEST);
-        return sortedMt5Accounts.filter(account => {
-            if (account.product === PRODUCT.ZEROSPREAD) {
-                return account.shortcode === JURISDICTION.BVI;
-            }
-            return account.shortcode === JURISDICTION.SVG;
-        });
-    }, [isEU, sortedMt5Accounts]);
+    const sortedMt5Accounts = useMemo(() => {
+        const sorting_order = ['standard', 'financial', 'stp', 'swap_free', 'zero_spread', 'gold'];
+
+        if (!all_available_mt5_accounts) return;
+
+        const sorted_data = sorting_order.reduce(
+            (acc, sort_order) => {
+                const accounts = all_available_mt5_accounts.filter(account => account.product === sort_order);
+                if (!accounts.length) return acc;
+                return [...acc, ...accounts];
+            },
+            [] as typeof all_available_mt5_accounts
+        );
+
+        return sorted_data;
+    }, [all_available_mt5_accounts]);
 
     const modifiedData = useMemo(() => {
         return {
             ctraderAccount: hasCTraderAccountAvailable ? ctraderAccount : undefined,
             dxtradeAccount: hasDxtradeAccountAvailable ? dxtradeAccount : undefined,
-            mt5Accounts: isDemo ? demoAvailableAccounts : sortedMt5Accounts,
+            mt5Accounts: sortedMt5Accounts?.filter(
+                //@ts-expect-error need update api-types
+                account => account.is_default_jurisdiction === 'true'
+            ),
         };
-    }, [demoAvailableAccounts, hasCTraderAccountAvailable, hasDxtradeAccountAvailable, isDemo, sortedMt5Accounts]);
+    }, [hasCTraderAccountAvailable, hasDxtradeAccountAvailable, sortedMt5Accounts]);
 
     return {
         data: modifiedData,

packages/api-v2/src/hooks/useSortedMT5Accounts.ts

@@ -1,17 +1,18 @@
 import { useMemo } from 'react';
-import useMT5AccountsList from './useMT5AccountsList';
+
+import useActiveAccount from './useActiveAccount';
 import useAvailableMT5Accounts from './useAvailableMT5Accounts';
 import useIsEuRegion from './useIsEuRegion';
-import useActiveAccount from './useActiveAccount';
+import useMT5AccountsList from './useMT5AccountsList';
 
 /** A custom hook to get the sorted added and non-added MT5 accounts. */
-const useSortedMT5Accounts = (regulation?: string) => {
+const useSortedMT5Accounts = (isEUClient: boolean = false) => {
     const { data: all_available_mt5_accounts } = useAvailableMT5Accounts();
     const { isEUCountry } = useIsEuRegion();
     const { data: mt5_accounts, ...rest } = useMT5AccountsList();
     const { data: activeAccount } = useActiveAccount();
 
-    const isEU = regulation === 'EU' || isEUCountry;
+    const isEU = isEUClient || isEUCountry;
 
     const modified_data = useMemo(() => {
         if (!all_available_mt5_accounts || !mt5_accounts) return;
@@ -47,15 +48,18 @@ const useSortedMT5Accounts = (regulation?: string) => {
     }, [activeAccount?.is_virtual, all_available_mt5_accounts, isEU, mt5_accounts]);
 
     const sorted_data = useMemo(() => {
-        const sorting_order = ['standard', 'financial', 'stp', 'swap_free', 'zero_spread'];
+        const sorting_order = ['standard', 'financial', 'stp', 'swap_free', 'zero_spread', 'gold'];
 
         if (!modified_data) return;
 
-        const sorted_data = sorting_order.reduce((acc, sort_order) => {
-            const accounts = modified_data.filter(account => account.product === sort_order);
-            if (!accounts.length) return acc;
-            return [...acc, ...accounts];
-        }, [] as typeof modified_data);
+        const sorted_data = sorting_order.reduce(
+            (acc, sort_order) => {
+                const accounts = modified_data.filter(account => account.product === sort_order);
+                if (!accounts.length) return acc;
+                return [...acc, ...accounts];
+            },
+            [] as typeof modified_data
+        );
 
         return sorted_data;
     }, [modified_data]);

packages/wallets/src/components/ClientVerificationModal/components/DocumentsList/DocumentsList.tsx

@@ -25,18 +25,8 @@ const statusBadge: TStatusBadgeProps = {
 const DocumentsList: React.FC<TDocumentsListProps> = ({ account }) => {
     const history = useHistory();
     const { localize } = useTranslations();
-    const {
-        hasPoaStatus,
-        hasPoiStatus,
-        hasRequiredTin,
-        hasTinStatus,
-        isPoaRequired,
-        isPoiRequired,
-        isTinRequired,
-        statuses,
-    } = getClientVerification(account);
-
-    const shouldShowTin = hasRequiredTin && hasTinStatus && isTinRequired;
+    const { hasPoaStatus, hasPoiStatus, isPoaRequired, isPoiRequired, isTinRequired, statuses } =
+        getClientVerification(account);
 
     return (
         <div className='wallets-documents-list'>
@@ -63,7 +53,7 @@ const DocumentsList: React.FC<TDocumentsListProps> = ({ account }) => {
                     title={localize('Proof of address')}
                 />
             )}
-            {shouldShowTin && (
+            {isTinRequired && (
                 <DocumentTile
                     // @ts-expect-error the following link is not part of wallets routes config
                     onClick={() => history.push('/account/personal-details')}

packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentProps, FC } from 'react';
-import { CFDPlatformIcons, MT5MarketIcons } from '../../constants/icons';
+import { CFDPlatformIcons, MT5GoldIcon, MT5MarketIcons } from '../../constants/icons';
 import { CFD_PLATFORMS, MARKET_TYPE } from '../../features/cfd/constants';
 import { THooks, TPlatforms } from '../../types';
 import { WalletCurrencyCard } from '../WalletCurrencyCard';
@@ -11,7 +11,7 @@ type TWalletMarketCurrencyIconProps = {
     isDemo: THooks.ActiveWalletAccount['is_virtual'];
     marketType?: keyof typeof MT5MarketIcons;
     platform?: TPlatforms.All;
-    product?: THooks.AvailableMT5Accounts['product'];
+    product?: THooks.AvailableMT5Accounts['product'] | 'gold';
     size?: ComponentProps<typeof WalletCurrencyCard>['size'];
 };
 
@@ -27,6 +27,8 @@ const WalletMarketCurrencyIcon: FC<TWalletMarketCurrencyIconProps> = ({
     let MarketTypeIcon;
     if (marketType === MARKET_TYPE.ALL && platform && marketTypeAllkey in CFDPlatformIcons) {
         MarketTypeIcon = marketTypeAllkey;
+    } else if (platform === CFD_PLATFORMS.MT5 && product && product in MT5GoldIcon) {
+        MarketTypeIcon = product;
     } else if (platform === CFD_PLATFORMS.MT5 && marketType && marketType in MT5MarketIcons) {
         MarketTypeIcon = marketType;
     } else MarketTypeIcon = 'standard';

packages/wallets/src/components/WalletMarketIcon/WalletMarketIcon.tsx

@@ -1,13 +1,14 @@
 /* eslint-disable sort-keys */
 import React, { CSSProperties } from 'react';
-import { AppIcons, CFDPlatformIcons, MT5MarketIcons, PlatformIcons } from '../../constants/icons';
+import { AppIcons, CFDPlatformIcons, MT5GoldIcon, MT5MarketIcons, PlatformIcons } from '../../constants/icons';
 import { TIconTypes } from '../../types';
 
-const Icons: TIconTypes = {
+const Icons: Record<string, React.ComponentType<React.SVGAttributes<SVGElement>>> | TIconTypes = {
     ...AppIcons,
     ...MT5MarketIcons,
     ...CFDPlatformIcons,
     ...PlatformIcons,
+    ...MT5GoldIcon,
 };
 
 const IconSizes = {

packages/wallets/src/constants/icons.ts → packages/wallets/src/constants/icons.tsx

@@ -29,6 +29,7 @@ import {
     PaymentMethodUsdCoinBrandIcon,
     PaymentMethodXrpBrandIcon,
 } from '@deriv/quill-icons';
+import AccountsDmt5GoldIcon from '../public/images/account-dmt5-gold-icon.svg';
 import { TCurrencyIconTypes, TIconTypes } from '../types';
 
 export const AppIcons: TIconTypes = {
@@ -56,6 +57,11 @@ export const PlatformIcons: TIconTypes = {
     standard: AccountsDerivAccountLightIcon,
 };
 
+export const MT5GoldIcon = {
+    //TODO: replace with icon from quill-icons and change the extension of the file from tsx to ts
+    gold: AccountsDmt5GoldIcon,
+};
+
 // Currencies icons
 export const fiatIcons = ['AUD', 'EUR', 'GBP', 'USD'] as const;
 

packages/wallets/src/features/cashier/constants/constants.ts

@@ -83,6 +83,10 @@ export const MT5MarketTypeDetails: Record<TMarketTypes.All, TMT5MarketTypeDetail
         },
         name: 'financial',
         product: {
+            gold: {
+                name: 'financial',
+                title: 'MT5 Gold',
+            },
             stp: {
                 name: 'financial',
                 title: 'MT5 Financial STP',

packages/wallets/src/features/cashier/helpers/__tests__/helpers.spec.ts

@@ -89,6 +89,18 @@ describe('Cashier Helpers', () => {
             ).toBe(MT5MarketTypeDetails.financial.product?.stp?.title);
         });
 
+        it('returns correct name for MT5 financial GOLD account', () => {
+            expect(
+                getAccountName({
+                    accountCategory: 'trading',
+                    accountType: PlatformDetails.mt5.name,
+                    landingCompanyName: 'svg',
+                    mt5MarketType: MT5MarketTypeDetails.financial.name,
+                    product: 'gold',
+                })
+            ).toBe(MT5MarketTypeDetails.financial.product?.gold?.title);
+        });
+
         it('returns correct name for MT5 synthetic account', () => {
             expect(
                 getAccountName({