Skip to content

feat: add dedicated 402 budget limit error page #3052

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
HarshMN2345 merged 3 commits into from
May 20, 2026
+89 −16
Merged

feat: add dedicated 402 budget limit error page #3052

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
838e066
feat: add dedicated 402 budget limit error page
HarshMN2345 May 20, 2026
549c073
fix: use generic billing limit copy for 402 error page
HarshMN2345 May 20, 2026
95f6655
fix: use backend error message on 402 billing limit page
HarshMN2345 May 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 59 additions & 13 deletions src/routes/(console)/+error.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -15,15 +20,56 @@
});
</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="Billing limit reached" />
<Layout.Stack gap="xs" alignItems="center">
<Typography.Title size="l" align="center">
Your organization has reached a billing limit
</Typography.Title>
<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">
{#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>
33 changes: 30 additions & 3 deletions src/routes/(console)/project-[region]-[project]/+error.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
Expand All @@ -16,9 +16,36 @@
);

$: hasPremiumSupport = $currentPlan?.premiumSupport ?? allOrgsHavePremiumSupport ?? false;

$: orgId = $organization?.$id;
$: billingUrl = orgId ? `${base}/organization-${orgId}/billing` : null;
$: isPaymentError = page.status === 402;
Comment on lines +20 to +22
Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps Bot May 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Svelte 4 reactive declarations on a touched file

The three new reactive statements use legacy $: syntax (Svelte 4), but AGENTS.md requires migrating a file to Svelte 5 runes when it is modified ("When touching a file, migrate it to runes if practical. Don't mix syntaxes within a single component."). The sibling (console)/+error.svelte was already in runes mode and uses $derived for the equivalent variables; keeping this file on $: means the two error pages diverge in style unnecessarily. The existing $: statements for allOrgsHavePremiumSupport and hasPremiumSupport should also be converted as part of the same pass.

Context Used: AGENTS.md (source)

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

</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="Billing limit reached" />
<Layout.Stack gap="xs" alignItems="center">
<Typography.Title size="l" align="center">
Your organization has reached a billing limit
</Typography.Title>
<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">
{#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'}
Comment thread
greptile-apps[bot] marked this conversation as resolved.
<section class="resource-blocked">
<div class="resource-blocked__content">
<Layout.Stack gap="s" alignItems="center">
Expand Down