V20190604_0

src/javascript/_common/base/gtm.js

@@ -4,8 +4,6 @@ const ClientBase       = require('./client_base');
 const Login            = require('./login');
 const ServerTime       = require('./server_time');
 const BinarySocket     = require('./socket_base');
-const getElementById   = require('../common_functions').getElementById;
-const isVisible        = require('../common_functions').isVisible;
 const getLanguage      = require('../language').get;
 const LocalStore       = require('../storage').LocalStore;
 const State            = require('../storage').State;
@@ -16,14 +14,10 @@ const GTM = (() => {
     const isGtmApplicable = () => (/^(16303|16929)$/.test(getAppId()));
 
     const getCommonVariables = () => ({
-        country_ip: State.getResponse('website_status.clients_country'),
-        language  : getLanguage(),
-        pageTitle : pageTitle(),
-        pjax      : State.get('is_loaded_by_pjax'),
-        url       : document.URL,
+        language: getLanguage(),
         ...ClientBase.isLoggedIn() && {
             visitorId: ClientBase.get('loginid'),
-            bom_email: ClientBase.get('email'),
+            currency : ClientBase.get('currency'),
         },
         ...('is_dark_mode_on' in LocalStore.getObject('ui_store')) && {
             theme: LocalStore.getObject('ui_store').is_dark_mode_on ? 'dark' : 'light',
@@ -39,11 +33,6 @@ const GTM = (() => {
         }
     };
 
-    const pageTitle = () => {
-        const t = /^.+[:-]\s*(.+)$/.exec(document.title);
-        return t && t[1] ? t[1] : document.title;
-    };
-
     const eventHandler = (get_settings) => {
         if (!isGtmApplicable()) return;
         const login_event       = localStorage.getItem('GTM_login');
@@ -108,47 +97,6 @@ const GTM = (() => {
         });
     };
 
-    const pushPurchaseData = (response) => {
-        if (!isGtmApplicable() || ClientBase.get('is_virtual')) return;
-        const buy = response.buy;
-        if (!buy) return;
-        const req  = response.echo_req.passthrough;
-        const data = {
-            event             : 'buy_contract',
-            bom_ui            : 'legacy',
-            bom_symbol        : req.symbol,
-            bom_market        : getElementById('contract_markets').value,
-            bom_currency      : req.currency,
-            bom_contract_type : req.contract_type,
-            bom_contract_id   : buy.contract_id,
-            bom_transaction_id: buy.transaction_id,
-            bom_buy_price     : buy.buy_price,
-            bom_payout        : buy.payout,
-        };
-        Object.assign(data, {
-            bom_amount     : req.amount,
-            bom_basis      : req.basis,
-            bom_expiry_type: getElementById('expiry_type').value,
-        });
-        if (data.bom_expiry_type === 'duration') {
-            Object.assign(data, {
-                bom_duration     : req.duration,
-                bom_duration_unit: req.duration_unit,
-            });
-        }
-        if (isVisible(getElementById('barrier'))) {
-            data.bom_barrier = req.barrier;
-        } else if (isVisible(getElementById('barrier_high'))) {
-            data.bom_barrier_high = req.barrier;
-            data.bom_barrier_low  = req.barrier2;
-        }
-        if (isVisible(getElementById('prediction'))) {
-            data.bom_prediction = req.barrier;
-        }
-
-        pushDataLayer(data);
-    };
-
     const mt5NewAccount = (response) => {
         const acc_type = response.mt5_new_account.mt5_account_type ?
             `${response.mt5_new_account.account_type}_${response.mt5_new_account.mt5_account_type}` : // financial_cent, demo_cent, ...
@@ -175,10 +123,10 @@ const GTM = (() => {
         if (!isGtmApplicable() || ClientBase.get('is_virtual')) return;
         if (!response.transaction || !response.transaction.action) return;
         if (!['deposit', 'withdrawal'].includes(response.transaction.action)) return;
- 
+
         const moment_now  = window.time || moment().utc();
         const storage_key = 'GTM_transactions';
-        
+
         // Remove values from prev days so localStorage doesn't grow to infinity
         let gtm_transactions = JSON.parse(localStorage.getItem(storage_key)) || {};
         if (Object.prototype.hasOwnProperty.call(gtm_transactions, 'timestamp')) {
@@ -215,10 +163,8 @@ const GTM = (() => {
     return {
         pushDataLayer,
         eventHandler,
-        pushPurchaseData,
         pushTransactionData,
         mt5NewAccount,
-        setLoginFlag: (event_name) => { if (isGtmApplicable()) localStorage.setItem('GTM_login', event_name); },
     };
 })();
 

src/javascript/app/App/Components/Routes/__tests__/route-with-sub-routes.spec.js

@@ -1,20 +1,20 @@
-import React                  from 'react';
-import { expect }             from 'chai';
-import { configure, shallow } from 'enzyme';
-import Adapter                from 'enzyme-adapter-react-16';
-import RouteWithSubRoutes     from '../route-with-sub-routes.jsx';
-import { Redirect }           from 'react-router-dom';
+import React                        from 'react';
+import { expect }                   from 'chai';
+import { configure, shallow }       from 'enzyme';
+import Adapter                      from 'enzyme-adapter-react-16';
+import { RouteWithSubRoutesRender } from '../route-with-sub-routes.jsx';
+import { Redirect }                 from 'react-router-dom';
 
 configure({ adapter: new Adapter() });
 
 describe('<RouteWithSubRoutes />', () => {
-    it('should render one <RouteWithSubRoutes /> component', () => {
-        const wrapper = shallow(<RouteWithSubRoutes />);
+    it('should render one <RouteWithSubRoutesRender /> component', () => {
+        const wrapper = shallow(<RouteWithSubRoutesRender />);
         expect(wrapper).to.have.length(1);
     });
     it('should have props as passed as route', () => {
         const route = { path: '/', component: Redirect, title: '', exact: true, to: '/root' };
-        const wrapper = shallow(<RouteWithSubRoutes {...route} />);
+        const wrapper = shallow(<RouteWithSubRoutesRender {...route} />);
         expect(wrapper.prop('exact')).to.equal(true);
         expect(wrapper.prop('path')).to.equal('/');
         expect(wrapper.prop('render')).to.be.an.instanceof(Function);

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

@@ -6,7 +6,7 @@ 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 { connect }         from 'Stores/connect';
 import LoginPrompt         from '../Elements/login-prompt.jsx';
 import { default_title }   from '../../Constants/app-config';
 
@@ -35,7 +35,7 @@ const RouteWithSubRoutes = route => {
         const title = route.title ? `${route.title} | ` : '';
         document.title = `${ title }${ default_title }`;
         BinarySocket.wait('website_status').then(() => {
-            GTM.pushDataLayer({ event: 'page_load' });
+            route.pushDataLayer({ event: 'page_load' });
         });
         return result;
     };
@@ -47,4 +47,8 @@ const RouteWithSubRoutes = route => {
     />;
 };
 
-export default RouteWithSubRoutes;
+export { RouteWithSubRoutes as RouteWithSubRoutesRender }; // For tests
+
+export default connect(({ gtm }) => ({
+    pushDataLayer: gtm.pushDataLayer,
+}))(RouteWithSubRoutes);

src/javascript/app/App/Containers/AccountSwitcher/account-switcher.jsx

@@ -29,7 +29,7 @@ class AccountSwitcher extends React.Component {
             this.props.togglePositionsDrawer(); // TODO: hide drawer inside logout, once it is a mobx action
         }
         requestLogout().then(this.props.cleanUp);
-    }
+    };
 
     componentDidMount() {
         document.addEventListener('mousedown', this.handleClickOutside);

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

@@ -4,22 +4,21 @@ import Localize      from 'App/Components/Elements/localize.jsx';
 import DarkModeIcon  from 'Images/app/settings/img-theme-dark.svg';
 import LightModeIcon from 'Images/app/settings/img-theme-light.svg';
 import { connect }   from 'Stores/connect';
-import GTM           from 'Utils/gtm';
 
-const ThemeSelectSettings = ({ is_dark_mode, toggleDarkMode, updateBarrierColor }) => {
+const ThemeSelectSettings = ({ is_dark_mode, toggleDarkMode, updateBarrierColor, pushDataLayer }) => {
     const darkOnClick = () => {
         if (!is_dark_mode) {
             const new_dark_mode = toggleDarkMode();
             updateBarrierColor(new_dark_mode);
-            GTM.pushDataLayer({ event: 'switch theme' });
+            pushDataLayer({ event: 'switch theme' });
         }
     };
 
     const lightOnClick = () => {
         if (is_dark_mode) {
             const new_dark_mode = toggleDarkMode();
             updateBarrierColor(new_dark_mode);
-            GTM.pushDataLayer({ event: 'switch theme' });
+            pushDataLayer({ event: 'switch theme' });
         }
     };
     return (
@@ -63,10 +62,11 @@ const ThemeSelectSettings = ({ is_dark_mode, toggleDarkMode, updateBarrierColor
     );
 };
 
-export default connect(({ ui, modules }) => (
+export default connect(({ ui, modules, gtm }) => (
     {
         is_dark_mode      : ui.is_dark_mode_on,
         toggleDarkMode    : ui.toggleDarkMode,
         updateBarrierColor: modules.smart_chart.updateBarrierColor,
+        pushDataLayer     : gtm.pushDataLayer,
     }
 ))(ThemeSelectSettings);

src/javascript/app/App/Containers/Wip/wip.jsx

@@ -6,21 +6,20 @@ import Localize     from 'App/Components/Elements/localize.jsx';
 import Button       from 'App/Components/Form/button.jsx';
 import { IconWip }  from 'Assets/Common/icon-wip.jsx';
 import { connect }  from 'Stores/connect';
-import GTM          from 'Utils/gtm';
 
 const onClick = () => {
     window.location.href = window.open(urlFor('trading', undefined, undefined, true));
 };
 
-const Wip = (ui) => {
+const Wip = ({ is_dark_mode, pushDataLayer }) => {
     BinarySocket.wait('website_status').then(() => {
-        GTM.pushDataLayer({ event: 'page_load' });
+        pushDataLayer({ event: 'page_load' });
     });
 
     return (
         <div className='work-in-progress'>
             <div className='work-in-progress__content'>
-                <IconWip theme={ui.is_dark_mode ? 'dark' : 'light'} />
+                <IconWip theme={is_dark_mode ? 'dark' : 'light'} />
                 <div className='work-in-progress__header'>
                     <Localize str='Work in progress!' />
                 </div>
@@ -38,8 +37,9 @@ const Wip = (ui) => {
     );
 };
 
-export default connect(({ ui }) => (
+export default connect(({ ui, gtm }) => (
     {
-        is_dark_mode: ui.is_dark_mode_on,
+        is_dark_mode : ui.is_dark_mode_on,
+        pushDataLayer: gtm.pushDataLayer,
     }
 ))(Wip);

src/javascript/app/Services/logout.js

@@ -2,14 +2,12 @@ import Client            from '_common/base/client_base';
 import SocketCache       from '_common/base/socket_cache';
 import { removeCookies } from '_common/storage';
 import WS                from './ws-methods';
-import GTM               from '../Utils/gtm';
 
 export const requestLogout = () =>
     WS.logout().then(doLogout);
 
 const doLogout = (response) => {
     if (response.logout !== 1) return;
-    GTM.pushDataLayer({ event: 'log_out' });
     removeCookies('affiliate_token', 'affiliate_tracking');
     Client.clearAllAccounts();
     Client.set('loginid', '');

src/javascript/app/Services/socket-general.js

@@ -1,13 +1,13 @@
 import { action, flow }     from 'mobx';
 import { setCurrencies }    from '_common/base/currency_base';
+import GTM                  from '_common/base/gtm';
 import Login                from '_common/base/login';
 import ServerTime           from '_common/base/server_time';
 import BinarySocket         from '_common/base/socket_base';
 import { State }            from '_common/storage';
 import { getPropertyValue } from '_common/utility';
 import { requestLogout }    from './logout';
 import WS                   from './ws-methods';
-import GTM                  from '../Utils/gtm';
 
 let client_store,
     common_store;

src/javascript/app/Stores/Modules/Contract/Helpers/logic.js

@@ -32,8 +32,8 @@ const getExpiryTime = (time) => time || ServerTime.get().unix();
 
 export const getChartType = (start_time, expiry_time) => {
     const duration = moment.duration(moment.unix(getExpiryTime(expiry_time)).diff(moment.unix(start_time))).asHours();
-    // use line chart if duration is less than 1 hour
-    return (duration < 1) ? 'mountain' : 'candle';
+    // use line chart if duration is equal or less than 1 hour
+    return (duration <= 1) ? 'mountain' : 'candle';
 };
 
 export const getChartGranularity = (start_time, expiry_time) =>

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

@@ -48,7 +48,6 @@ export default class ContractStore extends BaseStore {
     @observable is_replay_static_chart = false;
 
     // ---- Normal properties ---
-    forget_id;
     chart_type          = 'mountain';
     is_from_positions   = false;
     is_ongoing_contract = false;
@@ -62,7 +61,6 @@ export default class ContractStore extends BaseStore {
     // -------------------
     @action.bound
     drawChart(SmartChartStore, contract_info) {
-        this.forget_id       = contract_info.id;
         const { date_start } = contract_info;
         const end_time       = getEndTime(contract_info);
 
@@ -148,7 +146,6 @@ export default class ContractStore extends BaseStore {
 
     @action.bound
     onUnmountReplay() {
-        this.forget_id                = null;
         this.replay_contract_id       = null;
         this.digits_info              = {};
         this.is_ongoing_contract      = false;
@@ -176,7 +173,6 @@ export default class ContractStore extends BaseStore {
         this.contract_info       = {};
         this.digits_info         = {};
         this.error_message       = '';
-        this.forget_id           = null;
         this.has_error           = false;
         this.is_sell_requested   = false;
         this.is_from_positions   = false;
@@ -212,7 +208,6 @@ export default class ContractStore extends BaseStore {
         }
         if (+response.proposal_open_contract.contract_id !== +this.replay_contract_id) return;
 
-        this.forget_id   = response.proposal_open_contract.id;
         this.replay_info = response.proposal_open_contract;
 
         // Add indicative status for contract
@@ -335,10 +330,6 @@ export default class ContractStore extends BaseStore {
         SmartChartStore.updateGranularity(granularity);
     }
 
-    forgetProposalOpenContract() {
-        WS.forget('proposal_open_contract', this.updateProposal, { id: this.forget_id });
-    }
-
     waitForChartListener = (SmartChartStore) => {
         // TODO: Refactor, timeout interval is required for completed contracts.
         // There is an issue when we receive the proposal_open_contract response

src/javascript/app/Stores/Modules/Portfolio/portfolio-store.js

@@ -57,20 +57,18 @@ export default class PortfolioStore extends BaseStore {
     }
 
     @action.bound
-    transactionHandler(response) {
+    async transactionHandler(response) {
         if ('error' in response) {
             this.error = response.error.message;
         }
         if (!response.transaction) return;
         const { contract_id, action: act } = response.transaction;
 
         if (act === 'buy') {
-            WS.portfolio().then((res) => {
-                const new_pos = res.portfolio.contracts.find(pos => +pos.contract_id === +contract_id);
-                if (!new_pos) return;
-                this.pushNewPosition(new_pos);
-            });
-            // subscribe to new contract:
+            const res = await WS.portfolio();
+            const new_pos = res.portfolio.contracts.find(pos => +pos.contract_id === +contract_id);
+            if (!new_pos) return;
+            this.pushNewPosition(new_pos);
             WS.subscribeProposalOpenContract(contract_id.toString(), this.proposalOpenContractHandler, false);
         } else if (act === 'sell') {
             const i = this.getPositionIndexById(contract_id);
@@ -194,13 +192,13 @@ export default class PortfolioStore extends BaseStore {
 
     @action.bound
     removePositionById(contract_id) {
-        const is_contract_mode = this.root_store.modules.smart_chart.is_contract_mode;
-        let i = this.getPositionIndexById(contract_id);
-        // check if position to be removed is out of range from the maximum amount rendered in drawer
-        if (this.positions.length > 4) i += 1;
-        this.positions.splice(i, 1);
+        const { is_contract_mode } = this.root_store.modules.smart_chart;
+        const contract_idx         = this.getPositionIndexById(contract_id);
+
+        this.positions.splice(contract_idx, 1);
+
         // check if contract is in view in contract_mode before removing contract details from chart
-        if (is_contract_mode && (this.root_store.modules.contract.contract_id === contract_id)) {
+        if (is_contract_mode && (+this.root_store.modules.contract.contract_id === +contract_id)) {
             this.root_store.modules.contract.onCloseContract();
             this.root_store.modules.trade.requestProposal();
         }