From ecbebfb2c4e1fd15b030b533599ef4c3a539cb47 Mon Sep 17 00:00:00 2001 From: maryia-binary Date: Wed, 20 Jul 2022 16:38:02 +0300 Subject: [PATCH 1/9] Maryia/feat: removed Add region button --- .../pages/user/metatrader/metatrader.ui.js | 38 ------------------- src/sass/app/metatrader.scss | 8 +--- src/templates/app/user/metatrader.jsx | 5 +-- 3 files changed, 3 insertions(+), 48 deletions(-) diff --git a/src/javascript/app/pages/user/metatrader/metatrader.ui.js b/src/javascript/app/pages/user/metatrader/metatrader.ui.js index caf8875bc966f..a8df9dbdd607e 100644 --- a/src/javascript/app/pages/user/metatrader/metatrader.ui.js +++ b/src/javascript/app/pages/user/metatrader/metatrader.ui.js @@ -370,45 +370,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); } @@ -494,11 +461,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); } diff --git a/src/sass/app/metatrader.scss b/src/sass/app/metatrader.scss index df220ab83aa98..ff40cf13418d6 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; diff --git a/src/templates/app/user/metatrader.jsx b/src/templates/app/user/metatrader.jsx index d64a06d2445a0..674e17cc7af96 100644 --- a/src/templates/app/user/metatrader.jsx +++ b/src/templates/app/user/metatrader.jsx @@ -127,10 +127,7 @@ const Metatrader = () => (
-
- - {it.L('+ Add region')} - +
{it.L('Trade on web terminal')} From b13b3e8f81331ffc52cabffc3a0934b60d21d499 Mon Sep 17 00:00:00 2001 From: maryia-binary Date: Wed, 20 Jul 2022 20:26:13 +0300 Subject: [PATCH 2/9] feat: initialized Mt5GoToDerivBanner --- .../mt5_go_to_deriv_banner_icons.svg | 1 + .../app/common/mt5_go_to_deriv_banner.js | 16 ++++++++++++ .../app/pages/user/metatrader/metatrader.js | 2 ++ src/sass/_common/components.scss | 8 ++++-- .../components/mt5_go_to_deriv_banner.jsx | 26 +++++++++++++++++++ src/templates/app/user/metatrader.jsx | 4 +++ 6 files changed, 55 insertions(+), 2 deletions(-) create mode 100644 src/images/mt5_banner/mt5_go_to_deriv_banner_icons.svg create mode 100644 src/javascript/app/common/mt5_go_to_deriv_banner.js create mode 100644 src/templates/_common/components/mt5_go_to_deriv_banner.jsx 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/mt5_go_to_deriv_banner.js b/src/javascript/app/common/mt5_go_to_deriv_banner.js new file mode 100644 index 0000000000000..329ff8f0b22f3 --- /dev/null +++ b/src/javascript/app/common/mt5_go_to_deriv_banner.js @@ -0,0 +1,16 @@ +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()}`; + const mt5_banner_container = getElementById(`${classname}_container`); + mt5_banner_container.classList.remove('invisible'); + }; + + return { onLoad }; +})(); + +module.exports = Mt5GoToDerivBanner; diff --git a/src/javascript/app/pages/user/metatrader/metatrader.js b/src/javascript/app/pages/user/metatrader/metatrader.js index 170bf4569375e..67515c5c1a80e 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; @@ -24,6 +25,7 @@ const MetaTrader = (() => { await BinarySocket.send({ trading_servers: 1, platform: 'mt5' }); if (isEligible()) { + Mt5GoToDerivBanner.onLoad(); if (Client.get('is_virtual')) { addAllAccounts(); } else { diff --git a/src/sass/_common/components.scss b/src/sass/_common/components.scss index 94fd4b40c1228..d6d7b4e1a6c24 100644 --- a/src/sass/_common/components.scss +++ b/src/sass/_common/components.scss @@ -352,11 +352,15 @@ } } -#multiplier_banner_container { +#multiplier_banner_container, #mt5_go_to_deriv_banner_container { position: relative; &.has_margin { - margin-bottom: 30px; + margin-bottom: 4rem; + + &:not(#mt5_go_to_deriv_banner_container) { + margin-bottom: 3rem; + } } a { position: relative; 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..fa0e2098d23dd --- /dev/null +++ b/src/templates/_common/components/mt5_go_to_deriv_banner.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const Mt5GoToDerivBanner = ({ has_margin }) => { + const classname = 'mt5_go_to_deriv_banner'; + return ( + + ); +}; + +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 674e17cc7af96..942170d26b1b2 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')}

From 616c35f5131b1d1eb0f574ba2dd21b3459a68c42 Mon Sep 17 00:00:00 2001 From: maryia-binary Date: Thu, 21 Jul 2022 13:12:30 +0300 Subject: [PATCH 3/9] finilized Mt5GoToDerivBanner styling (desktop+responsive) --- src/sass/_common/components.scss | 118 +++++++++++++++++- .../components/mt5_go_to_deriv_banner.jsx | 6 +- 2 files changed, 114 insertions(+), 10 deletions(-) diff --git a/src/sass/_common/components.scss b/src/sass/_common/components.scss index d6d7b4e1a6c24..503b7db21e664 100644 --- a/src/sass/_common/components.scss +++ b/src/sass/_common/components.scss @@ -352,15 +352,11 @@ } } -#multiplier_banner_container, #mt5_go_to_deriv_banner_container { +#multiplier_banner_container { position: relative; &.has_margin { - margin-bottom: 4rem; - - &:not(#mt5_go_to_deriv_banner_container) { - margin-bottom: 3rem; - } + margin-bottom: 30px; } a { position: relative; @@ -534,6 +530,116 @@ } } +#mt5_go_to_deriv_banner_container { + position: relative; + + &.has_margin { + margin-bottom: 40px; + } + a { + box-sizing: border-box; + position: relative; + display: flex; + width: 940px; + height: 100px; + color: $COLOR_WHITE; + text-decoration: none; + align-items: center; + padding-left: 24px; + padding-right: 64px; + + @media only screen and (max-width: 768px) { + width: 340px; + height: 70px; + justify-content: space-between; + padding: 15px 8px; + } + + &:after { + content: ''; + position: absolute; + 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; + 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 { + 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/templates/_common/components/mt5_go_to_deriv_banner.jsx b/src/templates/_common/components/mt5_go_to_deriv_banner.jsx index fa0e2098d23dd..9e11ac73440d3 100644 --- a/src/templates/_common/components/mt5_go_to_deriv_banner.jsx +++ b/src/templates/_common/components/mt5_go_to_deriv_banner.jsx @@ -7,13 +7,11 @@ const Mt5GoToDerivBanner = ({ has_margin }) => {
- ); From 05569bca8d54028aa3b48f1d0b5d4ad1dd2aaad5 Mon Sep 17 00:00:00 2001 From: maryia-binary Date: Thu, 21 Jul 2022 13:32:47 +0300 Subject: [PATCH 4/9] made only button clickable not the whole banner --- .../app/common/mt5_go_to_deriv_banner.js | 5 +- src/sass/_common/components.scss | 89 ++++++++++--------- .../components/mt5_go_to_deriv_banner.jsx | 14 +-- 3 files changed, 54 insertions(+), 54 deletions(-) diff --git a/src/javascript/app/common/mt5_go_to_deriv_banner.js b/src/javascript/app/common/mt5_go_to_deriv_banner.js index 329ff8f0b22f3..280a48451eee0 100644 --- a/src/javascript/app/common/mt5_go_to_deriv_banner.js +++ b/src/javascript/app/common/mt5_go_to_deriv_banner.js @@ -5,9 +5,8 @@ const Mt5GoToDerivBanner = (() => { const classname = 'mt5_go_to_deriv_banner'; const onLoad = () => { - getElementById(`${classname}_link`).href = `https://app.deriv.com/mt5?lang=${getLanguage()}`; - const mt5_banner_container = getElementById(`${classname}_container`); - mt5_banner_container.classList.remove('invisible'); + getElementById(`${classname}-link`).href = `https://app.deriv.com/mt5?lang=${getLanguage()}`; + getElementById(`${classname}_container`).setVisibility(1); }; return { onLoad }; diff --git a/src/sass/_common/components.scss b/src/sass/_common/components.scss index 503b7db21e664..5a280d560b9ce 100644 --- a/src/sass/_common/components.scss +++ b/src/sass/_common/components.scss @@ -532,58 +532,57 @@ #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; } - a { - box-sizing: border-box; - position: relative; - display: flex; - width: 940px; - height: 100px; - color: $COLOR_WHITE; - text-decoration: none; - align-items: center; - padding-left: 24px; - padding-right: 64px; - - @media only screen and (max-width: 768px) { - width: 340px; - height: 70px; - justify-content: space-between; - padding: 15px 8px; - } + @media only screen and (max-width: 768px) { + width: 340px; + height: 70px; + justify-content: space-between; + padding: 15px 8px; + } - &:after { - content: ''; - position: absolute; - 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; + &: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; - } + @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; - right: 0; - top: 0; - width: 766px; - height: 100%; - border-radius: 0 4px 4px 0; - background-color: $COLOR_LIGHT_GRAY; + } + &: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; - } + @media only screen and (max-width: 768px) { + width: 136px; } } .mt5_go_to_deriv_banner { @@ -621,6 +620,8 @@ } } &_btn { + cursor: pointer; + text-decoration: none; z-index: 2; padding: 8px 25px; line-height: 22px; diff --git a/src/templates/_common/components/mt5_go_to_deriv_banner.jsx b/src/templates/_common/components/mt5_go_to_deriv_banner.jsx index 9e11ac73440d3..f23fe93cb5c51 100644 --- a/src/templates/_common/components/mt5_go_to_deriv_banner.jsx +++ b/src/templates/_common/components/mt5_go_to_deriv_banner.jsx @@ -5,13 +5,13 @@ const Mt5GoToDerivBanner = ({ has_margin }) => { const classname = 'mt5_go_to_deriv_banner'; return ( ); From fa690954c14b23d1fa72eb90136647f61316f095 Mon Sep 17 00:00:00 2001 From: maryia-binary Date: Thu, 21 Jul 2022 17:05:05 +0300 Subject: [PATCH 5/9] Finalized popup for new clients (desktop + responsive) --- .../app/common/attach_dom/dialog.js | 4 +- .../app/pages/user/metatrader/metatrader.js | 8 +++- .../pages/user/metatrader/metatrader.ui.js | 17 +++++++ src/sass/app/metatrader.scss | 47 +++++++++++++++++++ 4 files changed, 73 insertions(+), 3 deletions(-) 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/pages/user/metatrader/metatrader.js b/src/javascript/app/pages/user/metatrader/metatrader.js index 67515c5c1a80e..9dea18309490e 100644 --- a/src/javascript/app/pages/user/metatrader/metatrader.js +++ b/src/javascript/app/pages/user/metatrader/metatrader.js @@ -25,7 +25,6 @@ const MetaTrader = (() => { await BinarySocket.send({ trading_servers: 1, platform: 'mt5' }); if (isEligible()) { - Mt5GoToDerivBanner.onLoad(); if (Client.get('is_virtual')) { addAllAccounts(); } else { @@ -52,7 +51,12 @@ const MetaTrader = (() => { MetaTraderUI.displayPageError(response.error.message); return; } - + const has_mt5_accounts = response.mt5_login_list.length > 0; + if (!has_mt5_accounts) { + MetaTraderUI.showGoToDerivAlertPopup(has_mt5_accounts); + } else { + Mt5GoToDerivBanner.onLoad(); + } // const valid_account = Object.values(response.mt5_login_list).filter(acc => !acc.error); // if (has_multi_mt5_accounts && (has_demo_error || has_real_error)) { diff --git a/src/javascript/app/pages/user/metatrader/metatrader.ui.js b/src/javascript/app/pages/user/metatrader/metatrader.ui.js index a8df9dbdd607e..83faf79b6b8e3 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; @@ -1268,6 +1271,19 @@ const MetaTraderUI = (() => { }); }; + const showGoToDerivAlertPopup = (has_mt5_accounts) => { + 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 : () => { BinaryPjax.load(urlFor('trading')); }, + onConfirm : () => { window.location = `https://app.deriv.com/mt5?lang=${getLanguage()}`; }, + keep_open_on_confirm: true, + }); + }; + return { init, setAccountType, @@ -1289,6 +1305,7 @@ const MetaTraderUI = (() => { setTopupLoading, getTradingPasswordConfirmVisibility, setTradingPasswordConfirmVisibility, + showGoToDerivAlertPopup, showNewAccountConfirmationPopup, shouldSetTradingPassword, diff --git a/src/sass/app/metatrader.scss b/src/sass/app/metatrader.scss index ff40cf13418d6..521f8add6fcef 100644 --- a/src/sass/app/metatrader.scss +++ b/src/sass/app/metatrader.scss @@ -634,3 +634,50 @@ tbody#instruments > tr > td { 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; + } + } + } + } +} From 0ac050c33a46d093fce34bb2abf35df04d2cc191 Mon Sep 17 00:00:00 2001 From: maryia-binary Date: Fri, 22 Jul 2022 11:53:18 +0300 Subject: [PATCH 6/9] feat: filtering mt5 accounts to show only svg and labuan (stp) --- .../user/account/settings/account_closure.js | 23 ++++++++-------- .../user/metatrader/metatrader.config.js | 5 ++++ .../app/pages/user/metatrader/metatrader.js | 26 +++++++++++-------- 3 files changed, 32 insertions(+), 22 deletions(-) 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 9dea18309490e..7ed2cf7ae1bb0 100644 --- a/src/javascript/app/pages/user/metatrader/metatrader.js +++ b/src/javascript/app/pages/user/metatrader/metatrader.js @@ -13,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 }); @@ -51,7 +52,8 @@ const MetaTrader = (() => { MetaTraderUI.displayPageError(response.error.message); return; } - const has_mt5_accounts = response.mt5_login_list.length > 0; + const filtered_mt5_login_list = getFilteredMt5LoginList(response.mt5_login_list); + const has_mt5_accounts = filtered_mt5_login_list.length > 0; if (!has_mt5_accounts) { MetaTraderUI.showGoToDerivAlertPopup(has_mt5_accounts); } else { @@ -73,7 +75,7 @@ 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) => { + filtered_mt5_login_list.forEach((mt5_login) => { if (mt5_login.error) { let message = mt5_login.error.message_to_client; @@ -321,7 +323,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); @@ -412,8 +415,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; } @@ -434,13 +438,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}`; From fb722a5e901c046fe0b49ec62170a7e4d6f5a363 Mon Sep 17 00:00:00 2001 From: maryia-binary Date: Fri, 22 Jul 2022 17:50:22 +0300 Subject: [PATCH 7/9] finalized existing clients flow --- .../app/pages/user/metatrader/metatrader.js | 15 ++++---- .../pages/user/metatrader/metatrader.ui.js | 34 ++++++++++++------- src/templates/app/user/metatrader.jsx | 2 +- 3 files changed, 31 insertions(+), 20 deletions(-) diff --git a/src/javascript/app/pages/user/metatrader/metatrader.js b/src/javascript/app/pages/user/metatrader/metatrader.js index 7ed2cf7ae1bb0..c3c1355e79a5b 100644 --- a/src/javascript/app/pages/user/metatrader/metatrader.js +++ b/src/javascript/app/pages/user/metatrader/metatrader.js @@ -52,13 +52,6 @@ const MetaTrader = (() => { MetaTraderUI.displayPageError(response.error.message); return; } - const filtered_mt5_login_list = getFilteredMt5LoginList(response.mt5_login_list); - const has_mt5_accounts = filtered_mt5_login_list.length > 0; - if (!has_mt5_accounts) { - MetaTraderUI.showGoToDerivAlertPopup(has_mt5_accounts); - } else { - Mt5GoToDerivBanner.onLoad(); - } // const valid_account = Object.values(response.mt5_login_list).filter(acc => !acc.error); // if (has_multi_mt5_accounts && (has_demo_error || has_real_error)) { @@ -75,6 +68,7 @@ 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 + const filtered_mt5_login_list = getFilteredMt5LoginList(response.mt5_login_list); filtered_mt5_login_list.forEach((mt5_login) => { if (mt5_login.error) { @@ -104,6 +98,13 @@ const MetaTrader = (() => { }); getAllAccountsInfo(response); + + const has_mt5_accounts = filtered_mt5_login_list.length > 0; + if (!has_mt5_accounts) { + MetaTraderUI.showGoToDerivAlertPopup(has_mt5_accounts); + } else { + Mt5GoToDerivBanner.onLoad(); + } }); }; diff --git a/src/javascript/app/pages/user/metatrader/metatrader.ui.js b/src/javascript/app/pages/user/metatrader/metatrader.ui.js index 83faf79b6b8e3..84e3b069a6805 100644 --- a/src/javascript/app/pages/user/metatrader/metatrader.ui.js +++ b/src/javascript/app/pages/user/metatrader/metatrader.ui.js @@ -68,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')); @@ -341,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 ( @@ -435,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 () { @@ -491,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(); @@ -1272,15 +1275,22 @@ 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 : () => { BinaryPjax.load(urlFor('trading')); }, - onConfirm : () => { window.location = `https://app.deriv.com/mt5?lang=${getLanguage()}`; }, - keep_open_on_confirm: true, + 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, }); }; diff --git a/src/templates/app/user/metatrader.jsx b/src/templates/app/user/metatrader.jsx index 942170d26b1b2..caea1ab2ce8f1 100644 --- a/src/templates/app/user/metatrader.jsx +++ b/src/templates/app/user/metatrader.jsx @@ -96,7 +96,7 @@ const Metatrader = () => (
- + {it.L('New account')}
From 52410059c0aa27b064b157b7021d13fccf216b76 Mon Sep 17 00:00:00 2001 From: maryia-binary Date: Tue, 26 Jul 2022 09:14:50 +0300 Subject: [PATCH 8/9] fix: centered the go to deriv banner --- src/sass/_common/components.scss | 1 + src/sass/app/metatrader.scss | 5 +++++ src/templates/app/user/metatrader.jsx | 2 +- 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/sass/_common/components.scss b/src/sass/_common/components.scss index 5a280d560b9ce..b5db764ccfa92 100644 --- a/src/sass/_common/components.scss +++ b/src/sass/_common/components.scss @@ -548,6 +548,7 @@ height: 70px; justify-content: space-between; padding: 15px 8px; + margin: 0 auto; } &:after { diff --git a/src/sass/app/metatrader.scss b/src/sass/app/metatrader.scss index 521f8add6fcef..199ca016630cd 100644 --- a/src/sass/app/metatrader.scss +++ b/src/sass/app/metatrader.scss @@ -628,6 +628,11 @@ 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; diff --git a/src/templates/app/user/metatrader.jsx b/src/templates/app/user/metatrader.jsx index caea1ab2ce8f1..f1980b39c9268 100644 --- a/src/templates/app/user/metatrader.jsx +++ b/src/templates/app/user/metatrader.jsx @@ -70,7 +70,7 @@ const CashierDesc = ({ title, desc, arrow_direction }) => ( const Metatrader = () => ( -
+
From d238a5eef4f8ba32eee5f42e45cbc90e895c71d5 Mon Sep 17 00:00:00 2001 From: maryia-binary Date: Mon, 1 Aug 2022 17:42:40 +0300 Subject: [PATCH 9/9] Maryia/fix: show existing STP even if missing from landing_company --- .../app/pages/user/metatrader/metatrader.js | 130 ++++++++++++------ .../pages/user/metatrader/metatrader.ui.js | 9 +- 2 files changed, 92 insertions(+), 47 deletions(-) diff --git a/src/javascript/app/pages/user/metatrader/metatrader.js b/src/javascript/app/pages/user/metatrader/metatrader.js index c3c1355e79a5b..534067ee2a2bb 100644 --- a/src/javascript/app/pages/user/metatrader/metatrader.js +++ b/src/javascript/app/pages/user/metatrader/metatrader.js @@ -92,7 +92,7 @@ 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); } } }); @@ -129,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); + }); } }; diff --git a/src/javascript/app/pages/user/metatrader/metatrader.ui.js b/src/javascript/app/pages/user/metatrader/metatrader.ui.js index 84e3b069a6805..45f159128bfe4 100644 --- a/src/javascript/app/pages/user/metatrader/metatrader.ui.js +++ b/src/javascript/app/pages/user/metatrader/metatrader.ui.js @@ -1184,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', }); });