refactor plan selection

src/lib/components/billing/index.ts

@@ -7,3 +7,5 @@ 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 EstimatedTotal } from './estimatedTotal.svelte';
+export { default as SelectPlan } from './selectPlan.svelte';

src/lib/components/billing/selectPlan.svelte

@@ -0,0 +1,52 @@
+<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 '..';
+
+    export let billingPlan: string;
+    export let anyOrgFree = false;
+    export let isNewOrg = false;
+    export let selfService = true;
+    let classes: string = '';
+    export { classes as class };
+</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.$id === BillingPlan.FREE && anyOrgFree) || !plan.selfService}
+                    value={plan.$id}
+                    tooltipShow={plan.$id === BillingPlan.FREE && anyOrgFree}
+                    tooltipText={plan.$id === BillingPlan.FREE
+                        ? '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 $organization?.billingPlan === 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/lib/sdk/billing.ts

@@ -296,7 +296,9 @@ export type PlanAddon = {
 export type Plan = {
     $id: string;
     name: string;
+    desc: string;
     price: number;
+    order: number;
     bandwidth: number;
     storage: number;
     webhooks: number;
@@ -332,7 +334,7 @@ export type Plan = {
     supportsCredit: boolean;
 };
 
-export type PlansInfo = {
+export type PlanList = {
     plans: Plan[];
     total: number;
 };
@@ -1262,7 +1264,7 @@ export class Billing {
         );
     }
 
-    async getPlansInfo(): Promise<PlansInfo> {
+    async getPlansInfo(): Promise<PlanList> {
         const path = `/console/plans`;
         const params = {};
         const uri = new URL(this.client.config.endpoint + path);

src/routes/(console)/create-organization/+page.svelte

@@ -6,8 +6,10 @@
     import {
         EstimatedTotalBox,
         PlanComparisonBox,
-        PlanSelection,
-        SelectPaymentMethod
+        SelectPaymentMethod,
+
+        SelectPlan
+
     } from '$lib/components/billing';
     import EstimatedTotal from '$lib/components/billing/estimatedTotal.svelte';
     import ValidateCreditModal from '$lib/components/billing/validateCreditModal.svelte';
@@ -222,7 +224,7 @@
                 For more details on our plans, visit our
                 <Button href="https://appwrite.io/pricing" external link>pricing page</Button>.
             </p>
-            <PlanSelection bind:billingPlan {anyOrgFree} isNewOrg />
+            <SelectPlan bind:billingPlan {anyOrgFree} isNewOrg />
             {#if billingPlan !== BillingPlan.FREE}
                 <FormList class="u-margin-block-start-24">
                     <InputTags

src/routes/(console)/organization-[organization]/change-plan/+page.svelte

@@ -5,13 +5,12 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Alert } from '$lib/components';
     import {
-        EstimatedTotalBox,
         PlanComparisonBox,
         SelectPaymentMethod
     } from '$lib/components/billing';
     import EstimatedTotal from '$lib/components/billing/estimatedTotal.svelte';
     import PlanExcess from '$lib/components/billing/planExcess.svelte';
-    import PlanSelection from '$lib/components/billing/planSelection.svelte';
+    import SelectPlan from '$lib/components/billing/selectPlan.svelte';
     import ValidateCreditModal from '$lib/components/billing/validateCreditModal.svelte';
     import Default from '$lib/components/roles/default.svelte';
     import { BillingPlan, Dependencies, feedbackDowngradeOptions } from '$lib/constants';
@@ -274,8 +273,8 @@
         }
     }
 
-    $: isUpgrade = billingPlan > $organization.billingPlan;
-    $: isDowngrade = billingPlan < $organization.billingPlan;
+    $: isUpgrade = $plansInfo.get(billingPlan).order > $currentPlan.order;
+    $: isDowngrade = $plansInfo.get(billingPlan).order < $currentPlan.order;
     $: if (billingPlan !== BillingPlan.FREE) {
         loadPaymentMethods();
     }
@@ -300,9 +299,8 @@
                     >Your contract is not eligible for manual changes. Please reach out to schedule
                     a call or setup a dialog.</Alert>
             {/if}
-            <PlanSelection
+            <SelectPlan
                 bind:billingPlan
-                bind:selfService
                 anyOrgFree={!!anyOrgFree}
                 class={anyOrgFree && billingPlan !== BillingPlan.FREE
                     ? 'u-margin-block-start-16'
@@ -375,20 +373,12 @@
             {/if}
         </Form>
         <svelte:fragment slot="aside">
-            {#if billingPlan !== BillingPlan.FREE && $organization.billingPlan !== billingPlan && $organization.billingPlan !== BillingPlan.CUSTOM}
+            {#if billingPlan !== BillingPlan.FREE && $organization.billingPlan !== billingPlan && $organization.billingPlan !== BillingPlan.CUSTOM && isUpgrade}
                 <EstimatedTotal
                     organizationId={$organization.$id}
                     {billingPlan}
                     {collaborators}
-                    {couponId}
-                />
-                <!-- <EstimatedTotalBox
-                    {isDowngrade}
-                    {billingPlan}
-                    {collaborators}
-                    bind:couponData
-                    bind:billingBudget
-                    currentTier={$organization.billingPlan} /> -->
+                    {couponId} />
             {:else if $organization.billingPlan !== BillingPlan.CUSTOM}
                 <PlanComparisonBox downgrade={isDowngrade} />
             {/if}