From def469344edb5605b21877a273f170a526d837f6 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 16 Jul 2024 11:49:05 +0200
Subject: [PATCH 1/4] feat: available credit total

---
 src/lib/sdk/billing.ts                                 |  1 +
 .../billing/availableCredit.svelte                     | 10 +++++-----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts
index bca6cbb0a..1bf7dbe47 100644
--- a/src/lib/sdk/billing.ts
+++ b/src/lib/sdk/billing.ts
@@ -111,6 +111,7 @@ export type Credit = {
 };
 
 export type CreditList = {
+    available: number;
     credits: Credit[];
     total: number;
 };
diff --git a/src/routes/console/organization-[organization]/billing/availableCredit.svelte b/src/routes/console/organization-[organization]/billing/availableCredit.svelte
index 1d3d54700..be6365940 100644
--- a/src/routes/console/organization-[organization]/billing/availableCredit.svelte
+++ b/src/routes/console/organization-[organization]/billing/availableCredit.svelte
@@ -9,7 +9,7 @@
         TableRow
     } 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,15 +57,14 @@
         request();
     }
 
-    $: balance =
-        creditList?.credits?.reduce((acc: number, curr: Credit) => acc + curr.credits, 0) ?? 0;
-
     $: {
         if (reloadOnWizardClose && !$wizard.show) {
             request();
             reloadOnWizardClose = false;
         }
     }
+
+    $: console.log(creditList);
 </script>
 
 <CardGrid hideFooter={$organization?.billingPlan !== BillingPlan.FREE}>
@@ -87,7 +87,7 @@
             <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>
+                    <span class="inline-tag">{formatCurrency(creditList.available)}</span>
                 </div>
                 {#if creditList?.total}
                     <Button secondary on:click={handleCredits}>

From bee08bb07539922f9674ed89ed53dba4f15b4ed5 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 17 Jul 2024 14:45:16 +0200
Subject: [PATCH 2/4] feat: new table rows

---
 .../billing/availableCredit.svelte            | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/routes/console/organization-[organization]/billing/availableCredit.svelte b/src/routes/console/organization-[organization]/billing/availableCredit.svelte
index be6365940..7bd8a82de 100644
--- a/src/routes/console/organization-[organization]/billing/availableCredit.svelte
+++ b/src/routes/console/organization-[organization]/billing/availableCredit.svelte
@@ -1,12 +1,12 @@
 <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 { CreditList } from '$lib/sdk/billing';
@@ -86,7 +86,7 @@
         {: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>
+                    <h4 class="body-text-1 u-bold">Balance</h4>
                     <span class="inline-tag">{formatCurrency(creditList.available)}</span>
                 </div>
                 {#if creditList?.total}
@@ -97,30 +97,38 @@
                 {/if}
             </div>
             {#if creditList?.total}
-                <Table noStyles noMargin>
+                <TableScroll noStyles noMargin class="u-margin-block-start-16">
                     <TableHeader>
+                        <TableCellHead>Code</TableCellHead>
+                        <TableCellHead>Remaining</TableCellHead>
+                        <TableCellHead>Amount</TableCellHead>
                         <TableCellHead>Date Added</TableCellHead>
                         <TableCellHead>Expiry Date</TableCellHead>
-                        <TableCellHead>Amount</TableCellHead>
                     </TableHeader>
                     <TableBody>
                         {#each creditList.credits as credit}
                             <TableRow>
+                                <TableCellText title="code">
+                                    {credit?.couponId ?? '-'}
+                                </TableCellText>
+                                <TableCellText title="remaining">
+                                    {formatCurrency(credit.credits)}
+                                </TableCellText>
+                                <TableCellText title="total">
+                                    {formatCurrency(credit.total)}
+                                </TableCellText>
                                 <TableCellText title="date added">
                                     {toLocaleDate(credit.$createdAt)}
                                 </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 coupons: {creditList?.total}</p>
                     <PaginationInline {limit} bind:offset sum={creditList?.total} hidePages />
                 </div>
             {:else}

From d39c2e268270cd3c510b460736505fa66f551932 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 17 Jul 2024 14:46:09 +0200
Subject: [PATCH 3/4] chore: remove console log

---
 .../organization-[organization]/billing/availableCredit.svelte  | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/routes/console/organization-[organization]/billing/availableCredit.svelte b/src/routes/console/organization-[organization]/billing/availableCredit.svelte
index 7bd8a82de..48f907152 100644
--- a/src/routes/console/organization-[organization]/billing/availableCredit.svelte
+++ b/src/routes/console/organization-[organization]/billing/availableCredit.svelte
@@ -63,8 +63,6 @@
             reloadOnWizardClose = false;
         }
     }
-
-    $: console.log(creditList);
 </script>
 
 <CardGrid hideFooter={$organization?.billingPlan !== BillingPlan.FREE}>

From 9cf196672d184d1a4773e314b854de09ce8d76f6 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 18 Jul 2024 14:01:01 +0200
Subject: [PATCH 4/4] fix: design review

---
 .../billing/availableCredit.svelte                 | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/routes/console/organization-[organization]/billing/availableCredit.svelte b/src/routes/console/organization-[organization]/billing/availableCredit.svelte
index 48f907152..dfd9cd916 100644
--- a/src/routes/console/organization-[organization]/billing/availableCredit.svelte
+++ b/src/routes/console/organization-[organization]/billing/availableCredit.svelte
@@ -98,10 +98,9 @@
                 <TableScroll noStyles noMargin class="u-margin-block-start-16">
                     <TableHeader>
                         <TableCellHead>Code</TableCellHead>
+                        <TableCellHead>Total</TableCellHead>
                         <TableCellHead>Remaining</TableCellHead>
-                        <TableCellHead>Amount</TableCellHead>
-                        <TableCellHead>Date Added</TableCellHead>
-                        <TableCellHead>Expiry Date</TableCellHead>
+                        <TableCellHead>Expires at</TableCellHead>
                     </TableHeader>
                     <TableBody>
                         {#each creditList.credits as credit}
@@ -109,14 +108,11 @@
                                 <TableCellText title="code">
                                     {credit?.couponId ?? '-'}
                                 </TableCellText>
-                                <TableCellText title="remaining">
-                                    {formatCurrency(credit.credits)}
-                                </TableCellText>
                                 <TableCellText title="total">
                                     {formatCurrency(credit.total)}
                                 </TableCellText>
-                                <TableCellText title="date added">
-                                    {toLocaleDate(credit.$createdAt)}
+                                <TableCellText title="remaining">
+                                    {formatCurrency(credit.credits)}
                                 </TableCellText>
                                 <TableCellText title="expiry date">
                                     {toLocaleDate(credit.expiration)}
@@ -126,7 +122,7 @@
                     </TableBody>
                 </TableScroll>
                 <div class="u-flex u-main-space-between">
-                    <p class="text">Total coupons: {creditList?.total}</p>
+                    <p class="text">Total credits: {creditList?.total}</p>
                     <PaginationInline {limit} bind:offset sum={creditList?.total} hidePages />
                 </div>
             {:else}