From 9f3f238cb50b53c616ec62b306762f57b12f4403 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Mon, 2 Aug 2021 08:54:53 +0530
Subject: [PATCH] chore: Show new account modal if user accounts are empty
 (#2448)

---
 app/javascript/dashboard/App.vue              | 27 ++++++++++++++++++
 .../sidebarComponents/AddAccountModal.vue     | 28 +++++++++++++++++++
 .../dashboard/i18n/locale/en/settings.json    |  1 +
 3 files changed, 56 insertions(+)

diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue
index 2d196af04..147e1d525 100644
--- a/app/javascript/dashboard/App.vue
+++ b/app/javascript/dashboard/App.vue
@@ -3,12 +3,17 @@
     <transition name="fade" mode="out-in">
       <router-view></router-view>
     </transition>
+    <add-account-modal
+      :show="showAddAccountModal"
+      :has-accounts="hasAccounts"
+    />
     <woot-snackbar-box />
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
+import AddAccountModal from '../dashboard/components/layout/sidebarComponents/AddAccountModal';
 import WootSnackbarBox from './components/SnackbarContainer';
 import { accountIdFromPathname } from './helper/URLHelper';
 
@@ -17,14 +22,36 @@ export default {
 
   components: {
     WootSnackbarBox,
+    AddAccountModal,
+  },
+
+  data() {
+    return {
+      showAddAccountModal: false,
+    };
   },
 
   computed: {
     ...mapGetters({
       getAccount: 'accounts/getAccount',
+      currentUser: 'getCurrentUser',
     }),
+    hasAccounts() {
+      return (
+        this.currentUser &&
+        this.currentUser.accounts &&
+        this.currentUser.accounts.length !== 0
+      );
+    },
   },
 
+  watch: {
+    currentUser() {
+      if (!this.hasAccounts) {
+        this.showAddAccountModal = true;
+      }
+    },
+  },
   mounted() {
     this.$store.dispatch('setUser');
     this.setLocale(window.chatwootConfig.selectedLocale);
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
index 2c78495c9..429164d7c 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
@@ -9,6 +9,14 @@
         :header-title="$t('CREATE_ACCOUNT.NEW_ACCOUNT')"
         :header-content="$t('CREATE_ACCOUNT.SELECTOR_SUBTITLE')"
       />
+      <div v-if="!hasAccounts" class="alert-wrap">
+        <div class="callout alert">
+          <div class="icon-wrap">
+            <i class="ion-alert-circled"></i>
+          </div>
+          {{ $t('CREATE_ACCOUNT.NO_ACCOUNT_WARNING') }}
+        </div>
+      </div>
 
       <form class="row" @submit.prevent="addAccount">
         <div class="medium-12 columns">
@@ -53,6 +61,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    hasAccounts: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -90,3 +102,19 @@ export default {
   },
 };
 </script>
+<style lang="scss">
+.alert-wrap {
+  margin: var(--space-zero) var(--space-large);
+  margin-top: var(--space-medium);
+  .callout {
+    display: flex;
+    justify-content: center;
+  }
+}
+
+.icon-wrap {
+  font-size: var(--font-size-big);
+  margin-left: var(--space-smaller);
+  margin-right: var(--space-slab);
+}
+</style>
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 988f27923..a5405bd63 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -144,6 +144,7 @@
     "CSAT": "CSAT"
   },
   "CREATE_ACCOUNT": {
+    "NO_ACCOUNT_WARNING": "Uh oh! We could not find any Chatwoot accounts. Please create a new account to continue.",
     "NEW_ACCOUNT": "New Account",
     "SELECTOR_SUBTITLE": "Create a new account",
     "API": {