appwrite · ItzNotABug · Feb 25, 2025
diff --git a/src/lib/components/backupDatabaseAlert.svelte b/src/lib/components/backupDatabaseAlert.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { BillingPlan } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { organization } from '$lib/stores/organization';
     import { HeaderAlert } from '$lib/layout';
     import { isCloud } from '$lib/system';
-    import { upgradeURL } from '$lib/stores/billing';
+    import { isFreeTier, upgradeURL } from '$lib/stores/billing';
     import { hideNotification } from '$lib/helpers/notifications';
     import { backupsBannerId, showPolicyAlert } from '$lib/stores/database';
 
@@ -16,7 +15,7 @@
 </script>
 
 {#if $showPolicyAlert && isCloud && $organization?.$id && $page.url.pathname.match(/\/databases\/database-[^/]+$/)}
-    {@const isFreePlan = $organization?.billingPlan === BillingPlan.FREE}
+    {@const isFreePlan = isFreeTier($organization?.billingPlan)}
 
     {@const subtitle = isFreePlan
         ? 'Upgrade your plan to ensure your data stays safe and backed up'

diff --git a/src/lib/components/backupRestoreBox.svelte b/src/lib/components/backupRestoreBox.svelte
@@ -4,14 +4,15 @@
     import { onMount } from 'svelte';
     import { isCloud, isSelfHosted } from '$lib/system';
     import { organization } from '$lib/stores/organization';
-    import { BillingPlan, Dependencies } from '$lib/constants';
+    import { Dependencies } from '$lib/constants';
     import type { BackupArchive, BackupRestoration } from '$lib/sdk/backups';
     import { goto, invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { addNotification } from '$lib/stores/notifications';
     import { base } from '$app/paths';
     import { getProjectId } from '$lib/helpers/project';
     import { toLocaleDate } from '$lib/helpers/date';
+    import { isFreeTier } from '$lib/stores/billing';
 
     const backupRestoreItems: {
         archives: Map<string, BackupArchive>;
@@ -120,7 +121,7 @@
 
     onMount(() => {
         // fast path: don't subscribe if org is on a free plan or is self-hosted.
-        if (isSelfHosted || (isCloud && $organization.billingPlan === BillingPlan.FREE)) return;
+        if (isSelfHosted || (isCloud && isFreeTier($organization.billingPlan))) return;
 
         return sdk.forConsole.client.subscribe('console', (response) => {
             if (!response.channels.includes(`projects.${getProjectId()}`)) return;

diff --git a/src/lib/components/billing/alerts/limitReached.svelte b/src/lib/components/billing/alerts/limitReached.svelte
@@ -5,11 +5,17 @@
     import { BillingPlan } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { HeaderAlert } from '$lib/layout';
-    import { hideBillingHeaderRoutes, readOnly, tierToPlan, upgradeURL } from '$lib/stores/billing';
+    import {
+        hideBillingHeaderRoutes,
+        isFreeTier,
+        readOnly,
+        tierToPlan,
+        upgradeURL
+    } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
 </script>
 
-{#if $organization?.$id && $organization?.billingPlan === BillingPlan.FREE && $readOnly && !hideBillingHeaderRoutes.includes($page.url.pathname)}
+{#if $organization?.$id && isFreeTier($organization?.billingPlan) && $readOnly && !hideBillingHeaderRoutes.includes($page.url.pathname)}
     <HeaderAlert
         type="error"
         title={`${$organization.name} usage has reached the ${tierToPlan($organization.billingPlan).name} plan limit`}>

diff --git a/src/lib/components/billing/alerts/newDevUpgradePro.svelte b/src/lib/components/billing/alerts/newDevUpgradePro.svelte
@@ -2,11 +2,12 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { trackEvent } from '$lib/actions/analytics';
-    import { BillingPlan, NEW_DEV_PRO_UPGRADE_COUPON } from '$lib/constants';
+    import { NEW_DEV_PRO_UPGRADE_COUPON } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { organization } from '$lib/stores/organization';
     import { activeHeaderAlert } from '$routes/(console)/store';
     import GradientBanner from '../gradientBanner.svelte';
+    import { isFreeTier } from '$lib/stores/billing';
 
     let show = true;
 
@@ -21,7 +22,7 @@
     }
 </script>
 
-{#if show && $organization?.$id && $organization?.billingPlan === BillingPlan.FREE && !$page.url.pathname.includes('/console/account')}
+{#if show && $organization?.$id && isFreeTier($organization?.billingPlan) && !$page.url.pathname.includes('/console/account')}
     <GradientBanner on:close={handleClose}>
         <div class="u-flex u-gap-24 u-main-center u-cross-center u-flex-vertical-mobile">
             <span class="body-text-1">Get $50 Cloud credits for Appwrite Pro.</span>

diff --git a/src/lib/components/billing/planComparisonBox.svelte b/src/lib/components/billing/planComparisonBox.svelte
@@ -1,38 +1,32 @@
 <script lang="ts">
     import { BillingPlan } from '$lib/constants';
     import { formatNum } from '$lib/helpers/string';
-    import { plansInfo, tierFree, tierPro, tierScale, type Tier } from '$lib/stores/billing';
+    import { isFreeTier, plansInfo, type Tier } from '$lib/stores/billing';
     import { Card, SecondaryTabs, SecondaryTabsItem } from '..';
 
-    let selectedTab: Tier = BillingPlan.FREE;
     export let downgrade = false;
 
+    // get the first available tier as default.
+    let selectedTab: Tier = $plansInfo.keys().next().value;
+
     $: plan = $plansInfo.get(selectedTab);
 </script>
 
 <Card style="--card-padding: 1.5rem">
     <div class="comparison-box">
         <SecondaryTabs stretch>
-            <SecondaryTabsItem
-                disabled={selectedTab === BillingPlan.FREE}
-                on:click={() => (selectedTab = BillingPlan.FREE)}>
-                {tierFree.name}
-            </SecondaryTabsItem>
-            <SecondaryTabsItem
-                disabled={selectedTab === BillingPlan.PRO}
-                on:click={() => (selectedTab = BillingPlan.PRO)}>
-                {tierPro.name}
-            </SecondaryTabsItem>
-            <SecondaryTabsItem
-                disabled={selectedTab === BillingPlan.SCALE}
-                on:click={() => (selectedTab = BillingPlan.SCALE)}>
-                {tierScale.name}
-            </SecondaryTabsItem>
+            {#each $plansInfo.entries() as [tier, plan] (tier)}
+                <SecondaryTabsItem
+                    disabled={selectedTab === tier}
+                    on:click={() => (selectedTab = tier)}>
+                    {plan.name}
+                </SecondaryTabsItem>
+            {/each}
         </SecondaryTabs>
     </div>
 
     <div class="u-margin-block-start-24">
-        {#if selectedTab === BillingPlan.FREE}
+        {#if isFreeTier(selectedTab)}
             <h3 class="u-bold body-text-1">{plan.name} plan</h3>
             {#if downgrade}
                 <ul class="u-margin-block-start-8 list u-gap-4 u-small">

diff --git a/src/lib/components/billing/planSelection.svelte b/src/lib/components/billing/planSelection.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-    import { BillingPlan } from '$lib/constants';
     import { formatCurrency } from '$lib/helpers/numbers';
-    import { plansInfo, tierFree, tierPro, tierScale, type Tier } from '$lib/stores/billing';
+    import { isFreeTier, plansInfo, type Tier } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
     import { LabelCard } from '..';
 
@@ -11,97 +10,40 @@
     export let selfService = true;
     let classes: string = '';
     export { classes as class };
-
-    $: freePlan = $plansInfo.get(BillingPlan.FREE);
-    $: proPlan = $plansInfo.get(BillingPlan.PRO);
-    $: scalePlan = $plansInfo.get(BillingPlan.SCALE);
 </script>
 
 {#if billingPlan}
     <ul class="u-flex u-flex-vertical u-gap-16 u-margin-block-start-8 {classes}">
-        <li>
-            <LabelCard
-                name="plan"
-                bind:group={billingPlan}
-                disabled={anyOrgFree || !selfService}
-                value={BillingPlan.FREE}
-                tooltipShow={anyOrgFree}
-                tooltipText="You are limited to 1 Free organization per account."
-                padding={1.5}>
-                <svelte:fragment slot="custom" let:disabled>
-                    <div
-                        class="u-flex u-flex-vertical u-gap-4 u-width-full-line"
-                        class:u-opacity-50={disabled}>
-                        <h4 class="body-text-2 u-bold">
-                            {tierFree.name}
-                            {#if $organization?.billingPlan === BillingPlan.FREE && !isNewOrg}
-                                <span class="inline-tag">Current plan</span>
-                            {/if}
-                        </h4>
-                        <p class="u-color-text-offline u-small">
-                            {tierFree.description}
-                        </p>
-                        <p>
-                            {formatCurrency(freePlan?.price ?? 0)}
-                        </p>
-                    </div>
-                </svelte:fragment>
-            </LabelCard>
-        </li>
-
-        <li>
-            <LabelCard
-                name="plan"
-                disabled={!selfService}
-                bind:group={billingPlan}
-                value={BillingPlan.PRO}
-                padding={1.5}>
-                <svelte:fragment slot="custom" let:disabled>
-                    <div
-                        class="u-flex u-flex-vertical u-gap-4 u-width-full-line"
-                        class:u-opacity-50={disabled}>
-                        <h4 class="body-text-2 u-bold">
-                            {tierPro.name}
-                            {#if $organization?.billingPlan === BillingPlan.PRO && !isNewOrg}
-                                <span class="inline-tag">Current plan</span>
-                            {/if}
-                        </h4>
-                        <p class="u-color-text-offline u-small">
-                            {tierPro.description}
-                        </p>
-                        <p>
-                            {formatCurrency(proPlan?.price ?? 0)} per member/month + usage
-                        </p>
-                    </div>
-                </svelte:fragment>
-            </LabelCard>
-        </li>
-        <li>
-            <LabelCard
-                name="plan"
-                bind:group={billingPlan}
-                value={BillingPlan.SCALE}
-                padding={1.5}
-                disabled={!selfService}>
-                <svelte:fragment slot="custom" let:disabled>
-                    <div
-                        class="u-flex u-flex-vertical u-gap-4 u-width-full-line"
-                        class:u-opacity-50={disabled}>
-                        <h4 class="body-text-2 u-bold">
-                            {tierScale.name}
-                            {#if $organization?.billingPlan === BillingPlan.SCALE && !isNewOrg}
-                                <span class="inline-tag">Current plan</span>
-                            {/if}
-                        </h4>
-                        <p class="u-color-text-offline u-small">
-                            {tierScale.description}
-                        </p>
-                        <p>
-                            {formatCurrency(scalePlan?.price ?? 0)} per month + usage
-                        </p>
-                    </div>
-                </svelte:fragment>
-            </LabelCard>
-        </li>
+        {#each $plansInfo.entries() as [tier, plan] (tier)}
+            <li>
+                <LabelCard
+                    name="plan"
+                    bind:group={billingPlan}
+                    disabled={anyOrgFree || !selfService}
+                    value={tier}
+                    tooltipShow={anyOrgFree}
+                    tooltipText="You are limited to 1 Free organization per account."
+                    padding={1.5}>
+                    <svelte:fragment slot="custom" let:disabled>
+                        <div
+                            class="u-flex u-flex-vertical u-gap-4 u-width-full-line"
+                            class:u-opacity-50={disabled}>
+                            <h4 class="body-text-2 u-bold">
+                                {plan.name}
+                                {#if isFreeTier($organization?.billingPlan) && !isNewOrg}
+                                    <span class="inline-tag">Current plan</span>
+                                {/if}
+                            </h4>
+                            <p class="u-color-text-offline u-small">
+                                {plan.desc}
+                            </p>
+                            <p>
+                                {formatCurrency(plan?.price ?? 0)}
+                            </p>
+                        </div>
+                    </svelte:fragment>
+                </LabelCard>
+            </li>
+        {/each}
     </ul>
 {/if}
diff --git a/src/lib/components/billing/selectPlan.svelte b/src/lib/components/billing/selectPlan.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-    import { BillingPlan } from '$lib/constants';
     import { formatCurrency } from '$lib/helpers/numbers';
-    import { plansInfo } from '$lib/stores/billing';
+    import { isFreeTier, plansInfo } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
     import { LabelCard } from '..';
 
@@ -14,15 +13,15 @@
 
 {#if billingPlan}
     <ul class="u-flex u-flex-vertical u-gap-16 u-margin-block-start-8 {classes}">
-        {#each $plansInfo.values() as plan}
+        {#each $plansInfo.entries() as [tier, plan]}
             <li>
                 <LabelCard
                     name="plan"
                     bind:group={billingPlan}
-                    disabled={(plan.$id === BillingPlan.FREE && anyOrgFree) || !plan.selfService}
-                    value={plan.$id}
-                    tooltipShow={plan.$id === BillingPlan.FREE && anyOrgFree}
-                    tooltipText={plan.$id === BillingPlan.FREE
+                    disabled={(isFreeTier(tier) && anyOrgFree) || !plan.selfService}
+                    value={tier}
+                    tooltipShow={isFreeTier(tier) && anyOrgFree}
+                    tooltipText={isFreeTier(tier)
                         ? 'You are limited to 1 Free organization per account.'
                         : ''}
                     padding={1.5}>

diff --git a/src/lib/components/billing/usageRates.svelte b/src/lib/components/billing/usageRates.svelte
@@ -11,7 +11,7 @@
     } from '$lib/elements/table';
     import { toLocaleDate } from '$lib/helpers/date';
     import { organization, type Organization } from '$lib/stores/organization';
-    import { plansInfo } from '$lib/stores/billing';
+    import { isFreeTier, plansInfo } from '$lib/stores/billing';
     import { abbreviateNumber, formatCurrency } from '$lib/helpers/numbers';
     import { BillingPlan } from '$lib/constants';
 
@@ -49,7 +49,7 @@
         }
     ];
 
-    $: isFree = org.billingPlan === BillingPlan.FREE;
+    $: isFree = isFreeTier(org.billingPlan);
 </script>
 
 <Modal bind:show size="big" headerDivider={false} title="Usage rates">

diff --git a/src/lib/components/bottomModalAlert.svelte b/src/lib/components/bottomModalAlert.svelte
@@ -11,7 +11,7 @@
     import { onMount } from 'svelte';
     import { organization } from '$lib/stores/organization';
     import { BillingPlan } from '$lib/constants';
-    import { upgradeURL } from '$lib/stores/billing';
+    import { isFreeTier, upgradeURL } from '$lib/stores/billing';
     import { addBottomModalAlerts } from '$routes/(console)/bottomAlerts';
     import { project } from '$routes/(console)/project-[project]/store';
     import { page } from '$app/stores';
@@ -74,11 +74,9 @@
             case 'free':
                 return false;
             case 'pro':
-                return organizationPlan === BillingPlan.FREE;
+                return isFreeTier(organizationPlan);
             case 'scale':
-                return (
-                    organizationPlan === BillingPlan.FREE || organizationPlan === BillingPlan.PRO
-                );
+                return isFreeTier(organizationPlan) || organizationPlan === BillingPlan.PRO;
         }
     }
 

diff --git a/src/lib/components/emptyCardImageCloud.svelte b/src/lib/components/emptyCardImageCloud.svelte
@@ -1,6 +1,4 @@
 <script>
-    import { getNextTier, tierToPlan } from '$lib/stores/billing';
-    import { organization } from '$lib/stores/organization';
     import Card from './card.svelte';
 
     export let source = 'empty_state_card';
@@ -22,7 +20,7 @@
         <div class="u-stretch u-flex-vertical u-main-center">
             <h3 class="body-text-2 u-bold"><slot name="title" /></h3>
             <p class="u-margin-block-start-8">
-                <slot nextTier={tierToPlan(getNextTier($organization.billingPlan)).name} />
+                <slot />
             </p>
             <slot name="cta" {source} />
         </div>

diff --git a/src/lib/components/roles/upgrade.svelte b/src/lib/components/roles/upgrade.svelte
@@ -1,19 +1,18 @@
 <script>
     import Base from './base.svelte';
-    import { upgradeURL } from '$lib/stores/billing';
+    import { isFreeTier, upgradeURL } from '$lib/stores/billing';
     import { isCloud } from '$lib/system';
     import { organization } from '$lib/stores/organization';
-    import { BillingPlan } from '$lib/constants';
     import Button from '$lib/elements/forms/button.svelte';
 </script>
 
 <Base>
     {#if isCloud}
-        {#if $organization?.billingPlan !== BillingPlan.FREE}
+        {#if !isFreeTier($organization?.billingPlan)}
             <div class="u-flex-vertical u-gap-8">
                 <p>
                     <span class="u-bold">Roles</span>
-                    {#if $organization?.billingPlan === BillingPlan.FREE}
+                    {#if isFreeTier($organization?.billingPlan)}
                         <span class="inline-tag u-normal u-x-small">Pro plan</span>
                     {/if}
                 </p>
@@ -27,7 +26,7 @@
             <div class="u-flex-vertical u-gap-8">
                 <p>
                     <span class="u-bold">Roles</span>
-                    {#if $organization?.billingPlan === BillingPlan.FREE}
+                    {#if isFreeTier($organization?.billingPlan)}
                         <span class="inline-tag u-normal u-x-small">Pro plan</span>
                     {/if}
                 </p>