feat: Add AI credit topup flow for Stripe (#12988)

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com> Co-authored-by: Pranav <pranav@chatwoot.com>
2025-12-03 07:23:44 +05:30
parent 1df5fd513a
commit b269cca0bf
17 changed files with 542 additions and 14 deletions
--- a/app/javascript/dashboard/api/enterprise/account.js
+++ b/app/javascript/dashboard/api/enterprise/account.js
@@ -23,6 +23,10 @@ class EnterpriseAccountAPI extends ApiClient {
      action_type: action,
    });
  }
+
+  createTopupCheckout(credits) {
+    return axios.post(`${this.url}topup_checkout`, { credits });
+  }
 }

 export default new EnterpriseAccountAPI();
--- a/app/javascript/dashboard/composables/useCaptain.js
+++ b/app/javascript/dashboard/composables/useCaptain.js
@@ -1,5 +1,5 @@
 import { computed } from 'vue';
-import { useStore } from 'dashboard/composables/store.js';
+import { useMapGetter, useStore } from 'dashboard/composables/store.js';
 import { useAccount } from 'dashboard/composables/useAccount';
 import { useConfig } from 'dashboard/composables/useConfig';
 import { useCamelCase } from 'dashboard/composables/useTransformKeys';
@@ -9,6 +9,7 @@ export function useCaptain() {
  const store = useStore();
  const { isCloudFeatureEnabled, currentAccount } = useAccount();
  const { isEnterprise } = useConfig();
+  const uiFlags = useMapGetter('accounts/getUIFlags');

  const captainEnabled = computed(() => {
    return isCloudFeatureEnabled(FEATURE_FLAGS.CAPTAIN);
@@ -34,6 +35,8 @@ export function useCaptain() {
    return null;
  });

+  const isFetchingLimits = computed(() => uiFlags.value.isFetchingLimits);
+
  const fetchLimits = () => {
    if (isEnterprise) {
      store.dispatch('accounts/limits');
@@ -46,5 +49,6 @@ export function useCaptain() {
    documentLimits,
    responseLimits,
    fetchLimits,
+    isFetchingLimits,
  };
 }
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -399,15 +399,31 @@
      "DESCRIPTION": "Manage usage and credits for Captain AI.",
      "BUTTON_TXT": "Buy more credits",
      "DOCUMENTS": "Documents",
-      "RESPONSES": "Responses",
-      "UPGRADE": "Captain is not available on the free plan, upgrade now to get access to assistants, copilot and more."
+      "RESPONSES": "Credits",
+      "UPGRADE": "Captain is not available on the free plan, upgrade now to get access to assistants, copilot and more.",
+      "REFRESH_CREDITS": "Refresh"
    },
    "CHAT_WITH_US": {
      "TITLE": "Need help?",
      "DESCRIPTION": "Do you face any issues in billing? We are here to help.",
      "BUTTON_TXT": "Chat with us"
    },
-    "NO_BILLING_USER": "Your billing account is being configured. Please refresh the page and try again."
+    "NO_BILLING_USER": "Your billing account is being configured. Please refresh the page and try again.",
+    "TOPUP": {
+      "BUY_CREDITS": "Buy more credits",
+      "MODAL_TITLE": "Buy AI Credits",
+      "MODAL_DESCRIPTION": "Purchase additional credits for Captain AI.",
+      "CREDITS": "CREDITS",
+      "ONE_TIME": "one-time",
+      "POPULAR": "Most Popular",
+      "NOTE_TITLE": "Note:",
+      "NOTE_DESCRIPTION": "Credits are added immediately and expire in 6 months. An active subscription is required to use credits. Purchased credits are consumed after your monthly plan credits.",
+      "CANCEL": "Cancel",
+      "PURCHASE": "Purchase Credits",
+      "LOADING": "Loading options...",
+      "FETCH_ERROR": "Failed to load credit options. Please try again.",
+      "PURCHASE_ERROR": "Failed to process purchase. Please try again."
+    }
  },
  "SECURITY_SETTINGS": {
    "TITLE": "Security",
--- a/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
@@ -11,6 +11,7 @@ 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 PurchaseCreditsModal from './components/PurchaseCreditsModal.vue';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 import SettingsLayout from '../SettingsLayout.vue';
 import ButtonV4 from 'next/button/Button.vue';
@@ -23,6 +24,7 @@ const {
  documentLimits,
  responseLimits,
  fetchLimits,
+  isFetchingLimits,
 } = useCaptain();

 const uiFlags = useMapGetter('accounts/getUIFlags');
@@ -32,6 +34,7 @@ const BILLING_REFRESH_ATTEMPTED = 'billing_refresh_attempted';

 // State for handling refresh attempts and loading
 const isWaitingForBilling = ref(false);
+const purchaseCreditsModalRef = ref(null);

 const customAttributes = computed(() => {
  return currentAccount.value.custom_attributes || {};
@@ -45,6 +48,11 @@ const planName = computed(() => {
  return customAttributes.value.plan_name;
 });

+const canPurchaseCredits = computed(() => {
+  const plan = planName.value?.toLowerCase();
+  return plan && plan !== 'hacker';
+});
+
 /**
 * Computed property for subscribed quantity
 * @returns {number|undefined}
@@ -71,8 +79,9 @@ const hasABillingPlan = computed(() => {
 const fetchAccountDetails = async () => {
  if (!hasABillingPlan.value) {
    await store.dispatch('accounts/subscription');
-    fetchLimits();
  }
+  // Always fetch limits for billing page to show credit usage
+  fetchLimits();
 };

 const handleBillingPageLogic = async () => {
@@ -119,6 +128,10 @@ const onToggleChatWindow = () => {
  }
 };

+const openPurchaseCreditsModal = () => {
+  purchaseCreditsModalRef.value?.open();
+};
+
 onMounted(handleBillingPageLogic);
 </script>

@@ -178,9 +191,27 @@ onMounted(handleBillingPageLogic);
          :description="$t('BILLING_SETTINGS.CAPTAIN.DESCRIPTION')"
        >
          <template #action>
-            <ButtonV4 sm faded slate disabled>
-              {{ $t('BILLING_SETTINGS.CAPTAIN.BUTTON_TXT') }}
-            </ButtonV4>
+            <div class="flex gap-2">
+              <ButtonV4
+                sm
+                flushed
+                slate
+                icon="i-lucide-refresh-cw"
+                :is-loading="isFetchingLimits"
+                @click="fetchLimits"
+              >
+                {{ $t('BILLING_SETTINGS.CAPTAIN.REFRESH_CREDITS') }}
+              </ButtonV4>
+              <ButtonV4
+                v-if="canPurchaseCredits"
+                sm
+                solid
+                blue
+                @click="openPurchaseCreditsModal"
+              >
+                {{ $t('BILLING_SETTINGS.TOPUP.BUY_CREDITS') }}
+              </ButtonV4>
+            </div>
          </template>
          <div v-if="captainLimits && responseLimits" class="px-5">
            <BillingMeter
@@ -223,6 +254,7 @@ onMounted(handleBillingPageLogic);
          </ButtonV4>
        </BillingHeader>
      </section>
+      <PurchaseCreditsModal ref="purchaseCreditsModalRef" />
    </template>
  </SettingsLayout>
 </template>
--- a/app/javascript/dashboard/routes/dashboard/settings/billing/components/CreditPackageCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/components/CreditPackageCard.vue
@@ -0,0 +1,101 @@
+<script setup>
+defineProps({
+  credits: {
+    type: Number,
+    required: true,
+  },
+  amount: {
+    type: Number,
+    required: true,
+  },
+  currency: {
+    type: String,
+    default: 'usd',
+  },
+  isSelected: {
+    type: Boolean,
+    default: false,
+  },
+  isPopular: {
+    type: Boolean,
+    default: false,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['select']);
+
+const formatCredits = credits => {
+  return credits.toLocaleString();
+};
+
+const formatAmount = (amount, currency) => {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: currency.toUpperCase(),
+    minimumFractionDigits: 0,
+  }).format(amount);
+};
+</script>
+
+<template>
+  <label
+    class="relative flex flex-col p-6 border-2 rounded-xl transition-all cursor-pointer bg-n-solid-1 hover:bg-n-solid-2"
+    :class="[
+      isSelected ? 'border-woot-500' : 'border-n-weak hover:border-n-strong',
+    ]"
+  >
+    <input
+      type="radio"
+      :name="name"
+      :value="credits"
+      :checked="isSelected"
+      class="sr-only"
+      @change="emit('select')"
+    />
+    <span
+      v-if="isPopular"
+      class="absolute -top-3 left-4 px-3 py-1 text-xs font-medium rounded"
+      :class="
+        isSelected ? 'bg-woot-500 text-white' : 'bg-n-solid-3 text-n-slate-11'
+      "
+    >
+      {{ $t('BILLING_SETTINGS.TOPUP.POPULAR') }}
+    </span>
+    <div
+      v-if="isSelected"
+      class="absolute top-4 right-4 flex items-center justify-center w-6 h-6 rounded-full bg-woot-500"
+    >
+      <svg
+        class="w-4 h-4 text-white"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M5 13l4 4L19 7"
+        />
+      </svg>
+    </div>
+    <span class="text-3xl font-normal text-n-slate-12 mb-2 tracking-tighter">
+      {{ formatCredits(credits) }}
+    </span>
+    <span
+      class="text-xs font-normal text-n-slate-11 uppercase tracking-tight mb-6"
+    >
+      {{ $t('BILLING_SETTINGS.TOPUP.CREDITS') }}
+    </span>
+    <span class="text-2xl font-normal text-n-slate-12 tracking-tight">
+      {{ formatAmount(amount, currency) }}
+      <span class="text-sm text-n-slate-11 ml-0.5">{{
+        $t('BILLING_SETTINGS.TOPUP.ONE_TIME')
+      }}</span>
+    </span>
+  </label>
+</template>
--- a/app/javascript/dashboard/routes/dashboard/settings/billing/components/PurchaseCreditsModal.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/components/PurchaseCreditsModal.vue
@@ -0,0 +1,128 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import CreditPackageCard from './CreditPackageCard.vue';
+import EnterpriseAccountAPI from 'dashboard/api/enterprise/account';
+
+const emit = defineEmits(['close']);
+
+const { t } = useI18n();
+
+const TOPUP_OPTIONS = [
+  { credits: 1000, amount: 20.0, currency: 'usd' },
+  { credits: 2500, amount: 50.0, currency: 'usd' },
+  { credits: 6000, amount: 100.0, currency: 'usd' },
+  { credits: 12000, amount: 200.0, currency: 'usd' },
+];
+
+const POPULAR_CREDITS_AMOUNT = 6000;
+
+const dialogRef = ref(null);
+const selectedCredits = ref(null);
+const isLoading = ref(false);
+
+const selectedOption = computed(() => {
+  return TOPUP_OPTIONS.find(o => o.credits === selectedCredits.value);
+});
+
+const handlePackageSelect = credits => {
+  selectedCredits.value = credits;
+};
+
+const handlePurchase = async () => {
+  if (!selectedOption.value) return;
+
+  isLoading.value = true;
+  try {
+    const response = await EnterpriseAccountAPI.createTopupCheckout(
+      selectedOption.value.credits
+    );
+    if (response.data.redirect_url) {
+      window.location.href = response.data.redirect_url;
+    }
+  } catch (error) {
+    const errorMessage =
+      error.response?.data?.error || t('BILLING_SETTINGS.TOPUP.PURCHASE_ERROR');
+    useAlert(errorMessage);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const handleClose = () => {
+  emit('close');
+};
+
+const open = () => {
+  // Pre-select the most popular option
+  const popularOption = TOPUP_OPTIONS.find(
+    o => o.credits === POPULAR_CREDITS_AMOUNT
+  );
+  selectedCredits.value = popularOption?.credits || TOPUP_OPTIONS[0]?.credits;
+  dialogRef.value?.open();
+};
+
+const close = () => {
+  dialogRef.value?.close();
+};
+
+defineExpose({ open, close });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    :title="$t('BILLING_SETTINGS.TOPUP.MODAL_TITLE')"
+    :description="$t('BILLING_SETTINGS.TOPUP.MODAL_DESCRIPTION')"
+    width="xl"
+    :show-confirm-button="false"
+    :show-cancel-button="false"
+    @close="handleClose"
+  >
+    <div class="grid grid-cols-2 gap-4">
+      <CreditPackageCard
+        v-for="option in TOPUP_OPTIONS"
+        :key="option.credits"
+        name="credit-package"
+        :credits="option.credits"
+        :amount="option.amount"
+        :currency="option.currency"
+        :is-popular="option.credits === POPULAR_CREDITS_AMOUNT"
+        :is-selected="selectedCredits === option.credits"
+        @select="handlePackageSelect(option.credits)"
+      />
+    </div>
+
+    <div class="p-4 mt-6 rounded-lg bg-n-solid-2 border border-n-weak">
+      <p class="text-sm text-n-slate-11">
+        <span class="font-semibold text-n-slate-12">{{
+          $t('BILLING_SETTINGS.TOPUP.NOTE_TITLE')
+        }}</span>
+        {{ $t('BILLING_SETTINGS.TOPUP.NOTE_DESCRIPTION') }}
+      </p>
+    </div>
+
+    <template #footer>
+      <div class="flex items-center justify-between w-full gap-3">
+        <Button
+          variant="faded"
+          color="slate"
+          :label="$t('BILLING_SETTINGS.TOPUP.CANCEL')"
+          class="w-full"
+          @click="close"
+        />
+        <Button
+          color="blue"
+          :label="$t('BILLING_SETTINGS.TOPUP.PURCHASE')"
+          class="w-full"
+          :disabled="!selectedCredits"
+          :is-loading="isLoading"
+          @click="handlePurchase"
+        />
+      </div>
+    </template>
+  </Dialog>
+</template>
--- a/app/javascript/dashboard/store/modules/accounts.js
+++ b/app/javascript/dashboard/store/modules/accounts.js
@@ -18,6 +18,7 @@ const state = {
    isFetchingItem: false,
    isUpdating: false,
    isCheckoutInProcess: false,
+    isFetchingLimits: false,
  },
 };

@@ -141,11 +142,14 @@ export const actions = {
  },

  limits: async ({ commit }) => {
+    commit(types.default.SET_ACCOUNT_UI_FLAG, { isFetchingLimits: true });
    try {
      const response = await EnterpriseAccountAPI.getLimits();
      commit(types.default.SET_ACCOUNT_LIMITS, response.data);
    } catch (error) {
      // silent error
+    } finally {
+      commit(types.default.SET_ACCOUNT_UI_FLAG, { isFetchingLimits: false });
    }
  },