-
+
@@ -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);
diff --git a/src/javascript/app/Services/logout.js b/src/javascript/app/Services/logout.js
index 011546507485..aa8b6074c5d6 100644
--- a/src/javascript/app/Services/logout.js
+++ b/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', '');
diff --git a/src/javascript/app/Services/socket-general.js b/src/javascript/app/Services/socket-general.js
index 091ad04e1585..7188a3326588 100644
--- a/src/javascript/app/Services/socket-general.js
+++ b/src/javascript/app/Services/socket-general.js
@@ -1,5 +1,6 @@
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';
@@ -7,7 +8,6 @@ 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;
diff --git a/src/javascript/app/Stores/Modules/Contract/Helpers/logic.js b/src/javascript/app/Stores/Modules/Contract/Helpers/logic.js
index f96a03f41bb5..2f1c347859c4 100644
--- a/src/javascript/app/Stores/Modules/Contract/Helpers/logic.js
+++ b/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) =>
diff --git a/src/javascript/app/Stores/Modules/Contract/contract-store.js b/src/javascript/app/Stores/Modules/Contract/contract-store.js
index 8d5d35e6611c..ed1ab4b5efae 100644
--- a/src/javascript/app/Stores/Modules/Contract/contract-store.js
+++ b/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
diff --git a/src/javascript/app/Stores/Modules/Portfolio/portfolio-store.js b/src/javascript/app/Stores/Modules/Portfolio/portfolio-store.js
index 57f9227220c5..b2f3a11a8f77 100644
--- a/src/javascript/app/Stores/Modules/Portfolio/portfolio-store.js
+++ b/src/javascript/app/Stores/Modules/Portfolio/portfolio-store.js
@@ -57,7 +57,7 @@ export default class PortfolioStore extends BaseStore {
}
@action.bound
- transactionHandler(response) {
+ async transactionHandler(response) {
if ('error' in response) {
this.error = response.error.message;
}
@@ -65,12 +65,10 @@ export default class PortfolioStore extends BaseStore {
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();
}
diff --git a/src/javascript/app/Stores/Modules/Trading/trade-store.js b/src/javascript/app/Stores/Modules/Trading/trade-store.js
index 412ae52669b6..243b164bca2c 100644
--- a/src/javascript/app/Stores/Modules/Trading/trade-store.js
+++ b/src/javascript/app/Stores/Modules/Trading/trade-store.js
@@ -14,7 +14,6 @@ import {
getMinPayout,
isCryptocurrency } from '_common/base/currency_base';
import { WS } from 'Services';
-import GTM from 'Utils/gtm';
import { processPurchase } from './Actions/purchase';
import * as Symbol from './Actions/symbol';
import getValidationRules from './Constants/validation-rules';
@@ -280,7 +279,7 @@ export default class TradeStore extends BaseStore {
this.root_store.modules.contract.onMount(contract_id);
this.root_store.ui.openPositionsDrawer();
}
- GTM.pushPurchaseData(contract_data, this.root_store);
+ this.root_store.gtm.pushPurchaseData(contract_data);
} else if (response.error) {
this.root_store.common.services_error = {
type: response.msg_type,
diff --git a/src/javascript/app/Stores/client-store.js b/src/javascript/app/Stores/client-store.js
index 761597607b81..6158438cf0bb 100644
--- a/src/javascript/app/Stores/client-store.js
+++ b/src/javascript/app/Stores/client-store.js
@@ -8,7 +8,6 @@ import {
requestLogout,
WS } from 'Services';
import { getAccountTitle } from '_common/base/client_base';
-import GTM from '_common/base/gtm';
import BinarySocket from '_common/base/socket_base';
import * as SocketCache from '_common/base/socket_cache';
import { localize } from '_common/localize';
@@ -344,7 +343,7 @@ export default class ClientStore extends BaseStore {
}
sessionStorage.setItem('active_tab', '1');
// set local storage
- GTM.setLoginFlag();
+ this.root_store.gtm.setLoginFlag();
this.resetLocalStorageValues(this.switched);
SocketCache.clear();
await BinarySocket.send({ 'authorize': this.getToken() }, { forced: true });
@@ -383,6 +382,7 @@ export default class ClientStore extends BaseStore {
@action.bound
cleanUp() {
+ this.root_store.gtm.pushDataLayer({ event: 'log_out' });
this.loginid = null;
this.upgrade_info = undefined;
this.accounts = [];
diff --git a/src/javascript/app/Stores/connect.js b/src/javascript/app/Stores/connect.js
index c9f0a743c12c..94df31e9bcb4 100644
--- a/src/javascript/app/Stores/connect.js
+++ b/src/javascript/app/Stores/connect.js
@@ -36,6 +36,7 @@ export class MobxProvider extends Provider {
mobxStores: PropTypes.object,
client : PropTypes.object,
common : PropTypes.object,
+ gtm : PropTypes.object,
modules : PropTypes.object,
ui : PropTypes.object,
};
diff --git a/src/javascript/app/Stores/gtm-store.js b/src/javascript/app/Stores/gtm-store.js
new file mode 100644
index 000000000000..749c107d97ef
--- /dev/null
+++ b/src/javascript/app/Stores/gtm-store.js
@@ -0,0 +1,109 @@
+import {
+ action,
+ computed,
+ observable } from 'mobx';
+import BaseStore from './base-store';
+import { isLoginPages } from '../../_common/base/login';
+import { get as getLanguage } from '../../_common/language';
+import { getAppId } from '../../config';
+
+export default class GTMStore extends BaseStore {
+ @observable is_gtm_applicable = /^(16303|16929)$/.test(getAppId());
+
+ constructor(root_store) {
+ super({ root_store });
+
+ this.onSwitchAccount(this.accountSwitcherListener);
+ }
+
+ @computed
+ get visitorId() {
+ return this.root_store.client.loginid;
+ }
+
+ @computed
+ get currency() {
+ return this.root_store.client.currency;
+ }
+
+ /**
+ * Contains common data that will be passed to GTM on each datalayer push
+ *
+ * @returns {object}
+ */
+ @computed
+ get common_variables() {
+ return {
+ language: getLanguage(),
+ ...this.root_store.client.is_logged_in && {
+ visitorId: this.visitorId,
+ currency : this.currency,
+ },
+ ...this.root_store.ui.is_dark_mode_on && {
+ theme: this.root_store.ui.is_dark_mode_on ? 'dark' : 'light',
+ },
+ };
+ }
+
+ @action.bound
+ accountSwitcherListener() {
+ return new Promise(async (resolve) => resolve(this.pushDataLayer({ event: 'account switch' })));
+ }
+
+ /**
+ * Pushes provided data as GTM DataLayer
+ *
+ * @param {object} data
+ */
+ @action.bound
+ pushDataLayer(data) {
+ if (this.is_gtm_applicable && !isLoginPages()) {
+ dataLayer.push({
+ ...this.common_variables,
+ ...data,
+ });
+ }
+ }
+
+ @action.bound
+ pushPurchaseData(contract_data) {
+ const data = {
+ event : 'buy_contract',
+ bom_ui : 'new',
+ contract: {
+ amount : contract_data.amount,
+ barrier1 : contract_data.barrier,
+ barrier2 : contract_data.barrier2,
+ basis : contract_data.basis,
+ buy_price : contract_data.buy_price,
+ contract_type: contract_data.contract_type,
+ currency : contract_data.currency,
+ date_expiry : contract_data.date_expiry,
+ date_start : contract_data.date_start,
+ duration : contract_data.duration,
+ duration_unit: contract_data.duration_unit,
+ payout : contract_data.payout,
+ symbol : contract_data.symbol,
+ },
+ settings: {
+ theme : this.root_store.ui.is_dark_mode_on ? 'dark' : 'light',
+ positions_drawer: this.root_store.ui.is_positions_drawer_on ? 'open' : 'closed',
+ // purchase_confirm: this.root_store.ui.is_purchase_confirm_on ? 'enabled' : 'disabled',
+ chart : {
+ toolbar_position: this.root_store.ui.is_chart_layout_default ? 'bottom' : 'left',
+ chart_asset_info: this.root_store.ui.is_chart_asset_info_visible ? 'visible' : 'hidden',
+ chart_type : this.root_store.modules.smart_chart.chart_type,
+ granularity : this.root_store.modules.smart_chart.granularity,
+ },
+ },
+ };
+ this.pushDataLayer(data);
+ }
+
+ @action.bound
+ setLoginFlag(event_name) {
+ if (this.is_gtm_applicable) {
+ localStorage.setItem('GTM_login', event_name);
+ }
+ }
+}
diff --git a/src/javascript/app/Stores/index.js b/src/javascript/app/Stores/index.js
index 071d8c71c9e6..331f34cb9e17 100644
--- a/src/javascript/app/Stores/index.js
+++ b/src/javascript/app/Stores/index.js
@@ -1,5 +1,6 @@
import ClientStore from './client-store';
import CommonStore from './common-store';
+import GTMStore from './gtm-store';
import ModulesStore from './Modules';
import UIStore from './ui-store';
@@ -9,5 +10,6 @@ export default class RootStore {
this.common = new CommonStore();
this.modules = new ModulesStore(this);
this.ui = new UIStore();
+ this.gtm = new GTMStore(this);
}
}
diff --git a/src/javascript/app/Utils/gtm.js b/src/javascript/app/Utils/gtm.js
deleted file mode 100644
index f55e3fcb754a..000000000000
--- a/src/javascript/app/Utils/gtm.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import GTMBase from '../../_common/base/gtm';
-
-const GTM = (() => {
- const pushPurchaseData = (contract_data, root_store) => {
- const data = {
- event : 'buy_contract',
- bom_ui : 'new',
- contract: {
- amount : contract_data.amount,
- barrier1 : contract_data.barrier,
- barrier2 : contract_data.barrier2,
- basis : contract_data.basis,
- buy_price : contract_data.buy_price,
- contract_type: contract_data.contract_type,
- currency : contract_data.currency,
- date_expiry : contract_data.date_expiry,
- date_start : contract_data.date_start,
- duration : contract_data.duration,
- duration_unit: contract_data.duration_unit,
- payout : contract_data.payout,
- symbol : contract_data.symbol,
- },
- settings: {
- theme : root_store.ui.is_dark_mode_on ? 'dark' : 'light',
- positions_drawer: root_store.ui.is_positions_drawer_on ? 'open' : 'closed',
- // purchase_confirm: root_store.ui.is_purchase_confirm_on ? 'enabled' : 'disabled',
- chart : {
- toolbar_position: root_store.ui.is_chart_layout_default ? 'bottom' : 'left',
- chart_asset_info: root_store.ui.is_chart_asset_info_visible ? 'visible' : 'hidden',
- chart_type : root_store.modules.smart_chart.chart_type,
- granularity : root_store.modules.smart_chart.granularity,
- },
- },
- };
- GTMBase.pushDataLayer(data);
- };
-
- return {
- ...GTMBase,
- pushPurchaseData,
- };
-})();
-
-export default GTM;