update: address comments.

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

@@ -38,7 +38,7 @@
     onMount(async () => {
         if (page.url.searchParams.has('type')) {
             if (page.url.searchParams.get('type') === 'upgrade') {
-                goto($upgradeURL);
+                await goto($upgradeURL);
             }
 
             if (
@@ -139,34 +139,34 @@
     {/if}
     {#if $useNewPricingModal}
         <PlanSummary
-            availableCredit={data?.availableCredit}
-            currentPlan={data?.currentPlan}
-            nextPlan={data?.nextPlan}
-            currentAggregation={data?.billingAggregation}
-            limit={data?.limit}
-            offset={data?.offset} />
+            availableCredit={data.availableCredit}
+            currentPlan={data.currentPlan}
+            nextPlan={data.nextPlan}
+            currentAggregation={data.billingAggregation}
+            limit={data.limit}
+            offset={data.offset} />
     {:else}
         <PlanSummaryOld
-            availableCredit={data?.availableCredit}
-            currentPlan={data?.currentPlan}
-            currentAggregation={data?.billingAggregation}
-            currentInvoice={data?.billingInvoice} />
+            availableCredit={data.availableCredit}
+            currentPlan={data.currentPlan}
+            currentAggregation={data.billingAggregation}
+            currentInvoice={data.billingInvoice} />
     {/if}
     <PaymentHistory />
 
     <PaymentMethods
-        methods={data?.paymentMethods}
-        organization={data?.organization}
+        organization={data.organization}
+        paymentMethods={data.paymentMethods}
         backupMethod={data.backupPaymentMethod}
         primaryMethod={data.primaryPaymentMethod} />
 
     <BillingAddress
-        organization={data?.organization}
-        billingAddress={data?.billingAddress}
-        locale={data?.locale}
-        countryList={data?.countryList} />
+        locale={data.locale}
+        countryList={data.countryList}
+        organization={data.organization}
+        billingAddress={data.billingAddress} />
     <TaxId />
-    <BudgetCap organization={data?.organization} currentPlan={data?.currentPlan} />
+    <BudgetCap organization={data.organization} currentPlan={data.currentPlan} />
     <AvailableCredit areCreditsSupported={data.areCreditsSupported} />
 </Container>
 

src/routes/(console)/organization-[organization]/billing/+page.ts

@@ -13,7 +13,7 @@ export const load: PageLoad = async ({ parent, depends, url, route }) => {
 
     if (!scopes.includes('billing.read')) {
         return redirect(
-            301,
+            302,
             resolve('/(console)/organization-[organization]', {
                 organization: organization.$id
             })

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

@@ -33,16 +33,32 @@
     } from '@appwrite.io/pink-icons-svelte';
     import type { Models } from '@appwrite.io/console';
 
-    export let organization: Models.Organization;
-    export let methods: Models.PaymentMethodList;
-    export let backupMethod: Models.PaymentMethod;
-    export let primaryMethod: Models.PaymentMethod;
+    let {
+        organization,
+        paymentMethods,
+        backupMethod,
+        primaryMethod
+    }: {
+        organization: Models.Organization;
+        paymentMethods: Models.PaymentMethodList;
+        backupMethod?: Models.PaymentMethod;
+        primaryMethod?: Models.PaymentMethod;
+    } = $props();
 
-    let showEdit = false;
-    let showDelete = false;
-    let showPayment = false;
-    let showReplace = false;
-    let isSelectedBackup = false;
+    let showEdit = $state(false);
+    let showDelete = $state(false);
+    let showPayment = $state(false);
+    let showReplace = $state(false);
+    let isSelectedBackup = $state(false);
+
+    const hasPaymentError = $derived.by(() => {
+        return (
+            primaryMethod?.lastError ||
+            primaryMethod?.expired ||
+            backupMethod?.lastError ||
+            backupMethod?.expired
+        );
+    });
 
     async function addPaymentMethod(paymentMethodId: string) {
         try {
@@ -85,15 +101,11 @@
         }
     }
 
-    $: if (!showReplace) {
-        isSelectedBackup = false;
-    }
-
-    $: hasPaymentError =
-        primaryMethod?.lastError ||
-        primaryMethod?.expired ||
-        backupMethod?.lastError ||
-        backupMethod?.expired;
+    $effect(() => {
+        if (!showReplace) {
+            isSelectedBackup = false;
+        }
+    });
 </script>
 
 <CardGrid overflow={false}>
@@ -198,7 +210,7 @@
                 {/if}
             </Table.Root>
             {#if !organization?.backupPaymentMethodId}
-                {@const filteredPaymentMethods = methods.paymentMethods.filter(
+                {@const filteredPaymentMethods = paymentMethods.paymentMethods.filter(
                     (o) => !!o.last4 && o.$id !== organization?.paymentMethodId
                 )}
                 <div>
@@ -226,7 +238,7 @@
                             </Tooltip>
                         </Layout.Stack>
                         <ActionMenu.Root slot="tooltip" let:toggle>
-                            {#if methods.total}
+                            {#if paymentMethods.total}
                                 {#each filteredPaymentMethods as paymentMethod}
                                     <ActionMenu.Item.Button
                                         on:click={() => addBackupPaymentMethod(paymentMethod?.$id)}>
@@ -252,7 +264,7 @@
                 </div>
             {/if}
         {:else}
-            {@const filteredPaymentMethods = methods.paymentMethods.filter(
+            {@const filteredPaymentMethods = paymentMethods.paymentMethods.filter(
                 (o) => !!o.last4 && o.$id !== organization?.backupPaymentMethodId
             )}
             <Card.Base>
@@ -262,7 +274,7 @@
                             <Icon icon={IconPlus} size="s" />
                         </Button>
                         <ActionMenu.Root slot="tooltip" let:toggle>
-                            {#if methods.total}
+                            {#if paymentMethods.total}
                                 {#each filteredPaymentMethods as paymentMethod}
                                     <ActionMenu.Item.Button
                                         on:click={() => addPaymentMethod(paymentMethod?.$id)}>
@@ -309,12 +321,17 @@
         selectedPaymentMethod={isSelectedBackup ? backupMethod : primaryMethod} />
 {/if}
 {#if isCloud && hasStripePublicKey}
-    <ReplaceCard {organization} {methods} bind:show={showReplace} isBackup={isSelectedBackup} />
+    <ReplaceCard
+        {organization}
+        methods={paymentMethods}
+        bind:show={showReplace}
+        isBackup={isSelectedBackup} />
 {/if}
 {#if showDelete && isCloud && hasStripePublicKey}
     {@const hasOtherMethod = isSelectedBackup
         ? !!organization?.paymentMethodId
         : !!organization?.backupPaymentMethodId}
+
     <DeleteOrgPayment
         bind:showDelete
         {hasOtherMethod}