fix: hide alert when cap updated

Author: lohanidamodar

src/lib/stores/billing.ts

@@ -65,6 +65,8 @@ 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 = writable<boolean>(false);
+
 export function getRoleLabel(role: string) {
     return roles.find((r) => r.value === role)?.label ?? role;
 }
@@ -275,9 +277,9 @@ export async function checkForUsageLimit(org: Organization) {
         if (!budgetLimit || budgetLimit < 100) {
             readOnly.set(false);
             return;
-
         }
 
+        showBudgetAlert.set(true);
         headerAlert.add({
             id: 'budgetLimit',
             component: BudgetLimitAlert,

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

@@ -4,7 +4,7 @@
     import { Alert, CardGrid, Heading } from '$lib/components';
     import { BillingPlan, Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputNumber, InputSwitch } from '$lib/elements/forms';
-    import { showUsageRatesModal, upgradeURL } from '$lib/stores/billing';
+    import { showBudgetAlert, showUsageRatesModal, upgradeURL } from '$lib/stores/billing';
     import { addNotification } from '$lib/stores/notifications';
     import { organization, currentPlan } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
@@ -27,6 +27,7 @@
                 $organization.budgetAlerts
             );
             await invalidate(Dependencies.ORGANIZATION);
+            showBudgetAlert.set(false);
             addNotification({
                 type: 'success',
                 isHtml: true,

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

@@ -4,11 +4,11 @@
     import { Button } from '$lib/elements/forms';
     import { organization } from '$lib/stores/organization';
     import { HeaderAlert } from '$lib/layout';
-    import { hideBillingHeaderRoutes, readOnly } from '$lib/stores/billing';
+    import { hideBillingHeaderRoutes, readOnly, showBudgetAlert } from '$lib/stores/billing';
     import { base } from '$app/paths';
 </script>
 
-{#if $organization?.$id && $organization?.billingPlan !== BillingPlan.FREE && $readOnly && !hideBillingHeaderRoutes.includes($page.url.pathname)}
+{#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