From 3814cab9a7e4ae072a40b402ae1765e5b8f99441 Mon Sep 17 00:00:00 2001 From: Arman Date: Thu, 18 Apr 2024 15:58:16 +0200 Subject: [PATCH 01/10] 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> 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 @@ -
+ -
+ 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} - Overview + Payment estimates

- A summary of the current plan. For more information on Appwrite plans, - view our pricing page. - + A breakdown of your estimated upcoming payment for the current billing period. Totals + displayed exclude accumulated credits.

+

+ Billing period: {toLocaleDate($organization?.billingCurrentInvoiceDate)} - {toLocaleDate( + $organization?.billingNextInvoiceDate + )} +

+ + + {tierToPlan($organization?.billingPlan)?.name} plan + + {isTrial + ? formatCurrency(0) + : formatCurrency(currentPlan?.price)} + + + Add-ons number + + {formatCurrency(currentInvoice?.amount ?? 0)} + + + + Current total (USD) + + {formatCurrency(currentInvoice?.amount ?? 0)} + + +
@@ -122,14 +143,6 @@
{/if} -
-

Billing period:

-

- {toLocaleDate($organization?.billingCurrentInvoiceDate)} - {toLocaleDate( - $organization?.billingNextInvoiceDate - )} -

-
{#if $organization?.billingPlan === BillingPlan.STARTER} From 6a1f4339771378436b1fe1d1615692363dc3556f Mon Sep 17 00:00:00 2001 From: Arman Date: Mon, 22 Apr 2024 17:37:35 +0200 Subject: [PATCH 02/10] feat: design stuff --- src/lib/components/collapsibleItem.svelte | 8 +- .../billing/planSummary.svelte | 117 +++++++++++++++--- 2 files changed, 102 insertions(+), 23 deletions(-) diff --git a/src/lib/components/collapsibleItem.svelte b/src/lib/components/collapsibleItem.svelte index 8397454dc..0cbbbbf6a 100644 --- a/src/lib/components/collapsibleItem.svelte +++ b/src/lib/components/collapsibleItem.svelte @@ -21,9 +21,11 @@ {/if}
-
-
+ +
+
+
import { base } from '$app/paths'; - import { Box, CardGrid, EyebrowHeading, Heading } from '$lib/components'; + import { + Box, + CardGrid, + Collapsible, + CollapsibleItem, + EyebrowHeading, + Heading + } from '$lib/components'; import { Pill } from '$lib/elements'; import { Button } from '$lib/elements/forms'; import { toLocaleDate } from '$lib/helpers/date'; @@ -16,9 +23,11 @@ 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'; + import { TableCell, TableCellText, TableList } from '$lib/elements/table'; + import { clickOnEnter } from '$lib/helpers/a11y'; let currentInvoice: Invoice; + let showAddons = false; const today = new Date(); onMount(async () => { const invoices = await sdk.forConsole.billing.listInvoices($organization.$id, [ @@ -26,10 +35,11 @@ Query.orderDesc('$createdAt') ]); currentInvoice = invoices.invoices[0]; + console.log(currentInvoice); }); $: currentPlan = $plansInfo?.get($organization?.billingPlan); - $: extraUsage = currentInvoice?.amount - currentPlan?.price; + $: extraUsage = currentInvoice?.amount - currentPlan?.price || 0; $: isTrial = new Date($organization?.billingStartDate).getTime() - today.getTime() > 0; @@ -47,27 +57,94 @@ $organization?.billingNextInvoiceDate )}

- - - {tierToPlan($organization?.billingPlan)?.name} plan - - {isTrial - ? formatCurrency(0) - : formatCurrency(currentPlan?.price)} - - - Add-ons number - - {formatCurrency(currentInvoice?.amount ?? 0)} + +
  • + + {tierToPlan($organization?.billingPlan)?.name} plan + + + {isTrial ? formatCurrency(0) : formatCurrency(currentPlan?.price)} + +
    • + + +
  • (showAddons = !showAddons)} + on:keyup={clickOnEnter}> + + Add-ons number + - - - Current total (USD) + + {formatCurrency(extraUsage)} + +
    • + + {#if extraUsage && showAddons && $organization?.billingPlan !== BillingPlan.STARTER && !isTrial} + {@const extraMembers = currentInvoice.usage.find((u) => u.name === 'members')} +
  • +
    • + + {/if} + +
  • + Current total (USD) {formatCurrency(currentInvoice?.amount ?? 0)} - -
    • + + + {#if extraMembers} +
  • + {extraMembers} +
    • + {/if} +
  • + asde +
    • +     + {#if currentInvoice?.usage} + {#each currentInvoice.usage as excess} + {#if ['storage', 'bandwidth'].includes(excess.name)} + {@const excessValue = humanFileSize(excess.value)} +
  • +

    + + {excessValue.value ?? 0}{excessValue.unit} + + {excess.name} +

    +

    + {formatCurrency(excess.amount)} +

    +
    • + {/if} + {#if ['users', 'executions'].includes(excess.name)} +
  • +

    + {abbreviateNumber(excess.value)} + {excess.name} +

    +

    + {formatCurrency(excess.amount)} +

    +
    • + {/if} + {/each} + {/if} +     +
    + +
    From e1ccdb7352fc1e3327a0c84f4cf56d1928edd5fa Mon Sep 17 00:00:00 2001 From: Arman Date: Mon, 22 Apr 2024 18:05:42 +0200 Subject: [PATCH 03/10] 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}> - Add-ons number + Add-ons {extraMembers + ? currentInvoice?.usage?.length + 1 + : currentInvoice?.usage?.length} @@ -83,56 +88,72 @@ {#if extraUsage && showAddons && $organization?.billingPlan !== BillingPlan.STARTER && !isTrial} - {@const extraMembers = currentInvoice.usage.find((u) => u.name === 'members')}
  • {#if extraMembers}
  • - {extraMembers} + +
    + Additional members + + {extraMembers} + +
    +     + + + {formatCurrency(extraMembers * 15)} +
    • {/if} -
  • - asde -
    • + {#if currentInvoice?.usage} + {#each currentInvoice.usage as excess} +
  • + {#if ['storage', 'bandwidth'].includes(excess.name)} + {@const excessValue = humanFileSize( + excess.value + )} + +
    +

    {excess.name}

    + + {excessValue.value ?? + 0}{excessValue.unit} + +
    +     + + {formatCurrency(excess.amount)} + + {/if} + {#if ['users', 'executions'].includes(excess.name)} + +
    +

    + {excess.name} +

    + {abbreviateNumber( + excess.value + )} +
    +     + + {formatCurrency(excess.amount)} + + {/if} +
    • + {/each} + {/if} - {#if currentInvoice?.usage} - {#each currentInvoice.usage as excess} - {#if ['storage', 'bandwidth'].includes(excess.name)} - {@const excessValue = humanFileSize(excess.value)} -
  • -

    - - {excessValue.value ?? 0}{excessValue.unit} - - {excess.name} -

    -

    - {formatCurrency(excess.amount)} -

    -
    • - {/if} - {#if ['users', 'executions'].includes(excess.name)} -
  • -

    - {abbreviateNumber(excess.value)} - {excess.name} -

    -

    - {formatCurrency(excess.amount)} -

    -
    • - {/if} - {/each} - {/if} From 7a0321fef223b14a6d9498fc71841bd4487bc6a1 Mon Sep 17 00:00:00 2001 From: Arman Date: Thu, 2 May 2024 18:17:42 +0200 Subject: [PATCH 04/10] feat: new style --- src/lib/components/collapsible.svelte | 6 +- src/lib/components/collapsibleItem.svelte | 76 ++--- .../billing/planSummary.svelte | 261 ++++++------------ 3 files changed, 132 insertions(+), 211 deletions(-) diff --git a/src/lib/components/collapsible.svelte b/src/lib/components/collapsible.svelte index 245eec781..f3bf94601 100644 --- a/src/lib/components/collapsible.svelte +++ b/src/lib/components/collapsible.svelte @@ -1,3 +1,7 @@ -
      + + +
      diff --git a/src/lib/components/collapsibleItem.svelte b/src/lib/components/collapsibleItem.svelte index e25dc8c17..d95d53ef0 100644 --- a/src/lib/components/collapsibleItem.svelte +++ b/src/lib/components/collapsibleItem.svelte @@ -4,42 +4,54 @@ export let withIndentation = false; export let open = false; export let disabled = false; + export let noContent = false; + export let isInfo = false; + export let gap = 16; -
    • -
      - - - -
      - - {#if $$slots.subtitle} - - {/if} +
    • + {#if noContent} +
      +
      +
      - -
      -
      -       -
      • -
      -
      -
      + {:else} +
      + + + +
      + + + {#if $$slots.subtitle} + + {/if} +
      + +
      +
      +       +       +
      + +
      +
      + {/if}