Update logo + EU detection for (non-)logged in users

Author: aaimio

src/botPage/common/const.js

@@ -235,8 +235,7 @@ const config = {
     quick_strategies: ['martingale', 'dalembert'],
 };
 
-export async function updateConfigCurrencies() {
-    const api = generateLiveApiInstance();
+export async function updateConfigCurrencies(api = generateLiveApiInstance()) {
     try {
         const response = await api.getPayoutCurrencies();
         config.lists.CURRENCY = response.payout_currencies.map(c => [c, c]);

src/botPage/view/View.js

@@ -28,7 +28,7 @@ import {
     addTokenIfValid,
 } from '../../common/appId';
 import { translate } from '../../common/i18n';
-import isEuCountry, { showHideEuElements } from '../../common/footer-checks';
+import { isEuCountry, showHideEuElements, hasEuAccount } from '../../common/footer-checks';
 import googleDrive from '../../common/integrations/GoogleDrive';
 import { getLanguage } from '../../common/lang';
 import { observer as globalObserver } from '../../common/utils/observer';
@@ -187,6 +187,9 @@ const updateTokenList = () => {
         loginButton.show();
         accountList.hide();
 
+        // If logged out, determine EU based on IP.
+        isEuCountry(api).then(isEu => showHideEuElements(isEu));
+
         $('.account-id')
             .removeAttr('value')
             .text('');
@@ -197,13 +200,17 @@ const updateTokenList = () => {
     } else {
         loginButton.hide();
         accountList.show();
+
         const activeToken = getActiveToken(tokenList, getStorage(AppConstants.STORAGE_ACTIVE_TOKEN));
+        showHideEuElements(hasEuAccount(tokenList));
         updateLogo(activeToken.token);
         addBalanceForToken(activeToken.token);
+
         if (!('loginInfo' in activeToken)) {
             removeAllTokens();
             updateTokenList();
         }
+
         tokenList.forEach(tokenInfo => {
             const prefix = isVirtual(tokenInfo) ? 'Virtual Account' : `${tokenInfo.loginInfo.currency} Account`;
             if (tokenInfo === activeToken) {
@@ -234,7 +241,7 @@ export default class View {
     constructor() {
         logHandler();
         this.initPromise = new Promise(resolve => {
-            updateConfigCurrencies().then(() => {
+            updateConfigCurrencies(api).then(() => {
                 symbolPromise.then(() => {
                     updateTokenList();
                     this.blockly = new _Blockly();
@@ -727,7 +734,6 @@ function initRealityCheck(stopCallback) {
     );
 }
 function renderReactComponents() {
-    isEuCountry().then(isEu => showHideEuElements(isEu));
     ReactDOM.render(<ServerTime api={api} />, $('#server-time')[0]);
     ReactDOM.render(<Tour />, $('#tour')[0]);
     ReactDOM.render(

src/common/footer-checks.js

@@ -20,25 +20,26 @@ export const showHideEuElements = isEu => {
     });
 };
 
-export default async function isEuCountry() {
-    const api = generateLiveApiInstance();
-    const {
-        website_status: { clients_country: clientsCountry },
-    } = await api.send({ website_status: 1 });
-    const {
-        landing_company: { financial_company: financialCompany, gaming_company: gamingCompany },
-    } = await api.send({
-        landing_company: clientsCountry,
-    });
+/* eslint-disable camelcase */
+export const isEuLandingCompany = landing_company => /^(maltainvest|malta|iom)$/.test(landing_company);
+
+export const hasEuAccount = token_list =>
+    token_list.some(token_obj => isEuLandingCompany(token_obj.loginInfo.landing_company_name));
 
-    const euShortcodeRegex = new RegExp('^(maltainvest|malta|iom)$');
-    const euExcludedRegex = new RegExp('^mt$');
-    const financialShortcode = financialCompany ? financialCompany.shortcode : false;
-    const gamingShortcode = gamingCompany ? gamingCompany.shortcode : false;
+export const isEuCountry = async (api = generateLiveApiInstance()) => {
+    const { website_status } = await api.send({ website_status: 1 });
+    const { clients_country } = website_status;
+    const { landing_company } = await api.send({ landing_company: clients_country });
+    const { financial_company, gaming_company } = landing_company;
 
-    api.disconnect();
+    const eu_excluded_regexp = /^mt$/;
+    const financial_shortcode = financial_company ? financial_company.shortcode : false;
+    const gaming_shortcode = gaming_company ? gaming_company.shortcode : false;
 
-    return financialShortcode || gamingShortcode
-        ? euShortcodeRegex.test(financialShortcode) || euShortcodeRegex.test(gamingShortcode)
-        : euExcludedRegex.test(clientsCountry);
-}
+    if (financial_shortcode || gaming_shortcode) {
+        return isEuLandingCompany(financial_shortcode) || isEuLandingCompany(gaming_shortcode);
+    }
+
+    return eu_excluded_regexp.test(clients_country);
+};
+/* eslint-enable */

src/indexPage/index.js

@@ -4,19 +4,17 @@ import endpoint from './endpoint';
 import Logo from './react-components/logo.jsx';
 import Footer from './react-components/footer.jsx';
 import { oauthLogin } from '../common/appId';
-import '../common/binary-ui/dropdown';
-import isEuCountry, { showHideEuElements } from '../common/footer-checks';
+import { isEuCountry, showHideEuElements } from '../common/footer-checks';
 import GTM from '../common/gtm';
 import { load as loadLang } from '../common/lang';
 import { getTokenList } from '../common/utils/storageManager';
 import { createUrl } from '../common/utils/tools';
+import '../common/binary-ui/dropdown';
 
 const renderElements = () => {
     ReactDOM.render(<Logo />, document.getElementById('binary-logo'));
     ReactDOM.render(<Footer />, document.getElementById('footer'));
-    isEuCountry().then(isEu => {
-        showHideEuElements(isEu);
-    });
+    isEuCountry().then(isEu => showHideEuElements(isEu));
     $('#shop-url').attr('href', createUrl({ subdomain: 'shop', path: 'collections/strategies', isNonBotPage: true }));
 };
 

static/css/_dbot-banner.scss

@@ -1,4 +1,6 @@
 .dbot-banner {
+    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@700&display=swap');
+    font-family: 'IBM Plex Sans', sans-serif;
     -webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: antialiased;
     align-items: center;
@@ -14,17 +16,14 @@
     }
     &__ad {
         color: #fff;
-        margin-right: 11px;
+        margin-right: 16px;
         display: flex;
         justify-content: center;
 
-        &-title {
-            font-weight: normal;
-            font-size: 14px;
-        }
-        &-subtitle {
+        &-text {
             font-size: 16px;
             font-weight: bold;
+            line-height: 1.5;
         }
     }
     &__button {
@@ -37,7 +36,7 @@
         touch-action: manipulation;
         cursor: pointer;
         white-space: nowrap;
-        padding: 0 1.6rem;
+        padding: 0 16px;
         display: inline-flex;
         border: 0;
         height: 32px;

templates/partials/dbot-banner.mustache

@@ -8,8 +8,8 @@
     </a>
     <div class="dbot-banner__ad">
         <a href="https://deriv.com/interim/deriv/?utm_source=binary-bot&utm_medium=referral&utm_campaign=deriv-launch" target="_blank">
-            <div class="dbot-banner__ad-title" data-i18n-text="Experience our"></div>
-            <div class="dbot-banner__ad-subtitle" data-i18n-text="new bot builder on Deriv"></div>
+            <div class="dbot-banner__ad-text" data-i18n-text="Binary Bot is"></div>
+            <div class="dbot-banner__ad-text" data-i18n-text="becoming DBot"></div>
         </a>
     </div>
     <a class="dbot-banner__button" href="https://deriv.com/interim/deriv/?utm_source=binary-bot&utm_medium=referral&utm_campaign=deriv-launch" target="_blank" data-i18n-text="Learn more"></a>