From 717e6e7b3927e083769c0082bccb8beca9f50485 Mon Sep 17 00:00:00 2001 From: Nuzhy-Deriv Date: Fri, 15 Nov 2024 11:54:51 +0800 Subject: [PATCH] chore: intercom messenger integrated --- package-lock.json | 6 ++++++ package.json | 1 + src/javascript/_common/base/livechat.js | 2 +- src/javascript/_common/utility.js | 9 +++++---- src/javascript/app/base/header.js | 8 ++++---- src/javascript/app/pages/livechat.jsx | 24 ++++++++++++++++++++---- 6 files changed, 37 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index cfd75a34be1..a0c3569af32 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "@deriv-com/utils": "^0.0.38", "@deriv/deriv-api": "^1.0.15", "@deriv/quill-icons": "^1.23.1", + "@intercom/messenger-js-sdk": "^0.0.14", "@livechat/customer-sdk": "4.0.2", "canvas-toBlob": "1.0.0", "classnames": "2.2.5", @@ -2832,6 +2833,11 @@ "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==", "dev": true }, + "node_modules/@intercom/messenger-js-sdk": { + "version": "0.0.14", + "resolved": "https://registry.npmjs.org/@intercom/messenger-js-sdk/-/messenger-js-sdk-0.0.14.tgz", + "integrity": "sha512-2dH4BDAh9EI90K7hUkAdZ76W79LM45Sd1OBX7t6Vzy8twpNiQ5X+7sH9G5hlJlkSGnf+vFWlFcy9TOYAyEs1hA==" + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.5", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", diff --git a/package.json b/package.json index a0c3ec3bbcc..d0aa84fb72a 100644 --- a/package.json +++ b/package.json @@ -112,6 +112,7 @@ "@deriv-com/utils": "^0.0.38", "@deriv/deriv-api": "^1.0.15", "@deriv/quill-icons": "^1.23.1", + "@intercom/messenger-js-sdk": "^0.0.14", "@livechat/customer-sdk": "4.0.2", "canvas-toBlob": "1.0.0", "classnames": "2.2.5", diff --git a/src/javascript/_common/base/livechat.js b/src/javascript/_common/base/livechat.js index 1031ffbaf20..2ca0a922499 100644 --- a/src/javascript/_common/base/livechat.js +++ b/src/javascript/_common/base/livechat.js @@ -100,7 +100,7 @@ const LiveChat = (() => { // Reroute group const rerouteGroup = () => { - if (!window.fcWidget) { + if (!window.intercomSettings) { LiveChat.livechatDeletion().then(() => { LiveChat.liveChatInitialization().then(() => { LiveChat.initialize(); diff --git a/src/javascript/_common/utility.js b/src/javascript/_common/utility.js index 618f9961a55..318ab2a1116 100644 --- a/src/javascript/_common/utility.js +++ b/src/javascript/_common/utility.js @@ -1,3 +1,4 @@ +const { show } = require('@intercom/messenger-js-sdk'); const extend = require('extend'); const getCurrentBinaryDomain = require('../config').getCurrentBinaryDomain; require('./lib/polyfills/element.matches'); @@ -290,8 +291,8 @@ const lc_licenseID = 12049137; const lc_clientID = '66aa088aad5a414484c1fd1fa8a5ace7'; const openChat = () => { - if (window.fcWidget) { - window.fcWidget.open(); + if (window.intercomSettings) { + show(); } else { window.LC_API.open_chat_window(); } @@ -299,8 +300,8 @@ const openChat = () => { const openChatWithParam = () => { const interval = setInterval(() => { - if (window.fcWidget) { - window.fcWidget.open(); + if (window.intercomSettings) { + show(); clearInterval(interval); } else if (window.LiveChatWidget) { window.LiveChatWidget?.on('ready', () => { diff --git a/src/javascript/app/base/header.js b/src/javascript/app/base/header.js index 5f29ce9a82b..c4a7e43224d 100644 --- a/src/javascript/app/base/header.js +++ b/src/javascript/app/base/header.js @@ -1,4 +1,5 @@ // const BinaryPjax = require('./binary_pjax'); +const { shutdown } = require('@intercom/messenger-js-sdk'); const Client = require('./client'); const BinarySocket = require('./socket'); const AuthClient = require('../../_common/auth'); @@ -656,10 +657,9 @@ const Header = (() => { }; const logoutOnClick = async () => { - window.fcWidget?.user.clear().then( - () => window.fcWidget.destroy(), - () => {} - ); + if (window.intercomSettings) { + shutdown(); + } // This will wrap the logout call Client.sendLogoutRequest with our own logout iframe, which is to inform Hydra that the user is logging out // and the session should be cleared on Hydra's side. Once this is done, it will call the passed-in logout handler Client.sendLogoutRequest. // If Hydra authentication is not enabled, the logout handler Client.sendLogoutRequest will just be called instead. diff --git a/src/javascript/app/pages/livechat.jsx b/src/javascript/app/pages/livechat.jsx index 18fe7580b53..a31c557e7bc 100644 --- a/src/javascript/app/pages/livechat.jsx +++ b/src/javascript/app/pages/livechat.jsx @@ -1,18 +1,34 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom'; -import useFreshChat from '../hooks/useFreshChat'; +import Intercom from '@intercom/messenger-js-sdk'; import useGrowthbookGetFeatureValue from '../hooks/useGrowthbookGetFeatureValue'; const LiveChat = ({ cs_live_chat }) => { const loginid = localStorage.getItem('active_loginid'); const client_info = loginid && JSON.parse(localStorage.getItem('client.accounts') || '{}')[loginid]; - const token = client_info?.token ?? null; const [isFreshChatEnabled] = useGrowthbookGetFeatureValue({ featureFlag: 'enable_freshworks_live_chat', }); - useFreshChat(token); + + useEffect(() => { + if (!isFreshChatEnabled) return; + + const intercomConfig = { + app_id : 'rfwdy059', + hide_default_launcher: true, + }; + + if (loginid && client_info) { + intercomConfig.email = client_info.email; + intercomConfig.name = client_info.email.split('@')[0]; + intercomConfig.user_id = client_info.user_id; + intercomConfig.created_at = client_info.created_at; + } + + Intercom(intercomConfig); + }, [isFreshChatEnabled, client_info, loginid]); if (!isFreshChatEnabled && !cs_live_chat) return null;