From f2d6088b8a5a396bf24310becad1aebb820f6898 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 12 Dec 2022 15:21:54 +0100
Subject: [PATCH] feat: improvement to support screens

---
 package-lock.json                       | 28 +++++++--------
 package.json                            |  4 +--
 src/lib/components/support.svelte       | 15 ++++++--
 src/lib/layout/header.svelte            | 35 ++++++------------
 src/lib/layout/wizard.svelte            | 16 +++++----
 src/routes/console/supportWizard.svelte | 42 ++++++++++++++++++++--
 src/routes/console/wizard/step1.svelte  | 48 ++++++++++++++++++++-----
 src/routes/console/wizard/store.ts      |  2 ++
 8 files changed, 129 insertions(+), 61 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 785ae480a..c4088bf1e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,8 +10,8 @@
             "dependencies": {
                 "@analytics/google-analytics": "^1.0.5",
                 "@aw-labs/appwrite-console": "^13.0.0",
-                "@aw-labs/icons": "0.0.0-77",
-                "@aw-labs/ui": "0.0.0-77",
+                "@aw-labs/icons": "0.0.0-79",
+                "@aw-labs/ui": "0.0.0-79",
                 "@popperjs/core": "^2.11.6",
                 "@sentry/svelte": "^7.19.0",
                 "@sentry/tracing": "^7.19.0",
@@ -154,14 +154,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-77",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-77.tgz",
-            "integrity": "sha512-z/gH6B//qShnlJbf1sxv0ltSbRvJha1El0pl4jACAWDD+orgh2hzBrv6YdgPi1AVBTacu2GWWTcyobItghbpgA=="
+            "version": "0.0.0-79",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-79.tgz",
+            "integrity": "sha512-tp9+1pzaQcKRuyIU/XECfnu+mWFbZ9rq4MqpsHyWDFlIZ3FeUuGzzkam6aq0M66bJdrP/Vhg7t5zpuQQpvZqRg=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-77",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-77.tgz",
-            "integrity": "sha512-y/7cbPFcK+jUnarsn9X1arrIB69RVMPWMjjIiiaX7uSa0rq9ZN1agBZxfA63meyh23kdIK4K5CcJhatShMMsYg==",
+            "version": "0.0.0-79",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-79.tgz",
+            "integrity": "sha512-IQNi2UR/0pmJ/aiLtcV9AyjubJfHoT02fgSobEfcdlneHjNQWXjQaTKyKfNcPC7BmJJ4MTpdFUBF7CKjIyuDRQ==",
             "dependencies": {
                 "@aw-labs/icons": "*",
                 "normalize.css": "^8.0.1",
@@ -7749,14 +7749,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-77",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-77.tgz",
-            "integrity": "sha512-z/gH6B//qShnlJbf1sxv0ltSbRvJha1El0pl4jACAWDD+orgh2hzBrv6YdgPi1AVBTacu2GWWTcyobItghbpgA=="
+            "version": "0.0.0-79",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-79.tgz",
+            "integrity": "sha512-tp9+1pzaQcKRuyIU/XECfnu+mWFbZ9rq4MqpsHyWDFlIZ3FeUuGzzkam6aq0M66bJdrP/Vhg7t5zpuQQpvZqRg=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-77",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-77.tgz",
-            "integrity": "sha512-y/7cbPFcK+jUnarsn9X1arrIB69RVMPWMjjIiiaX7uSa0rq9ZN1agBZxfA63meyh23kdIK4K5CcJhatShMMsYg==",
+            "version": "0.0.0-79",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-79.tgz",
+            "integrity": "sha512-IQNi2UR/0pmJ/aiLtcV9AyjubJfHoT02fgSobEfcdlneHjNQWXjQaTKyKfNcPC7BmJJ4MTpdFUBF7CKjIyuDRQ==",
             "requires": {
                 "@aw-labs/icons": "*",
                 "normalize.css": "^8.0.1",
diff --git a/package.json b/package.json
index cbd2c487c..8c45ccdc7 100644
--- a/package.json
+++ b/package.json
@@ -22,8 +22,8 @@
         "@analytics/google-analytics": "^1.0.5",
         "analytics": "^0.8.1",
         "@aw-labs/appwrite-console": "^13.0.0",
-        "@aw-labs/icons": "0.0.0-77",
-        "@aw-labs/ui": "0.0.0-77",
+        "@aw-labs/icons": "0.0.0-79",
+        "@aw-labs/ui": "0.0.0-79",
         "@popperjs/core": "^2.11.6",
         "@sentry/svelte": "^7.19.0",
         "@sentry/tracing": "^7.19.0",
diff --git a/src/lib/components/support.svelte b/src/lib/components/support.svelte
index 46f9571ec..8eece0c52 100644
--- a/src/lib/components/support.svelte
+++ b/src/lib/components/support.svelte
@@ -25,20 +25,29 @@
     </div>
     <!-- TODO: show first button only on free version (need ENV variable) -->
     <!-- <Button>Get premium support</Button> -->
-    <Button secondary fullWidth on:click={() => wizard.start(SupportWizard)}>
+    <Button
+        secondary
+        fullWidth
+        on:click={() => {
+            show = false;
+            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>
         <h4 class="eyebrow-heading-3">troubleshooting</h4>
-        <button
+        <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>
-        </button>
+        </a>
     </div>
     <div class="u-flex u-gap-16 u-margin-block-start-8">
         <a
diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index 860f782d9..d820e6f6f 100644
--- a/src/lib/layout/header.svelte
+++ b/src/lib/layout/header.svelte
@@ -19,12 +19,12 @@
     import { slide } from 'svelte/transition';
     import { page } from '$app/stores';
     import { trackEvent } from '$lib/actions/analytics';
+    import { Button } from '$lib/elements/forms';
 
     let showFeedback = false;
     let showDropdown = false;
     let showSupport = false;
     let droplistElement: HTMLDivElement;
-    let supportElement: HTMLDivElement;
 
     function toggleFeedback() {
         showFeedback = !showFeedback;
@@ -41,12 +41,6 @@
         ) {
             showDropdown = false;
         }
-        if (
-            showSupport &&
-            !(event.target === supportElement || supportElement.contains(event.target as Node))
-        ) {
-            showSupport = false;
-        }
     }
     $: if (showDropdown) {
         trackEvent('click_menu_dropdown');
@@ -73,9 +67,9 @@
             </div>
         {/if}
         <DropList width="28" bind:show={showFeedback} scrollable={true}>
-            <button class="button is-small is-text" on:click={toggleFeedback}>
+            <Button text on:click={toggleFeedback}>
                 <span class="text">Feedback</span>
-            </button>
+            </Button>
             <svelte:fragment slot="other">
                 {#if $feedback.type === 'nps'}
                     <FeedbackNPS bind:show={showFeedback} />
@@ -84,22 +78,15 @@
                 {/if}
             </svelte:fragment>
         </DropList>
-        <div
-            class="drop-wrapper"
-            style="--drop-width-size-desktop: 17.5rem"
-            class:is-open={showSupport}
-            bind:this={supportElement}>
-            <button class="button is-small is-text" on:click={() => (showSupport = !showSupport)}>
+
+        <DropList width="17.5" bind:show={showSupport} scrollable={true}>
+            <Button text on:click={() => (showSupport = !showSupport)}>
                 <span class="text">Support</span>
-            </button>
-            {#if showSupport}
-                <div
-                    class="drop is-no-arrow is-block-end is-inline-end"
-                    transition:slide={{ duration: 100 }}>
-                    <Support />
-                </div>
-            {/if}
-        </div>
+            </Button>
+            <svelte:fragment slot="other">
+                <Support bind:show={showSupport} />
+            </svelte:fragment>
+        </DropList>
     </nav>
     <nav class="u-flex u-height-100-percents u-sep-inline-start">
         {#if $user}
diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index 180f0ebcb..18347a0c1 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -94,13 +94,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/routes/console/supportWizard.svelte b/src/routes/console/supportWizard.svelte
index 755c1b188..f77a45c57 100644
--- a/src/routes/console/supportWizard.svelte
+++ b/src/routes/console/supportWizard.svelte
@@ -11,6 +11,7 @@
             name: null,
             email: null,
             message: null,
+            tags: ['general'],
             file: null
         };
     });
@@ -25,7 +26,44 @@
         component: Step2
     });
 
-    //TODO: replace steps with text add side text
+    function isSupportOnline() {
+        const currentDate = new Date();
+        const day = currentDate.getDay();
+        const hour = currentDate.getHours();
+
+        if (day === 1 || day === 6) {
+            return false;
+        }
+
+        if (hour < 9 || hour > 17) {
+            return false;
+        }
+
+        return true;
+    }
 </script>
 
-<Wizard title="Contact us" steps={stepsComponents} />
+<Wizard title="Contact us" steps={stepsComponents}>
+    <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
index 5a197ab40..09bcefe2c 100644
--- a/src/routes/console/wizard/step1.svelte
+++ b/src/routes/console/wizard/step1.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { trackEvent } from '$lib/actions/analytics';
-    import { FormList, InputTextarea } from '$lib/elements/forms';
+    import { FormList, InputFile, InputTextarea } from '$lib/elements/forms';
     import { WizardStep } from '$lib/layout';
     import { app } from '$lib/stores/app';
     import { addNotification } from '$lib/stores/notifications';
@@ -8,9 +8,13 @@
     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';
 
     $wizard.media = $app.themeInUse === 'dark' ? Dark : Light;
 
+    let files: FileList;
+
     async function beforeSubmit() {
         try {
             console.log($supportData.message);
@@ -31,12 +35,38 @@
         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>
+    <div class="common-section">
+        <p class="text">Choose a topic</p>
+        <div class="u-flex u-gap-8">
+            {#each ['General', 'Billing', 'Technical'] as topic}
+                <Pill
+                    button
+                    selected={$supportData.tags.includes(topic.toLowerCase())}
+                    on:click={() => {
+                        $supportData.tags = [topic.toLocaleLowerCase()];
+                    }}>{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>
diff --git a/src/routes/console/wizard/store.ts b/src/routes/console/wizard/store.ts
index e1a7941d0..ce52cdfd5 100644
--- a/src/routes/console/wizard/store.ts
+++ b/src/routes/console/wizard/store.ts
@@ -4,6 +4,7 @@ export type SupportData = {
     name: string;
     email: string;
     message: string;
+    tags: string[];
     file?: File | null;
 };
 
@@ -11,5 +12,6 @@ export const supportData = writable<SupportData>({
     name: '',
     email: '',
     message: '',
+    tags: ['general'],
     file: null
 });