Merge pull request #1738 from appwrite/fix-budget-limit-alert

Feat: show budget limit alert

Author: lohanidamodar

src/lib/components/heading.svelte

@@ -21,3 +21,10 @@
     {id}>
     <slot />
 </svelte:element>
+
+<style>
+    :target {
+        padding-top: 120px;
+        margin-top: -120px;
+    }
+</style>

src/lib/stores/billing.ts

@@ -32,6 +32,7 @@ import { organization, type Organization, type OrganizationError } from './organ
 import { canSeeBilling } from './roles';
 import { sdk } from './sdk';
 import { user } from './user';
+import BudgetLimitAlert from '$routes/(console)/organization-[organization]/budgetLimitAlert.svelte';
 
 export type Tier = 'tier-0' | 'tier-1' | 'tier-2' | 'auto-1' | 'cont-1' | 'ent-1';
 
@@ -64,6 +65,11 @@ export const plansInfo = derived(page, ($page) => $page.data.plansInfo as PlansM
 export const daysLeftInTrial = writable<number>(0);
 export const readOnly = writable<boolean>(false);
 
+export const showBudgetAlert = derived(
+    page,
+    ($page) => ($page.data.organization?.billingLimits.budgetLimit ?? 0) >= 100
+);
+
 export function getRoleLabel(role: string) {
     return roles.find((r) => r.value === role)?.label ?? role;
 }
@@ -264,12 +270,26 @@ export function calculateTrialDay(org: Organization) {
 }
 
 export async function checkForUsageLimit(org: Organization) {
-    if (org?.billingPlan !== BillingPlan.FREE) {
+    if (!org?.billingLimits) {
         readOnly.set(false);
         return;
     }
-    if (!org?.billingLimits) {
-        readOnly.set(false);
+    if (org?.billingPlan !== BillingPlan.FREE) {
+        const { budgetLimit } = org?.billingLimits ?? {};
+
+        if (!budgetLimit || budgetLimit < 100) {
+            readOnly.set(false);
+            return;
+        }
+
+        headerAlert.add({
+            id: 'budgetLimit',
+            component: BudgetLimitAlert,
+            show: true,
+            importance: 10
+        });
+
+        readOnly.set(true);
         return;
     }
     const { bandwidth, documents, executions, storage, users } = org?.billingLimits ?? {};

src/lib/stores/organization.ts

@@ -45,6 +45,7 @@ export type BillingLimits = {
     executions: number;
     storage: number;
     users: number;
+    budgetLimit: number;
 };
 
 export const newOrgModal = writable<boolean>(false);

src/routes/(console)/organization-[organization]/billing/budgetCap.svelte

@@ -26,7 +26,7 @@
                 budget,
                 $organization.budgetAlerts
             );
-            invalidate(Dependencies.ORGANIZATION);
+            await invalidate(Dependencies.ORGANIZATION);
             addNotification({
                 type: 'success',
                 isHtml: true,
@@ -51,7 +51,7 @@
 
 <Form onSubmit={updateBudget}>
     <CardGrid>
-        <Heading tag="h2" size="6">Budget cap</Heading>
+        <Heading id="update-budget" tag="h2" size="6">Budget cap</Heading>
 
         <p class="text">
             Restrict your resource usage by setting a budget cap. Cap usage is reset at the

src/routes/(console)/organization-[organization]/budgetLimitAlert.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { BillingPlan } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
+    import { organization } from '$lib/stores/organization';
+    import { HeaderAlert } from '$lib/layout';
+    import { hideBillingHeaderRoutes, readOnly, showBudgetAlert } from '$lib/stores/billing';
+    import { base } from '$app/paths';
+
+    $: redirectUrl = `${base}/organization-${$organization.$id}/billing#update-budget`;
+</script>
+
+{#if $showBudgetAlert && $organization?.$id && $organization?.billingPlan !== BillingPlan.FREE && $readOnly && !hideBillingHeaderRoutes.includes($page.url.pathname)}
+    <HeaderAlert type="error" title="Budget limit reached">
+        <svelte:fragment>
+            This organization has reached its budget limit and is now blocked. To continue using
+            Appwrite services, update the budget limit.
+        </svelte:fragment>
+        <svelte:fragment slot="buttons">
+            <Button href={`${base}/organization-${$organization.$id}/usage`} text fullWidthMobile>
+                <span class="text">View usage</span>
+            </Button>
+            <Button secondary fullWidthMobile href={redirectUrl}>
+                <span class="text">Update limit</span>
+            </Button>
+        </svelte:fragment>
+    </HeaderAlert>
+{/if}