[UPM-1303]/evgeniy/livechat name and email not populated

packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts

@@ -1,103 +1,93 @@
 import { useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
 import { deriv_urls, getActionFromUrl } from '@deriv/shared';
+import { useDevice } from '@deriv-com/ui';
 import { useIsMounted } from 'usehooks-ts';
 
-// Todo: Should break this into smaller hooks or utility functions.
 const useLiveChat = (has_cookie_account = false, active_loginid?: string) => {
     const url_query_string = window.location.search;
     const url_params = new URLSearchParams(url_query_string);
     const reset_password = getActionFromUrl() === 'reset_password';
     const should_disable_livechat = url_params.get('code') && reset_password;
+    const { isDesktop } = useDevice();
 
     const [isReady, setIsReady] = useState(false);
     const isMounted = useIsMounted();
 
     const liveChatSetup = (is_logged_in: boolean) => {
-        if (window.LiveChatWidget && !should_disable_livechat) {
-            window.LiveChatWidget?.on('ready', () => {
-                let client_first_name = '';
-                let client_last_name = '';
-                const domain = /^(.)*deriv\.(com|me|be)$/gi.test(window.location.hostname)
-                    ? deriv_urls.DERIV_HOST_NAME
-                    : 'binary.sx';
-                const client_information = Cookies.getJSON('client_information', {
-                    domain,
-                });
-                const utm_data = Cookies.getJSON('utm_data', { domain });
+        window.LiveChatWidget?.on('ready', () => {
+            let client_first_name = '';
+            let client_last_name = '';
+            const domain = /^(.)*deriv\.(com|me|be)$/gi.test(window.location.hostname)
+                ? deriv_urls.DERIV_HOST_NAME
+                : 'binary.sx';
+            const client_information = Cookies.getJSON('client_information', {
+                domain,
+            });
 
-                const { utm_source, utm_medium, utm_campaign } = utm_data || {};
+            const utm_data = Cookies.getJSON('utm_data', { domain });
 
-                const { loginid, email, landing_company_shortcode, currency, residence, first_name, last_name } =
-                    client_information || {};
+            const { utm_source, utm_medium, utm_campaign } = utm_data || {};
 
-                client_first_name = first_name ?? ' ';
-                client_last_name = last_name ?? ' ';
+            const { loginid, email, landing_company_shortcode, currency, residence, first_name, last_name } =
+                client_information || {};
 
-                /* the session variables are sent to CS team dashboard to notify user has logged in
+            client_first_name = first_name ?? ' ';
+            client_last_name = last_name ?? ' ';
+
+            /* the session variables are sent to CS team dashboard to notify user has logged in
                 and also acts as custom variables to trigger targeted engagement */
-                const session_variables = {
-                    is_logged_in: !!is_logged_in,
-                    loginid: loginid ?? ' ',
-                    landing_company_shortcode: landing_company_shortcode ?? ' ',
-                    currency: currency ?? ' ',
-                    residence: residence ?? ' ',
-                    email: email ?? ' ',
-                    utm_source: utm_source ?? ' ',
-                    utm_medium: utm_medium ?? ' ',
-                    utm_campaign: utm_campaign ?? ' ',
-                };
-                window.LiveChatWidget?.call('set_session_variables', session_variables);
+            const session_variables = {
+                is_logged_in: !!is_logged_in,
+                loginid: loginid ?? ' ',
+                landing_company_shortcode: landing_company_shortcode ?? ' ',
+                currency: currency ?? ' ',
+                residence: residence ?? ' ',
+                email: email ?? ' ',
+                utm_source: utm_source ?? ' ',
+                utm_medium: utm_medium ?? ' ',
+                utm_campaign: utm_campaign ?? ' ',
+            };
+            window.LiveChatWidget?.call('set_session_variables', session_variables);
 
-                if (is_logged_in) {
-                    // client logged in
-                    // prepfill name and email
-                    window.LiveChatWidget?.call('set_customer_email', session_variables.email);
-                    window.LiveChatWidget?.call('set_customer_name', `${client_first_name} ${client_last_name}`);
+            if (is_logged_in) {
+                // client logged in
+                // prepfill name and email
+                window.LiveChatWidget?.call('set_customer_email', session_variables.email);
+                window.LiveChatWidget?.call('set_customer_name', `${client_first_name} ${client_last_name}`);
 
-                    // prefill name and email fields after chat has ended
-                    if (window.LC_API?.on_chat_ended) {
-                        window.LC_API.on_chat_ended = () => {
-                            window.LiveChatWidget?.call('set_customer_email', session_variables.email);
-                            window.LiveChatWidget?.call(
-                                'set_customer_name',
-                                `${client_first_name} ${client_last_name}`
-                            );
-                        };
-                    }
-                } else {
-                    // client not logged in
-                    // clear name and email fields
-                    window.LiveChatWidget?.call('set_customer_email', ' ');
-                    window.LiveChatWidget?.call('set_customer_name', ' ');
-                    // clear name and email fields after chat has ended
-                    if (window.LC_API?.on_chat_ended) {
-                        window.LC_API.on_chat_ended = () => {
-                            window.LiveChatWidget?.call('set_customer_email', ' ');
-                            window.LiveChatWidget?.call('set_customer_name', ' ');
-                        };
-                    }
+                // prefill name and email fields after chat has ended
+                if (window.LC_API?.on_chat_ended) {
+                    window.LC_API.on_chat_ended = () => {
+                        window.LiveChatWidget?.call('set_customer_email', session_variables.email);
+                        window.LiveChatWidget?.call('set_customer_name', `${client_first_name} ${client_last_name}`);
+                    };
                 }
-            });
-        }
-    };
-
-    useEffect(() => {
-        window.LiveChatWidget?.on('ready', () => {
-            if (isMounted() && !should_disable_livechat) setIsReady(true);
+            } else {
+                // client not logged in
+                // clear name and email fields
+                window.LiveChatWidget?.call('set_customer_email', ' ');
+                window.LiveChatWidget?.call('set_customer_name', ' ');
+                // clear name and email fields after chat has ended
+                if (window.LC_API?.on_chat_ended) {
+                    window.LC_API.on_chat_ended = () => {
+                        window.LiveChatWidget?.call('set_customer_email', ' ');
+                        window.LiveChatWidget?.call('set_customer_name', ' ');
+                    };
+                }
+            }
+            setIsReady(true);
         });
-    }, [isMounted]);
+    };
 
     useEffect(() => {
-        if (!should_disable_livechat) {
+        if (isMounted() && !should_disable_livechat) {
             liveChatSetup(has_cookie_account);
         }
-    }, [has_cookie_account, should_disable_livechat]);
-
-    useEffect(() => {
-        if (should_disable_livechat) return;
-        liveChatSetup(has_cookie_account);
-    }, [has_cookie_account, active_loginid, should_disable_livechat]);
+        window.onbeforeunload = () => {
+            if (!isDesktop) window.LiveChatWidget?.call('hide');
+        };
+    }, [isMounted, has_cookie_account, should_disable_livechat, active_loginid, isDesktop]);
 
     return {
         isReady,

packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx

@@ -19,7 +19,6 @@ import NetworkStatus from 'App/Components/Layout/Footer';
 import ServerTime from 'App/Containers/server-time.jsx';
 import getRoutesConfig from 'App/Constants/routes-config';
 import LiveChat from 'App/Components/Elements/LiveChat';
-import useLiveChat from 'App/Components/Elements/LiveChat/use-livechat.ts';
 import { MenuTitle, MobileLanguageMenu } from './Components/ToggleMenu';
 import MenuLink from './menu-link';
 import PlatformSwitcher from './platform-switcher';
@@ -42,7 +41,6 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
         is_logged_in,
         is_logging_in,
         is_virtual,
-        loginid,
         logout: logoutClient,
         should_allow_authentication,
         should_allow_poinc_authentication,
@@ -76,7 +74,6 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
     const { data } = useRemoteConfig(isMounted());
     const { cs_chat_livechat, cs_chat_whatsapp } = data;
 
-    const liveChat = useLiveChat(false, loginid);
     const [is_open, setIsOpen] = React.useState(false);
     const [transitionExit, setTransitionExit] = React.useState(false);
     const [primary_routes_config, setPrimaryRoutesConfig] = React.useState([]);
@@ -428,7 +425,7 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
                                         />
                                     </MobileDrawer.Item>
                                 )}
-                                {liveChat.isReady && cs_chat_whatsapp && (
+                                {cs_chat_whatsapp && (
                                     <MobileDrawer.Item className='header__menu-mobile-whatsapp'>
                                         <Icon icon='IcWhatsApp' className='drawer-icon' />
                                         <a