- {{ tierName }}
+ {{ subscriptionTierName }}
${{ tierPrice }}
@@ -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
diff --git a/src/platform/cloud/subscription/composables/useSubscription.ts b/src/platform/cloud/subscription/composables/useSubscription.ts
index 4e6c7aba2..3e9b5950d 100644
--- a/src/platform/cloud/subscription/composables/useSubscription.ts
+++ b/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 = {
+ STANDARD: 'standard',
+ CREATOR: 'creator',
+ PRO: 'pro',
+ FOUNDERS_EDITION: 'founder'
+}
+
function useSubscriptionInternal() {
const subscriptionStatus = ref(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,
diff --git a/tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts b/tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts
index 6bed98305..ef62c02b0 100644
--- a/tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts
+++ b/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 = {
+ 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()
}