From 817fe16a58526accd68f424ad4c9437401ea57f3 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Tue, 23 Sep 2025 17:46:57 +0530
Subject: [PATCH]  hide Scale tier in plan comparison via filtered tabs

---
 .../billing/planComparisonBox.svelte          | 42 +++++++++++--------
 1 file changed, 24 insertions(+), 18 deletions(-)

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 '';
+        }
+    }
 </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>