perf: update the logic to purchase credits (#12998)

## Description

- Replaces Stripe Checkout session flow with direct card charging for AI
credit top-ups
- Adds a two-step confirmation modal (select package → confirm purchase)
for better UX
- Creates Stripe invoice directly and charges the customer's default
payment method immediately

## Type of change

- [ ] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

- Using the specs
- UI manual test cases

<img width="945" height="580" alt="image"
src="https://github.com/user-attachments/assets/52bdad46-cd0e-4927-b13f-54c6b6353bcc"
/>

<img width="945" height="580" alt="image"
src="https://github.com/user-attachments/assets/231bc7e9-41ac-440d-a93d-cba45a4d3e3e"
/>


## Checklist:

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

app/javascript/dashboard/api/enterprise/specs/account.spec.js

@@ -11,6 +11,8 @@ describe('#enterpriseAccountAPI', () => {
     expect(accountAPI).toHaveProperty('delete');
     expect(accountAPI).toHaveProperty('checkout');
     expect(accountAPI).toHaveProperty('toggleDeletion');
+    expect(accountAPI).toHaveProperty('createTopupCheckout');
+    expect(accountAPI).toHaveProperty('getLimits');
   });
 
   describe('API calls', () => {
@@ -59,5 +61,29 @@ describe('#enterpriseAccountAPI', () => {
         { action_type: 'undelete' }
       );
     });
+
+    it('#createTopupCheckout with credits', () => {
+      accountAPI.createTopupCheckout(1000);
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/enterprise/api/v1/topup_checkout',
+        { credits: 1000 }
+      );
+    });
+
+    it('#createTopupCheckout with different credit amounts', () => {
+      const creditAmounts = [1000, 2500, 6000, 12000];
+      creditAmounts.forEach(credits => {
+        accountAPI.createTopupCheckout(credits);
+        expect(axiosMock.post).toHaveBeenCalledWith(
+          '/enterprise/api/v1/topup_checkout',
+          { credits }
+        );
+      });
+    });
+
+    it('#getLimits', () => {
+      accountAPI.getLimits();
+      expect(axiosMock.get).toHaveBeenCalledWith('/enterprise/api/v1/limits');
+    });
   });
 });

app/javascript/dashboard/i18n/locale/en/settings.json

@@ -422,7 +422,15 @@
       "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."
+      "PURCHASE_ERROR": "Failed to process purchase. Please try again.",
+      "PURCHASE_SUCCESS": "Successfully added {credits} credits to your account",
+      "CONFIRM": {
+        "TITLE": "Confirm Purchase",
+        "DESCRIPTION": "You are about to purchase {credits} credits for {amount}.",
+        "INSTANT_DEDUCTION_NOTE": "Your saved card will be charged immediately upon confirmation.",
+        "GO_BACK": "Go Back",
+        "CONFIRM_PURCHASE": "Confirm Purchase"
+      }
     }
   },
   "SECURITY_SETTINGS": {

app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue

@@ -132,6 +132,11 @@ const openPurchaseCreditsModal = () => {
   purchaseCreditsModalRef.value?.open();
 };
 
+const handleTopupSuccess = () => {
+  // Refresh limits to show updated credit balance
+  fetchLimits();
+};
+
 onMounted(handleBillingPageLogic);
 </script>
 
@@ -254,7 +259,10 @@ onMounted(handleBillingPageLogic);
           </ButtonV4>
         </BillingHeader>
       </section>
-      <PurchaseCreditsModal ref="purchaseCreditsModalRef" />
+      <PurchaseCreditsModal
+        ref="purchaseCreditsModalRef"
+        @success="handleTopupSuccess"
+      />
     </template>
   </SettingsLayout>
 </template>

app/javascript/dashboard/routes/dashboard/settings/billing/components/PurchaseCreditsModal.vue

@@ -7,7 +7,7 @@ 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 emit = defineEmits(['close', 'success']);
 
 const { t } = useI18n();
 
@@ -19,19 +19,78 @@ const TOPUP_OPTIONS = [
 ];
 
 const POPULAR_CREDITS_AMOUNT = 6000;
+const STEP_SELECT = 'select';
+const STEP_CONFIRM = 'confirm';
 
 const dialogRef = ref(null);
 const selectedCredits = ref(null);
 const isLoading = ref(false);
+const currentStep = ref(STEP_SELECT);
 
 const selectedOption = computed(() => {
   return TOPUP_OPTIONS.find(o => o.credits === selectedCredits.value);
 });
 
+const formattedAmount = computed(() => {
+  if (!selectedOption.value) return '';
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: selectedOption.value.currency.toUpperCase(),
+  }).format(selectedOption.value.amount);
+});
+
+const formattedCredits = computed(() => {
+  if (!selectedOption.value) return '';
+  return selectedOption.value.credits.toLocaleString();
+});
+
+const dialogTitle = computed(() => {
+  return currentStep.value === STEP_SELECT
+    ? t('BILLING_SETTINGS.TOPUP.MODAL_TITLE')
+    : t('BILLING_SETTINGS.TOPUP.CONFIRM.TITLE');
+});
+
+const dialogDescription = computed(() => {
+  return currentStep.value === STEP_SELECT
+    ? t('BILLING_SETTINGS.TOPUP.MODAL_DESCRIPTION')
+    : '';
+});
+
+const dialogWidth = computed(() => {
+  return currentStep.value === STEP_SELECT ? 'xl' : 'md';
+});
+
 const handlePackageSelect = credits => {
   selectedCredits.value = credits;
 };
 
+const open = () => {
+  const popularOption = TOPUP_OPTIONS.find(
+    o => o.credits === POPULAR_CREDITS_AMOUNT
+  );
+  selectedCredits.value = popularOption?.credits || TOPUP_OPTIONS[0]?.credits;
+  currentStep.value = STEP_SELECT;
+  isLoading.value = false;
+  dialogRef.value?.open();
+};
+
+const close = () => {
+  dialogRef.value?.close();
+};
+
+const handleClose = () => {
+  emit('close');
+};
+
+const goToConfirmStep = () => {
+  if (!selectedOption.value) return;
+  currentStep.value = STEP_CONFIRM;
+};
+
+const goBackToSelectStep = () => {
+  currentStep.value = STEP_SELECT;
+};
+
 const handlePurchase = async () => {
   if (!selectedOption.value) return;
 
@@ -40,9 +99,14 @@ const handlePurchase = async () => {
     const response = await EnterpriseAccountAPI.createTopupCheckout(
       selectedOption.value.credits
     );
-    if (response.data.redirect_url) {
-      window.location.href = response.data.redirect_url;
-    }
+
+    close();
+    emit('success', response.data);
+    useAlert(
+      t('BILLING_SETTINGS.TOPUP.PURCHASE_SUCCESS', {
+        credits: response.data.credits,
+      })
+    );
   } catch (error) {
     const errorMessage =
       error.response?.data?.error || t('BILLING_SETTINGS.TOPUP.PURCHASE_ERROR');
@@ -52,61 +116,71 @@ const handlePurchase = async () => {
   }
 };
 
-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"
+    :title="dialogTitle"
+    :description="dialogDescription"
+    :width="dialogWidth"
     :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>
+    <!-- Step 1: Select Credits Package -->
+    <template v-if="currentStep === 'select'">
+      <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>
+      <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>
+
+    <!-- Step 2: Confirm Purchase -->
+    <template v-else>
+      <div class="flex flex-col gap-4">
+        <p class="text-sm text-n-slate-11">
+          {{
+            $t('BILLING_SETTINGS.TOPUP.CONFIRM.DESCRIPTION', {
+              credits: formattedCredits,
+              amount: formattedAmount,
+            })
+          }}
+        </p>
+
+        <div class="p-2.5 rounded-lg bg-n-amber-2 border border-n-amber-6">
+          <p class="text-sm text-n-amber-11">
+            {{ $t('BILLING_SETTINGS.TOPUP.CONFIRM.INSTANT_DEDUCTION_NOTE') }}
+          </p>
+        </div>
+      </div>
+    </template>
 
     <template #footer>
-      <div class="flex items-center justify-between w-full gap-3">
+      <!-- Step 1 Footer -->
+      <div
+        v-if="currentStep === 'select'"
+        class="flex items-center justify-between w-full gap-3"
+      >
         <Button
           variant="faded"
           color="slate"
@@ -119,6 +193,24 @@ defineExpose({ open, close });
           :label="$t('BILLING_SETTINGS.TOPUP.PURCHASE')"
           class="w-full"
           :disabled="!selectedCredits"
+          @click="goToConfirmStep"
+        />
+      </div>
+
+      <!-- Step 2 Footer -->
+      <div v-else class="flex items-center justify-between w-full gap-3">
+        <Button
+          variant="faded"
+          color="slate"
+          :label="$t('BILLING_SETTINGS.TOPUP.CONFIRM.GO_BACK')"
+          class="w-full"
+          :disabled="isLoading"
+          @click="goBackToSelectStep"
+        />
+        <Button
+          color="blue"
+          :label="$t('BILLING_SETTINGS.TOPUP.CONFIRM.CONFIRM_PURCHASE')"
+          class="w-full"
           :is-loading="isLoading"
           @click="handlePurchase"
         />