From e1ccdb7352fc1e3327a0c84f4cf56d1928edd5fa Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 22 Apr 2024 18:05:42 +0200
Subject: [PATCH] feat: add missing usage

---
 .../billing/planSummary.svelte                | 107 +++++++++++-------
 1 file changed, 64 insertions(+), 43 deletions(-)

diff --git a/src/routes/console/organization-[organization]/billing/planSummary.svelte b/src/routes/console/organization-[organization]/billing/planSummary.svelte
index 6e042b417..85573478b 100644
--- a/src/routes/console/organization-[organization]/billing/planSummary.svelte
+++ b/src/routes/console/organization-[organization]/billing/planSummary.svelte
@@ -28,6 +28,7 @@
 
     let currentInvoice: Invoice;
     let showAddons = false;
+    let extraMembers = 0;
     const today = new Date();
     onMount(async () => {
         const invoices = await sdk.forConsole.billing.listInvoices($organization.$id, [
@@ -35,7 +36,8 @@
             Query.orderDesc('$createdAt')
         ]);
         currentInvoice = invoices.invoices[0];
-        console.log(currentInvoice);
+        const members = await sdk.forConsole.teams.listMemberships($organization.$id, []);
+        extraMembers = members.total > 1 ? members.total - 1 : 0;
     });
 
     $: currentPlan = $plansInfo?.get($organization?.billingPlan);
@@ -74,7 +76,10 @@
                     on:click={() => (showAddons = !showAddons)}
                     on:keyup={clickOnEnter}>
                     <TableCell>
-                        Add-ons <span class="inline-tag">number</span>
+                        Add-ons <span class="inline-tag"
+                            >{extraMembers
+                                ? currentInvoice?.usage?.length + 1
+                                : currentInvoice?.usage?.length}</span>
                         <span class="icon-cheveron-down"></span>
                     </TableCell>
                     <TableCellText style="text-align: right;">
@@ -83,56 +88,72 @@
                 </li>
                 <!-- {#if currentInvoice?.usage?.length && $organization?.billingPlan !== BillingPlan.STARTER && !isTrial && showAddons} -->
                 {#if extraUsage && showAddons && $organization?.billingPlan !== BillingPlan.STARTER && !isTrial}
-                    {@const extraMembers = currentInvoice.usage.find((u) => u.name === 'members')}
                     <li class="table-row">
                         <td class="table-col" width="100%" colspan="2">
                             <Box>
                                 <TableList>
                                     {#if extraMembers}
                                         <li class="table-row">
-                                            <span>{extraMembers}</span>
+                                            <TableCell>
+                                                <div class="u-flex u-flex-vertical">
+                                                    <span>Additional members</span>
+                                                    <span>
+                                                        {extraMembers}
+                                                    </span>
+                                                </div>
+                                            </TableCell>
+                                            <TableCellText style="text-align: right;">
+                                                <!-- TODO: fetch the price from the backend -->
+                                                {formatCurrency(extraMembers * 15)}
+                                            </TableCellText>
                                         </li>
                                     {/if}
-                                    <li class="table-row">
-                                        <span>asde</span>
-                                    </li>
+                                    {#if currentInvoice?.usage}
+                                        {#each currentInvoice.usage as excess}
+                                            <li class="table-row">
+                                                {#if ['storage', 'bandwidth'].includes(excess.name)}
+                                                    {@const excessValue = humanFileSize(
+                                                        excess.value
+                                                    )}
+                                                    <TableCell>
+                                                        <div class="u-flex u-flex-vertical">
+                                                            <p>{excess.name}</p>
+                                                            <span
+                                                                title={formatNumberWithCommas(
+                                                                    excess.value ?? 0
+                                                                ) + 'bytes'}>
+                                                                {excessValue.value ??
+                                                                    0}{excessValue.unit}
+                                                            </span>
+                                                        </div>
+                                                    </TableCell>
+                                                    <TableCellText style="text-align: right;">
+                                                        {formatCurrency(excess.amount)}
+                                                    </TableCellText>
+                                                {/if}
+                                                {#if ['users', 'executions'].includes(excess.name)}
+                                                    <TableCell>
+                                                        <div class="u-flex u-flex-vertical">
+                                                            <p>
+                                                                {excess.name}
+                                                            </p>
+                                                            <span
+                                                                title={formatNumberWithCommas(
+                                                                    excess.value
+                                                                )}
+                                                                >{abbreviateNumber(
+                                                                    excess.value
+                                                                )}</span>
+                                                        </div>
+                                                    </TableCell>
+                                                    <TableCellText style="text-align: right;">
+                                                        {formatCurrency(excess.amount)}
+                                                    </TableCellText>
+                                                {/if}
+                                            </li>
+                                        {/each}
+                                    {/if}
                                 </TableList>
-                                {#if currentInvoice?.usage}
-                                    {#each currentInvoice.usage as excess}
-                                        {#if ['storage', 'bandwidth'].includes(excess.name)}
-                                            {@const excessValue = humanFileSize(excess.value)}
-                                            <li
-                                                class="u-flex u-main-space-between u-margin-block-start-8">
-                                                <p class="text u-color-text-gray">
-                                                    <span
-                                                        title={formatNumberWithCommas(
-                                                            excess.value ?? 0
-                                                        ) + 'bytes'}>
-                                                        {excessValue.value ?? 0}{excessValue.unit}
-                                                    </span>
-                                                    {excess.name}
-                                                </p>
-                                                <p class="text">
-                                                    {formatCurrency(excess.amount)}
-                                                </p>
-                                            </li>
-                                        {/if}
-                                        {#if ['users', 'executions'].includes(excess.name)}
-                                            <li
-                                                class="u-flex u-main-space-between u-margin-block-start-8">
-                                                <p class="text u-color-text-gray">
-                                                    <span
-                                                        title={formatNumberWithCommas(excess.value)}
-                                                        >{abbreviateNumber(excess.value)}</span>
-                                                    {excess.name}
-                                                </p>
-                                                <p class="text">
-                                                    {formatCurrency(excess.amount)}
-                                                </p>
-                                            </li>
-                                        {/if}
-                                    {/each}
-                                {/if}
                             </Box>
                         </td>
                     </li>