pavel-latyshou/DEL/ MLT - Banner and Pop-Up for Binary to inform clients about the closure of business

src/javascript/app/base/page.js

@@ -28,7 +28,9 @@ const createElement    = require('../../_common/utility').createElement;
 const isLoginPages     = require('../../_common/utility').isLoginPages;
 const isProduction     = require('../../config').isProduction;
 const ClosePopup = require('../common/game_close_popup');
-const CloseBanner = require('../common/game_close_banner');
+const EuClosePopup = require('../common/eu_close_popup');
+const EuCloseBanner = require('../common/eu_close_baner');
+const CloseBanner  = require('../common/game_close_banner');
 const RedirectBanner = require('../common/redirect_banner');
 const DerivBanner = require('../common/deriv_banner');
 require('../../_common/lib/polyfills/array.includes');
@@ -127,16 +129,23 @@ const Page = (() => {
             BinarySocket.wait('authorize', 'website_status', 'get_account_status').then(() => {
                 RealityCheck.onLoad();
                 RedirectBanner.loginOnLoad();
-
                 Menu.init();
                 const is_uk_residence = (Client.get('residence') === 'gb' || State.getResponse('website_status.clients_country') === 'gb');
                 const is_iom_client = (Client.get('residence') === 'im' || State.getResponse('website_status.clients_country') === 'im');
+                const is_be_client = (Client.get('residence') === 'be' || State.getResponse('website_status.clients_country') === 'be') && Client.hasAccountType('gaming');
+                const is_at_client = (Client.get('residence') === 'at' || State.getResponse('website_status.clients_country') === 'at') && Client.hasAccountType('gaming');
+                const mlt_check = ClientBase.get('landing_company_shortcode') === 'malta';
+                const mf_check = ClientBase.get('landing_company_shortcode') === 'maltainvest';
                 if (is_uk_residence && Client.hasAccountType('gaming')) {
+                    CloseBanner.onLoad();
                     ClosePopup.loginOnLoad();
                     CloseBanner.onLoad();
                 } else if (is_iom_client && Client.hasAccountType('gaming')) {
-                    ClosePopup.loginOnLoad();
                     CloseBanner.onLoad();
+                    ClosePopup.loginOnLoad();
+                } else if (mlt_check && !mf_check || is_be_client && !mf_check || is_at_client && !mf_check) {
+                    EuClosePopup.loginOnLoad();
+                    EuCloseBanner.onLoad();
                 } else {
                     DerivBanner.loginOnLoad();
                 }

src/javascript/app/common/eu_close_baner.js

@@ -0,0 +1,37 @@
+const getElementById = require('../../_common/common_functions').getElementById;
+const BinarySocket = require('../base/socket');
+const Client = require('../base/client');
+const State = require('../../_common/storage').State;
+const isEuCountry   = require('../common/country_base').isEuCountry;
+
+const EuCloseBanner = (() => {
+    let el_close_banner_container, el_gaming_popup, el_learn_more;
+    const onLoad = () => {
+        BinarySocket.wait('authorize', 'website_status', 'landing_company').then(() => {
+            const is_be_client = (Client.get('residence') === 'be' || State.getResponse('website_status.clients_country') === 'be');
+            if (isEuCountry() || (is_be_client && Client.hasAccountType('gaming'))) {
+                el_gaming_popup = getElementById('eu-close-popup');
+                el_close_banner_container = getElementById('eu_close_banner_container');
+                el_close_banner_container.setVisibility(1);
+                el_learn_more = getElementById('eu_close_banner_btn');
+            }
+            el_learn_more.addEventListener('click', onShowPopup);
+        });
+
+    };
+
+    const onShowPopup = () => {
+        el_gaming_popup.setVisibility(1);
+        const el_top_bar = getElementById('topbar');
+        const top_popup = getElementById('top_popup');
+        el_top_bar.style.zIndex = 0;
+        document.body.style.overflow = 'hidden';
+        top_popup.scrollLeft = 0;
+        top_popup.scrollTop = 0;
+    };
+
+    return { onLoad, onShowPopup };
+
+})();
+
+module.exports = EuCloseBanner;

src/javascript/app/common/eu_close_popup.js

@@ -0,0 +1,29 @@
+const getElementById = require('../../_common/common_functions').getElementById;
+
+const EuClosePopup = (() => {
+    let el_gaming_popup, el_accept_btn;
+
+    // const onLoad = () => {
+    //     el_gaming_popup = getElementById('eu-close-popup');
+    //     el_accept_btn = getElementById('accept-btn');
+    //     el_gaming_popup.setVisibility(0);
+    //     el_accept_btn.addEventListener('click', onClosePopup);
+    // };
+    const loginOnLoad = () => {
+        el_gaming_popup = getElementById('eu-close-popup');
+        el_accept_btn = getElementById('eu-accept-btn');
+        el_gaming_popup.setVisibility(1);
+        el_accept_btn.addEventListener('click', onClosePopup);
+    };
+
+    const onClosePopup = () => {
+        el_gaming_popup.setVisibility(0);
+        const el_top_bar = getElementById('topbar');
+        el_top_bar.style.zIndex = 4;
+        document.body.style.overflow = 'auto';
+    };
+
+    return { loginOnLoad, onClosePopup };
+})();
+
+module.exports = EuClosePopup;

src/javascript/app/common/game_close_banner.js

@@ -18,13 +18,14 @@ const CloseBanner = (() => {
                 el_close_banner_container = getElementById('close_banner_container');
                 el_close_banner_container.setVisibility(1);
                 el_learn_more = getElementById('close_banner_btn');
+                el_learn_more.addEventListener('click', onShowPopup);
             } else if (is_iom_client && !client_account) {
                 el_gaming_popup = getElementById('gaming-close-popup-iom');
                 el_close_banner_container = getElementById('close_banner_container_iom');
                 el_close_banner_container.setVisibility(1);
                 el_learn_more = getElementById('close_banner_btn_iom');
+                el_learn_more.addEventListener('click', onShowPopup);
             }
-            el_learn_more.addEventListener('click', onShowPopup);
         });
 
     };

src/javascript/app/pages/trade/tradepage.js

@@ -21,7 +21,6 @@ const State             = require('../../../_common/storage').State;
 const TradePage = (() => {
     let events_initialized = 0;
     State.remove('is_trading');
-
     const onLoad = () => {
         BinarySocket.wait('authorize', 'website_status', 'landing_company').then(() => {
             const is_uk_residence = (Client.get('residence') === 'gb' || State.getResponse('website_status.clients_country') === 'gb');

src/sass/_common/components.scss

@@ -530,6 +530,118 @@
     }
 }
 
+#eu_close_banner_container {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    background-color: rgb(242, 242, 242);
+    margin-bottom: 30px;
+    border-radius: 5px;
+    padding-right: 0;
+    padding-left: 0;
+    margin-top: 30px;
+
+    .close_banner_img {
+        display: flex;
+        max-height: 100px;
+        max-width: 238px;
+        width: 100%;
+        height: 100%;
+    }
+    h3 {
+        line-height: 1 !important;
+    }
+    .close_banner {
+
+        position: relative;
+
+        &_text {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+
+            &_wrapper {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+            }
+            h3 {
+                flex: none;
+                font-size: 16px;
+                margin-top: 8px;
+                margin-bottom: 8px;
+                font-weight: 700;
+                line-height: 1;
+                // margin: 0 64px 0 0;
+                color: rgb(0, 0, 0);
+            }
+            p {
+                margin-top: 8px;
+                margin-bottom: 8px;
+                font-size: 16px;
+                font-weight: normal;
+                color: rgb(0, 0, 0);
+
+            }
+        }
+        &_btn {
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            align-self: center;
+            margin: 0 40px;
+            padding: 0 16px;
+            height: 32px;
+            line-height: 32px;
+            color: $COLOR_WHITE;
+            border-radius: 4px;
+            background-color: $COLOR_GREEN;
+            font-size: 1rem;
+            font-weight: normal;
+        }
+        &_btn p {
+            min-width: 100px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+    }
+}
+@media (min-width: 703px) {
+    #eu_close_banner_container .close_banner_text p {
+        width: 110%;
+    }
+}
+
+@media (max-width: 506px) {
+    #eu_close_banner_container .close_banner_text_wrapper {
+        padding: 7px 0px 7px 8px;
+        width: 240px !important;
+        background-image: url('../../images/close-banner/orange-bg.png');
+        background-repeat: no-repeat;
+        background-size: 99% 100%;
+    }
+}
+
+@media (max-width: 360px) {
+    #eu_close_banner_container {
+        justify-content: unset;
+        margin-left: 10px;
+        margin-right: 10px;
+
+    }
+    #eu_close_banner_container .close_banner_btn {
+        position: absolute;
+        left: 235px;
+        margin: 10px !important;
+        width: 60px;
+        font-size: 1rem !important;
+        margin-left: 8px !important;
+    }
+}
+
 .banner_container {
     margin: 0 auto;
     display: flex;
@@ -783,12 +895,6 @@
         display: none !important;
     }
 }
-// @media (max-width: 700px) {
-//     .close_banner_text_wrapper {
-//         padding-left: 20px;
-//         width: 300px !important;
-//     }
-// }
 @media (max-width: 700px) {
     .close_banner_text_wrapper {
         border-radius: 8px 0px 0px 8px !important;
@@ -808,7 +914,7 @@
     .close_banner_text_wrapper {
         // height: 70px;
         padding-left: 20px;
-        width: 300px !important;
+        width: 330px !important;
         background-image: url('../../images/close-banner/orange-bg.png');
         background-repeat: no-repeat;
         background-size: cover;
@@ -824,7 +930,7 @@
     }
     .close_banner_text_wrapper {
         padding: 15px 0px 15px 8px;
-        width: 235px !important;
+        width: 240px !important;
         background-image: url('../../images/close-banner/orange-bg.png');
         background-repeat: no-repeat;
         background-size: 99% 100%;

src/templates/_common/_layout/layout.jsx

@@ -11,6 +11,8 @@ import GamingClosePopupIom from '../components/gaming_close_popup_iom.jsx';
 import GamingClosePopup from '../components/gaming_close_popup.jsx';
 import GameCloseBanner from '../components/game_close_banner.jsx';
 import GameCloseBannerIom from '../components/game_close_banner_iom.jsx';
+import EuCloseBanner from '../components/eu_close_banner.jsx';
+import EuClosePopup from '../components/eu_close_popup.jsx';
 import RedirectBanner from '../components/EU_UK_redirect_banner.jsx';
 
 export const CONTENT_PLACEHOLDER = 'CONTENT_PLACEHOLDER';
@@ -56,6 +58,8 @@ const Layout = () => {
                         <a href='javascript:;' id='scrollup' />
                         <GameCloseBanner />
                         <GameCloseBannerIom />
+                        <EuCloseBanner />
+                        <EuClosePopup />
                         <RedirectBanner />
                         <InnerContent />
                     </div>

src/templates/_common/components/eu_close_banner.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const EuCloseBanner = ({ has_margin }) => (
+    <div
+        id='eu_close_banner_container'
+        className={`container invisible ${has_margin ? 'has_margin' : ''}`}
+    >
+        <div className='close_banner_text'>
+            <img
+                src={it.url_for('images/close-banner/icon_left.png')}
+                className='close_banner_img'
+            />
+            <div className='close_banner_text_wrapper'>
+                <h3>Your Options Account is scheduled to be closed</h3>
+                <p>Withdraw all funds from your Options Account.</p>
+            </div>
+        </div>
+        <div id='eu_close_banner_btn' className='close_banner_btn'><p>{it.L('Learn more')}</p></div>
+    </div>
+);
+
+EuCloseBanner.propTypes = {
+    has_margin: PropTypes.bool,
+};
+
+export default EuCloseBanner;

src/templates/_common/components/eu_close_popup.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+const EuClosePopup = () => (
+    <div id='eu-close-popup' className='invisible gaming-close-popup'>
+        <div id='top_popup' className='popup-content'>
+            <div className='pop-up-header' onFocus={true}>
+                <h3>Your Options Account is scheduled to be closed</h3>
+                <p className='subtitle'>
+                As part of the changes in our product line-up,
+                we are closing Options Accounts belonging to our clients in Europe.
+                </p>
+                <div className='deriv_banner_close' />
+            </div>
+            <div className='popup-content-body'>
+                <strong>What this means for you</strong>
+                <p>
+                    You are no longer able to trade options on any of our platforms.
+                    Also, you can’t make deposits into your Options Account.
+                </p>
+                <strong>Withdrawal all your funds</strong>
+                <p>You will lose access to your Options Account when it gets closed,
+                    so be sure to withdraw all your funds. (If you have a CFDs Account,
+                    you can also transfer the funds from your Options Account to your CFDs Account.)
+                </p>
+            </div>
+            <footer>
+                <button id='eu-accept-btn' className='accept-btn'>OK, I understand</button>
+            </footer>
+        </div>
+    </div>
+);
+
+export default EuClosePopup;