From bfdb05cdbe9e23fc2e3e2e30749e5b1e7083c9d6 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 22 Jan 2025 20:22:58 +0530
Subject: [PATCH] feat: update banner to show usage

---
 .../pageComponents/document/LimitBanner.vue        | 12 ++++++++++++
 .../pageComponents/response/LimitBanner.vue        | 14 ++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/document/LimitBanner.vue b/app/javascript/dashboard/components-next/captain/pageComponents/document/LimitBanner.vue
index 995424716..bd86ac84d 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/document/LimitBanner.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/document/LimitBanner.vue
@@ -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"
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/response/LimitBanner.vue b/app/javascript/dashboard/components-next/captain/pageComponents/response/LimitBanner.vue
index 4d548e62c..d986c898e 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/response/LimitBanner.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/response/LimitBanner.vue
@@ -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"