From 05d797839c38440e11cb0be74c45f97fe27b15ba Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Wed, 30 Oct 2024 13:56:14 +0800
Subject: [PATCH 01/19] feat: growthbook hooks added

---
 .../app/hooks/useGrowthbookGetFeatureValue.js | 35 +++++++++++++++++++
 .../app/hooks/useIsGrowthbookLoaded.js        | 29 +++++++++++++++
 2 files changed, 64 insertions(+)
 create mode 100644 src/javascript/app/hooks/useGrowthbookGetFeatureValue.js
 create mode 100644 src/javascript/app/hooks/useIsGrowthbookLoaded.js

diff --git a/src/javascript/app/hooks/useGrowthbookGetFeatureValue.js b/src/javascript/app/hooks/useGrowthbookGetFeatureValue.js
new file mode 100644
index 00000000000..c5fa68ce1f4
--- /dev/null
+++ b/src/javascript/app/hooks/useGrowthbookGetFeatureValue.js
@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+import { Analytics } from '@deriv-com/analytics';
+import useIsGrowthbookIsLoaded from './useIsGrowthbookLoaded';
+
+const useGrowthbookGetFeatureValue = ({
+    defaultValue,
+    featureFlag,
+}) => {
+    const resolvedDefaultValue = defaultValue !== undefined ? defaultValue : false;
+    const [featureFlagValue, setFeatureFlagValue] = useState(
+        (Analytics?.getFeatureValue(featureFlag, resolvedDefaultValue) ?? resolvedDefaultValue)
+    );
+    const isGBLoaded = useIsGrowthbookIsLoaded();
+
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            window.Analytics = Analytics;
+        }
+
+        if (isGBLoaded) {
+            if (Analytics?.getInstances()?.ab) {
+                const setFeatureValue = () => {
+                    const value = Analytics?.getFeatureValue(featureFlag, resolvedDefaultValue);
+                    setFeatureFlagValue(value);
+                };
+                setFeatureValue();
+                Analytics?.getInstances()?.ab?.GrowthBook?.setRenderer(() => {
+                    setFeatureValue();
+                });
+            }
+        }
+    }, [isGBLoaded, resolvedDefaultValue, featureFlag]);
+    return [featureFlagValue, isGBLoaded];
+};
+export default useGrowthbookGetFeatureValue;
diff --git a/src/javascript/app/hooks/useIsGrowthbookLoaded.js b/src/javascript/app/hooks/useIsGrowthbookLoaded.js
new file mode 100644
index 00000000000..ae419508bee
--- /dev/null
+++ b/src/javascript/app/hooks/useIsGrowthbookLoaded.js
@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import { Analytics } from '@deriv-com/analytics';
+
+const useIsGrowthbookIsLoaded = () => {
+    const [isGBLoaded, setIsGBLoaded] = useState(false);
+
+    useEffect(() => {
+        let checksCounter = 0;
+        const analyticsInterval = setInterval(() => {
+            if (checksCounter > 20) {
+                clearInterval(analyticsInterval);
+                return;
+            }
+            checksCounter += 1;
+            if (Analytics?.getInstances()?.ab) {
+                setIsGBLoaded(true);
+                clearInterval(analyticsInterval);
+            }
+        }, 500);
+
+        return () => {
+            clearInterval(analyticsInterval);
+        };
+    }, []);
+
+    return isGBLoaded;
+};
+
+export default useIsGrowthbookIsLoaded;

From 7309a0a69d8e490e564b18dfe0fdddcde76212bf Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Wed, 30 Oct 2024 15:44:02 +0800
Subject: [PATCH 02/19] chore: open chat funtions

---
 src/javascript/_common/utility.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/javascript/_common/utility.js b/src/javascript/_common/utility.js
index c572a061536..09afda60325 100644
--- a/src/javascript/_common/utility.js
+++ b/src/javascript/_common/utility.js
@@ -289,6 +289,28 @@ class PromiseClass {
 const lc_licenseID = 12049137;
 const lc_clientID = '66aa088aad5a414484c1fd1fa8a5ace7';
 
+const openChat = () => {
+    if (window.isFreshChat && window.fcWidget) {
+        window.fcWidget.open();
+    } else {
+        window.LC_API.open_chat_window();
+    }
+};
+
+const openChatWithParam = () => {
+    const interval = setInterval(() => {
+        if (window.isFreshChat && window.fcWidget) {
+            window.fcWidget.open();
+            clearInterval(interval);
+        } else if (window.LiveChatWidget) {
+            window.LiveChatWidget.on('ready', () => {
+                window.LC_API.open_chat_window();
+            });
+            clearInterval(interval);
+        }
+    }, 500);
+};
+
 module.exports = {
     showLoadingImage,
     getHighestZIndex,
@@ -314,4 +336,6 @@ module.exports = {
     getHostname,
     lc_licenseID,
     lc_clientID,
+    openChat,
+    openChatWithParam,
 };

From 94ced9783cae135626cfcbe16c497f7ad900a1d6 Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Wed, 30 Oct 2024 15:44:52 +0800
Subject: [PATCH 03/19] chore: remove unused function

---
 src/javascript/_common/base/livechat.js | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/src/javascript/_common/base/livechat.js b/src/javascript/_common/base/livechat.js
index f80078bf6b9..62c90d2cff1 100644
--- a/src/javascript/_common/base/livechat.js
+++ b/src/javascript/_common/base/livechat.js
@@ -71,21 +71,6 @@ const LiveChat = (() => {
         }
     };
 
-    // Fallback LiveChat icon
-    const livechatFallback = () => {
-        let livechat_shell;
-        const livechat_id = 'gtm-deriv-livechat';
-    
-        if (window.LiveChatWidget){
-            window.LiveChatWidget.on('ready', () => {
-                livechat_shell = document.getElementById(livechat_id);
-                livechat_shell.style.display = 'flex';
-                livechat_shell.addEventListener('click', () => window.LC_API.open_chat_window());
-            });
-        }
-        
-    };
-
     // Delete existing LiveChat instance when there is no chat running
     const livechatDeletion = () => new Promise ((resolve) => {
         if (window.LiveChatWidget){
@@ -124,7 +109,6 @@ const LiveChat = (() => {
     return {
         initialize,
         livechatDeletion,
-        livechatFallback,
         liveChatInitialization,
         rerouteGroup,
     };

From eda6823b5fa6e7a93a07d142f9a06a92ef4800ed Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Wed, 30 Oct 2024 15:45:58 +0800
Subject: [PATCH 04/19] fix: freshchat integrated

---
 src/javascript/app/hooks/use-freshChat.js | 47 ++++++++++++++++++++++
 src/javascript/app/pages/livechat.jsx     | 49 +++++++++++++++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 src/javascript/app/hooks/use-freshChat.js
 create mode 100644 src/javascript/app/pages/livechat.jsx

diff --git a/src/javascript/app/hooks/use-freshChat.js b/src/javascript/app/hooks/use-freshChat.js
new file mode 100644
index 00000000000..43185b2d593
--- /dev/null
+++ b/src/javascript/app/hooks/use-freshChat.js
@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+import { useScript } from 'usehooks-ts';
+import useGrowthbookGetFeatureValue from './useGrowthbookGetFeatureValue';
+
+const useFreshChat = (token) => {
+    const scriptStatus = useScript(
+        'https://static.deriv.com/scripts/freshchat.js'
+    );
+    const [isReady, setIsReady] = useState(false);
+    const [isFreshChatEnabled] = useGrowthbookGetFeatureValue({
+        featureFlag: 'enable_freshworks_live_chat',
+    });
+
+    useEffect(() => {
+        const checkFcWidget = (intervalId) => {
+            if (typeof window !== 'undefined') {
+                if (window.fcWidget?.isInitialized() === true && !isReady) {
+                    setIsReady(true);
+                    clearInterval(intervalId);
+                }
+            }
+        };
+
+        const initFreshChat = () => {
+            if (scriptStatus === 'ready' && window.FreshChat && window.fcSettings) {
+                window.FreshChat.initialize({
+                    token,
+                    hideButton: true,
+                });
+
+                const intervalId = setInterval(() => checkFcWidget(intervalId), 500);
+
+                return () => clearInterval(intervalId);
+            }
+            return null;
+        };
+
+        if (isFreshChatEnabled) initFreshChat();
+    }, [isFreshChatEnabled, isReady, scriptStatus, token]);
+
+    return {
+        isReady,
+        widget: window.fcWidget,
+    };
+};
+
+export default useFreshChat;
diff --git a/src/javascript/app/pages/livechat.jsx b/src/javascript/app/pages/livechat.jsx
new file mode 100644
index 00000000000..13c7649d3d7
--- /dev/null
+++ b/src/javascript/app/pages/livechat.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import useFreshChat from '../hooks/use-freshChat';
+import useGrowthbookGetFeatureValue from '../hooks/useGrowthbookGetFeatureValue';
+
+const LiveChat = () => {
+
+    const loginid      = localStorage.getItem('active_loginid');
+    const client_info  = loginid && JSON.parse(localStorage.getItem('client.accounts') || '{}')[loginid];
+    const token        = client_info ? client_info.token : null;
+
+    const [isFreshChatEnabled, isGBLoaded] = useGrowthbookGetFeatureValue({
+        featureFlag: 'enable_freshworks_live_chat',
+    });
+    console.log('is_freshchat', isFreshChatEnabled);
+    console.log('isGBLoaded', isGBLoaded);
+
+    const freshChat =  useFreshChat(token);
+
+    if (isFreshChatEnabled && freshChat.isReady) {
+        window.isFreshChat = true;
+    } else {
+        window.isFreshChat = false;
+    }
+
+    return (
+        <React.Fragment>
+            {!isFreshChatEnabled && <script
+                dangerouslySetInnerHTML={{
+                    __html: `
+                        window.__lc = window.__lc || {};
+                        window.__lc.license = 12049137;
+                        ;(function(n,t,c){function i(n){return e._h?e._h.apply(null,n):e._q.push(n)}var e={_q:[],_h:null,_v:"2.0",on:function(){i(["on",c.call(arguments)])},once:function(){i(["once",c.call(arguments)])},off:function(){i(["off",c.call(arguments)])},get:function(){if(!e._h)throw new Error("[LiveChatWidget] You can’t use getters before load.");return i(["get",c.call(arguments)])},call:function(){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)}};!n.__lc.asyncInit&&e.init(),n.LiveChatWidget=n.LiveChatWidget||e}(window,document,[].slice))
+                    `,
+                }}
+                defer
+            />}
+            <div id='livechat'>
+                <img id='livechat__logo' />
+            </div>
+        </React.Fragment>
+    );
+};
+
+export const init = () => {
+    ReactDOM.render(<LiveChat />, document.getElementById('deriv_livechat'));
+};
+
+export default init;

From 870dcb7b7bf1b0c21397959d98deb2230e5aedb0 Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Wed, 30 Oct 2024 15:46:33 +0800
Subject: [PATCH 05/19] fix: freshchat integrated

---
 src/javascript/app/base/header.js        | 9 +++++++--
 src/javascript/app/base/page.js          | 8 +++-----
 src/sass/_common/header.scss             | 2 +-
 src/templates/_common/_layout/layout.jsx | 3 +--
 4 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/javascript/app/base/header.js b/src/javascript/app/base/header.js
index b652e1484e0..108f25752a4 100644
--- a/src/javascript/app/base/header.js
+++ b/src/javascript/app/base/header.js
@@ -25,6 +25,8 @@ const Language                 = require('../../_common/language');
 const mapCurrencyName          = require('../../_common/base/currency_base').mapCurrencyName;
 const isEuCountry              = require('../common/country_base').isEuCountry;
 const DerivIFrame              = require('../pages/deriv_iframe.jsx');
+const DerivLiveChat            = require('../pages/livechat.jsx');
+const openChat                 = require('../../_common/utility.js').openChat;
 
 const header_icon_base_path = '/images/pages/header/';
 const wallet_header_icon_base_path = '/images/pages/header/wallets/';
@@ -43,6 +45,7 @@ const Header = (() => {
 
     const onLoad = () => {
         DerivIFrame.init();
+        if (document.getElementById('deriv_livechat')) DerivLiveChat.init();
         populateAccountsList();
         populateWalletAccounts();
         bindSvg();
@@ -326,7 +329,7 @@ const Header = (() => {
 
         hamburger_menu.addEventListener('click', () => showMobileMenu(true));
         mobile_menu_close.addEventListener('click', () => showMobileMenu(false));
-        mobile_menu_livechat.addEventListener('click', () => {window.LC_API.open_chat_window();});
+        mobile_menu_livechat.addEventListener('click', () => {openChat();});
 
         // Mobile Menu Livechat Icon
         mobile_menu__livechat_logo.src = Url.urlForStatic(`images/common/livechat.svg?${process.env.BUILD_HASH}`);
@@ -544,7 +547,9 @@ const Header = (() => {
 
         // Livechat Launcher
         const livechat = getElementById('livechat');
-        livechat.addEventListener('click', () => {window.LC_API.open_chat_window();});
+        livechat.addEventListener('click', () => {
+            openChat();
+        });
 
         // Language Popup.
         const current_language = Language.get();
diff --git a/src/javascript/app/base/page.js b/src/javascript/app/base/page.js
index dd2d4489820..9b9d7282427 100644
--- a/src/javascript/app/base/page.js
+++ b/src/javascript/app/base/page.js
@@ -22,6 +22,7 @@ const scrollToTop      = require('../../_common/scroll').scrollToTop;
 const toISOFormat      = require('../../_common/string_util').toISOFormat;
 const Url              = require('../../_common/url');
 const Analytics        = require('../../_common/analytics');
+const { openChatWithParam } = require('../../_common/utility');
 const createElement    = require('../../_common/utility').createElement;
 const isLoginPages     = require('../../_common/utility').isLoginPages;
 const isProduction     = require('../../config').isProduction;
@@ -109,11 +110,8 @@ const Page = (() => {
 
                 // Handle opening livechat via URL
                 const is_livechat_open = url_query_strings.is_livechat_open === 'true';
-
-                if (is_livechat_open && window.LiveChatWidget) {
-                    window.LiveChatWidget.on('ready', () => {
-                        window.LC_API.open_chat_window();
-                    });
+                if (is_livechat_open) {
+                    openChatWithParam();
                 }
             }
             Header.onLoad();
diff --git a/src/sass/_common/header.scss b/src/sass/_common/header.scss
index 2852472fc5b..81813045661 100644
--- a/src/sass/_common/header.scss
+++ b/src/sass/_common/header.scss
@@ -156,7 +156,7 @@ body .topbar {
     }
 }
 
-#livechat, #topbar-whatsapp {
+#livechat, #topbar-whatsapp, #deriv_livechat {
     cursor: pointer;
     height: inherit;
 
diff --git a/src/templates/_common/_layout/layout.jsx b/src/templates/_common/_layout/layout.jsx
index 57985c8e35c..3b03c6a9b25 100644
--- a/src/templates/_common/_layout/layout.jsx
+++ b/src/templates/_common/_layout/layout.jsx
@@ -5,7 +5,6 @@ import Header from './header.jsx';
 import WalletHeader from './wallet-header.jsx';
 // import Elevio from '../includes/elevio.jsx';
 import Gtm from '../includes/gtm.jsx';
-import LiveChat from '../includes/livechat.jsx';
 import LanguageMenuModal from '../components/language-menu-modal.jsx';
 
 const CONTENT_PLACEHOLDER = 'CONTENT_PLACEHOLDER';
@@ -44,7 +43,7 @@ const Topbar = () => (
             <div id='topbar-whatsapp'>
                 <img src={it.url_for('images/pages/footer/ic-whatsapp.svg')} />
             </div>
-            <LiveChat />
+            <div id='deriv_livechat' />
             <div id='topbar-help-centre'>
                 <img src={it.url_for('images/pages/footer/ic-help-centre.svg')} />
             </div>

From 446d03718c47bfad2ebbc4fb866feca5130e7a6d Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Wed, 30 Oct 2024 16:47:57 +0800
Subject: [PATCH 06/19] fix: conditionally load livechat

---
 src/javascript/_common/base/livechat.js | 11 +++++++----
 src/javascript/_common/utility.js       |  4 ++--
 src/javascript/app/pages/livechat.jsx   |  8 +-------
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/javascript/_common/base/livechat.js b/src/javascript/_common/base/livechat.js
index 62c90d2cff1..ecc9185cfc0 100644
--- a/src/javascript/_common/base/livechat.js
+++ b/src/javascript/_common/base/livechat.js
@@ -99,11 +99,14 @@ const LiveChat = (() => {
 
     // Reroute group
     const rerouteGroup = () => {
-        LiveChat.livechatDeletion().then(() => {
-            LiveChat.liveChatInitialization().then(() => {
-                LiveChat.initialize();
+        
+        if (!window.fcWidget) {
+            LiveChat.livechatDeletion().then(() => {
+                LiveChat.liveChatInitialization().then(() => {
+                    LiveChat.initialize();
+                });
             });
-        });
+        }
     };
 
     return {
diff --git a/src/javascript/_common/utility.js b/src/javascript/_common/utility.js
index 09afda60325..20b0bf28bd3 100644
--- a/src/javascript/_common/utility.js
+++ b/src/javascript/_common/utility.js
@@ -290,7 +290,7 @@ const lc_licenseID = 12049137;
 const lc_clientID = '66aa088aad5a414484c1fd1fa8a5ace7';
 
 const openChat = () => {
-    if (window.isFreshChat && window.fcWidget) {
+    if (window.fcWidget) {
         window.fcWidget.open();
     } else {
         window.LC_API.open_chat_window();
@@ -299,7 +299,7 @@ const openChat = () => {
 
 const openChatWithParam = () => {
     const interval = setInterval(() => {
-        if (window.isFreshChat && window.fcWidget) {
+        if (window.fcWidget) {
             window.fcWidget.open();
             clearInterval(interval);
         } else if (window.LiveChatWidget) {
diff --git a/src/javascript/app/pages/livechat.jsx b/src/javascript/app/pages/livechat.jsx
index 13c7649d3d7..bfb8c7fc7ca 100644
--- a/src/javascript/app/pages/livechat.jsx
+++ b/src/javascript/app/pages/livechat.jsx
@@ -15,13 +15,7 @@ const LiveChat = () => {
     console.log('is_freshchat', isFreshChatEnabled);
     console.log('isGBLoaded', isGBLoaded);
 
-    const freshChat =  useFreshChat(token);
-
-    if (isFreshChatEnabled && freshChat.isReady) {
-        window.isFreshChat = true;
-    } else {
-        window.isFreshChat = false;
-    }
+    useFreshChat(token);
 
     return (
         <React.Fragment>

From 0db70343d7cf9271cbfd1be17d9bb50ecd3177c0 Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Wed, 30 Oct 2024 17:11:15 +0800
Subject: [PATCH 07/19] chore: url attribute to growthbook

---
 src/javascript/_common/analytics.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/javascript/_common/analytics.js b/src/javascript/_common/analytics.js
index 9cc8055729e..b85d528e90e 100644
--- a/src/javascript/_common/analytics.js
+++ b/src/javascript/_common/analytics.js
@@ -4,8 +4,13 @@ const Analytics = (() => {
     const init = () => {
         if (process.env.RUDDERSTACK_KEY && process.env.GROWTHBOOK_CLIENT_KEY) {
             DerivAnalytics.Analytics.initialise({
-                growthbookKey : process.env.GROWTHBOOK_CLIENT_KEY, // optional key to enable A/B tests
-                rudderstackKey: process.env.RUDDERSTACK_KEY,
+                growthbookKey    : process.env.GROWTHBOOK_CLIENT_KEY, // optional key to enable A/B tests
+                rudderstackKey   : process.env.RUDDERSTACK_KEY,
+                growthbookOptions: {
+                    attributes: {
+                        url: window.location.href,
+                    },
+                },
             });
         }
     };

From 6b26f10c92d5e09b9f2366f2619c6fe9db1d8955 Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Wed, 30 Oct 2024 17:15:30 +0800
Subject: [PATCH 08/19] fix: remove console

---
 src/javascript/app/pages/livechat.jsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/javascript/app/pages/livechat.jsx b/src/javascript/app/pages/livechat.jsx
index bfb8c7fc7ca..5630e0aab4a 100644
--- a/src/javascript/app/pages/livechat.jsx
+++ b/src/javascript/app/pages/livechat.jsx
@@ -9,12 +9,9 @@ const LiveChat = () => {
     const client_info  = loginid && JSON.parse(localStorage.getItem('client.accounts') || '{}')[loginid];
     const token        = client_info ? client_info.token : null;
 
-    const [isFreshChatEnabled, isGBLoaded] = useGrowthbookGetFeatureValue({
+    const [isFreshChatEnabled] = useGrowthbookGetFeatureValue({
         featureFlag: 'enable_freshworks_live_chat',
     });
-    console.log('is_freshchat', isFreshChatEnabled);
-    console.log('isGBLoaded', isGBLoaded);
-
     useFreshChat(token);
 
     return (

From 1d423e90c63deb3d421f7e782efb6ae9778c0aa8 Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Mon, 4 Nov 2024 15:17:25 +0800
Subject: [PATCH 09/19] fix: condition to check livechatWidget

---
 src/javascript/_common/base/livechat.js   | 18 +++++++++---------
 src/javascript/_common/utility.js         |  2 +-
 src/javascript/app/base/client.js         | 10 +++++-----
 src/javascript/app/hooks/use-freshChat.js |  4 +---
 src/javascript/app/pages/livechat.jsx     |  2 +-
 5 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/javascript/_common/base/livechat.js b/src/javascript/_common/base/livechat.js
index ecc9185cfc0..1031ffbaf20 100644
--- a/src/javascript/_common/base/livechat.js
+++ b/src/javascript/_common/base/livechat.js
@@ -30,12 +30,12 @@ const LiveChat = (() => {
             ...utm_campaign && { utm_campaign },
             ...utm_medium && { utm_medium },
         };
-        window.LiveChatWidget.call('set_session_variables', session_variables);
+        window.LiveChatWidget?.call('set_session_variables', session_variables);
     };
 
     const setNameEmail = () => {
-        if (client_email) window.LiveChatWidget.call('set_customer_email', client_email);
-        if (first_name && last_name) window.LiveChatWidget.call('set_customer_name', `${first_name} ${last_name}`);
+        if (client_email) window.LiveChatWidget?.call('set_customer_email', client_email);
+        if (first_name && last_name) window.LiveChatWidget?.call('set_customer_name', `${first_name} ${last_name}`);
     };
 
     BinarySocket.wait('get_settings').then((response) => {
@@ -55,12 +55,12 @@ const LiveChat = (() => {
 
     const initialize = () => {
         if (window.LiveChatWidget) {
-            window.LiveChatWidget.on('ready', () => {
+            window.LiveChatWidget?.on('ready', () => {
                 setSessionVariables();
                 if (!ClientBase.isLoggedIn()){
                     window.LC_API.on_chat_ended = () => {
-                        window.LiveChatWidget.call('set_customer_email', ' ');
-                        window.LiveChatWidget.call('set_customer_name', ' ');
+                        window.LiveChatWidget?.call('set_customer_email', ' ');
+                        window.LiveChatWidget?.call('set_customer_name', ' ');
                     };
                 } else {
                     window.LC_API.on_chat_ended = () => {
@@ -74,10 +74,10 @@ const LiveChat = (() => {
     // Delete existing LiveChat instance when there is no chat running
     const livechatDeletion = () => new Promise ((resolve) => {
         if (window.LiveChatWidget){
-            window.LiveChatWidget.on('ready', () => {
+            window.LiveChatWidget?.on('ready', () => {
                 try {
-                    if (window.LiveChatWidget.get('customer_data').status !== 'chatting') {
-                        window.LiveChatWidget.call('destroy');
+                    if (window.LiveChatWidget?.get('customer_data').status !== 'chatting') {
+                        window.LiveChatWidget?.call('destroy');
                         resolve();
                     }
                 } catch (e) {
diff --git a/src/javascript/_common/utility.js b/src/javascript/_common/utility.js
index 20b0bf28bd3..618f9961a55 100644
--- a/src/javascript/_common/utility.js
+++ b/src/javascript/_common/utility.js
@@ -303,7 +303,7 @@ const openChatWithParam = () => {
             window.fcWidget.open();
             clearInterval(interval);
         } else if (window.LiveChatWidget) {
-            window.LiveChatWidget.on('ready', () => {
+            window.LiveChatWidget?.on('ready', () => {
                 window.LC_API.open_chat_window();
             });
             clearInterval(interval);
diff --git a/src/javascript/app/base/client.js b/src/javascript/app/base/client.js
index f115e3437a8..5498fe8ee10 100644
--- a/src/javascript/app/base/client.js
+++ b/src/javascript/app/base/client.js
@@ -108,9 +108,9 @@ const Client = (() => {
     // Called when logging out to end ongoing chats if there is any
     const endLiveChat = () => new Promise ((resolve) => {
         const session_variables = { loginid: '', landing_company_shortcode: '', currency: '', residence: '', email: '' };
-        window.LiveChatWidget.call('set_session_variables', session_variables);
-        window.LiveChatWidget.call('set_customer_email', ' ');
-        window.LiveChatWidget.call('set_customer_name', ' ');
+        window.LiveChatWidget?.call('set_session_variables', session_variables);
+        window.LiveChatWidget?.call('set_customer_email', ' ');
+        window.LiveChatWidget?.call('set_customer_name', ' ');
         
         try {
             const customerSDK = init({
@@ -118,8 +118,8 @@ const Client = (() => {
                 clientId : clientID,
             });
             customerSDK.on('connected', () => {
-                if (window.LiveChatWidget.get('chat_data')) {
-                    const { chatId, threadId } = window.LiveChatWidget.get('chat_data');
+                if (window.LiveChatWidget?.get('chat_data')) {
+                    const { chatId, threadId } = window.LiveChatWidget?.get('chat_data');
                     if (threadId) {
                         customerSDK.deactivateChat({ chatId }).catch(() => null);
                     }
diff --git a/src/javascript/app/hooks/use-freshChat.js b/src/javascript/app/hooks/use-freshChat.js
index 43185b2d593..2bc079319c7 100644
--- a/src/javascript/app/hooks/use-freshChat.js
+++ b/src/javascript/app/hooks/use-freshChat.js
@@ -3,9 +3,7 @@ import { useScript } from 'usehooks-ts';
 import useGrowthbookGetFeatureValue from './useGrowthbookGetFeatureValue';
 
 const useFreshChat = (token) => {
-    const scriptStatus = useScript(
-        'https://static.deriv.com/scripts/freshchat.js'
-    );
+    const scriptStatus = useScript('https://static.deriv.com/scripts/freshchat.js');
     const [isReady, setIsReady] = useState(false);
     const [isFreshChatEnabled] = useGrowthbookGetFeatureValue({
         featureFlag: 'enable_freshworks_live_chat',
diff --git a/src/javascript/app/pages/livechat.jsx b/src/javascript/app/pages/livechat.jsx
index 5630e0aab4a..4a88ededdfd 100644
--- a/src/javascript/app/pages/livechat.jsx
+++ b/src/javascript/app/pages/livechat.jsx
@@ -7,7 +7,7 @@ const LiveChat = () => {
 
     const loginid      = localStorage.getItem('active_loginid');
     const client_info  = loginid && JSON.parse(localStorage.getItem('client.accounts') || '{}')[loginid];
-    const token        = client_info ? client_info.token : null;
+    const token        = client_info?.token ?? null;
 
     const [isFreshChatEnabled] = useGrowthbookGetFeatureValue({
         featureFlag: 'enable_freshworks_live_chat',

From 6edc34fb56d779a1620040e82d886bd8df433bb7 Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Mon, 4 Nov 2024 15:20:33 +0800
Subject: [PATCH 10/19] fix: unsafe chaining

---
 src/javascript/app/base/client.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/javascript/app/base/client.js b/src/javascript/app/base/client.js
index 5498fe8ee10..fc9403573a8 100644
--- a/src/javascript/app/base/client.js
+++ b/src/javascript/app/base/client.js
@@ -119,7 +119,7 @@ const Client = (() => {
             });
             customerSDK.on('connected', () => {
                 if (window.LiveChatWidget?.get('chat_data')) {
-                    const { chatId, threadId } = window.LiveChatWidget?.get('chat_data');
+                    const { chatId, threadId } = window.LiveChatWidget.get('chat_data');
                     if (threadId) {
                         customerSDK.deactivateChat({ chatId }).catch(() => null);
                     }

From d1259075b73f35a122830f91482a2af9fd48177d Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Mon, 4 Nov 2024 17:48:47 +0800
Subject: [PATCH 11/19] chore: clear chat on logout

---
 src/javascript/app/base/header.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/javascript/app/base/header.js b/src/javascript/app/base/header.js
index 0f8992ddcfa..bc26106eccd 100644
--- a/src/javascript/app/base/header.js
+++ b/src/javascript/app/base/header.js
@@ -654,6 +654,10 @@ const Header = (() => {
     };
 
     const logoutOnClick = async () => {
+        window.fcWidget?.user.clear().then(
+            () => window.fcWidget.destroy(),
+            () => {}
+        );
         // This will wrap the logout call Client.sendLogoutRequest with our own logout iframe, which is to inform Hydra that the user is logging out
         // and the session should be cleared on Hydra's side. Once this is done, it will call the passed-in logout handler Client.sendLogoutRequest.
         // If Hydra authentication is not enabled, the logout handler Client.sendLogoutRequest will just be called instead.

From c41675c75536e1dfa4ffd60717dfc04e64c43291 Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Tue, 5 Nov 2024 13:47:11 +0800
Subject: [PATCH 12/19] chore: growthbook attributes added

---
 src/javascript/_common/analytics.js | 31 +++++++++++++++++++++++++++--
 src/javascript/_common/utility.js   | 14 +++++++++++++
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/src/javascript/_common/analytics.js b/src/javascript/_common/analytics.js
index b85d528e90e..cc9f028f888 100644
--- a/src/javascript/_common/analytics.js
+++ b/src/javascript/_common/analytics.js
@@ -1,14 +1,41 @@
 const DerivAnalytics = require('@deriv-com/analytics');
+const Cookies = require('js-cookie');
+const { getCountry } = require('./utility');
+const LocalStore = require('./storage').LocalStore;
+const Language = require('./language');
+const { getAppId } = require('../config');
 
 const Analytics = (() => {
-    const init = () => {
+    const init = async () => {
+        const account_type = LocalStore?.get('active_loginid')
+            ?.match(/[a-zA-Z]+/g)
+            ?.join('');
+        const utmData = Cookies.get('utm_data');
+        const ppcCampaignCookies = utmData ? JSON.parse(utmData) : {
+            utm_campaign: 'no campaign',
+            utm_content : 'no content',
+            utm_medium  : 'no medium',
+            utm_source  : 'no source',
+        };
+
         if (process.env.RUDDERSTACK_KEY && process.env.GROWTHBOOK_CLIENT_KEY) {
             DerivAnalytics.Analytics.initialise({
                 growthbookKey    : process.env.GROWTHBOOK_CLIENT_KEY, // optional key to enable A/B tests
                 rudderstackKey   : process.env.RUDDERSTACK_KEY,
                 growthbookOptions: {
                     attributes: {
-                        url: window.location.href,
+                        account_type   : account_type === 'null' ? 'unlogged' : account_type,
+                        app_id         : String(getAppId()),
+                        country        : await getCountry(),
+                        device_language: navigator?.language || 'en-EN',
+                        device_type    : window.innerWidth <= 600 ? 'mobile' : 'desktop',
+                        domain         : window.location.hostname,
+                        url            : window.location.href,
+                        user_language  : Language.get().toLowerCase(),
+                        utm_campaign   : ppcCampaignCookies?.utm_campaign,
+                        utm_content    : ppcCampaignCookies?.utm_content,
+                        utm_medium     : ppcCampaignCookies?.utm_medium,
+                        utm_source     : ppcCampaignCookies?.utm_source,
                     },
                 },
             });
diff --git a/src/javascript/_common/utility.js b/src/javascript/_common/utility.js
index 618f9961a55..6c2f3fc8f38 100644
--- a/src/javascript/_common/utility.js
+++ b/src/javascript/_common/utility.js
@@ -1,4 +1,5 @@
 const extend                 = require('extend');
+const Cookies                = require('js-cookie');
 const getCurrentBinaryDomain = require('../config').getCurrentBinaryDomain;
 require('./lib/polyfills/element.matches');
 
@@ -311,6 +312,18 @@ const openChatWithParam = () => {
     }, 500);
 };
 
+const getCountry = async () => {
+    try {
+        const response = await fetch('https://www.cloudflare.com/cdn-cgi/trace').catch(() => null);
+        const text = response ? await response.text().catch(() => '') : '';
+        const entries = text ? text.split('\n').map(v => v.split('=', 2)) : [];
+        const data = entries.length ? Object.fromEntries(entries) : {};
+        return data?.loc?.toLowerCase() || JSON.parse(Cookies.get('website_status') || '') || '';
+    } catch {
+        return '';
+    }
+};
+
 module.exports = {
     showLoadingImage,
     getHighestZIndex,
@@ -338,4 +351,5 @@ module.exports = {
     lc_clientID,
     openChat,
     openChatWithParam,
+    getCountry,
 };

From 13d3c28546d9b6a6f9e9e88daffce6e738c280c1 Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Tue, 5 Nov 2024 16:24:58 +0800
Subject: [PATCH 13/19] chore: prioritize freshchat over livechat remote toggle

---
 package-lock.json                             |  8 +--
 package.json                                  |  2 +-
 src/javascript/app/base/header.js             | 13 ++--
 src/javascript/app/common/getFeatureFlag.js   | 61 +++++++++++++++++++
 .../app/hooks/useGrowthbookGetFeatureValue.js | 39 ++++++------
 .../app/hooks/useIsGrowthbookLoaded.js        | 29 ---------
 src/javascript/app/pages/livechat.jsx         | 11 +++-
 7 files changed, 99 insertions(+), 64 deletions(-)
 create mode 100644 src/javascript/app/common/getFeatureFlag.js
 delete mode 100644 src/javascript/app/hooks/useIsGrowthbookLoaded.js

diff --git a/package-lock.json b/package-lock.json
index f9a3f156e60..e65087e7a1d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
         "@binary-com/binary-document-uploader": "^2.4.4",
         "@binary-com/binary-style": "^0.2.26",
         "@binary-com/webtrader-charts": "^0.6.2",
-        "@deriv-com/analytics": "^1.18.0",
+        "@deriv-com/analytics": "^1.26.1",
         "@deriv-com/auth-client": "^1.0.15",
         "@deriv-com/quill-ui": "^1.16.2",
         "@deriv-com/utils": "^0.0.37",
@@ -2492,9 +2492,9 @@
       }
     },
     "node_modules/@deriv-com/analytics": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/@deriv-com/analytics/-/analytics-1.18.0.tgz",
-      "integrity": "sha512-n1nwd5imrZJEWw4CRvYTE0/tmO+baCuc9EpQa46JuSPFVUjLUhMwILJ5XPg5Eu24bPUjatkkVygEm+dsQBE7fg==",
+      "version": "1.26.2",
+      "resolved": "https://registry.npmjs.org/@deriv-com/analytics/-/analytics-1.26.2.tgz",
+      "integrity": "sha512-9hFCLDig+Nu0WO0MlywjUfLtuOXAUEwiw/Ia40KlS9B2NS2NLhpA42NOFzMfW1T9PAkD8duUUlT9lkUkZmgjOQ==",
       "dependencies": {
         "@growthbook/growthbook": "^1.1.0",
         "@rudderstack/analytics-js": "^3.5.1",
diff --git a/package.json b/package.json
index a515cf9d47b..d7dad911fe0 100644
--- a/package.json
+++ b/package.json
@@ -106,7 +106,7 @@
     "@binary-com/binary-document-uploader": "^2.4.4",
     "@binary-com/binary-style": "^0.2.26",
     "@binary-com/webtrader-charts": "^0.6.2",
-    "@deriv-com/analytics": "^1.18.0",
+    "@deriv-com/analytics": "^1.26.1",
     "@deriv-com/auth-client": "^1.0.15",
     "@deriv-com/quill-ui": "^1.16.2",
     "@deriv-com/utils": "^0.0.37",
diff --git a/src/javascript/app/base/header.js b/src/javascript/app/base/header.js
index bc26106eccd..f2f52f59008 100644
--- a/src/javascript/app/base/header.js
+++ b/src/javascript/app/base/header.js
@@ -46,7 +46,6 @@ const Header = (() => {
 
     const onLoad = () => {
         DerivIFrame.init();
-        if (document.getElementById('deriv_livechat')) DerivLiveChat.init();
         populateAccountsList();
         populateWalletAccounts();
         bindSvg();
@@ -64,6 +63,7 @@ const Header = (() => {
         fullscreen_map.event.forEach(event => {
             document.addEventListener(event, onFullScreen, false);
         });
+        
         applyFeatureFlags();
     };
 
@@ -71,19 +71,20 @@ const Header = (() => {
         getRemoteConfig(true)
             .then(data => {
                 const { cs_chat_livechat, cs_chat_whatsapp } = data.data;
-                const mobile_menu_livechat                   = getElementById('mobile__menu-livechat');
-                const livechat                               = getElementById('livechat');
+
                 const topbar_whatsapp                        = getElementById('topbar-whatsapp');
                 const whatsapp_mobile_drawer                 = getElementById('whatsapp-mobile-drawer');
 
-                mobile_menu_livechat.style.display = cs_chat_livechat ? 'flex' : 'none';
-                livechat.style.display            = cs_chat_livechat ? 'inline-flex' : 'none';
+                if (document.getElementById('deriv_livechat')) { DerivLiveChat.init(cs_chat_livechat); }
                 
                 topbar_whatsapp.style.display        = cs_chat_whatsapp ? 'inline-flex' : 'none';
                 whatsapp_mobile_drawer.style.display = cs_chat_whatsapp ? 'flex' : 'none';
             })
             // eslint-disable-next-line no-console
-            .catch(error => console.error('Error fetching feature flags:', error));
+            .catch(error => {
+                if (document.getElementById('deriv_livechat')) { DerivLiveChat.init(); }
+                console.error('Error fetching feature flags:', error);
+            });
     };
 
     const switchHeaders = () => {
diff --git a/src/javascript/app/common/getFeatureFlag.js b/src/javascript/app/common/getFeatureFlag.js
new file mode 100644
index 00000000000..e6e7029cd8f
--- /dev/null
+++ b/src/javascript/app/common/getFeatureFlag.js
@@ -0,0 +1,61 @@
+import { Analytics } from '@deriv-com/analytics';
+
+const waitForGrowthbook = () => new Promise((resolve) => {
+    const startTime = Date.now();
+
+    const checkAnalytics = async () => {
+        // This is a fallback incase growthbook experience an error and never gets loaded
+        if (Date.now() - startTime >= 10000) {
+            resolve(false);
+            return;
+        }
+
+        if (typeof Analytics !== 'undefined') {
+            if (Analytics.getInstances()?.ab !== undefined) {
+                resolve(true);
+            } else {
+                const gbState = await Analytics?.getGrowthbookStatus();
+
+                if (gbState?.isLoaded) {
+                    resolve(true);
+                } else {
+                    setTimeout(checkAnalytics, 50);
+                }
+            }
+        } else {
+            setTimeout(checkAnalytics, 50);
+        }
+    };
+
+    checkAnalytics();
+});
+
+const getFeatureFlag = async (feature, defaultValue) => {
+    let enabled = false;
+
+    if (typeof window?.GrowthbookFeatures === 'undefined') {
+        window.GrowthbookFeatures = {};
+    }
+
+    // Avoid rechecks and return previous result immediately
+    if (typeof window.GrowthbookFeatures[feature] !== 'undefined') {
+        return window.GrowthbookFeatures[feature];
+    }
+
+    const isSuccessfullyLoaded = await waitForGrowthbook();
+
+    if (Analytics && Analytics?.getGrowthbookStatus && isSuccessfullyLoaded) {
+        const gbState = await Analytics?.getGrowthbookStatus();
+
+        // If Growthbook has config error, down or encountering issues, feature flag will default to false
+        if (gbState.isLoaded && gbState.status?.success) {
+            enabled = Analytics?.getFeatureValue(feature, !!defaultValue);
+        }
+    }
+
+    window.GrowthbookFeatures[feature] = enabled;
+
+    return enabled;
+};
+
+export default getFeatureFlag;
diff --git a/src/javascript/app/hooks/useGrowthbookGetFeatureValue.js b/src/javascript/app/hooks/useGrowthbookGetFeatureValue.js
index c5fa68ce1f4..1ea0299cd27 100644
--- a/src/javascript/app/hooks/useGrowthbookGetFeatureValue.js
+++ b/src/javascript/app/hooks/useGrowthbookGetFeatureValue.js
@@ -1,35 +1,32 @@
 import { useEffect, useState } from 'react';
 import { Analytics } from '@deriv-com/analytics';
-import useIsGrowthbookIsLoaded from './useIsGrowthbookLoaded';
+import getFeatureFlag from '../common/getFeatureFlag';
 
 const useGrowthbookGetFeatureValue = ({
     defaultValue,
     featureFlag,
 }) => {
     const resolvedDefaultValue = defaultValue !== undefined ? defaultValue : false;
-    const [featureFlagValue, setFeatureFlagValue] = useState(
-        (Analytics?.getFeatureValue(featureFlag, resolvedDefaultValue) ?? resolvedDefaultValue)
-    );
-    const isGBLoaded = useIsGrowthbookIsLoaded();
+    const [featureFlagValue, setFeatureFlagValue] = useState(false);
+    const [isGBLoaded, setIsGBLoaded] = useState(false);
+
+    if (typeof window !== 'undefined') {
+        window.Analytics = Analytics;
+    }
 
     useEffect(() => {
-        if (typeof window !== 'undefined') {
-            window.Analytics = Analytics;
-        }
+        const fetchFeatureFlag = async () => {
+            const is_enabled = await getFeatureFlag(
+                featureFlag,
+                resolvedDefaultValue
+            );
+            setFeatureFlagValue(is_enabled);
+            setIsGBLoaded(true);
+        };
+
+        fetchFeatureFlag();
+    }, []);
 
-        if (isGBLoaded) {
-            if (Analytics?.getInstances()?.ab) {
-                const setFeatureValue = () => {
-                    const value = Analytics?.getFeatureValue(featureFlag, resolvedDefaultValue);
-                    setFeatureFlagValue(value);
-                };
-                setFeatureValue();
-                Analytics?.getInstances()?.ab?.GrowthBook?.setRenderer(() => {
-                    setFeatureValue();
-                });
-            }
-        }
-    }, [isGBLoaded, resolvedDefaultValue, featureFlag]);
     return [featureFlagValue, isGBLoaded];
 };
 export default useGrowthbookGetFeatureValue;
diff --git a/src/javascript/app/hooks/useIsGrowthbookLoaded.js b/src/javascript/app/hooks/useIsGrowthbookLoaded.js
deleted file mode 100644
index ae419508bee..00000000000
--- a/src/javascript/app/hooks/useIsGrowthbookLoaded.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Analytics } from '@deriv-com/analytics';
-
-const useIsGrowthbookIsLoaded = () => {
-    const [isGBLoaded, setIsGBLoaded] = useState(false);
-
-    useEffect(() => {
-        let checksCounter = 0;
-        const analyticsInterval = setInterval(() => {
-            if (checksCounter > 20) {
-                clearInterval(analyticsInterval);
-                return;
-            }
-            checksCounter += 1;
-            if (Analytics?.getInstances()?.ab) {
-                setIsGBLoaded(true);
-                clearInterval(analyticsInterval);
-            }
-        }, 500);
-
-        return () => {
-            clearInterval(analyticsInterval);
-        };
-    }, []);
-
-    return isGBLoaded;
-};
-
-export default useIsGrowthbookIsLoaded;
diff --git a/src/javascript/app/pages/livechat.jsx b/src/javascript/app/pages/livechat.jsx
index 4a88ededdfd..08809cd6654 100644
--- a/src/javascript/app/pages/livechat.jsx
+++ b/src/javascript/app/pages/livechat.jsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import useFreshChat from '../hooks/use-freshChat';
 import useGrowthbookGetFeatureValue from '../hooks/useGrowthbookGetFeatureValue';
 
-const LiveChat = () => {
+const LiveChat = ({ cs_live_chat }) => {
 
     const loginid      = localStorage.getItem('active_loginid');
     const client_info  = loginid && JSON.parse(localStorage.getItem('client.accounts') || '{}')[loginid];
@@ -14,6 +14,8 @@ const LiveChat = () => {
     });
     useFreshChat(token);
 
+    if (!isFreshChatEnabled && !cs_live_chat) return null;
+
     return (
         <React.Fragment>
             {!isFreshChatEnabled && <script
@@ -33,8 +35,11 @@ const LiveChat = () => {
     );
 };
 
-export const init = () => {
-    ReactDOM.render(<LiveChat />, document.getElementById('deriv_livechat'));
+export const init = (cs_chat_livechat) => {
+    ReactDOM.render(
+        <LiveChat cs_live_chat={cs_chat_livechat} />,
+        document.getElementById('deriv_livechat')
+    );
 };
 
 export default init;

From 4700325786d81a8d98856f0b7a308f2dfe3b0ece Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Tue, 5 Nov 2024 16:30:28 +0800
Subject: [PATCH 14/19] fix: build issue

---
 src/javascript/app/base/header.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/javascript/app/base/header.js b/src/javascript/app/base/header.js
index f2f52f59008..5f29ce9a82b 100644
--- a/src/javascript/app/base/header.js
+++ b/src/javascript/app/base/header.js
@@ -80,9 +80,10 @@ const Header = (() => {
                 topbar_whatsapp.style.display        = cs_chat_whatsapp ? 'inline-flex' : 'none';
                 whatsapp_mobile_drawer.style.display = cs_chat_whatsapp ? 'flex' : 'none';
             })
-            // eslint-disable-next-line no-console
+            
             .catch(error => {
                 if (document.getElementById('deriv_livechat')) { DerivLiveChat.init(); }
+                // eslint-disable-next-line no-console
                 console.error('Error fetching feature flags:', error);
             });
     };

From d87cd18efb1562c0bdf1a7d281b9211004d43e4b Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Wed, 6 Nov 2024 15:07:19 +0800
Subject: [PATCH 15/19] fix: updated freshchat script version

---
 src/javascript/app/hooks/use-freshChat.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/javascript/app/hooks/use-freshChat.js b/src/javascript/app/hooks/use-freshChat.js
index 2bc079319c7..607f90490ba 100644
--- a/src/javascript/app/hooks/use-freshChat.js
+++ b/src/javascript/app/hooks/use-freshChat.js
@@ -3,7 +3,7 @@ import { useScript } from 'usehooks-ts';
 import useGrowthbookGetFeatureValue from './useGrowthbookGetFeatureValue';
 
 const useFreshChat = (token) => {
-    const scriptStatus = useScript('https://static.deriv.com/scripts/freshchat.js');
+    const scriptStatus = useScript('https://static.deriv.com/scripts/freshchat-1.0.1.js');
     const [isReady, setIsReady] = useState(false);
     const [isFreshChatEnabled] = useGrowthbookGetFeatureValue({
         featureFlag: 'enable_freshworks_live_chat',

From 2407fde2331ee573a2cd453d4062ff94a80b68bf Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Wed, 6 Nov 2024 16:37:01 +0800
Subject: [PATCH 16/19] fix: update growthbook attribute account_type

---
 src/javascript/_common/analytics.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/javascript/_common/analytics.js b/src/javascript/_common/analytics.js
index cc9f028f888..9e0d96d4e48 100644
--- a/src/javascript/_common/analytics.js
+++ b/src/javascript/_common/analytics.js
@@ -7,9 +7,8 @@ const { getAppId } = require('../config');
 
 const Analytics = (() => {
     const init = async () => {
-        const account_type = LocalStore?.get('active_loginid')
-            ?.match(/[a-zA-Z]+/g)
-            ?.join('');
+        const loginid = LocalStore?.get('active_loginid');
+        const active_account = loginid && JSON.parse(localStorage.getItem('client.accounts') || '{}')[loginid];
         const utmData = Cookies.get('utm_data');
         const ppcCampaignCookies = utmData ? JSON.parse(utmData) : {
             utm_campaign: 'no campaign',
@@ -24,7 +23,8 @@ const Analytics = (() => {
                 rudderstackKey   : process.env.RUDDERSTACK_KEY,
                 growthbookOptions: {
                     attributes: {
-                        account_type   : account_type === 'null' ? 'unlogged' : account_type,
+                        loggedIn       : !!Cookies.get('clients_information'),
+                        account_type   : active_account?.account_type || 'unlogged',
                         app_id         : String(getAppId()),
                         country        : await getCountry(),
                         device_language: navigator?.language || 'en-EN',

From 661870a5e10545e1523135f7d5b2fe34b73fadd7 Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Wed, 6 Nov 2024 16:42:31 +0800
Subject: [PATCH 17/19] fix: pr comments

---
 src/javascript/app/hooks/{use-freshChat.js => useFreshChat.js} | 0
 src/javascript/app/pages/livechat.jsx                          | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/javascript/app/hooks/{use-freshChat.js => useFreshChat.js} (100%)

diff --git a/src/javascript/app/hooks/use-freshChat.js b/src/javascript/app/hooks/useFreshChat.js
similarity index 100%
rename from src/javascript/app/hooks/use-freshChat.js
rename to src/javascript/app/hooks/useFreshChat.js
diff --git a/src/javascript/app/pages/livechat.jsx b/src/javascript/app/pages/livechat.jsx
index 08809cd6654..18fe7580b53 100644
--- a/src/javascript/app/pages/livechat.jsx
+++ b/src/javascript/app/pages/livechat.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import useFreshChat from '../hooks/use-freshChat';
+import useFreshChat from '../hooks/useFreshChat';
 import useGrowthbookGetFeatureValue from '../hooks/useGrowthbookGetFeatureValue';
 
 const LiveChat = ({ cs_live_chat }) => {

From 58a896d7c3398840efdc249b738ae2986e51cce5 Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Thu, 7 Nov 2024 15:33:47 +0800
Subject: [PATCH 18/19] fix: update script url

---
 src/javascript/app/hooks/useFreshChat.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/javascript/app/hooks/useFreshChat.js b/src/javascript/app/hooks/useFreshChat.js
index 607f90490ba..481743d09af 100644
--- a/src/javascript/app/hooks/useFreshChat.js
+++ b/src/javascript/app/hooks/useFreshChat.js
@@ -3,7 +3,7 @@ import { useScript } from 'usehooks-ts';
 import useGrowthbookGetFeatureValue from './useGrowthbookGetFeatureValue';
 
 const useFreshChat = (token) => {
-    const scriptStatus = useScript('https://static.deriv.com/scripts/freshchat-1.0.1.js');
+    const scriptStatus = useScript('https://static.deriv.com/scripts/freshchat/freshchat-1.0.1.js');
     const [isReady, setIsReady] = useState(false);
     const [isFreshChatEnabled] = useGrowthbookGetFeatureValue({
         featureFlag: 'enable_freshworks_live_chat',

From 22402014219e3ca2462d274aae33b0c1c9796130 Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Thu, 7 Nov 2024 17:13:07 +0800
Subject: [PATCH 19/19] fix: use getCountry from utils

---
 package-lock.json                   |  8 ++++----
 package.json                        |  2 +-
 src/javascript/_common/analytics.js |  4 ++--
 src/javascript/_common/utility.js   | 14 --------------
 4 files changed, 7 insertions(+), 21 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e65087e7a1d..cfd75a34be1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
         "@deriv-com/analytics": "^1.26.1",
         "@deriv-com/auth-client": "^1.0.15",
         "@deriv-com/quill-ui": "^1.16.2",
-        "@deriv-com/utils": "^0.0.37",
+        "@deriv-com/utils": "^0.0.38",
         "@deriv/deriv-api": "^1.0.15",
         "@deriv/quill-icons": "^1.23.1",
         "@livechat/customer-sdk": "4.0.2",
@@ -2620,9 +2620,9 @@
       }
     },
     "node_modules/@deriv-com/utils": {
-      "version": "0.0.37",
-      "resolved": "https://registry.npmjs.org/@deriv-com/utils/-/utils-0.0.37.tgz",
-      "integrity": "sha512-+ngUvT+OqwblBoqkHcsbLtljjwOGIjjMpo5xLS5fwyhtNvBe8Rcq+140QV1j0xq9vlm2kmcowEKIVBq33imFmg=="
+      "version": "0.0.38",
+      "resolved": "https://registry.npmjs.org/@deriv-com/utils/-/utils-0.0.38.tgz",
+      "integrity": "sha512-8PBW6IssZYo9JDIwPOKlz36772rExLO+FyI55mZAUz2yVr9dD+ZRUEXsNgIAcGQEGE0U+m5HOQLX/x6JiTqHkQ=="
     },
     "node_modules/@deriv/deriv-api": {
       "version": "1.0.15",
diff --git a/package.json b/package.json
index d7dad911fe0..a0c3ec3bbcc 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,7 @@
     "@deriv-com/analytics": "^1.26.1",
     "@deriv-com/auth-client": "^1.0.15",
     "@deriv-com/quill-ui": "^1.16.2",
-    "@deriv-com/utils": "^0.0.37",
+    "@deriv-com/utils": "^0.0.38",
     "@deriv/deriv-api": "^1.0.15",
     "@deriv/quill-icons": "^1.23.1",
     "@livechat/customer-sdk": "4.0.2",
diff --git a/src/javascript/_common/analytics.js b/src/javascript/_common/analytics.js
index 9e0d96d4e48..8364d650fde 100644
--- a/src/javascript/_common/analytics.js
+++ b/src/javascript/_common/analytics.js
@@ -1,6 +1,6 @@
 const DerivAnalytics = require('@deriv-com/analytics');
+const CountryUtils = require('@deriv-com/utils').CountryUtils;
 const Cookies = require('js-cookie');
-const { getCountry } = require('./utility');
 const LocalStore = require('./storage').LocalStore;
 const Language = require('./language');
 const { getAppId } = require('../config');
@@ -26,7 +26,7 @@ const Analytics = (() => {
                         loggedIn       : !!Cookies.get('clients_information'),
                         account_type   : active_account?.account_type || 'unlogged',
                         app_id         : String(getAppId()),
-                        country        : await getCountry(),
+                        country        : await CountryUtils.getCountry(),
                         device_language: navigator?.language || 'en-EN',
                         device_type    : window.innerWidth <= 600 ? 'mobile' : 'desktop',
                         domain         : window.location.hostname,
diff --git a/src/javascript/_common/utility.js b/src/javascript/_common/utility.js
index 6c2f3fc8f38..618f9961a55 100644
--- a/src/javascript/_common/utility.js
+++ b/src/javascript/_common/utility.js
@@ -1,5 +1,4 @@
 const extend                 = require('extend');
-const Cookies                = require('js-cookie');
 const getCurrentBinaryDomain = require('../config').getCurrentBinaryDomain;
 require('./lib/polyfills/element.matches');
 
@@ -312,18 +311,6 @@ const openChatWithParam = () => {
     }, 500);
 };
 
-const getCountry = async () => {
-    try {
-        const response = await fetch('https://www.cloudflare.com/cdn-cgi/trace').catch(() => null);
-        const text = response ? await response.text().catch(() => '') : '';
-        const entries = text ? text.split('\n').map(v => v.split('=', 2)) : [];
-        const data = entries.length ? Object.fromEntries(entries) : {};
-        return data?.loc?.toLowerCase() || JSON.parse(Cookies.get('website_status') || '') || '';
-    } catch {
-        return '';
-    }
-};
-
 module.exports = {
     showLoadingImage,
     getHighestZIndex,
@@ -351,5 +338,4 @@ module.exports = {
     lc_clientID,
     openChat,
     openChatWithParam,
-    getCountry,
 };