From 762bcbc082d419879ccd592a808044e9427588f0 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Mon, 27 Nov 2023 14:27:06 +0100 Subject: [PATCH 1/3] fix: usage --- src/lib/sdk/billing.ts | 9 ++-- .../{[[period]] => [[invoice]]}/+page.svelte | 47 ++++++------------- .../usage/[[invoice]]/+page.ts | 35 ++++++++++++++ .../usage/[[period]]/+page.ts | 34 -------------- 4 files changed, 56 insertions(+), 69 deletions(-) rename src/routes/console/organization-[organization]/usage/{[[period]] => [[invoice]]}/+page.svelte (73%) create mode 100644 src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts delete mode 100644 src/routes/console/organization-[organization]/usage/[[period]]/+page.ts diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts index 08821c7af4..2fc95759e4 100644 --- a/src/lib/sdk/billing.ts +++ b/src/lib/sdk/billing.ts @@ -143,12 +143,15 @@ export type Aggregation = { */ resources: OrganizationUsage; }; - +type UsageMetric = { + date: string; + value: number; +} export type OrganizationUsage = { - bandwidth: []; + bandwidth: Array; executions: number; storage: number; - users: []; + users: Array; }; export type AggregationList = { diff --git a/src/routes/console/organization-[organization]/usage/[[period]]/+page.svelte b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte similarity index 73% rename from src/routes/console/organization-[organization]/usage/[[period]]/+page.svelte rename to src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte index fcde6545ef..394d115052 100644 --- a/src/routes/console/organization-[organization]/usage/[[period]]/+page.svelte +++ b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte @@ -5,38 +5,30 @@ import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte'; import { wizard } from '$lib/stores/wizard.js'; import { organization } from '$lib/stores/organization'; - import { InputDateRange, InputSelect } from '$lib/elements/forms'; + import { InputSelect } from '$lib/elements/forms'; import { page } from '$app/stores'; import { goto } from '$app/navigation'; - import type { DateRange } from '@melt-ui/svelte'; const tier = tierToPlan($organization?.billingPlan)?.name; export let data; - let period = 'current'; + let invoice = 'current'; async function handlePeriodChange() { - if ( - period === 'current' && - !$page.url.pathname.includes('usage/current') && - $page.url.pathname !== `/console/organization-${$organization.$id}/usage` - ) { - await goto(`/console/organization-${$organization.$id}/usage/current`); - } - if (period === 'previous' && !$page.url.pathname.includes('usage/previous')) { - await goto(`/console/organization-${$organization.$id}/usage/previous`); - } - if (period === 'custom' && !$page.url.pathname.includes('usage/custom')) { - console.log('test'); - // await goto(`/console/organization-${$organization.$id}/usage/custom`); + const target = invoice + ? `/console/organization-${$organization.$id}/usage/${invoice}` + : `/console/organization-${$organization.$id}/usage`; + if ($page.url.pathname !== target) { + await goto(target); } } - let test: DateRange; + const cycles = data.invoices.invoices.map((invoice) => ({ + label: invoice.from, + value: invoice.$id + })); - - Usage
@@ -59,8 +51,6 @@

{/if} - -

Usage period:

@@ -69,21 +59,14 @@ id="period" label="Usage period" showLabel={false} - bind:value={period} + bind:value={invoice} on:change={handlePeriodChange} options={[ { label: 'Current billing cycle', value: 'current' }, - { - label: 'Previous billing cycle', - value: 'previous' - }, - { - label: 'Choose dates', - value: 'custom' - } + ...cycles ]}>
@@ -99,7 +82,7 @@ + used={data.organizationUsage.bandwidth[0]?.value ?? 0} /> @@ -112,7 +95,7 @@ + used={data.organizationUsage.bandwidth[0]?.value ?? 0} /> diff --git a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts new file mode 100644 index 0000000000..b51ef93e4c --- /dev/null +++ b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts @@ -0,0 +1,35 @@ +import { sdk } from '$lib/stores/sdk'; +import type { PageLoad } from './$types'; +import type { Organization } from '$lib/stores/organization'; + +export const load: PageLoad = async ({ params, parent }) => { + const { invoice } = params; + const parentData = await parent(); + const org = parentData.organization as Organization; + const today = new Date().toISOString(); + let startDate: string; + let endDate: string; + + if (invoice){ + const data = await sdk.forConsole.billing.getInvoice(org.$id, invoice); + startDate = data.from; + endDate = data.to; + } else { + startDate = org.billingCurrentInvoiceDate; + endDate = today; + } + + const [invoices, usage] = await Promise.all([ + sdk.forConsole.billing.listInvoices(org.$id), + sdk.forConsole.billing.listUsage( + params.organization, + startDate ?? org.billingCurrentInvoiceDate, + endDate ?? today + ) + ]) + + return { + organizationUsage: usage, + invoices + }; +}; diff --git a/src/routes/console/organization-[organization]/usage/[[period]]/+page.ts b/src/routes/console/organization-[organization]/usage/[[period]]/+page.ts deleted file mode 100644 index ad93286ae2..0000000000 --- a/src/routes/console/organization-[organization]/usage/[[period]]/+page.ts +++ /dev/null @@ -1,34 +0,0 @@ -import type { Organization } from '$lib/stores/organization'; -import { sdk } from '$lib/stores/sdk'; -import type { PageLoad } from './$types'; - -export const load: PageLoad = async ({ params, parent, url }) => { - const { period } = params; - const parentData = await parent(); - const org = parentData.organization as Organization; - const today = new Date().toISOString(); - let startDate: string; - let endDate: string; - - if (period === 'current') { - startDate = org.billingCurrentInvoiceDate; - endDate = today; - } else if (period === 'previous') { - const prevDate = new Date(org.billingCurrentInvoiceDate); - prevDate.setDate(prevDate.getDate() - 30); - startDate = prevDate.toISOString(); - endDate = org.billingCurrentInvoiceDate; - } else if (period === 'custom') { - startDate = url.searchParams.get('start') ?? org.billingCurrentInvoiceDate; - endDate = url.searchParams.get('end') ?? today; - } - const usage = await sdk.forConsole.billing.listUsage( - params.organization, - startDate ?? org.billingCurrentInvoiceDate, - endDate ?? today - ); - console.log(usage); - return { - organizationUsage: usage - }; -}; From 29b080975ea03e858d301be7fd1112cda77220af Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Mon, 27 Nov 2023 15:04:39 +0100 Subject: [PATCH 2/3] fix: date string --- .../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 394d115052..3694956477 100644 --- a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte +++ b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte @@ -24,7 +24,7 @@ } const cycles = data.invoices.invoices.map((invoice) => ({ - label: invoice.from, + label: (new Date(invoice.from)).toLocaleDateString(), value: invoice.$id })); From 7dad70c83970664407ffde48ac9b5f9e78aeaee5 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Tue, 28 Nov 2023 11:05:25 +0100 Subject: [PATCH 3/3] fix: tier for billing usage --- src/lib/sdk/billing.ts | 4 ++- src/lib/stores/billing.ts | 6 +++-- .../usage/[[invoice]]/+page.svelte | 25 +++++++++++-------- .../usage/[[invoice]]/+page.ts | 21 ++++++++-------- 4 files changed, 31 insertions(+), 25 deletions(-) diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts index e67dcbf868..219233c622 100644 --- a/src/lib/sdk/billing.ts +++ b/src/lib/sdk/billing.ts @@ -1,6 +1,7 @@ import type { Client, Query } from '@appwrite.io/console'; import type { Organization } from '../stores/organization'; import type { PaymentMethod } from '@stripe/stripe-js'; +import type { Tier } from '$lib/stores/billing'; export type PaymentMethodData = { $id: string; @@ -38,6 +39,7 @@ export type Invoice = { status: string; dueAt: string; clientSecret: string; + tier: Tier; }; export type InvoiceList = { @@ -156,7 +158,7 @@ export type Aggregation = { type UsageMetric = { date: string; value: number; -} +}; export type OrganizationUsage = { bandwidth: Array; executions: number; diff --git a/src/lib/stores/billing.ts b/src/lib/stores/billing.ts index 9fc1a185e9..9e71f81b33 100644 --- a/src/lib/stores/billing.ts +++ b/src/lib/stores/billing.ts @@ -58,10 +58,12 @@ export type PlanServices = | 'usersAddon' | 'webhooks'; -export function getServiceLimit(serviceId: PlanServices): number { +export function getServiceLimit(serviceId: PlanServices, tier: Tier = null): number { if (!isCloud) return 0; if (!serviceId) return 0; - const plan = get(plansInfo).plans.find((p) => p.$id === get(organization)?.billingPlan); + const plan = get(plansInfo).plans.find( + (p) => p.$id === (tier ?? get(organization)?.billingPlan) + ); return plan[serviceId]; } diff --git a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte index 3694956477..2ceac055e3 100644 --- a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte +++ b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte @@ -1,17 +1,20 @@ @@ -42,7 +45,7 @@

{:else}

- If you exceed the limits of the {tier} plan, services for your projects may be disrupted. + If you exceed the limits of the {plan} plan, services for your projects may be disrupted.