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:
parent
6a7d810c95
commit
49db9c5d8a
25 changed files with 787 additions and 51 deletions
|
@ -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,
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue