hide Scale tier in plan comparison via filtered tabs

Author: HarshMN2345

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 '';
+        }
+    }
 </script>
 
 <Card.Base>
     <Layout.Stack>
         <Tabs.Root stretch let:root>
-            <Tabs.Item.Button
-                {root}
-                active={selectedTab === BillingPlan.FREE}
-                on:click={() => (selectedTab = BillingPlan.FREE)}>
-                {tierFree.name}
-            </Tabs.Item.Button>
-            <Tabs.Item.Button
-                {root}
-                active={selectedTab === BillingPlan.PRO}
-                on:click={() => (selectedTab = BillingPlan.PRO)}>
-                {tierPro.name}
-            </Tabs.Item.Button>
-            <Tabs.Item.Button
-                {root}
-                active={selectedTab === BillingPlan.SCALE}
-                on:click={() => (selectedTab = BillingPlan.SCALE)}>
-                {tierScale.name}
-            </Tabs.Item.Button>
+            {#each visibleTiers as tier}
+                <Tabs.Item.Button
+                    {root}
+                    active={selectedTab === tier}
+                    on:click={() => (selectedTab = tier)}>
+                    {getTierName(tier)}
+                </Tabs.Item.Button>
+            {/each}
         </Tabs.Root>
 
         <Typography.Text variant="m-600">{plan.name} plan</Typography.Text>