Bala/Add hotjar to core (deriv-com#11134)

* feat: add hotjar to core * refactor: move initHotjar call to app.jsx * fix: mockstore * chore: add domain restriction
heorhi-deriv · Nov 3, 2023 · 7fd646f · 7fd646f
1 parent 5fc0be2
commit 7fd646f
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 14 deletions.
diff --git a/packages/bot-web-ui/src/app/app-content.jsx b/packages/bot-web-ui/src/app/app-content.jsx
@@ -6,7 +6,6 @@ import BotBuilder from 'Components/dashboard/bot-builder';
 import BotStopped from 'Components/dashboard/bot-stopped';
 import TransactionDetailsModal from 'Components/transaction-details';
 import GTM from 'Utils/gtm';
-import hotjar from 'Utils/hotjar';
 import { useDBotStore } from 'Stores/useDBotStore';
 import { Audio, BotNotificationMessages, Dashboard, NetworkToastPopup, RoutePromptDialog } from '../components';
 import BlocklyLoading from '../components/blockly-loading';
@@ -64,10 +63,6 @@ const AppContent = observer(() => {
         setColors(is_dark_mode_on);
     }, [is_dark_mode_on]);
 
-    React.useEffect(() => {
-        hotjar(client);
-    }, []);
-
     React.useEffect(() => {
         showDigitalOptionsMaltainvestError(client, common);
         // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/packages/core/src/App/app.jsx b/packages/core/src/App/app.jsx
@@ -21,6 +21,7 @@ import { FORM_ERROR_MESSAGES } from '../Constants/form-error-messages';
 import AppContent from './AppContent';
 import 'Sass/app.scss';
 import { Analytics } from '@deriv/analytics';
+import initHotjar from '../Utils/Hotjar';
 
 const AppWithoutTranslation = ({ root_store }) => {
     const l = window.location;
@@ -75,6 +76,10 @@ const AppWithoutTranslation = ({ root_store }) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    React.useEffect(() => {
+        initHotjar(root_store.client);
+    }, []);
+
     const platform_passthrough = {
         root_store,
         WS,

diff --git a/packages/bot-web-ui/src/utils/hotjar.js → packages/core/src/Utils/Hotjar/index.ts b/packages/bot-web-ui/src/utils/hotjar.js → packages/core/src/Utils/Hotjar/index.ts
@@ -1,10 +1,16 @@
 import { epochToMoment, toMoment } from '@deriv/shared';
+import { TCoreStores } from '@deriv/stores/types';
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+const initHotjar = (client: TCoreStores['client']) => {
+    // To initialize only on licensed domains.
+    if (!isProduction) return;
 
-const hotjar = client => {
     /**
-     * Inject: External Script Hotjar - for DBot only
+     * Inject: External Script - Hotjar
      */
-    (function (h, o, t, j) {
+    (function (h: any, o, t, j) {
         /* eslint-disable */
         h.hj =
             h.hj ||
@@ -15,20 +21,24 @@ const hotjar = client => {
         h._hjSettings = { hjid: 3050531, hjsv: 6 };
         const a = o.getElementsByTagName('head')[0];
         const r = o.createElement('script');
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        //@ts-ignore
         r.async = 1;
         r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
         a.appendChild(r);
 
         // Hotjar attribution code for user segmentation
-        const user_id = client?.loginid;
+        const user_id = client.loginid;
         const account_type = client.is_virtual ? 'Demo' : 'Real';
-        const account_open_date = epochToMoment(client.account_open_date);
+        const account_open_date = client.account_open_date ? epochToMoment(client.account_open_date) : undefined;
 
-        window.hj('identify', user_id, {
-            'Account created': toMoment(account_open_date).format('YYYY-MM-DD'),
+        (window as any).hj('identify', user_id, {
+            'Account created': account_open_date ? toMoment(account_open_date).format('YYYY-MM-DD') : '',
             'Account type': account_type,
             'User country': client.clients_country,
+            'Beta chart': client.is_beta_chart,
         });
     })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
 };
-export default hotjar;
+
+export default initHotjar;
diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json
@@ -11,7 +11,7 @@
             "Services/*": ["src/Services/*"],
             "Stores/*": ["src/Stores/*"],
             "Templates/*": ["src/templates/*"],
-            "Utils/*": ["src/utils/*"],
+            "Utils/*": ["src/Utils/*"],
             "@deriv/*": ["../*/src"]
         },
         "outDir": "./dist",

diff --git a/packages/stores/src/mockStore.ts b/packages/stores/src/mockStore.ts
@@ -278,6 +278,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             init: jest.fn(),
             setLoginId: jest.fn(),
             resetLocalStorageValues: jest.fn(),
+            account_open_date: undefined,
         },
         common: {
             error: common_store_error,

diff --git a/packages/stores/types.ts b/packages/stores/types.ts
@@ -508,6 +508,7 @@ type TClientStore = {
         payload: SetFinancialAssessmentRequest
     ) => Promise<SetFinancialAssessmentResponse>;
     prev_account_type: string;
+    account_open_date: number | undefined;
     is_beta_chart: boolean;
 };