Nuzhy/CSIT-1457/freshchat integration

package.json

@@ -106,10 +106,10 @@
     "@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",
+    "@deriv-com/utils": "^0.0.38",
     "@deriv/deriv-api": "^1.0.15",
     "@deriv/quill-icons": "^1.23.1",
     "@livechat/customer-sdk": "4.0.2",

src/javascript/_common/analytics.js

@@ -1,11 +1,43 @@
 const DerivAnalytics = require('@deriv-com/analytics');
+const CountryUtils = require('@deriv-com/utils').CountryUtils;
+const Cookies = require('js-cookie');
+const LocalStore = require('./storage').LocalStore;
+const Language = require('./language');
+const { getAppId } = require('../config');
 
 const Analytics = (() => {
-    const init = () => {
+    const init = async () => {
+        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',
+            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,
+                growthbookKey    : process.env.GROWTHBOOK_CLIENT_KEY, // optional key to enable A/B tests
+                rudderstackKey   : process.env.RUDDERSTACK_KEY,
+                growthbookOptions: {
+                    attributes: {
+                        loggedIn       : !!Cookies.get('clients_information'),
+                        account_type   : active_account?.account_type || 'unlogged',
+                        app_id         : String(getAppId()),
+                        country        : await CountryUtils.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,
+                    },
+                },
             });
         }
     };

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 = () => {
@@ -71,28 +71,13 @@ 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){
-            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) {
@@ -114,17 +99,19 @@ 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 {
         initialize,
         livechatDeletion,
-        livechatFallback,
         liveChatInitialization,
         rerouteGroup,
     };

src/javascript/_common/utility.js

@@ -289,6 +289,28 @@ class PromiseClass {
 const lc_licenseID = 12049137;
 const lc_clientID = '66aa088aad5a414484c1fd1fa8a5ace7';
 
+const openChat = () => {
+    if (window.fcWidget) {
+        window.fcWidget.open();
+    } else {
+        window.LC_API.open_chat_window();
+    }
+};
+
+const openChatWithParam = () => {
+    const interval = setInterval(() => {
+        if (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,
 };

src/javascript/app/base/client.js

@@ -108,17 +108,17 @@ 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({
                 licenseId: licenseID,
                 clientId : clientID,
             });
             customerSDK.on('connected', () => {
-                if (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);

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 getRemoteConfig          = require('../hooks/useRemoteConfig').getRemoteConfig;
 
 const header_icon_base_path = '/images/pages/header/';
@@ -61,26 +63,29 @@ const Header = (() => {
         fullscreen_map.event.forEach(event => {
             document.addEventListener(event, onFullScreen, false);
         });
+
         applyFeatureFlags();
     };
 
     const applyFeatureFlags = () => {
         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(); }
+                // eslint-disable-next-line no-console
+                console.error('Error fetching feature flags:', error);
+            });
     };
 
     const switchHeaders = () => {
@@ -347,7 +352,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}`);
@@ -565,7 +570,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();
@@ -649,6 +656,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.

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();