Merge pull request #1778 from appwrite/fix-memberships-invite

Fix: showing invite on a free plan

src/lib/layout/containerHeader.svelte

@@ -28,6 +28,8 @@
     export let total: number = null;
     export let alertType: 'info' | 'success' | 'warning' | 'error' | 'default' = 'warning';
     export let showAlert = true;
+    export let level: 'organization' | 'project' = 'project';
+    export let customPillText: string | undefined = undefined;
 
     export let buttonText: string = null;
     export let buttonMethod: () => void = null;
@@ -63,6 +65,8 @@
     const dispatch = createEventDispatcher();
 
     $: tier = tierToPlan($organization?.billingPlan)?.name;
+    // these can be organization level limitations as well.
+    // we need to migrate this sometime later, but soon!
     $: hasProjectLimitation =
         checkForProjectLimitation(serviceId) && $organization?.billingPlan === BillingPlan.FREE;
     $: hasUsageFees = hasProjectLimitation
@@ -129,7 +133,12 @@
             <DropList bind:show={showDropdown} width="16">
                 {#if hasProjectLimitation}
                     <Pill button on:click={() => (showDropdown = !showDropdown)}>
-                        <span class="icon-info" />{total}/{limit} created
+                        <span class="icon-info" />
+                        {#if customPillText}
+                            {customPillText}
+                        {:else}
+                            {total}/{limit} created
+                        {/if}
                     </Pill>
                 {:else if $organization?.billingPlan !== BillingPlan.SCALE}
                     <Pill button on:click={() => (showDropdown = !showDropdown)}>
@@ -139,9 +148,10 @@
                 <svelte:fragment slot="list">
                     <slot name="tooltip" {limit} {tier} {title} {upgradeMethod} {hasUsageFees}>
                         {#if hasProjectLimitation}
+                            {@const count = limit > 1 ? serviceId : serviceId.replace('s', '')}
                             <p class="text">
                                 You are limited to {limit}
-                                {title.toLocaleLowerCase()} per project on the {tier} plan.
+                                {count} per {level} on the {tier} plan.
                                 {#if $organization?.billingPlan === BillingPlan.FREE}<Button
                                         link
                                         href={$upgradeURL}

src/lib/stores/billing.ts

@@ -149,6 +149,14 @@ export function getServiceLimit(serviceId: PlanServices, tier: Tier = null, plan
     const info = get(plansInfo);
     if (!info) return 0;
     plan ??= info.get(tier ?? get(organization)?.billingPlan);
+    // members are no longer a variable on plan itself!
+    // the correct info for members/seats, resides in `addons`.
+    // plan > addons > seats/others
+    if (serviceId === 'members') {
+        // some don't include `limit`, so we fallback!
+        return plan?.['addons']['seats']['limit'] ?? 1;
+    }
+
     return plan?.[serviceId] ?? 0;
 }
 

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

@@ -23,7 +23,7 @@
     import { Container, ContainerHeader } from '$lib/layout';
     import { getRoleLabel } from '$lib/stores/billing';
     import { addNotification } from '$lib/stores/notifications';
-    import { newMemberModal, organization } from '$lib/stores/organization';
+    import { currentPlan, newMemberModal, organization } from '$lib/stores/organization';
     import { isOwner } from '$lib/stores/roles';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
@@ -69,10 +69,12 @@
     {#if data.organizationMembers.total}
         <ContainerHeader
             title="Members"
+            level="organization"
             total={data.organizationMembers.total}
             buttonText={$isOwner ? 'Invite' : ''}
             buttonMethod={() => newMemberModal.set(true)}
-            showAlert={false} />
+            customPillText="Members limited"
+            buttonDisabled={!$currentPlan?.addons?.seats?.supported} />
 
         <TableScroll>
             <TableHeader>