Remove: BillingPlan hardcoded constant

src/lib/components/backupDatabaseAlert.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
     import { page } from '$app/state';
-    import { BillingPlan } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { organization } from '$lib/stores/organization';
     import { HeaderAlert } from '$lib/layout';
@@ -18,14 +17,14 @@
 </script>
 
 {#if $showPolicyAlert && isCloud && $organization?.$id && page.url.pathname.match(/\/databases\/database-[^/]+$/)}
-    {@const isFreePlan = $organization?.billingPlan === BillingPlan.FREE}
+    {@const areBackupsAvailable = $organization?.billingPlanDetails.backupsEnabled}
 
-    {@const subtitle = isFreePlan
+    {@const subtitle = !areBackupsAvailable
         ? 'Upgrade your plan to ensure your data stays safe and backed up'
         : 'Protect your data by quickly adding a backup policy'}
 
-    {@const ctaText = isFreePlan ? 'Upgrade plan' : 'Create policy'}
-    {@const ctaURL = isFreePlan ? $upgradeURL : `${page.url.pathname}/backups`}
+    {@const ctaText = !areBackupsAvailable ? 'Upgrade plan' : 'Create policy'}
+    {@const ctaURL = !areBackupsAvailable ? $upgradeURL : `${page.url.pathname}/backups`}
 
     <HeaderAlert type="warning" title="Your database has no backup policy">
         <svelte:fragment>{subtitle}</svelte:fragment>
@@ -35,7 +34,7 @@
                     href={ctaURL}
                     secondary
                     fullWidthMobile
-                    event={isFreePlan ? 'backup_banner_upgrade' : 'backup_banner_add'}>
+                    event={!areBackupsAvailable ? 'backup_banner_upgrade' : 'backup_banner_add'}>
                     <span class="text">{ctaText}</span>
                 </Button>
 

src/lib/components/backupRestoreBox.svelte

@@ -4,7 +4,7 @@
     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 { goto, invalidate } from '$app/navigation';
     import { page } from '$app/state';
     import { addNotification } from '$lib/stores/notifications';
@@ -125,7 +125,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 && !$organization?.billingPlanDetails.backupsEnabled)) return;
 
         return realtime.forProject(page.params.region, 'console', (response) => {
             if (!response.channels.includes(`projects.${getProjectId()}`)) return;

src/lib/components/billing/alerts/limitReached.svelte

@@ -2,26 +2,19 @@
     import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Click, trackEvent } from '$lib/actions/analytics';
-    import { BillingPlan } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { HeaderAlert } from '$lib/layout';
-    import {
-        hideBillingHeaderRoutes,
-        readOnly,
-        billingIdToPlan,
-        upgradeURL
-    } from '$lib/stores/billing';
+    import { hideBillingHeaderRoutes, readOnly, 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 && !$organization?.billingPlanDetails.usage && $readOnly && !hideBillingHeaderRoutes.includes(page.url.pathname)}
     <HeaderAlert
         type="error"
-        title={`${$organization.name} usage has reached the ${billingIdToPlan($organization.billingPlan).name} plan limit`}>
+        title={`${$organization.name} usage has reached the ${$organization.billingPlanDetails.name} plan limit`}>
         <svelte:fragment>
-            Usage for the <b>{$organization.name}</b> organization has reached the limits of the {billingIdToPlan(
-                $organization.billingPlan
-            ).name}
+            Usage for the <b>{$organization.name}</b> organization has reached the limits of the {$organization
+                .billingPlanDetails.name}
             plan. Consider upgrading to increase your resource usage.
         </svelte:fragment>
         <svelte:fragment slot="buttons">

src/lib/components/billing/alerts/missingPaymentMethod.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/state';
-    import { BillingPlan } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { HeaderAlert } from '$lib/layout';
     import { hideBillingHeaderRoutes } from '$lib/stores/billing';
     import { orgMissingPaymentMethod } from '$routes/(console)/store';
 </script>
 
-{#if ($orgMissingPaymentMethod.billingPlan === BillingPlan.PRO || $orgMissingPaymentMethod.billingPlan === BillingPlan.SCALE) && !$orgMissingPaymentMethod.paymentMethodId && !$orgMissingPaymentMethod.backupPaymentMethodId && !hideBillingHeaderRoutes.includes(page.url.pathname)}
+{#if $orgMissingPaymentMethod.billingPlanDetails.requiresPaymentMethod && !$orgMissingPaymentMethod.paymentMethodId && !$orgMissingPaymentMethod.backupPaymentMethodId && !hideBillingHeaderRoutes.includes(page.url.pathname)}
     <HeaderAlert
         type="error"
         title={`Payment method required for ${$orgMissingPaymentMethod.name}`}>

src/lib/components/billing/alerts/newDevUpgradePro.svelte

@@ -2,7 +2,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Click, 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';
@@ -23,7 +23,7 @@
     }
 </script>
 
-{#if show && $organization?.$id && $organization?.billingPlan === BillingPlan.FREE && !page.url.pathname.includes(base + '/account')}
+{#if show && $organization?.$id && !$organization?.billingPlanDetails.supportsCredits && !page.url.pathname.includes(base + '/account')}
     <GradientBanner on:close={handleClose}>
         <Layout.Stack
             gap="m"

src/lib/components/billing/estimatedTotalBox.svelte

@@ -7,7 +7,7 @@
     import { AppwriteException, type Models } from '@appwrite.io/console';
     import DiscountsApplied from './discountsApplied.svelte';
 
-    export let billingPlan: string;
+    export let billingPlan: Models.BillingPlan;
     export let collaborators: string[];
     export let couponData: Partial<Models.Coupon>;
     export let billingBudget: number;
@@ -79,8 +79,8 @@
     }
 
     $: organizationId
-        ? getUpdatePlanEstimate(organizationId, billingPlan, collaborators, couponData?.code)
-        : getEstimate(billingPlan, collaborators, couponData?.code);
+        ? getUpdatePlanEstimate(organizationId, billingPlan.$id, collaborators, couponData?.code)
+        : getEstimate(billingPlan.$id, collaborators, couponData?.code);
 </script>
 
 {#if estimation}
@@ -103,6 +103,7 @@
             {#if couponData?.status === 'active'}
                 <CreditsApplied bind:couponData {fixedCoupon} />
             {/if}
+
             <Divider />
             <Layout.Stack direction="row" justifyContent="space-between">
                 <Typography.Text>Total due</Typography.Text>

src/lib/components/billing/planComparisonBox.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
     import { page } from '$app/state';
-    import { BillingPlan } from '$lib/constants';
     import { formatNum } from '$lib/helpers/string';
     import { BillingPlanGroup, type Models } from '@appwrite.io/console';
     import { Card, Layout, Tabs, Typography } from '@appwrite.io/pink-svelte';
@@ -17,7 +16,7 @@
     const currentPlan: Models.BillingPlan = $derived($plansInfo.get(selectedTab));
     const visiblePlans: Array<Models.BillingPlan> = $derived.by(() => {
         return page.data.plans.plans.filter(
-            (plan: Models.BillingPlan) => plan.$id !== BillingPlan.SCALE
+            (plan: Models.BillingPlan) => plan.group !== BillingPlanGroup.Scale
         );
     });
 

src/lib/components/billing/planSelection.svelte

@@ -1,41 +1,60 @@
 <script lang="ts">
-    import { BillingPlan } from '$lib/constants';
+    import { LabelCard } from '..';
+    import { page } from '$app/state';
     import { formatCurrency } from '$lib/helpers/numbers';
     import { currentPlan, organization } from '$lib/stores/organization';
+    import { BillingPlanGroup, type Models } from '@appwrite.io/console';
     import { Badge, Layout, Tooltip, Typography } from '@appwrite.io/pink-svelte';
-    import { LabelCard } from '..';
-    import { page } from '$app/state';
-    import type { Models } from '@appwrite.io/console';
+    import { billingIdToPlan } from '$lib/stores/billing';
 
-    export let billingPlan: string;
-    export let isNewOrg = false;
-    export let selfService = true;
-    export let anyOrgFree = false;
+    let {
+        isNewOrg = false,
+        selfService = true,
+        anyOrgFree = false,
+        selectedBillingPlan = $bindable()
+    }: {
+        isNewOrg?: boolean;
+        selfService?: boolean;
+        anyOrgFree?: boolean;
+        selectedBillingPlan: Models.BillingPlan;
+    } = $props();
 
-    $: plans = Object.values(page.data.plans.plans) as Models.BillingPlan[];
-    $: currentPlanInList = plans.some((plan) => plan.$id === $currentPlan?.$id);
+    let selectedPlan = $state(selectedBillingPlan.$id);
+
+    const plans = $derived(Object.values(page.data.plans.plans) as Models.BillingPlan[]);
+    const currentPlanInList = $derived(plans.some((plan) => plan.$id === $currentPlan?.$id));
 
     // experiment to remove scale plan temporarily
-    $: plansWithoutScale = plans.filter((plan) => plan.$id != BillingPlan.SCALE);
+    const plansWithoutScale = $derived(
+        plans.filter((plan) => plan.group != BillingPlanGroup.Scale)
+    );
 
     function shouldShowTooltip(plan: Models.BillingPlan) {
-        if (plan.$id !== BillingPlan.FREE) return true;
+        if (plan.group !== BillingPlanGroup.Starter) return true;
         else return !anyOrgFree;
     }
+
+    function shouldDisable(plan: Models.BillingPlan) {
+        return plan.group === BillingPlanGroup.Starter && anyOrgFree;
+    }
+
+    $effect(() => {
+        selectedBillingPlan = billingIdToPlan(selectedPlan);
+    });
 </script>
 
 <Layout.Stack>
     {#each plansWithoutScale as plan}
         <Tooltip disabled={shouldShowTooltip(plan)} maxWidth="fit-content">
             <LabelCard
                 name="plan"
-                bind:group={billingPlan}
-                disabled={!selfService || (plan.$id === BillingPlan.FREE && anyOrgFree)}
-                tooltipShow={plan.$id === BillingPlan.FREE && anyOrgFree}
+                bind:group={selectedPlan}
+                disabled={!selfService || shouldDisable(plan)}
+                tooltipShow={shouldDisable(plan)}
                 value={plan.$id}
                 title={plan.name}>
                 <svelte:fragment slot="action">
-                    {#if $organization?.billingPlan === plan.$id && !isNewOrg}
+                    {#if $organization?.billingPlanId === plan.$id && !isNewOrg}
                         <Badge variant="secondary" size="xs" content="Current plan" />
                     {/if}
                 </svelte:fragment>
@@ -57,11 +76,11 @@
     {#if $currentPlan && !currentPlanInList}
         <LabelCard
             name="plan"
-            bind:group={billingPlan}
+            bind:group={selectedPlan}
             value={$currentPlan.$id}
             title={$currentPlan.name}>
             <svelte:fragment slot="action">
-                {#if $organization?.billingPlan === $currentPlan.$id && !isNewOrg}
+                {#if $organization?.billingPlanId === $currentPlan.$id && !isNewOrg}
                     <Badge variant="secondary" size="xs" content="Current plan" />
                 {/if}
             </svelte:fragment>

src/lib/components/billing/selectPlan.svelte

@@ -1,15 +1,24 @@
 <script lang="ts">
-    import { BillingPlan } from '$lib/constants';
     import { formatCurrency } from '$lib/helpers/numbers';
     import { plansInfo } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
     import { LabelCard } from '..';
+    import { BillingPlanGroup, type Models } from '@appwrite.io/console';
 
     export let billingPlan: string;
     export let anyOrgFree = false;
     export let isNewOrg = false;
     let classes: string = '';
     export { classes as class };
+
+    function shouldDisable(plan: Models.BillingPlan) {
+        return plan.group === BillingPlanGroup.Starter && anyOrgFree;
+    }
+
+    function shouldShowTooltip(plan: Models.BillingPlan) {
+        if (plan.group !== BillingPlanGroup.Starter) return true;
+        else return !anyOrgFree;
+    }
 </script>
 
 {#if billingPlan}
@@ -19,10 +28,10 @@
                 <LabelCard
                     name="plan"
                     bind:group={billingPlan}
-                    disabled={(plan.$id === BillingPlan.FREE && anyOrgFree) || !plan.selfService}
+                    disabled={!plan.selfService || shouldDisable(plan)}
                     value={plan.$id}
-                    tooltipShow={plan.$id === BillingPlan.FREE && anyOrgFree}
-                    tooltipText={plan.$id === BillingPlan.FREE
+                    tooltipShow={shouldShowTooltip(plan)}
+                    tooltipText={plan.group === BillingPlanGroup.Starter
                         ? 'You are limited to 1 Free organization per account.'
                         : ''}>
                     <svelte:fragment slot="custom" let:disabled>
@@ -31,7 +40,7 @@
                             class:u-opacity-50={disabled}>
                             <h4 class="body-text-2 u-bold">
                                 {plan.name}
-                                {#if $organization?.billingPlan === plan.$id && !isNewOrg}
+                                {#if $organization?.billingPlanId === plan.$id && !isNewOrg}
                                     <span class="inline-tag">Current plan</span>
                                 {/if}
                             </h4>

src/lib/components/billing/usageRates.svelte

@@ -2,23 +2,18 @@
     import { Modal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDate } from '$lib/helpers/date';
-    import { plansInfo } from '$lib/stores/billing';
-    import { abbreviateNumber, formatCurrency, isWithinSafeRange } from '$lib/helpers/numbers';
-    import { BillingPlan } from '$lib/constants';
     import { Table, Typography } from '@appwrite.io/pink-svelte';
-    import type { Models } from '@appwrite.io/console';
+    import { BillingPlanGroup, type Models } from '@appwrite.io/console';
+    import { abbreviateNumber, formatCurrency, isWithinSafeRange } from '$lib/helpers/numbers';
 
     export let show = false;
     export let org: Models.Organization;
 
-    let plan: Models.BillingPlan;
-    $: plan = $plansInfo?.get(org.billingPlan);
-
     $: nextDate = org?.name
         ? new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1).toString()
         : org?.billingNextInvoiceDate;
 
-    $: isFree = org.billingPlan === BillingPlan.FREE;
+    $: isFree = org.billingPlanDetails.group === BillingPlanGroup.Starter;
 
     // equal or above means unlimited!
     const getCorrectSeatsCountValue = (count: number): string | number => {
@@ -28,22 +23,22 @@
     };
 
     function getPlanLimit(key: string): number | false {
-        return plan[key] || false;
+        return org.billingPlanDetails[key] || false;
     }
 </script>
 
 <Modal bind:show title="Usage rates">
     {#if isFree}
         <Typography.Text>
-            Usage on the {$plansInfo?.get(BillingPlan.FREE).name} plan is limited for the following resources.
-            Next billing period: {toLocaleDate(nextDate)}.
+            Usage on the {org.billingPlanDetails.name} plan is limited for the following resources. Next
+            billing period: {toLocaleDate(nextDate)}.
         </Typography.Text>
-    {:else if org.billingPlan === BillingPlan.PRO}
+    {:else if org.billingPlanDetails.group === BillingPlanGroup.Pro}
         <Typography.Text>
             Usage on the Pro plan will be charged at the end of each billing period at the following
             rates. Next billing period: {toLocaleDate(nextDate)}.
         </Typography.Text>
-    {:else if org.billingPlan === BillingPlan.SCALE}
+    {:else if org.billingPlanDetails.group === BillingPlanGroup.Scale}
         <Typography.Text>
             Usage on the Scale plan will be charged at the end of each billing period at the
             following rates. Next billing period: {toLocaleDate(nextDate)}.
@@ -57,7 +52,7 @@
             <Table.Header.Cell column="limit" {root}>Limit</Table.Header.Cell>
             <Table.Header.Cell column="rate" {root}>Rate</Table.Header.Cell>
         </svelte:fragment>
-        {#each Object.values(plan.addons) as addon}
+        {#each Object.values(org.billingPlanDetails.addons) as addon}
             <Table.Row.Base {root}>
                 <Table.Cell column="resource" {root}>{addon.invoiceDesc}</Table.Cell>
                 <Table.Cell column="limit" {root}>
@@ -70,7 +65,7 @@
                 {/if}
             </Table.Row.Base>
         {/each}
-        {#each Object.entries(plan.usage) as [key, usage]}
+        {#each Object.entries(org.billingPlanDetails.usage) as [key, usage]}
             {@const limit = getPlanLimit(key)}
             {@const show = limit !== false}
             {#if show}