From 3a4aa5f8373da6f36f139d62ceaaf66e492dcb33 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 4 Nov 2025 15:18:26 +0530
Subject: [PATCH] faet: update design for upgrade modal

---
 .../dashboard/i18n/locale/en/settings.json    |  2 +-
 .../billing-v2/components/SubscribeDialog.vue | 26 +++++++++----------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index ec8e2d1ec..1fd222a28 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -485,7 +485,7 @@
     },
     "SUBSCRIBE_MODAL": {
       "TITLE": "Confirm Subscription",
-      "PLAN_NAME": "Plan Name:",
+      "DESCRIPTION": "You are subscribing to {planName} for {planPrice} per seat with {credits} included credits for Captain AI.",
       "NUMBER_OF_SEATS": "Number of seats",
       "MIN": "Min",
       "MAX": "Max",
diff --git a/app/javascript/dashboard/routes/dashboard/settings/billing-v2/components/SubscribeDialog.vue b/app/javascript/dashboard/routes/dashboard/settings/billing-v2/components/SubscribeDialog.vue
index 6686e9c2e..e58cd51aa 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/billing-v2/components/SubscribeDialog.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing-v2/components/SubscribeDialog.vue
@@ -76,22 +76,21 @@ defineExpose({
     type="edit"
     width="xl"
     :title="t('BILLING_SETTINGS_V2.SUBSCRIBE_MODAL.TITLE')"
+    :description="
+      t('BILLING_SETTINGS_V2.SUBSCRIBE_MODAL.DESCRIPTION', {
+        planName: plan?.name || '',
+        planPrice: formatPrice(plan?.base_price || 0),
+        credits: formatNumber(totalCredits || 0),
+      })
+    "
     :confirm-button-label="t('BILLING_SETTINGS_V2.SUBSCRIBE_MODAL.CONFIRM')"
     :cancel-button-label="t('BILLING_SETTINGS_V2.SUBSCRIBE_MODAL.CANCEL')"
     :is-loading="isSubscribing"
     @confirm="handleSubscribe"
   >
     <div v-if="plan" class="space-y-4">
-      <div class="px-4 py-3 rounded-lg bg-n-slate-2 dark:bg-n-solid-2">
-        <h4 class="font-medium text-n-slate-12">
-          {{ t('BILLING_SETTINGS_V2.SUBSCRIBE_MODAL.PLAN_NAME') }}
-          <span class="text-n-slate-12 font-semibold">{{ plan.name }}</span>
-        </h4>
-        <p class="mt-1 text-sm text-n-slate-11">{{ plan.description }}</p>
-      </div>
-
       <div
-        class="p-4 rounded-lg bg-n-slate-2 dark:bg-n-solid-2 border border-n-slate-4 dark:border-n-solid-4 flex items-center justify-between"
+        class="p-3 rounded-lg bg-n-slate-2 dark:bg-n-solid-2 border border-n-slate-4 dark:border-n-solid-4 flex items-center justify-between"
       >
         <div>
           <label class="block text-sm font-semibold text-n-slate-12">
@@ -135,7 +134,7 @@ defineExpose({
         </div>
       </div>
 
-      <div class="p-4 rounded-lg bg-n-blue-2 dark:bg-n-blue-3 space-y-2">
+      <div class="space-y-2">
         <div class="flex justify-between text-sm">
           <span class="text-n-slate-11">
             {{ t('BILLING_SETTINGS_V2.SUBSCRIBE_MODAL.BASE_PRICE') }}
@@ -148,16 +147,15 @@ defineExpose({
           <span class="text-n-slate-11">
             {{ t('BILLING_SETTINGS_V2.SUBSCRIBE_MODAL.INCLUDED_CREDITS') }}
           </span>
-          <span class="font-semibold text-n-amber-11">
+          <span class="font-semibold">
             {{ formatNumber(totalCredits) }}
-            {{ t('BILLING_SETTINGS_V2.SUBSCRIBE_MODAL.CREDITS') }}
           </span>
         </div>
-        <div class="flex justify-between text-sm pt-2 border-t border-n-blue-4">
+        <div class="flex justify-between text-sm pt-2 border-t border-n-weak">
           <span class="font-semibold text-n-slate-12">
             {{ t('BILLING_SETTINGS_V2.SUBSCRIBE_MODAL.MONTHLY_TOTAL') }}
           </span>
-          <span class="text-lg font-bold text-n-blue-11">
+          <span class="font-bold">
             {{ formatPrice(totalPrice) }}
           </span>
         </div>