Mitra/add new banner for the sign up (#7295)

* feat: ✨ add new banner for the sign up

* fix: 💄 fix stylelint errors

* feat: ✨ add button cta

* feat: ✨ redirect sign up buttons to landing page

* feat: ✨ add query param to landing link

* feat: ✨ binary to deriv landing page changes

* feat: ✨ redirect to landing page from payment agent tnc links

* fix: 🐛 fix styles issues and remove flag

* fix: 🐛 fix button onclick

* fix: 🐛 open in same tab

* fix: 🐛 open link in same tab

Co-authored-by: Habib Deriv <88178645+habib-deriv@users.noreply.github.com>

Author: mitra-deriv

src/images/deriv/deriv-signup-mobile.png

@@ -20,6 +20,7 @@ const GTM                   = require('../../_common/base/gtm');
 const LiveChat              = require('../../_common/base/livechat');
 const Login                 = require('../../_common/base/login');
 const toTitleCase           = require('../../_common/string_util').toTitleCase;
+const getLanguage           = require('../../_common/language').get;
 
 const BinaryLoader = (() => {
     let container;
@@ -109,10 +110,12 @@ const BinaryLoader = (() => {
         if (active_script) {
             BinarySocket.setOnReconnect(active_script.onReconnect);
         }
+
+        changeAllBinarySignupLinkToDeriv();
     };
 
     const error_messages = {
-        login                  : () => localize('Please [_1]log in[_2] or [_3]sign up[_4] to view this page.', [`<a href="${'javascript:;'}">`, '</a>', `<a href="${urlFor('new-account')}">`, '</a>']),
+        login                  : () => localize('Please [_1]log in[_2] or [_3]sign up[_4] to view this page.', [`<a href="${'javascript:;'}">`, '</a>', `<a class="binary-to-deriv-link" href="${urlFor('new-account')}">`, '</a>']),
         only_virtual           : () => localize('This feature is available to demo accounts only.'),
         only_real              : () => localize('You are using a demo account. Please switch to a real account or create one to access Cashier.'),
         not_authenticated      : () => localize('This page is only available to logged out clients.'),
@@ -149,6 +152,8 @@ const BinaryLoader = (() => {
                         } else {
                             loadActiveScript(config);
                         }
+
+                        changeAllBinarySignupLinkToDeriv();
                     });
             }
         } else if (config.not_authenticated && Client.isLoggedIn()) {
@@ -169,6 +174,8 @@ const BinaryLoader = (() => {
                 } else {
                     displayMessage(error_messages.no_mf());
                 }
+
+                changeAllBinarySignupLinkToDeriv();
             });
         }
 
@@ -178,6 +185,8 @@ const BinaryLoader = (() => {
                     displayMessage(error_messages.no_options_mf_mx());
                 }
             });
+
+            changeAllBinarySignupLinkToDeriv();
         }
 
         if (this_page === 'deactivated-account' && Client.isLoggedIn()) {
@@ -194,6 +203,8 @@ const BinaryLoader = (() => {
                     displayMessage(error_messages.options_blocked());
                 }
             }
+
+            changeAllBinarySignupLinkToDeriv();
         });
         // TODO: temporary condition; remove once BE Apple social signup is ready
         BinarySocket.wait('get_account_status').then((response) => {
@@ -294,4 +305,14 @@ const BinaryLoader = (() => {
     };
 })();
 
+const changeAllBinarySignupLinkToDeriv = () => {
+    const language = getLanguage().toLowerCase().replace(/_/g, '-');
+    const elements = document.getElementsByClassName('binary-to-deriv-link') || [];
+
+    for (let i = 0; i < elements.length; i++) {
+        elements.item(i).removeAttribute('href');
+        elements.item(i).addEventListener('click', () => window.location.href = `/binary-to-deriv/?l=${language}&source=binary`);
+    }
+};
+
 module.exports = BinaryLoader;

src/images/deriv/deriv-signup.png

@@ -12,6 +12,8 @@ const RedirectBanner    = require('../../app/common/redirect_banner');
 const FormManager    = require('../../app/common/form_manager');
 const getFormRequest = require('../../app/common/verify_email');
 const isBinaryApp    = require('../../config').isBinaryApp;
+const getElementById = require('../../_common/common_functions').getElementById;
+const getLanguage    = require('../../_common/language').get;
 
 const Home = (() => {
     let clients_country;
@@ -35,6 +37,13 @@ const Home = (() => {
                 fnc_additional_check: checkCountry,
             });
         });
+
+        const language = getLanguage().toLowerCase().replace(/_/g, '-');
+        const explore_deriv_btn = getElementById('explore-deriv');
+        const create_a_demo_account_btn = getElementById('create-a-demo-account');
+
+        explore_deriv_btn.addEventListener('click', () => window.open(`https://deriv.com/${language}/`,'_self'));
+        create_a_demo_account_btn.addEventListener('click', () => window.open(`https://deriv.com/${language}/signup/`,'_self'));
     };
 
     const checkCountry = (req) => {

src/images/pages/home/home-banner.png

@@ -31,7 +31,7 @@
 	<meta name="referrer" content="origin">
     <title>Binary Bot</title>
     <link href="css/bundle-bfd9aa3ef3.css" rel="stylesheet" />    <link rel="stylesheet" href="css/binary.css">
-    <link href="css/bot-a2172c47a0.css" rel="stylesheet" /></head>
+    <link href="css/bot-3073ff0f47.css" rel="stylesheet" /></head>
 
 <body>
     <div id="bot-main" class="hidden" style="width: 100%;position: relative;height: 100%;">  
@@ -270,7 +270,7 @@ <h1 data-i18n-text="Reality Check"></h1>
         <source src="sound/i-am-being-serious.ogg" type="audio/ogg" />
         <source src="sound/i-am-being-serious.mp3" type="audio/mp3" />
     </audio>
-    <script src="js/bundle-ca910a23e2.js"></script><script src="js/bot-9b91d533a3.min.js"></script>    <div id='elevio-shell' class='invisible'>
+    <script src="js/bundle-ca910a23e2.js"></script><script src="js/bot-2dab14c3a4.min.js"></script>    <div id='elevio-shell' class='invisible'>
         <span class='text'></span>
         <span class='icon'>
             <svg viewBox="0 0 74.2 74.2">