Merge branch 'master' into fix-timepicker-endtime

package.json

@@ -137,7 +137,7 @@
     "react-transition-group": "2.4.0",
     "scriptjs": "2.5.8",
     "sinon": "7.2.2",
-    "smartcharts-beta": "0.4.21",
+    "smartcharts-beta": "0.4.22",
     "tt-react-custom-scrollbars": "4.2.1-tt2",
     "url-polyfill": "1.0.9",
     "web-push-notifications": "3.2.15"

scripts/config/pages.js

@@ -128,6 +128,6 @@ module.exports = [
     ['graduates',                               'landing_pages/graduate_program',                 null,        'Binary.com Graduate Program',        'NOT-en'],
     // ['hackathon',                               'landing_pages/hackathon',                     null,        'Hackathon Competition',              'NOT-en'],
     ['introducing-usb',                            'landing_pages/usb',                           null,        'Introducing USB',                    'NOT-en'],
-    ['binarygrid',                                 'landing_pages/grid_landing',                  null,        'Our New Mobile Trading App',         'NOT-en'],
+    ['binarygrid',                                 'landing_pages/binary_grid',                   null,        'Our New Mobile Trading App',         'NOT-en'],
     ['landing/signup-frame',                       'landing_pages/signup_frame',                  null,        'Sign up'],
 ];

src/javascript/app_2/App/Components/Elements/PositionsDrawer/positions-drawer-card.jsx

@@ -49,7 +49,7 @@ class PositionsDrawerCard extends React.PureComponent {
         } = this.props;
         const percentage = getTimePercentage(server_time, contract_info.purchase_time, contract_info.date_expiry);
         return (
-            
+
             <div className={classNames(
                 'positions-drawer-card__wrapper', {
                     'positions-drawer-card__wrapper--active': (parseInt(active_position) === id),
@@ -130,7 +130,7 @@ class PositionsDrawerCard extends React.PureComponent {
                                 <Money amount={Math.abs(profit_loss)} currency={currency} />
                                 <div className={classNames(
                                     'positions-drawer-card__indicative--movement', {
-                                        'positions-drawer-card__indicative--movement-complete': (status === 'complete'),
+                                        'positions-drawer-card__indicative--movement-complete': !!result,
                                     },
                                 )}
                                 >
@@ -143,7 +143,7 @@ class PositionsDrawerCard extends React.PureComponent {
                                 <Money amount={indicative} currency={currency} />
                                 <div className={classNames(
                                     'positions-drawer-card__indicative--movement', {
-                                        'positions-drawer-card__indicative--movement-complete': (status === 'complete'),
+                                        'positions-drawer-card__indicative--movement-complete': !!result,
                                     },
                                 )}
                                 >

src/javascript/app_2/App/Components/Routes/route-with-sub-routes.jsx

@@ -4,6 +4,7 @@ import {
     Route }                from 'react-router-dom';
 import { redirectToLogin } from '_common/base/login';
 import BinarySocket        from '_common/base/socket_base';
+import Language            from '_common/language';
 import routes              from 'Constants/routes';
 import GTM                 from 'Utils/gtm';
 import LoginPrompt         from '../Elements/login-prompt.jsx';
@@ -30,6 +31,7 @@ const RouteWithSubRoutes = route => {
             );
         }
 
+        Language.setCookie();
         const title = route.title ? `${route.title} | ` : '';
         document.title = `${ title }${ default_title }`;
         BinarySocket.wait('website_status').then(() => {

src/javascript/app_2/App/Containers/SettingsDialog/settings-theme.jsx

@@ -33,7 +33,12 @@ const ThemeSelectSettings = ({ is_dark_mode, toggleDarkMode, updateBarrierColor
                             })}
                             onClick={darkOnClick}
                         />
-                        <p className='theme-select-settings__option__title'><Localize str='Brand Dark' /></p>
+                        <p className={classNames('theme-select-settings__option__title', {
+                            'theme-select-settings__option__title--selected': is_dark_mode,
+                        })}
+                        >
+                            <Localize str='Brand Dark' />
+                        </p>
                     </div>
                     <div className='theme-select-settings__option'>
                         <LightModeIcon
@@ -42,7 +47,12 @@ const ThemeSelectSettings = ({ is_dark_mode, toggleDarkMode, updateBarrierColor
                             })}
                             onClick={lightOnClick}
                         />
-                        <p className='theme-select-settings__option__title'><Localize str='Light' /></p>
+                        <p className={classNames('theme-select-settings__option__title', {
+                            'theme-select-settings__option__title--selected': !is_dark_mode,
+                        })}
+                        >
+                            <Localize str='Light' />
+                        </p>
                     </div>
                 </div>
             </div>

src/javascript/app_2/Stores/Modules/Contract/contract-store.js

@@ -43,6 +43,7 @@ export default class ContractStore extends BaseStore {
 
     // ---- Normal properties ---
     forget_id;
+    chart_type         = 'mountain';
     is_granularity_set = false;
     is_left_epoch_set  = false;
 
@@ -67,6 +68,10 @@ export default class ContractStore extends BaseStore {
             SmartChartStore.setChartView(contract_info.purchase_time);
         } else if (should_update_chart_type) {
             this.handleChartType(SmartChartStore, contract_info.date_start, null);
+        } else if (this.is_granularity_set) {
+            if (getChartType(contract_info.date_start, null) !== this.chart_type) {
+                this.is_granularity_set = false;
+            }
         }
 
         createChartBarrier(SmartChartStore, contract_info);
@@ -101,6 +106,7 @@ export default class ContractStore extends BaseStore {
     @action.bound
     onCloseContract() {
         this.forgetProposalOpenContract();
+        this.chart_type         = 'mountain';
         this.contract_id        = null;
         this.contract_info      = {};
         this.digits_info        = {};
@@ -192,9 +198,11 @@ export default class ContractStore extends BaseStore {
         if (chart_type === 'candle' && granularity !== 0) {
             SmartChartStore.updateGranularity(granularity);
             SmartChartStore.updateChartType(chart_type);
+            this.chart_type = chart_type;
         } else {
             SmartChartStore.updateGranularity(0);
             SmartChartStore.updateChartType('mountain');
+            this.chart_type = 'mountain';
         }
         this.is_granularity_set = true;
     }

src/javascript/app_2/Stores/Modules/SmartChart/smart-chart-store.js

@@ -13,8 +13,6 @@ import {
     isBarrierSupported }      from './Helpers/barriers';
 import BaseStore              from '../../base-store';
 
-const store_name = 'smart_chart_store';
-
 export default class SmartChartStore extends BaseStore {
     @observable chart_type;
     @observable granularity;
@@ -39,11 +37,6 @@ export default class SmartChartStore extends BaseStore {
     @observable trade_chart_layout   = null;
     trade_chart_symbol               = null;
 
-    constructor({ root_store }) {
-        const local_storage_properties = ['trade_chart_layout'];
-        super({ root_store, local_storage_properties, store_name });
-    }
-
     @action.bound
     updateChartType(type) {
         this.chart_type = type;
@@ -99,7 +92,7 @@ export default class SmartChartStore extends BaseStore {
         this.removeMarkers();
     };
 
-    // --------- Tick Contracts ---------
+    // --------- Set Contract Scroll to Left ---------
     @action.bound
     setChartView(scroll_to_left_epoch) {
         this.updateEpochScrollToOffset(1);
@@ -162,8 +155,8 @@ export default class SmartChartStore extends BaseStore {
     saveAndClearTradeChartLayout() {
         this.should_export_layout = true;
         this.should_import_layout = false;
-
         this.trade_chart_symbol   = this.root_store.modules.trade.symbol;
+        this.chart_id             = 'contract';
         this.updateGranularity(0);
         this.updateChartType('mountain');
     }
@@ -173,16 +166,17 @@ export default class SmartChartStore extends BaseStore {
         this.should_export_layout = false;
         this.should_import_layout = true;
         this.should_clear_chart   = false;
+        this.chart_id             = 'trade';
 
         this.trade_chart_layout.isDone = action(() => {
             this.trade_chart_layout   = null;
             this.should_import_layout = false;
-        });
 
-        // Reset back to symbol before loading contract if trade_symbol and contract_symbol don't match
-        if (this.trade_chart_symbol !== this.root_store.modules.trade.symbol) {
-            this.root_store.modules.trade.updateSymbol(this.trade_chart_symbol);
-        }
+            // Reset back to symbol before loading contract if trade_symbol and contract_symbol don't match
+            if (this.trade_chart_symbol !== this.root_store.modules.trade.symbol) {
+                this.root_store.modules.trade.updateSymbol(this.trade_chart_symbol);
+            }
+        });
     }
 
     @action.bound

src/javascript/landing_pages/binary_grid.js

@@ -0,0 +1,3 @@
+window.onload = function () {
+    commonOnload();
+};

src/javascript/landing_pages/common.js

@@ -173,6 +173,7 @@ function setupCrowdin() {
 
 function commonOnload() {
     setupCrowdin();
+    dataLayer.push({ event: 'page_load' });
 }
 
 // displays notification on outdated browsers

src/javascript/landing_pages/signup_frame.js

@@ -1,8 +1,6 @@
 const error_class = 'error-field';
 
 window.onload = function () {
-    dataLayer.push({ event: 'page_load' });
-
     const el_email   = document.getElementById('email');
     const el_signup  = document.getElementById('signup');
     const el_success = document.getElementById('success');
@@ -58,6 +56,8 @@ window.onload = function () {
     if (gclid) {
         localStorage.setItem('gclid', gclid);
     }
+
+    commonOnload();
 };
 
 function validateEmail(email) {

src/javascript/landing_pages/usb_page.js

@@ -9,3 +9,7 @@ function collapseNavbar() {
 
 $(window).scroll(collapseNavbar);
 $(document).ready(collapseNavbar);
+
+window.onload = function () {
+    commonOnload();
+};

src/root_files/app/index.html

@@ -26,6 +26,7 @@
                     'de': 'de|at|li',
                     'es': 'ar|bo|cl|co|cr|cu|do|ec|sv|gt|hn|mx|ni|pa|py|pr|es|uy|ve',
                     'fr': 'fr|ad|bj|bf|cf|cg|ga|gn|ml|mc|ne|sn|tg',
+                    'id': 'id',
                     'it': 'it',
                     'ko': 'kr',
                     'pl': 'po',
@@ -48,30 +49,13 @@
                 var loginid      = localStorage.getItem('active_loginid');
                 var client_info  = JSON.parse(localStorage.getItem('client.accounts') || '{}')[loginid];
                 var is_logged_in = client_info && client_info['token'];
-                window.location.href = (lang || 'en').toLowerCase() + '/' + (is_logged_in ? 'trading' : 'home') + '.html' + window.location.search;
-            }
-            function isDelayedRedirect() {
-                if (isGtmApplicable() && !redirectTimeOut) {
-                    redirectTimeOut = setTimeout(redirect, 5000);
-                } else {
-                    clearTimeout(redirectTimeOut);
-                    redirect();
-                }
-            }
-            function isGtmApplicable() {
-                return /(www|staging)\.binary\.(com|me)/i.test(window.location.hostname);
-            }
-            function pushEvent() {
-                if (isGtmApplicable()) {
-                    dataLayer.push({
-                        'event': 'page_load',
-                        'eventCallback': function() {
-                            isDelayedRedirect();
-                        }
-                    });
-                } else {
-                    isDelayedRedirect();
-                }
+
+                var search                = window.location.search ? window.location.search : '';
+                var has_external_referrer = document.referrer && !/\.binary\.(com|me)/.test(document.referrer);
+                var has_utm_source        = /utm_source/.test(search);
+                var utm_source            = has_external_referrer && !has_utm_source ? ((search ? '&' : '?') + 'utm_source=' + new URL(document.referrer).hostname) : '';
+
+                window.location.href = (lang || 'en').toLowerCase() + '/' + (is_logged_in ? 'trading' : 'home') + '.html' + search + utm_source;
             }
 
             if (/^https:\/\/staging\.binary\.com\/translations\//i.test(window.location.href)) {
@@ -81,32 +65,25 @@
                     localStorage.setItem('index_referrer', document.referrer);
                 }
                 lang = getCookieItem('language');
-                var ws = new WebSocket('wss://ws.binaryws.com/websockets/v3?app_id=1');
-                ws.onopen = function(e) {
-                    ws.send(JSON.stringify({'website_status': '1'}));
-                };
-                ws.onmessage = function(msg) {
-                    var response = JSON.parse(msg.data);
-                    if (response.msg_type === 'website_status') {
-                        if (!lang && !response.error && response.hasOwnProperty('website_status')) {
-                            lang = getLanguage(response.website_status.clients_country);
+                if (lang) {
+                    redirect();
+                } else {
+                    var ws = new WebSocket('wss://ws.binaryws.com/websockets/v3?app_id=1');
+                    ws.onopen = function(e) {
+                        ws.send(JSON.stringify({'website_status': '1'}));
+                    };
+                    ws.onmessage = function(msg) {
+                        var response = JSON.parse(msg.data);
+                        if (response.msg_type === 'website_status') {
+                            if (!response.error && response.hasOwnProperty('website_status')) {
+                                lang = getLanguage(response.website_status.clients_country);
+                            }
+                            ws.close();
+                            redirect();
                         }
-                        ws.close();
-                        pushEvent(); // we need website_status.clients_country
-                    }
-                };
+                    };
+                }
             }
         </script>
     </head>
-    <body>
-<!-- Google Tag Manager -->
-<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-MZWFF7"
-height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
-<script data-cfasync="false">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-})(window,document,'script','dataLayer','GTM-MZWFF7');</script>
-<!-- End Google Tag Manager -->
-    </body>
 </html>

src/root_files/app_2/index.html

@@ -25,6 +25,7 @@
                     'de': 'de|at|li',
                     'es': 'ar|bo|cl|co|cr|cu|do|ec|sv|gt|hn|mx|ni|pa|py|pr|es|uy|ve',
                     'fr': 'fr|ad|bj|bf|cf|cg|ga|gn|ml|mc|ne|sn|tg',
+                    'id': 'id',
                     'it': 'it',
                     'ko': 'kr',
                     'pl': 'po',
@@ -47,23 +48,14 @@
                 var loginid      = localStorage.getItem('active_loginid');
                 var client_info  = JSON.parse(localStorage.getItem('client.accounts') || '{}')[loginid];
                 var is_logged_in = client_info && client_info['token'];
-                window.location.href = (/\/app\//.test(window.location.pathname) ? '' : 'app/') + (lang || 'en').toLowerCase() + '/trade' + window.location.search;
+
+                var search                = window.location.search ? window.location.search : '';
+                var has_external_referrer = document.referrer && !/\.binary\.(com|me)/.test(document.referrer);
+                var has_utm_source        = /utm_source/.test(search);
+                var utm_source            = has_external_referrer && !has_utm_source ? ((search ? '&' : '?') + 'utm_source=' + new URL(document.referrer).hostname) : '';
+
+                window.location.href = (/\/app\//.test(window.location.pathname) ? '' : 'app/') + (lang || 'en').toLowerCase() + '/trade' + search + utm_source;
             }
-            // function isGtmApplicable() {
-            //     return /(www|staging)\.binary\.(com|me)/i.test(window.location.hostname);
-            // }
-            // function pushEvent() {
-            //     if (isGtmApplicable()) {
-            //         dataLayer.push({
-            //             'event': 'page_load',
-            //             'eventCallback': function() {
-            //                 redirect();
-            //             }
-            //         });
-            //     } else {
-            //         redirect();
-            //     }
-            // }
 
             if (document.referrer) {
                 localStorage.setItem('index_referrer', document.referrer);
@@ -84,21 +76,9 @@
                         }
                         ws.close();
                         redirect();
-                        // pushEvent(); // we need website_status.clients_country
                     }
                 };
             }
         </script>
     </head>
-    <body>
-<!--&lt;!&ndash; Google Tag Manager &ndash;&gt;-->
-<!--<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-MZWFF7"-->
-<!--height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>-->
-<!--<script data-cfasync="false">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':-->
-<!--new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],-->
-<!--j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=-->
-<!--'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);-->
-<!--})(window,document,'script','dataLayer','GTM-MZWFF7');</script>-->
-<!--&lt;!&ndash; End Google Tag Manager &ndash;&gt;-->
-    </body>
 </html>