Merge branch 'main' into fix-preferences

Author: ItzNotABug

src/lib/images/promos/bulk-api-dark.png

@@ -6,43 +6,43 @@ import {
     setMobileSingleAlertLayout
 } from '$lib/stores/bottom-alerts';
 
-import CSVImportDark from '$lib/images/promos/csv-import-placeholder-dark.png';
-import CSVImportLight from '$lib/images/promos/csv-import-placeholder-light.png';
+import BulkApiDark from '$lib/images/promos/bulk-api-dark.png';
+import BulkApiLight from '$lib/images/promos/bulk-api-light.png';
 
 const listOfPromotions: BottomModalAlertItem[] = [];
 
 if (isCloud) {
-    const csvImportPromo: BottomModalAlertItem = {
-        id: 'modal:csv_import_announcement',
+    const bulkApiPromo: BottomModalAlertItem = {
+        id: 'modal:bulk_api_announcement',
         src: {
-            dark: CSVImportDark,
-            light: CSVImportLight
+            dark: BulkApiDark,
+            light: BulkApiLight
         },
-        title: 'Introducing CSV import',
+        title: 'Introducing Bulk API',
         message:
-            "We're introducing a new way to populate your Appwrite databases: document imports from CSV files.",
+            'A new Appwrite Databases feature, explicitly designed to handle heavy write workloads.',
         plan: 'free',
         importance: 8,
-        scope: 'everywhere',
+        scope: 'project',
         cta: {
             text: 'Read announcement',
-            link: () => 'https://appwrite.io/blog/post/announcing-csv-imports',
+            link: () => 'https://appwrite.io/blog/post/announcing-bulk-api',
             external: true,
             hideOnClick: true
         },
         show: true
     };
 
-    listOfPromotions.push(csvImportPromo);
+    listOfPromotions.push(bulkApiPromo);
 
     setMobileSingleAlertLayout({
-        title: csvImportPromo.title,
-        message: csvImportPromo.message,
+        title: bulkApiPromo.title,
+        message: bulkApiPromo.message,
         enabled: true,
         cta: {
-            link: csvImportPromo.cta.link,
-            external: csvImportPromo.cta.external,
-            hideOnClick: csvImportPromo.cta.hideOnClick
+            link: bulkApiPromo.cta.link,
+            external: bulkApiPromo.cta.external,
+            hideOnClick: bulkApiPromo.cta.hideOnClick
         }
     });
 }

src/lib/images/promos/bulk-api-light.png

@@ -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>

src/lib/images/promos/csv-import-placeholder-dark.png

@@ -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

src/lib/images/promos/csv-import-placeholder-light.png

@@ -158,8 +158,8 @@
                             </Layout.Stack>
                         </button>
                         <Typography.Text color="--fgcolor-neutral-tertiary">
-                            Indicate whether this attribute is encrypted. Encrypted attributes
-                            cannot be queried.
+                            Protect attribute against data leaks for best privacy compliance.
+                            Encrypted attributes cannot be queried.
                         </Typography.Text>
                     </Layout.Stack>