2020-07-07 18:34:44 +00:00
|
|
|
<template>
|
|
|
|
<div class="unread-wrap">
|
|
|
|
<div class="close-unread-wrap">
|
|
|
|
<button
|
|
|
|
v-if="showCloseButton"
|
|
|
|
class="button small close-unread-button"
|
|
|
|
@click="closeFullView"
|
|
|
|
>
|
2021-08-07 06:26:40 +00:00
|
|
|
<i class="ion-android-close" />
|
2020-07-07 18:34:44 +00:00
|
|
|
{{ $t('UNREAD_VIEW.CLOSE_MESSAGES_BUTTON') }}
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div class="unread-messages">
|
2021-05-17 16:08:59 +00:00
|
|
|
<unread-message
|
2021-06-15 14:39:42 +00:00
|
|
|
v-for="(message, index) in allMessages"
|
2020-07-07 18:34:44 +00:00
|
|
|
:key="message.id"
|
2021-06-15 14:39:42 +00:00
|
|
|
:message-type="message.messageType"
|
2020-07-07 18:34:44 +00:00
|
|
|
:message-id="message.id"
|
2021-05-17 16:08:59 +00:00
|
|
|
:show-sender="!index"
|
|
|
|
:sender="message.sender"
|
2021-01-06 12:26:29 +00:00
|
|
|
:message="getMessageContent(message)"
|
2021-06-15 14:39:42 +00:00
|
|
|
:campaign-id="message.campaignId"
|
2020-07-07 18:34:44 +00:00
|
|
|
/>
|
|
|
|
</div>
|
2021-05-17 16:08:59 +00:00
|
|
|
|
2021-08-14 03:10:29 +00:00
|
|
|
<div class="open-read-view-wrap">
|
2020-07-07 18:34:44 +00:00
|
|
|
<button
|
|
|
|
v-if="unreadMessageCount"
|
|
|
|
class="button clear-button"
|
|
|
|
@click="openFullView"
|
|
|
|
>
|
|
|
|
<i class="ion-arrow-right-c" />
|
|
|
|
{{ $t('UNREAD_VIEW.VIEW_MESSAGES_BUTTON') }}
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { IFrameHelper } from 'widget/helpers/utils';
|
2021-05-17 16:08:59 +00:00
|
|
|
import UnreadMessage from 'widget/components/UnreadMessage.vue';
|
|
|
|
|
2020-07-07 18:34:44 +00:00
|
|
|
import configMixin from '../mixins/configMixin';
|
2021-02-15 18:44:13 +00:00
|
|
|
import { mapGetters } from 'vuex';
|
2020-07-07 18:34:44 +00:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'Unread',
|
|
|
|
components: {
|
2021-05-17 16:08:59 +00:00
|
|
|
UnreadMessage,
|
2020-07-07 18:34:44 +00:00
|
|
|
},
|
|
|
|
mixins: [configMixin],
|
|
|
|
props: {
|
|
|
|
hasFetched: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
|
|
|
},
|
|
|
|
unreadMessageCount: {
|
|
|
|
type: Number,
|
|
|
|
default: 0,
|
|
|
|
},
|
|
|
|
hideMessageBubble: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
|
|
|
},
|
2021-06-15 14:39:42 +00:00
|
|
|
showUnreadView: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
|
|
|
},
|
2020-07-07 18:34:44 +00:00
|
|
|
},
|
|
|
|
computed: {
|
2021-02-15 18:44:13 +00:00
|
|
|
...mapGetters({
|
2021-09-29 08:58:32 +00:00
|
|
|
unreadMessages: 'conversationV2/getUnreadMessagesIn',
|
2021-06-15 14:39:42 +00:00
|
|
|
campaign: 'campaign/getActiveCampaign',
|
2021-10-01 09:33:58 +00:00
|
|
|
lastConversation: 'conversationV2/lastActiveConversationId',
|
2021-02-15 18:44:13 +00:00
|
|
|
}),
|
2020-07-07 18:34:44 +00:00
|
|
|
showCloseButton() {
|
2021-08-07 06:26:40 +00:00
|
|
|
return this.unreadMessageCount;
|
2020-07-07 18:34:44 +00:00
|
|
|
},
|
2021-05-17 16:08:59 +00:00
|
|
|
sender() {
|
2021-09-29 08:58:32 +00:00
|
|
|
const { id: lastConversationId } = this.lastConversation;
|
|
|
|
const [firstMessage] = this.unreadMessages(lastConversationId);
|
2021-05-17 16:08:59 +00:00
|
|
|
return firstMessage.sender || {};
|
|
|
|
},
|
2021-06-15 14:39:42 +00:00
|
|
|
allMessages() {
|
2021-09-29 08:58:32 +00:00
|
|
|
if (this.lastConversation) return [];
|
|
|
|
|
|
|
|
const { id: lastConversationId } = this.lastConversation;
|
|
|
|
|
|
|
|
return this.unreadMessages(lastConversationId);
|
|
|
|
|
|
|
|
// const { sender, id: campaignId, message: content } = this.campaign;
|
|
|
|
// return [
|
|
|
|
// {
|
|
|
|
// content,
|
|
|
|
// sender,
|
|
|
|
// campaignId,
|
|
|
|
// },
|
|
|
|
// ];
|
2021-06-15 14:39:42 +00:00
|
|
|
},
|
2020-07-07 18:34:44 +00:00
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
openFullView() {
|
|
|
|
bus.$emit('on-unread-view-clicked');
|
|
|
|
},
|
|
|
|
closeFullView() {
|
|
|
|
if (IFrameHelper.isIFrame()) {
|
|
|
|
IFrameHelper.sendMessage({
|
|
|
|
event: 'toggleBubble',
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
2021-01-06 12:26:29 +00:00
|
|
|
getMessageContent(message) {
|
|
|
|
const { attachments, content } = message;
|
|
|
|
const hasAttachments = attachments && attachments.length;
|
|
|
|
|
|
|
|
if (content) return content;
|
|
|
|
|
|
|
|
if (hasAttachments) return `📑`;
|
|
|
|
|
|
|
|
return '';
|
|
|
|
},
|
2020-07-07 18:34:44 +00:00
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
2020-10-18 18:02:22 +00:00
|
|
|
@import '~widget/assets/scss/variables';
|
|
|
|
|
2020-07-07 18:34:44 +00:00
|
|
|
.unread-wrap {
|
|
|
|
width: 100%;
|
2021-08-07 06:26:15 +00:00
|
|
|
height: auto;
|
|
|
|
max-height: 100vh;
|
2020-07-07 18:34:44 +00:00
|
|
|
background: transparent;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
flex-wrap: nowrap;
|
|
|
|
justify-content: flex-end;
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
.unread-messages {
|
|
|
|
padding-bottom: $space-small;
|
|
|
|
}
|
|
|
|
|
|
|
|
.clear-button {
|
|
|
|
background: transparent;
|
|
|
|
color: $color-woot;
|
|
|
|
padding: 0;
|
|
|
|
border: 0;
|
|
|
|
font-weight: $font-weight-bold;
|
|
|
|
font-size: $font-size-medium;
|
|
|
|
transition: all 0.3s $ease-in-cubic;
|
|
|
|
margin-left: $space-smaller;
|
|
|
|
padding-right: $space-one;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
transform: translateX($space-smaller);
|
|
|
|
color: $color-primary-dark;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.close-unread-button {
|
|
|
|
background: $color-background;
|
2021-08-07 06:26:40 +00:00
|
|
|
color: $color-light-gray;
|
2020-07-07 18:34:44 +00:00
|
|
|
border: 0;
|
2021-08-07 06:26:40 +00:00
|
|
|
font-weight: $font-weight-medium;
|
|
|
|
font-size: $font-size-mini;
|
2020-07-07 18:34:44 +00:00
|
|
|
transition: all 0.3s $ease-in-cubic;
|
|
|
|
margin-bottom: $space-slab;
|
|
|
|
border-radius: $space-normal;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
color: $color-body;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.close-unread-wrap {
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<style lang="scss">
|
2020-10-18 18:02:22 +00:00
|
|
|
@import '~widget/assets/scss/variables';
|
2020-07-07 18:34:44 +00:00
|
|
|
|
|
|
|
.unread-messages {
|
|
|
|
width: 100%;
|
2021-08-07 06:26:40 +00:00
|
|
|
margin-top: 0;
|
2020-07-07 18:34:44 +00:00
|
|
|
padding-bottom: $space-small;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
flex-wrap: nowrap;
|
|
|
|
overflow-y: auto;
|
|
|
|
|
|
|
|
.chat-bubble-wrap {
|
|
|
|
margin-bottom: $space-smaller;
|
|
|
|
|
|
|
|
&:first-child {
|
|
|
|
margin-top: auto;
|
|
|
|
}
|
|
|
|
.chat-bubble {
|
|
|
|
border: 1px solid $color-border-dark;
|
|
|
|
}
|
|
|
|
|
|
|
|
+ .chat-bubble-wrap {
|
|
|
|
.chat-bubble {
|
|
|
|
border-top-left-radius: $space-smaller;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&:last-child .chat-bubble {
|
|
|
|
border-bottom-left-radius: $space-two;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.is-widget-right .unread-wrap {
|
|
|
|
text-align: right;
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
.chat-bubble-wrap {
|
|
|
|
.chat-bubble {
|
|
|
|
border-radius: $space-two;
|
|
|
|
border-bottom-right-radius: $space-smaller;
|
|
|
|
}
|
|
|
|
|
|
|
|
+ .chat-bubble-wrap {
|
|
|
|
.chat-bubble {
|
|
|
|
border-top-right-radius: $space-smaller;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&:last-child .chat-bubble {
|
|
|
|
border-bottom-right-radius: $space-two;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.close-unread-wrap {
|
|
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|