nuzhy/CSIT-1704/intercom integration

global.d.ts

@@ -2,10 +2,14 @@ declare global {
     interface Window {
         Analytics: unknown;
         DD_RUM: object | undefined;
+        DerivInterCom: {
+            initialize: (config: ICConfig) => void;
+        };
         FreshChat: {
             initialize: (config: FreshChatConfig) => void;
         };
         GrowthbookFeatures: { [key: string]: boolean };
+        Intercom: ((action: IntercomAction) => void) | undefined;
         LC_API: {
             on_chat_ended: VoidFunction;
             open_chat_window: VoidFunction;
@@ -23,6 +27,7 @@ declare global {
         };
         fcWidget: {
             close: VoidFunction;
+            destroy: VoidFunction;
             hide: VoidFunction;
             isInitialized: () => boolean;
             isLoaded: () => boolean;
@@ -31,6 +36,7 @@ declare global {
             setConfig: (config: Record<string, Record<string, unknown>>) => void;
             show: VoidFunction;
             user: {
+                clear: () => Promise<void>;
                 setLocale(locale: string): void;
             };
         };

src/components/AppFooter/Livechat.tsx

@@ -1,5 +1,6 @@
 import { useGrowthbookGetFeatureValue, useLiveChat } from '@/hooks/custom-hooks';
 import useFreshChat from '@/hooks/custom-hooks/useFreshchat';
+import useIntercom from '@/hooks/custom-hooks/useIntercom';
 import Chat from '@/utils/chat';
 import { LegacyLiveChatOutlineIcon } from '@deriv/quill-icons';
 import { useTranslations } from '@deriv-com/translations';
@@ -11,9 +12,13 @@ const Livechat = () => {
     const [isFreshChatEnabled, isGBLoaded] = useGrowthbookGetFeatureValue({
         featureFlag: 'enable_freshworks_live_chat_p2p',
     });
+    const [isIntercomEnabled] = useGrowthbookGetFeatureValue({
+        featureFlag: 'enable_intercom_p2p',
+    });
 
     const token = localStorage.getItem('authToken') || null;
-    const freshChat = useFreshChat(token);
+    const freshChat = useFreshChat(token, isFreshChatEnabled);
+    const icChat = useIntercom(token, isIntercomEnabled);
 
     setInterval(() => {
         /*  This is for livechat last open state, 
@@ -23,7 +28,7 @@ const Livechat = () => {
         }
     }, 10);
 
-    if (!isGBLoaded || (isFreshChatEnabled && !freshChat?.isReady)) {
+    if (!isGBLoaded || (isFreshChatEnabled && !freshChat?.isReady) || (isIntercomEnabled && !icChat?.isReady)) {
         return null;
     }
 

src/components/AppHeader/AppHeader.tsx

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { getOauthUrl } from '@/constants';
 import { api, useGrowthbookGetFeatureValue, useOAuth } from '@/hooks';
 import { getCurrentRoute } from '@/utils';
+import Chat from '@/utils/chat';
 import { StandaloneCircleUserRegularIcon } from '@deriv/quill-icons';
 import { useAuthData } from '@deriv-com/api-hooks';
 import { useTranslations } from '@deriv-com/translations';
@@ -55,7 +56,14 @@ const AppHeader = () => {
                         </Tooltip>
                     )}
                     <AccountSwitcher account={activeAccount!} />
-                    <Button className='mr-6' onClick={oAuthLogout} size='md'>
+                    <Button
+                        className='mr-6'
+                        onClick={() => {
+                            Chat.clear();
+                            oAuthLogout();
+                        }}
+                        size='md'
+                    >
                         <Text size='sm' weight='bold'>
                             {localize('Logout')}
                         </Text>

src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx

@@ -1,7 +1,8 @@
 import { ComponentProps, ReactNode } from 'react';
 import { ACCOUNT_LIMITS, HELP_CENTRE, RESPONSIBLE } from '@/constants';
-import { useOAuth } from '@/hooks/custom-hooks';
+import { useGrowthbookGetFeatureValue, useOAuth } from '@/hooks/custom-hooks';
 import useFreshChat from '@/hooks/custom-hooks/useFreshchat';
+import useIntercom from '@/hooks/custom-hooks/useIntercom';
 import Chat from '@/utils/chat';
 import {
     BrandDerivLogoCoralIcon,
@@ -39,8 +40,16 @@ export const MobileMenuConfig = () => {
     const { localize } = useTranslations();
     const { oAuthLogout } = useOAuth();
 
+    const [isFreshChatEnabled] = useGrowthbookGetFeatureValue({
+        featureFlag: 'enable_freshworks_live_chat_p2p',
+    });
+    const [isIntercomEnabled] = useGrowthbookGetFeatureValue({
+        featureFlag: 'enable_intercom_p2p',
+    });
+
     const token = localStorage.getItem('authToken') || null;
-    useFreshChat(token);
+    useFreshChat(token, isFreshChatEnabled);
+    useIntercom(token, isIntercomEnabled);
 
     const menuConfig: TMenuConfig[] = [
         [
@@ -129,6 +138,7 @@ export const MobileMenuConfig = () => {
                 label: localize('Log out'),
                 LeftComponent: LegacyLogout1pxIcon,
                 onClick: () => {
+                    Chat.clear();
                     oAuthLogout();
                 },
                 removeBorderBottom: true,

src/hooks/custom-hooks/useFreshchat.ts

@@ -1,41 +1,41 @@
 import { useEffect, useState } from 'react';
 import { useScript } from 'usehooks-ts';
 
-const useFreshChat = (token: string | null) => {
-    const scriptStatus = useScript('https://static.deriv.com/scripts/freshchat/v1.0.2.js');
+const useFreshChat = (token: string | null, flag: boolean) => {
+    const freshchatScript = 'https://static.deriv.com/scripts/freshchat/v1.0.2.js';
+    const scriptStatus = useScript(flag ? freshchatScript : null);
     const [isReady, setIsReady] = useState(false);
-    const language = localStorage.getItem('i18n_language') || 'EN';
 
     useEffect(() => {
-        const checkFcWidget = (intervalId: NodeJS.Timeout) => {
-            if (typeof window !== 'undefined') {
-                if (window.fcWidget?.isInitialized() == true && !isReady) {
+        if (!flag || scriptStatus !== 'ready' || !window.FreshChat || !window.fcSettings) {
+            return;
+        }
+
+        let checkInterval: NodeJS.Timeout;
+
+        const initializeFreshChat = () => {
+            window.FreshChat.initialize({
+                hideButton: true,
+                token,
+            });
+
+            checkInterval = setInterval(() => {
+                if (window?.fcWidget?.isInitialized()) {
                     setIsReady(true);
-                    clearInterval(intervalId);
+                    clearInterval(checkInterval);
                 }
-            }
+            }, 500);
         };
 
-        const initFreshChat = async () => {
-            if (scriptStatus === 'ready' && window.FreshChat && window.fcSettings) {
-                window.FreshChat.initialize({
-                    hideButton: true,
-                    token,
-                });
+        initializeFreshChat();
 
-                const intervalId: NodeJS.Timeout = setInterval(() => checkFcWidget(intervalId), 500);
-
-                return () => clearInterval(intervalId);
+        return () => {
+            if (checkInterval) {
+                clearInterval(checkInterval);
             }
         };
+    }, [flag, scriptStatus, token]);
 
-        initFreshChat();
-    }, [isReady, language, scriptStatus, token]);
-
-    return {
-        isReady,
-        widget: window.fcWidget,
-    };
+    return { isReady };
 };
-
 export default useFreshChat;

src/hooks/custom-hooks/useIntercom.ts

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+import { useScript } from 'usehooks-ts';
+
+const useIntercom = (token: string | null, flag: boolean) => {
+    const intercomScript = 'https://static.deriv.com/scripts/intercom/v1.0.1.js';
+    const scriptStatus = useScript(flag ? intercomScript : null);
+    const [isReady, setIsReady] = useState(false);
+
+    useEffect(() => {
+        if (!flag || scriptStatus !== 'ready' || !window?.DerivInterCom) return;
+
+        let intervalId: NodeJS.Timeout;
+
+        const initIntercom = () => {
+            window.DerivInterCom.initialize({
+                hideLauncher: true,
+                token,
+            });
+
+            intervalId = setInterval(() => {
+                if (window?.Intercom && !isReady) {
+                    setIsReady(true);
+                    clearInterval(intervalId);
+                }
+            }, 500);
+        };
+
+        initIntercom();
+
+        return () => {
+            if (intervalId) clearInterval(intervalId);
+        };
+    }, [flag, isReady, scriptStatus, token]);
+
+    return { isReady };
+};
+
+export default useIntercom;

src/utils/chat.ts

@@ -4,12 +4,36 @@
 import getFeatureFlag from './get-featureflag';
 
 const Chat = {
+    clear: async () => {
+        const { isFreshChat, isIntercom } = await Chat.getFlags();
+        if (isFreshChat) {
+            window.fcWidget?.user.clear().then(() => window.fcWidget.destroy());
+        } else if (isIntercom && window.Intercom) {
+            window.Intercom('shutdown');
+        }
+    },
+
     close: async () => {
         (await Chat.isFreshChat()) ? window.fcWidget?.close() : window.LiveChatWidget?.call('hide');
     },
+
+    getFlags: async () => {
+        const [isFreshChat, isIntercom] = await Promise.all([Chat.isFreshChat(), Chat.isIntercom()]);
+        return { isFreshChat, isIntercom };
+    },
+
     isFreshChat: async () => getFeatureFlag('enable_freshworks_live_chat_p2p'),
+    isIntercom: async () => getFeatureFlag('enable_intercom_p2p'),
+
     open: async () => {
-        (await Chat.isFreshChat()) ? window.fcWidget?.open() : window.LiveChatWidget?.call('maximize');
+        const { isFreshChat, isIntercom } = await Chat.getFlags();
+        if (isFreshChat) {
+            window.fcWidget?.open();
+        } else if (isIntercom && window.Intercom) {
+            window.Intercom('show');
+        } else {
+            window.LiveChatWidget?.call('maximize');
+        }
     },
 };