Free javascript Hosting


helpcenter.js

Uploaded on Mar 16 2022 19:15 by shubham.mangal

/* eslint-disable new-cap */
/**
* This file will work as a middleware between sdkx & helpcenter.
*
* This is will perform following actions:
* - create Iframe & load the new helpcenter
* - communicate between sdkx & helpcenter
*/

(function () {
const PLATFORMS = {
IOS: "ios",
ANDROID: "android"
};

const _onHelpcenterError = () => {
const {
liteSdkConfig: {os}
} = window.helpshiftConfig;
const config = {};

try {
switch (os) {
case PLATFORMS.IOS:
window.webkit.messageHandlers.onHelpcenterError.postMessage(config);
break;
case PLATFORMS.ANDROID:
/* eslint-disable-next-line no-undef */
HCInterface.onHelpcenterError();
break;
}
} catch (exception) {
/* Ignore */
}
};

try {
const defaultLanguage = "en";
const {
liteSdkConfig: {os},
helpcenterConfig: {showChatIcon}
} = window.helpshiftConfig;

const EVENT_TYPE = {
CLOSE_HELPCENTER: "closeHelpcenter",
OPEN_WEB_CHAT: "openWebchat",
GO_BACK: "goBack",
SET_CHAT_ICON: "setChatIcon",
HIDE_CHAT_ICON: "hideChatIcon",
RELOAD_HELPCENTER: "reloadHelpcenter",
WEBVIEW_HISTORY: "webviewHistory",
SHOW_NOTIF_BADGE: "showNotifBadge",
HELPCENTER_LOAD: "helpcenterLoad",
HELPCENTER_DOM_CONTENT_LOAD: "helpcenterDomContentLoad",
HS_OPEN: "openHelpshift",
D_HS_OPEN: "openHelpshiftInDecomposedView",
BACK_BTN_CLICK: "backBtnClick",
DISMISS_ANNOUNCEMENT: "dismissAnnouncement",
SHOW_ANNOUNCEMENT: "showAnnouncement"
};

/* To maintain the state of notif badge */
const notifBadge = {
showNotifBadge: false,
notifCount: 0
};

/* To maintain the state of first load of helpcenter */
let helpcenterFirstLoad = false;

/* To maintain the history of the HC */
let historyLength = 0;

/* To maintain announcement status, if it is hidden or visible */
let showAnnouncement = true;

/**
* Construct url for app/section/faq page respectively
*/
const getUrl = (hsConfig) => {
const {
platformId,
domain,
language = defaultLanguage,
helpcenterConfig: {faqId, sectionId, hcIsSandbox}
} = hsConfig;

const nav = window.navigator;
const browserLanguage =
(nav.languages && nav.languages[0]) || nav.language ||
nav.userLanguage;

/* top level domain 0*/
const tld = hcIsSandbox ? "mobi" : "com";
const url = `https://${domain}.helpshift.${tld}/hc-sdkx/${language}/app/${platformId}?bl=${browserLanguage}`;

if (faqId) {
return `${url}/faq/${faqId}/?p=${os}`;
} else if (sectionId) {
return `${url}/section/${sectionId}/?p=${os}`;
} else {
return `${url}/?p=${os}`;
}
};

/**
* Util to set style for a given element.
* @param {Element} el - The element to which styles have to be applied.
* @param {Object} styles - key-value pair of styles to be applied.
*/
const setStyle = (el, styles) => {
if (!el) {
return;
}

for (const key in styles) {
if (styles.hasOwnProperty(key)) {
el.style[key] = styles[key];
}
}
};

const hcIframe = document.createElement("iframe");

/**
* Execute dom content load of iframe
*/
const _executeDomContentLoadActivites = () => {
historyLength = historyLength + 1;

if (typeof showChatIcon === "boolean") {
if (showChatIcon) {
window.Helpcenter(
JSON.stringify({
eventType: EVENT_TYPE.SET_CHAT_ICON,
config: {
chatIconIsVisible: showChatIcon
}
})
);
} else {
window.Helpcenter(
JSON.stringify({
eventType: EVENT_TYPE.HIDE_CHAT_ICON,
config: {
chatIconIsVisible: showChatIcon
}
})
);
}
}

if (notifBadge.showNotifBadge) {
window.Helpcenter(
JSON.stringify({
eventType: EVENT_TYPE.SHOW_NOTIF_BADGE,
config: {
notifCount: notifBadge.notifCount
}
})
);
}

/* Send history of webview to HC */
window.Helpcenter(
JSON.stringify({
eventType: EVENT_TYPE.WEBVIEW_HISTORY,
config: {
historyLength
}
})
);

/* Send the status of announcement to HC */
window.Helpcenter(
JSON.stringify({
eventType: EVENT_TYPE.SHOW_ANNOUNCEMENT,
config: {
showAnnouncement
}
})
);
};

hcIframe.src = getUrl(window.helpshiftConfig);

/**
* Add styles to iframe
*/
setStyle(hcIframe, {
position: "fixed",
height: "100%",
width: "100%",
border: "none"
});

document.body.appendChild(hcIframe);

/**
* Execute required activities when we have HC load event.
*
* @param {string} config.primaryColor - Status bar color
*/
const _executeHelpcenterOnLoadActivities = (config) => {
const helpshiftConfig = window.helpshiftConfig;
const configString = JSON.stringify(config);
const {faqId, sectionId} = helpshiftConfig.helpcenterConfig;
const decomposedOpenId = faqId || sectionId;
let hcOpenEventType;
if (!helpcenterFirstLoad) {
hcOpenEventType = decomposedOpenId ? EVENT_TYPE.D_HS_OPEN : EVENT_TYPE.HS_OPEN;
}

window.Helpcenter(
JSON.stringify({
eventType: EVENT_TYPE.HELPCENTER_LOAD,
config: {
helpshiftConfig,
hcOpenEventType
}
})
);

if (!helpcenterFirstLoad) {
// Communicate help center is loaded to sdkx
try {
switch (os) {
case PLATFORMS.IOS:
window.webkit.messageHandlers.helpcenterLoaded.postMessage(config);
break;
case PLATFORMS.ANDROID:
/* eslint-disable-next-line no-undef */
HCInterface.helpcenterLoaded(configString);
break;
}
} catch (exception) {
_onHelpcenterError();
return;
}

helpcenterFirstLoad = true;
}
};

/**
* Event listeners for the events fired by help center for sdkx
*/
window.addEventListener("message", (event) => {
const {eventType, config = {}} = JSON.parse(event.data);

switch (eventType) {
case EVENT_TYPE.HELPCENTER_DOM_CONTENT_LOAD:
_executeDomContentLoadActivites(config);
break;
case EVENT_TYPE.HELPCENTER_LOAD:
_executeHelpcenterOnLoadActivities(config);
break;
case EVENT_TYPE.CLOSE_HELPCENTER:
try {
switch (os) {
case PLATFORMS.IOS:
window.webkit.messageHandlers.closeHelpcenter.postMessage(config);
break;
case PLATFORMS.ANDROID:
/* eslint-disable-next-line no-undef */
HCInterface.closeHelpcenter();
break;
}
} catch (exception) {
_onHelpcenterError();
return;
}
break;
case EVENT_TYPE.OPEN_WEB_CHAT:
/* Reset notif badge state */
notifBadge.showNotifBadge = false;
notifBadge.notifCount = 0;

try {
switch (os) {
case PLATFORMS.IOS:
window.webkit.messageHandlers.openWebchat.postMessage(config);
break;
case PLATFORMS.ANDROID:
/* eslint-disable-next-line no-undef */
HCInterface.openWebchat();
break;
}
} catch (exception) {
_onHelpcenterError();
return;
}
break;
case EVENT_TYPE.GO_BACK:
try {
if (historyLength > 1) {
window.history.back();
historyLength = historyLength - 2;
} else {
switch (os) {
case PLATFORMS.IOS:
window.webkit.messageHandlers.closeHelpcenter.postMessage(config);
break;
case PLATFORMS.ANDROID:
/* eslint-disable-next-line no-undef */
HCInterface.closeHelpcenter();
break;
}
}
} catch (exception) {
_onHelpcenterError();
return;
}
break;
case EVENT_TYPE.DISMISS_ANNOUNCEMENT:
showAnnouncement = false;
break;
}
});

/**
* Global method for updating iframe
*
* @param {object} sdkConfig - Configuration for updating iframe
*/
window.Helpcenter = (sdkConfig) => {
const {eventType, config} = JSON.parse(sdkConfig);

switch (eventType) {
case EVENT_TYPE.HELPCENTER_LOAD:
hcIframe.contentWindow.postMessage(sdkConfig, "*");
break;
case EVENT_TYPE.D_HS_OPEN:
hcIframe.contentWindow.postMessage(sdkConfig, "*");
break;
case EVENT_TYPE.HS_OPEN:
hcIframe.contentWindow.postMessage(sdkConfig, "*");
break;
case EVENT_TYPE.RELOAD_HELPCENTER:
hcIframe.src = getUrl(config);
break;
case EVENT_TYPE.SET_CHAT_ICON:
hcIframe.contentWindow.postMessage(sdkConfig, "*");
break;
case EVENT_TYPE.HIDE_CHAT_ICON:
hcIframe.contentWindow.postMessage(sdkConfig, "*");
break;
case EVENT_TYPE.SHOW_NOTIF_BADGE:
notifBadge.showNotifBadge = true;
notifBadge.notifCount = config.notifCount;
hcIframe.contentWindow.postMessage(sdkConfig, "*");
break;
case EVENT_TYPE.WEBVIEW_HISTORY:
hcIframe.contentWindow.postMessage(sdkConfig, "*");
break;
case EVENT_TYPE.BACK_BTN_CLICK:
historyLength = historyLength - 2;
break;
case EVENT_TYPE.SHOW_ANNOUNCEMENT:
hcIframe.contentWindow.postMessage(sdkConfig, "*");
break;
default:
break;
}
};
} catch (exception) {
_onHelpcenterError();
return;
}
})();

Back to list