feat: show subscription tier below name on cloud (#7356)

## Summary

<img width="427" height="557" alt="image"
src="https://github.com/user-attachments/assets/1183e741-762d-4e52-b24a-77c976e5ad5f"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7356-feat-show-subscription-tier-below-name-on-cloud-2c66d73d365081829576c276bb5762ac)
by [Unito](https://www.unito.io)

src/platform/cloud/subscription/components/SubscriptionPanel.vue

@@ -21,7 +21,7 @@
             <div class="flex items-center justify-between">
               <div class="flex flex-col gap-2">
                 <div class="text-sm font-bold text-text-primary">
-                  {{ tierName }}
+                  {{ subscriptionTierName }}
                 </div>
                 <div class="flex items-baseline gap-1 font-inter font-semibold">
                   <span class="text-2xl">${{ tierPrice }}</span>
@@ -377,6 +377,7 @@ const {
   formattedRenewalDate,
   formattedEndDate,
   subscriptionTier,
+  subscriptionTierName,
   handleInvoiceHistory
 } = useSubscription()
 
@@ -387,8 +388,6 @@ const tierKey = computed(() => {
   if (!tier) return DEFAULT_TIER_KEY
   return TIER_TO_I18N_KEY[tier] ?? DEFAULT_TIER_KEY
 })
-
-const tierName = computed(() => t(`subscription.tiers.${tierKey.value}.name`))
 const tierPrice = computed(() => t(`subscription.tiers.${tierKey.value}.price`))
 
 // Tier benefits for v-for loop

src/platform/cloud/subscription/composables/useSubscription.ts

@@ -13,7 +13,7 @@ import {
   useFirebaseAuthStore
 } from '@/stores/firebaseAuthStore'
 import { useDialogService } from '@/services/dialogService'
-import type { operations } from '@/types/comfyRegistryTypes'
+import type { components, operations } from '@/types/comfyRegistryTypes'
 import { useSubscriptionCancellationWatcher } from './useSubscriptionCancellationWatcher'
 
 type CloudSubscriptionCheckoutResponse = {
@@ -24,6 +24,15 @@ export type CloudSubscriptionStatusResponse = NonNullable<
   operations['GetCloudSubscriptionStatus']['responses']['200']['content']['application/json']
 >
 
+type SubscriptionTier = components['schemas']['SubscriptionTier']
+
+const TIER_TO_I18N_KEY: Record<SubscriptionTier, string> = {
+  STANDARD: 'standard',
+  CREATOR: 'creator',
+  PRO: 'pro',
+  FOUNDERS_EDITION: 'founder'
+}
+
 function useSubscriptionInternal() {
   const subscriptionStatus = ref<CloudSubscriptionStatusResponse | null>(null)
   const telemetry = useTelemetry()
@@ -73,6 +82,13 @@ function useSubscriptionInternal() {
     () => subscriptionStatus.value?.subscription_tier ?? null
   )
 
+  const subscriptionTierName = computed(() => {
+    const tier = subscriptionTier.value
+    if (!tier) return ''
+    const key = TIER_TO_I18N_KEY[tier] ?? 'standard'
+    return t(`subscription.tiers.${key}.name`)
+  })
+
   const buildApiUrl = (path: string) => `${getComfyApiBaseUrl()}${path}`
 
   const fetchStatus = wrapWithErrorHandlingAsync(
@@ -225,6 +241,7 @@ function useSubscriptionInternal() {
     formattedRenewalDate,
     formattedEndDate,
     subscriptionTier,
+    subscriptionTierName,
 
     // Actions
     subscribe,