Chatwoot/app/javascript/packs/sdk.js

128 lines
3.8 KiB
JavaScript
Executable file

import Cookies from 'js-cookie';
import { IFrameHelper } from '../sdk/IFrameHelper';
import { getBubbleView } from '../sdk/bubbleHelpers';
import md5 from 'md5';
const REQUIRED_USER_KEYS = ['avatar_url', 'email', 'name'];
const ALLOWED_USER_ATTRIBUTES = [...REQUIRED_USER_KEYS, 'identifier_hash'];
export const getUserCookieName = () => {
const SET_USER_COOKIE_PREFIX = 'cw_user_';
const { websiteToken: websiteIdentifier } = window.$chatwoot;
return `${SET_USER_COOKIE_PREFIX}${websiteIdentifier}`;
};
export const getUserString = ({ identifier = '', user }) => {
const userStringWithSortedKeys = ALLOWED_USER_ATTRIBUTES.reduce(
(acc, key) => `${acc}${key}${user[key] || ''}`,
''
);
return `${userStringWithSortedKeys}identifier${identifier}`;
};
const computeHashForUserData = (...args) => md5(getUserString(...args));
export const hasUserKeys = user =>
REQUIRED_USER_KEYS.reduce((acc, key) => acc || !!user[key], false);
const runSDK = ({ baseUrl, websiteToken }) => {
const chatwootSettings = window.chatwootSettings || {};
window.$chatwoot = {
baseUrl,
hasLoaded: false,
hideMessageBubble: chatwootSettings.hideMessageBubble || false,
isOpen: false,
position: chatwootSettings.position === 'left' ? 'left' : 'right',
websiteToken,
locale: chatwootSettings.locale,
type: getBubbleView(chatwootSettings.type),
launcherTitle: chatwootSettings.launcherTitle || '',
showPopoutButton: chatwootSettings.showPopoutButton || false,
toggle(state) {
IFrameHelper.events.toggleBubble(state);
},
setUser(identifier, user) {
if (typeof identifier !== 'string' && typeof identifier !== 'number') {
throw new Error('Identifier should be a string or a number');
}
if (!hasUserKeys(user)) {
throw new Error(
'User object should have one of the keys [avatar_url, email, name]'
);
}
const userCookieName = getUserCookieName();
const existingCookieValue = Cookies.get(userCookieName);
const hashToBeStored = computeHashForUserData({ identifier, user });
if (hashToBeStored === existingCookieValue) {
return;
}
window.$chatwoot.identifier = identifier;
window.$chatwoot.user = user;
IFrameHelper.sendMessage('set-user', { identifier, user });
Cookies.set(userCookieName, hashToBeStored, {
expires: 365,
sameSite: 'Lax',
});
},
setCustomAttributes(customAttributes = {}) {
if (!customAttributes || !Object.keys(customAttributes).length) {
throw new Error('Custom attributes should have atleast one key');
} else {
IFrameHelper.sendMessage('set-custom-attributes', { customAttributes });
}
},
deleteCustomAttribute(customAttribute = '') {
if (!customAttribute) {
throw new Error('Custom attribute is required');
} else {
IFrameHelper.sendMessage('delete-custom-attribute', {
customAttribute,
});
}
},
setLabel(label = '') {
IFrameHelper.sendMessage('set-label', { label });
},
removeLabel(label = '') {
IFrameHelper.sendMessage('remove-label', { label });
},
setLocale(localeToBeUsed = 'en') {
IFrameHelper.sendMessage('set-locale', { locale: localeToBeUsed });
},
reset() {
if (window.$chatwoot.isOpen) {
IFrameHelper.events.toggleBubble();
}
Cookies.remove('cw_conversation');
Cookies.remove(getUserCookieName());
const iframe = IFrameHelper.getAppFrame();
iframe.src = IFrameHelper.getUrl({
baseUrl: window.$chatwoot.baseUrl,
websiteToken: window.$chatwoot.websiteToken,
});
},
};
IFrameHelper.createFrame({
baseUrl,
websiteToken,
});
};
window.chatwootSDK = {
run: runSDK,
};