Merge pull request #1200 from appwrite/feat-available-credit-total

feat: available credit total

src/lib/sdk/billing.ts

@@ -111,6 +111,7 @@ export type Credit = {
 };
 
 export type CreditList = {
+    available: number;
     credits: Credit[];
     total: number;
 };

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

@@ -1,15 +1,15 @@
 <script lang="ts">
     import { Alert, CardGrid, Empty, Heading, PaginationInline } from '$lib/components';
     import {
-        Table,
         TableBody,
         TableCellHead,
         TableCellText,
         TableHeader,
-        TableRow
+        TableRow,
+        TableScroll
     } from '$lib/elements/table';
     import { toLocaleDate } from '$lib/helpers/date';
-    import type { Credit, CreditList } from '$lib/sdk/billing';
+    import type { CreditList } from '$lib/sdk/billing';
     import { organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
     import { wizard } from '$lib/stores/wizard';
@@ -25,6 +25,7 @@
 
     let offset = 0;
     let creditList: CreditList = {
+        available: 0,
         credits: [],
         total: 0
     };
@@ -56,9 +57,6 @@
         request();
     }
 
-    $: balance =
-        creditList?.credits?.reduce((acc: number, curr: Credit) => acc + curr.credits, 0) ?? 0;
-
     $: {
         if (reloadOnWizardClose && !$wizard.show) {
             request();
@@ -86,8 +84,8 @@
         {:else}
             <div class="u-flex u-cross-center u-main-space-between">
                 <div class="u-flex u-gap-8 u-cross-center">
-                    <h4 class="body-text-1 u-bold">Credit balance</h4>
-                    <span class="inline-tag">{formatCurrency(balance)}</span>
+                    <h4 class="body-text-1 u-bold">Balance</h4>
+                    <span class="inline-tag">{formatCurrency(creditList.available)}</span>
                 </div>
                 {#if creditList?.total}
                     <Button secondary on:click={handleCredits}>
@@ -97,30 +95,34 @@
                 {/if}
             </div>
             {#if creditList?.total}
-                <Table noStyles noMargin>
+                <TableScroll noStyles noMargin class="u-margin-block-start-16">
                     <TableHeader>
-                        <TableCellHead>Date Added</TableCellHead>
-                        <TableCellHead>Expiry Date</TableCellHead>
-                        <TableCellHead>Amount</TableCellHead>
+                        <TableCellHead>Code</TableCellHead>
+                        <TableCellHead>Total</TableCellHead>
+                        <TableCellHead>Remaining</TableCellHead>
+                        <TableCellHead>Expires at</TableCellHead>
                     </TableHeader>
                     <TableBody>
                         {#each creditList.credits as credit}
                             <TableRow>
-                                <TableCellText title="date added">
-                                    {toLocaleDate(credit.$createdAt)}
+                                <TableCellText title="code">
+                                    {credit?.couponId ?? '-'}
+                                </TableCellText>
+                                <TableCellText title="total">
+                                    {formatCurrency(credit.total)}
+                                </TableCellText>
+                                <TableCellText title="remaining">
+                                    {formatCurrency(credit.credits)}
                                 </TableCellText>
                                 <TableCellText title="expiry date">
                                     {toLocaleDate(credit.expiration)}
                                 </TableCellText>
-                                <TableCellText title="amount">
-                                    {formatCurrency(credit.total)}
-                                </TableCellText>
                             </TableRow>
                         {/each}
                     </TableBody>
-                </Table>
+                </TableScroll>
                 <div class="u-flex u-main-space-between">
-                    <p class="text">Total results: {creditList?.total}</p>
+                    <p class="text">Total credits: {creditList?.total}</p>
                     <PaginationInline {limit} bind:offset sum={creditList?.total} hidePages />
                 </div>
             {:else}