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,22 +1,57 @@
<template>
<div id="app" class="woot-widget-wrap" :class="{ 'is-mobile': isMobile }">
<router-view />
</div>
<router
:show-unread-view="showUnreadView"
:is-mobile="isMobile"
:grouped-messages="groupedMessages"
:unread-messages="unreadMessages"
:conversation-size="conversationSize"
:available-agents="availableAgents"
:has-fetched="hasFetched"
:conversation-attributes="conversationAttributes"
:unread-message-count="unreadMessageCount"
:is-left-aligned="isLeftAligned"
:hide-message-bubble="hideMessageBubble"
/>
</template>
<script>
import { mapActions } from 'vuex';
/* global bus */
import Vue from 'vue';
import { mapGetters, mapActions } from 'vuex';
import { setHeader } from 'widget/helpers/axios';
import { IFrameHelper } from 'widget/helpers/utils';
import Vue from 'vue';
import Router from './views/Router';
export default {
name: 'App',
components: {
Router,
},
data() {
return {
showUnreadView: false,
isMobile: false,
hideMessageBubble: false,
widgetPosition: 'right',
};
},
computed: {
...mapGetters({
groupedMessages: 'conversation/getGroupedConversation',
unreadMessages: 'conversation/getUnreadTextMessages',
conversationSize: 'conversation/getConversationSize',
availableAgents: 'agent/availableAgents',
hasFetched: 'agent/getHasFetched',
conversationAttributes: 'conversationAttributes/getConversationParams',
unreadMessageCount: 'conversation/getUnreadMessageCount',
}),
isLeftAligned() {
const isLeft = this.widgetPosition === 'left';
return isLeft;
},
},
mounted() {
const { websiteToken, locale } = window.chatwootWebChannel;
this.setLocale(locale);
@ -42,9 +77,13 @@ export default {
const message = JSON.parse(e.data.replace(wootPrefix, ''));
if (message.event === 'config-set') {
this.fetchOldConversations();
this.fetchOldConversations().then(() => {
this.setUnreadView();
});
this.fetchAvailableAgents(websiteToken);
this.setLocale(message.locale);
this.setPosition(message.position);
this.setHideMessageBubble(message.hideMessageBubble);
} else if (message.event === 'widget-visible') {
this.scrollConversationToBottom();
} else if (message.event === 'set-current-url') {
@ -52,7 +91,7 @@ export default {
} else if (message.event === 'toggle-close-button') {
this.isMobile = message.showClose;
} else if (message.event === 'push-event') {
this.$store.dispatch('events/create', { name: message.eventName });
this.createWidgetEvents(message);
} else if (message.event === 'set-label') {
this.$store.dispatch('conversationLabels/create', message.label);
} else if (message.event === 'remove-label') {
@ -61,14 +100,19 @@ export default {
this.$store.dispatch('contacts/update', message);
} else if (message.event === 'set-locale') {
this.setLocale(message.locale);
} else if (message.event === 'set-unread-view') {
this.showUnreadView = true;
} else if (message.event === 'unset-unread-view') {
this.showUnreadView = false;
}
});
this.$store.dispatch('conversationAttributes/get');
this.registerUnreadEvents();
},
methods: {
...mapActions('appConfig', ['setWidgetColor']),
...mapActions('conversation', ['fetchOldConversations']),
...mapActions('conversation', ['fetchOldConversations', 'setUserLastSeen']),
...mapActions('agent', ['fetchAvailableAgents']),
scrollConversationToBottom() {
const container = this.$el.querySelector('.conversation-wrap');
@ -80,6 +124,43 @@ export default {
Vue.config.lang = locale;
}
},
setPosition(position) {
const widgetPosition = position || 'right';
this.widgetPosition = widgetPosition;
},
setHideMessageBubble(hideBubble) {
this.hideMessageBubble = !!hideBubble;
},
registerUnreadEvents() {
bus.$on('on-agent-message-recieved', () => this.setUnreadView());
bus.$on('on-unread-view-clicked', () => {
this.unsetUnreadView();
this.setUserLastSeen();
});
},
setUnreadView() {
const { unreadMessageCount } = this;
if (IFrameHelper.isIFrame() && unreadMessageCount > 0) {
IFrameHelper.sendMessage({
event: 'setUnreadMode',
unreadMessageCount,
});
}
},
unsetUnreadView() {
if (IFrameHelper.isIFrame()) {
IFrameHelper.sendMessage({ event: 'resetUnreadMode' });
}
},
createWidgetEvents(message) {
const { eventName } = message;
const isWidgetTriggerEvent = eventName === 'webwidget.triggered';
if (isWidgetTriggerEvent && this.showUnreadView) {
return;
}
this.setUserLastSeen();
this.$store.dispatch('events/create', { name: eventName });
},
},
};
</script>