feat: teams limit, small refactos

src/lib/components/cardContainer.svelte

@@ -13,7 +13,7 @@
     export let service = '';
     export let serviceId = service;
 
-    $: planLimit = getServiceLimit(serviceId);
+    $: planLimit = getServiceLimit(serviceId)?.amount ?? Infinity;
 
     $: limit = preferences.get($page.route)?.limit ?? CARD_LIMIT;
 </script>

src/lib/elements/table/body.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-    import { usageRates } from '$lib/constants';
-    import { organization } from '$lib/stores/organization';
+    import { getServiceLimit } from '$lib/stores/billing';
     import { wizard } from '$lib/stores/wizard';
     import { isCloud } from '$lib/system';
     import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
@@ -12,7 +11,7 @@
     export let name = service;
     let rows = 0;
 
-    $: limitReached = isCloud ? usageRates[$organization?.billingPlan ?? 'tier-0'] : false;
+    $: limitReached = rows >= (getServiceLimit(service)?.amount ?? Infinity);
 
     $: if (tableBody) {
         rows = tableBody?.parentNode?.querySelectorAll('.table-thead-col')?.length;

src/lib/layout/containerHeader.svelte

@@ -10,9 +10,9 @@
     import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
     import { Button } from '$lib/elements/forms';
 
+    export let isFlex = true;
     export let title: string;
     export let titleTag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h2';
-
     export let titleSize: '1' | '2' | '3' | '4' | '5' | '6' | '7' = '5';
     export let serviceId = title.toLocaleLowerCase();
     export let total: number = null;
@@ -23,26 +23,28 @@
 
     let tooltipContent: HTMLDivElement;
 
-    $: limit = getServiceLimit(serviceId);
+    const limit = getServiceLimit(serviceId)?.amount ?? Infinity;
 
     $: tier = tierToPlan($organization?.billingPlan as Tier)?.name;
 </script>
 
 {#if isCloud && total && limit !== 'unlimited' && total >= limit}
-    <Alert type="warning">
-        <span class="text">
-            You've reached the maximum number of {title.toLowerCase()} for the {tier} plan.
-            <button
-                class="link"
-                type="button"
-                on:click|preventDefault={() => wizard.start(ChangeOrganizationTierCloud)}
-                >Upgrade</button>
-            for additional {title.toLocaleLowerCase()}.
-        </span>
-    </Alert>
+    <slot name="alert">
+        <Alert type="warning">
+            <span class="text">
+                You've reached the maximum number of {title.toLowerCase()} for the {tier} plan.
+                <button
+                    class="link"
+                    type="button"
+                    on:click|preventDefault={() => wizard.start(ChangeOrganizationTierCloud)}
+                    >Upgrade</button>
+                for additional {title.toLocaleLowerCase()}.
+            </span>
+        </Alert>
+    </slot>
 {/if}
 
-<div class="u-flex u-gap-12 common-section u-main-space-between">
+<div class:u-flex={isFlex} class=" u-gap-12 common-section u-main-space-between">
     <div class="u-flex u-cross-child-center u-gap-16">
         <Heading tag={titleTag} size={titleSize}>{title}</Heading>
         {#if isCloud}

src/lib/stores/billing.ts

@@ -27,7 +27,7 @@ export function getCreditCardImage(brand: string, width = 46, height = 32) {
 }
 
 export function getServiceLimit(serviceId: string) {
-    return limitRates?.[get(organization)?.billingPlan]?.find((l) => l.id === serviceId)?.amount;
+    return limitRates?.[get(organization)?.billingPlan]?.find((l) => l.id === serviceId);
 }
 
 export const tierFree = {

src/routes/console/project-[project]/auth/teams/+page.svelte

@@ -20,10 +20,12 @@
     import Create from '../createTeam.svelte';
     import { goto } from '$app/navigation';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { Container } from '$lib/layout';
+    import { Container, ContainerHeader } from '$lib/layout';
     import { base } from '$app/paths';
     import type { Models } from '@appwrite.io/console';
     import type { PageData } from './$types';
+    import { getServiceLimit } from '$lib/stores/billing';
+    import { tooltip } from '$lib/actions/tooltip';
 
     export let data: PageData;
 
@@ -36,11 +38,23 @@
 </script>
 
 <Container>
-    <SearchQuery search={data.search} placeholder="Search by name">
-        <Button on:click={() => (showCreate = true)} event="create_team">
-            <span class="icon-plus" aria-hidden="true" /> <span class="text">Create team</span>
-        </Button>
-    </SearchQuery>
+    <ContainerHeader title="Teams" isFlex={false} total={data.teams.total}>
+        <SearchQuery search={data.search} placeholder="Search by name">
+            <div
+                use:tooltip={{
+                    content: `Upgrade to add more teams`,
+                    disabled: data.teams.total < getServiceLimit('teams')?.amount
+                }}>
+                <Button
+                    on:click={() => (showCreate = true)}
+                    event="create_team"
+                    disabled={data.teams.total >= getServiceLimit('teams')?.amount}>
+                    <span class="icon-plus" aria-hidden="true" />
+                    <span class="text">Create team</span>
+                </Button>
+            </div>
+        </SearchQuery>
+    </ContainerHeader>
     {#if data.teams.total}
         <Table>
             <TableHeader>
@@ -48,7 +62,7 @@
                 <TableCellHead onlyDesktop>Members</TableCellHead>
                 <TableCellHead onlyDesktop>Created</TableCellHead>
             </TableHeader>
-            <TableBody>
+            <TableBody service="teams">
                 {#each data.teams.teams as team}
                     <TableRowLink
                         href={`${base}/console/project-${project}/auth/teams/team-${team.$id}`}>

src/routes/console/project-[project]/overview/platforms/+page.svelte

@@ -82,7 +82,7 @@
     <DropList bind:show={showDropdown} placement="bottom-start">
         <Button
             on:click={() => (showDropdown = !showDropdown)}
-            disabled={data?.platforms?.platforms?.length >= getServiceLimit('platforms')}>
+            disabled={data?.platforms?.platforms?.length >= getServiceLimit('platforms')?.amount}>
             <span class="icon-plus" aria-hidden="true" />
             <span class="text">Add platform</span>
         </Button>