diff --git a/packages/bot-web-ui/src/app/app-content.jsx b/packages/bot-web-ui/src/app/app-content.jsx index 6cd36bfe3309..7f9d02857550 100644 --- 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 index 5be3bcda0aff..f82ee3cf7a98 100644 --- 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 b/packages/core/src/Utils/Hotjar/index.ts similarity index 51% rename from packages/bot-web-ui/src/utils/hotjar.js rename to packages/core/src/Utils/Hotjar/index.ts index d388f017eaf8..0bdb3bbc8498 100644 --- a/packages/bot-web-ui/src/utils/hotjar.js +++ b/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 index 096193d5e903..2355d14b560c 100644 --- 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 index 56844f2a1112..4bdc35cdbc13 100644 --- 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 index 43072269f195..cdb1ae82b0ef 100644 --- a/packages/stores/types.ts +++ b/packages/stores/types.ts @@ -508,6 +508,7 @@ type TClientStore = { payload: SetFinancialAssessmentRequest ) => Promise; prev_account_type: string; + account_open_date: number | undefined; is_beta_chart: boolean; };