Merge pull request #2037 from appwrite/fix-payment-tables

Update table column types and adjust payment layouts

Author: TorstenDittmann

package.json

@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ee1b778",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@973fff2",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",

pnpm-lock.yaml

@@ -16,9 +16,11 @@
                     </Typography.Text>
                 {/if}
             </Layout.Stack>
-            <Layout.Stack {gap}>
-                <slot name="aside" />
-            </Layout.Stack>
+            <div style:overflow="hidden">
+                <Layout.Stack {gap}>
+                    <slot name="aside" />
+                </Layout.Stack>
+            </div>
         </Layout.GridFraction>
         {#if $$slots.actions && !hideFooter}
             <span

src/lib/components/cardGrid.svelte

@@ -60,7 +60,8 @@ export type TableRootProp = {
     selectedAll: boolean;
     selectedNone: boolean;
     selectedSome: boolean;
-    columns: Record<PinkColumn['id'], PinkColumn>;
+    columns: Array<PinkColumn> | number;
+    columnsMap: Record<PinkColumn['id'], PinkColumn>;
     toggle: (id: string) => void;
     toggleAll: () => void;
     addAvailableId: (id: string) => void;

src/lib/helpers/types.ts

@@ -7,7 +7,6 @@
     import type { Invoice, InvoiceList } from '$lib/sdk/billing';
     import { getApiEndpoint, sdk } from '$lib/stores/sdk';
     import { Query } from '@appwrite.io/console';
-    import { onMount } from 'svelte';
     import { trackEvent } from '$lib/actions/analytics';
     import { selectedInvoice, showRetryModal } from './store';
     import {
@@ -28,39 +27,42 @@
         IconRefresh
     } from '@appwrite.io/pink-icons-svelte';
 
-    let offset = 0;
-    let invoiceList: InvoiceList = {
+    let offset = $state(0);
+    let invoiceList: InvoiceList = $state({
         invoices: [],
         total: 0
-    };
+    });
 
     const limit = 5;
     const endpoint = getApiEndpoint();
 
-    onMount(request);
-
     async function request() {
-        // isLoadingInvoices = true;
         invoiceList = await sdk.forConsole.billing.listInvoices(page.params.organization, [
             Query.limit(limit),
             Query.offset(offset),
             Query.orderDesc('$createdAt')
         ]);
     }
 
-    $: if (page.url.searchParams.get('type') === 'validate-invoice') {
-        window.history.replaceState({}, '', page.url.pathname);
-        request();
-    }
-
     function retryPayment(invoice: Invoice) {
         $selectedInvoice = invoice;
         $showRetryModal = true;
     }
 
-    $: if (offset !== null) {
-        request();
-    }
+    const hasPaymentError = $derived(invoiceList?.invoices.some((invoice) => invoice?.lastError));
+
+    $effect(() => {
+        if (page.url.searchParams.get('type') === 'validate-invoice') {
+            window.history.replaceState({}, '', page.url.pathname);
+            request();
+        }
+    });
+
+    $effect(() => {
+        if (offset !== null) {
+            request();
+        }
+    });
 </script>
 
 <CardGrid>
@@ -71,8 +73,8 @@
             <Table.Root
                 let:root
                 columns={[
-                    { id: 'dueDate' },
-                    { id: 'status', width: { min: 200 } },
+                    { id: 'dueDate', width: { min: 120 } },
+                    { id: 'status', width: { min: hasPaymentError ? 200 : 100 } },
                     { id: 'amount', width: { min: 120 } },
                     { id: 'action', width: 40 }
                 ]}>
@@ -162,10 +164,10 @@
                 {/each}
             </Table.Root>
             {#if invoiceList.total > limit}
-                <div class="u-flex u-main-space-between">
+                <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
                     <p class="text">Total results: {invoiceList.total}</p>
                     <PaginationInline {limit} bind:offset total={invoiceList.total} hidePages />
-                </div>
+                </Layout.Stack>
             {/if}
         {:else}
             <Card.Base>

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

@@ -115,16 +115,16 @@
             <Table.Root
                 let:root
                 columns={[
-                    { id: 'cc', width: 140 },
+                    { id: 'cc', width: { min: 155 } },
                     { id: 'name', width: { min: 140 } },
-                    { id: 'expiry', width: 100 },
-                    { id: 'status', width: 110, hide: !hasPaymentError },
+                    { id: 'expiry', width: { min: 75 } },
+                    { id: 'status', width: { min: 110 }, hide: !hasPaymentError },
                     { id: 'actions', width: 40 }
                 ]}>
                 <svelte:fragment slot="header" let:root>
                     <Table.Header.Cell column="cc" {root}>Credit card</Table.Header.Cell>
                     <Table.Header.Cell column="name" {root}>Name</Table.Header.Cell>
-                    <Table.Header.Cell column="expiry" {root}>Expiration date</Table.Header.Cell>
+                    <Table.Header.Cell column="expiry" {root}>Expiration</Table.Header.Cell>
                     <Table.Header.Cell column="status" {root} />
                     <Table.Header.Cell column="actions" {root} />
                 </svelte:fragment>