Merge pull request #1829 from appwrite/feat-project-changes

Author: ItzNotABug

src/lib/components/billing/alerts/projectsLimit.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import { page } from '$app/state';
+    import { Click } from '$lib/actions/analytics';
+    import { Button } from '$lib/elements/forms';
+    import { HeaderAlert } from '$lib/layout';
+    import {
+        billingProjectsLimitDate,
+        hideBillingHeaderRoutes,
+        upgradeURL
+    } from '$lib/stores/billing';
+    import { currentPlan } from '$lib/stores/organization';
+    import { onMount } from 'svelte';
+    import SelectProjectCloud from './selectProjectCloud.svelte';
+    import { toLocaleDate } from '$lib/helpers/date';
+    let showSelectProject: boolean = $state(false);
+    let selectedProjects: string[] = $state([]);
+    onMount(() => {
+        selectedProjects = page.data.organization?.projects || [];
+    });
+</script>
+
+<SelectProjectCloud bind:showSelectProject bind:selectedProjects />
+
+{#if $currentPlan && $currentPlan.projects > 0 && !hideBillingHeaderRoutes.includes(page.url.pathname)}
+    <HeaderAlert
+        type="warning"
+        title="Action required: You have more than {$currentPlan.projects} projects.">
+        <svelte:fragment>
+            Choose which projects to keep before {toLocaleDate(billingProjectsLimitDate)} or upgrade
+            to Pro. Projects over the limit will be blocked after this date.
+        </svelte:fragment>
+        <svelte:fragment slot="buttons">
+            <Button
+                compact
+                on:click={() => {
+                    showSelectProject = true;
+                }}>Manage projects</Button>
+            <Button
+                href={$upgradeURL}
+                event={Click.OrganizationClickUpgrade}
+                eventData={{
+                    from: 'button',
+                    source: 'projects_limit_banner'
+                }}
+                secondary
+                fullWidthMobile>
+                <span class="text">Upgrade</span>
+            </Button>
+        </svelte:fragment>
+    </HeaderAlert>
+{/if}

src/lib/components/billing/alerts/selectProjectCloud.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+    import { type Models } from '@appwrite.io/console';
+    import { Alert, Button, Table } from '@appwrite.io/pink-svelte';
+    import { Modal } from '$lib/components';
+    import { onMount } from 'svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { billingProjectsLimitDate } from '$lib/stores/billing';
+    import { page } from '$app/state';
+    import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
+    import { currentPlan } from '$lib/stores/organization';
+
+    let {
+        showSelectProject = $bindable(false),
+        selectedProjects = $bindable([])
+    }: {
+        showSelectProject: boolean;
+        selectedProjects: string[];
+    } = $props();
+
+    let projects = $state<Array<Models.Project>>([]);
+    let error = $state<string | null>(null);
+
+    onMount(() => {
+        projects = page.data.projects?.projects || [];
+    });
+
+    let projectsToArchive = $derived(
+        projects.filter((project) => !selectedProjects.includes(project.$id))
+    );
+
+    async function updateSelected() {
+        try {
+            await sdk.forConsole.billing.updateSelectedProjects(
+                projects[0].teamId,
+                selectedProjects
+            );
+            showSelectProject = false;
+            invalidate(Dependencies.ORGANIZATION);
+            addNotification({
+                type: 'success',
+                message: `Projects updated for archiving`
+            });
+        } catch (e) {
+            error = e.message;
+        }
+    }
+
+    function formatProjectsToArchive() {
+        let result = '';
+
+        projectsToArchive.forEach((project, index) => {
+            const text = `${index === 0 ? '' : ' '}<b>${project.name}</b> `;
+            result += text;
+
+            if (index < projectsToArchive.length - 1) {
+                if (index == projectsToArchive.length - 2) {
+                    result += 'and ';
+                }
+                if (index < projectsToArchive.length - 2) {
+                    result += ', ';
+                }
+            }
+        });
+
+        return result;
+    }
+</script>
+
+<Modal bind:show={showSelectProject} title={'Manage projects'} onSubmit={updateSelected}>
+    <svelte:fragment slot="description">
+        Choose which two projects to keep. Projects over the limit will be blocked after this date.
+    </svelte:fragment>
+    {#if error}
+        <Alert.Inline status="error" title="Error">{error}</Alert.Inline>
+    {/if}
+    <Table.Root
+        let:root
+        allowSelection
+        bind:selectedRows={selectedProjects}
+        columns={[{ id: 'name' }, { id: 'created' }]}>
+        <svelte:fragment slot="header" let:root>
+            <Table.Header.Cell column="name" {root}>Project Name</Table.Header.Cell>
+            <Table.Header.Cell column="created" {root}>Created</Table.Header.Cell>
+        </svelte:fragment>
+        {#each projects as project}
+            <Table.Row.Base {root} id={project.$id}>
+                <Table.Cell column="name" {root}>{project.name}</Table.Cell>
+                <Table.Cell column="created" {root}
+                    >{toLocaleDateTime(project.$createdAt)}</Table.Cell>
+            </Table.Row.Base>
+        {/each}
+    </Table.Root>
+    {#if selectedProjects.length > $currentPlan?.projects}
+        <div class="u-text-warning u-mb-4">
+            You can only select {$currentPlan?.projects} projects. Please deselect others to continue.
+        </div>
+    {/if}
+    {#if selectedProjects.length === $currentPlan?.projects}
+        <Alert.Inline
+            status="warning"
+            title={`${projects.length - selectedProjects.length} projects will be archived on ${toLocaleDate(billingProjectsLimitDate)}`}>
+            <span>
+                {@html formatProjectsToArchive()}
+                will be archived.
+            </span>
+        </Alert.Inline>
+    {/if}
+    <svelte:fragment slot="footer">
+        <Button.Button size="s" variant="secondary" on:click={() => (showSelectProject = false)}
+            >Cancel</Button.Button>
+        <Button.Button size="s" disabled={selectedProjects.length !== $currentPlan?.projects}
+            >Save</Button.Button>
+    </svelte:fragment>
+</Modal>

src/lib/components/gridItem1.svelte

@@ -14,7 +14,7 @@
                     <slot name="subtitle" />
                 </div>
             </Layout.Stack>
-            <Layout.Stack direction="row" justifyContent="flex-end" alignItems="center">
+            <Layout.Stack direction="row" justifyContent="flex-end" alignItems="flex-start">
                 <slot name="status" />
             </Layout.Stack>
         </Layout.Stack>

src/lib/layout/createProject.svelte

@@ -1,19 +1,39 @@
 <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 { 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';
     import type { Models } from '@appwrite.io/console';
     import { filterRegions } from '$lib/helpers/regions';
+    import type { Snippet } from 'svelte';
 
-    export let projectName: string;
-    export let id: string;
-    export let regions: Array<Models.ConsoleRegion> = [];
-    export let region: string;
-    export let showTitle = true;
+    let {
+        projectName = $bindable(''),
+        id = $bindable(''),
+        regions = [],
+        region = $bindable(''),
+        showTitle = true,
+        projects = undefined,
+        submit
+    }: {
+        projectName: string;
+        id: string;
+        regions: Array<Models.ConsoleRegion>;
+        region: string;
+        showTitle: boolean;
+        projects?: number;
+        submit?: Snippet;
+    } = $props();
 
-    let showCustomId = false;
+    let showCustomId = $state(false);
+    let projectsLimited = $derived(
+        $currentPlan?.projects > 0 && projects && projects >= $currentPlan?.projects
+    );
 </script>
 
 <svelte:head>
@@ -26,10 +46,24 @@
     {#if showTitle}
         <Typography.Title size="l">Create your project</Typography.Title>
     {/if}
+    {#if projectsLimited}
+        <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
+                    compact
+                    size="s"
+                    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">
                 <Input.Text
+                    disabled={projectsLimited}
                     label="Name"
                     placeholder="Project name"
                     required
@@ -49,6 +83,7 @@
             {#if isCloud && regions.length > 0}
                 <Layout.Stack gap="xs">
                     <Input.Select
+                        disabled={projectsLimited}
                         required
                         bind:value={region}
                         placeholder="Select a region"
@@ -59,5 +94,5 @@
             {/if}
         </Layout.Stack>
     </Layout.Stack>
-    <slot name="submit"></slot>
+    {@render submit?.()}
 </Layout.Stack>

src/lib/sdk/billing.ts

@@ -313,6 +313,7 @@ export type Plan = {
     webhooks: number;
     users: number;
     teams: number;
+    projects: number;
     databases: number;
     databasesAllowEncrypt: boolean;
     buckets: number;
@@ -592,6 +593,25 @@ export class Billing {
         );
     }
 
+    async updateSelectedProjects(
+        organizationId: string,
+        projects: string[]
+    ): Promise<Organization> {
+        const path = `/organizations/${organizationId}/projects`;
+        const params = {
+            projects
+        };
+        const uri = new URL(this.client.config.endpoint + path);
+        return await this.client.call(
+            'patch',
+            uri,
+            {
+                'content-type': 'application/json'
+            },
+            params
+        );
+    }
+
     async setOrganizationPaymentMethod(
         organizationId: string,
         paymentMethodId: string

src/lib/stores/billing.ts

@@ -39,6 +39,7 @@ import { sdk } from './sdk';
 import { user } from './user';
 import BudgetLimitAlert from '$routes/(console)/organization-[organization]/budgetLimitAlert.svelte';
 import TeamReadonlyAlert from '$routes/(console)/organization-[organization]/teamReadonlyAlert.svelte';
+import ProjectsLimit from '$lib/components/billing/alerts/projectsLimit.svelte';
 import EnterpriseTrial from '$routes/(console)/organization-[organization]/enterpriseTrial.svelte';
 
 export type Tier = 'tier-0' | 'tier-1' | 'tier-2' | 'auto-1' | 'cont-1' | 'ent-1';
@@ -68,6 +69,7 @@ export const roles = [
 
 export const teamStatusReadonly = 'readonly';
 export const billingLimitOutstandingInvoice = 'outstanding_invoice';
+export const billingProjectsLimitDate = '2024-09-01';
 
 export const paymentMethods = derived(page, ($page) => $page.data.paymentMethods as PaymentList);
 export const addressList = derived(page, ($page) => $page.data.addressList as AddressesList);
@@ -315,6 +317,24 @@ export function calculateTrialDay(org: Organization) {
     return days;
 }
 
+export async function checkForProjectsLimit(org: Organization, projects: number) {
+    if (!isCloud) return;
+    if (!org || !projects) return;
+    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 (plan.projects > 0 && projects > plan.projects) {
+        headerAlert.add({
+            id: 'projectsLimitReached',
+            component: ProjectsLimit,
+            show: true,
+            importance: 12
+        });
+    }
+}
+
 export async function checkForUsageLimit(org: Organization) {
     if (org?.status === teamStatusReadonly && org?.remarks === billingLimitOutstandingInvoice) {
         headerAlert.add({

src/lib/stores/organization.ts

@@ -34,6 +34,7 @@ export type Organization = Models.Team<Record<string, unknown>> & {
     billingInvoiceId: string;
     status: string;
     remarks: string;
+    projects: string[];
 };
 
 export type OrganizationList = {
@@ -60,5 +61,4 @@ export const organizationList = derived(
 export const organization = derived(page, ($page) => $page.data?.organization as Organization);
 export const currentPlan = derived(page, ($page) => $page.data?.currentPlan as Plan);
 export const members = derived(page, ($page) => $page.data.members as Models.MembershipList);
-
 export const regions = writable<Models.ConsoleRegionList>({ total: 0, regions: [] });

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

@@ -18,6 +18,7 @@
         checkForMarkedForDeletion,
         checkForMissingPaymentMethod,
         checkForNewDevUpgradePro,
+        checkForProjectsLimit,
         checkForUsageLimit,
         checkPaymentAuthorizationRequired,
         paymentExpired,
@@ -296,6 +297,7 @@
         if (currentOrganizationId === org.$id) return;
         if (isCloud) {
             currentOrganizationId = org.$id;
+            checkForProjectsLimit(org, data.projects?.projects?.length || 0);
             checkForEnterpriseTrial(org);
             await checkForUsageLimit(org);
             checkForMarkedForDeletion(org);