From 2d38de563b2e14866f7621ef568f2c123c471b0e Mon Sep 17 00:00:00 2001 From: shafin-deriv Date: Fri, 6 Dec 2024 14:23:21 +0800 Subject: [PATCH 1/3] chore: integrate gtm and add delay on loading scripts --- index.html | 13 +++++++------ src/app/CoreStoreProvider.tsx | 11 ++++++++++- src/app/app-content.jsx | 7 +++---- src/utils/gtm.ts | 34 ++++++++++++++++++++++++++++++++-- 4 files changed, 52 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 3227adf1..66c39087 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,6 @@ font-size: 62.5%; } - @@ -47,11 +46,13 @@ i(['call', c.call(arguments)]); }, init: function () { - var n = t.createElement('script'); - (n.async = !0), - (n.type = 'text/javascript'), - (n.src = 'https://cdn.livechatinc.com/tracking.js'), - t.head.appendChild(n); + setTimeout(() => { + var n = t.createElement('script'); + (n.async = !0), + (n.type = 'text/javascript'), + (n.src = 'https://cdn.livechatinc.com/tracking.js'), + t.head.appendChild(n); + }, 3000); }, }; !n.__lc.asyncInit && e.init(), (n.LiveChatWidget = n.LiveChatWidget || e); diff --git a/src/app/CoreStoreProvider.tsx b/src/app/CoreStoreProvider.tsx index c971b0f1..edfd28c3 100644 --- a/src/app/CoreStoreProvider.tsx +++ b/src/app/CoreStoreProvider.tsx @@ -1,4 +1,5 @@ import { useCallback, useEffect, useMemo, useRef } from 'react'; +import Cookies from 'js-cookie'; import { observer } from 'mobx-react-lite'; import { getDecimalPlaces, toMoment } from '@/components/shared'; import { FORM_ERROR_MESSAGES } from '@/components/shared/constants/form-error-messages'; @@ -21,7 +22,15 @@ const CoreStoreProvider: React.FC<{ children: React.ReactNode }> = observer(({ c const { currentLang } = useTranslations(); - const { oAuthLogout } = useOauth2({ handleLogout: async () => client.logout(), client }); + const { oAuthLogout, isOAuth2Enabled } = useOauth2({ handleLogout: async () => client.logout(), client }); + + const isLoggedOutCookie = Cookies.get('logged_state') === 'false'; + + useEffect(() => { + if (isLoggedOutCookie && isOAuth2Enabled && client?.is_logged_in) { + oAuthLogout(); + } + }, [isLoggedOutCookie, oAuthLogout, isOAuth2Enabled, client?.is_logged_in]); const activeAccount = useMemo( () => accountList?.find(account => account.loginid === activeLoginid), diff --git a/src/app/app-content.jsx b/src/app/app-content.jsx index 9e06dfc3..7ee6111e 100644 --- a/src/app/app-content.jsx +++ b/src/app/app-content.jsx @@ -112,13 +112,12 @@ const AppContent = observer(() => { }, [client.is_options_blocked, client.account_settings?.country_code, client.clients_country]); const init = () => { - // TODO: TBD - // import('@/utils/gtm').then(({ default: GTM }) => { - // GTM.init(); - // }); ServerTime.init(common); app.setDBotEngineStores(); ApiHelpers.setInstance(app.api_helpers_store); + import('@/utils/gtm').then(({ default: GTM }) => { + GTM.init(store); + }); }; const changeActiveSymbolLoadingState = () => { diff --git a/src/utils/gtm.ts b/src/utils/gtm.ts index 1a3291a0..b50b7dd5 100644 --- a/src/utils/gtm.ts +++ b/src/utils/gtm.ts @@ -1,12 +1,19 @@ +import { reaction } from 'mobx'; import { TStatistics } from '@/components/transaction-details/transaction-details.types'; +import RootStore from '@/stores/root-store'; import { ProposalOpenContract } from '@deriv/api-types'; const GTM = (() => { + let timeoutId: NodeJS.Timeout; + let initialized = false; const pushDataLayer = (data: { [key: string]: string | number | boolean; event: string }): void => { window.dataLayer?.push(data); }; - const init = () => { + const init = (_root_store: RootStore): void => { + if (initialized) return; + initialized = true; + function loadGTM() { (function (w, d, s, l, i) { w[l] = w[l] || []; @@ -22,7 +29,30 @@ const GTM = (() => { f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-NF7884S'); } - loadGTM(); + + setTimeout(() => { + loadGTM(); + }, 3000); + + try { + const { run_panel, transactions, client, common } = _root_store; + reaction( + () => run_panel.is_running, + (() => { + return () => { + if (run_panel.is_running) { + clearTimeout(timeoutId); + timeoutId = setTimeout(() => { + onRunBot(client?.loginid, common?.server_time?.unix(), transactions?.statistics); + }, 500); + } + }; + })() + ); + } catch (error) { + // eslint-disable-next-line no-console + console.warn('Error initializing GTM reactions ', error); + } }; const onRunBot = (login_id: string, server_time: number, statistics: TStatistics): void => { From a4f4e8f93dabfb454f658a6ee388e18d2efa21d1 Mon Sep 17 00:00:00 2001 From: shafin-deriv Date: Fri, 6 Dec 2024 14:41:10 +0800 Subject: [PATCH 2/3] chore: delay in gdrive script --- src/stores/google-drive-store.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/stores/google-drive-store.ts b/src/stores/google-drive-store.ts index aefea347..f5bf65bc 100644 --- a/src/stores/google-drive-store.ts +++ b/src/stores/google-drive-store.ts @@ -64,8 +64,10 @@ export default class GoogleDriveStore { this.setKey(); this.client = null; this.access_token = localStorage.getItem('google_access_token') ?? ''; - importExternal('https://accounts.google.com/gsi/client').then(() => this.initialiseClient()); - importExternal('https://apis.google.com/js/api.js').then(() => this.initialise()); + setTimeout(() => { + importExternal('https://accounts.google.com/gsi/client').then(() => this.initialiseClient()); + importExternal('https://apis.google.com/js/api.js').then(() => this.initialise()); + }, 3000); } is_google_drive_token_valid = true; From 550b0e9d1f997d3f9f5969dd851d8d849cf970c6 Mon Sep 17 00:00:00 2001 From: shafin-deriv Date: Fri, 6 Dec 2024 16:48:26 +0800 Subject: [PATCH 3/3] chore: remove notification icon --- src/components/layout/header/header.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/layout/header/header.tsx b/src/components/layout/header/header.tsx index 44d1b373..eb22cbb7 100644 --- a/src/components/layout/header/header.tsx +++ b/src/components/layout/header/header.tsx @@ -14,7 +14,6 @@ import { Tooltip } from '@deriv-com/ui'; import { AppLogo } from '../app-logo'; import AccountsInfoLoader from './account-info-loader'; import AccountSwitcher from './account-switcher'; -import CustomNotifications from './custom-notifications'; import MenuItems from './menu-items'; import MobileMenu from './mobile-menu'; import PlatformSwitcher from './platform-switcher'; @@ -39,7 +38,7 @@ const AppHeader = observer(() => { } else if (activeLoginid) { return ( <> - + {/* */} {isDesktop && (