From 3814cab9a7e4ae072a40b402ae1765e5b8f99441 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 18 Apr 2024 15:58:16 +0200
Subject: [PATCH] feat: redesign plan summary card

---
 src/lib/elements/table/cell.svelte            |  3 +-
 src/lib/elements/table/cellText.svelte        | 18 ++++---
 .../billing/planSummary.svelte                | 47 ++++++++++++-------
 3 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/src/lib/elements/table/cell.svelte b/src/lib/elements/table/cell.svelte
index ba3f04ea5..a35998e69 100644
--- a/src/lib/elements/table/cell.svelte
+++ b/src/lib/elements/table/cell.svelte
@@ -18,6 +18,7 @@
     class:u-flex={right}
     class:u-main-end={right}
     data-title={title}
-    role="cell">
+    role="cell"
+    data-private>
     <slot />
 </div>
diff --git a/src/lib/elements/table/cellText.svelte b/src/lib/elements/table/cellText.svelte
index dd594b10e..9bcd2262b 100644
--- a/src/lib/elements/table/cellText.svelte
+++ b/src/lib/elements/table/cellText.svelte
@@ -1,18 +1,16 @@
 <script lang="ts">
     import { Trim } from '$lib/components';
-    export let title: string;
+    import Cell from './cell.svelte';
+    export let title = '';
     export let showOverflow = false;
     export let onlyDesktop = false;
     export let width: number = null;
+    export let right = false;
+    let className = '';
+    export { className as class };
+    export let style = '';
 </script>
 
-<div
-    class="table-col"
-    style:--p-col-width={width?.toString()}
-    class:is-only-desktop={onlyDesktop}
-    class:u-overflow-visible={showOverflow}
-    data-title={title}
-    role="cell"
-    data-private>
+<Cell {title} {showOverflow} {onlyDesktop} {width} {right} class={className} {style}>
     <Trim><slot /></Trim>
-</div>
+</Cell>
diff --git a/src/routes/console/organization-[organization]/billing/planSummary.svelte b/src/routes/console/organization-[organization]/billing/planSummary.svelte
index 2adc242a9..20126a9a2 100644
--- a/src/routes/console/organization-[organization]/billing/planSummary.svelte
+++ b/src/routes/console/organization-[organization]/billing/planSummary.svelte
@@ -16,6 +16,7 @@
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
     import { BillingPlan } from '$lib/constants';
     import { trackEvent } from '$lib/actions/analytics';
+    import { Table, TableCell, TableCellText, TableRow, TableRowButton } from '$lib/elements/table';
 
     let currentInvoice: Invoice;
     const today = new Date();
@@ -34,19 +35,39 @@
 
 {#if $organization}
     <CardGrid>
-        <Heading tag="h2" size="6">Overview</Heading>
+        <Heading tag="h2" size="6">Payment estimates</Heading>
 
         <p class="text">
-            A summary of the current plan. For more information on Appwrite plans, <a
-                type="button"
-                class="link"
-                href="https://appwrite.io/pricing"
-                target="_blank"
-                rel="noopener noreferrer">
-                view our pricing page.
-            </a>
+            A breakdown of your estimated upcoming payment for the current billing period. Totals
+            displayed exclude accumulated credits.
         </p>
         <svelte:fragment slot="aside">
+            <p class="text u-bold">
+                Billing period: {toLocaleDate($organization?.billingCurrentInvoiceDate)} - {toLocaleDate(
+                    $organization?.billingNextInvoiceDate
+                )}
+            </p>
+            <Table noMargin noStyles>
+                <TableRow>
+                    <TableCell>{tierToPlan($organization?.billingPlan)?.name} plan</TableCell>
+                    <TableCell style="text-align: right;">
+                        {isTrial
+                            ? formatCurrency(0)
+                            : formatCurrency(currentPlan?.price)}</TableCell>
+                </TableRow>
+                <TableRowButton>
+                    <TableCell>Add-ons <span class="inline-tag">number</span></TableCell>
+                    <TableCell style="text-align: right;">
+                        {formatCurrency(currentInvoice?.amount ?? 0)}
+                    </TableCell>
+                </TableRowButton>
+                <TableRow>
+                    <TableCell>Current total (USD)</TableCell>
+                    <TableCellText style="text-align: right;">
+                        {formatCurrency(currentInvoice?.amount ?? 0)}
+                    </TableCellText>
+                </TableRow>
+            </Table>
             <Box class="u-flex-vertical u-gap-8">
                 <div class="u-flex u-main-space-between u-cross-center">
                     <div class="u-flex u-gap-8 u-cross-center">
@@ -122,14 +143,6 @@
                     </div>
                 {/if}
             </Box>
-            <div class="u-flex u-main-space-between u-cross-center">
-                <p class="body-text-1 u-bold">Billing period:</p>
-                <p class="text">
-                    {toLocaleDate($organization?.billingCurrentInvoiceDate)} - {toLocaleDate(
-                        $organization?.billingNextInvoiceDate
-                    )}
-                </p>
-            </div>
         </svelte:fragment>
         <svelte:fragment slot="actions">
             {#if $organization?.billingPlan === BillingPlan.STARTER}