From 838e066dbdf69d06ce2ea5dd201c1bafa2fca344 Mon Sep 17 00:00:00 2001
From: harsh mahajan <harshmahajan2345@gmail.com>
Date: Wed, 20 May 2026 10:55:25 +0530
Subject: [PATCH 1/3] feat: add dedicated 402 budget limit error page

Replace generic error display for 402 responses with a dedicated
budget limit error page. Includes a 'Go to billing' CTA when an
organization is in context, and a 'Change organization' secondary
action on both console-level and project-level error pages.
---
 src/routes/(console)/+error.svelte            | 75 +++++++++++++++----
 .../project-[region]-[project]/+error.svelte  | 36 ++++++++-
 2 files changed, 95 insertions(+), 16 deletions(-)

diff --git a/src/routes/(console)/+error.svelte b/src/routes/(console)/+error.svelte
index 41863e61a4..ec00cecb1a 100644
--- a/src/routes/(console)/+error.svelte
+++ b/src/routes/(console)/+error.svelte
@@ -5,7 +5,12 @@
     import { Button } from '$lib/elements/forms';
     import { isVerifyEmailRedirectError } from '$lib/helpers/emailVerification';
     import { Container } from '$lib/layout';
-    import { Typography } from '@appwrite.io/pink-svelte';
+    import { Badge, Layout, Typography } from '@appwrite.io/pink-svelte';
+
+    const isPaymentError = $derived(page.status === 402);
+    const billingUrl = $derived(
+        page.params.organization ? `${base}/organization-${page.params.organization}/billing` : null
+    );
 
     $effect(() => {
         const verifyEmailPath = resolve('/verify-email');
@@ -15,15 +20,59 @@
     });
 </script>
 
-<Container>
-    <div>
-        <Typography.Title size="xl"
-            >{'status' in page.error
-                ? page.error.status || 'Invalid Argument'
-                : 'Invalid Argument'}</Typography.Title>
-        <Typography.Title>{page.error.message}</Typography.Title>
-    </div>
-    <div>
-        <Button href={base}>Back to the console</Button>
-    </div>
-</Container>
+{#if isPaymentError}
+    <section class="budget-error">
+        <div class="budget-error__content">
+            <Layout.Stack gap="s" alignItems="center">
+                <Badge type="error" variant="secondary" content="Budget limit reached" />
+                <Layout.Stack gap="xs" alignItems="center">
+                    <Typography.Title size="l" align="center">
+                        Your organization has reached its budget limit
+                    </Typography.Title>
+                    <Typography.Text align="center">
+                        Access to resources has been blocked. Update your billing settings to
+                        restore access.
+                    </Typography.Text>
+                </Layout.Stack>
+                <div class="u-margin-block-start-16">
+                    <Layout.Stack direction="row" gap="s" justifyContent="center">
+                        {#if billingUrl}
+                            <Button href={billingUrl}>Go to billing</Button>
+                        {/if}
+                        <Button secondary href="{base}/account/organizations"
+                            >Change organization</Button>
+                    </Layout.Stack>
+                </div>
+            </Layout.Stack>
+        </div>
+    </section>
+{:else}
+    <Container>
+        <div>
+            <Typography.Title size="xl"
+                >{'status' in page.error
+                    ? page.error.status || 'Invalid Argument'
+                    : 'Invalid Argument'}</Typography.Title>
+            <Typography.Title>{page.error.message}</Typography.Title>
+        </div>
+        <div>
+            <Button href={base}>Back to the console</Button>
+        </div>
+    </Container>
+{/if}
+
+<style>
+    .budget-error {
+        min-height: calc(100vh - 48px - 2rem);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 4rem 1.5rem;
+        text-align: center;
+    }
+
+    .budget-error__content {
+        width: min(100%, 33rem);
+        max-width: 33rem;
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/+error.svelte b/src/routes/(console)/project-[region]-[project]/+error.svelte
index 602d883377..ab7473aa10 100644
--- a/src/routes/(console)/project-[region]-[project]/+error.svelte
+++ b/src/routes/(console)/project-[region]-[project]/+error.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
+    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Button } from '$lib/elements/forms';
-    import { currentPlan, organizationList } from '$lib/stores/organization';
+    import { currentPlan, organization, organizationList } from '$lib/stores/organization';
     import SupportWizard from '$routes/(console)/supportWizard.svelte';
     import { wizard } from '$lib/stores/wizard';
     import { Badge, Layout, Typography } from '@appwrite.io/pink-svelte';
     import type { Models } from '@appwrite.io/console';
-
     function contactSupport() {
         wizard.start(SupportWizard);
     }
@@ -16,9 +16,39 @@
     );
 
     $: hasPremiumSupport = $currentPlan?.premiumSupport ?? allOrgsHavePremiumSupport ?? false;
+
+    $: orgId = $organization?.$id;
+    $: billingUrl = orgId ? `${base}/organization-${orgId}/billing` : null;
+    $: isPaymentError = page.status === 402;
 </script>
 
-{#if page.error.type === 'general_resource_blocked'}
+{#if isPaymentError}
+    <section class="resource-blocked">
+        <div class="resource-blocked__content">
+            <Layout.Stack gap="s" alignItems="center">
+                <Badge type="error" variant="secondary" content="Budget limit reached" />
+                <Layout.Stack gap="xs" alignItems="center">
+                    <Typography.Title size="l" align="center">
+                        Your organization has reached its budget limit
+                    </Typography.Title>
+                    <Typography.Text align="center">
+                        Access to this resource has been blocked. Update your billing settings to
+                        restore access.
+                    </Typography.Text>
+                </Layout.Stack>
+                <div class="u-margin-block-start-16">
+                    <Layout.Stack direction="row" gap="s" justifyContent="center">
+                        {#if billingUrl}
+                            <Button href={billingUrl}>Go to billing</Button>
+                        {/if}
+                        <Button secondary href="{base}/account/organizations"
+                            >Change organization</Button>
+                    </Layout.Stack>
+                </div>
+            </Layout.Stack>
+        </div>
+    </section>
+{:else if page.error.type === 'general_resource_blocked'}
     <section class="resource-blocked">
         <div class="resource-blocked__content">
             <Layout.Stack gap="s" alignItems="center">

From 549c073aa604fef9e00f2ef586b3cd4fdc23d18b Mon Sep 17 00:00:00 2001
From: harsh mahajan <harshmahajan2345@gmail.com>
Date: Wed, 20 May 2026 11:03:53 +0530
Subject: [PATCH 2/3] fix: use generic billing limit copy for 402 error page

402 can be triggered by various billing limits, not only budget caps.
Update copy to reflect this.
---
 src/routes/(console)/+error.svelte                            | 4 ++--
 src/routes/(console)/project-[region]-[project]/+error.svelte | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/routes/(console)/+error.svelte b/src/routes/(console)/+error.svelte
index ec00cecb1a..b2751b53c6 100644
--- a/src/routes/(console)/+error.svelte
+++ b/src/routes/(console)/+error.svelte
@@ -24,10 +24,10 @@
     <section class="budget-error">
         <div class="budget-error__content">
             <Layout.Stack gap="s" alignItems="center">
-                <Badge type="error" variant="secondary" content="Budget limit reached" />
+                <Badge type="error" variant="secondary" content="Billing limit reached" />
                 <Layout.Stack gap="xs" alignItems="center">
                     <Typography.Title size="l" align="center">
-                        Your organization has reached its budget limit
+                        Your organization has reached a billing limit
                     </Typography.Title>
                     <Typography.Text align="center">
                         Access to resources has been blocked. Update your billing settings to
diff --git a/src/routes/(console)/project-[region]-[project]/+error.svelte b/src/routes/(console)/project-[region]-[project]/+error.svelte
index ab7473aa10..3c724180c1 100644
--- a/src/routes/(console)/project-[region]-[project]/+error.svelte
+++ b/src/routes/(console)/project-[region]-[project]/+error.svelte
@@ -26,10 +26,10 @@
     <section class="resource-blocked">
         <div class="resource-blocked__content">
             <Layout.Stack gap="s" alignItems="center">
-                <Badge type="error" variant="secondary" content="Budget limit reached" />
+                <Badge type="error" variant="secondary" content="Billing limit reached" />
                 <Layout.Stack gap="xs" alignItems="center">
                     <Typography.Title size="l" align="center">
-                        Your organization has reached its budget limit
+                        Your organization has reached a billing limit
                     </Typography.Title>
                     <Typography.Text align="center">
                         Access to this resource has been blocked. Update your billing settings to

From 95f665591360cb57f6fb26544142826ece51061c Mon Sep 17 00:00:00 2001
From: harsh mahajan <harshmahajan2345@gmail.com>
Date: Wed, 20 May 2026 11:06:11 +0530
Subject: [PATCH 3/3] fix: use backend error message on 402 billing limit page

---
 src/routes/(console)/+error.svelte                           | 5 +----
 .../(console)/project-[region]-[project]/+error.svelte       | 5 +----
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/routes/(console)/+error.svelte b/src/routes/(console)/+error.svelte
index b2751b53c6..a4b8533bd1 100644
--- a/src/routes/(console)/+error.svelte
+++ b/src/routes/(console)/+error.svelte
@@ -29,10 +29,7 @@
                     <Typography.Title size="l" align="center">
                         Your organization has reached a billing limit
                     </Typography.Title>
-                    <Typography.Text align="center">
-                        Access to resources has been blocked. Update your billing settings to
-                        restore access.
-                    </Typography.Text>
+                    <Typography.Text align="center">{page.error.message}</Typography.Text>
                 </Layout.Stack>
                 <div class="u-margin-block-start-16">
                     <Layout.Stack direction="row" gap="s" justifyContent="center">
diff --git a/src/routes/(console)/project-[region]-[project]/+error.svelte b/src/routes/(console)/project-[region]-[project]/+error.svelte
index 3c724180c1..fd42e37f5b 100644
--- a/src/routes/(console)/project-[region]-[project]/+error.svelte
+++ b/src/routes/(console)/project-[region]-[project]/+error.svelte
@@ -31,10 +31,7 @@
                     <Typography.Title size="l" align="center">
                         Your organization has reached a billing limit
                     </Typography.Title>
-                    <Typography.Text align="center">
-                        Access to this resource has been blocked. Update your billing settings to
-                        restore access.
-                    </Typography.Text>
+                    <Typography.Text align="center">{page.error.message}</Typography.Text>
                 </Layout.Stack>
                 <div class="u-margin-block-start-16">
                     <Layout.Stack direction="row" gap="s" justifyContent="center">