diff --git a/src/lib/components/billing/planComparisonBox.svelte b/src/lib/components/billing/planComparisonBox.svelte index c15e48317..381dd4a3b 100644 --- a/src/lib/components/billing/planComparisonBox.svelte +++ b/src/lib/components/billing/planComparisonBox.svelte @@ -9,29 +9,35 @@ let selectedTab: Tier = BillingPlan.FREE; $: plan = $plansInfo.get(selectedTab); + + const allTiers: Tier[] = [BillingPlan.FREE, BillingPlan.PRO, BillingPlan.SCALE]; + $: visibleTiers = allTiers.filter((tier) => tier !== BillingPlan.SCALE); + + function getTierName(tier: Tier): string { + switch (tier) { + case BillingPlan.FREE: + return tierFree.name; + case BillingPlan.PRO: + return tierPro.name; + case BillingPlan.SCALE: + return tierScale.name; + default: + return ''; + } + } - (selectedTab = BillingPlan.FREE)}> - {tierFree.name} - - (selectedTab = BillingPlan.PRO)}> - {tierPro.name} - - (selectedTab = BillingPlan.SCALE)}> - {tierScale.name} - + {#each visibleTiers as tier} + (selectedTab = tier)}> + {getTierName(tier)} + + {/each} {plan.name} plan