Feat pro 1302 self hosted support pricing

src/lib/components/ui/Toggle.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+    type $$props = {
+        options: Array<{ label: string; key: string }>;
+        onChange: (key: string) => void;
+    };
+
+    export let options: $$props['options'] = [];
+    export let activeToggle: string;
+
+    let width = 0;
+    let backgroundOffset = 0;
+    let activeIndex = 0;
+
+    function handleClick(event: MouseEvent) {
+        if (event.target) {
+            const button = event.target as HTMLButtonElement;
+            handleButtonClick(button);
+            const key = button.getAttribute('id')?.split('toggle-').pop();
+            if (key) {
+                activeToggle = key;
+            }
+        }
+    }
+
+    function handleButtonClick(button: HTMLButtonElement) {
+        const buttonRect = button.getBoundingClientRect();
+        const sectionRect = button.closest('section')?.getBoundingClientRect();
+
+        // Calculate the offset from the left side of the section
+        backgroundOffset = buttonRect.left - (sectionRect?.left ?? 0) - 4;
+        width = buttonRect.width;
+    }
+
+    $: if (activeToggle && typeof window !== 'undefined') {
+        const activeOption = options.find((option) => option.key === activeToggle);
+        if (activeOption) {
+            activeIndex = options.findIndex((option) => option.key === activeToggle);
+            const activeButton = document.getElementById(
+                `toggle-${activeOption.key}`
+            ) as HTMLButtonElement;
+            requestAnimationFrame(() => {
+                handleButtonClick(activeButton);
+            });
+        }
+    }
+</script>
+
+<section
+    class="flex w-fit rounded-xl border border-[#FFFFFF29] bg-[linear-gradient(116deg,#FFFFFF1A_1%,#FFFFFF1A_49%,#FFFFFF14_92%,#FFFFFF00_120%)] p-1 text-lg"
+>
+    <div
+        class="absolute z-0 h-11 rounded-lg bg-[#FFFFFF14]"
+        style="width: {width}px; transform: translate({backgroundOffset}px); transition: transform 0.2s ease-out, width 0.2s ease-out;"
+    />
+    {#each options as option, index}
+        <button
+            class="z-1 cursor-pointer p-2"
+            id={`toggle-${option.key}`}
+            class:text-[#FFFFFF]={index === activeIndex}
+            on:click={(event) => {
+                handleClick(event);
+                activeIndex = index;
+            }}>{option.label}</button
+        >
+    {/each}
+</section>

src/routes/contact-us/enterprise/+page.svelte

@@ -6,7 +6,7 @@
     import MainFooter from '../../../lib/components/MainFooter.svelte';
     import Pink from '../bg.png';
     import { loggedIn, user } from '$lib/utils/console';
-    import { PUBLIC_GROWTH_ENDPOINT } from '$env/static/public';
+    import { sendSalesEmail } from '$routes/contact-us';
 
     let email = '';
     let name = '';
@@ -23,21 +23,15 @@
 
         const cloudEmail = loggedIn && $user?.email ? $user.email : undefined;
 
-        const response = await fetch(`${PUBLIC_GROWTH_ENDPOINT}/feedback/sales`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                email,
-                subject,
-                cloudEmail,
-                companyName,
-                companySize,
-                companyWebsite,
-                firstName: name,
-                message: useCase
-            })
+        const response = await sendSalesEmail({
+            email,
+            subject,
+            cloudEmail,
+            companyName,
+            companySize,
+            companyWebsite,
+            firstName: name,
+            message: useCase
         });
 
         if (response.status >= 400) {

src/routes/contact-us/index.ts

@@ -0,0 +1,21 @@
+import { PUBLIC_GROWTH_ENDPOINT } from '$env/static/public';
+
+export async function sendSalesEmail(body: {
+    email: string;
+    subject: string;
+    cloudEmail: string | undefined;
+    companyName: string;
+    companySize: string | null;
+    companyWebsite: string;
+    firstName: string;
+    message: string;
+    supportTier?: string | null;
+}) {
+    return await fetch(`${PUBLIC_GROWTH_ENDPOINT}/feedback/sales`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(body)
+    });
+}