chore: Show new account modal if user accounts are empty (#2448)

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);

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>

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": {