feat: add paywall

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

@@ -10,12 +10,12 @@
       <SLAListItemLoading v-for="ii in 2" :key="ii" class="mb-3" />
     </template>
     <template #body>
+      <SLAPaywall v-if="isBehindAPaywall" />
       <SLAEmptyState
-        v-if="!records.length"
-        class="w-full min-h-[12rem] relative"
+        v-else-if="!records.length"
         @primary-action="openAddPopup"
       />
-      <div v-else-if="records.length" class="flex flex-col w-full h-full gap-3">
+      <div v-else class="flex flex-col w-full h-full gap-3">
         <SLA-list-item
           v-for="sla in records"
           :key="sla.title"
@@ -48,25 +48,28 @@
   </settings-layout>
 </template>
 <script>
+import AddSLA from './AddSLA.vue';
 import SettingsLayout from '../SettingsLayout.vue';
+import SLAEmptyState from './components/SLAEmptyState.vue';
 import SLAHeader from './components/SLAHeader.vue';
 import SLAListItem from './components/SLAListItem.vue';
 import SLAListItemLoading from './components/SLAListItemLoading.vue';
-import SLAEmptyState from './components/SLAEmptyState.vue';
+import SLAPaywall from './components/SLAPaywall.vue';
+
 import { mapGetters } from 'vuex';
 import { convertSecondsToTimeUnit } from '@chatwoot/utils';
 
-import AddSLA from './AddSLA.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   components: {
     AddSLA,
+    SettingsLayout,
+    SLAEmptyState,
     SLAHeader,
     SLAListItem,
     SLAListItemLoading,
-    SettingsLayout,
-    SLAEmptyState,
+    SLAPaywall,
   },
   mixins: [alertMixin],
   data() {
@@ -91,6 +94,9 @@ export default {
     deleteMessage() {
       return ` ${this.selectedResponse.name}`;
     },
+    isBehindAPaywall() {
+      return true;
+    },
   },
   mounted() {
     this.$store.dispatch('sla/get');

app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywall.vue

@@ -0,0 +1,60 @@
+<script setup>
+import BaseEmptyState from './BaseEmptyState.vue';
+import { getCurrentInstance } from 'vue';
+
+// this is a hack to get the route and router from the parent component
+// TODO: Move this to a separate util if we need to use this in multiple places
+// https://github.com/vuejs/vue-router/issues/3760
+const { proxy } = getCurrentInstance();
+const route = proxy.$route;
+const router = proxy.$router;
+
+function routeToBilling() {
+  const accountId = route.params.accountId;
+
+  router.push({
+    name: 'billing_settings_index',
+    params: { accountId },
+  });
+}
+</script>
+
+<template>
+  <base-empty-state>
+    <div
+      class="flex flex-col items-center max-w-md px-6 pt-6 pb-3 bg-white border shadow rounded-xl border-slate-100"
+    >
+      <div class="flex items-center w-full gap-2">
+        <span
+          class="flex items-center justify-center w-6 h-6 rounded-full bg-woot-100"
+        >
+          <fluent-icon size="14" class="text-woot-500" icon="lock-closed" />
+        </span>
+        <span class="text-base font-medium text-slate-900">
+          Upgrade to create SLAs
+        </span>
+      </div>
+      <p class="text-sm font-normal tracking-[0.5%] mt-4">
+        SLA management is available on the
+        <span class="font-medium text-slate-900">Business and Enterprise</span>
+        plans only.
+      </p>
+      <p class="text-sm font-normal tracking-[0.5%]">
+        Upgrade now to get access to advanced features like team management,
+        automations, custom attributes, and more.
+      </p>
+      <woot-button
+        color-scheme="primary"
+        class="w-full mt-2 text-center rounded-xl"
+        size="expanded"
+        is-expanded
+        @click="routeToBilling"
+      >
+        Upgrade Now
+      </woot-button>
+      <p class="mt-2 text-xs tracking-tighter text-center">
+        You can change or cancel your plan anytime
+      </p>
+    </div>
+  </base-empty-state>
+</template>