fix(sites): block GitHub repo create when site limit reached

src/routes/(console)/project-[region]-[project]/sites/+page.svelte

@@ -11,7 +11,7 @@
     import { isServiceLimited } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
     import { canWriteSites } from '$lib/stores/roles.js';
-    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { Icon, Layout, Tooltip } from '@appwrite.io/pink-svelte';
     import { Button } from '$lib/elements/forms';
     import { app } from '$lib/stores/app';
     import CreateSiteModal from './createSiteModal.svelte';
@@ -27,20 +27,25 @@
     import { Dependencies } from '$lib/constants';
     import { realtime } from '$lib/stores/sdk';
     import { page } from '$app/state';
+    import {
+        BODY_TOOLTIP_MAX_WIDTH,
+        BODY_TOOLTIP_WRAPPER_STYLE_PRELINE
+    } from '$lib/helpers/tooltipContent';
 
     export let data;
 
     let show = false;
 
+    $: isLimited = isServiceLimited('sites', $organization, data.siteList?.total);
+
     $: $registerCommands([
         {
             label: 'Create site',
             callback: () => {
                 show = true;
             },
             keys: ['c'],
-            disabled:
-                isServiceLimited('sites', $organization, data.siteList?.total) || !$canWriteSites,
+            disabled: isLimited || !$canWriteSites,
             icon: IconPlus,
             group: 'sites'
         }
@@ -70,10 +75,25 @@
                 hideColumns
                 hideView={!data.siteList.total} />
             {#if $canWriteSites}
-                <Button on:mousedown={() => (show = true)} event="create_site" size="s">
-                    <Icon icon={IconPlus} slot="start" size="s" />
-                    Create site
-                </Button>
+                <Tooltip disabled={!isLimited} maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
+                    <div>
+                        <Button
+                            disabled={isLimited}
+                            on:mousedown={() => {
+                                if (!isLimited) show = true;
+                            }}
+                            event="create_site"
+                            size="s">
+                            <Icon icon={IconPlus} slot="start" size="s" />
+                            Create site
+                        </Button>
+                    </div>
+                    <svelte:fragment slot="tooltip">
+                        <div style={BODY_TOOLTIP_WRAPPER_STYLE_PRELINE}>
+                            You have reached the maximum number of sites for your plan.
+                        </div>
+                    </svelte:fragment>
+                </Tooltip>
             {/if}
         </Layout.Stack>
     </Layout.Stack>
@@ -93,12 +113,14 @@
     {:else}
         <Empty
             single
-            allowCreate={$canWriteSites}
+            allowCreate={$canWriteSites && !isLimited}
             href="https://appwrite.io/docs/products/sites"
             description="Deploy and manage your web applications with Sites. "
             target="site"
             src={$app.themeInUse === 'dark' ? EmptyDark : EmptyLight}
-            on:click={() => (show = true)}>
+            on:click={() => {
+                if (!isLimited) show = true;
+            }}>
         </Empty>
     {/if}
 </Container>

src/routes/(console)/project-[region]-[project]/sites/create-site/templates/template-[template]/+page.svelte

@@ -46,9 +46,15 @@
     import { regionalConsoleVariables } from '$routes/(console)/project-[region]-[project]/store';
     import { getTemplateSourceUrl } from '$lib/helpers/templateSource';
     import { validateVariables } from '$lib/helpers/variables';
+    import { isServiceLimited } from '$lib/stores/billing';
+    import { organization } from '$lib/stores/organization';
+    import { isCloud } from '$lib/system';
 
     export let data;
 
+    $: sitesLimited =
+        isCloud && isServiceLimited('sites', $organization, data.siteList?.total ?? 0);
+
     let showExitModal = false;
     let isCreatingRepository = false;
     let hasInstallations = !!data?.installations?.total;
@@ -81,6 +87,15 @@
     });
 
     async function createRepository() {
+        if (sitesLimited) {
+            addNotification({
+                type: 'error',
+                message:
+                    'The maximum number of sites allowed for the selected plan has been reached. Upgrade to increase the limit.'
+            });
+            return;
+        }
+
         try {
             isCreatingRepository = true;
             const repo = await sdk
@@ -294,7 +309,8 @@
                                             on:click={createRepository}
                                             forceShowLoader
                                             submissionLoader={isCreatingRepository}
-                                            disabled={!repositoryName ||
+                                            disabled={sitesLimited ||
+                                                !repositoryName ||
                                                 !$installation?.$id ||
                                                 isCreatingRepository}>
                                             Create

src/routes/(console)/project-[region]-[project]/sites/create-site/templates/template-[template]/+page.ts

@@ -1,13 +1,15 @@
 import { sdk } from '$lib/stores/sdk';
-import { ID } from '@appwrite.io/console';
+import { ID, Query } from '@appwrite.io/console';
 import { buildVerboseDomain } from '../../store.js';
 
 export const load = async ({ parent, params }) => {
     const { installations, frameworks, project, organization, regionalConsoleVariables } =
         await parent();
-    const template = await sdk
-        .forProject(params.region, params.project)
-        .sites.getTemplate({ templateId: params.template });
+    const projectSdk = sdk.forProject(params.region, params.project);
+    const [template, siteList] = await Promise.all([
+        projectSdk.sites.getTemplate({ templateId: params.template }),
+        projectSdk.sites.list({ queries: [Query.limit(1)] })
+    ]);
     const domain = await buildVerboseDomain(
         regionalConsoleVariables._APP_DOMAIN_SITES,
         template.name,
@@ -20,6 +22,7 @@ export const load = async ({ parent, params }) => {
         installations,
         frameworks,
         template,
-        domain
+        domain,
+        siteList
     };
 };