new-bot-landing-page

.gitignore

@@ -12,3 +12,4 @@ lib/
 old/
 CNAME
 *.env
+.DS_Store

package.json

@@ -105,6 +105,7 @@
     "webpack-stream": "^4.0.0"
   },
   "dependencies": {
+    "@deriv/deriv-charts": "0.3.43",
     "binary-style": "^0.2.4",
     "blockly": "github:binary-com/blockly#fix-blockly",
     "commander": "^2.20.0",
@@ -117,7 +118,8 @@
     "mobx-react": "^5.4.4",
     "pako": "^1.0.11",
     "react-render-html": "^0.6.0",
+    "react-slick": "^0.28.1",
     "react-transition-group": "^4.0.1",
-    "@deriv/deriv-charts": "0.3.43"
+    "slick-carousel": "^1.8.1"
   }
 }

src/botPage/view/TradeInfoPanel/index.js

@@ -68,6 +68,7 @@ class AnimateTrade extends Component {
             resetAnimation();
             $('.stage-tooltip.top:eq(0)').addClass('running');
             this.setState({ indicatorMessage: this.indicatorMessages.starting });
+            globalObserver.setState({ isRunning: true });
             globalObserver.emit('summary.disable_clear');
             globalObserver.register('contract.status', contractStatus => this.animateStage(contractStatus));
         });

src/botPage/view/View.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from 'react-dom';
 import 'jquery-ui/ui/widgets/dialog';
 import _Blockly, { load } from './blockly';
 import Chart from './Dialogs/Chart';
@@ -39,6 +39,7 @@ import {
     get as getStorage,
     set as setStorage,
     getToken,
+    remove,
 } from '../../common/utils/storageManager';
 import { isProduction } from '../../common/utils/tools';
 import GTM from '../../common/gtm';
@@ -49,6 +50,7 @@ import {
     saveBeforeUnload,
 } from './blockly/utils';
 import { moveToDeriv } from '../../common/utils/utility';
+import { setTimeOutBanner } from '../../indexPage/index';
 
 let realityCheckTimeout;
 let chart;
@@ -89,7 +91,18 @@ api.events.on('balance', response => {
 
     globalObserver.setState({ balance: b, currency });
 });
-
+const removeTokens = () => {
+    logoutAllTokens().then(() => {
+        updateTokenList();
+        globalObserver.emit('ui.log.info', translate('Logged you out!'));
+        clearRealityCheck();
+        clearActiveTokens();
+        window.location.reload();
+    });
+};
+const clearActiveTokens = () => {
+    setStorage(AppConstants.STORAGE_ACTIVE_TOKEN, '');
+};
 const addBalanceForToken = token => {
     api.authorize(token).then(() => {
         api.send({ forget_all: 'balance' }).then(() => {
@@ -450,20 +463,6 @@ export default class View {
                 .catch(() => {});
         };
 
-        const removeTokens = () => {
-            logoutAllTokens().then(() => {
-                updateTokenList();
-                globalObserver.emit('ui.log.info', translate('Logged you out!'));
-                clearRealityCheck();
-                clearActiveTokens();
-                window.location.reload();
-            });
-        };
-
-        const clearActiveTokens = () => {
-            setStorage(AppConstants.STORAGE_ACTIVE_TOKEN, '');
-        };
-
         $('.panelExitButton').click(function onClick() {
             $(this)
                 .parent()
@@ -624,7 +623,6 @@ export default class View {
                 setTimeout(() => $('#stopButton').triggerHandler('click'));
                 return;
             }
-
             const token = $('.account-id')
                 .first()
                 .attr('value');
@@ -825,7 +823,7 @@ function initRealityCheck(stopCallback) {
 }
 
 function renderErrorPage() {
-    ReactDOM.render(
+    render(
         <ErrorPage
             title={translate('Unfortunately, Binary Bot isn’t available in your country')}
             message={translate(
@@ -841,18 +839,43 @@ function renderErrorPage() {
     document.getElementById('blocklyArea').remove();
 }
 
+// eslint-disable-next-line consistent-return
 function renderReactComponents() {
-    ReactDOM.render(<ServerTime api={api} />, $('#server-time')[0]);
-    ReactDOM.render(<Tour />, $('#tour')[0]);
-    ReactDOM.render(
-        <OfficialVersionWarning
-            show={
-                !(typeof window.location !== 'undefined' && isProduction() && window.location.pathname === '/bot.html')
-            }
-        />,
-        $('#footer')[0]
-    );
-    document.getElementById('errorArea').remove();
-    ReactDOM.render(<TradeInfoPanel api={api} />, $('#summaryPanel')[0]);
-    ReactDOM.render(<LogTable />, $('#logTable')[0]);
+    $('.barspinner').show();
+    const bannerToken = getStorage('setDueDateForBanner');
+    if (new Date().getTime() > Number(bannerToken)) {
+        remove('setDueDateForBanner');
+        const getqueryParameter = document.location.search;
+        const getDefaultPath = window.location.href.replace('/bot.html', getqueryParameter);
+        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);
+        window.location.replace(getDefaultPath);
+        document.getElementById('errorArea').remove();
+        $('.barspinner').hide();
+    } else {
+        setTimeOutBanner('views');
+        render(<ServerTime api={api} />, $('#server-time')[0]);
+        render(<Tour />, $('#tour')[0]);
+        render(
+            <OfficialVersionWarning
+                show={
+                    !(
+                        typeof window.location !== 'undefined' &&
+                        isProduction() &&
+                        window.location.pathname === '/bot.html'
+                    )
+                }
+            />,
+            $('#footer')[0]
+        );
+        document.getElementById('errorArea').remove();
+        render(<TradeInfoPanel api={api} />, $('#summaryPanel')[0]);
+        render(<LogTable />, $('#logTable')[0]);
+        document.getElementById('bot-main').classList.remove('hidden');
+        $('.barspinner').hide();
+    }
 }

src/common/appId.js

@@ -38,9 +38,7 @@ const queryToObjectArray = queryStr => {
 
 export const oauthLogin = (done = () => 0) => {
     const queryStr = parseQueryString();
-
     const tokenObjectList = queryToObjectArray(queryStr);
-
     if (tokenObjectList.length) {
         $('#main').hide();
         addTokenIfValid(tokenObjectList[0].token, tokenObjectList).then(() => {
@@ -100,6 +98,11 @@ export const generateWebSocketURL = serverUrl => `wss://${serverUrl}/websockets/
 export const getOAuthURL = () =>
     `https://${generateOAuthDomain()}/oauth2/authorize?app_id=${getAppIdFallback()}&l=${getLanguage().toUpperCase()}`;
 
+export const getOAuthURLDeriv = () =>
+    `https://oauth.deriv.com/oauth2/authorize?app_id=31665&l=${getLanguage().toUpperCase()}`;
+
+// 19111
+
 const options = {
     apiUrl  : getWebSocketURL(),
     language: getLanguage().toUpperCase(),

src/common/lang.js

@@ -1,9 +1,13 @@
+import React from 'react';
+import { render } from 'react-dom';
 import { parseQueryString } from '../common/utils/tools';
-import { set as setStorage, get as getStorage } from '../common/utils/storageManager';
+import { set as setStorage, get as getStorage, remove } from '../common/utils/storageManager';
 import { setCookieLanguage } from '../common/utils/cookieManager';
 import { supportedLanguages, translate, init } from './i18n';
 import { getClientsCountryByIP } from './utils/utility';
+import BotLanding from '../indexPage/react-components/bot-landing';
 
+const elements = ['#notification-banner', '#main', '#footer', '#header'];
 export const getLanguage = () => {
     const queryLang = parseQueryString().l;
     const lang = queryLang in supportedLanguages ? queryLang : getStorage('lang') || 'en';
@@ -16,7 +20,6 @@ const addUiLang = () => {
     $('[data-i18n-text]').each(function each() {
         const el = $(this);
         const contents = el.contents();
-
         el.text(translate($(this).attr('data-i18n-text'))).append(contents);
     });
 
@@ -31,7 +34,17 @@ export const load = () => {
 
     $('#select_language li:not(:first)').click(function click() {
         const newLang = $(this).attr('class');
-        document.location.search = `l=${newLang}`;
+        if (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}`;
+        } else {
+            document.location.search = `l=${newLang}`;
+        }
     });
 
     $('.language').text(