feat: Add a view to assist user while onboarding (#1826)

Co-authored-by: Nithin David <webofnithin@gmail.com>
This commit is contained in:
Pranav Raj S 2021-02-24 11:16:38 +05:30 committed by GitHub
parent f424a832f4
commit 82a1ad891d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 223 additions and 19 deletions

View file

@ -1,28 +1,31 @@
<template>
<div class="columns full-height conv-empty-state">
<div :class="emptyClassName">
<woot-loading-state
v-if="uiFlags.isFetching || loadingChatList"
:message="loadingIndicatorMessage"
/>
<!-- Show empty state images if not loading -->
<div v-if="!uiFlags.isFetching && !loadingChatList" class="current-chat">
<!-- No inboxes attached -->
<div v-if="!inboxesList.length">
<img src="~dashboard/assets/images/inboxes.svg" alt="No Inboxes" />
<span v-if="isAdmin">
{{ $t('CONVERSATION.NO_INBOX_1') }}
<br />
<router-link :to="newInboxURL">
{{ $t('CONVERSATION.CLICK_HERE') }}
</router-link>
{{ $t('CONVERSATION.NO_INBOX_2') }}
</span>
<span v-if="!isAdmin">
{{ $t('CONVERSATION.NO_INBOX_AGENT') }}
</span>
<!-- No inboxes attached -->
<div
v-if="!inboxesList.length && !uiFlags.isFetching && !loadingChatList"
class="clearfix"
>
<onboarding-view v-if="isAdmin" />
<div v-else class="current-chat">
<div>
<img src="~dashboard/assets/images/inboxes.svg" alt="No Inboxes" />
<span>
{{ $t('CONVERSATION.NO_INBOX_AGENT') }}
</span>
</div>
</div>
</div>
<!-- Show empty state images if not loading -->
<div
v-else-if="!uiFlags.isFetching && !loadingChatList"
class="current-chat"
>
<!-- No conversations available -->
<div v-else-if="!allConversations.length">
<div v-if="!allConversations.length">
<img src="~dashboard/assets/images/chat.svg" alt="No Chat" />
<span>
{{ $t('CONVERSATION.NO_MESSAGE_1') }}
@ -41,10 +44,13 @@
import { mapGetters } from 'vuex';
import adminMixin from '../../../mixins/isAdmin';
import accountMixin from '../../../mixins/account';
import OnboardingView from './OnboardingView';
export default {
components: {
OnboardingView,
},
mixins: [accountMixin, adminMixin],
computed: {
...mapGetters({
currentChat: 'getSelectedChat',
@ -62,6 +68,23 @@ export default {
newInboxURL() {
return this.addAccountScoping('settings/inboxes/new');
},
emptyClassName() {
if (
!this.inboxesList.length &&
!this.uiFlags.isFetching &&
!this.loadingChatList &&
this.isAdmin
) {
return 'inbox-empty-state';
}
return 'columns full-height conv-empty-state';
},
},
};
</script>
<style scoped>
.inbox-empty-state {
height: 100%;
overflow: auto;
}
</style>