From 0f4de44762d59fba038feb6b745c52aaff9187cd Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Tue, 17 Feb 2026 17:59:45 +0530
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20Disable=20billing=20plan=20actions?=
 =?UTF-8?q?=20during=20upgrade=20with=20tooltip=20on=20hover=C3=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../billing/planSummary.svelte                | 112 +++++++++---------
 .../billing/planSummaryOld.svelte             |  98 ++++++++-------
 2 files changed, 110 insertions(+), 100 deletions(-)

diff --git a/src/routes/(console)/organization-[organization]/billing/planSummary.svelte b/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
index afe13b517..fe91a83e6 100644
--- a/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
@@ -14,7 +14,8 @@
         Icon,
         Layout,
         Divider,
-        Badge
+        Badge,
+        Tooltip
     } from '@appwrite.io/pink-svelte';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
     import { formatNum } from '$lib/helpers/string';
@@ -72,6 +73,7 @@
     const baseAmount = $derived(currentAggregation?.amount ?? currentPlan?.price ?? 0);
     const creditsApplied = $derived(Math.min(baseAmount, availableCredit ?? 0));
     const totalAmount = $derived(Math.max(baseAmount - creditsApplied, 0));
+    const isUpgrading = $derived($organization?.status === 'upgrading');
 
     function formatHumanSize(bytes: number): string {
         const size = humanFileSize(bytes || 0);
@@ -588,62 +590,62 @@
 
             <!-- Actions -->
             <div class="actions-container">
-                {#if !currentPlan.requiresPaymentMethod}
-                    <Layout.Stack
-                        direction="row"
-                        alignItems="center"
-                        justifyContent="flex-end"
-                        gap="s"
-                        wrap="wrap"
-                        class="u-width-full-line actions-mobile">
-                        {#if !currentPlan?.usagePerProject}
-                            <Button text href={`${base}/organization-${$organization?.$id}/usage`}>
-                                View estimated usage
-                            </Button>
-                        {/if}
+                <Layout.Stack
+                    direction="row"
+                    alignItems="center"
+                    justifyContent="flex-end"
+                    gap="s"
+                    wrap="wrap"
+                    class="u-width-full-line actions-mobile">
+                    <Tooltip disabled={!isUpgrading}>
+                        <div>
+                            {#if !currentPlan.requiresPaymentMethod}
+                                <Button
+                                    text
+                                    disabled={$organization?.markedForDeletion || isUpgrading}
+                                    href={getChangePlanUrl($organization?.$id)}
+                                    on:click={() =>
+                                        trackEvent(Click.OrganizationClickUpgrade, {
+                                            from: 'button',
+                                            source: 'billing_tab'
+                                        })}>
+                                    Upgrade
+                                </Button>
+                            {:else if $organization?.billingPlanDowngrade !== null}
+                                <Button
+                                    text
+                                    disabled={isUpgrading}
+                                    on:click={() => (showCancel = true)}>
+                                    Cancel change
+                                </Button>
+                            {:else}
+                                <Button
+                                    text
+                                    disabled={$organization?.markedForDeletion || isUpgrading}
+                                    href={getChangePlanUrl($organization?.$id)}
+                                    on:click={() =>
+                                        trackEvent(Click.OrganizationClickUpgrade, {
+                                            from: 'button',
+                                            source: 'billing_tab'
+                                        })}>
+                                    Change plan
+                                </Button>
+                            {/if}
+                        </div>
+                        <svelte:fragment slot="tooltip">
+                            Your payment is still being processed, check with your payment
+                            provider.
+                        </svelte:fragment>
+                    </Tooltip>
+                    {#if !currentPlan?.usagePerProject}
                         <Button
-                            disabled={$organization?.markedForDeletion}
-                            href={getChangePlanUrl($organization?.$id)}
-                            on:click={() =>
-                                trackEvent(Click.OrganizationClickUpgrade, {
-                                    from: 'button',
-                                    source: 'billing_tab'
-                                })}>
-                            Upgrade
+                            text={!currentPlan.requiresPaymentMethod}
+                            secondary={currentPlan.requiresPaymentMethod}
+                            href={`${base}/organization-${$organization?.$id}/usage`}>
+                            View estimated usage
                         </Button>
-                    </Layout.Stack>
-                {:else}
-                    <Layout.Stack
-                        direction="row"
-                        alignItems="center"
-                        justifyContent="flex-end"
-                        gap="s"
-                        wrap="wrap"
-                        class="u-width-full-line actions-mobile">
-                        {#if $organization?.billingPlanDowngrade !== null}
-                            <Button text on:click={() => (showCancel = true)}>Cancel change</Button>
-                        {:else}
-                            <Button
-                                text
-                                disabled={$organization?.markedForDeletion}
-                                href={getChangePlanUrl($organization?.$id)}
-                                on:click={() =>
-                                    trackEvent(Click.OrganizationClickUpgrade, {
-                                        from: 'button',
-                                        source: 'billing_tab'
-                                    })}>
-                                Change plan
-                            </Button>
-                        {/if}
-                        {#if !currentPlan?.usagePerProject}
-                            <Button
-                                secondary
-                                href={`${base}/organization-${$organization?.$id}/usage`}>
-                                View estimated usage
-                            </Button>
-                        {/if}
-                    </Layout.Stack>
-                {/if}
+                    {/if}
+                </Layout.Stack>
             </div>
         </EstimatedCard>
     {/key}
diff --git a/src/routes/(console)/organization-[organization]/billing/planSummaryOld.svelte b/src/routes/(console)/organization-[organization]/billing/planSummaryOld.svelte
index 0d4c8b132..f1fd80d7e 100644
--- a/src/routes/(console)/organization-[organization]/billing/planSummaryOld.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/planSummaryOld.svelte
@@ -31,6 +31,7 @@
     const isTrial =
         new Date($organization?.billingStartDate).getTime() - today.getTime() > 0 &&
         $organization?.billingTrialDays; /* number of trial days. */
+    $: isUpgrading = $organization?.status === 'upgrading';
 
     const extraUsage = currentInvoice ? currentInvoice.amount - currentPlan?.price : 0;
 </script>
@@ -41,9 +42,11 @@
         A breakdown of your estimated upcoming payment for the current billing period. Totals displayed
         exclude accumulated credits and applicable taxes.
         <svelte:fragment slot="aside">
-            <p class="text u-bold">
-                Due at: {toLocaleDate($organization?.billingNextInvoiceDate)}
-            </p>
+            <Layout.Stack gap="xs">
+                <p class="text u-bold">
+                    Due at: {toLocaleDate($organization?.billingNextInvoiceDate)}
+                </p>
+            </Layout.Stack>
             <Card.Base variant="secondary" padding="s">
                 <Layout.Stack>
                     <Layout.Stack direction="row" justifyContent="space-between">
@@ -165,50 +168,55 @@
             </Card.Base>
         </svelte:fragment>
         <svelte:fragment slot="actions">
-            {#if !currentPlan.requiresPaymentMethod}
-                <div
-                    class="u-flex u-flex-vertical-mobile u-cross-center u-gap-16 u-flex-wrap u-width-full-line u-main-end">
-                    {#if !currentPlan?.usagePerProject}
-                        <Button text href={`${base}/organization-${$organization?.$id}/usage`}>
-                            View estimated usage
-                        </Button>
-                    {/if}
+            <div
+                class="u-flex u-flex-vertical-mobile u-cross-center u-gap-16 u-flex-wrap u-width-full-line u-main-end">
+                <Tooltip disabled={!isUpgrading}>
+                    <div>
+                        {#if !currentPlan.requiresPaymentMethod}
+                            <Button
+                                disabled={$organization?.markedForDeletion || isUpgrading}
+                                href={getChangePlanUrl($organization?.$id)}
+                                on:click={() =>
+                                    trackEvent(Click.OrganizationClickUpgrade, {
+                                        from: 'button',
+                                        source: 'billing_tab'
+                                    })}>
+                                Upgrade
+                            </Button>
+                        {:else if $organization?.billingPlanDowngrade !== null}
+                            <Button
+                                text
+                                disabled={isUpgrading}
+                                on:click={() => (showCancel = true)}>
+                                Cancel change
+                            </Button>
+                        {:else}
+                            <Button
+                                text
+                                disabled={$organization?.markedForDeletion || isUpgrading}
+                                href={getChangePlanUrl($organization?.$id)}
+                                on:click={() =>
+                                    trackEvent(Click.OrganizationClickUpgrade, {
+                                        from: 'button',
+                                        source: 'billing_tab'
+                                    })}>
+                                Change plan
+                            </Button>
+                        {/if}
+                    </div>
+                    <svelte:fragment slot="tooltip">
+                        Your payment is still being processed, check with your payment provider.
+                    </svelte:fragment>
+                </Tooltip>
+                {#if !currentPlan?.usagePerProject}
                     <Button
-                        disabled={$organization?.markedForDeletion}
-                        href={getChangePlanUrl($organization?.$id)}
-                        on:click={() =>
-                            trackEvent(Click.OrganizationClickUpgrade, {
-                                from: 'button',
-                                source: 'billing_tab'
-                            })}>
-                        Upgrade
+                        text={!currentPlan.requiresPaymentMethod}
+                        secondary={currentPlan.requiresPaymentMethod}
+                        href={`${base}/organization-${$organization?.$id}/usage`}>
+                        View estimated usage
                     </Button>
-                </div>
-            {:else}
-                <div
-                    class="u-flex u-flex-vertical-mobile u-cross-center u-gap-16 u-flex-wrap u-width-full-line u-main-end">
-                    {#if $organization?.billingPlanDowngrade !== null}
-                        <Button text on:click={() => (showCancel = true)}>Cancel change</Button>
-                    {:else}
-                        <Button
-                            text
-                            disabled={$organization?.markedForDeletion}
-                            href={getChangePlanUrl($organization?.$id)}
-                            on:click={() =>
-                                trackEvent(Click.OrganizationClickUpgrade, {
-                                    from: 'button',
-                                    source: 'billing_tab'
-                                })}>
-                            Change plan
-                        </Button>
-                    {/if}
-                    {#if !currentPlan?.usagePerProject}
-                        <Button secondary href={`${base}/organization-${$organization?.$id}/usage`}>
-                            View estimated usage
-                        </Button>
-                    {/if}
-                </div>
-            {/if}
+                {/if}
+            </div>
         </svelte:fragment>
     </CardGrid>
 {/if}

From 645f0586cb520c9735ddbcd42414ee2497fa2af8 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Tue, 17 Feb 2026 18:08:33 +0530
Subject: [PATCH 2/2] format

---
 .../organization-[organization]/billing/planSummary.svelte     | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/routes/(console)/organization-[organization]/billing/planSummary.svelte b/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
index fe91a83e6..fa8e582d1 100644
--- a/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
@@ -633,8 +633,7 @@
                             {/if}
                         </div>
                         <svelte:fragment slot="tooltip">
-                            Your payment is still being processed, check with your payment
-                            provider.
+                            Your payment is still being processed, check with your payment provider.
                         </svelte:fragment>
                     </Tooltip>
                     {#if !currentPlan?.usagePerProject}