fix: tier for billing usage

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<UsageMetric>;
     executions: number;

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];
 }
 

src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
     import { CardGrid, Heading, ProgressBarBig } from '$lib/components';
-    import { getServiceLimit, showUsageRatesModal, tierToPlan } from '$lib/stores/billing.js';
-    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
-    import { wizard } from '$lib/stores/wizard.js';
+    import { getServiceLimit, showUsageRatesModal, tierToPlan } from '$lib/stores/billing';
+    import { wizard } from '$lib/stores/wizard';
     import { organization } from '$lib/stores/organization';
     import { InputSelect } from '$lib/elements/forms';
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
-
-    const tier = tierToPlan($organization?.billingPlan)?.name;
+    import { toLocaleDate } from '$lib/helpers/date.js';
+    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
 
     export let data;
+
+    const tier = data?.currentInvoice?.tier ?? $organization?.billingPlan;
+    const plan = tierToPlan(tier).name;
+
     let invoice = 'current';
 
     async function handlePeriodChange() {
@@ -24,7 +27,7 @@
     }
 
     const cycles = data.invoices.invoices.map((invoice) => ({
-        label: (new Date(invoice.from)).toLocaleDateString(),
+        label: toLocaleDate(invoice.from),
         value: invoice.$id
     }));
 </script>
@@ -42,7 +45,7 @@
             </p>
         {:else}
             <p class="text">
-                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.
                 <button
                     on:click={() => wizard.start(ChangeOrganizationTierCloud)}
                     class="link"
@@ -81,7 +84,7 @@
         <svelte:fragment slot="aside">
             <ProgressBarBig
                 unit="GB"
-                max={getServiceLimit('bandwidth')}
+                max={getServiceLimit('bandwidth', tier)}
                 used={data.organizationUsage.bandwidth[0]?.value ?? 0} />
         </svelte:fragment>
     </CardGrid>
@@ -94,7 +97,7 @@
         <svelte:fragment slot="aside">
             <ProgressBarBig
                 unit="Users"
-                max={getServiceLimit('users')}
+                max={getServiceLimit('users', tier)}
                 used={data.organizationUsage.bandwidth[0]?.value ?? 0} />
         </svelte:fragment>
     </CardGrid>
@@ -109,7 +112,7 @@
         <svelte:fragment slot="aside">
             <ProgressBarBig
                 unit="Executions"
-                max={getServiceLimit('executions')}
+                max={getServiceLimit('executions', tier)}
                 used={data.organizationUsage.executions} />
         </svelte:fragment>
     </CardGrid>
@@ -124,7 +127,7 @@
         <svelte:fragment slot="aside">
             <ProgressBarBig
                 unit="GB"
-                max={getServiceLimit('storage')}
+                max={getServiceLimit('storage', tier)}
                 used={data.organizationUsage.storage} />
         </svelte:fragment>
     </CardGrid>

src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts

@@ -1,6 +1,7 @@
 import { sdk } from '$lib/stores/sdk';
 import type { PageLoad } from './$types';
 import type { Organization } from '$lib/stores/organization';
+import type { Invoice } from '$lib/sdk/billing';
 
 export const load: PageLoad = async ({ params, parent }) => {
     const { invoice } = params;
@@ -9,11 +10,12 @@ export const load: PageLoad = async ({ params, parent }) => {
     const today = new Date().toISOString();
     let startDate: string;
     let endDate: string;
+    let currentInvoice: Invoice | null = null;
 
-    if (invoice){
-        const data = await sdk.forConsole.billing.getInvoice(org.$id, invoice);
-        startDate = data.from;
-        endDate = data.to;
+    if (invoice) {
+        currentInvoice = await sdk.forConsole.billing.getInvoice(org.$id, invoice);
+        startDate = currentInvoice.from;
+        endDate = currentInvoice.to;
     } else {
         startDate = org.billingCurrentInvoiceDate;
         endDate = today;
@@ -21,15 +23,12 @@ export const load: PageLoad = async ({ params, parent }) => {
 
     const [invoices, usage] = await Promise.all([
         sdk.forConsole.billing.listInvoices(org.$id),
-        sdk.forConsole.billing.listUsage(
-            params.organization,
-            startDate ?? org.billingCurrentInvoiceDate,
-            endDate ?? today
-        )
-    ])
+        sdk.forConsole.billing.listUsage(params.organization, startDate, endDate)
+    ]);
 
     return {
         organizationUsage: usage,
-        invoices
+        invoices,
+        currentInvoice
     };
 };