fix: Allow users to login even if they have access to more than 15 accounts (#4475)

app/javascript/dashboard/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app" class="app-wrapper app-root">
+  <div v-if="!authUIFlags.isFetching" id="app" class="app-wrapper app-root">
     <update-banner :latest-chatwoot-version="latestChatwootVersion" />
     <transition name="fade" mode="out-in">
       <router-view></router-view>
@@ -11,21 +11,28 @@
     <woot-snackbar-box />
     <network-notification />
   </div>
+  <loading-state v-else />
 </template>
 
 <script>
-import { accountIdFromPathname } from './helper/URLHelper';
 import { mapGetters } from 'vuex';
 import AddAccountModal from '../dashboard/components/layout/sidebarComponents/AddAccountModal';
+import LoadingState from './components/widgets/LoadingState.vue';
 import NetworkNotification from './components/NetworkNotification';
 import UpdateBanner from './components/app/UpdateBanner.vue';
+import vueActionCable from './helper/actionCable';
 import WootSnackbarBox from './components/SnackbarContainer';
+import {
+  registerSubscription,
+  verifyServiceWorkerExistence,
+} from './helper/pushHelper';
 
 export default {
   name: 'App',
 
   components: {
     AddAccountModal,
+    LoadingState,
     NetworkNotification,
     UpdateBanner,
     WootSnackbarBox,
@@ -43,13 +50,12 @@ export default {
       getAccount: 'accounts/getAccount',
       currentUser: 'getCurrentUser',
       globalConfig: 'globalConfig/get',
+      authUIFlags: 'getAuthUIFlags',
+      currentAccountId: 'getCurrentAccountId',
     }),
     hasAccounts() {
-      return (
-        this.currentUser &&
-        this.currentUser.accounts &&
-        this.currentUser.accounts.length !== 0
-      );
+      const { accounts = [] } = this.currentUser || {};
+      return accounts.length > 0;
     },
   },
 
@@ -58,32 +64,37 @@ export default {
       if (!this.hasAccounts) {
         this.showAddAccountModal = true;
       }
+      verifyServiceWorkerExistence(registration =>
+        registration.pushManager.getSubscription().then(subscription => {
+          if (subscription) {
+            registerSubscription();
+          }
+        })
+      );
+    },
+    currentAccountId() {
+      if (this.currentAccountId) {
+        this.initializeAccount();
+      }
     },
   },
   mounted() {
-    this.$store.dispatch('setUser');
     this.setLocale(window.chatwootConfig.selectedLocale);
-    this.initializeAccount();
   },
-
   methods: {
     setLocale(locale) {
       this.$root.$i18n.locale = locale;
     },
-
     async initializeAccount() {
-      const { pathname } = window.location;
-      const accountId = accountIdFromPathname(pathname);
-
-      if (accountId) {
-        await this.$store.dispatch('accounts/get');
-        const {
-          locale,
-          latest_chatwoot_version: latestChatwootVersion,
-        } = this.getAccount(accountId);
-        this.setLocale(locale);
-        this.latestChatwootVersion = latestChatwootVersion;
-      }
+      await this.$store.dispatch('accounts/get');
+      const {
+        locale,
+        latest_chatwoot_version: latestChatwootVersion,
+      } = this.getAccount(this.currentAccountId);
+      const { pubsub_token: pubsubToken } = this.currentUser || {};
+      this.setLocale(locale);
+      this.latestChatwootVersion = latestChatwootVersion;
+      vueActionCable.init(pubsubToken);
     },
   },
 };