Update paywall restrictions

app/javascript/dashboard/App.vue

@@ -4,7 +4,6 @@ import AddAccountModal from '../dashboard/components/layout/sidebarComponents/Ad
 import LoadingState from './components/widgets/LoadingState.vue';
 import NetworkNotification from './components/NetworkNotification.vue';
 import UpdateBanner from './components/app/UpdateBanner.vue';
-import UpgradeBanner from './components/app/UpgradeBanner.vue';
 import PaymentPendingBanner from './components/app/PaymentPendingBanner.vue';
 import PendingEmailVerificationBanner from './components/app/PendingEmailVerificationBanner.vue';
 import vueActionCable from './helper/actionCable';
@@ -31,7 +30,6 @@ export default {
     UpdateBanner,
     PaymentPendingBanner,
     WootSnackbarBox,
-    UpgradeBanner,
     PendingEmailVerificationBanner,
   },
   setup() {
@@ -146,7 +144,6 @@ export default {
     <template v-if="currentAccountId">
       <PendingEmailVerificationBanner v-if="hideOnOnboardingView" />
       <PaymentPendingBanner v-if="hideOnOnboardingView" />
-      <UpgradeBanner />
     </template>
     <router-view v-slot="{ Component }">
       <transition name="fade" mode="out-in">

app/javascript/dashboard/components/app/PaymentPaywall.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { computed, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import { useAccount } from 'dashboard/composables/useAccount';
+import { differenceInDays } from 'date-fns';
+import { useRoute } from 'vue-router';
+
+const ALWAYS_ON_ROUTES = [
+  'agent_list',
+  'settings_inbox_list',
+  'billing_settings_index',
+];
+
+const { accountId } = useAccount();
+const store = useStore();
+const route = useRoute();
+const routeName = computed(() => {
+  return route.name || '';
+});
+const isOnChatwootCloud = computed(
+  () => store.getters['globalConfig/isOnChatwootCloud']
+);
+const account = computed(() =>
+  store.getters['accounts/getAccount'](accountId.value)
+);
+
+const isTrialAccount = computed(() => {
+  if (!account.value) return false;
+
+  const createdAt = new Date(account.value.created_at);
+  const diffDays = differenceInDays(new Date(), createdAt);
+
+  return diffDays <= 15;
+});
+
+const testLimit = ({ allowed, consumed }) => {
+  return consumed > allowed;
+};
+
+const isLimitExceeded = computed(() => {
+  if (ALWAYS_ON_ROUTES.includes(routeName.value)) {
+    return false;
+  }
+
+  if (!account.value) return false;
+
+  const { limits } = account.value;
+  if (!limits) return false;
+
+  const { conversation, non_web_inboxes: nonWebInboxes } = limits;
+  return testLimit(conversation) || testLimit(nonWebInboxes);
+});
+
+const shouldShowBanner = computed(() => {
+  if (!isOnChatwootCloud.value) {
+    return false;
+  }
+
+  if (isTrialAccount.value) {
+    return false;
+  }
+
+  return isLimitExceeded.value;
+});
+
+const fetchLimits = () => store.dispatch('accounts/limits');
+
+onMounted(() => {
+  if (isOnChatwootCloud.value) {
+    fetchLimits();
+  }
+});
+</script>
+
+<template>
+  <div v-if="shouldShowBanner">Limits exceeded</div>
+
+  <slot v-else />
+</template>

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

@@ -9,7 +9,7 @@ import AddAccountModal from 'dashboard/components/layout/sidebarComponents/AddAc
 import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector.vue';
 import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel.vue';
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
-
+import PaymentPaywall from 'dashboard/components/app/PaymentPaywall.vue';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAccount } from 'dashboard/composables/useAccount';
 
@@ -29,6 +29,7 @@ export default {
     CommandBar,
     WootKeyShortcutModal,
     AddAccountModal,
+    PaymentPaywall,
     AccountSelector,
     AddLabelModal,
     NotificationPanel,
@@ -194,7 +195,9 @@ export default {
       @show-add-label-popup="showAddLabelPopup"
     />
     <main class="flex flex-1 h-full min-h-0 px-0 overflow-hidden">
-      <router-view />
+      <PaymentPaywall>
+        <router-view />
+      </PaymentPaywall>
       <CommandBar />
       <AccountSelector
         :show-account-modal="showAccountModal"

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

@@ -23,6 +23,7 @@ const state = {
 
 export const getters = {
   getAccount: $state => id => {
+    console.log('account', id);
     return findRecordById($state, id);
   },
   getUIFlags($state) {