fix: display paymentmethods

src/routes/console/organization-[organization]/+layout.ts

@@ -15,7 +15,6 @@ export const load: LayoutLoad = async ({ params, parent, depends }) => {
             header: Header,
             breadcrumbs: Breadcrumbs,
             organization: await sdkForConsole.teams.get(params.organization),
-            paymentMethods: await sdkForConsole.billing.listPaymentMethods(params.organization),
             members: await sdkForConsole.teams.listMemberships(params.organization)
         };
     } catch (e) {

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

@@ -0,0 +1,12 @@
+import { Dependencies } from '$lib/constants';
+import { sdkForConsole } from '$lib/stores/sdk';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent, depends }) => {
+    await parent();
+    depends(Dependencies.PAYMENT_METHODS);
+
+    return {
+        paymentMethods: await sdkForConsole.billing.listPaymentMethods(params.organization)
+    };
+};

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

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { CardGrid, Empty, Heading } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
     import { paymentMethods } from './store';
     export let showPayment = false;
 </script>
@@ -9,7 +10,7 @@
 
     <p class="text">View or update your organization payment methods here.</p>
     <svelte:fragment slot="aside">
-        {#if $paymentMethods.length > 0}
+        {#if $paymentMethods.total > 0}
             {#each $paymentMethods.paymentMethods as paymentMethod}
                 <p>
                     {paymentMethod.brand}
@@ -17,6 +18,10 @@
                     {#if paymentMethod.default} <span class="icon-check-circle" /> {/if}
                 </p>
             {/each}
+            <Button text noMargin on:click={() => (showPayment = true)}>
+                <span class="icon-plus" />
+                <span class="text">Add a payment method</span>
+            </Button>
         {:else}
             <Empty on:click={() => (showPayment = true)}>
                 <p class="text">Add a payment method</p>