aaron/minor-updates

src/botPage/bot/Interpreter.js

@@ -156,4 +156,7 @@ export default class Interpreter {
                 .catch(e => this.$scope.observer.emit('Error', e));
         });
     }
+    hasStarted() {
+        return !this.stopped;
+    }
 }

src/botPage/common/ChartTicksService.js

@@ -4,9 +4,7 @@ import TicksService from './TicksService';
 export default class ChartTicksService extends TicksService {
     observe() {
         this.api.events.on('tick', r => {
-            const {
-                tick: { symbol, id },
-            } = r;
+            const { tick: { symbol, id } } = r;
 
             if (this.ticks.has(symbol)) {
                 this.subscriptions = this.subscriptions.setIn(['tick', symbol], id);
@@ -15,9 +13,7 @@ export default class ChartTicksService extends TicksService {
         });
 
         this.api.events.on('ohlc', r => {
-            const {
-                ohlc: { symbol, granularity, id },
-            } = r;
+            const { ohlc: { symbol, granularity, id } } = r;
 
             if (this.candles.hasIn([symbol, Number(granularity)])) {
                 this.subscriptions = this.subscriptions.setIn(['ohlc', symbol, Number(granularity)], id);

src/botPage/common/TicksService.js

@@ -173,10 +173,7 @@ export default class TicksService {
     }
     observe() {
         this.api.events.on('tick', r => {
-            const {
-                tick,
-                tick: { symbol, id },
-            } = r;
+            const { tick, tick: { symbol, id } } = r;
 
             if (this.ticks.has(symbol)) {
                 this.subscriptions = this.subscriptions.setIn(['tick', symbol], id);
@@ -185,10 +182,7 @@ export default class TicksService {
         });
 
         this.api.events.on('ohlc', r => {
-            const {
-                ohlc,
-                ohlc: { symbol, granularity, id },
-            } = r;
+            const { ohlc, ohlc: { symbol, granularity, id } } = r;
 
             if (this.candles.hasIn([symbol, Number(granularity)])) {
                 this.subscriptions = this.subscriptions.setIn(['ohlc', symbol, Number(granularity)], id);

src/botPage/view/View.js

@@ -226,10 +226,10 @@ const applyToolboxPermissions = () => {
     }
 };
 
-const showReloadPopup = () =>
+const showPopup = selector =>
     new Promise((resolve, reject) => {
         setBeforeUnload(true);
-        $('#reloadPanel').dialog({
+        $(selector).dialog({
             height: 'auto',
             width : 600,
             modal : true,
@@ -258,7 +258,7 @@ const showReloadPopup = () =>
                 },
             ],
         });
-        $('#reloadPanel').dialog('open');
+        $(selector).dialog('open');
     });
 
 export default class View {
@@ -373,8 +373,9 @@ export default class View {
             });
         };
         const logout = () => {
-            showReloadPopup()
+            showPopup(getAccountSwitchPanelName())
                 .then(() => {
+                    this.stop();
                     removeTokens();
                 })
                 .catch(() => {});
@@ -384,6 +385,10 @@ export default class View {
             setStorage(AppConstants.STORAGE_ACTIVE_TOKEN, '');
         };
 
+        const getReloadPanelName = () => (this.blockly.hasStarted() ? '#reloadPanelTrading' : '#reloadPanel');
+        const getAccountSwitchPanelName = () =>
+            this.blockly.hasStarted() ? '#switchAccountPanelTrading' : '#reloadPanel';
+
         $('.panelExitButton').click(function onClick() {
             $(this)
                 .parent()
@@ -468,6 +473,7 @@ export default class View {
         });
 
         $('#logout').click(() => {
+            setBeforeUnload(true);
             logout();
             hideRealityCheck();
         });
@@ -542,13 +548,19 @@ export default class View {
         });
 
         $('#resetButton').click(() => {
-            this.blockly.resetWorkspace();
-            setTimeout(() => this.blockly.cleanUp(), 0);
+            showPopup(getReloadPanelName())
+                .then(() => {
+                    this.stop();
+                    this.blockly.resetWorkspace();
+                    setTimeout(() => this.blockly.cleanUp(), 0);
+                })
+                .catch(() => {});
         });
 
         $('.login-id-list').on('click', 'a', e => {
-            showReloadPopup()
+            showPopup(getAccountSwitchPanelName())
                 .then(() => {
+                    this.stop();
                     const activeToken = $(e.currentTarget).attr('value');
                     const tokenList = getTokenList();
                     setStorage('tokenList', '');
@@ -562,9 +574,10 @@ export default class View {
 
         $('#login')
             .bind('click.login', () => {
+                setBeforeUnload(true);
                 document.location = getOAuthURL();
             })
-            .text('Log in');
+            .text(translate('Log in'));
 
         $('#statement-reality-check').click(() => {
             document.location = `https://www.binary.com/${getLanguage()}/user/statementws.html#no-reality-check`;

src/botPage/view/blockly/index.js

@@ -349,8 +349,12 @@ while(true) {
     }
     stop(stopBeforeStart) {
         if (!stopBeforeStart) {
-            $('#runButton, #summaryRunButton').show();
-            $('#stopButton, #summaryStopButton').hide();
+            const $runButtons = $('#runButton, #summaryRunButton');
+            const $stopButtons = $('#stopButton, #summaryStopButton');
+            if ($runButtons.is(':visible') || $stopButtons.is(':visible')) {
+                $runButtons.show();
+                $stopButtons.hide();
+            }
         }
         if (this.interpreter) {
             this.interpreter.stop();
@@ -367,5 +371,9 @@ while(true) {
     redo() {
         Blockly.mainWorkspace.undo(true);
     }
+    /* eslint-disable class-methods-use-this */
+    hasStarted() {
+        return this.interpreter && this.interpreter.hasStarted();
+    }
     /* eslint-enable */
 }

src/botPage/view/tour/index.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import Joyride from 'react-joyride';
-import { setDone, isDone } from '../../../common/utils/storageManager';
+import { set as setStorage, get as getStorage, setDone, isDone } from '../../../common/utils/storageManager';
 import { translate } from '../../../common/i18n';
 import welcome from './welcome';
 
@@ -24,6 +24,7 @@ class Tour extends PureComponent {
                 next: () => this.joyride.next(),
                 stop: () => {
                     setDoneCheck();
+                    setStorage('closedTourPopup', Date.now());
                     this.joyride.stop();
                 },
             };
@@ -35,8 +36,13 @@ class Tour extends PureComponent {
                 setDoneCheck();
             }
         };
+        const shouldShowTourPopup = () => {
+            const dayHasPassed = () =>
+                Date.now() > (parseInt(getStorage('closedTourPopup')) || 0) + 24 * 60 * 60 * 1000;
+            return !isDone('welcomeFinished') && dayHasPassed();
+        };
         return (
-            !isDone('welcomeFinished') && (
+            shouldShowTourPopup() && (
                 <div className="tour-first-pop-up">
                     <Joyride
                         autoStart

src/botPage/view/tour/welcome.js

@@ -6,18 +6,16 @@ const steps = [
         text : `
           <p>
             ${translate('Ready to learn how to use Binary Bot?')}
+          </p>
+          <div class="tour-custom-buttons">
+            <a class="button-secondary" onclick="tour.stop()"><span>${translate('No Thanks')}</span></a>
+            <a class="button" onclick="tour.next()"><span>${translate('Yes')}</span></a>
+          </div>
+          <div class="tour-custom-buttons">
             <input type="checkbox" id="do-not-ask-me-again"></input>
             <label for="do-not-ask-me-again">
-              ${translate('Do not ask me again.')}
+                ${translate('Do not ask me again.')}
             </label>
-          </p>
-          <div class="tour-custom-buttons">
-            <a class="button-secondary" onclick="tour.stop()">
-                <span>${translate('No Thanks')}</span>
-            </a>
-            <a class="button" onclick="tour.next()">
-                <span>${translate('Yes')}</span>
-            </a>
           </div>
           `,
         selector: '#tour',
@@ -38,10 +36,7 @@ const steps = [
       <a target="blank" href="https://shop.binary.com/collections/strategies">
         ${translate('Download sample strategies')}
       </a>
-      ${translate('or')}
-        <a target="blank" href="https://github.com/binary-com/binary-bot#sample-blocks">
-          ${translate('Make your own strategies')}
-        </a>
+      ${translate('or')} ${translate('make your own strategies.')}
     </p>`,
         selector: '#center',
         position: 'bottom',

src/common/footer-checks.js

@@ -3,12 +3,8 @@ import { generateLiveApiInstance } from './appId';
 
 export default async function isEuCountry() {
     const api = generateLiveApiInstance();
-    const {
-        website_status: { clients_country: clientsCountry },
-    } = await api.send({ website_status: 1 });
-    const {
-        landing_company: { financial_company: financialCompany, gaming_company: gamingCompany },
-    } = await api.send({
+    const { website_status: { clients_country: clientsCountry } } = await api.send({ website_status: 1 });
+    const { landing_company: { financial_company: financialCompany, gaming_company: gamingCompany } } = await api.send({
         landing_company: clientsCountry,
     });
 

static/css/_tour.scss

@@ -2,7 +2,6 @@
 
 $joyride-color: $brand-orange;
 $joyride-button-bg-color: $brand-btn;
-$joyride-button-color: $white !important;
 $joyride-tooltip-width: (15em, 20em, 20em);
 
 @import '../../node_modules/react-joyride/lib/react-joyride';
@@ -17,12 +16,35 @@ $joyride-tooltip-width: (15em, 20em, 20em);
 .tour-first-pop-up {
     .joyride-tooltip {
         position: fixed !important;
+        &__main {
+            padding-bottom: 0;
+        }
     }
 }
 
 .tour-custom-buttons {
-    float: right;
+    text-align: right;
+    margin-top: 1em;
     button: {
         margin-left: 0.1em;
     }
 }
+
+.joyride-tooltip__button {
+    padding: 10px 25px;
+    &--primary {
+        color: $white;
+        background-color: $brand-btn;
+    }
+    &--primary:hover {
+        color: $white;
+        background-color: $brand-btn-active;
+    }
+    &--secondary {
+        color: $black;
+        background-color: $brand-gray;
+    }
+    &--secondary:hover {
+        background-color: #dedede;
+    }
+}

templates/bot.mustache

@@ -21,13 +21,17 @@
     </span>
     <span id="summaryPanel" class="draggable-dialog" title="Summary">
     </span>
-    <span id="reloadPanel" class="draggable-dialog" title="Page reload warning!">
-        <p style="margin:0.7em" data-i18n-text="Are you sure you wish to proceed with your current action? Binary Bot will stop placing further trades. Ongoing trades (if available) will be completed by our system. All unsaved changes to your strategy will be lost."></p>
-        <br />
+    <span id="reloadPanel" class="draggable-dialog" title="Are you sure?">
+      <p style="margin:0.7em" data-i18n-text="Any unsaved changes will be lost. "></p>
+    </span>
+    <span id="reloadPanelTrading" class="draggable-dialog" title="Are you sure?">
+        <p style="margin:0.7em" data-i18n-text="Binary Bot will not place any new trades. Any trades already placed (but not expired) will be completed by our system. Any unsaved changes will be lost."></p>
+        <p style="margin:0.7em" data-i18n-text="Note: Please see the Binary.com statement page for details of all confirmed transactions."></p>
+    </span>
+    <span id="switchAccountPanelTrading" class="draggable-dialog" title="Are you sure?">
+        <p style="margin:0.7em" data-i18n-text="Binary Bot will not place any new trades. Current unexpired trades will be completed by our system. All unsaved changes will be lost."></p>
         <p style="margin:0.7em" data-i18n-text="Note: Please see the Binary.com statement page for details of all confirmed transactions."></p>
     </span>
-
-
     <div>
       <div class="blocker"></div>
       <div class="reality-check" style="display: none">
@@ -127,12 +131,12 @@
       <button title="Zoom Out (Ctrl + -)" id="zoomOut" class="toolbox-button icon-zoom-out"></button>
       <button title="Rearrange Vertically" id="rearrange" class="toolbox-button icon-sort"></button>
       <button title="Show/hide the summary pop-up" id="showSummary" class="toolbox-button icon-summary"></button>
-      <button title="Reset the blocks to their initial state" id="resetButton" class="toolbox-button icon-reset"></button>
       <button title="Run the bot" id="runButton" class="toolbox-button icon-run"></button>
       <button title="Stop the bot" id="stopButton" class="toolbox-button icon-stop"></button>
       <button title="Show log" id="logButton" class="toolbox-button icon-info"></button>
       <button title="Show chart" id="chartButton" class="toolbox-button icon-chart-line"></button>
       <button title="Show Trading View" id="tradingViewButton" class="toolbox-button icon-trading-view"></button>
+      <button title="Reset the blocks to their initial state" id="resetButton" class="toolbox-button icon-reset"></button>
     </div>
     <div id="footer"></div>
     <audio id="announcement" src="sound/announcement.ogg" autostart="false" ></audio>