KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

61
app/javascript/dashboard/components/widgets/conversation/EmptyState.vue
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>

157
app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue Normal file
View file

@ -0,0 +1,157 @@
<template>
<div class="columns onboarding-wrap">
<div class="onboarding">
<div class="scroll-wrap">
<div class="features-item">
<h1 class="page-title">
<span>{{
$t('ONBOARDING.TITLE', {
installationName: globalConfig.installationName,
})
}}</span>
</h1>
<p class="intro-body">
{{
$t('ONBOARDING.DESCRIPTION', {
installationName: globalConfig.installationName,
})
}}
</p>
<p>
<a
href="https://changelog.chatwoot.com"
target="_blank"
rel="noopener nofollow noreferrer"
class="onboarding--link"
>
{{ $t('ONBOARDING.READ_LATEST_UPDATES') }}
</a>
<span>🎉</span>
</p>
</div>
<div class="features-item">
<h2 class="block-title">
<span class="emoji">💬</span>
<span class="conversation--title">{{
$t('ONBOARDING.ALL_CONVERSATION.TITLE')
}}</span>
</h2>
<p class="intro-body">
{{ $t('ONBOARDING.ALL_CONVERSATION.DESCRIPTION') }}
</p>
</div>
<div class="features-item">
<h2 class="block-title">
<span class="emoji">👥</span
>{{ $t('ONBOARDING.TEAM_MEMBERS.TITLE') }}
</h2>
<p class="intro-body">
{{ $t('ONBOARDING.TEAM_MEMBERS.DESCRIPTION') }}
</p>
<router-link :to="newAgentURL" class="onboarding--link">
{{ $t('ONBOARDING.TEAM_MEMBERS.NEW_LINK') }}
</router-link>
</div>
<div class="features-item">
<h2 class="block-title">
<span class="emoji">📥</span>{{ $t('ONBOARDING.INBOXES.TITLE') }}
</h2>
<p class="intro-body ">
{{ $t('ONBOARDING.INBOXES.DESCRIPTION') }}
</p>
<router-link :to="newInboxURL" class="onboarding--link">
{{ $t('ONBOARDING.INBOXES.NEW_LINK') }}
</router-link>
</div>
<div class="features-item">
<h2 class="block-title">
<span class="emoji">🏷</span>{{ $t('ONBOARDING.LABELS.TITLE') }}
</h2>
<p class="intro-body ">
{{ $t('ONBOARDING.LABELS.DESCRIPTION') }}
</p>
<router-link :to="newLabelsURL" class="onboarding--link">
{{ $t('ONBOARDING.LABELS.NEW_LINK') }}
</router-link>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import accountMixin from '../../../mixins/account';
export default {
mixins: [accountMixin],
computed: {
...mapGetters({ globalConfig: 'globalConfig/get' }),
newInboxURL() {
return this.addAccountScoping('settings/inboxes/new');
},
newAgentURL() {
return this.addAccountScoping('settings/agents/list');
},
newLabelsURL() {
return this.addAccountScoping('settings/labels/list');
},
},
};
</script>
<style lang="scss" scoped>
.onboarding-wrap {
display: flex;
font-size: var(--font-size-small);
justify-content: center;
overflow: auto;
text-align: left;
}
.onboarding {
height: 100vh;
overflow: auto;
}
.scroll-wrap {
padding: var(--space-larger) 13.6rem;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.features-item {
margin-bottom: var(--space-large);
}
.conversation--title {
margin-left: var(--space-minus-smaller);
}
.page-title {
font-size: var(--font-size-big);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-one);
}
.block-title {
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-smaller);
margin-left: var(--space-minus-large);
}
.intro-body {
margin-bottom: var(--space-small);
line-height: 1.5;
}
.onboarding--link {
color: var(--w-500);
font-weight: var(--font-weight-medium);
text-decoration: underline;
}
.emoji {
width: var(--space-large);
display: inline-block;
}
</style>