From c95befed8615eda0e2a2cc2c284349372e8b84f1 Mon Sep 17 00:00:00 2001
From: Bradley Schofield <ionicisere@gmail.com>
Date: Wed, 18 Dec 2024 16:38:28 +0900
Subject: [PATCH] Add tooltip to specifications

---
 .../components/specificationsTooltip.svelte   | 30 +++++++++++++++++++
 .../steps/templateConfiguration.svelte        |  7 +++++
 2 files changed, 37 insertions(+)
 create mode 100644 src/lib/wizards/functions/components/specificationsTooltip.svelte

diff --git a/src/lib/wizards/functions/components/specificationsTooltip.svelte b/src/lib/wizards/functions/components/specificationsTooltip.svelte
new file mode 100644
index 000000000..701989a4e
--- /dev/null
+++ b/src/lib/wizards/functions/components/specificationsTooltip.svelte
@@ -0,0 +1,30 @@
+<div class="u-flex-vertical u-gap-16">
+    <div class="u-flex-vertical u-gap-8">
+        <p>Additional CPU and RAM are available for Pro and Scale teams.</p>
+        <p>
+            <a
+                class="link"
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://appwrite.io/docs/products/functions/specificatinos">Learn more</a>
+        </p>
+    </div>
+</div>
+
+<style>
+    div {
+        color: hsl(var(--color-neutral-50));
+        line-height: 1.25rem;
+        &:first-child {
+            color: hsl(var(--color-neutral-70));
+        }
+    }
+
+    :global(.theme-dark) div {
+        color: hsl(var(--color-neutral-20));
+
+        &:first-child {
+            color: hsl(var(--color-neutral-10));
+        }
+    }
+</style>
diff --git a/src/lib/wizards/functions/steps/templateConfiguration.svelte b/src/lib/wizards/functions/steps/templateConfiguration.svelte
index 07c35cd91..fbce477fb 100644
--- a/src/lib/wizards/functions/steps/templateConfiguration.svelte
+++ b/src/lib/wizards/functions/steps/templateConfiguration.svelte
@@ -5,7 +5,11 @@
     import { WizardStep } from '$lib/layout';
     import { runtimesList } from '$lib/stores/runtimes';
     import { specificationsList } from '$lib/stores/specifications';
+    import { BillingPlan } from '$lib/constants';
+    import SpecificationsTooltip from '../components/specificationsTooltip.svelte';
     import { template, templateConfig } from '../store';
+    import { organization } from '$lib/stores/organization';
+    import { isCloud } from '$lib/system';
 
     let showCustomId = false;
 
@@ -99,6 +103,9 @@
                 required
                 disabled={specificationOptions.length < 1}
                 options={specificationOptions}
+                popover={isCloud && $organization?.billingPlan === BillingPlan.FREE
+                    ? SpecificationsTooltip
+                    : null}
                 bind:value={$templateConfig.specification} />
         {/await}
     </FormList>