feat: small fixes to billing page, and some types

src/lib/sdk/billing.ts

@@ -38,52 +38,93 @@ export type InvoiceList = {
 };
 
 export type Credit = {
-    $id: string;
     /**
      * Credit ID.
      */
-    $createdAt: string;
+    $id: string;
     /**
      * Credit creation time in ISO 8601 format.
      */
-    $updatedAt: string;
+    $createdAt: string;
     /**
      * Credit update date in ISO 8601 format.
      */
-    couponId: string;
+    $updatedAt: string;
     /**
      * coupon ID
      */
-    userId: string;
+    couponId: string;
     /**
      * ID of the User.
      */
-    teamId: string;
+    userId: string;
     /**
      * ID of the Team.
      */
-    credits: number;
+    teamId: string;
     /**
      * Provided credit amount
      */
-    creditsUsed: number;
+    credits: number;
     /**
      * Used up credit amount
      */
-    expiration: string;
+    creditsUsed: number;
     /**
      * Credit expiration time in ISO 8601 format.
      */
-    status: string;
+    expiration: string;
     /**
      * Status of the credit. Can be one of `disabled`, `active` or `expired`.
      */
+    status: string;
 };
 
 export type CreditList = {
     credits: Credit[];
     total: number;
 };
+
+export type Aggregation = {
+    $id: string;
+    /**
+     * Aggregation creation time in ISO 8601 format.
+     */
+    $createdAt: string;
+    /**
+     * Aggregation update date in ISO 8601 format.
+     */
+    $updatedAt: string;
+    /**
+     * Beginning date of the invoice.
+     */
+    from: string;
+    /**
+     * End date of the invoice.
+     */
+    to: string;
+    /**
+     * Total storage usage.
+     */
+    usageStorage: number;
+    /**
+     * Total active users for the billing period.
+     */
+    usageUsers: number;
+    /**
+     * Total number of executions for the billing period.
+     */
+    usageExecutions: number;
+    /**
+     * Total bandwidth usage for the billing period.
+     */
+    usageBandwidth: number;
+};
+
+export type AggregationList = {
+    aggregations: Aggregation[];
+    total: number;
+};
 export class Billing {
     client: Client;
 
@@ -278,10 +319,7 @@ export class Billing {
         );
     }
 
-    async listUsage(
-        organizationId: string,
-        queries: string[] = []
-    ): Promise<Record<string, unknown>> {
+    async listUsage(organizationId: string, queries: string[] = []): Promise<AggregationList> {
         const path = `/organizations/${organizationId}/aggregations`;
         const params = {
             organizationId,
@@ -298,10 +336,7 @@ export class Billing {
         );
     }
 
-    async getUsage(
-        organizationId: string,
-        aggregationId: string
-    ): Promise<Record<string, unknown>> {
+    async getUsage(organizationId: string, aggregationId: string): Promise<Aggregation> {
         const path = `/organizations/${organizationId}/aggregations/${aggregationId}`;
         const params = {
             organizationId,

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

@@ -1,9 +1,9 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid, Heading, PaginationInline } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, FormList, InputText } from '$lib/elements/forms';
+    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import {
         Table,
         TableBody,
@@ -17,9 +17,11 @@
     import { addNotification } from '$lib/stores/notifications';
     import { organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
+    import { Query } from '@appwrite.io/console';
     import { creditList } from './store';
 
     let coupon: string = null;
+    let offset = 0;
 
     async function redeem() {
         try {
@@ -42,6 +44,17 @@
         }
     }
 
+    async function request() {
+        $creditList = await sdk.forConsole.billing.listCredits($organization.$id, [
+            Query.limit(5),
+            Query.offset(offset)
+        ]);
+    }
+
+    $: if (offset !== null) {
+        request();
+    }
+
     $: balance = $creditList?.credits?.reduce((acc: number, curr: Credit) => acc + curr.credits, 0);
 </script>
 
@@ -56,15 +69,17 @@
         <h4 class="body-text-1 u-bold">
             Credit balance: <span class="u-color-text-success">${balance}</span>
         </h4>
-        <FormList>
-            <InputText
-                placeholder="Entert promo code"
-                id="code"
-                label="Promo code"
-                bind:value={coupon}>
-                <Button secondary on:click={redeem}>Redeem</Button>
-            </InputText>
-        </FormList>
+        <Form onSubmit={redeem} noMargin>
+            <FormList>
+                <InputText
+                    placeholder="Entert promo code"
+                    id="code"
+                    label="Promo code"
+                    bind:value={coupon}>
+                    <Button secondary submit>Redeem</Button>
+                </InputText>
+            </FormList>
+        </Form>
         {#if $creditList?.total}
             <Table noStyles noMargin>
                 <TableHeader>
@@ -88,6 +103,10 @@
                     {/each}
                 </TableBody>
             </Table>
+            <div class="u-flex u-main-space-between">
+                <p class="text">Total results: {$creditList?.total}</p>
+                <PaginationInline limit={5} bind:offset sum={$creditList?.total} hidePages />
+            </div>
         {/if}
     </svelte:fragment>
 </CardGrid>

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

@@ -107,7 +107,7 @@
                     {/each}
                 </TableBody>
             </Table>
-            <div class="u-flex u-margin-block-start-32 u-main-space-between">
+            <div class="u-flex u-main-space-between">
                 <p class="text">Total results: {$invoiceList?.total}</p>
                 <PaginationInline limit={5} bind:offset sum={$invoiceList?.total} hidePages />
             </div>