Project changes: fetch plan values

src/lib/components/billing/planSelection.svelte

@@ -1,81 +1,47 @@
 <script lang="ts">
-    import { BASE_BILLING_PLANS, BillingPlan } from '$lib/constants';
+    import { BillingPlan } from '$lib/constants';
     import { formatCurrency } from '$lib/helpers/numbers';
-    import { plansInfo, type Tier, tierFree, tierPro, tierScale } from '$lib/stores/billing';
+    import { type Tier } from '$lib/stores/billing';
     import { currentPlan, organization } from '$lib/stores/organization';
     import { Badge, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { LabelCard } from '..';
+    import type { Plan } from '$lib/sdk/billing';
+    import { page } from '$app/state';
 
     export let billingPlan: Tier;
     export let anyOrgFree = false;
     export let isNewOrg = false;
     export let selfService = true;
 
-    $: freePlan = $plansInfo.get(BillingPlan.FREE);
-    $: proPlan = $plansInfo.get(BillingPlan.PRO);
-    $: scalePlan = $plansInfo.get(BillingPlan.SCALE);
-
-    $: isBasePlan = BASE_BILLING_PLANS.includes($currentPlan?.$id);
+    $: plans = Object.values(page.data.plans.plans) as Plan[];
+    $: currentPlanInList = plans.filter((plan) => plan.$id === $currentPlan?.$id).length > 0;
 </script>
 
 <Layout.Stack>
-    <LabelCard
-        name="plan"
-        bind:group={billingPlan}
-        disabled={anyOrgFree || !selfService}
-        value={BillingPlan.FREE}
-        title={tierFree.name}
-        tooltipShow={anyOrgFree}
-        tooltipText="You are limited to 1 Free organization per account."
-        tooltipWidth="100%">
-        <svelte:fragment slot="action">
-            {#if $organization?.billingPlan === BillingPlan.FREE && !isNewOrg}
-                <Badge variant="secondary" size="xs" content="Current plan" />
-            {/if}
-        </svelte:fragment>
-        <Typography.Caption variant="400">
-            {tierFree.description}
-        </Typography.Caption>
-        <Typography.Text>
-            {formatCurrency(freePlan?.price ?? 0)}
-        </Typography.Text>
-    </LabelCard>
-    <LabelCard
-        name="plan"
-        disabled={!selfService}
-        bind:group={billingPlan}
-        value={BillingPlan.PRO}
-        title={tierPro.name}>
-        <svelte:fragment slot="action">
-            {#if $organization?.billingPlan === BillingPlan.PRO && !isNewOrg}
-                <Badge variant="secondary" size="xs" content="Current plan" />
-            {/if}
-        </svelte:fragment>
-        <Typography.Caption variant="400">
-            {tierPro.description}
-        </Typography.Caption>
-        <Typography.Text>
-            {formatCurrency(proPlan?.price ?? 0)} per month + usage
-        </Typography.Text>
-    </LabelCard>
-    <LabelCard
-        name="plan"
-        bind:group={billingPlan}
-        value={BillingPlan.SCALE}
-        title={tierScale.name}>
-        <svelte:fragment slot="action">
-            {#if $organization?.billingPlan === BillingPlan.SCALE && !isNewOrg}
-                <Badge variant="secondary" size="xs" content="Current plan" />
-            {/if}
-        </svelte:fragment>
-        <Typography.Caption variant="400">
-            {tierScale.description}
-        </Typography.Caption>
-        <Typography.Text>
-            {formatCurrency(scalePlan?.price ?? 0)} per month + usage
-        </Typography.Text>
-    </LabelCard>
-    {#if $currentPlan && !isBasePlan}
+    {#each plans as plan}
+        <LabelCard
+            name="plan"
+            bind:group={billingPlan}
+            disabled={!selfService || (plan.$id === BillingPlan.FREE && anyOrgFree)}
+            tooltipShow={plan.$id === BillingPlan.FREE && anyOrgFree}
+            value={plan.$id}
+            title={plan.name}>
+            <svelte:fragment slot="action">
+                {#if $organization?.billingPlan === plan.$id && !isNewOrg}
+                    <Badge variant="secondary" size="xs" content="Current plan" />
+                {/if}
+            </svelte:fragment>
+            <Typography.Caption variant="400">
+                {plan.desc}
+            </Typography.Caption>
+            <Typography.Text>
+                {@const isZeroPrice = (plan.price ?? 0) <= 0}
+                {@const price = formatCurrency(plan.price ?? 0)}
+                {isZeroPrice ? price : `${price} per month + usage`}
+            </Typography.Text>
+        </LabelCard>
+    {/each}
+    {#if $currentPlan && !currentPlanInList}
         <LabelCard
             name="plan"
             bind:group={billingPlan}

src/lib/sdk/billing.ts

@@ -151,6 +151,78 @@ export type CreditList = {
     total: number;
 };
 
+export type AggregationTeam = {
+    $id: string;
+    /**
+     * Aggregation creation time in ISO 8601 format.
+     */
+    $createdAt: string;
+    /**
+     * Aggregation update date in ISO 8601 format.
+     */
+    $updatedAt: string;
+    /**
+     * Beginning date of the invoice.
+     */
+    from: string;
+    /**
+     * End date of the invoice.
+     */
+    to: string;
+    /**
+     * Total amount of the invoice.
+     */
+    amount: number;
+    additionalMembers: number;
+
+    /**
+     * Price for additional members
+     */
+    additionalMemberAmount: number;
+    /**
+     * Total storage usage.
+     */
+    usageStorage: number;
+    /**
+     * Total active users for the billing period.
+     */
+    usageUsers: number;
+    /**
+     * Total number of executions for the billing period.
+     */
+    usageExecutions: number;
+    /**
+     * Total bandwidth usage for the billing period.
+     */
+    usageBandwidth: number;
+    /**
+     * Total realtime usage for the billing period.
+     */
+    usageRealtime: number;
+    /**
+     * Usage logs for the billing period.
+     */
+    resources: InvoiceUsage[];
+    /**
+     * Aggregation billing plan
+     */
+    plan: string;
+    projectBreakdown: ProjectBreakdown[]
+};
+
+export type ProjectBreakdown = {
+    $id: string;
+    name: string;
+    amount: number;
+    resources: InvoiceUsage[];
+}
+
+export type InvoiceUsage = {
+    resourceId: string;
+    value: number;
+    amount: number;
+}
+
 export type AvailableCredit = {
     available: number;
 };
@@ -333,6 +405,7 @@ export type Plan = {
     };
     addons: {
         seats: PlanAddon;
+        projects: PlanAddon;
     };
     trialDays: number;
     budgetCapEnabled: boolean;
@@ -348,14 +421,15 @@ export type Plan = {
     supportsOrganizationRoles: boolean;
     buildSize: number; // in MB
     deploymentSize: number; // in MB
+    usagePerProject: boolean;
 };
 
 export type PlanList = {
     plans: Plan[];
     total: number;
 };
 
-export type PlansMap = Map<Tier, Plan>;
+export type PlansMap = Map<string, Plan>;
 
 export type Roles = {
     scopes: string[];
@@ -492,6 +566,22 @@ export class Billing {
         });
     }
 
+    async listPlans(queries: string[] = []): Promise<PlanList> {
+        const path = `/console/plans`;
+        const uri = new URL(this.client.config.endpoint + path);
+        const params = {
+            queries
+        };
+        return await this.client.call(
+            'get',
+            uri,
+            {
+                'content-type': 'application/json'
+            },
+            params
+        );
+    }
+
     async getPlan(planId: string): Promise<Plan> {
         const path = `/console/plans/${planId}`;
         const uri = new URL(this.client.config.endpoint + path);
@@ -835,7 +925,7 @@ export class Billing {
         );
     }
 
-    async getAggregation(organizationId: string, aggregationId: string): Promise<Aggregation> {
+    async getAggregation(organizationId: string, aggregationId: string): Promise<AggregationTeam> {
         const path = `/organizations/${organizationId}/aggregations/${aggregationId}`;
         const params = {
             organizationId,

src/lib/stores/billing.ts

@@ -163,7 +163,7 @@ export function getServiceLimit(serviceId: PlanServices, tier: Tier = null, plan
     // plan > addons > seats/others
     if (serviceId === 'members') {
         // some don't include `limit`, so we fallback!
-        return plan?.['addons']['seats']['limit'] ?? 1;
+        return (plan?.['addons']['seats'] || [])['limit'] ?? 1;
     }
 
     return plan?.[serviceId] ?? 0;
@@ -323,7 +323,8 @@ export async function checkForProjectsLimit(org: Organization, projects: number)
     const plan = await sdk.forConsole.billing.getOrganizationPlan(org.$id);
     if (!plan) return;
     if (plan.$id !== BillingPlan.FREE) return;
-    if (org.projects?.length > 0) return;
+    if (!org.projects) return;
+    if (org.projects.length > 0) return;
 
     if (plan.projects > 0 && projects > plan.projects) {
         headerAlert.add({

src/routes/(console)/+layout.ts

@@ -1,7 +1,7 @@
+import { Dependencies } from '$lib/constants';
 import { sdk } from '$lib/stores/sdk';
 import { isCloud } from '$lib/system';
 import type { LayoutLoad } from './$types';
-import { Dependencies } from '$lib/constants';
 import type { Tier } from '$lib/stores/billing';
 import type { Plan, PlanList } from '$lib/sdk/billing';
 import { Query } from '@appwrite.io/console';
@@ -50,6 +50,7 @@ export const load: LayoutLoad = async ({ depends, parent }) => {
         plansInfo,
         roles: [],
         scopes: [],
+        projects,
         preferences,
         currentOrgId,
         organizations,

src/routes/(console)/create-organization/+page.ts

@@ -7,10 +7,10 @@ import type { Organization } from '$lib/stores/organization';
 export const load: PageLoad = async ({ url, parent, depends }) => {
     const { organizations } = await parent();
     depends(Dependencies.ORGANIZATIONS);
-
-    const [coupon, paymentMethods] = await Promise.all([
+    const [coupon, paymentMethods, plans] = await Promise.all([
         getCoupon(url),
-        sdk.forConsole.billing.listPaymentMethods()
+        sdk.forConsole.billing.listPaymentMethods(),
+        sdk.forConsole.billing.listPlans()
     ]);
     let plan = getPlanFromUrl(url);
     const hasFreeOrganizations = organizations.teams?.some(
@@ -24,6 +24,7 @@ export const load: PageLoad = async ({ url, parent, depends }) => {
     return {
         plan,
         coupon,
+        plans,
         hasFreeOrganizations,
         paymentMethods,
         name: url.searchParams.get('name') ?? ''