appwrite · ArmanNik · Nov 10, 2022 · Dec 7, 2022 · Dec 7, 2022 · Dec 7, 2022
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
@@ -211,5 +211,6 @@ export enum Submit {
     BucketUpdateExtensions = 'submit_bucket_update_extensions',
     FileCreate = 'submit_file_create',
     FileDelete = 'submit_file_delete',
-    FileUpdatePermissions = 'submit_file_update_permissions'
+    FileUpdatePermissions = 'submit_file_update_permissions',
+    SupportTicket = 'submit_support_ticket'
 }
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
@@ -47,6 +47,7 @@ export { default as EventModal } from './eventModal.svelte';
 export { default as Status } from './status.svelte';
 export { default as Heading } from './heading.svelte';
 export { default as Output } from './output.svelte';
+export { default as Support } from './support.svelte';
 export { default as ViewSelector } from './viewSelector.svelte';
 export { default as LabelCard } from './labelCard.svelte';
 export { default as Limit } from './limit.svelte';

diff --git a/src/lib/components/support.svelte b/src/lib/components/support.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import SupportOfflineLight from '$lib/images/support/support-offline-light.png';
+    import SupportOfflineDark from '$lib/images/support/support-offline-dark.png';
+    import SupportOnlineLight from '$lib/images/support/support-online-light.png';
+    import SupportOnlineDark from '$lib/images/support/support-online-dark.png';
+    import { app, isFreeTier } from '$lib/stores/app';
+    import { wizard } from '$lib/stores/wizard';
+    import SupportWizard from '../../routes/console/supportWizard.svelte';
+    import { isSupportOnline } from '../../routes/console/wizard/store';
+    import { isCloud } from '$lib/system';
+
+    export let show = false;
+</script>
+
+{#if isCloud}
+    <section class="drop-section u-grid u-gap-24 u-padding-24">
+        <div class="u-flex u-main-center">
+            {#if isSupportOnline()}
+                {#if $app.themeInUse === 'light'}
+                    <img src={SupportOnlineLight} alt="Support" />
+                {:else}
+                    <img src={SupportOnlineDark} alt="Support" />
+                {/if}
+            {:else if $app.themeInUse === 'light'}
+                <img src={SupportOfflineLight} alt="Support" />
+            {:else}
+                <img src={SupportOfflineDark} alt="Support" />
+            {/if}
+        </div>
+        <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>
+            </p>
+        </div>
+        {#if isFreeTier}
+    
8000
        <Button fullWidth href="https://appwrite.io/billing">
+                <span class="text">Get Premium support</span>
+            </Button>
+        {:else}
+            <Button
+                secondary
+                fullWidth
+                on:click={() => {
+                    show = false;
+                    wizard.start(SupportWizard);
+                }}>
+                <span class="text">Contact our Support Team</span>
+            </Button>
+        {/if}
+    </section>
+{/if}
+<section class="drop-section u-grid u-gap-24 u-padding-24">
+    <div>
+        <h4 class="eyebrow-heading-3">Troubleshooting</h4>
+        <!-- TODO: check if service is actually live -->
+        <a
+            href="https://status.appwrite.io/"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="button is-text u-gap-4 u-cross-center u-padding-inline-0 u-margin-block-start-8 u-width-full-line">
+            <span class="helper u-success">
+                <span class="icon-check-circle" aria-hidden="true" />
+            </span>
+            <b class="text">All services are online</b>
+        </a>
+    </div>
+    <div class="u-flex u-gap-16">
+        <a
+            href="https://appwrite.io/docs"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="button is-secondary u-padding-inline-12 u-stretch u-main-center u-gap-4 u-flex-basis-auto">
+            <span class="icon-book-open" aria-hidden="true" />
+            <span class="text">Docs</span>
+        </a>
+        <a
+            href="https://github.com/appwrite/appwrite/issues"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="button is-secondary u-padding-inline-12 u-stretch u-main-center u-gap-4 u-flex-basis-auto">
+            <span class="icon-github" aria-hidden="true" />
+            <span class="text">Open issue</span>
+        </a>
+    </div>
+</section>
+<section class="drop-section u-grid u-gap-8 u-padding-24">
+    <div>
+        <h4 class="eyebrow-heading-3">community support</h4>
+        <p class="text u-margin-block-start-8">Get help from our community</p>
+    </div>
+    <ul class="u-flex">
+        <li>
+            <Button
                href="https://github.com/appwrite"
+                round
+                text
+                noMargin
+                external
+                ariaLabel="Github">
+                <span class="icon-github" aria-hidden="true" />
+            </Button>
+        </li>
+        <li>
+            <Button
+                href="https://appwrite.io/discord"
+                round
+                text
+                noMargin
+                external
+                ariaLabel="Discord">
+                <span class="icon-discord" aria-hidden="true" />
+            </Button>
+        </li>
+    </ul>
+</section>
diff --git a/src/lib/images/support/support-offline-dark.png b/src/lib/images/support/support-offline-dark.png
diff --git a/src/lib/images/support/support-offline-light.png b/src/lib/images/support/support-offline-light.png
diff --git a/src/lib/images/support/support-online-dark.png b/src/lib/images/support/support-online-dark.png
diff --git a/src/lib/images/support/support-online-light.png b/src/lib/images/support/support-online-light.png
diff --git a/src/lib/images/support/support-wizard-dark.svg b/src/lib/images/support/support-wizard-dark.svg
diff --git a/src/lib/images/support/support-wizard-light.svg b/src/lib/images/support/support-wizard-light.svg
diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
@@ -5,7 +5,9 @@
         DropList,
         DropListItem,
         DropListLink,
-        FeedbackGeneral
+        FeedbackGeneral,
+        FeedbackNPS,
+        Support
     } from '$lib/components';
     import { app, feedback } from '$lib/stores/app';
     import { user } from '$lib/stores/user';
@@ -14,15 +16,15 @@
     import LightMode from '$lib/images/mode/light-mode.svg';
     import DarkMode from '$lib/images/mode/dark-mode.svg';
     import SystemMode from '$lib/images/mode/system-mode.svg';
-    import { FeedbackNPS } from '$lib/components';
-
     import { slide } from 'svelte/transition';
     import { page } from '$app/stores';
+    import { Button } from '$lib/elements/forms';
     import { Submit, trackEvent } from '$lib/actions/analytics';
     import { sdk } from '$lib/stores/sdk';
     import { goto } from '$app/navigation';
 
     let showDropdown = false;
+    let showSupport = false;
     let droplistElement: HTMLDivElement;
 
     function toggleFeedback() {
@@ -47,7 +49,6 @@
             showDropdown = false;
         }
     }
-
     $: if (showDropdown) {
         trackEvent('click_menu_dropdown');
     }
@@ -66,7 +67,7 @@
 {/if}
 
 <div class="main-header-end">
-    <nav class="u-flex is-only-desktop">
+    <nav class="u-flex is-only-desktop u-cross-center">
         {#if $feedback.notification}
             <div class="u-flex u-cross-center">
                 <div class="pulse-notification" />
@@ -84,13 +85,15 @@
                 {/if}
             </svelte:fragment>
         </DropList>
-        <a
-            href="https://appwrite.io/support"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="button is-small is-text">
-            <span class="text">Support</span>
-        </a>
+
+        <DropList width="17.5" bind:show={showSupport} scrollable={true}>
+            <Button text on:click={() => (showSupport = !showSupport)}>
+                <span class="text">Support</span>
+            </Button>
+            <svelte:fragment slot="other">
+                <Support bind:show={showSupport} />
+            </svelte:fragment>
+        </DropList>
     </nav>
     <nav class="u-flex u-height-100-percent u-sep-inline-start">
         {#if $user}

diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
@@ -108,13 +108,15 @@
     </header>
 
     <aside class="wizard-side">
-        <Steps
-            on:step={handleStepClick}
-            steps={sortedSteps.map(([, { label, optional }]) => ({
-                text: label,
-                optional
-            }))}
-            {currentStep} />
+        <slot name="aside">
+            <Steps
+                on:step={handleStepClick}
+                steps={sortedSteps.map(([, { label, optional }]) => ({
+                    text: label,
+                    optional
+                }))}
+                {currentStep} />
+        </slot>
     </aside>
     <div class="wizard-media">
         {#if $wizard.media}

diff --git a/src/lib/stores/app.ts b/src/lib/stores/app.ts
@@ -1,6 +1,6 @@
 import { browser } from '$app/environment';
 import { VARS } from '$lib/system';
-import { writable } from 'svelte/store';
+import { get, writable } from 'svelte/store';
 
 export type AppStore = {
     theme: 'light' | 'dark' | 'auto';
@@ -15,11 +15,22 @@ export type Feedback = {
     show: boolean;
 };
 
+export enum Tier {
+    FREE = 'free',
+    PRO = 'pro',
+    ENTERPRISE = 'enterprise'
+}
+
 export const app = writable<AppStore>({
     theme: 'auto',
     themeInUse: 'light'
 });
 
+//TODO: once billing is enabled on organization load/update, update the tier
+export const tier = writable<Tier>(Tier.FREE);
+export const isFreeTier = get(tier) === Tier.FREE;
+export const isPaidTier = get(tier) === Tier.PRO || get(tier) === Tier.ENTERPRISE;
+
 function createFeedbackStore() {
     const { subscribe, update } = writable<Feedback>({
         elapsed: browser ? parseInt(localStorage.getItem('feedbackElapsed')) : 0,

diff --git a/src/routes/console/supportWizard.svelte b/src/routes/console/supportWizard.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+    import { Wizard } from '$lib/layout';
+    import { onDestroy } from 'svelte';
+    import { isSupportOnline, 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 = {
+            message: null,
+            category: 'general',
+            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
+    });
+</script>
+
+<Wizard title="Contact us" steps={stepsComponents} finalAction="Go back to My Console">
+    <svelte:fragment slot="aside">
+        <div class="common-section">
+            <h4 class="body-text-1">Contact the Appwrite Team</h4>
+            <p class="text">
+                Found a bug? Need a hand? Just want to say hi? Contact the Appwrite team with your
+                queries.
+            </p>
+        </div>
+        <div class="common-section">
+            <p class="text">Available: <b>Mon-Fri 09:00 - 17:00 UCT</b></p>
+            <p class="text u-flex u-gap-4 u-cross-center">
+                Currently: {#if isSupportOnline()}
+                    <span class="u-success">
+                        <span class="icon-check-circle" aria-hidden="true" />
+                    </span>
+                    <span class="u-success text">Online</span>
+                {:else}
+                    <span class="icon-x-circle" aria-hidden="true" />
+                    <span class="text">Offline</span>{/if}
+            </p>
+        </div>
+    </svelte:fragment>
+</Wizard>
diff --git a/src/routes/console/wizard/step1.svelte b/src/routes/console/wizard/step1.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+    import { Submit, trackError, 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';
+    import { Pill } from '$lib/elements';
+    // import { Collapsible, CollapsibleItem } from '$lib/components';
+    import { user } from '$lib/stores/user';
+
+    $wizard.media = $app.themeInUse === 'dark' ? Dark : Light;
+
+    // let files: FileList;
+
+    async function beforeSubmit() {
+        const response = await fetch('https://growth.appwrite.io/v1/support', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                subject: 'support',
+                email: $user.email,
+                firstName: $user?.name ?? '',
+                message: $supportData.message,
+                tags: ['cloud'],
+                customFields: [{ id: '41612', value: $supportData.category }]
+            })
+        });
+        trackEvent(Submit.SupportTicket);
+        if (response.status !== 200) {
+            trackError(new Error(response.status.toString()), Submit.SupportTicket);
+            addNotification({
+                message: 'There was an error submitting your feedback',
+                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>
    <div class="common-section">
+        <p class="label">Choose a topic</p>
+        <div class="u-flex u-gap-8 u-margin-block-start-8">
+            {#each ['general', 'billing', 'technical'] as topic}
+                <Pill
+                    button
+                    selected={$supportData.category === topic}
+                    on:click={() => {
+                        $supportData.category = topic;
+                    }}>{topic}</Pill>
+            {/each}
+        </div>
+    </div>
+    <div class="common-section">
+        <FormList>
+            <InputTextarea
+                label="Tell us a bit more"
+                id="message"
+                placeholder="Type here..."
+                bind:value={$supportData.message}
+                required />
+        </FormList>
+    </div>
+    <!-- <div class="common-section">
+        <Collapsible>
+            <CollapsibleItem>
+                <svelte:fragment slot="title">Want to attach a file? (optional)</svelte:fragment>
+                <svelte:fragment slot="subtitle">
+                    A picture is worth a thousand words.
+                </svelte:fragment>
+                <InputFile bind:files label="Attach a file" />
+            </CollapsibleItem>
+        </Collapsible>
+    </div> -->
+</WizardStep>