Skip to content

Commit

Permalink
Merge pull request #848 from Nuzhy-Deriv/nuzhy/freshchat-integration
Browse files Browse the repository at this point in the history 
Nuzhy/CSIT-1457/freshchat integration
  • Loading branch information
@nijil-deriv
nijil-deriv authored Nov 12, 2024
2 parents 3b88767 + 2240201 commit 3a54013
Show file tree
Hide file tree
Showing 14 changed files with 296 additions and 62 deletions.
16 changes: 8 additions & 8 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,10 +106,10 @@
"@binary-com/binary-document-uploader": "^2.4.4",
"@binary-com/binary-style": "^0.2.26",
"@binary-com/webtrader-charts": "^0.6.2",
"@deriv-com/analytics": "^1.18.0",
"@deriv-com/analytics": "^1.26.1",
"@deriv-com/auth-client": "^1.0.15",
"@deriv-com/quill-ui": "^1.16.2",
"@deriv-com/utils": "^0.0.37",
"@deriv-com/utils": "^0.0.38",
"@deriv/deriv-api": "^1.0.15",
"@deriv/quill-icons": "^1.23.1",
"@livechat/customer-sdk": "4.0.2",
Expand Down
38 changes: 35 additions & 3 deletions src/javascript/_common/analytics.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,43 @@
const DerivAnalytics = require('@deriv-com/analytics');
const CountryUtils = require('@deriv-com/utils').CountryUtils;
const Cookies = require('js-cookie');
const LocalStore = require('./storage').LocalStore;
const Language = require('./language');
const { getAppId } = require('../config');

const Analytics = (() => {
const init = () => {
const init = async () => {
const loginid = LocalStore?.get('active_loginid');
const active_account = loginid && JSON.parse(localStorage.getItem('client.accounts') || '{}')[loginid];
const utmData = Cookies.get('utm_data');
const ppcCampaignCookies = utmData ? JSON.parse(utmData) : {
utm_campaign: 'no campaign',
utm_content : 'no content',
utm_medium : 'no medium',
utm_source : 'no source',
};

if (process.env.RUDDERSTACK_KEY && process.env.GROWTHBOOK_CLIENT_KEY) {
DerivAnalytics.Analytics.initialise({
growthbookKey : process.env.GROWTHBOOK_CLIENT_KEY, // optional key to enable A/B tests
rudderstackKey: process.env.RUDDERSTACK_KEY,
growthbookKey : process.env.GROWTHBOOK_CLIENT_KEY, // optional key to enable A/B tests
rudderstackKey : process.env.RUDDERSTACK_KEY,
growthbookOptions: {
attributes: {
loggedIn : !!Cookies.get('clients_information'),
account_type : active_account?.account_type || 'unlogged',
app_id : String(getAppId()),
country : await CountryUtils.getCountry(),
device_language: navigator?.language || 'en-EN',
device_type : window.innerWidth <= 600 ? 'mobile' : 'desktop',
domain : window.location.hostname,
url : window.location.href,
user_language : Language.get().toLowerCase(),
utm_campaign : ppcCampaignCookies?.utm_campaign,
utm_content : ppcCampaignCookies?.utm_content,
utm_medium : ppcCampaignCookies?.utm_medium,
utm_source : ppcCampaignCookies?.utm_source,
},
},
});
}
};
Expand Down
45 changes: 16 additions & 29 deletions src/javascript/_common/base/livechat.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,12 @@ const LiveChat = (() => {
...utm_campaign && { utm_campaign },
...utm_medium && { utm_medium },
};
window.LiveChatWidget.call('set_session_variables', session_variables);
window.LiveChatWidget?.call('set_session_variables', session_variables);
};

const setNameEmail = () => {
if (client_email) window.LiveChatWidget.call('set_customer_email', client_email);
if (first_name && last_name) window.LiveChatWidget.call('set_customer_name', `${first_name} ${last_name}`);
if (client_email) window.LiveChatWidget?.call('set_customer_email', client_email);
if (first_name && last_name) window.LiveChatWidget?.call('set_customer_name', `${first_name} ${last_name}`);
};

BinarySocket.wait('get_settings').then((response) => {
Expand All @@ -55,12 +55,12 @@ const LiveChat = (() => {

const initialize = () => {
if (window.LiveChatWidget) {
window.LiveChatWidget.on('ready', () => {
window.LiveChatWidget?.on('ready', () => {
setSessionVariables();
if (!ClientBase.isLoggedIn()){
window.LC_API.on_chat_ended = () => {
window.LiveChatWidget.call('set_customer_email', ' ');
window.LiveChatWidget.call('set_customer_name', ' ');
window.LiveChatWidget?.call('set_customer_email', ' ');
window.LiveChatWidget?.call('set_customer_name', ' ');
};
} else {
window.LC_API.on_chat_ended = () => {
Expand All @@ -71,28 +71,13 @@ const LiveChat = (() => {
}
};

// Fallback LiveChat icon
const livechatFallback = () => {
let livechat_shell;
const livechat_id = 'gtm-deriv-livechat';

if (window.LiveChatWidget){
window.LiveChatWidget.on('ready', () => {
livechat_shell = document.getElementById(livechat_id);
livechat_shell.style.display = 'flex';
livechat_shell.addEventListener('click', () => window.LC_API.open_chat_window());
});
}

};

// Delete existing LiveChat instance when there is no chat running
const livechatDeletion = () => new Promise ((resolve) => {
if (window.LiveChatWidget){
window.LiveChatWidget.on('ready', () => {
window.LiveChatWidget?.on('ready', () => {
try {
if (window.LiveChatWidget.get('customer_data').status !== 'chatting') {
window.LiveChatWidget.call('destroy');
if (window.LiveChatWidget?.get('customer_data').status !== 'chatting') {
window.LiveChatWidget?.call('destroy');
resolve();
}
} catch (e) {
Expand All @@ -114,17 +99,19 @@ const LiveChat = (() => {

// Reroute group
const rerouteGroup = () => {
LiveChat.livechatDeletion().then(() => {
LiveChat.liveChatInitialization().then(() => {
LiveChat.initialize();

if (!window.fcWidget) {
LiveChat.livechatDeletion().then(() => {
LiveChat.liveChatInitialization().then(() => {
LiveChat.initialize();
});
});
});
}
};

return {
initialize,
livechatDeletion,
livechatFallback,
liveChatInitialization,
rerouteGroup,
};
Expand Down
24 changes: 24 additions & 0 deletions src/javascript/_common/utility.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -289,6 +289,28 @@ class PromiseClass {
const lc_licenseID = 12049137;
const lc_clientID = '66aa088aad5a414484c1fd1fa8a5ace7';

const openChat = () => {
if (window.fcWidget) {
window.fcWidget.open();
} else {
window.LC_API.open_chat_window();
}
};

const openChatWithParam = () => {
const interval = setInterval(() => {
if (window.fcWidget) {
window.fcWidget.open();
clearInterval(interval);
} else if (window.LiveChatWidget) {
window.LiveChatWidget?.on('ready', () => {
window.LC_API.open_chat_window();
});
clearInterval(interval);
}
}, 500);
};

module.exports = {
showLoadingImage,
getHighestZIndex,
Expand All @@ -314,4 +336,6 @@ module.exports = {
getHostname,
lc_licenseID,
lc_clientID,
openChat,
openChatWithParam,
};
8 changes: 4 additions & 4 deletions src/javascript/app/base/client.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,17 +108,17 @@ const Client = (() => {
// Called when logging out to end ongoing chats if there is any
const endLiveChat = () => new Promise ((resolve) => {
const session_variables = { loginid: '', landing_company_shortcode: '', currency: '', residence: '', email: '' };
window.LiveChatWidget.call('set_session_variables', session_variables);
window.LiveChatWidget.call('set_customer_email', ' ');
window.LiveChatWidget.call('set_customer_name', ' ');
window.LiveChatWidget?.call('set_session_variables', session_variables);
window.LiveChatWidget?.call('set_customer_email', ' ');
window.LiveChatWidget?.call('set_customer_name', ' ');

try {
const customerSDK = init({
licenseId: licenseID,
clientId : clientID,
});
customerSDK.on('connected', () => {
if (window.LiveChatWidget.get('chat_data')) {
if (window.LiveChatWidget?.get('chat_data')) {
const { chatId, threadId } = window.LiveChatWidget.get('chat_data');
if (threadId) {
customerSDK.deactivateChat({ chatId }).catch(() => null);
Expand Down
27 changes: 19 additions & 8 deletions src/javascript/app/base/header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ const Language = require('../../_common/language');
const mapCurrencyName = require('../../_common/base/currency_base').mapCurrencyName;
const isEuCountry = require('../common/country_base').isEuCountry;
const DerivIFrame = require('../pages/deriv_iframe.jsx');
const DerivLiveChat = require('../pages/livechat.jsx');
const openChat = require('../../_common/utility.js').openChat;
const getRemoteConfig = require('../hooks/useRemoteConfig').getRemoteConfig;

const header_icon_base_path = '/images/pages/header/';
Expand Down Expand Up @@ -61,26 +63,29 @@ const Header = (() => {
fullscreen_map.event.forEach(event => {
document.addEventListener(event, onFullScreen, false);
});

applyFeatureFlags();
};

const applyFeatureFlags = () => {
getRemoteConfig(true)
.then(data => {
const { cs_chat_livechat, cs_chat_whatsapp } = data.data;
const mobile_menu_livechat = getElementById('mobile__menu-livechat');
const livechat = getElementById('livechat');

const topbar_whatsapp = getElementById('topbar-whatsapp');
const whatsapp_mobile_drawer = getElementById('whatsapp-mobile-drawer');

mobile_menu_livechat.style.display = cs_chat_livechat ? 'flex' : 'none';
livechat.style.display = cs_chat_livechat ? 'inline-flex' : 'none';
if (document.getElementById('deriv_livechat')) { DerivLiveChat.init(cs_chat_livechat); }

topbar_whatsapp.style.display = cs_chat_whatsapp ? 'inline-flex' : 'none';
whatsapp_mobile_drawer.style.display = cs_chat_whatsapp ? 'flex' : 'none';
})
// eslint-disable-next-line no-console
.catch(error => console.error('Error fetching feature flags:', error));

.catch(error => {
if (document.getElementById('deriv_livechat')) { DerivLiveChat.init(); }
// eslint-disable-next-line no-console
console.error('Error fetching feature flags:', error);
});
};

const switchHeaders = () => {
Expand Down Expand Up @@ -347,7 +352,7 @@ const Header = (() => {

hamburger_menu.addEventListener('click', () => showMobileMenu(true));
mobile_menu_close.addEventListener('click', () => showMobileMenu(false));
mobile_menu_livechat.addEventListener('click', () => {window.LC_API.open_chat_window();});
mobile_menu_livechat.addEventListener('click', () => {openChat();});

// Mobile Menu Livechat Icon
mobile_menu__livechat_logo.src = Url.urlForStatic(`images/common/livechat.svg?${process.env.BUILD_HASH}`);
Expand Down Expand Up @@ -565,7 +570,9 @@ const Header = (() => {

// Livechat Launcher
const livechat = getElementById('livechat');
livechat.addEventListener('click', () => {window.LC_API.open_chat_window();});
livechat.addEventListener('click', () => {
openChat();
});

// Language Popup.
const current_language = Language.get();
Expand Down Expand Up @@ -649,6 +656,10 @@ const Header = (() => {
};

const logoutOnClick = async () => {
window.fcWidget?.user.clear().then(
() => window.fcWidget.destroy(),
() => {}
);
// 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.
Expand Down
8 changes: 3 additions & 5 deletions src/javascript/app/base/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const scrollToTop = require('../../_common/scroll').scrollToTop;
const toISOFormat = require('../../_common/string_util').toISOFormat;
const Url = require('../../_common/url');
const Analytics = require('../../_common/analytics');
const { openChatWithParam } = require('../../_common/utility');
const createElement = require('../../_common/utility').createElement;
const isLoginPages = require('../../_common/utility').isLoginPages;
const isProduction = require('../../config').isProduction;
Expand Down Expand Up @@ -109,11 +110,8 @@ const Page = (() => {

// Handle opening livechat via URL
const is_livechat_open = url_query_strings.is_livechat_open === 'true';

if (is_livechat_open && window.LiveChatWidget) {
window.LiveChatWidget.on('ready', () => {
window.LC_API.open_chat_window();
});
if (is_livechat_open) {
openChatWithParam();
}
}
Header.onLoad();
Expand Down
Loading

0 comments on commit 3a54013

Please sign in to comment.