From dc7122545336a2bfa4948c61da6550a682e697f3 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 27 Jul 2023 15:49:52 +0200
Subject: [PATCH] feat: small refactor container header, member page plan limit

---
 src/lib/layout/containerHeader.svelte           | 17 +++++++++++++++--
 .../members/+page.svelte                        | 11 +++++------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/lib/layout/containerHeader.svelte b/src/lib/layout/containerHeader.svelte
index 4b41fac21..ada1cbcd1 100644
--- a/src/lib/layout/containerHeader.svelte
+++ b/src/lib/layout/containerHeader.svelte
@@ -9,11 +9,16 @@
     import { wizard } from '$lib/stores/wizard';
     import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
     import { limitRates } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
 
     export let title: string;
     export let serviceId = title.toLocaleLowerCase();
     export let totalUse: number = null;
 
+    export let buttonText: string = null;
+    export let buttonMethod: () => void = null;
+    export let buttonEvent: string = buttonText?.toLocaleLowerCase();
+
     let tooltipContent: HTMLDivElement;
 
     $: limit = limitRates?.[$organization?.billingPlan]?.find((l) => l.id === serviceId)?.amount;
@@ -21,7 +26,7 @@
     $: tier = tierToPlan($organization?.billingPlan as Tier)?.name;
 </script>
 
-{#if isCloud && totalUse && limit !== 'unlimited' && limit <= totalUse}
+{#if isCloud && totalUse && limit !== 'unlimited' && totalUse >= limit}
     <Alert type="warning">
         <span class="text">
             You've reached the maximum number of {title.toLowerCase()} for the {tier} plan.
@@ -57,7 +62,15 @@
         {/if}
     </div>
 
-    <slot />
+    <slot>
+        <Button
+            on:click={buttonMethod}
+            event={buttonEvent}
+            disabled={limit !== 'unlimited' && totalUse >= limit}>
+            <span class="icon-plus" aria-hidden="true" />
+            <span class="text">{buttonText}</span>
+        </Button>
+    </slot>
 </div>
 
 {#if isCloud}
diff --git a/src/routes/console/organization-[organization]/members/+page.svelte b/src/routes/console/organization-[organization]/members/+page.svelte
index 8343f5a8c..974d84cdf 100644
--- a/src/routes/console/organization-[organization]/members/+page.svelte
+++ b/src/routes/console/organization-[organization]/members/+page.svelte
@@ -57,12 +57,11 @@
 
 <Container>
     {#if data.organizationMembers.total}
-        <ContainerHeader title="Members" totalUse={data.organizationMembers.total}>
-            <Button on:click={() => newMemberModal.set(true)} event="invite">
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Invite</span>
-            </Button>
-        </ContainerHeader>
+        <ContainerHeader
+            title="Members"
+            totalUse={data.organizationMembers.total}
+            buttonText="Invite"
+            buttonMethod={() => newMemberModal.set(true)} />
 
         <TableScroll>
             <TableHeader>