Project changes

src/lib/layout/createProject.svelte

@@ -1,16 +1,21 @@
 <script lang="ts">
-    import { Layout, Typography, Input, Tag, Icon } from '@appwrite.io/pink-svelte';
+    import { Layout, Typography, Input, Tag, Icon, Alert } from '@appwrite.io/pink-svelte';
     import { IconPencil } from '@appwrite.io/pink-icons-svelte';
     import { CustomId } from '$lib/components/index.js';
     import type { Region } from '$lib/sdk/billing';
     import { getFlagUrl } from '$lib/helpers/flag';
     import { isCloud } from '$lib/system.js';
+    import { currentPlan } from '$lib/stores/organization';
+    import { Button } from '$lib/elements/forms';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
 
     export let projectName: string;
     export let id: string;
     export let regions: Array<Region> = [];
     export let region: string;
     export let showTitle = true;
+    export let projects: number = undefined;
 
     let showCustomId = false;
 
@@ -44,6 +49,14 @@
         {#if showTitle}
             <Typography.Title size="l">Create your project</Typography.Title>
         {/if}
+        {#if projects && projects >= $currentPlan?.projects}
+            <Alert.Inline status="warning" title="You’ve reached your limit of 2 projects">
+                Extra projects are available on paid plans for an additional fee
+                <svelte:fragment slot="actions">
+                    <Button href={`${base}/organization-${page.params.organization}/billing`} external text>Upgrade</Button>
+                </svelte:fragment>
+            </Alert.Inline>
+        {/if}
         <Layout.Stack direction="column" gap="xxl">
             <Layout.Stack direction="column" gap="xxl">
                 <Layout.Stack direction="column" gap="s">

src/lib/sdk/billing.ts

@@ -321,6 +321,7 @@ export type Plan = {
     webhooks: number;
     users: number;
     teams: number;
+    projects: number;
     databases: number;
     buckets: number;
     fileSize: number;

src/routes/(console)/organization-[organization]/+page.svelte

@@ -240,5 +240,5 @@
 <CreateOrganization bind:show={addOrganization} />
 <CreateProject bind:show={showCreate} teamId={page.params.organization} />
 {#if showCreateProjectCloud}
-    <CreateProjectCloud bind:showCreateProjectCloud regions={$regionsStore.regions} />
+    <CreateProjectCloud projects={data.projects.total} bind:showCreateProjectCloud regions={$regionsStore.regions} />
 {/if}

src/routes/(console)/organization-[organization]/createProjectCloud.svelte

@@ -17,6 +17,7 @@
     const teamId = page.params.organization;
     export let regions: Array<Region> = [];
     export let showCreateProjectCloud: boolean;
+    export let projects: number;
 
     async function onFinish() {
         await invalidate(Dependencies.FUNCTIONS);
@@ -62,6 +63,7 @@
 
 <Modal bind:show={showCreateProjectCloud} title={'Create project'} onSubmit={create}>
     <CreateProject
+        projects={projects}
         showTitle={false}
         bind:id={$createProject.id}
         bind:projectName={$createProject.name}