update: address comments.

src/lib/components/backupRestoreBox.svelte

@@ -125,7 +125,7 @@
     }
 
     onMount(() => {
-        // fast path: don't subscribe if org is on a free plan or is self-hosted.
+        // fast path: don't subscribe if org doesn't support backups or is self-hosted.
         if (isSelfHosted || (isCloud && !$organization?.billingPlanDetails.backupsEnabled)) return;
 
         return realtime.forProject(page.params.region, 'console', (response) => {

src/lib/components/billing/index.ts

@@ -6,4 +6,3 @@ export { default as PlanComparisonBox } from './planComparisonBox.svelte';
 export { default as EmptyCardCloud } from './emptyCardCloud.svelte';
 export { default as CreditsApplied } from './creditsApplied.svelte';
 export { default as PlanSelection } from './planSelection.svelte';
-export { default as SelectPlan } from './selectPlan.svelte';

src/lib/components/billing/planSelection.svelte

@@ -21,13 +21,8 @@
 
     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
-    const plansWithoutScale = $derived(
-        plans.filter((plan) => plan.group != BillingPlanGroup.Scale)
-    );
+    const visiblePlans = $derived(Object.values(page.data.plans.plans) as Models.BillingPlan[]);
+    const currentPlanInList = $derived(visiblePlans.some((plan) => plan.$id === $currentPlan?.$id));
 
     function shouldShowTooltip(plan: Models.BillingPlan) {
         if (plan.group !== BillingPlanGroup.Starter) return true;
@@ -44,7 +39,7 @@
 </script>
 
 <Layout.Stack>
-    {#each plansWithoutScale as plan}
+    {#each visiblePlans as plan}
         <Tooltip disabled={shouldShowTooltip(plan)} maxWidth="fit-content">
             <LabelCard
                 name="plan"

src/lib/components/billing/selectPlan.svelte

@@ -1,59 +0,0 @@
-<script lang="ts">
-    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}
-    <ul class="u-flex u-flex-vertical u-gap-16 u-margin-block-start-8 {classes}">
-        {#each $plansInfo.values() as plan}
-            <li>
-                <LabelCard
-                    name="plan"
-                    bind:group={billingPlan}
-                    disabled={!plan.selfService || shouldDisable(plan)}
-                    value={plan.$id}
-                    tooltipShow={shouldShowTooltip(plan)}
-                    tooltipText={plan.group === BillingPlanGroup.Starter
-                        ? 'You are limited to 1 Free organization per account.'
-                        : ''}>
-                    <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 $organization?.billingPlanId === plan.$id && !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}

src/routes/(console)/account/organizations/+page.svelte

@@ -66,7 +66,7 @@
     }
 
     function isNonPayingOrganization(organization: Models.Organization): boolean {
-        // 0 priced plans don't need payment methods!
+        // plan doesn't require payments, it is a non-paying org!
         return !organization?.billingPlanDetails.requiresPaymentMethod;
     }
 

src/routes/(console)/apply-credit/+page.svelte

@@ -279,6 +279,17 @@
     ) {
         loadPaymentMethods();
     }
+
+    /* check if payment method selection is needed */
+    $: needsPaymentMethod =
+        selectedOrgId &&
+        (!selectedOrg?.billingPlanDetails.requiresPaymentMethod || !selectedOrg?.paymentMethodId);
+
+    /* check if coupon code input should be shown */
+    $: needsCouponInput = !data?.couponData?.code && selectedOrgId;
+
+    /* show payment section if either payment method or coupon input is needed */
+    $: showPaymentSection = needsPaymentMethod || needsCouponInput;
 </script>
 
 <svelte:head>
@@ -302,7 +313,7 @@
                         {/if}
 
                         <!-- show invite members -->
-                        {#if selectedOrgId && (!selectedOrg?.billingPlanDetails.addons.seats.supported || !selectedOrg?.paymentMethodId)}
+                        {#if selectedOrgId && !selectedOrg?.billingPlanDetails.addons.seats.supported}
                             {#if selectedOrgId === newOrgId}
                                 <InputText
                                     label="Organization name"
@@ -330,17 +341,17 @@
                     </Layout.Stack>
                 </Fieldset>
 
-                {#if (selectedOrgId && (!selectedOrg?.billingPlanDetails.requiresPaymentMethod || !selectedOrg?.paymentMethodId)) || (!data?.couponData?.code && selectedOrgId)}
+                {#if showPaymentSection}
                     <Fieldset legend="Payment">
                         <Layout.Stack gap="xl">
-                            {#if selectedOrgId && (!selectedOrg?.billingPlanDetails.requiresPaymentMethod || !selectedOrg?.paymentMethodId)}
+                            {#if needsPaymentMethod}
                                 <SelectPaymentMethod
                                     bind:methods
                                     bind:value={paymentMethodId}
                                     bind:taxId />
                             {/if}
                             <Form bind:this={couponForm} onSubmit={addCoupon}>
-                                {#if !data?.couponData?.code && selectedOrgId}
+                                {#if needsCouponInput}
                                     <Layout.Stack gap="s" direction="row" alignItems="flex-end">
                                         <InputText
                                             required