Feat(cloud)/pricing plan template details (#7867)

## Summary - Use video helper popover in top up modal - Update copy for video helper - Misc style changes ## Changes - **What**: /en/main.json, TopUpCreditsDialogContent.vue, PricingTable.vue - **Breaking**:  - **Dependencies**:  ## Screenshots (if applicable) <img width="2226" height="1322" alt="image" src="https://github.com/user-attachments/assets/e8419c73-f26c-4d1c-84a6-10cdd10937c4" /> <img width="2880" height="1624" alt="image" src="https://github.com/user-attachments/assets/b27c3665-5eae-4983-a40b-f88705bf53be" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7867-Feat-cloud-pricing-plan-template-details-2e16d73d365081599610e47151b3783b) by [Unito](https://www.unito.io)
2026-01-26 19:09:52 +00:00 · 2026-01-06 18:45:06 -08:00
parent ea3b3ceb00
commit ab6678534f
4 changed files with 81 additions and 28 deletions
--- a/src/components/dialog/content/TopUpCreditsDialogContent.vue
+++ b/src/components/dialog/content/TopUpCreditsDialogContent.vue
@@ -49,25 +49,66 @@
          @select="selectedCredits = option.credits"
        />
      </div>
-      <div class="text-xs text-muted-foreground w-96">
-        {{ $t('credits.topUp.templateNote') }}
+      <div class="flex flex-row items-center gap-2 group pt-2">
+        <i
+          class="pi pi-question-circle text-xs text-muted-foreground group-hover:text-base-foreground"
+        />
+        <span
+          class="text-sm font-normal text-muted-foreground cursor-pointer group-hover:text-base-foreground"
+          @click="togglePopover"
+        >
+          {{ t('subscription.videoTemplateBasedCredits') }}
+        </span>
      </div>
-    </div>

-    <!-- Buy Button -->
-    <Button
-      :disabled="!selectedCredits || loading"
-      :loading="loading"
-      variant="primary"
-      :class="cn('w-full', (!selectedCredits || loading) && 'opacity-30')"
-      @click="handleBuy"
+      <!-- Buy Button -->
+      <Button
+        :disabled="!selectedCredits || loading"
+        :loading="loading"
+        variant="primary"
+        :class="cn('w-full', (!selectedCredits || loading) && 'opacity-30')"
+        @click="handleBuy"
+      >
+        {{ $t('credits.topUp.buy') }}
+      </Button>
+    </div>
+    <Popover
+      ref="popover"
+      append-to="body"
+      :auto-z-index="true"
+      :base-z-index="1000"
+      :dismissable="true"
+      :close-on-escape="true"
+      unstyled
+      :pt="{
+        root: {
+          class:
+            'rounded-lg border border-interface-stroke bg-interface-panel-surface shadow-lg p-4 max-w-xs'
+        }
+      }"
    >
-      {{ $t('credits.topUp.buy') }}
-    </Button>
+      <div class="flex flex-col gap-2">
+        <p class="text-sm text-base-foreground leading-normal">
+          {{ t('subscription.videoEstimateExplanation') }}
+        </p>
+        <a
+          href="https://cloud.comfy.org/?template=video_wan2_2_14B_fun_camera"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-sm text-azure-600 hover:text-azure-400 no-underline flex gap-1"
+        >
+          <span class="underline">
+            {{ t('subscription.videoEstimateTryTemplate') }}
+          </span>
+          <span class="no-underline" v-html="'&rarr;'"></span>
+        </a>
+      </div>
+    </Popover>
  </div>
 </template>

 <script setup lang="ts">
+import { Popover } from 'primevue'
 import { useToast } from 'primevue/usetoast'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -101,22 +142,28 @@ const toast = useToast()
 const selectedCredits = ref<number | null>(null)
 const loading = ref(false)

+const popover = ref()
+
+const togglePopover = (event: Event) => {
+  popover.value.toggle(event)
+}
+
 const creditOptions: CreditOption[] = [
  {
    credits: 1055, // $5.00
-    description: t('credits.topUp.videosEstimate', { count: 41 })
+    description: t('credits.topUp.videosEstimate', { count: 30 })
  },
  {
    credits: 2110, // $10.00
-    description: t('credits.topUp.videosEstimate', { count: 82 })
+    description: t('credits.topUp.videosEstimate', { count: 60 })
  },
  {
    credits: 4220, // $20.00
-    description: t('credits.topUp.videosEstimate', { count: 184 })
+    description: t('credits.topUp.videosEstimate', { count: 120 })
  },
  {
    credits: 10550, // $50.00
-    description: t('credits.topUp.videosEstimate', { count: 412 })
+    description: t('credits.topUp.videosEstimate', { count: 301 })
  }
 ]

--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -1914,7 +1914,7 @@
      "insufficientWorkflowMessage": "You don't have enough credits to run this workflow.",
      "creditsDescription": "Credits are used to run workflows or partner nodes.",
      "howManyCredits": "How many credits would you like to add?",
-      "videosEstimate": "~{count} videos*",
+      "videosEstimate": "~{count} videos",
      "templateNote": "*Generated with Wan Fun Control template",
      "buy": "Buy",
      "purchaseError": "Purchase Failed",
@@ -2017,10 +2017,11 @@
    "gpuLabel": "RTX 6000 Pro (96GB VRAM)",
    "addCreditsLabel": "Add more credits whenever",
    "customLoRAsLabel": "Import your own LoRAs",
-    "videoEstimateLabel": "Number of 5s videos generated with Wan Fun Control template",
-    "videoEstimateHelp": "What is this?",
-    "videoEstimateExplanation": "These estimates are based on the Wan Fun Control template for 5-second videos.",
-    "videoEstimateTryTemplate": "Try the Wan Fun Control template →",
+    "videoEstimateLabel": "Approx. amount of 5s videos generated with Wan 2.2 Image-to-Video template",
+    "videoEstimateHelp": "More details on this template",
+    "videoEstimateExplanation": "These estimates are based on the Wan 2.2 Image-to-Video template using default settings (5 seconds, 640x640, 16fps, 4-step sampling).",
+    "videoEstimateTryTemplate": "Try this template",
+    "videoTemplateBasedCredits": "Videos generated with Wan 2.2 Image to Video",
    "upgradePlan": "Upgrade Plan",
    "upgradeTo": "Upgrade to {plan}",
    "changeTo": "Change to {plan}",
--- a/src/platform/cloud/subscription/components/PricingTable.vue
+++ b/src/platform/cloud/subscription/components/PricingTable.vue
@@ -157,7 +157,9 @@
            <div class="flex flex-col gap-2">
              <div class="flex flex-row items-start justify-between">
                <div class="flex flex-col gap-2">
-                  <span class="text-sm font-normal text-foreground">
+                  <span
+                    class="text-sm font-normal text-foreground leading-relaxed"
+                  >
                    {{ t('subscription.videoEstimateLabel') }}
                  </span>
                  <div class="flex flex-row items-center gap-2 group pt-2">
@@ -220,16 +222,19 @@
      }"
    >
      <div class="flex flex-col gap-2">
-        <p class="text-sm text-base-foreground">
+        <p class="text-sm text-base-foreground leading-normal">
          {{ t('subscription.videoEstimateExplanation') }}
        </p>
        <a
          href="https://cloud.comfy.org/?template=video_wan2_2_14B_fun_camera"
          target="_blank"
          rel="noopener noreferrer"
-          class="text-sm text-azure-600 hover:text-azure-400 underline"
+          class="text-sm text-azure-600 hover:text-azure-400 no-underline flex gap-1"
        >
-          {{ t('subscription.videoEstimateTryTemplate') }}
+          <span class="underline">
+            {{ t('subscription.videoEstimateTryTemplate') }}
+          </span>
+          <span class="no-underline" v-html="'&rarr;'"></span>
        </a>
      </div>
    </Popover>
--- a/src/platform/cloud/subscription/constants/tierPricing.ts
+++ b/src/platform/cloud/subscription/constants/tierPricing.ts
@@ -19,9 +19,9 @@ export interface TierPricing {
 }

 export const TIER_PRICING: Record<Exclude<TierKey, 'founder'>, TierPricing> = {
-  standard: { monthly: 20, yearly: 16, credits: 4200, videoEstimate: 164 },
-  creator: { monthly: 35, yearly: 28, credits: 7400, videoEstimate: 288 },
-  pro: { monthly: 100, yearly: 80, credits: 21100, videoEstimate: 821 }
+  standard: { monthly: 20, yearly: 16, credits: 4200, videoEstimate: 120 },
+  creator: { monthly: 35, yearly: 28, credits: 7400, videoEstimate: 211 },
+  pro: { monthly: 100, yearly: 80, credits: 21100, videoEstimate: 600 }
 }

 interface TierFeatures {