feat: improvement to support screens

2026-06-06 19:27:48 +00:00 · 2022-12-12 15:21:54 +01:00
parent d7141e0008
commit f2d6088b8a
8 changed files with 129 additions and 61 deletions
@@ -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",
@@ -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",
@@ -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
@@ -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}
@@ -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}
@@ -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>
@@ -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>
@@ -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
 });