From 3d403bafd1684dad330adeff64df75645967ab5c Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 19 Jul 2023 21:08:08 +0200
Subject: [PATCH] feat: small fixes to billing page, and some types

---
 src/lib/sdk/billing.ts                        | 71 ++++++++++++++-----
 .../billing/availableCredit.svelte            | 41 ++++++++---
 .../billing/paymentHistory.svelte             |  2 +-
 3 files changed, 84 insertions(+), 30 deletions(-)

diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts
index 89f195301..a7861041c 100644
--- a/src/lib/sdk/billing.ts
+++ b/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,
diff --git a/src/routes/console/organization-[organization]/billing/availableCredit.svelte b/src/routes/console/organization-[organization]/billing/availableCredit.svelte
index 1fc45c30a..2c2581dea 100644
--- a/src/routes/console/organization-[organization]/billing/availableCredit.svelte
+++ b/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>
diff --git a/src/routes/console/organization-[organization]/billing/paymentHistory.svelte b/src/routes/console/organization-[organization]/billing/paymentHistory.svelte
index ba4e992a4..d0937c962 100644
--- a/src/routes/console/organization-[organization]/billing/paymentHistory.svelte
+++ b/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>