aaron/elevio-for-bot

gulp/build.js

@@ -18,6 +18,8 @@ const getConfig = prefix => ({
     language        : 'templates/partials/language.mustache',
     loading         : 'templates/partials/loading.mustache',
     binary_style_img: 'image/binary-style',
+    elevio_script   :
+        '<script>!function(e,l,v,i,o,n){e[i]||(e[i]={}),e[i].account_id=n;var g,h;g=l.createElement(v),g.type="text/javascript",g.async=1,g.src=o+n,h=l.getElementsByTagName(v)[0],h.parentNode.insertBefore(g,h);e[i].q=[];e[i].on=function(z,y){e[i].q.push([z,y])}}(window,document,"script","_elev","https://cdn.elev.io/sdk/bootloader/v4/elevio-bootloader.js?cid=","5bbc2de0b7365");</script>',
 });
 
 const genHtml = min =>

src/botPage/view/View.js

@@ -1,39 +1,40 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import 'jquery-ui/ui/widgets/dialog';
-import { observer as globalObserver } from '../../common/utils/observer';
-import {
-    getTokenList,
-    removeAllTokens,
-    get as getStorage,
-    set as setStorage,
-    getToken,
-} from '../../common/utils/storageManager';
 import _Blockly from './blockly';
-import { translate } from '../../common/i18n';
-import Save from './Dialogs/Save';
+import Chart from './Dialogs/Chart';
 import Limits from './Dialogs/Limits';
+import Save from './Dialogs/Save';
 import TradingView from './Dialogs/TradingView';
-import Chart from './Dialogs/Chart';
-import { getLanguage } from '../../common/lang';
-import { roundBalance, isVirtual } from '../common/tools';
-import { symbolPromise } from './shared';
 import logHandler from './logger';
-import Tour from './tour';
-import OfficialVersionWarning from './react-components/OfficialVersionWarning';
-import ServerTime from './react-components/HeaderWidgets';
-import NetworkMonitor from './NetworkMonitor';
 import LogTable from './LogTable';
+import NetworkMonitor from './NetworkMonitor';
+import ServerTime from './react-components/HeaderWidgets';
+import OfficialVersionWarning from './react-components/OfficialVersionWarning';
+import { symbolPromise } from './shared';
+import Tour from './tour';
 import TradeInfoPanel from './TradeInfoPanel';
+import Elevio from '../../common/elevio';
+import { updateConfigCurrencies } from '../common/const';
+import { roundBalance, isVirtual } from '../common/tools';
 import {
     logoutAllTokens,
     getOAuthURL,
     generateLiveApiInstance,
     AppConstants,
     addTokenIfValid,
 } from '../../common/appId';
+import { translate } from '../../common/i18n';
+import { getLanguage } from '../../common/lang';
+import { observer as globalObserver } from '../../common/utils/observer';
+import {
+    getTokenList,
+    removeAllTokens,
+    get as getStorage,
+    set as setStorage,
+    getToken,
+} from '../../common/utils/storageManager';
 import { isProduction } from '../../common/utils/tools';
-import { updateConfigCurrencies } from '../common/const';
 
 let realityCheckTimeout;
 
@@ -374,6 +375,7 @@ export default class View {
             showPopup(getAccountSwitchPanelName())
                 .then(() => {
                     this.stop();
+                    Elevio.logoutUser();
                     removeTokens();
                 })
                 .catch(() => {});
@@ -559,6 +561,7 @@ export default class View {
             showPopup(getAccountSwitchPanelName())
                 .then(() => {
                     this.stop();
+                    Elevio.logoutUser();
                     const activeToken = $(e.currentTarget).attr('value');
                     const tokenList = getTokenList();
                     setStorage('tokenList', '');

src/botPage/view/index.js

@@ -2,8 +2,9 @@
 import 'babel-polyfill';
 import 'jquery-ui/ui/widgets/dialog';
 import 'notifyjs-browser';
-import View from './View';
 import '../../common/binary-ui/dropdown';
+import Elevio from '../../common/elevio';
+import View from './View';
 import { version } from '../../../package.json';
 
 $.ajaxSetup({
@@ -29,6 +30,7 @@ view.initPromise.then(() => {
     $('.show-on-load').show();
     $('.barspinner').hide();
     window.dispatchEvent(new Event('resize'));
+    Elevio.init();
     trackJs.addMetadata('version', version);
     trackJs.configure({
         userId: $('.account-id')

src/botPage/view/tour/welcome.js

@@ -18,9 +18,13 @@ const steps = [
             </label>
           </div>
           `,
-        selector: '#tour',
+        selector: '#center',
         position: 'top',
         style   : {
+            textAlign: 'center',
+            arrow    : {
+                display: 'none',
+            },
             button: {
                 display: 'none',
             },
@@ -38,8 +42,8 @@ const steps = [
       </a>
       ${translate('or')} ${translate('make your own strategies.')}
     </p>`,
-        selector: '#center',
-        position: 'bottom',
+        selector: '#workspace_center',
+        position: 'top',
     },
     {
         title: translate('Blocks toolbox'),
@@ -74,7 +78,12 @@ const steps = [
       </a>
     </p>`,
         selector: '#center',
-        position: 'bottom',
+        position: 'top',
+        style   : {
+            arrow: {
+                display: 'none',
+            },
+        },
     },
 ];
 

src/common/appId.js

@@ -10,6 +10,7 @@ import {
 import { parseQueryString, isProduction, getExtension } from '../common/utils/tools';
 import { getLanguage } from './lang';
 import AppIdMap from './appIdResolver';
+import Elevio from './elevio';
 
 export const AppConstants = Object.freeze({
     STORAGE_ACTIVE_TOKEN: 'activeToken',
@@ -114,9 +115,9 @@ export async function addTokenIfValid(token, tokenObjectList) {
     try {
         const { authorize } = await api.authorize(token);
         const { landing_company_name: lcName } = authorize;
-        const { landing_company_details: { has_reality_check: hasRealityCheck } } = await api.getLandingCompanyDetails(
-            lcName
-        );
+        const {
+            landing_company_details: { has_reality_check: hasRealityCheck },
+        } = await api.getLandingCompanyDetails(lcName);
         addToken(token, authorize, !!hasRealityCheck, ['iom', 'malta'].includes(lcName) && authorize.country === 'gb');
 
         const { account_list: accountList } = authorize;
@@ -132,6 +133,7 @@ export async function addTokenIfValid(token, tokenObjectList) {
         }
     } catch (e) {
         removeToken(tokenObjectList[0].token);
+        Elevio.logoutUser();
         throw e;
     }
     return api.disconnect();

src/common/elevio.js

@@ -0,0 +1,64 @@
+import { generateLiveApiInstance } from './appId';
+// import { getLanguage } from '../common/lang';
+import { getTokenList } from './utils/storageManager';
+import { translate } from '../common/i18n';
+
+const Elevio = (() => {
+    const init = () => {
+        if (!window._elev) return; // eslint-disable-line no-underscore-dangle
+        // eslint-disable-next-line no-underscore-dangle
+        window._elev.on('load', elev => {
+            // const availableElevLanguages = ['es', 'id', 'pt', 'ru'];
+            // const currentLanguage = getLanguage().toLowerCase();
+            // if (availableElevLanguages.indexOf(currentLanguage) !== -1) {
+            //     window._elev.setLanguage(currentLanguage); // eslint-disable-line no-underscore-dangle
+            // }
+            setUserInfo(elev);
+            setTranslations(elev);
+        });
+    };
+
+    const setUserInfo = elev => {
+        const tokenList = getTokenList();
+        if (tokenList.length) {
+            const api = generateLiveApiInstance(); // Refactor when reducing WS connections
+            const activeToken = tokenList[0];
+            api.authorize(activeToken.token).then(() => {
+                api.send({ get_settings: 1 }).then(response => {
+                    const isVirtual = activeToken.loginInfo.is_virtual;
+                    const userObject = {
+                        email     : response.get_settings.email,
+                        first_name: isVirtual ? 'Virtual' : response.get_settings.first_name,
+                        last_name : isVirtual ? activeToken.loginInfo.loginid : response.get_settings.first_name,
+                        user_hash : response.get_settings.user_hash,
+                    };
+                    elev.setUser(userObject);
+                    api.disconnect();
+                });
+            });
+        }
+    };
+
+    // Elevio has a window._elev.logoutUser() fn, but it doesn't work
+    const logoutUser = () => {
+        sessionStorage.removeItem('_elevaddon-6app');
+        sessionStorage.removeItem('_elevaddon-6create');
+    };
+
+    const setTranslations = elev => {
+        elev.setTranslations({
+            modules: {
+                support: {
+                    thankyou: translate('Thank you, we\'ll get back to you within 24 hours'),
+                },
+            },
+        });
+    };
+
+    return {
+        init,
+        logoutUser,
+    };
+})();
+
+export default Elevio;

static/css/_tour.scss

@@ -24,7 +24,7 @@ $joyride-tooltip-width: (15em, 20em, 20em);
 }
 
 .tour-custom-buttons {
-    text-align: right;
+    text-align: center;
     margin-top: 1em;
     button: {
         margin-left: 0.1em;

static/css/bot.scss

@@ -62,7 +62,7 @@ body {
     }
 }
 
-#center {
+#center, #workspace_center {
     position: fixed;
     width: 1em;
     height: 1em;

templates/bot.mustache

@@ -12,6 +12,7 @@
   <body>
     <div id="tour"></div>
     <div id="center"></div>
+    <div id="workspace_center"></div>
     <span id="limits-dialog"></span>
     <span id="save-dialog"></span>
     <span id="chart-dialog"></span>
@@ -156,5 +157,6 @@
     <audio id="error" src="sound/out-of-bounds.ogg" autostart="false" ></audio>
     <audio id="severe-error" src="sound/i-am-being-serious.ogg" autostart="false" ></audio>
     {{> bundle}} {{> bot}}
+    {{> elevio_script }}
   </body>
 </html>