From d420c2cec7fc3591a5afeb9815b4b598905effbd Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 21 Jan 2025 17:38:15 +0530
Subject: [PATCH] feat: new billing page

---
 .../dashboard/i18n/locale/en/settings.json    |  15 +-
 .../dashboard/settings/billing/Index.vue      | 181 ++++++++++++------
 .../settings/billing/billing.routes.js        |   4 +-
 .../billing/components/BillingCard.vue        |  25 +++
 .../billing/components/BillingHeader.vue      |  26 +++
 .../billing/components/BillingItem.vue        |   4 +-
 .../billing/components/BillingMeter.vue       |  45 +++++
 .../billing/components/DetailItem.vue         |  23 +++
 .../enterprise/api/v1/accounts_controller.rb  |   3 +-
 9 files changed, 256 insertions(+), 70 deletions(-)
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingCard.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingHeader.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingMeter.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/billing/components/DetailItem.vue

diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index e532f8e8f..d52edac81 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -265,7 +265,7 @@
     "CAPTAIN": "Captain",
     "CAPTAIN_ASSISTANTS": "Assistants",
     "CAPTAIN_DOCUMENTS": "Documents",
-    "CAPTAIN_RESPONSES" : "FAQs",
+    "CAPTAIN_RESPONSES": "FAQs",
     "HOME": "Home",
     "AGENTS": "Agents",
     "AGENT_BOTS": "Bots",
@@ -327,15 +327,26 @@
   },
   "BILLING_SETTINGS": {
     "TITLE": "Billing",
+    "DESCRIPTION": "Manage your subscription here, upgrade your plan and get more for your team.",
     "CURRENT_PLAN": {
       "TITLE": "Current Plan",
-      "PLAN_NOTE": "You are currently subscribed to the **{plan}** plan with **{quantity}** licenses"
+      "PLAN_NOTE": "You are currently subscribed to the **{plan}** plan with **{quantity}** licenses",
+      "SEAT_COUNT": "Number of seats",
+      "RENEWS_ON": "Renews on"
     },
+    "VIEW_PRICING": "View Pricing",
     "MANAGE_SUBSCRIPTION": {
       "TITLE": "Manage your subscription",
       "DESCRIPTION": "View your previous invoices, edit your billing details, or cancel your subscription.",
       "BUTTON_TXT": "Go to the billing portal"
     },
+    "CAPTAIN": {
+      "TITLE": "Captain",
+      "DESCRIPTION": "Manage usage and credits for Captain AI.",
+      "BUTTON_TXT": "Buy more credits",
+      "DOCUMENTS": "Documents",
+      "RESPONSES": "Responses"
+    },
     "CHAT_WITH_US": {
       "TITLE": "Need help?",
       "DESCRIPTION": "Do you face any issues in billing? We are here to help.",
diff --git a/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
index ea85fd7d6..a86e1301e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
@@ -2,12 +2,19 @@
 import { computed, onMounted } from 'vue';
 import { useMapGetter, useStore } from 'dashboard/composables/store.js';
 import { useAccount } from 'dashboard/composables/useAccount';
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import { useCamelCase } from 'dashboard/composables/useTransformKeys';
+import { format } from 'date-fns';
 
 import BillingItem from './components/BillingItem.vue';
+import BillingMeter from './components/BillingMeter.vue';
+import BillingCard from './components/BillingCard.vue';
+import BillingHeader from './components/BillingHeader.vue';
+import DetailItem from './components/DetailItem.vue';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import SettingsLayout from '../SettingsLayout.vue';
+import ButtonV4 from 'next/button/Button.vue';
 
 const { currentAccount } = useAccount();
-const { formatMessage } = useMessageFormatter();
 
 const uiFlags = useMapGetter('accounts/getUIFlags');
 const store = useStore();
@@ -31,6 +38,33 @@ const subscribedQuantity = computed(() => {
   return customAttributes.value.subscribed_quantity;
 });
 
+const subscriptionRenewsOn = computed(() => {
+  if (!customAttributes.value.subscription_ends_on) return '';
+  const endDate = new Date(customAttributes.value.subscription_ends_on);
+  // return date as 12 Jan, 2034
+  return format(endDate, 'dd MMM, yyyy');
+});
+
+const captainLimits = computed(() => {
+  return currentAccount.value?.limits?.captain;
+});
+
+const documentLimits = computed(() => {
+  if (captainLimits.value?.documents) {
+    return useCamelCase(captainLimits.value.documents);
+  }
+
+  return null;
+});
+
+const responseLimits = computed(() => {
+  if (captainLimits.value?.responses) {
+    return useCamelCase(captainLimits.value.responses);
+  }
+
+  return null;
+});
+
 /**
  * Computed property indicating if user has a billing plan
  * @returns {boolean}
@@ -42,6 +76,7 @@ const hasABillingPlan = computed(() => {
 const fetchAccountDetails = async () => {
   if (!hasABillingPlan.value) {
     store.dispatch('accounts/subscription');
+    store.dispatch('accounts/limits');
   }
 };
 
@@ -59,66 +94,86 @@ onMounted(fetchAccountDetails);
 </script>
 
 <template>
-  <div class="flex-1 p-6 overflow-auto dark:bg-slate-900">
-    <woot-loading-state v-if="uiFlags.isFetchingItem" />
-    <div v-else-if="!hasABillingPlan">
-      <p>{{ $t('BILLING_SETTINGS.NO_BILLING_USER') }}</p>
-    </div>
-    <div v-else class="w-full">
-      <div class="current-plan--details">
-        <h6>{{ $t('BILLING_SETTINGS.CURRENT_PLAN.TITLE') }}</h6>
-        <div
-          v-dompurify-html="
-            formatMessage(
-              $t('BILLING_SETTINGS.CURRENT_PLAN.PLAN_NOTE', {
-                plan: planName,
-                quantity: subscribedQuantity,
-              })
-            )
-          "
-        />
-      </div>
-      <BillingItem
-        :title="$t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.TITLE')"
-        :description="$t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.DESCRIPTION')"
-        :button-label="$t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.BUTTON_TXT')"
-        @open="onClickBillingPortal"
+  <SettingsLayout
+    :is-loading="uiFlags.isFetchingItem"
+    :loading-message="$t('ATTRIBUTES_MGMT.LOADING')"
+    :no-records-found="!hasABillingPlan"
+    :no-records-message="$t('BILLING_SETTINGS.NO_BILLING_USER')"
+    class="max-w-2xl"
+  >
+    <template #header>
+      <BaseSettingsHeader
+        :title="$t('BILLING_SETTINGS.TITLE')"
+        :description="$t('BILLING_SETTINGS.DESCRIPTION')"
+        :link-text="$t('BILLING_SETTINGS.VIEW_PRICING')"
+        feature-name="billing"
       />
-      <BillingItem
-        :title="$t('BILLING_SETTINGS.CHAT_WITH_US.TITLE')"
-        :description="$t('BILLING_SETTINGS.CHAT_WITH_US.DESCRIPTION')"
-        :button-label="$t('BILLING_SETTINGS.CHAT_WITH_US.BUTTON_TXT')"
-        button-icon="chat-multiple"
-        @open="onToggleChatWindow"
-      />
-    </div>
-  </div>
+    </template>
+    <template #body>
+      <section class="grid gap-4">
+        <BillingCard
+          :title="$t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.TITLE')"
+          :description="$t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.DESCRIPTION')"
+        >
+          <template #action>
+            <ButtonV4 sm solid blue @click="onClickBillingPortal">
+              {{ $t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.BUTTON_TXT') }}
+            </ButtonV4>
+          </template>
+          <div class="grid grid-cols-3 gap-2 divide-x divide-n-weak">
+            <DetailItem
+              :label="$t('BILLING_SETTINGS.CURRENT_PLAN.TITLE')"
+              :value="planName"
+            />
+            <DetailItem
+              :label="$t('BILLING_SETTINGS.CURRENT_PLAN.SEAT_COUNT')"
+              :value="subscribedQuantity"
+            />
+            <DetailItem
+              :label="$t('BILLING_SETTINGS.CURRENT_PLAN.RENEWS_ON')"
+              :value="subscriptionRenewsOn"
+            />
+          </div>
+        </BillingCard>
+        <BillingCard
+          :title="$t('BILLING_SETTINGS.CAPTAIN.TITLE')"
+          :description="$t('BILLING_SETTINGS.CAPTAIN.DESCRIPTION')"
+        >
+          <template #action>
+            <ButtonV4 sm solid slate disabled>
+              {{ $t('BILLING_SETTINGS.CAPTAIN.BUTTON_TXT') }}
+            </ButtonV4>
+          </template>
+          <div v-if="captainLimits && responseLimits" class="px-5">
+            <BillingMeter
+              :title="$t('BILLING_SETTINGS.CAPTAIN.RESPONSES')"
+              v-bind="responseLimits"
+            />
+          </div>
+          <div v-if="captainLimits && documentLimits" class="px-5">
+            <BillingMeter
+              :title="$t('BILLING_SETTINGS.CAPTAIN.DOCUMENTS')"
+              v-bind="documentLimits"
+            />
+          </div>
+        </BillingCard>
+
+        <BillingHeader
+          class="px-1 mt-5"
+          :title="$t('BILLING_SETTINGS.CHAT_WITH_US.TITLE')"
+          :description="$t('BILLING_SETTINGS.CHAT_WITH_US.DESCRIPTION')"
+        >
+          <ButtonV4
+            sm
+            solid
+            slate
+            icon="i-lucide-life-buoy"
+            @open="onToggleChatWindow"
+          >
+            {{ $t('BILLING_SETTINGS.CHAT_WITH_US.BUTTON_TXT') }}
+          </ButtonV4>
+        </BillingHeader>
+      </section>
+    </template>
+  </SettingsLayout>
 </template>
-
-<style lang="scss">
-.manage-subscription {
-  @apply bg-white dark:bg-slate-800 flex justify-between mb-2 py-6 px-4 items-center rounded-md border border-solid border-slate-75 dark:border-slate-700;
-}
-
-.current-plan--details {
-  @apply border-b border-solid border-slate-75 dark:border-slate-800 mb-4 pb-4;
-
-  h6 {
-    @apply text-slate-800 dark:text-slate-100;
-  }
-
-  p {
-    @apply text-slate-600 dark:text-slate-200;
-  }
-}
-
-.manage-subscription {
-  .manage-subscription--description {
-    @apply mb-0 text-slate-600 dark:text-slate-200;
-  }
-
-  h6 {
-    @apply text-slate-800 dark:text-slate-100;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/billing/billing.routes.js b/app/javascript/dashboard/routes/dashboard/settings/billing/billing.routes.js
index 9fc09a00a..26b441c75 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/billing/billing.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/billing.routes.js
@@ -1,5 +1,5 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-import SettingsContent from '../Wrapper.vue';
+import SettingsWrapper from '../SettingsWrapper.vue';
 import Index from './Index.vue';
 
 export default {
@@ -9,7 +9,7 @@ export default {
       meta: {
         permissions: ['administrator'],
       },
-      component: SettingsContent,
+      component: SettingsWrapper,
       props: {
         headerTitle: 'BILLING_SETTINGS.TITLE',
         icon: 'credit-card-person',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingCard.vue b/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingCard.vue
new file mode 100644
index 000000000..d9179b76c
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingCard.vue
@@ -0,0 +1,25 @@
+<script setup>
+import BillingHeader from './BillingHeader.vue';
+
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="rounded-xl shadow-sm border border-n-weak bg-n-solid-3 py-5 space-y-5"
+  >
+    <BillingHeader :title :description class="px-5">
+      <slot name="action" />
+    </BillingHeader>
+    <slot />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingHeader.vue
new file mode 100644
index 000000000..ef0b8d9cd
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingHeader.vue
@@ -0,0 +1,26 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="grid grid-cols-[1fr_200px] gap-5">
+    <div>
+      <span class="text-base font-medium text-n-slate-12">
+        {{ title }}
+      </span>
+      <p class="text-sm mt-1 text-n-slate-11">
+        {{ description }}
+      </p>
+    </div>
+    <slot />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingItem.vue b/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingItem.vue
index a63744655..d5f7cfb58 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingItem.vue
@@ -26,8 +26,8 @@ export default {
 <template>
   <div class="manage-subscription">
     <div>
-      <h6>{{ title }}</h6>
-      <p class="manage-subscription--description">
+      <h6 class="text-n-slate-12">{{ title }}</h6>
+      <p class="text-n-slate-11">
         {{ description }}
       </p>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingMeter.vue b/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingMeter.vue
new file mode 100644
index 000000000..fb057b44a
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingMeter.vue
@@ -0,0 +1,45 @@
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  consumed: {
+    type: Number,
+    required: true,
+  },
+  totalCount: {
+    type: Number,
+    required: true,
+  },
+});
+
+const percent = computed(() =>
+  Math.round((props.consumed / props.totalCount) * 100)
+);
+
+const colorClass = computed(() => {
+  if (percent.value < 50) {
+    return 'bg-n-teal-10';
+  }
+  if (percent.value < 80) {
+    return 'bg-n-amber-10';
+  }
+  return 'bg-n-ruby-10';
+});
+</script>
+
+<template>
+  <div
+    class="flex gap-5 items-center justify-between text-xs uppercase text-n-slate-10"
+  >
+    <div class="font-medium tracking-wider">
+      {{ title }}
+    </div>
+    <div class="tabular-nums">{{ consumed }} / {{ totalCount }}</div>
+  </div>
+  <div class="rounded-full overflow-hidden h-2 w-full bg-n-container mt-2">
+    <div class="h-2" :class="colorClass" :style="{ width: `${percent}%` }" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/billing/components/DetailItem.vue b/app/javascript/dashboard/routes/dashboard/settings/billing/components/DetailItem.vue
new file mode 100644
index 000000000..1c4f2c458
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/components/DetailItem.vue
@@ -0,0 +1,23 @@
+<script setup>
+defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  value: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="px-5">
+    <span class="text-n-slate-11 text-xs">
+      {{ label }}
+    </span>
+    <div class="mt-2 text-xl font-medium text-n-slate-12">
+      {{ value }}
+    </div>
+  </div>
+</template>
diff --git a/enterprise/app/controllers/enterprise/api/v1/accounts_controller.rb b/enterprise/app/controllers/enterprise/api/v1/accounts_controller.rb
index f26616f29..f449529b8 100644
--- a/enterprise/app/controllers/enterprise/api/v1/accounts_controller.rb
+++ b/enterprise/app/controllers/enterprise/api/v1/accounts_controller.rb
@@ -15,7 +15,8 @@ class Enterprise::Api::V1::AccountsController < Api::BaseController
   def limits
     limits = {
       'conversation' => {},
-      'non_web_inboxes' => {}
+      'non_web_inboxes' => {},
+      'captain' => @account.usage_limits[:captain]
     }
 
     if default_plan?(@account)