diff --git a/src/components/topbar/CurrentUserPopover.vue b/src/components/topbar/CurrentUserPopover.vue index f864fa398..9a1fad9b7 100644 --- a/src/components/topbar/CurrentUserPopover.vue +++ b/src/components/topbar/CurrentUserPopover.vue @@ -21,6 +21,9 @@

{{ userEmail }}

+

+ {{ subscriptionTierName }} +

@@ -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() diff --git a/src/platform/cloud/subscription/components/SubscriptionPanel.vue b/src/platform/cloud/subscription/components/SubscriptionPanel.vue index d5db565e8..ba5369c01 100644 --- a/src/platform/cloud/subscription/components/SubscriptionPanel.vue +++ b/src/platform/cloud/subscription/components/SubscriptionPanel.vue @@ -21,7 +21,7 @@
- {{ 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() }