Verberg elementen voor EU gebruikers

Author: aaimio

src/botPage/view/View.js

@@ -28,6 +28,7 @@ import {
     addTokenIfValid,
 } from '../../common/appId';
 import { translate } from '../../common/i18n';
+import isEuCountry, { showHideEuElements } from '../../common/footer-checks';
 import googleDrive from '../../common/integrations/GoogleDrive';
 import { getLanguage } from '../../common/lang';
 import { observer as globalObserver } from '../../common/utils/observer';
@@ -212,7 +213,9 @@ const updateTokenList = () => {
                 $('.account-type').text(`${prefix}`);
             } else {
                 $('.login-id-list').append(
-                    `<a href="#" value="${tokenInfo.token}"><li><span>${prefix}</span><div>${tokenInfo.accountName}</div></li></a><div class="separator-line-thin-gray"></div>`
+                    `<a href="#" value="${tokenInfo.token}"><li><span>${prefix}</span><div>${
+                        tokenInfo.accountName
+                    }</div></li></a><div class="separator-line-thin-gray"></div>`
                 );
             }
         });
@@ -724,6 +727,7 @@ 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

@@ -1,10 +1,33 @@
 /* eslint-disable import/prefer-default-export */
 import { generateLiveApiInstance } from './appId';
 
+export const showHideEuElements = isEu => {
+    document.querySelectorAll('.eu-hide').forEach(el => {
+        if (!isEu && el.classList.contains('invisible')) {
+            // Keep original display type if invisible was specified.
+            el.classList.remove('invisible');
+        } else {
+            // Default to setting display to block.
+            el.setAttribute('display', `${!isEu ? 'block' : 'none'} !important`);
+        }
+    });
+    document.querySelectorAll('.eu-show', '.eu-only').forEach(el => {
+        if (isEu && el.classList.contains('invisible')) {
+            el.classList.remove('invisible');
+        } else {
+            el.setAttribute('display', `${isEu ? 'block' : 'none'} !important`);
+        }
+    });
+};
+
 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({
+    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,
     });
 

src/indexPage/index.js

@@ -5,17 +5,13 @@ 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 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';
 
 const renderElements = () => {
-    const showHideEuElements = isEu => {
-        $('.eu-hide').attr('style', `display: ${isEu ? 'none' : 'block'} !important`);
-        $('.eu-show, .eu-only').attr('style', `display: ${isEu ? 'block' : 'none'} !important`);
-    };
     ReactDOM.render(<Logo />, document.getElementById('binary-logo'));
     ReactDOM.render(<Footer />, document.getElementById('footer'));
     isEuCountry().then(isEu => {

static/css/_dbot-banner.scss

@@ -63,13 +63,13 @@
     }
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 520px) {
     .dbot-banner {
         display: none;
     }
 }
 
-@media only screen and (max-width: 769px) {
+@media only screen and (max-width: 700px) {
     .dbot-banner {
         &__separator {
             display: none;

templates/partials/dbot-banner.mustache

@@ -1,4 +1,4 @@
-<div class="dbot-banner">
+<div class="dbot-banner eu-hide invisible">
     <div class="dbot-banner__separator"></div>
         <div class="dbot-banner__icon">
             <a href="https://deriv.com/interim/deriv/?utm_source=binary-bot&utm_medium=referral&utm_campaign=deriv-launch" target="_blank">