Merge pull request #3659 from rupato-deriv/translations-for-landing-page

Rupato / hot fixes for landing page

Author: mehrzad-fs

src/botPage/view/View.js

@@ -41,7 +41,7 @@ import {
     getToken,
     remove,
 } from '../../common/utils/storageManager';
-import { isProduction } from '../../common/utils/tools';
+import { isProduction, parseQueryString, serialize } from '../../common/utils/tools';
 import GTM from '../../common/gtm';
 import {
     getMissingBlocksTypes,
@@ -843,16 +843,15 @@ function renderErrorPage() {
 function renderReactComponents() {
     $('.barspinner').show();
     const bannerToken = getStorage('setDueDateForBanner');
+    const qs = parseQueryString();
     if (new Date().getTime() > Number(bannerToken)) {
         remove('setDueDateForBanner');
-        const getqueryParameter = document.location.search;
-        const getDefaultPath = window.location.href.replace('/bot.html', getqueryParameter);
+        const getDefaultPath = window.location.href.replace('/bot.html', serialize(qs));
         window.location.replace(getDefaultPath);
         return false;
     }
     if (bannerToken === null || bannerToken === undefined) {
-        const getqueryParameter = document.location.search;
-        const getDefaultPath = window.location.href.replace('/bot.html', getqueryParameter);
+        const getDefaultPath = window.location.href.replace('/bot.html', serialize(qs));
         window.location.replace(getDefaultPath);
         document.getElementById('errorArea').remove();
         $('.barspinner').hide();
@@ -876,6 +875,7 @@ function renderReactComponents() {
         render(<TradeInfoPanel api={api} />, $('#summaryPanel')[0]);
         render(<LogTable />, $('#logTable')[0]);
         document.getElementById('bot-main').classList.remove('hidden');
+        document.getElementById('toolbox').classList.remove('hidden');
         $('.barspinner').hide();
     }
 }

src/common/lang.js

@@ -34,14 +34,18 @@ export const load = () => {
 
     $('#select_language li:not(:first)').click(function click() {
         const newLang = $(this).attr('class');
-        if (document.getElementById('bot-landing').classList.contains('hidden') === false) {
+        if (
+            document.getElementById('bot-landing') !== null &&
+            document.getElementById('bot-landing') !== undefined &&
+            document.getElementById('bot-landing').classList.contains('hidden') === false
+        ) {
             remove('setDueDateForBanner');
             render(<BotLanding />, document.getElementById('bot-landing'));
             elements.map(elem => document.querySelector(elem).classList.add('hidden'));
             document.getElementById('bot-landing').classList.remove('hidden');
             document.getElementById('bot-main').classList.remove('hidden');
-            $('.barspinner').hide();
             document.location.search = `l=${newLang}`;
+            $('.barspinner').hide();
         } else {
             document.location.search = `l=${newLang}`;
         }

src/common/utils/tools.js

@@ -12,6 +12,27 @@ export const parseQueryString = () => {
     });
     return objURL;
 };
+export const generateURL = url => {
+    if (url.split('?').length !== null && url.split('?').length !== undefined) {
+        const baseUrl = url.split('?')[0];
+        const queryParams = url.split('?')[1];
+        return `${baseUrl}bot.html?${queryParams}`;
+    } 
+    return `${url.replace(/\/+$/, '')}/bot.html`;
+    
+};
+
+export const serialize = obj => {
+    const str = [];
+    Object.keys(obj).forEach(key => {
+        // eslint-disable-next-line no-prototype-builtins
+        if (obj.hasOwnProperty(obj[key])) {
+            // eslint-disable-next-line prefer-template
+            str.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
+        }
+    });
+    return str?.join('&');
+};
 
 export const getObjectValue = obj => obj[Object.keys(obj)[0]];
 

src/indexPage/index.js

@@ -9,25 +9,25 @@ import GTM from '../common/gtm';
 import { load as loadLang, showBanner } from '../common/lang';
 import { moveToDeriv } from '../common/utils/utility';
 import { get as getStorage, set as setStorage, remove, getTokenList } from '../common/utils/storageManager';
-import { createUrl } from '../common/utils/tools';
+import { createUrl, parseQueryString, serialize } from '../common/utils/tools';
 import '../common/binary-ui/dropdown';
 import BotLanding from './react-components/bot-landing';
 
 const today = new Date().getTime();
 // eslint-disable-next-line one-var
 const oneMilliSec = 1000;
-// twentyOneDays = 21,
+// sevenDays = 7,
 // fiveMinutes = 300,
 // oneMinute = 60,
 // oneDay = 24;
 
-export const elements = ['#notification-banner', '#main', '#footer', '#header'];
+export const elements = ['#notification-banner', '#main', '#footer', '#header', '#topbar'];
 // eslint-disable-next-line one-var
 export const bannerToken = getStorage('setDueDateForBanner');
 
 // eslint-disable-next-line arrow-body-style
 export const expirationDate = () => {
-    // return today + oneMilliSec * oneMinute * oneMinute * oneDay * twentyOneDays;
+    // return today + oneMilliSec * oneMinute * oneMinute * oneDay * sevenDays;
     return today + oneMilliSec * 600;
 };
 
@@ -45,14 +45,14 @@ const checkifBotRunning = () => {
 
 export const setTimeOutBanner = route => {
     let bannerDisplayed;
+    const qs = parseQueryString();
     // eslint-disable-next-line consistent-return
     timerForBanner = setTimeout(() => {
         if (
             (route === 'index' && !!bannerDisplayed === false) ||
             (route === 'views' && checkifBotRunning() === false)
         ) {
-            const getqueryParameter = document.location.search;
-            const getDefaultPath = window.location.href.replace('/bot.html', getqueryParameter);
+            const getDefaultPath = window.location.href.replace('/bot.html', serialize(qs));
             window.location.replace(getDefaultPath);
             renderBanner();
         } else if (
@@ -72,6 +72,7 @@ const renderBanner = () => {
     elements.map(elem => document.querySelector(elem).classList.add('hidden'));
     document.getElementById('bot-landing').classList.remove('hidden');
     document.getElementById('bot-main').classList.remove('hidden');
+    document.getElementById('topbar').classList.remove('hidden');
     $('.barspinner').hide();
 };
 
@@ -103,14 +104,18 @@ const renderElements = () => {
             document.getElementById('bot-landing').classList.add('hidden');
         }
         document.getElementById('bot-main').classList.remove('hidden');
-        $('.barspinner').hide();
+        setTimeout(() => {
+            $('.barspinner').hide();
+        }, 2000);
     }
 };
 
 const loginCheck = () => {
     if (endpoint()) return;
     moveToDeriv();
-    loadLang();
+    if (window.location.href.indexOf('bot.html') === -1) {
+        loadLang();
+    }
     $('.show-on-load').show();
     if (bannerToken) {
         if (getTokenList().length) {
@@ -128,7 +133,7 @@ const loginCheck = () => {
     } else {
         setTimeout(() => {
             renderBanner();
-        }, 2000);
+        }, 0);
     }
 };
 

src/indexPage/react-components/bot-landing/Hero.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { translate } from '../../../common/i18n';
+import { generateURL } from '../../../common/utils/tools'
 
 const Hero = () => (
     <section className="hero">
@@ -12,9 +13,9 @@ const Hero = () => (
                 </h2>
                 <div className="btn-group">
                     <a href="https://bot.deriv.com">
-                        <button className="l-btn primary">{translate('Take me to Deriv')}</button>
+                        <button className="l-btn primary">{translate('Take me to Binary Bot on Deriv')}</button>
                     </a>
-                    <a href={`${window.location.href.replace(/\/+$/, '')}/bot.html`}>
+                    <a href={generateURL(window.location.href)}>
                         <button className="l-btn">{translate('Maybe later')}</button>
                     </a>
                 </div>

src/indexPage/react-components/bot-landing/SwitchSection.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { translate } from '../../../common/i18n';
 import { getOAuthURLDeriv } from '../../../common/appId';
+import { generateURL } from '../../../common/utils/tools'
+
 
 const SwitchSection = () => (
     <section className="switch">
@@ -17,7 +19,7 @@ const SwitchSection = () => (
                     <a href={getOAuthURLDeriv()}>
                         <button className="l-btn danger">{translate('Try it now')}</button>
                     </a>
-                    <a href={`${window.location.href.replace(/\/+$/, '')}/bot.html`}>
+                    <a href={generateURL(window.location.href)}>
                         <button className="l-btn transparent">{translate('Maybe later')}</button>
                     </a>
                 </div>

static/css/_landing.scss

@@ -30,7 +30,10 @@ $header-color : #333333;
 .hero {
   background: $hero-BG url(../image/BG-1.webp) no-repeat;
   background-size: cover;
-
+  padding: 0 2rem;
+  @include for-size(mobile) {
+      padding: 0;
+    }
   @include for-size(mobile) {
     background: $hero-BG url(../image/MBG1.png) no-repeat;
     background-size: cover;
@@ -530,7 +533,10 @@ $header-color : #333333;
   background-size: 65% 100%;
   min-height: 18.75rem;
   position: relative;
-
+  padding: 0 2rem;
+  @include for-size(mobile) {
+      padding: 0;
+    }
   @include for-size(mobile) {
     min-height: 43.75rem;
     background-image: none;
@@ -590,7 +596,10 @@ $header-color : #333333;
 .about-trade-wrapper {
   background-color: #F8FAFB;
   padding: 0;
-
+  padding: 0 2rem;
+  @include for-size(mobile) {
+    padding: 0;
+  }
   &-inner {
     padding: 3rem 0;
 

templates/bot.mustache

@@ -116,10 +116,10 @@
         </div>
 
     </div>
-    <div id="errorArea"></div>
+   
 
 
-    <div id="toolbox" class="actions_menu show-on-load">
+    <div id="toolbox" class="actions_menu show-on-load hidden">
         <button data-i18n-title="Reset the blocks to their initial state" id="resetButton"
             class="toolbox-button icon-reset"></button>
         <button data-i18n-title="Load new blocks (xml file)" id="load-xml" class="toolbox-button icon-browse"></button>
@@ -168,6 +168,7 @@
         </div>
 
     </div>
+    <div id="errorArea"></div>
     <div id="notification-banner"></div>
 
     <ul id="toolbox-all-accounts" class="nav-menu main-nav" style="display: none;">