Chatwoot/app/javascript/widget/views/Home.vue

210 lines
5.4 KiB
Vue
Raw Normal View History

<template>
2021-09-29 08:58:32 +00:00
<div class="home" @keydown.esc="closeChat">
2021-10-01 09:33:58 +00:00
<div class="flex flex-col flex-1 overflow-auto">
<div class="header-wrap bg-white expanded">
<chat-header-expanded
:intro-heading="channelConfig.welcomeTitle"
:intro-body="channelConfig.welcomeTagline"
:avatar-url="channelConfig.avatarUrl"
:show-popout-button="showPopoutButton"
/>
</div>
<banner />
2021-09-29 08:58:32 +00:00
<team-availability
:available-agents="availableAgents"
@start-conversation="startConversation"
/>
2021-10-01 09:33:58 +00:00
<div class="px-6 mt-8">
<h3 class="text-xl font-medium text-gray-900">
Last conversation
</h3>
<conversation-item :conversation="lastActiveConversation" />
<chat-footer :conversation-id="lastActiveConversationId" />
<button
class="mt-2 font-medium text-woot-600 hover:text-woot-500 transition
ease-in-out duration-150"
@click="clickAllConversations"
>
See all conversations
<span aria-hidden="true">&rarr;</span>
</button>
</div>
<div class="px-6 mt-8">
<h3 class="text-xl font-medium text-gray-900">
FAQ
</h3>
<div>
<h4></h4>
</div>
<button
class="font-medium text-woot-600 hover:text-woot-500 transition
ease-in-out duration-150"
@click="clickAllConversations"
>
See all conversations
<span aria-hidden="true">&rarr;</span>
</button>
</div>
<div class="footer-wrap">
<branding></branding>
</div>
</div>
</div>
</template>
<script>
import Branding from 'shared/components/Branding.vue';
2021-10-01 09:33:58 +00:00
import ChatFooter from 'widget/components/ChatFooter.vue';
import ChatHeaderExpanded from 'widget/components/ChatHeaderExpanded.vue';
2021-10-01 09:33:58 +00:00
import ConversationItem from 'widget/components/ConversationItem';
2021-09-29 08:58:32 +00:00
import { IFrameHelper } from 'widget/helpers/utils';
import configMixin from '../mixins/configMixin';
import TeamAvailability from 'widget/components/TeamAvailability';
import Spinner from 'shared/components/Spinner.vue';
import Banner from 'widget/components/Banner.vue';
import { mapGetters } from 'vuex';
import { BUS_EVENTS } from 'shared/constants/busEvents';
2021-09-23 06:50:53 +00:00
export default {
name: 'Home',
components: {
Branding,
2021-10-01 09:33:58 +00:00
ChatFooter,
ChatHeaderExpanded,
Spinner,
TeamAvailability,
2021-10-01 09:33:58 +00:00
ConversationItem,
Banner,
},
mixins: [configMixin],
props: {
2021-09-29 08:58:32 +00:00
conversationId: {
type: Boolean,
default: false,
},
showPopoutButton: {
type: Boolean,
default: false,
},
},
data() {
return {
isOnCollapsedView: false,
isOnNewConversation: false,
};
},
computed: {
...mapGetters({
availableAgents: 'agent/availableAgents',
conversationAttributes: 'conversationAttributes/getConversationParams',
2021-09-29 08:58:32 +00:00
getTotalMessageCount: 'conversationV2/allMessagesCountIn',
getGroupedMessages: 'conversationV2/groupByMessagesIn',
getIsFetchingList: 'conversationV2/isFetchingConversationsList',
2021-10-01 09:33:58 +00:00
lastActiveConversationId: 'conversationV2/lastActiveConversationId',
getConversationById: 'conversationV2/getConversationById',
2021-09-29 08:58:32 +00:00
getCurrentUser: 'contactV2/getCurrentUser',
}),
2021-09-29 08:58:32 +00:00
conversationSize() {
return this.getTotalMessageCount(this.conversationId);
},
2021-09-29 08:58:32 +00:00
groupedMessages() {
return this.getGroupedMessages(this.conversationId);
},
2021-09-29 08:58:32 +00:00
isFetchingList() {
return this.getIsFetchingList(this.conversationId);
},
2021-09-29 08:58:32 +00:00
currentUser() {
return this.getCurrentUser(this.conversationId);
},
2021-10-01 09:33:58 +00:00
lastActiveConversation() {
const conversationId = this.lastActiveConversationId;
return this.getConversationById(conversationId);
},
},
mounted() {
bus.$on(BUS_EVENTS.START_NEW_CONVERSATION, () => {
this.isOnCollapsedView = true;
this.isOnNewConversation = true;
});
},
methods: {
2021-10-01 09:33:58 +00:00
async startConversation() {
this.isOnCollapsedView = !this.isOnCollapsedView;
2021-10-01 09:33:58 +00:00
const conversationId = await this.$store.dispatch(
'conversationV2/createConversation',
{
inboxIdentifier: window.chatwootWebChannel.inboxIdentifier,
contactIdentifier: window.contactIdentifier,
}
);
this.$router.push({
name: 'chat',
params: {
conversationId: conversationId,
},
2021-09-29 08:58:32 +00:00
});
},
closeChat() {
IFrameHelper.sendMessage({ event: 'closeChat' });
},
2021-09-29 08:58:32 +00:00
clickAllConversations() {
this.$router.push({
name: 'conversations',
});
},
},
};
</script>
<style scoped lang="scss">
@import '~widget/assets/scss/variables';
@import '~widget/assets/scss/mixins';
.home {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
overflow: hidden;
.header-wrap {
border-radius: $space-normal $space-normal 0 0;
flex-shrink: 0;
transition: max-height 300ms;
z-index: 99;
&.expanded {
max-height: 16rem;
}
&.collapsed {
max-height: 4.5rem;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 667px) {
border-radius: 0;
}
}
.footer-wrap {
flex-shrink: 0;
width: 100%;
display: flex;
flex-direction: column;
2020-01-17 08:06:05 +00:00
position: relative;
}
.input-wrap {
padding: 0 $space-two;
}
}
</style>