fix: topup dialog discount

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

@@ -498,7 +498,8 @@
     },
     "TOPUP_MODAL": {
       "TITLE": "Confirm Top-up",
-      "CREDITS": "credits",
+      "DESCRIPTION": "Top up your account with {credits} credits for {price}. Your card will be immediately charged.",
+      "CREDITS": "Credits",
       "PRICE": "Price",
       "INFO": "Credits will be added to your account immediately and never expire.",
       "CANCEL": "Cancel",

app/javascript/dashboard/routes/dashboard/settings/billing-v2/components/TopupDialog.vue

@@ -2,7 +2,6 @@
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import Notice from 'dashboard/components-next/notice/Notice.vue';
 
 const props = defineProps({
   option: {
@@ -54,27 +53,34 @@ defineExpose({ open, close });
     type="edit"
     width="sm"
     :title="t('BILLING_SETTINGS_V2.TOPUP_MODAL.TITLE')"
+    :description="
+      t('BILLING_SETTINGS_V2.TOPUP_MODAL.DESCRIPTION', {
+        credits: formatNumber(option.credits),
+        price: formatPrice(option.price),
+      })
+    "
     :confirm-button-label="t('BILLING_SETTINGS_V2.TOPUP_MODAL.CONFIRM')"
     :cancel-button-label="t('BILLING_SETTINGS_V2.TOPUP_MODAL.CANCEL')"
     :is-loading="isProcessing"
     @confirm="handleTopup"
   >
     <div class="space-y-4">
-      <div class="p-4 rounded-lg bg-n-blue-2 dark:bg-n-blue-3 text-center">
-        <div class="text-4xl font-bold text-n-blue-11">
-          {{ formatNumber(option.credits) }}
+      <div
+        class="px-3 py-2 rounded-lg bg-n-slate-2 dark:bg-n-solid-2 space-y-2"
+      >
+        <div class="flex justify-between items-center">
+          <span class="text-sm text-n-slate-11">
+            {{ t('BILLING_SETTINGS_V2.TOPUP_MODAL.CREDITS') }}
+          </span>
+          <span class="text-lg font-bold text-n-slate-12">
+            {{ formatNumber(option.credits) }}
+          </span>
         </div>
-        <div class="mt-1 text-sm text-n-slate-11">
-          {{ t('BILLING_SETTINGS_V2.TOPUP_MODAL.CREDITS') }}
-        </div>
-      </div>
-
-      <div class="p-4 rounded-lg bg-n-slate-2 dark:bg-n-solid-2 space-y-3">
         <div class="flex justify-between items-center">
           <span class="text-sm text-n-slate-11">
             {{ t('BILLING_SETTINGS_V2.TOPUP_MODAL.PRICE') }}
           </span>
-          <span class="text-2xl font-bold text-n-slate-12">
+          <span class="text-lg font-bold text-n-slate-12">
             {{ formatPrice(option.price) }}
           </span>
         </div>
@@ -85,12 +91,6 @@ defineExpose({ open, close });
           {{ option.description }}
         </div>
       </div>
-
-      <Notice
-        color="teal"
-        icon="i-lucide-info"
-        :message="t('BILLING_SETTINGS_V2.TOPUP_MODAL.INFO')"
-      />
     </div>
   </Dialog>
 </template>