Merge pull request #201 from farrah-deriv/FEQ-2456/livechat-integration

farrah-deriv · web-flow · commit 45e99b356d85 · 2024-07-26T13:01:27.000+04:00
farrah/FEQ-2456/LiveChat Integration
diff --git a/global.d.ts b/global.d.ts
@@ -1,8 +1,14 @@
 declare global {
     interface Window {
         LC_API: {
+            on_chat_ended: VoidFunction;
             open_chat_window: VoidFunction;
         };
+        LiveChatWidget: {
+            call: (key: string, value?: object | string) => void;
+            init: () => void;
+            on: (key: string, callback: VoidFunction) => void;
+        };
         dataLayer: {
             push: (event: { [key: string]: boolean | number | string; event: string }) => void;
         };
diff --git a/index.html b/index.html
@@ -42,5 +42,46 @@
         <!-- End Google Tag Manager (noscript) -->
         <div id="root"></div>
         <script type="module" src="/src/main.tsx"></script>
+        <!-- LiveChat script -->
+        <script type="text/javascript">
+            window.__lc = window.__lc || {};
+            window.__lc.license = 12049137;
+            window.__lc.asyncInit = true;
+            (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);
+        </script>
+        <!-- End LiveChat script -->
     </body>
 </html>
diff --git a/src/components/AppFooter/Livechat.tsx b/src/components/AppFooter/Livechat.tsx
@@ -1,14 +1,21 @@
+import { useLiveChat } from '@/hooks/custom-hooks';
 import { LegacyLiveChatOutlineIcon } from '@deriv/quill-icons';
 import { useTranslations } from '@deriv-com/translations';
 import { TooltipMenuIcon } from '../TooltipMenuIcon';
 
 const Livechat = () => {
+    const { LiveChatWidget } = useLiveChat();
     const { localize } = useTranslations();
-    // TODO add the logic of this
-    // TODO add the test cases for this after adding the logics
 
     return (
-        <TooltipMenuIcon as='button' className='app-footer__icon' tooltipContent={localize('Live chat')}>
+        <TooltipMenuIcon
+            as='button'
+            className='app-footer__icon'
+            onClick={() => {
+                LiveChatWidget.call('maximize');
+            }}
+            tooltipContent={localize('Live chat')}
+        >
             <LegacyLiveChatOutlineIcon iconSize='xs' />
         </TooltipMenuIcon>
     );
diff --git a/src/components/AppFooter/__tests__/AppFooter.spec.tsx b/src/components/AppFooter/__tests__/AppFooter.spec.tsx
@@ -7,6 +7,9 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import AppFooter from '../AppFooter';
 
+jest.mock('@deriv-com/api-hooks', () => ({
+    useAuthData: jest.fn(() => ({ activeLoginid: null })),
+}));
 jest.mock('@deriv-com/translations');
 jest.mock('@/hooks');
 
diff --git a/src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx b/src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx
@@ -1,5 +1,6 @@
 import { ComponentProps, ReactNode } from 'react';
 import { ACCOUNT_LIMITS, HELP_CENTRE, RESPONSIBLE } from '@/constants';
+import { useLiveChat } from '@/hooks/custom-hooks';
 import {
     BrandDerivLogoCoralIcon,
     IconTypes,
@@ -8,6 +9,7 @@ import {
     LegacyChartsIcon,
     LegacyHelpCentreIcon,
     LegacyHomeOldIcon,
+    LegacyLiveChatOutlineIcon,
     LegacyLogout1pxIcon,
     LegacyProfileSmIcon,
     LegacyResponsibleTradingIcon,
@@ -34,6 +36,7 @@ type TMenuConfig = {
 export const MobileMenuConfig = () => {
     const { localize } = useTranslations();
     const { logout } = useAuthData();
+    const { LiveChatWidget } = useLiveChat();
 
     const menuConfig: TMenuConfig[] = [
         [
@@ -101,12 +104,14 @@ export const MobileMenuConfig = () => {
                 LeftComponent: LegacyWhatsappIcon,
                 target: '_blank',
             },
-            // TODO add livechat logic
-            // {
-            //     as: 'button',
-            //     label: localize('Live chat'),
-            //     LeftComponent: LegacyLiveChatOutlineIcon,
-            // },
+            {
+                as: 'button',
+                label: localize('Live chat'),
+                LeftComponent: LegacyLiveChatOutlineIcon,
+                onClick: () => {
+                    LiveChatWidget.call('maximize');
+                },
+            },
         ],
         [
             {
diff --git a/src/components/BlockedScenarios/BlockedScenarios.tsx b/src/components/BlockedScenarios/BlockedScenarios.tsx
@@ -1,4 +1,5 @@
 import { ReactComponent as P2pUnavailable } from '@/assets/p2p-unavailable.svg';
+import { useLiveChat } from '@/hooks';
 import {
     DerivLightIcCashierBlockedIcon,
     DerivLightIcCashierLockedIcon,
@@ -19,6 +20,7 @@ type TBlockedScenariosObject = {
 
 const BlockedScenarios = ({ type }: { type: string }) => {
     const { isMobile } = useDevice();
+    const { LiveChatWidget } = useLiveChat();
 
     const buttonTextSize = isMobile ? 'md' : 'sm';
     const iconSize = isMobile ? 96 : 128;
@@ -28,8 +30,9 @@ const BlockedScenarios = ({ type }: { type: string }) => {
         window.open(URLConstants.derivAppProduction, '_blank')?.focus();
     };
 
-    // TODO: implement this function to open live chat
-    const openLiveChat = () => {};
+    const openLiveChat = () => {
+        LiveChatWidget.call('maximize');
+    };
 
     const blockedScenarios: TBlockedScenariosObject = {
         cashierLocked: {
diff --git a/src/components/BlockedScenarios/__tests__/BlockedScenarios.spec.tsx b/src/components/BlockedScenarios/__tests__/BlockedScenarios.spec.tsx
@@ -2,6 +2,9 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import BlockedScenarios from '../BlockedScenarios';
 
+jest.mock('@deriv-com/api-hooks', () => ({
+    useAuthData: jest.fn(() => ({ activeLoginid: null })),
+}));
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),
     useDevice: () => ({ isDesktop: true }),
diff --git a/src/components/Modals/AdErrorTooltipModal/AdErrorTooltipModal.tsx b/src/components/Modals/AdErrorTooltipModal/AdErrorTooltipModal.tsx
@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { ADVERT_TYPE, ERROR_CODES } from '@/constants';
+import { useLiveChat } from '@/hooks/custom-hooks';
 import { AdRateError } from '@/pages/my-ads/components';
 import { Localize } from '@deriv-com/translations';
 import { Button, Modal, Text, useDevice } from '@deriv-com/ui';
@@ -24,7 +25,8 @@ const getAdErrorMessage = (
     balanceAvailable: number,
     advertType: string,
     dailyBuyLimit: string,
-    dailySellLimit: string
+    dailySellLimit: string,
+    onLiveChatClick: () => void
 ): string => {
     const errorMessages: { [key: string]: ReactNode | string } = {
         [ERROR_CODES.ADVERT_INACTIVE]: <AdRateError />,
@@ -64,7 +66,10 @@ const getAdErrorMessage = (
             />
         ),
         [ERROR_CODES.ADVERTISER_TEMP_BAN]: (
-            <Localize i18n_default_text='You’re not allowed to use Deriv P2P to advertise. Please contact us via live chat for more information.' />
+            <Localize
+                components={[<a key={0} onClick={onLiveChatClick} />]}
+                i18n_default_text='You’re not allowed to use Deriv P2P to advertise. Please contact us via <0>live chat</0> for more information.'
+            />
         ),
     };
 
@@ -82,6 +87,10 @@ const AdErrorTooltipModal = ({
     remainingAmount,
     visibilityStatus = [],
 }: TAdErrorTooltipModal) => {
+    const { LiveChatWidget } = useLiveChat();
+    const onLiveChatClick = () => {
+        LiveChatWidget.call('maximize');
+    };
     const { isMobile } = useDevice();
     const textSize = isMobile ? 'md' : 'sm';
     const getMultipleErrorMessages = (errorStatuses: string[]) =>
@@ -95,7 +104,8 @@ const AdErrorTooltipModal = ({
                     balanceAvailable,
                     advertType,
                     dailyBuyLimit,
-                    dailySellLimit
+                    dailySellLimit,
+                    onLiveChatClick
                 )}
             </div>
         ));
@@ -118,7 +128,8 @@ const AdErrorTooltipModal = ({
                                 balanceAvailable,
                                 advertType,
                                 dailyBuyLimit,
-                                dailySellLimit
+                                dailySellLimit,
+                                onLiveChatClick
                             )
                         ) : (
                             <>
diff --git a/src/components/Modals/AdErrorTooltipModal/__tests__/AdErrorTooltipModal.spec.tsx b/src/components/Modals/AdErrorTooltipModal/__tests__/AdErrorTooltipModal.spec.tsx
@@ -13,6 +13,10 @@ const mockProps = {
     visibilityStatus: [],
 };
 
+jest.mock('@deriv-com/api-hooks', () => ({
+    useAuthData: jest.fn(() => ({ activeLoginid: null })),
+}));
+
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),
     useDevice: () => ({ isMobile: false }),
@@ -106,11 +110,7 @@ describe('AdErrorTooltipModal', () => {
             visibilityStatus: ['advertiser_temp_ban'],
         };
         render(<AdErrorTooltipModal {...newProps} />);
-        expect(
-            screen.getByText(
-                'You’re not allowed to use Deriv P2P to advertise. Please contact us via live chat for more information.'
-            )
-        ).toBeInTheDocument();
+        expect(screen.getByText(/You’re not allowed to use Deriv P2P to advertise./)).toBeInTheDocument();
     });
     it('should display the corresponding reason when visibilityStatus is advert_inactive', () => {
         const newProps = {
@@ -126,10 +126,6 @@ describe('AdErrorTooltipModal', () => {
             visibilityStatus: ['advertiser_temp_ban', 'advertiser_daily_limit'],
         };
         render(<AdErrorTooltipModal {...newProps} />);
-        expect(
-            screen.getByText(
-                '1. You’re not allowed to use Deriv P2P to advertise. Please contact us via live chat for more information.'
-            )
-        ).toBeInTheDocument();
+        expect(screen.getByText(/1. You’re not allowed to use Deriv P2P to advertise./)).toBeInTheDocument();
     });
 });
diff --git a/src/hooks/custom-hooks/index.ts b/src/hooks/custom-hooks/index.ts
@@ -9,6 +9,7 @@ export { default as useHandleRouteChange } from './useHandleRouteChange';
 export { default as useIsAdvertiser } from './useIsAdvertiser';
 export { default as useIsAdvertiserBarred } from './useIsAdvertiserBarred';
 export { default as useIsP2PBlocked } from './useIsP2PBlocked';
+export { default as useLiveChat } from './useLiveChat';
 export { default as useModalManager } from './useModalManager';
 export { default as useNavigatorOnline } from './useNavigatorOnline';
 export { default as useNetworkStatus } from './useNetworkStatus';
diff --git a/src/hooks/custom-hooks/useLiveChat.ts b/src/hooks/custom-hooks/useLiveChat.ts
@@ -0,0 +1,50 @@
+import Cookies from 'js-cookie';
+import { useAuthData } from '@deriv-com/api-hooks';
+
+/**
+ * Custom hook to initialize LiveChat.
+ * @returns {object} LiveChatWidget - LiveChat widget.
+ */
+const useLiveChat = () => {
+    const { activeLoginid } = useAuthData();
+
+    const initLiveChat = () => {
+        window.LiveChatWidget.init();
+        window.LiveChatWidget.on('ready', () => {
+            const clientInformation = JSON.parse(Cookies.get('client_information') ?? '{}');
+            const {
+                currency = ' ',
+                email = ' ',
+                firstName = '',
+                landingCompanyShortcode = ' ',
+                lastName = '',
+                loginid = ' ',
+                residence = ' ',
+            } = clientInformation;
+            const sessionVariables = {
+                currency,
+                email,
+                is_logged_in: !!activeLoginid,
+                landingCompanyShortcode,
+                loginid,
+                residence,
+            };
+
+            window.LiveChatWidget.call('set_session_variables', sessionVariables);
+            window.LiveChatWidget.call('set_customer_email', email);
+            window.LiveChatWidget.call('set_customer_name', `${firstName} ${lastName}`);
+
+            window.LC_API.on_chat_ended = () => {
+                window.LiveChatWidget?.call('set_customer_email', email);
+                window.LiveChatWidget?.call('set_customer_name', `${firstName} ${lastName}`);
+            };
+        });
+    };
+
+    return {
+        init: initLiveChat,
+        LiveChatWidget: window.LiveChatWidget,
+    };
+};
+
+export default useLiveChat;
diff --git a/src/pages/guide/screens/Awareness/Awareness.tsx b/src/pages/guide/screens/Awareness/Awareness.tsx
@@ -2,11 +2,13 @@
 import { ReactComponent as ScamAdvancePaymentIcon } from '@/assets/scam-advance-payment.svg';
 import { ReactComponent as ScamPotIcon } from '@/assets/scam-pot.svg';
 import { ReactComponent as ScamSmsIcon } from '@/assets/scam-sms.svg';
+import { useLiveChat } from '@/hooks/custom-hooks';
 import { Localize } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import { Carousel } from '../../components';
 
 const Awareness = () => {
+    const { LiveChatWidget } = useLiveChat();
     const { isDesktop } = useDevice();
 
     return (
@@ -56,8 +58,7 @@ const Awareness = () => {
                                             className='guide__content-section--link'
                                             key={0}
                                             onClick={() => {
-                                                // TODO: Uncomment once live chat is integrated.
-                                                // window.LC_API.open_chat_window();
+                                                LiveChatWidget.call('maximize');
                                             }}
                                         />,
                                     ]}
diff --git a/src/pages/guide/screens/Awareness/__tests__/Awareness.spec.tsx b/src/pages/guide/screens/Awareness/__tests__/Awareness.spec.tsx
@@ -1,6 +1,10 @@
 import { render, screen } from '@testing-library/react';
 import Awareness from '../Awareness';
 
+jest.mock('@deriv-com/api-hooks', () => ({
+    useAuthData: jest.fn(() => ({ activeLoginid: null })),
+}));
+
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),
     useDevice: jest.fn(() => ({ isMobile: false })),
diff --git a/src/pages/guide/screens/FAQs/FAQs.tsx b/src/pages/guide/screens/FAQs/FAQs.tsx
@@ -1,8 +1,10 @@
+import { useLiveChat } from '@/hooks/custom-hooks';
 import { Localize, useTranslations } from '@deriv-com/translations';
 import { Accordion, Text, useDevice } from '@deriv-com/ui';
 import { URLConstants } from '@deriv-com/utils';
 
 const FAQs = () => {
+    const { LiveChatWidget } = useLiveChat();
     const { isDesktop } = useDevice();
     const { localize } = useTranslations();
 
@@ -99,8 +101,7 @@ const FAQs = () => {
                                 className='guide__content-section--link'
                                 key={0}
                                 onClick={() => {
-                                    // TODO: Uncomment once live chat is integrated.
-                                    // window.LC_API.open_chat_window();
+                                    LiveChatWidget.call('maximize');
                                 }}
                             />,
                         ]}
diff --git a/src/pages/guide/screens/GettingStarted/GettingStarted.tsx b/src/pages/guide/screens/GettingStarted/GettingStarted.tsx
diff --git a/src/pages/guide/screens/GettingStarted/__tests__/GettingStarted.spec.tsx b/src/pages/guide/screens/GettingStarted/__tests__/GettingStarted.spec.tsx
diff --git a/src/pages/guide/screens/Guide/__tests__/Guide.spec.tsx b/src/pages/guide/screens/Guide/__tests__/Guide.spec.tsx
diff --git a/src/routes/AppContent/index.tsx b/src/routes/AppContent/index.tsx
