From 08e1ed2a0f1eeb01178ed8dfb6dcca8ec67b769a Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 22 Jan 2025 20:15:03 +0530
Subject: [PATCH] feat: add banner for document and responses limit

---
 .../pageComponents/document/LimitBanner.vue   | 26 +++++++++++++++++++
 .../pageComponents/response/LimitBanner.vue   | 26 +++++++++++++++++++
 .../i18n/locale/en/integrations.json          |  4 +++
 3 files changed, 56 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/captain/pageComponents/document/LimitBanner.vue
 create mode 100644 app/javascript/dashboard/components-next/captain/pageComponents/response/LimitBanner.vue

diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/document/LimitBanner.vue b/app/javascript/dashboard/components-next/captain/pageComponents/document/LimitBanner.vue
new file mode 100644
index 000000000..995424716
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/document/LimitBanner.vue
@@ -0,0 +1,26 @@
+<script setup>
+import { useAccount } from 'dashboard/composables/useAccount';
+import { useRouter } from 'vue-router';
+
+import Banner from 'dashboard/components-next/banner/Banner.vue';
+
+const router = useRouter();
+const { accountId } = useAccount();
+
+const openBilling = () => {
+  router.push({
+    name: 'billing_settings_index',
+    params: { accountId: accountId.value },
+  });
+};
+</script>
+
+<template>
+  <Banner
+    color="amber"
+    :action-label="$t('CAPTAIN.PAYWALL.UPGRADE_NOW')"
+    @action="openBilling"
+  >
+    {{ $t('CAPTAIN.BANNER.DOCUMENTS') }}
+  </Banner>
+</template>
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/response/LimitBanner.vue b/app/javascript/dashboard/components-next/captain/pageComponents/response/LimitBanner.vue
new file mode 100644
index 000000000..4d548e62c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/response/LimitBanner.vue
@@ -0,0 +1,26 @@
+<script setup>
+import { useAccount } from 'dashboard/composables/useAccount';
+import { useRouter } from 'vue-router';
+
+import Banner from 'dashboard/components-next/banner/Banner.vue';
+
+const router = useRouter();
+const { accountId } = useAccount();
+
+const openBilling = () => {
+  router.push({
+    name: 'billing_settings_index',
+    params: { accountId: accountId.value },
+  });
+};
+</script>
+
+<template>
+  <Banner
+    color="amber"
+    :action-label="$t('CAPTAIN.PAYWALL.UPGRADE_NOW')"
+    @action="openBilling"
+  >
+    {{ $t('CAPTAIN.BANNER.RESPONSES') }}
+  </Banner>
+</template>
diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index 97fae7c1d..c1de560af 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -316,6 +316,10 @@
       "UPGRADE_NOW": "Upgrade now",
       "CANCEL_ANYTIME": "You can change or cancel your plan anytime"
     },
+    "BANNER": {
+      "RESPONSES": "You've used over 80% of your response limit. To continue using Captain AI, please upgrade.",
+      "DOCUMENTS": "Document limit reached. Upgrade to continue using Captain AI."
+    },
     "FORM": {
       "CANCEL": "Cancel",
       "CREATE": "Create",