feat: support wizard

src/lib/components/support.svelte

@@ -3,6 +3,8 @@
     import SupportLight from '$lib/images/support/support-light.png';
     import SupportDark from '$lib/images/support/support-dark.png';
     import { app } from '$lib/stores/app';
+    import { wizard } from '$lib/stores/wizard';
+    import SupportWizard from '../../routes/console/supportWizard.svelte';
 
     export let show = false;
 </script>
@@ -18,15 +20,14 @@
     <div>
         <h4 class="eyebrow-heading-3">Premium support</h4>
         <p class="u-line-height-1-5 u-margin-block-start-8">
-            Get personalized support from the Appwrite team
-            <!-- from <b>09:00 - 17:00 UTC</b> -->
+            Get personalized support from the Appwrite team from <b>09:00 - 17:00 UTC</b>
         </p>
     </div>
-    <!-- TODO: show second button only on free version -->
-    <Button href="https://appwrite.io" external>Get premium support</Button>
-    <!-- <Button secondary fullWidth>
-            <span class="text">Contact our Support Team</span>
-        </Button> -->
+    <!-- TODO: show first button only on free version (need ENV variable) -->
+    <!-- <Button>Get premium support</Button> -->
+    <Button secondary fullWidth on:click={() => wizard.start(SupportWizard)}>
+        <span class="text">Contact our Support Team</span>
+    </Button>
 </section>
 <section class="drop-section u-grid u-gap-24 u-padding-24">
     <div>

src/lib/layout/header.svelte

@@ -6,7 +6,8 @@
         DropListItem,
         DropListLink,
         FeedbackGeneral,
-        FeedbackNPS
+        FeedbackNPS,
+        Support
     } from '$lib/components';
     import { app, feedback } from '$lib/stores/app';
     import { user } from '$lib/stores/user';
@@ -18,7 +19,6 @@
     import { slide } from 'svelte/transition';
     import { page } from '$app/stores';
     import { trackEvent } from '$lib/actions/analytics';
-    import Support from '$lib/components/support.svelte';
 
     let showFeedback = false;
     let showDropdown = false;

src/routes/console/supportWizard.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { Wizard } from '$lib/layout';
+    import { onDestroy } from 'svelte';
+    import { supportData } from './wizard/store';
+    import Step1 from './wizard/step1.svelte';
+    import Step2 from './wizard/step2.svelte';
+    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
+
+    onDestroy(() => {
+        $supportData = {
+            name: null,
+            email: null,
+            message: null,
+            file: null
+        };
+    });
+
+    const stepsComponents: WizardStepsType = new Map();
+    stepsComponents.set(1, {
+        label: 'How can we help you?',
+        component: Step1
+    });
+    stepsComponents.set(2, {
+        label: 'Your message has been sent',
+        component: Step2
+    });
+
+    //TODO: replace steps with text add side text
+</script>
+
+<Wizard title="Contact us" steps={stepsComponents} />

src/routes/console/wizard/step1.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { trackEvent } from '$lib/actions/analytics';
+    import { FormList, InputTextarea } from '$lib/elements/forms';
+    import { WizardStep } from '$lib/layout';
+    import { app } from '$lib/stores/app';
+    import { addNotification } from '$lib/stores/notifications';
+    import { wizard } from '$lib/stores/wizard';
+    import { supportData } from './store';
+    import Light from '$lib/images/support/support-wizard-light.svg';
+    import Dark from '$lib/images/support/support-wizard-dark.svg';
+
+    $wizard.media = $app.themeInUse === 'dark' ? Dark : Light;
+
+    async function beforeSubmit() {
+        try {
+            console.log($supportData.message);
+            trackEvent('submit_support_ticket');
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    }
+</script>
+
+<WizardStep {beforeSubmit}>
+    <svelte:fragment slot="title">How can we help you?</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        Please describe your request in detail. If applicable, include steps for reproduction of any
+        in-app issues. We try to respond to all messages within our office hours (Mon-Fri 09:00 -
+        17:00 UCT). Expect to receive an email from us soon!
+    </svelte:fragment>
+    <FormList>
+        <InputTextarea
+            label="Leave a message"
+            id="message"
+            placeholder="Type here..."
+            bind:value={$supportData.message}
+            required />
+    </FormList>
+</WizardStep>

src/routes/console/wizard/step2.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import { WizardStep } from '$lib/layout';
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Your message has been sent</svelte:fragment>
+    <svelte:fragment slot="subtitle">The Appwrite team is on it!</svelte:fragment>
+
+    hello :)
+</WizardStep>

src/routes/console/wizard/store.ts

@@ -0,0 +1,15 @@
+import { writable } from 'svelte/store';
+
+export type SupportData = {
+    name: string;
+    email: string;
+    message: string;
+    file?: File | null;
+};
+
+export const supportData = writable<SupportData>({
+    name: '',
+    email: '',
+    message: '',
+    file: null
+});