[backport cloud/1.34] feat: show subscription tier below name on cloud (#7360)

Backport of #7356 to `cloud/1.34`

Automatically created by backport workflow.

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

Co-authored-by: Christian Byrne <cbyrne@comfy.org>

src/components/topbar/CurrentUserPopover.vue

@@ -21,6 +21,9 @@
       <p v-if="userEmail" class="my-0 truncate text-sm text-muted">
         {{ userEmail }}
       </p>
+      <p v-if="subscriptionTierName" class="my-0 truncate text-sm text-muted">
+        {{ subscriptionTierName }}
+      </p>
     </div>
 
     <!-- Credits Section -->
@@ -160,7 +163,8 @@ const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
 const authActions = useFirebaseAuthActions()
 const authStore = useFirebaseAuthStore()
 const dialogService = useDialogService()
-const { isActiveSubscription, fetchStatus } = useSubscription()
+const { isActiveSubscription, subscriptionTierName, fetchStatus } =
+  useSubscription()
 const { flags } = useFeatureFlags()
 const { locale } = useI18n()
 

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,

tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts

@@ -13,6 +13,13 @@ const mockSubscriptionTier = ref<
   'STANDARD' | 'CREATOR' | 'PRO' | 'FOUNDERS_EDITION' | null
 >('CREATOR')
 
+const TIER_TO_NAME: Record<string, string> = {
+  STANDARD: 'Standard',
+  CREATOR: 'Creator',
+  PRO: 'Pro',
+  FOUNDERS_EDITION: "Founder's Edition"
+}
+
 // Mock composables - using computed to match composable return types
 const mockSubscriptionData = {
   isActiveSubscription: computed(() => mockIsActiveSubscription.value),
@@ -20,6 +27,9 @@ const mockSubscriptionData = {
   formattedRenewalDate: computed(() => '2024-12-31'),
   formattedEndDate: computed(() => '2024-12-31'),
   subscriptionTier: computed(() => mockSubscriptionTier.value),
+  subscriptionTierName: computed(() =>
+    mockSubscriptionTier.value ? TIER_TO_NAME[mockSubscriptionTier.value] : ''
+  ),
   handleInvoiceHistory: vi.fn()
 }