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
GitHub
parent
f424a832f4
commit
82a1ad891d
3 changed files with 223 additions and 19 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -74,5 +74,29 @@
|
|||
"ERROR": "Please enter a valid email address"
|
||||
}
|
||||
}
|
||||
},
|
||||
"ONBOARDING": {
|
||||
"TITLE": "Hey 👋, Welcome to %{installationName}!",
|
||||
"DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
|
||||
"READ_LATEST_UPDATES": "Read our latest updates",
|
||||
"ALL_CONVERSATION": {
|
||||
"TITLE": "All your conversations in one place",
|
||||
"DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
|
||||
},
|
||||
"TEAM_MEMBERS": {
|
||||
"TITLE": "Invite your team members",
|
||||
"DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email address to the agent list.",
|
||||
"NEW_LINK": "Click here to invite a team member"
|
||||
},
|
||||
"INBOXES": {
|
||||
"TITLE": "Connect Inboxes",
|
||||
"DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook or Twitter page or even your WhatsApp number.",
|
||||
"NEW_LINK": "Click here to create an inbox"
|
||||
},
|
||||
"LABELS": {
|
||||
"TITLE": "Organize conversations with labels",
|
||||
"DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
|
||||
"NEW_LINK": "Click here to create tags"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue