Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 46 additions & 33 deletions src/platform/cloud/subscription/components/SubscriptionPanel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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<SubscriptionTier, string> = {
const TIER_TO_I18N_KEY = {
STANDARD: 'standard',
CREATOR: 'creator',
PRO: 'pro',
FOUNDERS_EDITION: 'founder'
}
} as const satisfies Record<SubscriptionTier, string>

type TierKey = (typeof TIER_TO_I18N_KEY)[SubscriptionTier]

const DEFAULT_TIER_KEY = 'standard'
const DEFAULT_TIER_KEY: TierKey = 'standard'

const { buildDocsUrl } = useExternalLink()
const { t } = useI18n()
Expand Down Expand Up @@ -387,39 +389,50 @@ interface Benefit {
value?: string
}

const BENEFITS_BY_TIER: Record<
TierKey,
ReadonlyArray<Omit<Benefit, 'label' | 'value'>>
> = {
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`)
}))
Comment on lines 425 to +435
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Avoid boolean spread in tierBenefits for cleaner TypeScript and readability

The logic in tierBenefits is sound, but the pattern ...(config.type === 'metric' && { value: ... }) can trip TypeScript because it spreads a union that includes false. A small refactor keeps the same behavior while being more TS‑friendly and explicit:

-const tierBenefits = computed(() => {
-  const key = tierKey.value
-  const benefitConfig = BENEFITS_BY_TIER[key]
-
-  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 tierBenefits = computed(() => {
+  const key = tierKey.value
+  const benefitConfig = BENEFITS_BY_TIER[key]
+
+  return benefitConfig.map((config) => {
+    const base = {
+      ...config,
+      label: t(`subscription.tiers.${key}.benefits.${config.key}Label`)
+    }
+
+    if (config.type === 'metric') {
+      return {
+        ...base,
+        value: t(`subscription.tiers.${key}.benefits.${config.key}`)
+      }
+    }
+
+    return base
+  })
+})
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
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 tierBenefits = computed(() => {
const key = tierKey.value
const benefitConfig = BENEFITS_BY_TIER[key]
return benefitConfig.map((config) => {
const base = {
...config,
label: t(`subscription.tiers.${key}.benefits.${config.key}Label`)
}
if (config.type === 'metric') {
return {
...base,
value: t(`subscription.tiers.${key}.benefits.${config.key}`)
}
}
return base
})
})
🤖 Prompt for AI Agents
In src/platform/cloud/subscription/components/SubscriptionPanel.vue around lines
425 to 435, the current map uses a boolean spread pattern ...(config.type ===
'metric' && { value: ... }) which can produce false in the spread and confuse
TypeScript; refactor to build the returned object explicitly (create base object
with ...config and label, then if config.type === 'metric' add value = t(...))
so the resulting shape is clear and TypeScript-safe.

})

const { totalCredits, monthlyBonusCredits, prepaidCredits, isLoadingBalance } =
Expand Down