Nuzhy/RSKT-1750/intercom integration

src/app/app-content.jsx

@@ -7,8 +7,10 @@
 import TncStatusUpdateModal from '@/components/tnc-status-update-modal';
 import TransactionDetailsModal from '@/components/transaction-details';
 import { api_base, ApiHelpers, ServerTime } from '@/external/bot-skeleton';
+import { V2GetActiveToken } from '@/external/bot-skeleton/services/api/appId';
 import { CONNECTION_STATUS } from '@/external/bot-skeleton/services/api/observables/connection-status-stream';
 import { useApiBase } from '@/hooks/useApiBase';
+import useIntercom from '@/hooks/useIntercom';
 import { useStore } from '@/hooks/useStore';
 import useThemeSwitcher from '@/hooks/useThemeSwitcher';
 import useTrackjs from '@/hooks/useTrackjs';
@@ -56,6 +58,9 @@
 
     useLiveChat(livechat_client_information);
 
+    const token = V2GetActiveToken() ?? null;
+    useIntercom(token);
+
     useEffect(() => {
         if (connectionStatus === CONNECTION_STATUS.OPENED) {
             setIsApiInitialized(true);
@@ -169,7 +174,7 @@
         if (client) {
             initHotjar(client);
         }
     }, []);
 
     if (common?.error) return null;
 

src/components/chat/Livechat.tsx

@@ -1,41 +1,32 @@
-import { useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
-import { V2GetActiveToken } from '@/external/bot-skeleton/services/api/appId';
+import { useIsIntercomAvailable } from '@/hooks/useIntercom';
 import { LegacyLiveChatOutlineIcon } from '@deriv/quill-icons/Legacy';
 import { localize } from '@deriv-com/translations';
 import { Tooltip, useDevice } from '@deriv-com/ui';
-import useFreshChat from './useFreshchat';
 import useIsLiveChatWidgetAvailable from './useIsLiveChatWidgetAvailable';
 
 const Livechat = observer(() => {
     const { isDesktop } = useDevice();
 
-    const token = V2GetActiveToken() ?? null;
-
     const { is_livechat_available } = useIsLiveChatWidgetAvailable();
-    const { isReady, featureFlagValue, widget } = useFreshChat(token);
-
-    useEffect(() => {
-        window.enable_freshworks_live_chat = !!featureFlagValue;
-    }, [featureFlagValue]);
+    const icAvailable = useIsIntercomAvailable();
 
-    const isFreshchatEnabledButNotReady = featureFlagValue && !isReady;
-    const isNeitherChatNorLiveChatAvailable = !is_livechat_available && !featureFlagValue;
+    const isNeitherChatNorLiveChatAvailable = !is_livechat_available && !icAvailable;
 
-    if (isFreshchatEnabledButNotReady || isNeitherChatNorLiveChatAvailable) {
+    if (isNeitherChatNorLiveChatAvailable) {
         return null;
     }
 
     // Quick fix for making sure livechat won't popup if feature flag is late to enable.
     // We will add a refactor after this
     setInterval(() => {
-        if (featureFlagValue) {
+        if (icAvailable) {
             window.LiveChatWidget?.call('destroy');
         }
     }, 10);
 
     const liveChatClickHandler = () => {
-        featureFlagValue ? widget.open() : window.LiveChatWidget?.call('maximize');
+        icAvailable ? window.Intercom('show') : window.LiveChatWidget?.call('maximize');
     };
 
     if (isDesktop)

src/components/layout/header/mobile-menu/use-mobile-menu-config.tsx

@@ -4,6 +4,7 @@ import useIsLiveChatWidgetAvailable from '@/components/chat/useIsLiveChatWidgetA
 import { standalone_routes } from '@/components/shared';
 import { useOauth2 } from '@/hooks/auth/useOauth2';
 import useRemoteConfig from '@/hooks/growthbook/useRemoteConfig';
+import { useIsIntercomAvailable } from '@/hooks/useIntercom';
 import useThemeSwitcher from '@/hooks/useThemeSwitcher';
 import RootStore from '@/stores/root-store';
 import {
@@ -48,6 +49,7 @@ const useMobileMenuConfig = (client?: RootStore['client']) => {
     const { cs_chat_whatsapp } = data;
 
     const { is_livechat_available } = useIsLiveChatWidgetAvailable();
+    const icAvailable = useIsIntercomAvailable();
 
     const menuConfig: TMenuConfig[] = [
         [
@@ -117,15 +119,13 @@ const useMobileMenuConfig = (client?: RootStore['client']) => {
                           target: '_blank',
                       }
                     : null,
-                is_livechat_available
+                is_livechat_available || icAvailable
                     ? {
                           as: 'button',
                           label: localize('Live chat'),
                           LeftComponent: Livechat,
                           onClick: () => {
-                              window.enable_freshworks_live_chat
-                                  ? window.fcWidget.open()
-                                  : window.LiveChatWidget?.call('maximize');
+                              icAvailable ? window.Intercom('show') : window.LiveChatWidget?.call('maximize');
                           },
                       }
                     : null,

src/global.d.ts

@@ -1,12 +1,8 @@
 declare global {
     interface Window {
         __webpack_public_path__: string;
-        enable_freshworks_live_chat: boolean;
         Analytics: unknown;
         DD_RUM: object | undefined;
-        FreshChat: {
-            initialize: (config: FreshChatConfig) => void;
-        };
         GrowthbookFeatures: { [key: string]: boolean };
         LC_API: {
             on_chat_ended: VoidFunction;
@@ -24,26 +20,10 @@ declare global {
         dataLayer: {
             push: (event: { [key: string]: boolean | number | string; event: string }) => void;
         };
-        fcSettings: {
-            [key: string]: unknown;
-        };
-        fcWidget: {
-            close: VoidFunction;
-            hide: VoidFunction;
-            isInitialized: () => boolean;
-            isLoaded: () => boolean;
-            on: (key: string, callback: VoidFunction) => void;
-            open: VoidFunction;
-            setConfig: (config: Record<string, Record<string, unknown>>) => void;
-            show: VoidFunction;
-            user: {
-                setLocale: (locale: string) => void;
-                clear: VoidFunction;
-            };
-        };
-        fcWidgetMessengerConfig: {
-            config: Record<string, Record<string, unknown>>;
+        DerivInterCom: {
+            initialize: (config: IntercomConfig) => void;
         };
+        Intercom: any;
     }
 }
 

src/hooks/useIntercom.ts

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react';
+import { useScript } from 'usehooks-ts';
+import useGrowthbookGetFeatureValue from './growthbook/useGrowthbookGetFeatureValue';
+
+export const useIntercom = (token: string | null) => {
+    const intercom_script = 'https://static.deriv.com/scripts/intercom/v1.0.2.js';
+    const { featureFlagValue: enable_intercom } = useGrowthbookGetFeatureValue({
+        featureFlag: 'enable_intercom_dbot',
+    });
+    const scriptStatus = useScript(enable_intercom ? intercom_script : null);
+
+    useEffect(() => {
+        if (!enable_intercom || scriptStatus !== 'ready' || !window?.DerivInterCom) return;
+
+        let intervalId: NodeJS.Timeout;
+
+        const initIntercom = () => {
+            window.DerivInterCom.initialize({
+                hideLauncher: true,
+                token,
+            });
+
+            intervalId = setInterval(() => {
+                if (window?.Intercom) {
+                    clearInterval(intervalId);
+                }
+            }, 500);
+        };
+
+        initIntercom();
+
+        return () => {
+            clearInterval(intervalId);
+        };
+    }, [enable_intercom, scriptStatus, token]);
+};
+
+export const useIsIntercomAvailable = () => {
+    const [is_ready, setIsReady] = useState(false);
+
+    useEffect(() => {
+        const TIMEOUT_DURATION = 5000;
+        const startTime = Date.now();
+
+        const checkIntercom = setInterval(() => {
+            if (typeof window.Intercom === 'function') {
+                setIsReady(true);
+                clearInterval(checkIntercom);
+            } else if (Date.now() - startTime >= TIMEOUT_DURATION) {
+                clearInterval(checkIntercom);
+            }
+        }, 100);
+
+        return () => clearInterval(checkIntercom);
+    }, []);
+
+    return is_ready;
+};
+
+export default useIntercom;

src/stores/client-store.ts

@@ -319,8 +319,13 @@ export default class ClientStore {
         window.LC_API?.close_chat?.();
         window.LiveChatWidget?.call('hide');
 
-        // disable freshchat
-        window.fcWidget?.close?.();
-        window.fcWidget?.user?.clear?.();
+        // shutdown and initialize intercom
+        if (window.Intercom) {
+            window.Intercom('shutdown');
+            window.DerivInterCom.initialize({
+                hideLauncher: true,
+                token: null,
+            });
+        }
     };
 }