From 82a1ad891daaf8d523da80db1ff3df3939a1fe15 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Wed, 24 Feb 2021 11:16:38 +0530
Subject: [PATCH] feat: Add a view to assist user while onboarding (#1826)

Co-authored-by: Nithin David <webofnithin@gmail.com>
---
 .../widgets/conversation/EmptyState.vue       |  61 ++++---
 .../widgets/conversation/OnboardingView.vue   | 157 ++++++++++++++++++
 .../i18n/locale/en/conversation.json          |  24 +++
 3 files changed, 223 insertions(+), 19 deletions(-)
 create mode 100644 app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue

diff --git a/app/javascript/dashboard/components/widgets/conversation/EmptyState.vue b/app/javascript/dashboard/components/widgets/conversation/EmptyState.vue
index 958e1b9da..1aaf66c14 100644
--- a/app/javascript/dashboard/components/widgets/conversation/EmptyState.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmptyState.vue
@@ -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>
diff --git a/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue b/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
new file mode 100644
index 000000000..fbdd284a2
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
@@ -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>
diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json
index 967378552..bf7c4550a 100644
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/en/conversation.json
@@ -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"
+    }
   }
 }