From 359359e95c41f7bd14650ca23d98870486419863 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Wed, 2 Jul 2025 13:42:48 +0530
Subject: [PATCH] fix: add tooltip on disabled button

---
 .../organization-[organization]/header.svelte | 35 ++++++++++++-----
 .../members/+page.svelte                      | 39 ++++++++++++++-----
 2 files changed, 56 insertions(+), 18 deletions(-)

diff --git a/src/routes/(console)/organization-[organization]/header.svelte b/src/routes/(console)/organization-[organization]/header.svelte
index 01b2687aa..f114dcc22 100644
--- a/src/routes/(console)/organization-[organization]/header.svelte
+++ b/src/routes/(console)/organization-[organization]/header.svelte
@@ -7,7 +7,13 @@
     import { toLocaleDate } from '$lib/helpers/date';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover } from '$lib/layout';
-    import { daysLeftInTrial, getServiceLimit, plansInfo, readOnly } from '$lib/stores/billing';
+    import {
+        daysLeftInTrial,
+        getServiceLimit,
+        plansInfo,
+        readOnly,
+        tierToPlan
+    } from '$lib/stores/billing';
     import { members, newMemberModal, type Organization } from '$lib/stores/organization';
     import {
         canSeeBilling,
@@ -114,14 +120,25 @@
                     {/if}
 
                     {#if $isOwner}
-                        <Button
-                            secondary
-                            size="s"
-                            on:click={() => newMemberModal.set(true)}
-                            disabled={areMembersLimited}>
-                            <Icon icon={IconPlus} size="s" slot="start" />
-                            Invite
-                        </Button>
+                        <Tooltip disabled={!areMembersLimited} placement="bottom-end">
+                            <div>
+                                <Button
+                                    secondary
+                                    size="s"
+                                    on:click={() => newMemberModal.set(true)}
+                                    disabled={areMembersLimited}>
+                                    <Icon icon={IconPlus} size="s" slot="start" />
+                                    Invite
+                                </Button>
+                            </div>
+                            <div slot="tooltip">
+                                {organization?.billingPlan === BillingPlan.FREE
+                                    ? 'Upgrade to add more members'
+                                    : `You've reached the members limit for the ${
+                                          tierToPlan(organization?.billingPlan)?.name
+                                      } plan`}
+                            </div>
+                        </Tooltip>
                     {/if}
                 </Layout.Stack>
             </div>
diff --git a/src/routes/(console)/organization-[organization]/members/+page.svelte b/src/routes/(console)/organization-[organization]/members/+page.svelte
index c906ece51..abc2360b3 100644
--- a/src/routes/(console)/organization-[organization]/members/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/members/+page.svelte
@@ -31,8 +31,11 @@
         Icon,
         Typography,
         Popover,
-        ActionMenu
+        ActionMenu,
+        Tooltip
     } from '@appwrite.io/pink-svelte';
+    import { BillingPlan } from '$lib/constants';
+    import { tierToPlan } from '$lib/stores/billing';
 
     export let data;
 
@@ -41,6 +44,13 @@
     let showEdit = false;
     let showDropdown = [];
 
+    // Calculate if button should be disabled and tooltip should show
+    $: memberCount = data.organizationMembers?.total ?? 0;
+    $: isFreeWithMembers = $organization?.billingPlan === BillingPlan.FREE && memberCount >= 1;
+    $: isButtonDisabled = isCloud
+        ? isFreeWithMembers || !$currentPlan?.addons?.seats?.supported
+        : false;
+
     const resend = async (member: Models.Membership) => {
         try {
             await sdk.forConsole.teams.createMembership(
@@ -70,14 +80,25 @@
 <Container>
     <Layout.Stack direction="row" justifyContent="space-between">
         <Typography.Title>Members</Typography.Title>
-        <ConsoleButton
-            size="s"
-            event="create_user"
-            on:click={() => newMemberModal.set(true)}
-            disabled={isCloud ? !$currentPlan?.addons?.seats?.supported : false}>
-            <Icon size="s" icon={IconPlus} slot="start" />
-            <span class="text">Invite</span>
-        </ConsoleButton>
+        <Tooltip disabled={!isButtonDisabled} placement="bottom-end">
+            <div>
+                <ConsoleButton
+                    size="s"
+                    event="create_user"
+                    on:click={() => newMemberModal.set(true)}
+                    disabled={isButtonDisabled}>
+                    <Icon size="s" icon={IconPlus} slot="start" />
+                    <span class="text">Invite</span>
+                </ConsoleButton>
+            </div>
+            <div slot="tooltip">
+                {$organization?.billingPlan === BillingPlan.FREE
+                    ? 'Upgrade to add more members'
+                    : `You've reached the members limit for the ${
+                          tierToPlan($organization?.billingPlan)?.name
+                      } plan`}
+            </div>
+        </Tooltip>
     </Layout.Stack>
 
     <Table.Root