Adds unread message bubbles for widget (#943)

Co-authored-by: Sojan <sojan@pepalo.com>
Co-authored-by: Pranav Raj S <pranav@thoughtwoot.com>
This commit is contained in:
Nithin David Thomas 2020-07-08 00:04:44 +05:30 committed by GitHub
parent 6a7d810c95
commit 49db9c5d8a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 787 additions and 51 deletions

View file

@ -1,5 +1,5 @@
import Cookies from 'js-cookie';
import { wootOn, loadCSS } from './DOMHelpers';
import { wootOn, loadCSS, addClass, removeClass } from './DOMHelpers';
import {
body,
widgetHolder,
@ -29,7 +29,8 @@ export const IFrameHelper = {
iframe.id = 'chatwoot_live_chat_widget';
iframe.style.visibility = 'hidden';
widgetHolder.className = `woot-widget-holder woot--hide woot-elements--${window.$chatwoot.position}`;
const HolderclassName = `woot-widget-holder woot--hide woot-elements--${window.$chatwoot.position}`;
addClass(widgetHolder, HolderclassName);
widgetHolder.appendChild(iframe);
body.appendChild(widgetHolder);
IFrameHelper.initPostMessageCommunication();
@ -92,6 +93,8 @@ export const IFrameHelper = {
window.$chatwoot.hasLoaded = true;
IFrameHelper.sendMessage('config-set', {
locale: window.$chatwoot.locale,
position: window.$chatwoot.position,
hideMessageBubble: window.$chatwoot.hideMessageBubble,
});
IFrameHelper.onLoad(message.config.channelConfig);
IFrameHelper.setCurrentUrl();
@ -105,6 +108,37 @@ export const IFrameHelper = {
toggleBubble: () => {
onBubbleClick();
},
onBubbleToggle: isOpen => {
if (!isOpen) {
IFrameHelper.events.resetUnreadMode();
} else {
IFrameHelper.pushEvent('webwidget.triggered');
}
},
setUnreadMode: message => {
const { unreadMessageCount } = message;
const { isOpen } = window.$chatwoot;
const toggleValue = true;
if (!isOpen && unreadMessageCount > 0) {
IFrameHelper.sendMessage('set-unread-view');
onBubbleClick({ toggleValue });
const holderEl = document.querySelector('.woot-widget-holder');
addClass(holderEl, 'has-unread-view');
}
},
resetUnreadMode: () => {
IFrameHelper.sendMessage('unset-unread-view');
IFrameHelper.events.removeUnreadClass();
},
removeUnreadClass: () => {
const holderEl = document.querySelector('.woot-widget-holder');
removeClass(holderEl, 'has-unread-view');
},
},
pushEvent: eventName => {
IFrameHelper.sendMessage('push-event', { eventName });
@ -125,7 +159,8 @@ export const IFrameHelper = {
});
const closeIcon = closeBubble;
closeIcon.className = `woot-elements--${window.$chatwoot.position} woot-widget-bubble woot--close woot--hide`;
const closeIconclassName = `woot-elements--${window.$chatwoot.position} woot-widget-bubble woot--close woot--hide`;
addClass(closeIcon, closeIconclassName);
chatIcon.style.background = widgetColor;
closeIcon.style.background = widgetColor;
@ -143,9 +178,13 @@ export const IFrameHelper = {
},
toggleCloseButton: () => {
if (window.matchMedia('(max-width: 668px)').matches) {
IFrameHelper.sendMessage('toggle-close-button', { showClose: true });
IFrameHelper.sendMessage('toggle-close-button', {
showClose: true,
});
} else {
IFrameHelper.sendMessage('toggle-close-button', { showClose: false });
IFrameHelper.sendMessage('toggle-close-button', {
showClose: false,
});
}
},
};