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

packages/account/src/Components/poi/status/limited/__tests__/limited.spec.tsx

@@ -2,9 +2,11 @@ import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { POILimited } from '../limited';
 
-window.LC_API = {
-    open_chat_window: jest.fn(),
-    on_chat_ended: jest.fn(),
+window.LiveChatWidget = {
+    call: jest.fn(),
+    get: jest.fn(),
+    init: jest.fn(),
+    on: jest.fn(),
 };
 
 describe('<POILimited/>', () => {
@@ -16,6 +18,7 @@ describe('<POILimited/>', () => {
         const live_chat_text = screen.getByText(/live chat/i);
         expect(live_chat_text).toBeInTheDocument();
         fireEvent.click(live_chat_text);
-        expect(window.LC_API.open_chat_window).toHaveBeenCalledTimes(1);
+        expect(window.LiveChatWidget.call).toHaveBeenCalledTimes(1);
+        expect(window.LiveChatWidget.call).toHaveBeenCalledWith('maximize');
     });
 });

packages/account/src/Components/poi/status/limited/limited.tsx

@@ -10,7 +10,11 @@ export const POILimited = () => (
             <Localize
                 i18n_default_text='Please contact us via <0>live chat</0>.'
                 components={[
-                    <span key={0} className='link link--orange' onClick={() => window.LC_API.open_chat_window()} />,
+                    <span
+                        key={0}
+                        className='link link--orange'
+                        onClick={() => window.LiveChatWidget.call('maximize')}
+                    />,
                 ]}
             />
         }

packages/account/src/Configs/poi-error-config.tsx

@@ -5,7 +5,7 @@ import { Localize } from '@deriv/translations';
 import { DerivLightNameDobPoiIcon, DerivLightDobPoiIcon, DerivLightNamePoiIcon } from '@deriv/quill-icons';
 import { getIDVDocumentType } from '../Helpers/utils';
 
-const handleOnClick = () => window.LC_API.open_chat_window();
+const handleOnClick = () => window.LiveChatWidget.call('maximize');
 
 export const GENERIC_ERROR_MESSAGE = (
     <Localize i18n_default_text='Sorry, an internal error occurred. Hit the above checkbox to try again.' />

packages/appstore/src/components/modals/wallets-migration-failed/wallets-migration-failed.tsx

@@ -16,7 +16,7 @@ const WalletsMigrationFailed = observer(() => {
     };
 
     const handleLivechatButtonClick = () => {
-        window.LC_API?.open_chat_window();
+        window.LiveChatWidget.call('maximize');
         setWalletsMigrationFailedPopup(false);
     };
 

packages/cashier/src/components/cashier-locked/cashier-locked-provider.tsx

@@ -130,7 +130,7 @@ const getMessage = ({
                             <span
                                 key={0}
                                 className='link link--orange'
-                                onClick={() => window.LC_API.open_chat_window()}
+                                onClick={() => window.LiveChatWidget.call('maximize')}
                             />,
                         ]}
                     />
@@ -147,7 +147,7 @@ const getMessage = ({
                             <span
                                 key={0}
                                 className='link link--orange'
-                                onClick={() => window.LC_API.open_chat_window()}
+                                onClick={() => window.LiveChatWidget.call('maximize')}
                             />,
                         ]}
                     />
@@ -378,7 +378,7 @@ const getMessage = ({
                             <span
                                 key={0}
                                 className='link link--orange'
-                                onClick={() => window.LC_API.open_chat_window()}
+                                onClick={() => window.LiveChatWidget.call('maximize')}
                             />,
                         ]}
                     />
@@ -395,7 +395,7 @@ const getMessage = ({
                             <span
                                 key={0}
                                 className='link link--orange'
-                                onClick={() => window.LC_API.open_chat_window()}
+                                onClick={() => window.LiveChatWidget.call('maximize')}
                             />,
                         ]}
                     />
@@ -471,7 +471,7 @@ const getMessage = ({
                             <span
                                 key={0}
                                 className='link link--orange'
-                                onClick={() => window.LC_API.open_chat_window()}
+                                onClick={() => window.LiveChatWidget.call('maximize')}
                             />,
                         ]}
                     />
@@ -488,7 +488,7 @@ const getMessage = ({
                             <span
                                 key={0}
                                 className='link link--orange'
-                                onClick={() => window.LC_API.open_chat_window()}
+                                onClick={() => window.LiveChatWidget.call('maximize')}
                             />,
                         ]}
                     />
@@ -505,7 +505,7 @@ const getMessage = ({
                             <span
                                 key={0}
                                 className='link link--orange'
-                                onClick={() => window.LC_API.open_chat_window()}
+                                onClick={() => window.LiveChatWidget.call('maximize')}
                             />,
                         ]}
                     />
@@ -528,7 +528,11 @@ const getMessage = ({
             <Localize
                 i18n_default_text='Your cashier is currently locked. Please contact us via <0>live chat</0> to find out how to unlock it.'
                 components={[
-                    <span key={0} className='link link--orange' onClick={() => window.LC_API.open_chat_window()} />,
+                    <span
+                        key={0}
+                        className='link link--orange'
+                        onClick={() => window.LiveChatWidget.call('maximize')}
+                    />,
                 ]}
             />
         ),

packages/cashier/src/components/side-notes/side-note-faq/side-note-faq.tsx

@@ -14,7 +14,7 @@ const SideNoteFAQ = ({ transaction_type }: TSideNoteFAQProps) => {
     const { isMobile } = useDevice();
     const { is_eu } = client;
 
-    const onClickHandler = () => window.LC_API?.open_chat_window?.();
+    const onClickHandler = () => window.LiveChatWidget.call('maximize');
 
     const deposit_faq_list = useMemo(() => {
         return [

packages/cashier/src/modules/cashier-onboarding/components/cashier-onboarding-side-notes/cashier-onboarding-side-note-fiat.tsx

@@ -16,7 +16,11 @@ const CashierOnboardingSideNoteFiat: React.FC = observer(() => {
                         is_from_derivgo ? (
                             <span />
                         ) : (
-                            <a key={0} className='link link--orange' onClick={() => window.LC_API.open_chat_window()} />
+                            <a
+                                key={0}
+                                className='link link--orange'
+                                onClick={() => window.LiveChatWidget.call('maximize')}
+                            />
                         ),
                     ]}
                 />

packages/cashier/src/modules/deposit-fiat/deposit-fiat.tsx

@@ -11,7 +11,7 @@ const DepositFiat: React.FC = observer(() => {
     const { common, traders_hub } = useStore();
     const { is_from_derivgo } = common;
     const { is_low_risk_cr_eu_real } = traders_hub;
-    const onClickHandler = () => window.LC_API?.open_chat_window?.();
+    const onClickHandler = () => window.LiveChatWidget.call('maximize');
 
     return (
         <PageContainer

packages/cfd/src/Components/__tests__/cfd-personal-details-form.spec.js

@@ -22,8 +22,11 @@ jest.mock('@deriv/shared', () => ({
     isMobile: jest.fn(),
 }));
 
-global.window.LC_API = {
-    open_chat_window: jest.fn(),
+window.LiveChatWidget = {
+    call: jest.fn(),
+    get: jest.fn(),
+    init: jest.fn(),
+    on: jest.fn(),
 };
 
 describe('<CFDPersonalDetailsForm />', () => {
@@ -358,6 +361,6 @@ describe('<CFDPersonalDetailsForm />', () => {
         const linkElement = screen.getByText(/live chat/i);
         expect(linkElement).toBeInTheDocument();
         fireEvent.click(linkElement);
-        expect(window.LC_API.open_chat_window).toHaveBeenCalled();
+        expect(window.LiveChatWidget.call).toHaveBeenCalledWith('maximize');
     });
 });

packages/cfd/src/Components/cfd-personal-details-form.tsx

@@ -361,7 +361,7 @@ const CFDPersonalDetailsForm = ({
                                                         <span
                                                             key={0}
                                                             className='link link--orange'
-                                                            onClick={() => window.LC_API.open_chat_window()}
+                                                            onClick={() => window.LiveChatWidget.call('maximize')}
                                                         />,
                                                     ]}
                                                 />

packages/components/src/components/open-livechat-link/open-livechat-link.tsx

@@ -8,7 +8,7 @@ type TOpenLiveChatLink = {
 };
 
 const OpenLiveChatLink = ({ children, text_size }: React.PropsWithChildren<TOpenLiveChatLink>) => (
-    <button type='button' className='open-livechat__link' onClick={() => window.LC_API.open_chat_window()}>
+    <button type='button' className='open-livechat__link' onClick={() => window.LiveChatWidget.call('maximize')}>
         <Text size={text_size || 'xs'} weight='bold' color='brand-red-coral'>
             {children || <Localize i18n_default_text='live chat' />}
         </Text>

packages/core/package.json

@@ -122,7 +122,6 @@
         "@deriv/translations": "^1.0.0",
         "@deriv/utils": "^1.0.0",
         "@deriv/wallets": "^1.0.0",
-        "@livechat/customer-sdk": "^2.0.4",
         "acorn": "^6.1.1",
         "babel-polyfill": "^6.26.0",
         "canvas-toBlob": "^1.0.0",

packages/core/src/App/AppContent.tsx

@@ -17,13 +17,27 @@ import Devtools from './Devtools';
 import LandscapeBlocker from './Components/Elements/LandscapeBlocker';
 import initDatadog from '../Utils/Datadog';
 import { ThemeProvider } from '@deriv-com/quill-ui';
-import { useGrowthbookIsOn } from '@deriv/hooks';
+import { useGrowthbookIsOn, useLiveChat } from '@deriv/hooks';
 import { useTranslations } from '@deriv-com/translations';
 
 const AppContent: React.FC<{ passthrough: unknown }> = observer(({ passthrough }) => {
     const store = useStore();
-    const { has_wallet } = store.client;
-    const { current_language } = store.common;
+    const {
+        has_wallet,
+        is_logged_in,
+        loginid,
+        is_client_initialized,
+        landing_company_shortcode,
+        currency,
+        residence,
+        email,
+        setIsPasskeySupported,
+        account_settings,
+    } = store.client;
+    const { first_name, last_name } = account_settings;
+    const { current_language, changeSelectedLanguage } = store.common;
+    const { is_dark_mode_on, setDarkMode } = store.ui;
+
     const { isMobile } = useDevice();
     const { switchLanguage } = useTranslations();
 
@@ -38,17 +52,38 @@ const AppContent: React.FC<{ passthrough: unknown }> = observer(({ passthrough }
     const { tracking_datadog } = data;
     const is_passkeys_supported = browserSupportsWebAuthn();
 
+    const livechat_client_information: Parameters<typeof useLiveChat>[0] = {
+        is_client_initialized,
+        is_logged_in,
+        loginid,
+        landing_company_shortcode,
+        currency,
+        residence,
+        email,
+        first_name,
+        last_name,
+    };
+
+    useLiveChat(livechat_client_information);
+
     React.useEffect(() => {
         switchLanguage(current_language);
     }, [current_language, switchLanguage]);
 
     React.useEffect(() => {
         if (isGBLoaded && isWebPasskeysFFEnabled && isServicePasskeysFFEnabled) {
-            store.client.setIsPasskeySupported(
+            setIsPasskeySupported(
                 is_passkeys_supported && isServicePasskeysFFEnabled && isWebPasskeysFFEnabled && isMobile
             );
         }
-    }, [isServicePasskeysFFEnabled, isGBLoaded, isWebPasskeysFFEnabled, is_passkeys_supported, isMobile, store.client]);
+    }, [
+        isServicePasskeysFFEnabled,
+        isGBLoaded,
+        isWebPasskeysFFEnabled,
+        is_passkeys_supported,
+        isMobile,
+        setIsPasskeySupported,
+    ]);
 
     React.useEffect(() => {
         initDatadog(tracking_datadog);
@@ -57,17 +92,17 @@ const AppContent: React.FC<{ passthrough: unknown }> = observer(({ passthrough }
     // intentionally switch the user with wallets to light mode and EN language
     React.useLayoutEffect(() => {
         if (has_wallet) {
-            if (store.ui.is_dark_mode_on) {
-                store.ui.setDarkMode(false);
+            if (is_dark_mode_on) {
+                setDarkMode(false);
             }
-            if (store.common.current_language !== 'EN') {
-                store.common.changeSelectedLanguage('EN');
+            if (current_language !== 'EN') {
+                changeSelectedLanguage('EN');
             }
         }
-    }, [has_wallet, store.common, store.ui]);
+    }, [has_wallet, current_language, changeSelectedLanguage, is_dark_mode_on, setDarkMode]);
 
     return (
-        <ThemeProvider theme={store.ui.is_dark_mode_on ? 'dark' : 'light'}>
+        <ThemeProvider theme={is_dark_mode_on ? 'dark' : 'light'}>
             <LandscapeBlocker />
             <Header />
             <ErrorBoundary root_store={store}>

packages/core/src/App/Components/Elements/LiveChat/live-chat.tsx

@@ -1,20 +1,16 @@
-import React from 'react';
 import { Popover, Icon, Text } from '@deriv/components';
-import { observer, useStore } from '@deriv/stores';
 import { Localize } from '@deriv/translations';
-import useLiveChat from 'App/Components/Elements/LiveChat/use-livechat';
+import { useDevice } from '@deriv-com/ui';
+import { useIsLiveChatWidgetAvailable } from '@deriv/hooks';
 
-const LiveChat = observer(({ showPopover }: { showPopover?: boolean }) => {
-    const { client, ui } = useStore();
-    const { has_cookie_account, loginid } = client;
-    const { is_mobile } = ui;
-    const liveChat = useLiveChat(has_cookie_account, loginid);
+const LiveChat = ({ showPopover }: { showPopover?: boolean }) => {
+    const { isDesktop } = useDevice();
+    const { is_livechat_available } = useIsLiveChatWidgetAvailable();
+    const liveChatClickHandler = () => window.LiveChatWidget.call('maximize');
 
-    if (!liveChat.isReady) return null;
+    if (!is_livechat_available) return null;
 
-    const liveChatClickHandler = () => liveChat.widget?.call('maximize');
-
-    if (is_mobile)
+    if (!isDesktop)
         return (
             <div
                 className='livechat gtm-deriv-livechat'
@@ -49,6 +45,6 @@ const LiveChat = observer(({ showPopover }: { showPopover?: boolean }) => {
             )}
         </div>
     );
-});
+};
 
 export default LiveChat;