|
1 | 1 | <script lang="ts">
|
2 | 2 | import { BillingPlan } from '$lib/constants';
|
3 | 3 | import { formatNum } from '$lib/helpers/string';
|
4 |
| - import { plansInfo, tierFree, tierPro, tierScale, type Tier } from '$lib/stores/billing'; |
| 4 | + import { plansInfo, tierToPlan, type Tier } from '$lib/stores/billing'; |
5 | 5 | import { Card, Layout, Tabs, Typography } from '@appwrite.io/pink-svelte';
|
6 | 6 |
|
7 | 7 | export let downgrade = false;
|
8 | 8 |
|
9 | 9 | let selectedTab: Tier = BillingPlan.FREE;
|
10 | 10 |
|
11 | 11 | $: plan = $plansInfo.get(selectedTab);
|
| 12 | +
|
| 13 | + const allTiers: Tier[] = [BillingPlan.FREE, BillingPlan.PRO, BillingPlan.SCALE]; |
| 14 | + $: visibleTiers = allTiers.filter((tier) => tier !== BillingPlan.SCALE); |
12 | 15 | </script>
|
13 | 16 |
|
14 | 17 | <Card.Base>
|
15 | 18 | <Layout.Stack>
|
16 | 19 | <Tabs.Root stretch let:root>
|
17 |
| - <Tabs.Item.Button |
18 |
| - {root} |
19 |
| - active={selectedTab === BillingPlan.FREE} |
20 |
| - on:click={() => (selectedTab = BillingPlan.FREE)}> |
21 |
| - {tierFree.name} |
22 |
| - </Tabs.Item.Button> |
23 |
| - <Tabs.Item.Button |
24 |
| - {root} |
25 |
| - active={selectedTab === BillingPlan.PRO} |
26 |
| - on:click={() => (selectedTab = BillingPlan.PRO)}> |
27 |
| - {tierPro.name} |
28 |
| - </Tabs.Item.Button> |
29 |
| - <Tabs.Item.Button |
30 |
| - {root} |
31 |
| - active={selectedTab === BillingPlan.SCALE} |
32 |
| - on:click={() => (selectedTab = BillingPlan.SCALE)}> |
33 |
| - {tierScale.name} |
34 |
| - </Tabs.Item.Button> |
| 20 | + {#each visibleTiers as tier} |
| 21 | + <Tabs.Item.Button |
| 22 | + {root} |
| 23 | + active={selectedTab === tier} |
| 24 | + on:click={() => (selectedTab = tier)}> |
| 25 | + {tierToPlan(tier).name} |
| 26 | + </Tabs.Item.Button> |
| 27 | + {/each} |
35 | 28 | </Tabs.Root>
|
36 | 29 |
|
37 | 30 | <Typography.Text variant="m-600">{plan.name} plan</Typography.Text>
|
|
0 commit comments