From 21294bbe7d3a8e584396fe52552deef6d76dd10a Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Fri, 5 Jul 2024 10:55:56 +0200
Subject: [PATCH] fix: invoice pagination

---
 .../billing/paymentHistory.svelte             | 178 +++++++++---------
 .../billing/planSummary.svelte                |   2 +-
 2 files changed, 88 insertions(+), 92 deletions(-)

diff --git a/src/routes/console/organization-[organization]/billing/paymentHistory.svelte b/src/routes/console/organization-[organization]/billing/paymentHistory.svelte
index 8339ac60b..08fa1d05c 100644
--- a/src/routes/console/organization-[organization]/billing/paymentHistory.svelte
+++ b/src/routes/console/organization-[organization]/billing/paymentHistory.svelte
@@ -29,6 +29,7 @@
     import { onMount } from 'svelte';
     import { trackEvent } from '$lib/actions/analytics';
     import { selectedInvoice, showRetryModal } from './store';
+    import { organization } from '$lib/stores/organization';
 
     let showDropdown = [];
     let showFailedError = false;
@@ -48,6 +49,7 @@
         invoiceList = await sdk.forConsole.billing.listInvoices($page.params.organization, [
             Query.limit(limit),
             Query.offset(offset),
+            Query.notEqual('from', $organization.billingCurrentInvoiceDate),
             Query.orderDesc('$createdAt')
         ]);
     }
@@ -70,7 +72,7 @@
         payments.
     </p>
     <svelte:fragment slot="aside">
-        {#if invoiceList.total - 1 > 0}
+        {#if invoiceList.total > 0}
             <TableScroll noMargin transparent noStyles>
                 <TableHeader>
                     <TableCellHead width={100}>Due Date</TableCellHead>
@@ -81,115 +83,109 @@
                 <TableBody>
                     {#each invoiceList?.invoices as invoice, i}
                         {@const status = invoice.status}
-                        {#if i !== 0}
-                            <TableRow>
-                                <TableCellText title="date">
-                                    {toLocaleDate(invoice.dueAt)}
-                                </TableCellText>
+                        <TableRow>
+                            <TableCellText title="date">
+                                {toLocaleDate(invoice.dueAt)}
+                            </TableCellText>
 
-                                <TableCell title="status">
-                                    {#if invoice?.lastError}
-                                        <DropList bind:show={showFailedError}>
-                                            <Pill
-                                                danger={status === 'overdue' ||
-                                                    status === 'failed' ||
-                                                    status === 'requires_authentication'}
-                                                success={status === 'paid' ||
-                                                    status === 'succeeded'}
-                                                warning={status === 'pending'}
-                                                on:click={() => (showFailedError = true)}
-                                                button>
-                                                {status === 'requires_authentication'
-                                                    ? 'failed'
-                                                    : status}
-                                            </Pill>
-                                            <svelte:fragment slot="list">
-                                                <li>
-                                                    The scheduled payment has failed. <Button
-                                                        link
-                                                        on:click={() => {
-                                                            retryPayment(invoice);
-                                                            showFailedError = false;
-                                                        }}>Try again</Button
-                                                    >.
-                                                </li>
-                                            </svelte:fragment>
-                                        </DropList>
-                                    {:else}
+                            <TableCell title="status">
+                                {#if invoice?.lastError}
+                                    <DropList bind:show={showFailedError}>
                                         <Pill
                                             danger={status === 'overdue' ||
                                                 status === 'failed' ||
                                                 status === 'requires_authentication'}
                                             success={status === 'paid' || status === 'succeeded'}
-                                            warning={status === 'pending'}>
+                                            warning={status === 'pending'}
+                                            on:click={() => (showFailedError = true)}
+                                            button>
                                             {status === 'requires_authentication'
                                                 ? 'failed'
                                                 : status}
                                         </Pill>
-                                    {/if}
-                                </TableCell>
-                                <TableCellText title="due">
-                                    {formatCurrency(invoice.amount)}
-                                </TableCellText>
-                                <TableCell showOverflow right>
-                                    <DropList
-                                        bind:show={showDropdown[i]}
-                                        placement="bottom-start"
-                                        noArrow>
-                                        <Button
-                                            round
-                                            text
-                                            noMargin
-                                            ariaLabel="More options"
-                                            on:click={() => {
-                                                showDropdown[i] = !showDropdown[i];
-                                            }}>
-                                            <span class="icon-dots-horizontal" aria-hidden="true" />
-                                        </Button>
                                         <svelte:fragment slot="list">
-                                            <DropListLink
-                                                icon="external-link"
-                                                external
-                                                href={`${endpoint}/organizations/${$page.params.organization}/invoices/${invoice.$id}/view`}
-                                                on:click={() =>
-                                                    (showDropdown[i] = !showDropdown[i])}
-                                                event="view_invoice">
-                                                View invoice
-                                            </DropListLink>
-                                            <DropListLink
-                                                icon="download"
-                                                href={`${endpoint}/organizations/${$page.params.organization}/invoices/${invoice.$id}/download`}
-                                                on:click={() => {
-                                                    showDropdown[i] = !showDropdown[i];
-                                                }}
-                                                event="download_invoice">
-                                                Download PDF
-                                            </DropListLink>
-                                            {#if status === 'overdue' || status === 'failed'}
-                                                <DropListItem
-                                                    icon="refresh"
+                                            <li>
+                                                The scheduled payment has failed. <Button
+                                                    link
                                                     on:click={() => {
                                                         retryPayment(invoice);
-                                                        showDropdown[i] = !showDropdown[i];
-                                                        trackEvent(`click_retry_payment`, {
-                                                            from: 'button',
-                                                            source: 'billing_invoice_menu'
-                                                        });
-                                                    }}>
-                                                    Retry payment
-                                                </DropListItem>
-                                            {/if}
+                                                        showFailedError = false;
+                                                    }}>Try again</Button
+                                                >.
+                                            </li>
                                         </svelte:fragment>
                                     </DropList>
-                                </TableCell>
-                            </TableRow>
-                        {/if}
+                                {:else}
+                                    <Pill
+                                        danger={status === 'overdue' ||
+                                            status === 'failed' ||
+                                            status === 'requires_authentication'}
+                                        success={status === 'paid' || status === 'succeeded'}
+                                        warning={status === 'pending'}>
+                                        {status === 'requires_authentication' ? 'failed' : status}
+                                    </Pill>
+                                {/if}
+                            </TableCell>
+                            <TableCellText title="due">
+                                {formatCurrency(invoice.amount)}
+                            </TableCellText>
+                            <TableCell showOverflow right>
+                                <DropList
+                                    bind:show={showDropdown[i]}
+                                    placement="bottom-start"
+                                    noArrow>
+                                    <Button
+                                        round
+                                        text
+                                        noMargin
+                                        ariaLabel="More options"
+                                        on:click={() => {
+                                            showDropdown[i] = !showDropdown[i];
+                                        }}>
+                                        <span class="icon-dots-horizontal" aria-hidden="true" />
+                                    </Button>
+                                    <svelte:fragment slot="list">
+                                        <DropListLink
+                                            icon="external-link"
+                                            external
+                                            href={`${endpoint}/organizations/${$page.params.organization}/invoices/${invoice.$id}/view`}
+                                            on:click={() => (showDropdown[i] = !showDropdown[i])}
+                                            event="view_invoice">
+                                            View invoice
+                                        </DropListLink>
+                                        <DropListLink
+                                            icon="download"
+                                            href={`${endpoint}/organizations/${$page.params.organization}/invoices/${invoice.$id}/download`}
+                                            on:click={() => {
+                                                showDropdown[i] = !showDropdown[i];
+                                            }}
+                                            event="download_invoice">
+                                            Download PDF
+                                        </DropListLink>
+                                        {#if status === 'overdue' || status === 'failed'}
+                                            <DropListItem
+                                                icon="refresh"
+                                                on:click={() => {
+                                                    retryPayment(invoice);
+                                                    showDropdown[i] = !showDropdown[i];
+                                                    trackEvent(`click_retry_payment`, {
+                                                        from: 'button',
+                                                        source: 'billing_invoice_menu'
+                                                    });
+                                                }}>
+                                                Retry payment
+                                            </DropListItem>
+                                        {/if}
+                                    </svelte:fragment>
+                                </DropList>
+                            </TableCell>
+                        </TableRow>
                     {/each}
                 </TableBody>
             </TableScroll>
             <div class="u-flex u-main-space-between">
-                <p class="text">Total results: {invoiceList?.total - 1 ?? 0}</p>
-                <PaginationInline {limit} bind:offset sum={invoiceList?.total - 1 ?? 0} hidePages />
+                <p class="text">Total results: {invoiceList?.total ?? 0}</p>
+                <PaginationInline {limit} bind:offset sum={invoiceList?.total ?? 0} hidePages />
             </div>
         {:else}
             <EmptySearch hidePagination>
diff --git a/src/routes/console/organization-[organization]/billing/planSummary.svelte b/src/routes/console/organization-[organization]/billing/planSummary.svelte
index e1641ac7a..81edb295e 100644
--- a/src/routes/console/organization-[organization]/billing/planSummary.svelte
+++ b/src/routes/console/organization-[organization]/billing/planSummary.svelte
@@ -21,7 +21,7 @@
     onMount(async () => {
         const invoices = await sdk.forConsole.billing.listInvoices($organization.$id, [
             Query.limit(1),
-            Query.orderDesc('$createdAt')
+            Query.equal('from', $organization.billingCurrentInvoiceDate)
         ]);
         currentInvoice = invoices.invoices[0];
         const members = await sdk.forConsole.teams.listMemberships($organization.$id, []);