Merge branch 'develop' into chore/upgrade-page

app/javascript/dashboard/components-next/captain/pageComponents/document/LimitBanner.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, computed } from 'vue';
+import { computed } from 'vue';
 import { useAccount } from 'dashboard/composables/useAccount';
 import { useCaptain } from 'dashboard/composables/useCaptain';
 import { useRouter } from 'vue-router';
@@ -9,7 +9,7 @@ import Banner from 'dashboard/components-next/banner/Banner.vue';
 const router = useRouter();
 const { accountId } = useAccount();
 
-const { documentLimits, fetchLimits } = useCaptain();
+const { documentLimits } = useCaptain();
 
 const openBilling = () => {
   router.push({
@@ -24,8 +24,6 @@ const showBanner = computed(() => {
   const { currentAvailable } = documentLimits.value;
   return currentAvailable === 0;
 });
-
-onMounted(fetchLimits);
 </script>
 
 <template>

app/javascript/dashboard/components-next/captain/pageComponents/response/LimitBanner.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, computed } from 'vue';
+import { computed } from 'vue';
 import { useAccount } from 'dashboard/composables/useAccount';
 import { useCaptain } from 'dashboard/composables/useCaptain';
 import { useRouter } from 'vue-router';
@@ -9,7 +9,7 @@ import Banner from 'dashboard/components-next/banner/Banner.vue';
 const router = useRouter();
 const { accountId } = useAccount();
 
-const { responseLimits, fetchLimits } = useCaptain();
+const { responseLimits } = useCaptain();
 
 const openBilling = () => {
   router.push({
@@ -26,8 +26,6 @@ const showBanner = computed(() => {
 
   return consumed / totalCount > 0.8;
 });
-
-onMounted(fetchLimits);
 </script>
 
 <template>

app/javascript/dashboard/composables/useCaptain.js

@@ -1,11 +1,9 @@
 import { computed } from 'vue';
-import { useStore } from 'dashboard/composables/store.js';
 import { useAccount } from 'dashboard/composables/useAccount';
 import { useCamelCase } from 'dashboard/composables/useTransformKeys';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 export function useCaptain() {
-  const store = useStore();
   const { isCloudFeatureEnabled, currentAccount } = useAccount();
 
   const captainEnabled = computed(() => {
@@ -32,15 +30,10 @@ export function useCaptain() {
     return null;
   });
 
-  const fetchLimits = () => {
-    store.dispatch('accounts/limits');
-  };
-
   return {
     captainEnabled,
     captainLimits,
     documentLimits,
     responseLimits,
-    fetchLimits,
   };
 }

app/javascript/dashboard/routes/dashboard/Dashboard.vue

@@ -9,6 +9,7 @@ import AccountSelector from 'dashboard/components/layout/sidebarComponents/Accou
 import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel.vue';
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
 import UpgradePage from 'dashboard/routes/dashboard/upgrade/UpgradePage.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAccount } from 'dashboard/composables/useAccount';
@@ -37,6 +38,7 @@ export default {
     AddLabelModal,
     NotificationPanel,
     UpgradePage,
+    Spinner,
   },
   setup() {
     const upgradePageRef = ref(null);
@@ -64,6 +66,8 @@ export default {
   computed: {
     ...mapGetters({
       isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+      accountUIFlags: 'accounts/getUIFlags',
+      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',
     }),
     currentRoute() {
       return ' ';
@@ -71,13 +75,6 @@ export default {
     showUpgradePage() {
       return this.upgradePageRef?.shouldShowUpgradePage;
     },
-    bypassUpgradePage() {
-      return [
-        'billing_settings_index',
-        'settings_inbox_list',
-        'agent_list',
-      ].includes(this.$route.name);
-    },
     isSidebarOpen() {
       const { show_secondary_sidebar: showSecondarySidebar } = this.uiSettings;
       return showSecondarySidebar;
@@ -116,6 +113,7 @@ export default {
     },
   },
   mounted() {
+    this.fetchLimits();
     this.handleResize();
     this.$nextTick(this.checkBanner);
     window.addEventListener('resize', this.handleResize);
@@ -129,6 +127,10 @@ export default {
   },
 
   methods: {
+    fetchLimits() {
+      if (!this.isOnChatwootCloud) return;
+      this.$store.dispatch('accounts/limits');
+    },
     checkBanner() {
       this.hasBanner =
         document.getElementsByClassName('woot-banner').length > 0;
@@ -211,39 +213,43 @@ export default {
       @show-add-label-popup="showAddLabelPopup"
     />
     <main class="flex flex-1 h-full min-h-0 px-0 overflow-hidden">
-      <UpgradePage
+      <div
-        v-show="showUpgradePage"
+        v-if="accountUIFlags.isFetchingLimits"
-        ref="upgradePageRef"
+        class="flex items-center justify-center w-full h-full"
-        :bypass-upgrade-page="bypassUpgradePage"
+      >
-      />
+        <Spinner :size="24" class="text-n-brand" />
-      <template v-if="!showUpgradePage">
+      </div>
-        <router-view />
+      <template v-else>
-        <CommandBar />
+        <UpgradePage ref="upgradePageRef" />
-        <NotificationPanel
+        <template v-if="!showUpgradePage">
-          v-if="isNotificationPanel"
+          <router-view />
-          @close="closeNotificationPanel"
+          <CommandBar />
+          <NotificationPanel
+            v-if="isNotificationPanel"
+            @close="closeNotificationPanel"
+          />
+          <woot-modal
+            v-model:show="showAddLabelModal"
+            :on-close="hideAddLabelPopup"
+          >
+            <AddLabelModal @close="hideAddLabelPopup" />
+          </woot-modal>
+        </template>
+        <AccountSelector
+          :show-account-modal="showAccountModal"
+          @close-account-modal="toggleAccountModal"
+          @show-create-account-modal="openCreateAccountModal"
+        />
+        <AddAccountModal
+          :show="showCreateAccountModal"
+          @close-account-create-modal="closeCreateAccountModal"
+        />
+        <WootKeyShortcutModal
+          v-model:show="showShortcutModal"
+          @close="closeKeyShortcutModal"
+          @clickaway="closeKeyShortcutModal"
         />
-        <woot-modal
-          v-model:show="showAddLabelModal"
-          :on-close="hideAddLabelPopup"
-        >
-          <AddLabelModal @close="hideAddLabelPopup" />
-        </woot-modal>
       </template>
-      <AccountSelector
-        :show-account-modal="showAccountModal"
-        @close-account-modal="toggleAccountModal"
-        @show-create-account-modal="openCreateAccountModal"
-      />
-      <AddAccountModal
-        :show="showCreateAccountModal"
-        @close-account-create-modal="closeCreateAccountModal"
-      />
-      <WootKeyShortcutModal
-        v-model:show="showShortcutModal"
-        @close="closeKeyShortcutModal"
-        @clickaway="closeKeyShortcutModal"
-      />
     </main>
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue

@@ -14,13 +14,8 @@ import SettingsLayout from '../SettingsLayout.vue';
 import ButtonV4 from 'next/button/Button.vue';
 
 const { currentAccount } = useAccount();
-const {
+const { captainEnabled, captainLimits, documentLimits, responseLimits } =
-  captainEnabled,
+  useCaptain();
-  captainLimits,
-  documentLimits,
-  responseLimits,
-  fetchLimits,
-} = useCaptain();
 
 const uiFlags = useMapGetter('accounts/getUIFlags');
 const store = useStore();
@@ -62,7 +57,6 @@ const hasABillingPlan = computed(() => {
 const fetchAccountDetails = async () => {
   if (!hasABillingPlan.value) {
     store.dispatch('accounts/subscription');
-    fetchLimits();
   }
 };
 

app/javascript/dashboard/routes/dashboard/upgrade/UpgradePage.vue

@@ -1,8 +1,7 @@
 <script setup>
-import { onMounted, computed, defineExpose, defineProps } from 'vue';
+import { computed, defineExpose } from 'vue';
-import { useStore } from 'dashboard/composables/store';
 import { useMapGetter } from 'dashboard/composables/store.js';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { useAccount } from 'dashboard/composables/useAccount';
 import { differenceInDays } from 'date-fns';
 import { useAdmin } from 'dashboard/composables/useAdmin';
@@ -11,20 +10,14 @@ import { useI18n } from 'vue-i18n';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 
-const props = defineProps({
-  bypassUpgradePage: {
-    type: Boolean,
-    default: false,
-  },
-});
-
 const router = useRouter();
-const store = useStore();
+const route = useRoute();
 const { t } = useI18n();
 const { accountId, currentAccount } = useAccount();
 const { isAdmin } = useAdmin();
 
 const isOnChatwootCloud = useMapGetter('globalConfig/isOnChatwootCloud');
+const accountUIFlags = useMapGetter('accounts/getUIFlags');
 
 const testLimit = ({ allowed, consumed }) => {
   return consumed > allowed;
@@ -41,6 +34,14 @@ const isTrialAccount = computed(() => {
   return diffDays <= 15;
 });
 
+const bypassUpgradePage = computed(() => {
+  return [
+    'billing_settings_index',
+    'settings_inbox_list',
+    'agent_list',
+  ].includes(route.name);
+});
+
 const limitExceededMessage = computed(() => {
   const account = currentAccount.value;
   if (!account?.limits) return '';
@@ -80,17 +81,14 @@ const isLimitExceeded = computed(() => {
 });
 
 const shouldShowUpgradePage = computed(() => {
+  // Hide upgrade page while fetching limits
+  if (accountUIFlags.isFetchingLimits) return false;
   // Skip upgrade page in Billing, Inbox, and Agent pages
-  if (props.bypassUpgradePage) return false;
+  if (bypassUpgradePage.value) return false;
   if (!isOnChatwootCloud.value) return false;
   if (isTrialAccount.value) return false;
   return isLimitExceeded.value;
 });
-
-const fetchLimits = () => {
-  store.dispatch('accounts/limits');
-};
-
 const routeToBilling = () => {
   router.push({
     name: 'billing_settings_index',
@@ -98,8 +96,6 @@ const routeToBilling = () => {
   });
 };
 
-onMounted(() => fetchLimits());
-
 defineExpose({ shouldShowUpgradePage });
 </script>
 

app/javascript/dashboard/store/modules/accounts.js

@@ -18,6 +18,7 @@ const state = {
     isFetchingItem: false,
     isUpdating: false,
     isCheckoutInProcess: false,
+    isFetchingLimits: false,
   },
 };
 
@@ -133,11 +134,14 @@ export const actions = {
   },
 
   limits: async ({ commit }) => {
+    commit(types.default.SET_ACCOUNT_UI_FLAG, { isFetchingLimits: true });
     try {
       const response = await EnterpriseAccountAPI.getLimits();
       commit(types.default.SET_ACCOUNT_LIMITS, response.data);
     } catch (error) {
       // silent error
+    } finally {
+      commit(types.default.SET_ACCOUNT_UI_FLAG, { isFetchingLimits: false });
     }
   },