From 041cff34267070e8e9b91a33ae7c4cdd5b2a8d54 Mon Sep 17 00:00:00 2001 From: sara-fs Date: Sun, 28 Nov 2021 21:40:02 +0330 Subject: [PATCH 1/4] Redirect users to deriv --- src/botPage/view/View.js | 7 +- .../view/react-components/MovingBanner.js | 71 ++++++++++--------- src/common/footer-checks.js | 19 +---- src/common/utils/utility.js | 36 ++++++++++ .../react-components/NotificationBanner.jsx | 60 +++++----------- static/css/_notification-banner.scss | 40 ++--------- 6 files changed, 104 insertions(+), 129 deletions(-) create mode 100644 src/common/utils/utility.js diff --git a/src/botPage/view/View.js b/src/botPage/view/View.js index 4eaa2bdac1..7ed1d4db38 100644 --- a/src/botPage/view/View.js +++ b/src/botPage/view/View.js @@ -309,8 +309,11 @@ export default class View { if ( isLoggedin() && - (localStorage.getItem('landingCompany') === 'maltainvest' || - isOptionsBlocked(localStorage.getItem('residence'))) + isOptionsBlocked( + localStorage.getItem('residence') + // localStorage.getItem('landingCompany') === 'maltainvest' + // this condition is commented because the MF accounts should be redirected to deriv)) + ) ) { this.showHeader(getStorage('showHeader') !== 'false'); this.setElementActions(); diff --git a/src/botPage/view/react-components/MovingBanner.js b/src/botPage/view/react-components/MovingBanner.js index 737ef10038..0b14e7342c 100644 --- a/src/botPage/view/react-components/MovingBanner.js +++ b/src/botPage/view/react-components/MovingBanner.js @@ -1,16 +1,23 @@ import React from 'react'; -import { isEuCountry, isUKCountry } from '../../../common/footer-checks'; import { getTokenList, get as getStorage } from '../../../common/utils/storageManager'; import { AppConstants } from '../../../common/appId'; import { translate } from '../../../common/i18n'; import { showBanner } from '../../../common/lang'; +import { isEuCountry, isUKCountry } from '../../../common/utils/utility'; +/* eslint-disable camelcase */ const MovingBanner = ({ api }) => { const [showMovingBanner, setshowMovingBanner] = React.useState(false); const tokenList = getTokenList(); React.useEffect(() => { - checkForshowMovingBanner(); + checkForshowMovingBanner().then(show => { + if (show) { + setshowMovingBanner(true); + return; + } + showBanner(); + }); }, []); const getActiveToken = activeToken => { @@ -18,48 +25,46 @@ const MovingBanner = ({ api }) => { return activeTokenObject.length ? activeTokenObject[0] : tokenList[0]; }; - const checkForshowMovingBanner = () => { - if (!tokenList.length) { - isEuUK(api, true); - return; - } + const checkForshowMovingBanner = async () => { + const { website_status } = await api.send({ website_status: 1 }); + const { clients_country } = website_status; + const residence = localStorage.getItem('residence'); const landingCompanyName = tokenList.map(token => token.loginInfo.landing_company_name); const activeToken = getActiveToken(tokenList, getStorage(AppConstants.STORAGE_ACTIVE_TOKEN)); + if (!tokenList.length) { + if (isEuCountry(clients_country) || isUKCountry(clients_country)) { + return true; + } + } if (landingCompanyName.length === 1 && landingCompanyName.includes('virtual')) { - isEuUK(false); - return; + if (isEuCountry(residence)) { + // EU based on residence + redirectToBinary(); + } + if (isEuCountry(clients_country) || isUKCountry(clients_country)) { + return true; + } } - if (landingCompanyName.includes('maltainvest') && landingCompanyName.includes('virtual')) { - if (landingCompanyName.length === 2) { - setshowMovingBanner(true); - return; + if (landingCompanyName.includes('maltainvest')) { + if (!isEuCountry(clients_country)) { + // non EU based on ip + redirectToBinary(); } if ( - (landingCompanyName.includes('malta') || landingCompanyName.includes('iom')) && - activeToken.loginInfo.landing_company_name === 'maltainvest' + landingCompanyName.includes('virtual') && + (landingCompanyName.length === 2 || + ((landingCompanyName.includes('malta') || landingCompanyName.includes('iom')) && + activeToken.loginInfo.landing_company_name === 'maltainvest')) ) { - setshowMovingBanner(true); - return; + return true; } } - showBanner(); + return false; }; - const isEuUK = checkLoggedin => { - isEuCountry(api, checkLoggedin).then(isEu => { - if (isEu) { - setshowMovingBanner(true); - return; - } - isUKCountry(api, checkLoggedin).then(isUk => { - if (isUk) { - setshowMovingBanner(true); - return; - } - showBanner(); - }); - }); + const redirectToBinary = () => { + window.location.replace('https://binary.com/move-to-deriv'); }; return ( @@ -68,7 +73,7 @@ const MovingBanner = ({ api }) => { .getElementsByClassName('dbot-banner')[0] .parentNode.removeChild(document.getElementsByClassName('dbot-banner')[0]) && (
-
+

{translate('Binary.com is moving to Deriv on 30 November')}

diff --git a/src/common/footer-checks.js b/src/common/footer-checks.js index f9eecf1238..f97e7c91eb 100644 --- a/src/common/footer-checks.js +++ b/src/common/footer-checks.js @@ -27,12 +27,12 @@ export const isEuLandingCompany = landing_company => /^(maltainvest|malta|iom)$/ export const hasEuAccount = token_list => token_list.some(token_obj => isEuLandingCompany(token_obj.loginInfo.landing_company_name)); -export const isEuCountry = async (api = generateLiveApiInstance(), checkLoggedin = true) => { +export const isEuCountry = async (api = generateLiveApiInstance()) => { const { website_status } = await api.send({ website_status: 1 }); let { clients_country } = website_status; - if (checkLoggedin && getTokenList().length) { - // isLoggedin + // isLoggedin + if (getTokenList().length) { clients_country = localStorage.getItem('residence'); } const { landing_company } = await api.send({ landing_company: clients_country }); @@ -47,17 +47,4 @@ export const isEuCountry = async (api = generateLiveApiInstance(), checkLoggedin return eu_excluded_regexp.test(clients_country); }; -export const isUKCountry = async (api = generateLiveApiInstance(), checkLoggedin = true) => { - const { website_status } = await api.send({ website_status: 1 }); - let { clients_country } = website_status; - if (checkLoggedin && getTokenList().length) { - // isLoggedin - clients_country = localStorage.getItem('residence'); - } - if (clients_country === 'gb') { - return true; - } - return false; -}; - /* eslint-enable */ diff --git a/src/common/utils/utility.js b/src/common/utils/utility.js new file mode 100644 index 0000000000..259039ceb9 --- /dev/null +++ b/src/common/utils/utility.js @@ -0,0 +1,36 @@ +const euCountries = [ + 'it', + 'de', + 'fr', + 'lu', + 'gr', + 'mf', + 'es', + 'sk', + 'lt', + 'nl', + 'at', + 'bg', + 'si', + 'cy', + 'be', + 'ro', + 'hr', + 'pt', + 'pl', + 'lv', + 'ee', + 'cz', + 'fi', + 'hu', + 'dk', + 'se', + 'ie', + 'im', + 'gb', + 'mt', +]; + +export const isEuCountry = country => euCountries.includes(country); + +export const isUKCountry = country => country === 'gb'; diff --git a/src/indexPage/react-components/NotificationBanner.jsx b/src/indexPage/react-components/NotificationBanner.jsx index d03ad63062..9900c62a03 100644 --- a/src/indexPage/react-components/NotificationBanner.jsx +++ b/src/indexPage/react-components/NotificationBanner.jsx @@ -1,63 +1,37 @@ import React from 'react'; import { translate } from '../../common/i18n'; -import { isEuCountry, isUKCountry } from '../../common/footer-checks'; -import { getTokenList, get as getStorage } from '../../common/utils/storageManager'; -import { AppConstants } from '../../common/appId'; +import { getTokenList } from '../../common/utils/storageManager'; +import { isEuCountry, isUKCountry } from '../../common/utils/utility'; +import { generateLiveApiInstance } from '../../common/appId'; -const NotificationBanner = ({ api }) => { +const NotificationBanner = () => { const [showBanner, setShowBanner] = React.useState(false); const tokenList = getTokenList(); React.useEffect(() => { - checkForShowBanner(); + checkForShowBanner().then(show => { + if(show){ + setShowBanner(true); + } + }); }, []); - const getActiveToken = activeToken => { - const activeTokenObject = tokenList.filter(tokenObject => tokenObject.token === activeToken); - return activeTokenObject.length ? activeTokenObject[0] : tokenList[0]; - }; + const checkForShowBanner = async () => { + const api = generateLiveApiInstance(); + const { website_status } = await api.send({ website_status: 1 }); + const { clients_country } = website_status; - const checkForShowBanner = () => { if (!tokenList.length) { - isEuUK(api, true); - return; - } - const landingCompanyName = tokenList.map(token => token.loginInfo.landing_company_name); - const activeToken = getActiveToken(tokenList, getStorage(AppConstants.STORAGE_ACTIVE_TOKEN)); - - if (landingCompanyName.length === 1 && landingCompanyName.includes('virtual')) { - isEuUK(false); - return; - } - if (landingCompanyName.includes('maltainvest') && landingCompanyName.includes('virtual')) { - if (landingCompanyName.length === 2) { - setShowBanner(true); - return; - } - if ( - (landingCompanyName.includes('malta') || landingCompanyName.includes('iom')) && - activeToken.loginInfo.landing_company_name === 'maltainvest' - ) { - setShowBanner(true); + if(isEuCountry(clients_country) || isUKCountry (clients_country)){ + return true; } } - }; - - const isEuUK = checkLoggedin => { - isEuCountry(api, checkLoggedin).then(isEu => { - if (isEu) { - setShowBanner(true); - return; - } - isUKCountry(api, checkLoggedin).then(isUk => { - setShowBanner(isUk); - }); - }); + return false; }; return ( showBanner && ( -
+
diff --git a/static/css/_notification-banner.scss b/static/css/_notification-banner.scss index 0f05ae2c2e..74e7d6a26f 100644 --- a/static/css/_notification-banner.scss +++ b/static/css/_notification-banner.scss @@ -6,20 +6,14 @@ flex-direction: row; max-width: 940px; width: 100%; - margin: auto; align-items: center; align-items: center; - position: absolute; - left: 50%; - transform: translate(-40%, 0); + position: relative; + margin: 1rem auto; + left: 0; + transform: none; z-index: 100 !important; - &-welcome{ - position: relative; - margin: 1rem auto; - left: 0; - transform: none; - } &__orange-hexagon { display: none; border-bottom: 130px solid $brand-orange; @@ -27,13 +21,6 @@ border-right: 45px solid transparent; height: 0; width: 26rem; - - &_text { - display: flex; - flex-direction: column; - color: $white; - padding: 1rem; - } } &__content { @@ -58,7 +45,6 @@ text-decoration: none; text-align: center; line-height: 100%; - text-transform: capitalize; padding: 8px 25px; display: inline-block; font-weight: 400; @@ -69,12 +55,7 @@ border: 0; background: $brand-btn; color: $white !important; - min-height: 38px; - - - &-welcome{ - min-height: auto; - } + min-height: auto; } @media (max-width: 1234px) { @@ -96,14 +77,9 @@ max-width: 880px; } @media (max-width: 1024px) { - max-width: 595px; - transform: translate(-35%, 0); - - &-welcome{ max-width: 700px; padding: 0 10px 0 0; transform: none; - } > img { display: none; @@ -113,14 +89,8 @@ } } @media (max-width: 769px) { - transform: translate(-50%, 0); - max-width: 100%; - - &-welcome{ max-width: 520px; padding: 0 10px 0 0; transform: none; } - } - } From 3f977938d9a4d047c17216efa53ca3b391e6d516 Mon Sep 17 00:00:00 2001 From: sara-fs Date: Sun, 5 Dec 2021 14:16:22 +0330 Subject: [PATCH 2/4] Changed eu countries --- src/common/utils/utility.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/common/utils/utility.js b/src/common/utils/utility.js index 259039ceb9..611824ab18 100644 --- a/src/common/utils/utility.js +++ b/src/common/utils/utility.js @@ -4,7 +4,6 @@ const euCountries = [ 'fr', 'lu', 'gr', - 'mf', 'es', 'sk', 'lt', @@ -26,7 +25,6 @@ const euCountries = [ 'dk', 'se', 'ie', - 'im', 'gb', 'mt', ]; From 661413decc55a8acdc8afd6265baa15867051529 Mon Sep 17 00:00:00 2001 From: sara-fs Date: Mon, 6 Dec 2021 14:41:10 +0330 Subject: [PATCH 3/4] redircting users instead of showing banner --- src/botPage/view/View.js | 9 +- .../view/react-components/MovingBanner.js | 93 +++---------------- src/common/utils/utility.js | 29 ++++++ src/indexPage/index.js | 4 +- 4 files changed, 48 insertions(+), 87 deletions(-) diff --git a/src/botPage/view/View.js b/src/botPage/view/View.js index 7ed1d4db38..f9722b37ce 100644 --- a/src/botPage/view/View.js +++ b/src/botPage/view/View.js @@ -31,7 +31,7 @@ import { import { translate } from '../../common/i18n'; import { isEuCountry, showHideEuElements, hasEuAccount } from '../../common/footer-checks'; import googleDrive from '../../common/integrations/GoogleDrive'; -import { getLanguage } from '../../common/lang'; +import { getLanguage, showBanner } from '../../common/lang'; import { observer as globalObserver } from '../../common/utils/observer'; import { getTokenList, @@ -48,7 +48,7 @@ import { getUnattachedMandatoryPairs, saveBeforeUnload, } from './blockly/utils'; -import MovingBanner from './react-components/MovingBanner'; +import { moveToDeriv } from '../../common/utils/utility'; let realityCheckTimeout; let chart; @@ -206,6 +206,7 @@ const updateTokenList = () => { // If logged out, determine EU based on IP. isEuCountry(api).then(isEu => showHideEuElements(isEu)); + showBanner(); $('.account-id') .removeAttr('value') .text(''); @@ -219,6 +220,7 @@ const updateTokenList = () => { const activeToken = getActiveToken(tokenList, getStorage(AppConstants.STORAGE_ACTIVE_TOKEN)); showHideEuElements(hasEuAccount(tokenList)); + showBanner(); updateLogo(activeToken.token); addBalanceForToken(activeToken.token); @@ -298,7 +300,6 @@ const checkForRequiredBlocks = () => { return true; }; - export default class View { constructor() { logHandler(); @@ -328,6 +329,7 @@ export default class View { this.setElementActions(); initRealityCheck(() => $('#stopButton').triggerHandler('click')); applyToolboxPermissions(); + moveToDeriv(); renderReactComponents(); if (!getTokenList().length) updateLogo(); this.showHeader(getStorage('showHeader') !== 'false'); @@ -853,5 +855,4 @@ function renderReactComponents() { document.getElementById('errorArea').remove(); ReactDOM.render(, $('#summaryPanel')[0]); ReactDOM.render(, $('#logTable')[0]); - ReactDOM.render(, $('#moving-banner')[0]); } diff --git a/src/botPage/view/react-components/MovingBanner.js b/src/botPage/view/react-components/MovingBanner.js index fd73029057..8bd2ed9596 100644 --- a/src/botPage/view/react-components/MovingBanner.js +++ b/src/botPage/view/react-components/MovingBanner.js @@ -1,87 +1,18 @@ import React from 'react'; -import { getTokenList, get as getStorage } from '../../../common/utils/storageManager'; -import { AppConstants } from '../../../common/appId'; import { translate } from '../../../common/i18n'; -import { showBanner } from '../../../common/lang'; -import { isEuCountry, isUKCountry } from '../../../common/utils/utility'; -/* eslint-disable camelcase */ -const MovingBanner = ({ api }) => { - const [showMovingBanner, setshowMovingBanner] = React.useState(false); - const tokenList = getTokenList(); - - React.useEffect(() => { - checkForshowMovingBanner().then(show => { - if (show) { - setshowMovingBanner(true); - return; - } - showBanner(); - }); - }, []); - - const getActiveToken = activeToken => { - const activeTokenObject = tokenList.filter(tokenObject => tokenObject.token === activeToken); - return activeTokenObject.length ? activeTokenObject[0] : tokenList[0]; - }; - - const checkForshowMovingBanner = async () => { - const { website_status } = await api.send({ website_status: 1 }); - const { clients_country } = website_status; - const residence = localStorage.getItem('residence'); - const landingCompanyName = tokenList.map(token => token.loginInfo.landing_company_name); - const activeToken = getActiveToken(tokenList, getStorage(AppConstants.STORAGE_ACTIVE_TOKEN)); - - if (!tokenList.length) { - if (isEuCountry(clients_country) || isUKCountry(clients_country)) { - return true; - } - } - if (landingCompanyName.length === 1 && landingCompanyName.includes('virtual')) { - if (isEuCountry(residence)) { - // EU based on residence - redirectToBinary(); - } - if (isEuCountry(clients_country) || isUKCountry(clients_country)) { - return true; - } - } - if (landingCompanyName.includes('maltainvest')) { - if (!isEuCountry(clients_country)) { - // non EU based on ip - redirectToBinary(); - } - if ( - landingCompanyName.includes('virtual') && - (landingCompanyName.length === 2 || - ((landingCompanyName.includes('malta') || landingCompanyName.includes('iom')) && - activeToken.loginInfo.landing_company_name === 'maltainvest')) - ) { - return true; - } - } - return false; - }; - - const redirectToBinary = () => { - window.location.replace('https://binary.com/move-to-deriv'); - }; - - return ( - showMovingBanner && - document - .getElementsByClassName('dbot-banner')[0] - .parentNode.removeChild(document.getElementsByClassName('dbot-banner')[0]) && ( -
- - ) +const MovingBanner = () => + document + .getElementsByClassName('dbot-banner')[0] + .parentNode.removeChild(document.getElementsByClassName('dbot-banner')[0]) && ( +
+
+ +

{translate('Binary.com is moving to Deriv')}

+ + {translate('Trade on Deriv')} + +
); -}; export default MovingBanner; diff --git a/src/common/utils/utility.js b/src/common/utils/utility.js index 611824ab18..be57235c9a 100644 --- a/src/common/utils/utility.js +++ b/src/common/utils/utility.js @@ -1,3 +1,6 @@ +import { generateLiveApiInstance } from '../../common/appId'; +import { getTokenList } from '../../common/utils/storageManager'; + const euCountries = [ 'it', 'de', @@ -32,3 +35,29 @@ const euCountries = [ export const isEuCountry = country => euCountries.includes(country); export const isUKCountry = country => country === 'gb'; + +/* eslint-disable camelcase */ +export const moveToDeriv = async () => { + const api = generateLiveApiInstance(); + console.log('api:', api); + const { website_status } = await api.send({ website_status: 1 }); + const { clients_country } = website_status; + const tokenList = getTokenList(); + const landingCompanyName = tokenList.map(token => token.loginInfo.landing_company_name); + + if (!tokenList.length) { + if (isEuCountry(clients_country) || isUKCountry(clients_country)) { + window.location.replace('https://binary.com/move-to-deriv'); + } + } + + if ( + (landingCompanyName.length === 1 && + landingCompanyName.includes('virtual') && + (isEuCountry(clients_country) || isUKCountry(clients_country))) || + landingCompanyName.includes('maltainvest') || + landingCompanyName.includes('malta') || landingCompanyName.includes('iom') + ) { + window.location.replace('https://binary.com/move-to-deriv'); + } +}; diff --git a/src/indexPage/index.js b/src/indexPage/index.js index c322f77f89..44da8fb6dd 100644 --- a/src/indexPage/index.js +++ b/src/indexPage/index.js @@ -7,13 +7,12 @@ import { oauthLogin } from '../common/appId'; import { isEuCountry, showHideEuElements } from '../common/footer-checks'; import GTM from '../common/gtm'; import { load as loadLang, showBanner } from '../common/lang'; +import { moveToDeriv } from '../common/utils/utility'; import { getTokenList } from '../common/utils/storageManager'; import { createUrl } from '../common/utils/tools'; import '../common/binary-ui/dropdown'; -import NotificationBanner from './react-components/NotificationBanner.jsx'; const renderElements = () => { - ReactDOM.render(, document.getElementById('notification-banner')); ReactDOM.render(, document.getElementById('binary-logo')); ReactDOM.render(