Merge pull request #179 from shafin-deriv/shafin/BOT-2477/chore-integ…

…rate-gtm chore: integrate gtm and add delay on loading scripts
deriv-com · Dec 6, 2024 · 4d23f92 · 4d23f92
2 parents 4d7f24a + 550b0e9
commit 4d23f92
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -10,7 +10,6 @@
                 font-size: 62.5%;
             }
         </style>
-        <script src="/cdn-cgi/zaraz/i.js" referrerpolicy="origin"></script>
     </head>
 
     <body class="body theme theme--light">
@@ -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
@@ -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
@@ -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/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 (
                 <>
-                    <CustomNotifications />
+                    {/* <CustomNotifications /> */}
                     {isDesktop && (
                         <Tooltip
                             as='a'

diff --git 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;

diff --git 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 => {