diff --git a/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.jsx b/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.jsx index ef475c1cb888..34c9d41600cf 100644 --- a/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.jsx +++ b/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.jsx @@ -19,51 +19,31 @@ import PercentageSelector from 'Components/percentage-selector'; import RecentTransaction from 'Components/recent-transaction'; import './account-transfer-form.scss'; -const AccountOption = ({ mt5_login_list, account, idx, is_dark_mode_on }) => { - let server; - - if (account.is_mt) { - server = mt5_login_list.find(mt5_account => mt5_account.login === account.value); - } - - return ( - - {(account.currency || account.platform_icon) && ( -
- -
- )} - -
- - {account.is_dxtrade || account.is_mt ? account.text : getCurrencyName(account.currency)} - - - {account.value} - +const AccountOption = ({ account, idx }) => ( + + {(account.currency || account.platform_icon) && ( +
+
+ )} - {(server?.market_type === 'gaming' || server?.market_type === 'synthetic') && ( - - {server.server_info.geolocation.region}  - {server.server_info.geolocation.sequence !== 1 ? server.server_info.geolocation.sequence : ''} - - )} - - - - - - ); -}; +
+ + {account.is_dxtrade || account.is_mt ? account.text : getCurrencyName(account.currency)} + + + {account.value} + +
+ + + + + +); const AccountTransferBullet = ({ children }) => (
@@ -236,9 +216,7 @@ const AccountTransferForm = ({ error, is_crypto, is_dxtrade_allowed, - is_dark_mode_on, minimum_fee, - mt5_login_list, onChangeConverterFromAmount, onChangeConverterToAmount, onChangeTransferFrom, @@ -320,35 +298,19 @@ const AccountTransferForm = ({ dxtrade_accounts_to = []; accounts_list.forEach((account, idx) => { - const text = ( - - ); + const text = ; const value = account.value; - const account_server = mt5_login_list.find(server => server.login === account.value); const is_cfd_account = account.is_mt || account.is_dxtrade; - let server_region = ''; - if (account_server?.market_type === 'gaming' || account_server?.market_type === 'synthetic') { - server_region = `[${account_server.server_info.geolocation.region}${ - account_server.server_info.geolocation.sequence !== 1 - ? account_server.server_info.geolocation.sequence - : '' - }]`; - } getAccounts('from', account).push({ text, value, is_mt: account.is_mt, is_dxtrade: account.is_dxtrade, - nativepicker_text: `${ - is_cfd_account ? account.market_type : getCurrencyName(account.currency) - } ${server_region} (${account.balance} ${is_cfd_account ? account.currency : account.text})`, + nativepicker_text: `${is_cfd_account ? account.market_type : getCurrencyName(account.currency)} (${ + account.balance + } ${is_cfd_account ? account.currency : account.text})`, }); const is_selected_from = account.value === selected_from.value; @@ -370,9 +332,9 @@ const AccountTransferForm = ({ is_mt: account.is_mt, is_dxtrade: account.is_dxtrade, disabled: is_disabled, - nativepicker_text: `${ - is_cfd_account ? account.market_type : getCurrencyName(account.currency) - } ${server_region} (${account.balance} ${is_cfd_account ? account.currency : account.text})`, + nativepicker_text: `${is_cfd_account ? account.market_type : getCurrencyName(account.currency)} (${ + account.balance + } ${is_cfd_account ? account.currency : account.text})`, }); } }); @@ -702,7 +664,7 @@ AccountTransferForm.propTypes = { validateTransferToAmount: PropTypes.func, }; -export default connect(({ client, modules, ui }) => ({ +export default connect(({ client, modules }) => ({ account_limits: client.account_limits, accounts_list: modules.cashier.account_transfer.accounts_list, account_transfer_amount: modules.cashier.account_transfer.account_transfer_amount, @@ -712,10 +674,8 @@ export default connect(({ client, modules, ui }) => ({ converter_to_error: modules.cashier.crypto_fiat_converter.converter_to_error, crypto_transactions: modules.cashier.transaction_history.crypto_transactions, is_crypto: modules.cashier.general_store.is_crypto, - is_dark_mode_on: ui.is_dark_mode_on, is_dxtrade_allowed: client.is_dxtrade_allowed, minimum_fee: modules.cashier.account_transfer.minimum_fee, - mt5_login_list: client.mt5_login_list, onChangeConverterFromAmount: modules.cashier.crypto_fiat_converter.onChangeConverterFromAmount, onChangeConverterToAmount: modules.cashier.crypto_fiat_converter.onChangeConverterToAmount, onChangeTransferFrom: modules.cashier.account_transfer.onChangeTransferFrom, diff --git a/packages/cfd/src/Components/cfd-account-card.tsx b/packages/cfd/src/Components/cfd-account-card.tsx index 5b426b68cb32..0c0d5de20983 100644 --- a/packages/cfd/src/Components/cfd-account-card.tsx +++ b/packages/cfd/src/Components/cfd-account-card.tsx @@ -320,7 +320,7 @@ const CFDAccountCard = ({ diff --git a/packages/cfd/src/Components/cfd-demo-account-display.tsx b/packages/cfd/src/Components/cfd-demo-account-display.tsx index 5043096934b2..6c4b794da1c3 100644 --- a/packages/cfd/src/Components/cfd-demo-account-display.tsx +++ b/packages/cfd/src/Components/cfd-demo-account-display.tsx @@ -6,6 +6,7 @@ import { general_messages } from '../Constants/cfd-shared-strings'; import Loading from '../templates/_common/components/loading'; import { DetailsOfEachMT5Loginid, LandingCompany } from '@deriv/api-types'; import { TTradingPlatformAccounts } from './props.types'; +import { TObjectCFDAccount } from 'Containers/cfd-dashboard'; type TStandPoint = { financial_company: string; @@ -32,7 +33,7 @@ type TCFDDemoAccountDisplayProps = { is_logged_in: boolean; isSyntheticCardVisible: (account_category: string) => boolean; isFinancialCardVisible: () => boolean; - onSelectAccount: (objCFDAccount: { category: string; type: string; set_password?: number }) => void; + onSelectAccount: (objCFDAccount: TObjectCFDAccount) => void; openAccountTransfer: ( data: DetailsOfEachMT5Loginid | TTradingPlatformAccounts, meta: TOpenAccountTransferMeta @@ -75,6 +76,7 @@ const CFDDemoAccountDisplay = ({ onSelectAccount({ category: 'demo', type: 'financial', + platform, }); } }; @@ -119,6 +121,7 @@ const CFDDemoAccountDisplay = ({ onSelectAccount({ category: 'demo', type: 'synthetic', + platform, }) } onPasswordManager={openPasswordManager} diff --git a/packages/cfd/src/Components/cfd-real-account-display.tsx b/packages/cfd/src/Components/cfd-real-account-display.tsx index 32c414655578..bfa63b5578b5 100644 --- a/packages/cfd/src/Components/cfd-real-account-display.tsx +++ b/packages/cfd/src/Components/cfd-real-account-display.tsx @@ -8,6 +8,7 @@ import { CFDAccountCard } from './cfd-account-card'; import { general_messages } from '../Constants/cfd-shared-strings'; import { DetailsOfEachMT5Loginid, ResidenceList, LandingCompany, GetSettings } from '@deriv/api-types'; import { TExistingData, TTradingPlatformAccounts } from './props.types.js'; +import { TObjectCFDAccount } from 'Containers/cfd-dashboard'; type TStandPoint = { financial_company: string; @@ -42,7 +43,7 @@ type TCFDRealAccountDisplayProps = { is_virtual: boolean; isFinancialCardVisible: () => boolean; landing_companies: LandingCompany; - onSelectAccount: (objCFDAccount: { category: string; type: string; set_password?: number }) => void; + onSelectAccount: (objCFDAccount: TObjectCFDAccount) => void; openAccountTransfer: ( data: DetailsOfEachMT5Loginid | TTradingPlatformAccounts, meta: TOpenAccountTransferMeta @@ -153,14 +154,14 @@ const CFDRealAccountDisplay = ({ if (is_eu && standpoint.malta && !has_malta_account) { openAccountNeededModal('malta', localize('Deriv Synthetic'), localize('DMT5 Synthetic')); } else { - onSelectAccount({ type: 'synthetic', category: 'real' }); + onSelectAccount({ type: 'synthetic', category: 'real', platform }); } }; const onSelectRealFinancial = () => { if (is_eu && !has_maltainvest_account) { openAccountNeededModal('maltainvest', localize('Deriv Multipliers'), localize('real CFDs')); } else { - onSelectAccount({ type: 'financial', category: 'real' }); + onSelectAccount({ type: 'financial', category: 'real', platform }); } }; diff --git a/packages/cfd/src/Containers/cfd-dashboard.tsx b/packages/cfd/src/Containers/cfd-dashboard.tsx index b3079ed38a40..03019d1538e4 100644 --- a/packages/cfd/src/Containers/cfd-dashboard.tsx +++ b/packages/cfd/src/Containers/cfd-dashboard.tsx @@ -85,12 +85,14 @@ type TMt5StatusServerType = { type TMt5StatusServer = Record<'demo' | 'real', TMt5StatusServerType[]>; +export type TObjectCFDAccount = { category: string; type: string; set_password?: number; platform?: string }; + type TCFDDashboardProps = { account_settings: { residence: string }; account_status: object; beginRealSignupForMt5: () => void; country: string; - createCFDAccount: (objCFDAccount: { category: string; type: string; set_password?: number }) => void; + createCFDAccount: (objCFDAccount: TObjectCFDAccount) => void; current_list: Array & { [key: string]: DetailsOfEachMT5Loginid }; dxtrade_accounts_list_error: null; isAccountOfTypeDisabled: ( diff --git a/packages/cfd/src/Containers/jurisdiction-modal.tsx b/packages/cfd/src/Containers/jurisdiction-modal.tsx index 1125979d2b87..79fe412e4ffa 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal.tsx @@ -7,6 +7,23 @@ import { CFD_PLATFORMS } from '@deriv/shared'; import { LandingCompany } from '@deriv/api-types'; import JurisdictionModalContent from './jurisdiction-modal-content'; +type TTradingPlatformAvailableAccount = { + market_type: 'financial' | 'gaming'; + name: string; + requirements: { + after_first_deposit: { + financial_assessment: string[]; + }; + compliance: { + mt5: string[]; + tax_information: string[]; + }; + signup: string[]; + }; + shortcode: 'bvi' | 'labuan' | 'svg' | 'vanuatu'; + sub_account_type: string; +}; + type TCompareAccountsReusedProps = { landing_companies: LandingCompany; platform: string; @@ -29,7 +46,7 @@ type TJurisdictionModalProps = TCompareAccountsReusedProps & { residence: string; jurisdiction_selected_card: boolean; toggleJurisdictionModal: () => void; - tradingPlatformAvailableAccounts: any[]; + tradingPlatformAvailableAccounts: TTradingPlatformAvailableAccount[]; }; const JurisdictionModal = ({ @@ -45,13 +62,19 @@ const JurisdictionModal = ({ toggleJurisdictionModal, tradingPlatformAvailableAccounts, }: TJurisdictionModalProps) => { - const financial_available_accounts = tradingPlatformAvailableAccounts - .filter(available_account => available_account.market_type === 'financial') - .map((acc: any[]) => acc); + const financial_available_accounts = tradingPlatformAvailableAccounts.filter( + available_account => available_account.market_type === 'financial' + ); + + const synthetic_available_accounts = tradingPlatformAvailableAccounts.filter( + available_account => available_account.market_type === 'gaming' + ); - const synthetic_available_accounts = tradingPlatformAvailableAccounts - .filter(available_account => available_account.market_type === 'gaming') - .map((acc: any[]) => acc); + const modal_title = is_eu + ? localize('Jurisdiction for your DMT5 CFDs account') + : localize('Choose a jurisdiction for your DMT5 {{account_type}} account', { + account_type: account_type === 'synthetic' ? 'Synthetic' : 'Financial', + }); const poa_status = authentication_status?.document_status; const poi_status = authentication_status?.identity_status; @@ -62,14 +85,6 @@ const JurisdictionModal = ({ className='cfd-compare-accounts-modal__wrapper' style={{ marginTop: platform === CFD_PLATFORMS.DXTRADE ? '5rem' : '2.4rem' }} > -
@@ -694,7 +697,6 @@ const AccountSwitcher = props => {
{getRealMT5().map(account => ( { findServerForAccount(account) ); }} - server={findServerForAccount(account)} platform={CFD_PLATFORMS.MT5} + shortcode={account.landing_company_short} /> ))}
@@ -931,6 +933,7 @@ AccountSwitcher.propTypes = { toggleAccountsDialog: PropTypes.func, togglePositionsDrawer: PropTypes.func, toggleSetCurrencyModal: PropTypes.func, + trading_platform_available_accounts: PropTypes.array, updateMt5LoginList: PropTypes.func, }; @@ -986,6 +989,7 @@ const account_switcher = withRouter( toggleSetCurrencyModal: ui.toggleSetCurrencyModal, should_show_real_accounts_list: ui.should_show_real_accounts_list, toggleShouldShowRealAccountsList: ui.toggleShouldShowRealAccountsList, + trading_platform_available_accounts: client.trading_platform_available_accounts, }))(AccountSwitcher) ); diff --git a/packages/core/src/App/Containers/AccountSwitcher/helpers/account-helper.js b/packages/core/src/App/Containers/AccountSwitcher/helpers/account-helper.js index fae7f656e634..98f2024f8e38 100644 --- a/packages/core/src/App/Containers/AccountSwitcher/helpers/account-helper.js +++ b/packages/core/src/App/Containers/AccountSwitcher/helpers/account-helper.js @@ -51,7 +51,8 @@ export const getCFDConfig = ( existing_cfd_accounts, mt5_trading_servers, platform, - is_eu + is_eu, + trading_platform_available_accounts ) => { const cfd_config = []; @@ -64,7 +65,7 @@ export const getCFDConfig = ( } return account.sub_account_type === company && account_market_type === market_type; }); - if (has_account && platform === CFD_PLATFORMS.MT5) { + if (has_account && platform === CFD_PLATFORMS.MT5 && is_eu) { const number_market_type_available = mt5_trading_servers.filter(s => { const server_market_type = s.market_type === 'synthetic' ? 'gaming' : s.market_type; return market_type === server_market_type && !s.disabled; @@ -73,17 +74,46 @@ export const getCFDConfig = ( has_account = false; } } - if (!has_account) { + if (!has_account && (is_eu || platform === CFD_PLATFORMS.DXTRADE)) { const type = getCFDAccountKey({ market_type, sub_account_type: company, platform }); if (type) { cfd_config.push({ icon: getCFDAccount({ market_type, sub_account_type: company, platform, is_eu }), - title: getCFDAccountDisplay({ market_type, sub_account_type: company, platform, is_eu }), + title: getCFDAccountDisplay({ + market_type, + sub_account_type: company, + platform, + is_eu, + is_remaining_account: true, + }), type, }); } } }); } + if (!is_eu && trading_platform_available_accounts && platform === CFD_PLATFORMS.MT5) { + // show remaining Synthetic and/or Financial while a client can still open more accounts of this particular type + ['gaming', 'financial'].forEach(account_type => { + if (account_type === market_type) { + const can_have_more_accounts = + existing_cfd_accounts.filter(a => a.market_type === account_type).length < + trading_platform_available_accounts.filter(p => p.market_type === account_type).length; + if (can_have_more_accounts) { + cfd_config.push({ + icon: getCFDAccount({ market_type, sub_account_type: 'financial', platform, is_eu }), + title: getCFDAccountDisplay({ + market_type, + sub_account_type: 'financial', + platform, + is_eu, + }), + type: account_type === 'gaming' ? 'synthetic' : 'financial', + }); + } + } + }); + } + return cfd_config; }; diff --git a/packages/core/src/Constants/cfd-text.js b/packages/core/src/Constants/cfd-text.js index 14d235985240..a8872c399e41 100644 --- a/packages/core/src/Constants/cfd-text.js +++ b/packages/core/src/Constants/cfd-text.js @@ -3,8 +3,14 @@ import { localize } from '@deriv/translations'; export const CFD_TEXT = { dxtrade: () => localize('Deriv X'), mt5: () => localize('MT5'), + mt5_cfds_mfsa: () => localize('MT5 CFDs MFSA'), cfd: () => localize('CFDs'), synthetic: () => localize('Synthetic'), + synthetic_bvi: () => localize('Synthetic BVI'), + synthetic_svg: () => localize('Synthetic SVG'), financial: () => localize('Financial'), - financial_stp: () => localize('Financial STP'), + financial_bvi: () => localize('Financial BVI'), + financial_fx: () => localize('Financial Labuan'), + financial_v: () => localize('Financial Vanuatu'), + financial_svg: () => localize('Financial SVG'), }; diff --git a/packages/core/src/sass/app/_common/components/account-switcher.scss b/packages/core/src/sass/app/_common/components/account-switcher.scss index fbb6545e6858..87394a5cd543 100644 --- a/packages/core/src/sass/app/_common/components/account-switcher.scss +++ b/packages/core/src/sass/app/_common/components/account-switcher.scss @@ -377,6 +377,7 @@ } &__balance { margin-left: auto; + text-align: right; } &__separator { display: block; @@ -450,20 +451,3 @@ line-height: 1.5; text-align: right; } - -/** @define badge-server; weak */ -.badge-server { - display: inline-block; - background-color: $color-blue-2; - padding: 0.2rem; - border-radius: 0.2rem; - margin-left: 0.5rem; - height: 2.2rem; - - &-bot { - color: var(--text-colored-background); - } - &--disabled { - background-color: var(--border-disabled); - } -} diff --git a/packages/shared/src/utils/cfd/cfd.js b/packages/shared/src/utils/cfd/cfd.js index 34a249ff4dbd..8d46f7e18892 100644 --- a/packages/shared/src/utils/cfd/cfd.js +++ b/packages/shared/src/utils/cfd/cfd.js @@ -6,10 +6,16 @@ let CFD_text_translated; const CFD_text = { dxtrade: 'Deriv X', mt5: 'MT5', + mt5_cfds_mfsa: 'MT5 CFDs MFSA', cfd: 'CFDs', synthetic: 'Synthetic', + synthetic_bvi: 'Synthetic BVI', + synthetic_svg: 'Synthetic SVG', financial: 'Financial', - financial_stp: 'Financial STP', + financial_bvi: 'Financial BVI', + financial_fx: 'Financial Labuan', + financial_v: 'Financial Vanuatu', + financial_svg: 'Financial SVG', }; // * mt5_login_list returns these: @@ -17,18 +23,33 @@ const CFD_text = { // sub_account_type: "financial" | "financial_stp" | "swap_free" // * // sub_account_type financial_stp only happens in "financial" market_type -export const getCFDAccountKey = ({ market_type, sub_account_type, platform }) => { +export const getCFDAccountKey = ({ market_type, sub_account_type, platform, shortcode }) => { if (market_type === 'gaming' || market_type === 'synthetic') { if (platform === CFD_PLATFORMS.DXTRADE || sub_account_type === 'financial') { - return 'synthetic'; + switch (shortcode) { + case 'svg': + return 'synthetic_svg'; + case 'bvi': + return 'synthetic_bvi'; + default: + return 'synthetic'; + } } } if (market_type === 'financial') { if (platform === CFD_PLATFORMS.DXTRADE || sub_account_type === 'financial') { - return 'financial'; - } - if (sub_account_type === 'financial_stp') { - return 'financial_stp'; + switch (shortcode) { + case 'svg': + return 'financial_svg'; + case 'bvi': + return 'financial_bvi'; + case 'labuan': + return 'financial_fx'; + case 'vanuatu': + return 'financial_v'; + default: + return 'financial'; + } } } return undefined; @@ -74,12 +95,20 @@ export const getAccountTypeFields = ({ category, type }) => { return map_mode[category][type]; }; -export const getCFDAccountDisplay = ({ market_type, sub_account_type, platform, is_eu }) => { - let cfd_account_key = getCFDAccountKey({ market_type, sub_account_type, platform }); +export const getCFDAccountDisplay = ({ + market_type, + sub_account_type, + platform, + is_eu, + shortcode, + is_remaining_account, +}) => { + let cfd_account_key = getCFDAccountKey({ market_type, sub_account_type, platform, shortcode }); if (!cfd_account_key) return undefined; if (cfd_account_key === 'financial' && is_eu) { - cfd_account_key = 'cfd'; + if (is_remaining_account) cfd_account_key = 'cfd'; + else cfd_account_key = 'mt5_cfds_mfsa'; } return CFD_text_translated[cfd_account_key]();