From 5ce7bdbb3de85cef19dc5066087dc637866d08f7 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 27 Jul 2023 15:40:25 +0200
Subject: [PATCH] feat: container header fix

---
 src/lib/constants.ts                          | 208 ++++++++++++++++++
 src/lib/layout/containerHeader.svelte         |  34 ++-
 .../members/+page.svelte                      |   2 +-
 .../cloudOrganizationChangeTier/step1.svelte  |   2 +-
 4 files changed, 235 insertions(+), 11 deletions(-)

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index ae142ca22..37c5f15e7 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -356,3 +356,211 @@ export const usageRates = {
         }
     ]
 };
+
+//resources: bandwidth, buckets, file size limit, functions, executions, users,teams, members, apps, webhooks, databases, connections, messages
+export const limitRates = {
+    'tier-0': [
+        {
+            id: 'bandwith',
+            amount: 10,
+            unit: 'GB'
+        },
+        {
+            id: 'buckets',
+            amount: 3,
+            unit: ''
+        },
+        {
+            id: 'file-size-limit',
+            amount: 50,
+            unit: 'MB'
+        },
+        {
+            id: 'functions',
+            amount: 1,
+            unit: ''
+        },
+        {
+            id: 'executions',
+            amount: 750000,
+            unit: 'executions'
+        },
+        {
+            id: 'users',
+            amount: 200000,
+            unit: 'AU'
+        },
+
+        {
+            id: 'teams',
+            amount: 1,
+            unit: ''
+        },
+        {
+            id: 'members',
+            amount: 1,
+            unit: ''
+        },
+        {
+            id: 'apps',
+            amount: 1,
+            unit: ''
+        },
+        {
+            id: 'webhooks',
+            amount: 1,
+            unit: ''
+        },
+        {
+            id: 'databases',
+            amount: 1,
+            unit: ''
+        },
+        {
+            id: 'connections',
+            amount: 1,
+            unit: ''
+        },
+        {
+            id: 'messages',
+            amount: 1,
+            unit: ''
+        }
+    ],
+    'tier-1': [
+        {
+            id: 'bandwith',
+            amount: 10,
+            unit: 'GB'
+        },
+        {
+            id: 'buckets',
+            amount: 1,
+            unit: ''
+        },
+        {
+            id: 'file-size-limit',
+            amount: 5,
+            unit: 'MB'
+        },
+        {
+            id: 'functions',
+            amount: 1,
+            unit: ''
+        },
+        {
+            id: 'executions',
+            amount: 750000,
+            unit: 'executions'
+        },
+        {
+            id: 'users',
+            amount: 200000,
+            unit: 'AU'
+        },
+
+        {
+            id: 'teams',
+            amount: 1,
+            unit: ''
+        },
+        {
+            id: 'members',
+            amount: 1,
+            unit: ''
+        },
+        {
+            id: 'apps',
+            amount: 1,
+            unit: ''
+        },
+        {
+            id: 'webhooks',
+            amount: 1,
+            unit: ''
+        },
+        {
+            id: 'databases',
+            amount: 1,
+            unit: ''
+        },
+        {
+            id: 'connections',
+            amount: 1,
+            unit: ''
+        },
+        {
+            id: 'messages',
+            amount: 1,
+            unit: ''
+        }
+    ],
+    'tier-2': [
+        {
+            id: 'bandwith',
+            amount: 10,
+            unit: 'GB'
+        },
+        {
+            id: 'buckets',
+            amount: 1,
+            unit: ''
+        },
+        {
+            id: 'file-size-limit',
+            amount: 5,
+            unit: 'MB'
+        },
+        {
+            id: 'functions',
+            amount: 1,
+            unit: ''
+        },
+        {
+            id: 'executions',
+            amount: 750000,
+            unit: 'executions'
+        },
+        {
+            id: 'users',
+            amount: 200000,
+            unit: 'AU'
+        },
+
+        {
+            id: 'teams',
+            amount: 1,
+            unit: ''
+        },
+        {
+            id: 'members',
+            amount: 1,
+            unit: ''
+        },
+        {
+            id: 'apps',
+            amount: 1,
+            unit: ''
+        },
+        {
+            id: 'webhooks',
+            amount: 1,
+            unit: ''
+        },
+        {
+            id: 'databases',
+            amount: 1,
+            unit: ''
+        },
+        {
+            id: 'connections',
+            amount: 1,
+            unit: ''
+        },
+        {
+            id: 'messages',
+            amount: 1,
+            unit: ''
+        }
+    ]
+};
diff --git a/src/lib/layout/containerHeader.svelte b/src/lib/layout/containerHeader.svelte
index 529be11d6..4b41fac21 100644
--- a/src/lib/layout/containerHeader.svelte
+++ b/src/lib/layout/containerHeader.svelte
@@ -1,24 +1,40 @@
 <script lang="ts">
     import { tierToPlan, type Tier } from '$lib/stores/billing';
     import { tooltip } from '$lib/actions/tooltip';
-    import { Heading } from '$lib/components';
+    import { Alert, Heading } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { organization } from '$lib/stores/organization';
     import { isCloud } from '$lib/system';
     import { tick } from 'svelte';
     import { wizard } from '$lib/stores/wizard';
     import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
+    import { limitRates } from '$lib/constants';
 
     export let title: string;
+    export let serviceId = title.toLocaleLowerCase();
+    export let totalUse: number = null;
 
     let tooltipContent: HTMLDivElement;
 
-    // TODO: fix limit
-    const limit = 1000;
+    $: limit = limitRates?.[$organization?.billingPlan]?.find((l) => l.id === serviceId)?.amount;
 
     $: tier = tierToPlan($organization?.billingPlan as Tier)?.name;
 </script>
 
+{#if isCloud && totalUse && limit !== 'unlimited' && limit <= totalUse}
+    <Alert type="warning">
+        <span class="text">
+            You've reached the maximum number of {title.toLowerCase()} for the {tier} plan.
+            <button
+                class="link"
+                type="button"
+                on:click|preventDefault={() => wizard.start(ChangeOrganizationTierCloud)}
+                >Upgrade</button>
+            for additional {title.toLocaleLowerCase()}.
+        </span>
+    </Alert>
+{/if}
+
 <div class="u-flex u-gap-12 common-section u-main-space-between">
     <div class="u-flex u-cross-child-center u-gap-16">
         <Heading tag="h2" size="5">{title}</Heading>
@@ -50,13 +66,13 @@
             <p class="text">
                 Your are limited to {limit}
                 {title.toLocaleLowerCase()} per project on the {tier}.
+                <button
+                    class="link"
+                    type="button"
+                    on:click|preventDefault={() => wizard.start(ChangeOrganizationTierCloud)}
+                    >Upgrade</button>
+                for addtional {title.toLocaleLowerCase()}.
             </p>
-            <button
-                class="link"
-                type="button"
-                on:click|preventDefault={() => wizard.start(ChangeOrganizationTierCloud)}
-                >Upgrade</button>
-            for addtional {title.toLocaleLowerCase()}.
         </div>
     </div>
 {/if}
diff --git a/src/routes/console/organization-[organization]/members/+page.svelte b/src/routes/console/organization-[organization]/members/+page.svelte
index 4565d77ca..8343f5a8c 100644
--- a/src/routes/console/organization-[organization]/members/+page.svelte
+++ b/src/routes/console/organization-[organization]/members/+page.svelte
@@ -57,7 +57,7 @@
 
 <Container>
     {#if data.organizationMembers.total}
-        <ContainerHeader title="Members">
+        <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>
diff --git a/src/routes/console/wizard/cloudOrganizationChangeTier/step1.svelte b/src/routes/console/wizard/cloudOrganizationChangeTier/step1.svelte
index 92b7b019b..646cbf805 100644
--- a/src/routes/console/wizard/cloudOrganizationChangeTier/step1.svelte
+++ b/src/routes/console/wizard/cloudOrganizationChangeTier/step1.svelte
@@ -96,5 +96,5 @@
         {/if}
     </ul>
 
-    {#if $organization.billingPlan === 'tier-0'}tesr{/if}
+    {#if $organization.billingPlan === 'tier-0'}TODO: add transfer modal{/if}
 </WizardStep>