diff --git a/src/images/mt5_banner/mt5_go_to_deriv_banner_icons.svg b/src/images/mt5_banner/mt5_go_to_deriv_banner_icons.svg new file mode 100644 index 0000000000000..b3d756c8de672 --- /dev/null +++ b/src/images/mt5_banner/mt5_go_to_deriv_banner_icons.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/javascript/app/common/attach_dom/dialog.js b/src/javascript/app/common/attach_dom/dialog.js index a0a82fdfc2edc..e6eae28515e4a 100644 --- a/src/javascript/app/common/attach_dom/dialog.js +++ b/src/javascript/app/common/attach_dom/dialog.js @@ -85,7 +85,9 @@ const Dialog = (() => { } el_btn_ok.addEventListener('click', () => { - el_dialog.remove(); + if (!options.keep_open_on_confirm) { + el_dialog.remove(); + } if (typeof options.onConfirm === 'function') { options.onConfirm(); } diff --git a/src/javascript/app/common/mt5_go_to_deriv_banner.js b/src/javascript/app/common/mt5_go_to_deriv_banner.js new file mode 100644 index 0000000000000..280a48451eee0 --- /dev/null +++ b/src/javascript/app/common/mt5_go_to_deriv_banner.js @@ -0,0 +1,15 @@ +const getElementById = require('../../_common/common_functions').getElementById; +const getLanguage = require('../../_common/language').get; + +const Mt5GoToDerivBanner = (() => { + const classname = 'mt5_go_to_deriv_banner'; + + const onLoad = () => { + getElementById(`${classname}-link`).href = `https://app.deriv.com/mt5?lang=${getLanguage()}`; + getElementById(`${classname}_container`).setVisibility(1); + }; + + return { onLoad }; +})(); + +module.exports = Mt5GoToDerivBanner; diff --git a/src/javascript/app/pages/user/account/settings/account_closure.js b/src/javascript/app/pages/user/account/settings/account_closure.js index acc969095561e..2275a72d769e4 100644 --- a/src/javascript/app/pages/user/account/settings/account_closure.js +++ b/src/javascript/app/pages/user/account/settings/account_closure.js @@ -1,13 +1,14 @@ -const Metatrader = require('../../metatrader/metatrader'); -const BinarySocket = require('../../../../base/socket'); -const Client = require('../../../../base/client'); -const Currency = require('../../../../common/currency'); -const Url = require('../../../../../_common/url'); -const hasAccountType = require('../../../../../_common/base/client_base').hasAccountType; -const getElementById = require('../../../../../_common/common_functions').getElementById; -const localize = require('../../../../../_common/localize').localize; +const Metatrader = require('../../metatrader/metatrader'); +const MetaTraderConfig = require('../../metatrader/metatrader.config'); +const BinarySocket = require('../../../../base/socket'); +const Client = require('../../../../base/client'); +const Currency = require('../../../../common/currency'); +const Url = require('../../../../../_common/url'); +const hasAccountType = require('../../../../../_common/base/client_base').hasAccountType; +const getElementById = require('../../../../../_common/common_functions').getElementById; +const localize = require('../../../../../_common/localize').localize; const applyToAllElements = require('../../../../../_common/utility').applyToAllElements; -const State = require('../../../../../_common/storage').State; +const State = require('../../../../../_common/storage').State; const AccountClosure = (() => { let reason_checkbox_list, @@ -211,7 +212,7 @@ const AccountClosure = (() => { const getMT5MarketType = (mt5_account) => mt5_account.market_type === 'synthetic' ? 'gaming' : mt5_account.market_type; const showErrorPopUp = async (response) => { - const mt5_login_list = (await BinarySocket.wait('mt5_login_list')).mt5_login_list; + const filtered_mt5_login_list = MetaTraderConfig.getFilteredMt5LoginList((await BinarySocket.wait('mt5_login_list')).mt5_login_list); const dxtrade_accounts_list = (await BinarySocket.send({ trading_platform_accounts: 1, platform: 'dxtrade' })).trading_platform_accounts; // clear all previously added details first @@ -240,7 +241,7 @@ const AccountClosure = (() => { el_section.setVisibility(1).appendChild(el_section_parent); }; const getMTDisplay = (account) => { - const mt5_account = (mt5_login_list.find(acc => acc.login === account) || {}); + const mt5_account = (filtered_mt5_login_list.find(acc => acc.login === account) || {}); const market_type = getMT5MarketType(mt5_account); return Client.getMT5AccountDisplays(market_type, mt5_account.sub_account_type).short; }; diff --git a/src/javascript/app/pages/user/metatrader/metatrader.config.js b/src/javascript/app/pages/user/metatrader/metatrader.config.js index d837a8df51f93..3c2b5a612ac0e 100644 --- a/src/javascript/app/pages/user/metatrader/metatrader.config.js +++ b/src/javascript/app/pages/user/metatrader/metatrader.config.js @@ -562,6 +562,10 @@ const MetaTraderConfig = (() => { return /\d$/.test(acc_type) ? acc_type.substr(0, acc_type.lastIndexOf('_')) : acc_type; }; + // hide bvi and vanuatu (fx) mt5 accounts, display svg and stp (labuan) only: + const getFilteredMt5LoginList = (mt5_login_list) => mt5_login_list + .filter(mt5_account => mt5_account.landing_company_short === 'svg' || mt5_account.landing_company_short === 'labuan'); + // if no server exists yet, e.g. during new account creation // we want to get information like landing company etc which is shared // between all the servers, so we can disregard the server and return the first @@ -606,6 +610,7 @@ const MetaTraderConfig = (() => { getCleanAccType, getCurrency, getDisplayLogin, + getFilteredMt5LoginList, getSampleAccount, isAuthenticated, isAuthenticationPromptNeeded, diff --git a/src/javascript/app/pages/user/metatrader/metatrader.js b/src/javascript/app/pages/user/metatrader/metatrader.js index 170bf4569375e..534067ee2a2bb 100644 --- a/src/javascript/app/pages/user/metatrader/metatrader.js +++ b/src/javascript/app/pages/user/metatrader/metatrader.js @@ -4,6 +4,7 @@ const Client = require('../../../base/client'); const BinarySocket = require('../../../base/socket'); const setCurrencies = require('../../../common/currency').setCurrencies; const Validation = require('../../../common/form_validation'); +const Mt5GoToDerivBanner = require('../../../common/mt5_go_to_deriv_banner'); const localize = require('../../../../_common/localize').localize; const State = require('../../../../_common/storage').State; const applyToAllElements = require('../../../../_common/utility').applyToAllElements; @@ -12,10 +13,11 @@ const isEuCountry = require('../../../common/country_base').isEuCountry; const MetaTrader = (() => { let show_new_account_popup = true; - const accounts_info = MetaTraderConfig.accounts_info; - const actions_info = MetaTraderConfig.actions_info; - const fields = MetaTraderConfig.fields; - const getAccountsInfo = MetaTraderConfig.getAccountsInfo; + const accounts_info = MetaTraderConfig.accounts_info; + const actions_info = MetaTraderConfig.actions_info; + const fields = MetaTraderConfig.fields; + const getAccountsInfo = MetaTraderConfig.getAccountsInfo; + const getFilteredMt5LoginList = MetaTraderConfig.getFilteredMt5LoginList; const onLoad = () => { BinarySocket.send({ statement: 1, limit: 1 }); @@ -50,7 +52,6 @@ const MetaTrader = (() => { MetaTraderUI.displayPageError(response.error.message); return; } - // const valid_account = Object.values(response.mt5_login_list).filter(acc => !acc.error); // if (has_multi_mt5_accounts && (has_demo_error || has_real_error)) { @@ -67,7 +68,8 @@ const MetaTrader = (() => { const trading_servers = State.getResponse('trading_servers'); // for legacy clients on the real01 server, real01 server is not going to be offered in trading servers // but we need to build their object in accounts_info or they can't view their legacy account - response.mt5_login_list.forEach((mt5_login) => { + const filtered_mt5_login_list = getFilteredMt5LoginList(response.mt5_login_list); + filtered_mt5_login_list.forEach((mt5_login) => { if (mt5_login.error) { let message = mt5_login.error.message_to_client; @@ -90,12 +92,19 @@ const MetaTrader = (() => { const landing_company = mt5_login.market_type === 'gaming' || mt5_login.market_type === 'synthetic' ? mt_gaming_company : mt_financial_company; const market_type = mt5_login.market_type === 'synthetic' ? 'gaming' : mt5_login.market_type; - addAccount(market_type, landing_company, mt5_login.server); + addAccount(market_type, landing_company, mt5_login.server, filtered_mt5_login_list); } } }); getAllAccountsInfo(response); + + const has_mt5_accounts = filtered_mt5_login_list.length > 0; + if (!has_mt5_accounts) { + MetaTraderUI.showGoToDerivAlertPopup(has_mt5_accounts); + } else { + Mt5GoToDerivBanner.onLoad(); + } }); }; @@ -120,64 +129,106 @@ const MetaTrader = (() => { // * we should map them to landing_company: // mt_financial_company: { financial: {}, financial_stp: {}, swap_free: {} } // mt_gaming_company: { financial: {}, swap_free: {} } - const addAccount = (market_type, company = {}, server) => { + const addAccount = (market_type, company = {}, server, mt5_login_list = []) => { // TODO: Update once market_types are available in inaccessible account details if (market_type === 'unknown' && !company) { addUnknownAccount('demo'); addUnknownAccount('real'); } else { + const addAccountsInfo = ({ + trading_server, + account_type, + sub_account_type, + landing_company_short, + leverage, + company_data, + }) => { + const is_demo = account_type === 'demo'; + const account_leverage = leverage || getLeverage(market_type, sub_account_type, landing_company_short); + const display_name = Client.getMT5AccountDisplays( + market_type, + sub_account_type, + is_demo, + landing_company_short, + isEuCountry() + ); + // e.g. real_gaming_financial + let key = `${account_type}_${market_type}_${sub_account_type}`; + + // e.g. real_gaming_financial_real01 + if (trading_server) { + key += `_${trading_server.id}`; + } + + accounts_info[key] = { + is_demo, + landing_company_short, + leverage : account_leverage, + market_type, + sub_account_type, + short_title: display_name.short, + title : display_name.full, + company_data, + }; + }; + + const addAccountWithServers = (account_params) => { + if (server && account_params.account_type !== 'demo') { + addAccountsInfo({ trading_server: { id: server }, ...account_params }); + } else { + const available_servers = getAvailableServers(market_type, account_params.sub_account_type); + + // demo only has one server, no need to create for each trade server + if (available_servers.length > 1 && account_params.account_type !== 'demo') { + available_servers.forEach(trading_server => + addAccountsInfo({ trading_server, ...account_params })); + } else { + addAccountsInfo({ trading_server: null, ...account_params }); + } + + } + }; + Object.keys(company) .filter(sub_account_type => sub_account_type !== 'swap_free') // TODO: remove this when releasing swap_free .forEach((sub_account_type) => { const landing_company_short = company[sub_account_type].shortcode; - ['demo', 'real'].forEach((account_type) => { - const is_demo = account_type === 'demo'; - const display_name = Client.getMT5AccountDisplays( - market_type, + const account_params = { + account_type, sub_account_type, - is_demo, landing_company_short, - isEuCountry() - ); - const leverage = getLeverage(market_type, sub_account_type, landing_company_short); - - const addAccountsInfo = (trading_server) => { - // e.g. real_gaming_financial - let key = `${account_type}_${market_type}_${sub_account_type}`; - - // e.g. real_gaming_financial_real01 - if (trading_server) { - key += `_${trading_server.id}`; - } - - accounts_info[key] = { - is_demo, - landing_company_short, - leverage, - market_type, - sub_account_type, - short_title: display_name.short, - title : display_name.full, - }; }; - - if (server && !is_demo) { - addAccountsInfo({ id: server }); - } else { - const available_servers = getAvailableServers(market_type, sub_account_type); - - // demo only has one server, no need to create for each trade server - if (available_servers.length > 1 && !is_demo) { - available_servers.forEach(trading_server => addAccountsInfo(trading_server)); - } else { - addAccountsInfo(); - } - - } - + addAccountWithServers(account_params); }); }); + + // mt5_login_list includes all accounts that we must show including STP + // and if a client has an STP account, we should show it even if it's missing from landing_company response + // below we filter out and add all existing accounts that are missing from landing_company response: + mt5_login_list + .filter(mt5_account => Object.entries(accounts_info).every(([key, value]) => { + const type = value.market_type === 'gaming' ? 'synthetic' : 'financial'; + return !(value.landing_company_short === mt5_account.landing_company_short && + type === mt5_account.market_type && + value.sub_account_type === mt5_account.sub_account_type && + key.includes(mt5_account.account_type)); + })) + .forEach(({ account_type, sub_account_type, landing_company_short, leverage }) => { + // have to hardcode some company's data because we don't get it in landing_company response: + const stp_company_data = { + name : 'Deriv (FX) Ltd', + country: 'Malaysia', + }; + const account_params = { + account_type, + sub_account_type, + landing_company_short, + leverage, + company_data: landing_company_short === 'labuan' ? stp_company_data : undefined, + }; + addAccountWithServers(account_params); + }); } }; @@ -315,7 +366,8 @@ const MetaTrader = (() => { const req = makeRequestObject(acc_type, action); if (action === 'new_account' && MetaTraderUI.shouldSetTradingPassword()) { const { mt5_login_list } = await BinarySocket.send({ mt5_login_list: 1 }); - const has_mt5_account = mt5_login_list.length > 0; + const filtered_mt5_login_list = getFilteredMt5LoginList(mt5_login_list); + const has_mt5_account = filtered_mt5_login_list.length > 0; if (has_mt5_account && !MetaTraderUI.getTradingPasswordConfirmVisibility()) { MetaTraderUI.setTradingPasswordConfirmVisibility(1); MetaTraderUI.enableButton(action); @@ -406,8 +458,9 @@ const MetaTrader = (() => { return; } - const has_multi_mt5_accounts = (response.mt5_login_list.length > 1); - const checkAccountTypeErrors = (type) => Object.values(response.mt5_login_list).filter(account => { + const filtered_mt5_login_list = getFilteredMt5LoginList(response.mt5_login_list); + const has_multi_mt5_accounts = (filtered_mt5_login_list.length > 1); + const checkAccountTypeErrors = (type) => Object.values(filtered_mt5_login_list).filter(account => { if (account.error) { return account.error.details.account_type === type; } @@ -428,13 +481,13 @@ const MetaTrader = (() => { }; // Add all unavailable accounts to the account list DOM - if (response.mt5_login_list.some(acc => acc.error)) { + if (filtered_mt5_login_list.some(acc => acc.error)) { addUnavailableAccounts(response); MetaTraderUI.populateAccountList(); } // Update account info - response.mt5_login_list.forEach((account) => { + filtered_mt5_login_list.forEach((account) => { const market_type = account.market_type === 'synthetic' ? 'gaming' : account.market_type; let acc_type = `${account.account_type}_${market_type}_${account.sub_account_type}`; const acc_type_server = `${acc_type}_${account.server}`; diff --git a/src/javascript/app/pages/user/metatrader/metatrader.ui.js b/src/javascript/app/pages/user/metatrader/metatrader.ui.js index caf8875bc966f..45f159128bfe4 100644 --- a/src/javascript/app/pages/user/metatrader/metatrader.ui.js +++ b/src/javascript/app/pages/user/metatrader/metatrader.ui.js @@ -8,6 +8,9 @@ const getTransferFee = require('../../../../_common/base/currency_base').getTr const getElementById = require('../../../../_common/common_functions').getElementById; const localize = require('../../../../_common/localize').localize; const Password = require('../../../../_common/check_password'); +const BinaryPjax = require('../../../base/binary_pjax'); +const { urlFor } = require('../../../../_common/url'); +const getLanguage = require('../../../../_common/language').get; const State = require('../../../../_common/storage').State; const urlForStatic = require('../../../../_common/url').urlForStatic; const getHashValue = require('../../../../_common/url').getHashValue; @@ -65,7 +68,8 @@ const MetaTraderUI = (() => { $main_msg = $container.find('#main_msg'); $client_general = $container.find('.client-general'); $client_eu = $container.find('.client-eu'); - $container.find('[class*="act_"]').on('click', populateForm); + $container.find('[class*="act_"]').not('[class*="new_account_button"]').on('click', populateForm); + $container.find('[class*="new_account_button"]').on('click', () => showGoToDerivAlertPopup(true)); MetaTraderConfig.setMessages($templates.find('#messages')); @@ -338,7 +342,8 @@ const MetaTraderUI = (() => { const is_synthetic = getAccountsInfo(acc_type).market_type === 'gaming' || getAccountsInfo(acc_type).market_type === 'synthetic'; const is_unknown = /unknown+$/.test(acc_type); const is_real = acc_type.startsWith('real'); - const label_text = server_info ? sequence > 1 ? `${region} ${sequence}` : region : acc_info.display_server; + const region_to_show = sequence > 1 ? `${region} ${sequence}` : region; + const label_text = server_info ? region_to_show : acc_info.display_server; setMTAccountText(); $acc_item.find('.mt-login').text(`(${getAccountsInfo(acc_type).info.display_login})`); if ( @@ -370,45 +375,12 @@ const MetaTraderUI = (() => { +getAccountsInfo(acc_type).info.balance); $acc_item.find('.mt-balance').html(mt_balance); $action.find('.mt5-balance').html(mt_balance); - const $add_region_btn = $container.find('#btn_add_region'); - $add_region_btn.setVisibility( - getAvailableServers(false, acc_type).length > 0 && !getAccountsInfo(acc_type).is_demo, - ); - if (disabled_signup_types.real) { - $add_region_btn.addClass('button-disabled'); - } } // disable MT5 account opening if created all available accounts if (Object.keys(accounts_info).every(type => getAccountsInfo(type).info || !MetaTraderConfig.hasTradeServers(type))) { $container.find('.act_new_account').remove(); } - - // Add more trade servers button. - $container.find('#btn_add_region').click(() => { - if (disabled_signup_types.real) { - return; - } - const $back_button = $form.find('#view_3 .btn-back'); - const $cancel_button = $form.find('#view_3 .btn-cancel'); - const account_type = Client.get('mt5_account'); - const num_servers = populateTradingServers(); - - loadAction('new_account', account_type); - $form.find('button[type="submit"]').attr('acc_type', account_type); - $cancel_button.setVisibility(1); - $back_button.setVisibility(0); - - if (num_servers.supported > 1){ - displayStep(2); - } else { - displayStep(3); - } - displayAccountDescription('real_gaming_financial'); - - $.scrollTo($container.find('.acc-actions'), 300, { offset: -10 }); - }); - } else { $acc_item.setVisibility(0); } @@ -465,7 +437,8 @@ const MetaTraderUI = (() => { const display_login = getAccountsInfo(acc_type).info.display_login; const region = server_info && server_info.geolocation.region; const sequence = server_info && server_info.geolocation.sequence; - const label_text = server_info ? sequence > 1 ? `${region} ${sequence}` : region : getAccountsInfo(acc_type).info.display_server; + const region_to_show = sequence > 1 ? `${region} ${sequence}` : region; + const label_text = server_info ? region_to_show : getAccountsInfo(acc_type).info.display_server; $detail.find('.real-only').setVisibility(!is_demo); // Update account info $detail.find('.acc-info div[data]').map(function () { @@ -494,11 +467,6 @@ const MetaTraderUI = (() => { if (current_action_ui !== 'new_account') { $container.find('.has-account').setVisibility(1); } - - // we need to add a small delay to let the servers details be filled before we check their availability - setTimeout(() => { - $container.find('#btn_add_region').setVisibility(getAvailableServers(false, MetaTraderConfig.getCleanAccType(acc_type, 2)).length > 0 && !is_demo); - }, 50); } else { $detail.find('.acc-info, .acc-actions').setVisibility(0); } @@ -526,7 +494,7 @@ const MetaTraderUI = (() => { }; const loadAction = (action, acc_type, should_hide_cancel) => { - $container.find(`[class~=act_${action || defaultAction(acc_type)}]`).click(); + $container.find(`[class~=act_${action || defaultAction(acc_type)}]`).not('[class*="new_account_button"]').click(); if (should_hide_cancel) { $form.find('#view_1 .btn-cancel').hide(); $form.find('#view_3 .btn-cancel').hide(); @@ -1216,10 +1184,13 @@ const MetaTraderUI = (() => { BinarySocket.wait('landing_company').then((response) => { const landing_company_name = getAccountsInfo(acc_type).market_type === 'synthetic' ? 'mt_gaming_company' : `mt_${getAccountsInfo(acc_type).market_type}_company`; - const company = response.landing_company[landing_company_name][getAccountsInfo(acc_type).sub_account_type]; - + const company = response.landing_company[landing_company_name][getAccountsInfo(acc_type) + .sub_account_type] || {}; $icon.attr({ - 'data-balloon' : `${localize('Counterparty')}: ${company.name}, ${localize('Jurisdiction')}: ${company.country}`, + 'data-balloon': `${localize('Counterparty')}: ${ + company.name || + getAccountsInfo(acc_type).company_data.name + }, ${localize('Jurisdiction')}: ${company.country || getAccountsInfo(acc_type).company_data.country}`, 'data-balloon-length': 'large', }); }); @@ -1306,6 +1277,26 @@ const MetaTraderUI = (() => { }); }; + const showGoToDerivAlertPopup = (has_mt5_accounts) => { + const url_on_confirm = `https://app.deriv.com/mt5?lang=${getLanguage()}`; + Dialog.confirm({ + id : 'go-to-deriv-popup', + localized_title : localize('Go to Deriv to add an MT5 account'), + localized_message: localize('You\'ll be able to log in to Deriv using your Binary.com credentials.'), + cancel_text : has_mt5_accounts ? localize('Cancel') : localize('Back'), + ok_text : localize('Go to Deriv'), + onAbort : has_mt5_accounts ? undefined : () => { BinaryPjax.load(urlFor('trading')); }, + onConfirm : () => { + if (has_mt5_accounts) { + window.open().location.href = url_on_confirm; + } else { + window.location.href = url_on_confirm; + } + }, + keep_open_on_confirm: !has_mt5_accounts, + }); + }; + return { init, setAccountType, @@ -1327,6 +1318,7 @@ const MetaTraderUI = (() => { setTopupLoading, getTradingPasswordConfirmVisibility, setTradingPasswordConfirmVisibility, + showGoToDerivAlertPopup, showNewAccountConfirmationPopup, shouldSetTradingPassword, diff --git a/src/sass/_common/components.scss b/src/sass/_common/components.scss index 94fd4b40c1228..b5db764ccfa92 100644 --- a/src/sass/_common/components.scss +++ b/src/sass/_common/components.scss @@ -530,6 +530,118 @@ } } +#mt5_go_to_deriv_banner_container { + position: relative; + box-sizing: border-box; + display: flex; + width: 940px; + height: 100px; + align-items: center; + padding-left: 24px; + padding-right: 64px; + + &.has_margin { + margin-bottom: 40px; + } + @media only screen and (max-width: 768px) { + width: 340px; + height: 70px; + justify-content: space-between; + padding: 15px 8px; + margin: 0 auto; + } + + &:after { + content: ''; + position: absolute; + display: unset; + border-collapse: unset; + clear: unset; + left: 0; + top: 0; + border-radius: 4px 0 0 4px; + border-bottom: 100px solid $COLOR_ORANGE; + border-right: 50px solid transparent; + border-left: 188px solid $COLOR_ORANGE; + + @media only screen and (max-width: 768px) { + border-bottom: 70px solid $COLOR_ORANGE; + border-right: 26.5px solid transparent; + border-left: 220px solid $COLOR_ORANGE; + } + } + &:before { + content: ''; + position: absolute; + display: unset; + border-collapse: unset; + right: 0; + top: 0; + width: 766px; + height: 100%; + border-radius: 0 4px 4px 0; + background-color: $COLOR_LIGHT_GRAY; + + @media only screen and (max-width: 768px) { + width: 136px; + } + } + .mt5_go_to_deriv_banner { + position: relative; + + &_icons { + z-index: 2; + height: 100%; + margin-right: 67px; + + @media only screen and (max-width: 768px) { + display: none; + } + } + &_text { + z-index: 2; + + h3, p { + font-size: $FONT_SIZE_N; + color: $COLOR_BLACK; + margin: 0; + + @media only screen and (max-width: 768px) { + font-size: $FONT_SIZE_XXS; + color: $COLOR_WHITE; + width: 220px; + } + } + h3 { + font-weight: bold; + margin-bottom: 4px; + } + p { + font-weight: normal; + } + } + &_btn { + cursor: pointer; + text-decoration: none; + z-index: 2; + padding: 8px 25px; + line-height: 22px; + color: $COLOR_WHITE; + border-radius: 4px; + background-color: $COLOR_GREEN; + font-size: $FONT_SIZE_L; + font-weight: normal; + margin-left: 26px; + + @media only screen and (max-width: 768px) { + padding: 1px 10.5px; + font-size: $FONT_SIZE_S; + margin-left: unset; + } + } + } +} + #eu_close_banner_container { display: flex; justify-content: space-between; diff --git a/src/sass/app/metatrader.scss b/src/sass/app/metatrader.scss index df220ab83aa98..199ca016630cd 100644 --- a/src/sass/app/metatrader.scss +++ b/src/sass/app/metatrader.scss @@ -279,14 +279,10 @@ border-bottom: none; } } - .add_region { + .trade-button-container { position: absolute; bottom: 20px; right: 20px; - - #btn_add_region { - margin-right: 16px; - } } } .acc-actions { @@ -538,7 +534,7 @@ #account_details { min-height: auto; - .add_region { + .trade-button-container { position: unset; display: flex; justify-content: flex-end; @@ -632,9 +628,61 @@ tbody#instruments > tr > td { width: 33%; } +.mt5_go_to_deriv_banner_wrapper.container { + padding-left: 0; + padding-right: 0; +} + #password-change-email-popup, #success_reset_trading_pw_dialog { #dialog_content { max-width: 480px; padding-top: 32px; } } + +#go-to-deriv-popup { + #dialog_content { + width: 457px; + height: 246px; + padding: 32px 0 0 12px; + + .gr-gutter .gr-gutter { + padding-bottom: 0; + + & > * { + width: 405px; + + @media only screen and (max-width: 768px) { + width: 296px; + } + } + } + #dialog_message { + margin-top: 4px !important; + margin-bottom: 4px !important; + } + + @media only screen and (max-width: 768px) { + width: 328px; + height: 188px; + padding: 16px 0 0; + + #dialog_title { + font-size: 20px; + } + #dialog_message { + margin-top: unset; + padding-top: unset; + margin-bottom: 12px !important; + font-size: $FONT_SIZE_N; + } + .gr-row-align-right { + justify-content: center; + + a.button { + margin-bottom: unset; + } + } + } + } +} diff --git a/src/templates/_common/components/mt5_go_to_deriv_banner.jsx b/src/templates/_common/components/mt5_go_to_deriv_banner.jsx new file mode 100644 index 0000000000000..f23fe93cb5c51 --- /dev/null +++ b/src/templates/_common/components/mt5_go_to_deriv_banner.jsx @@ -0,0 +1,24 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const Mt5GoToDerivBanner = ({ has_margin }) => { + const classname = 'mt5_go_to_deriv_banner'; + return ( +
+ +
+

{it.L('Go to Deriv to add an MT5 account')}

+

{it.L('You\'ll be able to log in to Deriv using your Binary.com credentials.')}

+
+ + {it.L('Go to Deriv')} + +
+ ); +}; + +Mt5GoToDerivBanner.propTypes = { + has_margin: PropTypes.bool, +}; + +export default Mt5GoToDerivBanner; diff --git a/src/templates/app/user/metatrader.jsx b/src/templates/app/user/metatrader.jsx index d64a06d2445a0..f1980b39c9268 100644 --- a/src/templates/app/user/metatrader.jsx +++ b/src/templates/app/user/metatrader.jsx @@ -5,6 +5,7 @@ import { SubmitButton, } from '../../_common/components/forms.jsx'; import Loading from '../../_common/components/loading.jsx'; +import Mt5GoToDerivBanner from '../../_common/components/mt5_go_to_deriv_banner.jsx'; /* eslint-disable react/jsx-no-target-blank */ const AccountDesc = ({ title, description, account_type, landing_company_short, items, id = undefined }) => { @@ -69,6 +70,9 @@ const CashierDesc = ({ title, desc, arrow_direction }) => ( const Metatrader = () => ( +
+ +

{it.L('MetaTrader 5 dashboard')}

@@ -92,7 +96,7 @@ const Metatrader = () => (
- + {it.L('New account')}
@@ -127,10 +131,7 @@ const Metatrader = () => (
-
- - {it.L('+ Add region')} - +
{it.L('Trade on web terminal')}