fix: make subscription panel reactive to actual tier (#7354)

Was previously hard-coded, now is actually reactive to value returned
from server

- Update CloudSubscriptionStatusResponse to use generated types from
comfyRegistryTypes which includes subscription_tier
- Add subscriptionTier computed to useSubscription composable
- Make SubscriptionPanel tierName, tierPrice, and tierBenefits reactive
to actual subscription tier from API
- Normalize i18n tier structure with consistent value/label format
- Add FOUNDERS_EDITION tier support

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7354-fix-make-subscription-panel-reactive-to-actual-tier-2c66d73d365081059a7be875c13fdd0c)
by [Unito](https://www.unito.io)

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
This commit is contained in:
Christian Byrne
2025-12-10 23:46:58 -08:00
committed by bymyself
parent 4b008eeaf7
commit d3d02d0d4b
6 changed files with 201 additions and 57 deletions

View File

@@ -139,6 +139,7 @@ import { computed, onBeforeUnmount, watch } from 'vue'
import CloudBadge from '@/components/topbar/CloudBadge.vue'
import { useFeatureFlags } from '@/composables/useFeatureFlags'
import { MONTHLY_SUBSCRIPTION_PRICE } from '@/config/subscriptionPricesConfig'
import StripePricingTable from '@/platform/cloud/subscription/components/StripePricingTable.vue'
import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
import SubscriptionBenefits from '@/platform/cloud/subscription/components/SubscriptionBenefits.vue'
@@ -155,8 +156,18 @@ const emit = defineEmits<{
close: [subscribed: boolean]
}>()
const { formattedMonthlyPrice, fetchStatus, isActiveSubscription } =
useSubscription()
const { fetchStatus, isActiveSubscription } = useSubscription()
// Legacy price for non-tier flow with locale-aware formatting
const formattedMonthlyPrice = new Intl.NumberFormat(
navigator.language || 'en-US',
{
style: 'currency',
currency: 'USD',
minimumFractionDigits: 0,
maximumFractionDigits: 0
}
).format(MONTHLY_SUBSCRIPTION_PRICE)
const { featureFlag } = useFeatureFlags()
const subscriptionTiersEnabled = featureFlag(
'subscription_tiers_enabled',