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,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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue