fix: undefined (reading 'budgeting') in budget cap

stnguyen90 · stnguyen90 · commit a66ef5ed9be9 · 2025-07-03T18:09:02.000-07:00
diff --git a/src/routes/(console)/organization-[organization]/billing/+page.svelte b/src/routes/(console)/organization-[organization]/billing/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
-    import { organization } from '$lib/stores/organization';
     import BudgetCap from './budgetCap.svelte';
     import PlanSummary from './planSummary.svelte';
     import BillingAddress from './billingAddress.svelte';
@@ -25,14 +24,15 @@
     import type { PageData } from './$types';
 
     export let data: PageData;
+    let organization = data.organization;
 
     // why are these reactive?
     $: defaultPaymentMethod = data?.paymentMethods?.paymentMethods?.find(
-        (method: PaymentMethodData) => method.$id === $organization?.paymentMethodId
+        (method: PaymentMethodData) => method.$id === organization?.paymentMethodId
     );
 
     $: backupPaymentMethod = data?.paymentMethods?.paymentMethods?.find(
-        (method: PaymentMethodData) => method.$id === $organization?.backupPaymentMethodId
+        (method: PaymentMethodData) => method.$id === organization?.backupPaymentMethodId
     );
 
     onMount(async () => {
@@ -52,10 +52,10 @@
                 );
 
                 await confirmPayment(
-                    $organization.$id,
+                    organization.$id,
                     invoice.clientSecret,
-                    $organization.paymentMethodId,
-                    `${base}/organization-${$organization.$id}/billing?type=validate-invoice&invoice=${invoice.$id}`
+                    organization.paymentMethodId,
+                    `${base}/organization-${organization.$id}/billing?type=validate-invoice&invoice=${invoice.$id}`
                 );
             }
 
@@ -64,7 +64,7 @@
                 page.url.searchParams.get('type') === 'validate-invoice'
             ) {
                 const invoiceId = page.url.searchParams.get('invoice');
-                await sdk.forConsole.billing.updateInvoiceStatus($organization.$id, invoiceId);
+                await sdk.forConsole.billing.updateInvoiceStatus(organization.$id, invoiceId);
                 invalidate(Dependencies.INVOICES);
                 invalidate(Dependencies.ORGANIZATION);
             }
@@ -84,7 +84,7 @@
         }
         if (page.url.searchParams.has('clientSecret')) {
             const clientSecret = page.url.searchParams.get('clientSecret');
-            await confirmPayment($organization.$id, clientSecret, $organization.paymentMethodId);
+            await confirmPayment(organization.$id, clientSecret, organization.paymentMethodId);
         }
     });
 </script>
@@ -93,7 +93,7 @@
     {#if $failedInvoice}
         {#if $failedInvoice?.lastError}
             <Alert.Inline status="error">
-                The scheduled payment for {$organization.name} failed due to following error: {$failedInvoice.lastError}
+                The scheduled payment for {organization.name} failed due to following error: {$failedInvoice.lastError}
                 <svelte:fragment slot="actions">
                     <Button
                         text
@@ -106,7 +106,7 @@
         {:else}
             <Alert.Inline
                 status="error"
-                title={`The scheduled payment for ${$organization.name} failed`}>
+                title={`The scheduled payment for ${organization.name} failed`}>
                 To avoid service disruptions in organization's your projects, please verify your
                 payment details and update them if necessary.
             </Alert.Inline>
@@ -115,16 +115,16 @@
     {#if defaultPaymentMethod?.failed && !backupPaymentMethod}
         <Alert.Inline
             status="error"
-            title={`The default payment method for ${$organization.name} has expired`}>
+            title={`The default payment method for ${organization.name} has expired`}>
             To avoid service disruptions in your organization's projects, please update your payment
             details.
         </Alert.Inline>
     {/if}
-    {#if $organization?.billingPlanDowngrade}
+    {#if organization?.billingPlanDowngrade}
         <Alert.Inline status="info">
-            Your organization has changed to {tierToPlan($organization?.billingPlanDowngrade).name} plan.
-            You will continue to have access to {tierToPlan($organization?.billingPlan).name} plan features
-            until your billing period ends on {toLocaleDate($organization.billingNextInvoiceDate)}.
+            Your organization has changed to {tierToPlan(organization?.billingPlanDowngrade).name} plan.
+            You will continue to have access to {tierToPlan(organization?.billingPlan).name} plan features
+            until your billing period ends on {toLocaleDate(organization.billingNextInvoiceDate)}.
         </Alert.Inline>
     {/if}
     <Typography.Title>Billing</Typography.Title>
@@ -137,7 +137,7 @@
     <PaymentMethods methods={data?.paymentMethods} />
     <BillingAddress {data} />
     <TaxId />
-    <BudgetCap />
+    <BudgetCap organization={data?.organization} currentPlan={data?.currentPlan} />
     <AvailableCredit areCreditsSupported={data.areCreditsSupported} />
 </Container>
 
diff --git a/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte b/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte
@@ -7,18 +7,20 @@
     import { Button, Form } from '$lib/elements/forms';
     import { symmetricDifference } from '$lib/helpers/array';
     import { addNotification } from '$lib/stores/notifications';
-    import { currentPlan, organization } from '$lib/stores/organization';
+    import { type Organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
-    import { onMount } from 'svelte';
     import { Alert, Icon, Table } from '@appwrite.io/pink-svelte';
     import { IconTrash } from '@appwrite.io/pink-icons-svelte';
     import InputSelect from '$lib/elements/forms/inputSelect.svelte';
+    import type { Plan } from '$lib/sdk/billing';
 
+    export let organization: Organization;
+    export let currentPlan: Plan;
     export let alertsEnabled = false;
 
     let search: string;
     let selectedAlert: number;
-    let alerts: number[] = [];
+    let alerts: number[] = organization?.budgetAlerts ?? [];
 
     $: options = [
         { value: 25, label: '25%', disabled: false },
@@ -33,10 +35,6 @@
         };
     });
 
-    onMount(() => {
-        alerts = $organization?.budgetAlerts ?? [];
-    });
-
     function addAlert() {
         if (alerts.some((alert) => alert === selectedAlert)) {
             return;
@@ -50,8 +48,8 @@
     async function updateBudget() {
         try {
             await sdk.forConsole.billing.updateBudget(
-                $organization.$id,
-                $organization.billingBudget,
+                organization.$id,
+                organization.billingBudget,
                 alerts
             );
 
@@ -60,7 +58,7 @@
             addNotification({
                 type: 'success',
                 isHtml: true,
-                message: `<span> ${alerts.length === 0 ? 'Budget alerts removed from' : alerts.length > 1 ? `Budget alerts added to` : 'A budget alert has been added to'} <b>${$organization.name}</b> </span>`
+                message: `<span> ${alerts.length === 0 ? 'Budget alerts removed from' : alerts.length > 1 ? `Budget alerts added to` : 'A budget alert has been added to'} <b>${organization.name}</b> </span>`
             });
             trackEvent(Submit.BudgetAlertsUpdate, {
                 alerts
@@ -75,26 +73,26 @@
     }
 
     $: isButtonDisabled =
-        symmetricDifference(alerts, $organization.budgetAlerts).length === 0 || !alertsEnabled;
+        symmetricDifference(alerts, organization.budgetAlerts).length === 0 || !alertsEnabled;
 </script>
 
 <CardGrid>
     <svelte:fragment slot="title">Billing alerts</svelte:fragment>
-    {#if !$currentPlan.budgeting}
+    {#if !currentPlan.budgeting}
         Get notified by email when your organization meets a percentage of your budget cap. <b
-            >{tierToPlan($organization.billingPlan).name} organizations will receive one notification
+            >{tierToPlan(organization.billingPlan).name} organizations will receive one notification
             at 75% resource usage.</b>
     {:else}
         Get notified by email when your organization meets or exceeds a percentage of your specified
         billing alert(s).
     {/if}
     <svelte:fragment slot="aside">
-        {#if !$currentPlan.budgeting}
+        {#if !currentPlan.budgeting}
             <Alert.Inline status="info" title="Billing alerts are a Pro plan feature">
                 Upgrade to a Pro plan to manage when you receive billing alerts for your
                 organization.
             </Alert.Inline>
-        {:else if !$currentPlan.budgetCapEnabled}
+        {:else if !currentPlan.budgetCapEnabled}
             <Alert.Inline status="info" title="Budget cap disabled">
                 Budget caps are not supported on your current plan. For more information, please
                 reach out to your customer success manager.
@@ -150,7 +148,7 @@
 
     <svelte:fragment slot="actions">
         <Form onSubmit={updateBudget}>
-            {#if $organization?.billingPlan === BillingPlan.FREE || $organization?.billingPlan === BillingPlan.GITHUB_EDUCATION}
+            {#if organization?.billingPlan === BillingPlan.FREE || organization?.billingPlan === BillingPlan.GITHUB_EDUCATION}
                 <Button
                     secondary
                     href={$upgradeURL}
diff --git a/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte b/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
@@ -6,31 +6,28 @@
     import { Button, Form, InputNumber, InputSwitch } from '$lib/elements/forms';
     import { showUsageRatesModal, upgradeURL } from '$lib/stores/billing';
     import { addNotification } from '$lib/stores/notifications';
-    import { organization, currentPlan } from '$lib/stores/organization';
+    import { type Organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
     import { Alert, Link } from '@appwrite.io/pink-svelte';
-    import { onMount } from 'svelte';
     import BudgetAlert from './budgetAlert.svelte';
+    import type { Plan } from '$lib/sdk/billing';
 
-    let capActive = false;
-    let budget: number;
-
-    onMount(() => {
-        budget = $organization?.billingBudget;
-        capActive = $organization?.billingBudget !== null;
-    });
+    export let currentPlan: Plan;
+    export let organization: Organization;
+    let capActive = organization?.billingBudget !== null;
+    let budget = organization.billingBudget;
 
     async function updateBudget() {
         try {
             await sdk.forConsole.billing.updateBudget(
-                $organization.$id,
+                organization.$id,
                 budget,
-                $organization.budgetAlerts
+                organization.budgetAlerts
             );
             await invalidate(Dependencies.ORGANIZATION);
             addNotification({
                 type: 'success',
-                message: `Budget cap enabled for ${$organization.name}`
+                message: `Budget cap enabled for ${organization.name}`
             });
             trackEvent(Submit.BudgetCapUpdate, {
                 budget: capActive ? budget : undefined
@@ -55,7 +52,7 @@
         Restrict your resource usage by setting a budget cap. Cap usage is reset at the beginning of
         each billing cycle.
         <svelte:fragment slot="aside">
-            {#if !$currentPlan.budgeting}
+            {#if !currentPlan.budgeting}
                 <Alert.Inline status="info" title="Budget caps are a Pro plan feature">
                     Upgrade to a Pro plan to set a budget cap for your organization. For more
                     information on what you can do with a Pro plan,
@@ -64,7 +61,7 @@
                         target="_blank"
                         rel="noopener noreferrer">view our pricing guide.</Link.Anchor>
                 </Alert.Inline>
-            {:else if !$currentPlan.budgetCapEnabled}
+            {:else if !currentPlan.budgetCapEnabled}
                 <Alert.Inline status="info" title="Budget cap disabled">
                     Budget caps are not supported on your current plan. For more information, please
                     reach out to your customer success manager.
@@ -92,7 +89,7 @@
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
-            {#if $organization?.billingPlan === BillingPlan.FREE}
+            {#if organization?.billingPlan === BillingPlan.FREE}
                 <Button
                     secondary
                     href={$upgradeURL}
@@ -105,10 +102,10 @@
                     >Upgrade to Pro
                 </Button>
             {:else}
-                <Button disabled={$organization?.billingBudget === budget} submit>Update</Button>
+                <Button disabled={organization?.billingBudget === budget} submit>Update</Button>
             {/if}
         </svelte:fragment>
     </CardGrid>
 </Form>
 
-<BudgetAlert alertsEnabled={capActive && budget > 0} />
+<BudgetAlert {organization} {currentPlan} alertsEnabled={capActive && budget > 0} />
