From 05e43fb0b45f7638de3c366b5fdd820c1a7a8ad4 Mon Sep 17 00:00:00 2001 From: Arman Date: Tue, 23 Apr 2024 14:50:30 +0200 Subject: [PATCH 1/5] feat: add members usage page --- src/lib/components/emptyAsideCloud.svelte | 0 .../usage/[[invoice]]/+page.svelte | 2 + .../usage/[[invoice]]/+page.ts | 3 +- .../usage/[[invoice]]/totalMembers.svelte | 81 +++++++++++++++++++ 4 files changed, 85 insertions(+), 1 deletion(-) create mode 100644 src/lib/components/emptyAsideCloud.svelte create mode 100644 src/routes/console/organization-[organization]/usage/[[invoice]]/totalMembers.svelte diff --git a/src/lib/components/emptyAsideCloud.svelte b/src/lib/components/emptyAsideCloud.svelte new file mode 100644 index 000000000..e69de29bb diff --git a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte index 9bc13dc07..6278cec0a 100644 --- a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte +++ b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte @@ -14,6 +14,7 @@ import type { OrganizationUsage } from '$lib/sdk/billing'; import { BillingPlan } from '$lib/constants'; import { trackEvent } from '$lib/actions/analytics'; + import TotalMembers from './totalMembers.svelte'; export let data; @@ -102,6 +103,7 @@ ]} /> --> + Bandwidth diff --git a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts index b1ef9a272..17118e058 100644 --- a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts +++ b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts @@ -58,6 +58,7 @@ export const load: PageLoad = async ({ params, parent }) => { organizationUsage: usage, projectNames: projectNames.projects, invoices, - currentInvoice + currentInvoice, + organizationMembers: await sdk.forConsole.teams.listMemberships(params.organization) }; }; diff --git a/src/routes/console/organization-[organization]/usage/[[invoice]]/totalMembers.svelte b/src/routes/console/organization-[organization]/usage/[[invoice]]/totalMembers.svelte new file mode 100644 index 000000000..e22c515bf --- /dev/null +++ b/src/routes/console/organization-[organization]/usage/[[invoice]]/totalMembers.svelte @@ -0,0 +1,81 @@ + + + + Members + +

The number of members in your organization.

+ + {#if $organization.billingPlan !== BillingPlan.STARTER} +
+
+

+ {total} + Members +

+ +
+

+ Unlimited + +

+
+ + + + Members + Joined + + + {#each paginatedItems as member} + + +
+ + + {member.userName ? member.userName : 'n/a'} + +
+ + + {member.joined ? toLocaleDate(member.joined) : 'Never'} + + + {/each} + + + + {:else} + test + {/if} + + From 9aa0f5afe7a1644e87d9471a49a36ae87bb99f81 Mon Sep 17 00:00:00 2001 From: Arman Date: Tue, 23 Apr 2024 15:07:53 +0200 Subject: [PATCH 2/5] feat: add empty state --- .../components/billing/emptyCardCloud.svelte | 29 +++++++++++++++++++ src/lib/components/billing/index.ts | 1 + src/lib/components/emptyAsideCloud.svelte | 0 src/lib/components/paginator.svelte | 13 +++++---- .../usage/[[invoice]]/totalMembers.svelte | 14 ++++++--- 5 files changed, 48 insertions(+), 9 deletions(-) create mode 100644 src/lib/components/billing/emptyCardCloud.svelte delete mode 100644 src/lib/components/emptyAsideCloud.svelte diff --git a/src/lib/components/billing/emptyCardCloud.svelte b/src/lib/components/billing/emptyCardCloud.svelte new file mode 100644 index 000000000..73b18c614 --- /dev/null +++ b/src/lib/components/billing/emptyCardCloud.svelte @@ -0,0 +1,29 @@ + + + + +
+
Upgrade to add {service}
+

+ Upgrade to a {tierToPlan(BillingPlan.PRO).name} plan to add {service} to your organization +

+ + +
+ + diff --git a/src/lib/components/billing/index.ts b/src/lib/components/billing/index.ts index 0d7a98daa..cfa72bd54 100644 --- a/src/lib/components/billing/index.ts +++ b/src/lib/components/billing/index.ts @@ -1,2 +1,3 @@ export { default as PaymentBoxes } from './paymentBoxes.svelte'; export { default as CouponInput } from './couponInput.svelte'; +export { default as EmptyCardCloud } from './emptyCardCloud.svelte'; diff --git a/src/lib/components/emptyAsideCloud.svelte b/src/lib/components/emptyAsideCloud.svelte deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/lib/components/paginator.svelte b/src/lib/components/paginator.svelte index 36849247a..e40e95103 100644 --- a/src/lib/components/paginator.svelte +++ b/src/lib/components/paginator.svelte @@ -3,6 +3,7 @@ export let items = []; export let limit = 5; + export let hideFooter = false; let offset = 0; @@ -10,9 +11,11 @@ $: paginatedItems = items.slice(offset, offset + limit); - + -
-

Total results: {total}

- -
+{#if !hideFooter} +
+

Total results: {total}

+ +
+{/if} diff --git a/src/routes/console/organization-[organization]/usage/[[invoice]]/totalMembers.svelte b/src/routes/console/organization-[organization]/usage/[[invoice]]/totalMembers.svelte index e22c515bf..d4327b0ab 100644 --- a/src/routes/console/organization-[organization]/usage/[[invoice]]/totalMembers.svelte +++ b/src/routes/console/organization-[organization]/usage/[[invoice]]/totalMembers.svelte @@ -1,6 +1,7 @@ @@ -21,7 +23,13 @@ class="u-margin-block-start-16" secondary fullWidthMobile - on:click={() => wizard.start(ChangeOrganizationTierCloud)}> + on:click={() => { + trackEvent('click_organization_upgrade', { + from: 'button', + source: eventSource + }); + wizard.start(ChangeOrganizationTierCloud); + }}> Upgrade diff --git a/src/routes/console/organization-[organization]/usage/[[invoice]]/totalMembers.svelte b/src/routes/console/organization-[organization]/usage/[[invoice]]/totalMembers.svelte index d4327b0ab..950b4c30e 100644 --- a/src/routes/console/organization-[organization]/usage/[[invoice]]/totalMembers.svelte +++ b/src/routes/console/organization-[organization]/usage/[[invoice]]/totalMembers.svelte @@ -81,7 +81,7 @@ {:else} - + {/if} From 5c304a5d60f0f9c72ae7e3488f8808f683ce0945 Mon Sep 17 00:00:00 2001 From: Arman Date: Thu, 2 May 2024 17:02:06 +0200 Subject: [PATCH 4/5] chore: move card --- .../organization-[organization]/usage/[[invoice]]/+page.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte index 6278cec0a..e2568ea13 100644 --- a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte +++ b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte @@ -103,7 +103,6 @@ ]} /> --> - Bandwidth @@ -300,6 +299,7 @@ {/if} +

Metrics are estimates updated every 24 hours and may not accurately reflect your invoice. From 0bfa3a59c66219adfca3adce276c8e9586796857 Mon Sep 17 00:00:00 2001 From: Arman Date: Wed, 8 May 2024 14:11:30 +0200 Subject: [PATCH 5/5] fix: await --- .../organization-[organization]/usage/[[invoice]]/+page.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts index 17118e058..cb8264f1a 100644 --- a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts +++ b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts @@ -36,9 +36,10 @@ export const load: PageLoad = async ({ params, parent }) => { endDate = currentInvoice.to; } - const [invoices, usage] = await Promise.all([ + const [invoices, usage, organizationMembers] = await Promise.all([ sdk.forConsole.billing.listInvoices(org.$id, [Query.orderDesc('from')]), - sdk.forConsole.billing.listUsage(params.organization, startDate, endDate) + sdk.forConsole.billing.listUsage(params.organization, startDate, endDate), + sdk.forConsole.teams.listMemberships(params.organization) ]); const queries: string[] = []; @@ -59,6 +60,6 @@ export const load: PageLoad = async ({ params, parent }) => { projectNames: projectNames.projects, invoices, currentInvoice, - organizationMembers: await sdk.forConsole.teams.listMemberships(params.organization) + organizationMembers }; };