diff --git a/src/platform/cloud/subscription/components/SubscriptionPanel.vue b/src/platform/cloud/subscription/components/SubscriptionPanel.vue index 433589450..117fe63bc 100644 --- a/src/platform/cloud/subscription/components/SubscriptionPanel.vue +++ b/src/platform/cloud/subscription/components/SubscriptionPanel.vue @@ -346,14 +346,16 @@ import { cn } from '@/utils/tailwindUtil' type SubscriptionTier = components['schemas']['SubscriptionTier'] /** Maps API subscription tier values to i18n translation keys */ -const TIER_TO_I18N_KEY: Record = { +const TIER_TO_I18N_KEY = { STANDARD: 'standard', CREATOR: 'creator', PRO: 'pro', FOUNDERS_EDITION: 'founder' -} +} as const satisfies Record -const DEFAULT_TIER_KEY = 'standard' +type TierKey = (typeof TIER_TO_I18N_KEY)[SubscriptionTier] + +const DEFAULT_TIER_KEY: TierKey = 'standard' const { buildDocsUrl } = useExternalLink() const { t } = useI18n() @@ -387,39 +389,50 @@ interface Benefit { value?: string } +const BENEFITS_BY_TIER: Record< + TierKey, + ReadonlyArray> +> = { + standard: [ + { key: 'monthlyCredits', type: 'metric' }, + { key: 'maxDuration', type: 'metric' }, + { key: 'gpu', type: 'feature' }, + { key: 'addCredits', type: 'feature' } + ], + creator: [ + { key: 'monthlyCredits', type: 'metric' }, + { key: 'maxDuration', type: 'metric' }, + { key: 'gpu', type: 'feature' }, + { key: 'addCredits', type: 'feature' }, + { key: 'customLoRAs', type: 'feature' } + ], + pro: [ + { key: 'monthlyCredits', type: 'metric' }, + { key: 'maxDuration', type: 'metric' }, + { key: 'gpu', type: 'feature' }, + { key: 'addCredits', type: 'feature' }, + { key: 'customLoRAs', type: 'feature' } + ], + founder: [ + { key: 'monthlyCredits', type: 'metric' }, + { key: 'maxDuration', type: 'metric' }, + { key: 'gpu', type: 'feature' }, + { key: 'addCredits', type: 'feature' }, + { key: 'customLoRAs', type: 'feature' } + ] +} + const tierBenefits = computed(() => { const key = tierKey.value - const baseBenefits: Benefit[] = [ - { - key: 'monthlyCredits', - type: 'metric', - value: t(`subscription.tiers.${key}.benefits.monthlyCredits`), - label: t(`subscription.tiers.${key}.benefits.monthlyCreditsLabel`) - }, - { - key: 'maxDuration', - type: 'metric', - value: t(`subscription.tiers.${key}.benefits.maxDuration`), - label: t(`subscription.tiers.${key}.benefits.maxDurationLabel`) - }, - { - key: 'gpu', - type: 'feature', - label: t(`subscription.tiers.${key}.benefits.gpuLabel`) - }, - { - key: 'addCredits', - type: 'feature', - label: t(`subscription.tiers.${key}.benefits.addCreditsLabel`) - }, - { - key: 'customLoRAs', - type: 'feature', - label: t(`subscription.tiers.${key}.benefits.customLoRAsLabel`) - } - ] + const benefitConfig = BENEFITS_BY_TIER[key] - return baseBenefits + return benefitConfig.map((config) => ({ + ...config, + ...(config.type === 'metric' && { + value: t(`subscription.tiers.${key}.benefits.${config.key}`) + }), + label: t(`subscription.tiers.${key}.benefits.${config.key}Label`) + })) }) const { totalCredits, monthlyBonusCredits, prepaidCredits, isLoadingBalance } =