From 828084579b04fd6c333989416463deef586300a3 Mon Sep 17 00:00:00 2001
From: adrienne-deriv <103016120+adrienne-deriv@users.noreply.github.com>
Date: Thu, 20 Jul 2023 13:23:04 +0800
Subject: [PATCH] Adrienne / fix an issue where pages are not tracked in
 rudderstack page view (#9384)

* fix: fix an issue where pages are not tracked in rudderstack page view

* chore: refactored code based on reviews

* chore: refactored code based on reviews

* chore: refactor test cases

* chore: fix error message user_id is undefined

---------

Co-authored-by: yashim-deriv <yashim@deriv.com>
---
 .../src/__tests__/rudderstack.spec.tsx        |  2 +-
 packages/analytics/src/rudderstack.ts         | 17 +++++++------
 .../App/Containers/Layout/app-contents.jsx    | 24 +++++++++++--------
 3 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/packages/analytics/src/__tests__/rudderstack.spec.tsx b/packages/analytics/src/__tests__/rudderstack.spec.tsx
index 5c25fa0d6e80..83a4220e993d 100644
--- a/packages/analytics/src/__tests__/rudderstack.spec.tsx
+++ b/packages/analytics/src/__tests__/rudderstack.spec.tsx
@@ -17,7 +17,7 @@ describe('rudderstack', () => {
     beforeAll(() => {
         process.env = {
             ...originalEnv,
-            CIRCLE_JOB: 'release_staging',
+            NODE_ENV: 'staging',
             RUDDERSTACK_PRODUCTION_KEY: '123456789',
             RUDDERSTACK_STAGING_KEY: '123456789',
             RUDDERSTACK_URL: 'http://example.com',
diff --git a/packages/analytics/src/rudderstack.ts b/packages/analytics/src/rudderstack.ts
index 45c9c5fbceea..bd15ac8546c8 100644
--- a/packages/analytics/src/rudderstack.ts
+++ b/packages/analytics/src/rudderstack.ts
@@ -105,17 +105,16 @@ export class RudderStack {
     }
 
     init() {
-        const isProduction = process.env.CIRCLE_JOB === 'release_production';
-        const isStaging = process.env.CIRCLE_JOB === 'release_staging';
-
-        let RUDDERSTACK_KEY;
-        if (isProduction) {
-            RUDDERSTACK_KEY = process.env.RUDDERSTACK_PRODUCTION_KEY;
-        } else if (isStaging) {
-            RUDDERSTACK_KEY = process.env.RUDDERSTACK_STAGING_KEY;
-        }
+        const is_production = process.env.NODE_ENV === 'production';
+        const is_staging = process.env.NODE_ENV === 'staging';
+
+        if (!is_production && !is_staging) return;
 
+        const RUDDERSTACK_KEY = is_production
+            ? process.env.RUDDERSTACK_PRODUCTION_KEY
+            : process.env.RUDDERSTACK_STAGING_KEY;
         const RUDDERSTACK_URL = process.env.RUDDERSTACK_URL;
+
         if (RUDDERSTACK_KEY && RUDDERSTACK_URL) {
             RudderAnalytics.load(RUDDERSTACK_KEY, RUDDERSTACK_URL);
             RudderAnalytics.ready(() => {
diff --git a/packages/core/src/App/Containers/Layout/app-contents.jsx b/packages/core/src/App/Containers/Layout/app-contents.jsx
index 3c3115b97177..c21ae4520140 100644
--- a/packages/core/src/App/Containers/Layout/app-contents.jsx
+++ b/packages/core/src/App/Containers/Layout/app-contents.jsx
@@ -8,7 +8,6 @@ import { CookieStorage, isMobile, TRACKING_STATUS_KEY, PlatformContext, platform
 import { RudderStack } from '@deriv/analytics';
 import { connect } from 'Stores/connect';
 import CookieBanner from '../../Components/Elements/CookieBanner/cookie-banner.jsx';
-import { useStore } from '@deriv/stores';
 import { getLanguage } from '@deriv/translations';
 
 const tracking_status_cookie = new CookieStorage(TRACKING_STATUS_KEY);
@@ -32,28 +31,33 @@ const AppContents = ({
     const [show_cookie_banner, setShowCookieBanner] = React.useState(false);
     const [is_gtm_tracking, setIsGtmTracking] = React.useState(false);
     const { is_appstore } = React.useContext(PlatformContext);
-    const {
-        client: { user_id },
-    } = useStore();
 
     const tracking_status = tracking_status_cookie.get(TRACKING_STATUS_KEY);
 
     const scroll_ref = React.useRef(null);
 
+    const current_page = window.location.hostname + window.location.pathname;
+
     React.useEffect(() => {
         // rudderstack page view trigger
-        WS.wait('authorize').then(() => {
-            RudderStack.identifyEvent(user_id, {
-                language: getLanguage().toLowerCase() || 'en',
-            });
-            const current_page = window.location.hostname + window.location.pathname;
-            RudderStack.pageView(current_page);
+        WS.wait('authorize').then(response => {
+            if (response.error) return;
+            const user_id = response.authorize?.user_id;
+
+            if (is_logged_in && user_id) {
+                RudderStack.identifyEvent(user_id, {
+                    language: getLanguage().toLowerCase() || 'en',
+                });
+                RudderStack.pageView(current_page);
+            }
         });
 
         if (scroll_ref.current) setAppContentsScrollRef(scroll_ref);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    RudderStack.pageView(current_page);
+
     React.useEffect(() => {
         const allow_tracking = !is_eu_country || tracking_status === 'accepted';
         if (allow_tracking && !is_gtm_tracking) {