feat: update banner to show usage

2025-01-22 20:22:58 +05:30
parent 8631d75cc7
commit bfdb05cdbe
2 changed files with 26 additions and 0 deletions
@@ -1,5 +1,7 @@
 <script setup>
+import { onMounted, computed } from 'vue';
 import { useAccount } from 'dashboard/composables/useAccount';
+import { useCaptain } from 'dashboard/composables/useCaptain';
 import { useRouter } from 'vue-router';

 import Banner from 'dashboard/components-next/banner/Banner.vue';
@@ -7,16 +9,26 @@ import Banner from 'dashboard/components-next/banner/Banner.vue';
 const router = useRouter();
 const { accountId } = useAccount();

+const { documentLimits, fetchLimits } = useCaptain();
+
 const openBilling = () => {
  router.push({
    name: 'billing_settings_index',
    params: { accountId: accountId.value },
  });
 };
+
+const showBanner = computed(() => {
+  const { currentAvailable } = documentLimits.value;
+  return currentAvailable === 0;
+});
+
+onMounted(fetchLimits);
 </script>

 <template>
  <Banner
+    v-show="showBanner"
    color="amber"
    :action-label="$t('CAPTAIN.PAYWALL.UPGRADE_NOW')"
    @action="openBilling"
@@ -1,5 +1,7 @@
 <script setup>
+import { onMounted, computed } from 'vue';
 import { useAccount } from 'dashboard/composables/useAccount';
+import { useCaptain } from 'dashboard/composables/useCaptain';
 import { useRouter } from 'vue-router';

 import Banner from 'dashboard/components-next/banner/Banner.vue';
@@ -7,16 +9,28 @@ import Banner from 'dashboard/components-next/banner/Banner.vue';
 const router = useRouter();
 const { accountId } = useAccount();

+const { responseLimits, fetchLimits } = useCaptain();
+
 const openBilling = () => {
  router.push({
    name: 'billing_settings_index',
    params: { accountId: accountId.value },
  });
 };
+
+const showBanner = computed(() => {
+  const { consumed, totalCount } = responseLimits.value;
+  if (!consumed || !totalCount) return false;
+
+  return consumed / totalCount > 80;
+});
+
+onMounted(fetchLimits);
 </script>

 <template>
  <Banner
+    v-show="showBanner"
    color="amber"
    :action-label="$t('CAPTAIN.PAYWALL.UPGRADE_NOW')"
    @action="openBilling"