CSIT-1539/Prince/Release PR/Freshchat Integration + Feature Flag togg…

…le (deriv-com#17196) * chore: fresh chat integration * fix: update script url * fix: update freshchat initialization * fix: show freshchat widget by default * fix: update useFreshChat hook * chore: loaded script from use-freshchat hook * fix: token undefined issue * fix: token issue for non-loggedin user * fix: remove temp auth * fix: chat ready issue, remove user when logged out * fix: update use freshchat hook * fix: point to freshchat js * fix: test temp js * fix: update freshchat hook * fix: update freshchat hook * fix: update locale config * fix: check fcwidget available * fix: update script and condition to check widget loaded * fix: update script * fix: remove language configs * fix: point to temp js * fix: freshchat url * chore: enable feature flag based on growthbook * chore: added query param flag enabler * fix: remove console * fix: close livechat widget when freshchat is enabled --------- Co-authored-by: Nuzhy-Deriv <[email protected]>
heorhi-deriv · Oct 16, 2024 · 401990b · 401990b
1 parent 047476e
commit 401990b
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 6 deletions.
diff --git a/packages/core/src/App/Components/Elements/LiveChat/live-chat.tsx b/packages/core/src/App/Components/Elements/LiveChat/live-chat.tsx
@@ -1,14 +1,40 @@
 import { Popover, Icon, Text } from '@deriv/components';
 import { useDevice } from '@deriv-com/ui';
 import { Localize } from '@deriv/translations';
-import { useIsLiveChatWidgetAvailable } from '@deriv/hooks';
+import { useGrowthbookGetFeatureValue, useIsLiveChatWidgetAvailable } from '@deriv/hooks';
+import useFreshChat from 'App/Components/Elements/LiveChat/use-freshchat';
+import { observer, useStore } from '@deriv/stores';
 
-const LiveChat = ({ showPopover }: { showPopover?: boolean }) => {
+const LiveChat = observer(({ showPopover }: { showPopover?: boolean }) => {
+    const { client } = useStore();
+    const { loginid, accounts } = client;
     const { isDesktop } = useDevice();
+
+    const active_account = accounts?.[loginid ?? ''];
+    const token = active_account ? active_account.token : null;
+
     const { is_livechat_available } = useIsLiveChatWidgetAvailable();
-    const liveChatClickHandler = () => window.LiveChatWidget.call('maximize');
+    const freshChat = useFreshChat(token);
+
+    const [enable_freshworks_live_chat] = useGrowthbookGetFeatureValue({
+        featureFlag: 'enable_freshworks_live_chat',
+    });
+
+    const chat = enable_freshworks_live_chat ? freshChat : null;
+
+    if ((enable_freshworks_live_chat && !chat?.isReady) || !is_livechat_available) 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 (enable_freshworks_live_chat) {
+            window.LiveChatWidget?.call('minimize');
+        }
+    }, 10);
 
-    if (!is_livechat_available) return null;
+    const liveChatClickHandler = () => {
+        enable_freshworks_live_chat ? freshChat.widget.open() : window.LiveChatWidget?.call('maximize');
+    };
 
     if (isDesktop)
         return (
@@ -41,6 +67,6 @@ const LiveChat = ({ showPopover }: { showPopover?: boolean }) => {
             </Text>
         </div>
     );
-};
+});
 
 export default LiveChat;
diff --git a/packages/core/src/App/Components/Elements/LiveChat/use-freshchat.ts b/packages/core/src/App/Components/Elements/LiveChat/use-freshchat.ts
@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import { useScript } from 'usehooks-ts';
+
+const useFreshChat = (token: string | null) => {
+    const scriptStatus = useScript('https://static.deriv.com/scripts/freshchat.js');
+    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) {
+                    // window.fcWidget?.user.setLocale(language.toLowerCase());
+                    setIsReady(true);
+                    clearInterval(intervalId);
+                }
+            }
+        };
+
+        const initFreshChat = async () => {
+            if (scriptStatus === 'ready' && window.FreshChat && window.fcSettings) {
+                window.FreshChat.initialize({
+                    token,
+                    hideButton: true,
+                });
+
+                const intervalId = setInterval(() => checkFcWidget(intervalId), 500);
+
+                return () => clearInterval(intervalId);
+            }
+        };
+
+        initFreshChat();
+    }, [isReady, language, scriptStatus, token]);
+
+    return {
+        isReady,
+        widget: window.fcWidget,
+    };
+};
+
+export default useFreshChat;
diff --git a/packages/core/src/App/Components/Routes/language-link.tsx b/packages/core/src/App/Components/Routes/language-link.tsx
@@ -32,6 +32,7 @@ const LanguageLink = observer(({ is_clickable = false, lang, toggleModal }: TLan
     const handleLanguageChange = async (lang: string) => {
         await changeSelectedLanguage(lang);
         switchLanguage(lang);
+        // window.fcWidget?.user.setLocale(lang.toLowerCase());
         toggleModal?.();
     };
 

diff --git a/packages/core/src/Services/logout.js b/packages/core/src/Services/logout.js
@@ -5,8 +5,10 @@ import WS from './ws-methods';
 export const requestLogout = () => WS.logout().then(doLogout);
 
 function endChat() {
-    window.LC_API?.close_chat();
+    window.LC_API?.close_chat?.();
     window.LiveChatWidget?.call('hide');
+    window.fcWidget?.close();
+    window.fcWidget?.user.clear();
 }
 
 const doLogout = response => {

diff --git a/packages/core/src/Stores/client-store.js b/packages/core/src/Stores/client-store.js
@@ -1801,7 +1801,9 @@ export default class ClientStore extends BaseStore {
                 utm_campaign: ppc_campaign_cookies?.utm_campaign,
                 utm_content: ppc_campaign_cookies?.utm_content,
                 domain: window.location.hostname,
+                url: window.location.href,
             };
+
             if (this.user_id) analytics_config.user_id = this.user_id;
             Analytics.setAttributes(analytics_config);
         }, 4);

diff --git a/packages/core/src/Stores/ui-store.js b/packages/core/src/Stores/ui-store.js
@@ -663,6 +663,7 @@ export default class UIStore extends BaseStore {
     }
 
     toggleLanguageSettingsModal() {
+        window.fcWidget?.close();
         this.is_language_settings_modal_on = !this.is_language_settings_modal_on;
     }
 

diff --git a/packages/core/src/Utils/Analytics/index.ts b/packages/core/src/Utils/Analytics/index.ts
@@ -41,6 +41,7 @@ export const AnalyticsInitializer = async () => {
                         utm_campaign: ppc_campaign_cookies?.utm_campaign,
                         utm_content: ppc_campaign_cookies?.utm_content,
                         domain: window.location.hostname,
+                        url: window.location.href,
                     },
                 },
             };

diff --git a/types/global.d.ts b/types/global.d.ts
@@ -13,6 +13,32 @@ declare global {
             init: (args: any) => any;
         };
         DD_RUM: object | undefined;
+        fcWidget: {
+            show: VoidFunction;
+            hide: VoidFunction;
+            open: VoidFunction;
+            on: (key: string, callback: VoidFunction) => void;
+            setConfig: (config: Record<string, Record<string, any>>) => void;
+            isLoaded: () => boolean;
+            isInitialized: () => boolean;
+            user: {
+                setLocale(locale: string): void;
+            };
+        };
+        fcWidgetMessengerConfig: {
+            config: Record<string, Record<string, any>>;
+        };
+        fcSettings: {
+            [key: string]: any;
+        };
+        FreshChat: {
+            initialize: (config: FreshChatConfig) => void;
+        };
+    }
+    interface FreshChatConfig {
+        token: string | null;
+        locale?: string;
+        hideButton?: boolean;
     }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -663,6 +663,7 @@ export default class UIStore extends BaseStore { @@
         }
         toggleLanguageSettingsModal() {
+            window.fcWidget?.close();
             this.is_language_settings_modal_on = !this.is_language_settings_modal_on;
         }
@@ Expand Down @@