Merge pull request #1735 from appwrite/fix-support-and-feedback-wizard

Fix support and feedback wizard
appwrite · Mar 11, 2025 · b73bbc9 · b73bbc9
2 parents 682ac55 + 6eca4b0
commit b73bbc9
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 103 deletions.
diff --git a/src/routes/(console)/supportWizard.svelte b/src/routes/(console)/supportWizard.svelte
@@ -1,21 +1,35 @@
 <script lang="ts">
+    import { Wizard } from '$lib/layout';
+    import { Icon, Layout, Tag, Typography, Button, Card } from '@appwrite.io/pink-svelte';
+    import { supportData, isSupportOnline } from './wizard/support/store';
+    import { onMount } from 'svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { Form, InputSelect, InputText, InputTextarea } from '$lib/elements/forms/index.js';
+
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import {
         localeTimezoneName,
         utcHourToLocaleHour,
         utcWeekDayToLocaleWeekDay,
         type WeekDay
     } from '$lib/helpers/date';
-    import { WizardWithSteps } from '$lib/layout';
-    import type { WizardStepsType } from '$lib/layout/wizardWithSteps.svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { organization } from '$lib/stores/organization';
     import { user } from '$lib/stores/user';
     import { wizard } from '$lib/stores/wizard';
     import { VARS } from '$lib/system';
     import { onDestroy } from 'svelte';
-    import Step1 from './wizard/support/step1.svelte';
-    import { isSupportOnline, supportData } from './wizard/support/store';
+    import { IconCheckCircle, IconXCircle } from '@appwrite.io/pink-icons-svelte';
+
+    let projectOptions: Array<{ value: string; label: string }>;
+
+    onMount(async () => {
+        const projectList = await sdk.forConsole.projects.list();
+        projectOptions = projectList.projects.map((project) => ({
+            value: project.$id,
+            label: project.name
+        }));
+    });
 
     onDestroy(() => {
         $supportData = {
@@ -26,13 +40,6 @@
         };
     });
 
-    const stepsComponents: WizardStepsType = new Map();
-
-    stepsComponents.set(1, {
-        label: 'How can we help you?',
-        component: Step1
-    });
-
     async function handleSubmit() {
         const response = await fetch(`${VARS.GROWTH_ENDPOINT}/support`, {
             method: 'POST',
@@ -96,29 +103,83 @@
     $: supportWeekDays = `${utcWeekDayToLocaleWeekDay(workTimings.startDay, workTimings.start)} - ${utcWeekDayToLocaleWeekDay(workTimings.endDay, workTimings.end)}`;
 </script>
 
-<WizardWithSteps
-    title="Contact us"
-    steps={stepsComponents}
-    finalAction="Submit"
-    on:exit={resetData}>
+<Wizard title="Contact us" confirmExit={true}>
+    <Form onSubmit={handleSubmit}>
+        <Layout.Stack gap="xl">
+            <Layout.Stack gap="s">
+                <Typography.Title>How can we help you?</Typography.Title>
+                <Typography.Text
+                    >Please describe your request in detail. If applicable, include steps for
+                    reproduction of any in-app issues.</Typography.Text>
+            </Layout.Stack>
+            <Layout.Stack gap="s">
+                <Typography.Text color="--fgcolor-neutral-secondary"
+                    >Choose a topic</Typography.Text>
+                <Layout.Stack gap="s" direction="row">
+                    {#each ['general', 'billing', 'technical'] as category}
+                        <Tag
+                            on:click={() => {
+                                $supportData.category = category;
+                            }}
+                            selected={$supportData.category === category}>{category}</Tag>
+                    {/each}
+                </Layout.Stack>
+            </Layout.Stack>
+            <InputSelect
+                id="project"
+                label="Choose a project"
+                options={projectOptions ?? []}
+                bind:value={$supportData.project}
+                required={false}
+                placeholder="Select project" />
+            <InputText
+                id="subject"
+                label="Subject"
+                bind:value={$supportData.subject}
+                placeholder="What do you need help with?"
+                required />
+            <InputTextarea
+                id="message"
+                bind:value={$supportData.message}
+                placeholder="Type here..."
+                label="Tell us a bit more" />
+            <Layout.Stack direction="row" justifyContent="flex-end" gap="s">
+                <Button.Button
+                    variant="secondary"
+                    on:click={() => {
+                        wizard.hide();
+                    }}>Cancel</Button.Button>
+                <Button.Button>Submit</Button.Button>
+            </Layout.Stack>
+        </Layout.Stack>
+    </Form>
+
     <svelte:fragment slot="aside">
-        <h4 class="body-text-1 u-bold">Contact the Appwrite Team</h4>
-        <p class="text u-margin-block-start-16">
-            If you found a bug or have questions, please reach out to the Appwrite team. We try to
-            respond to all messages within our office hours.
-        </p>
-        <p class="text u-margin-block-start-32">
-            Available: <b>{supportWeekDays}, {supportTimings}</b>
-        </p>
-        <div class="u-flex u-gap-4 u-cross-center">
-            <span>Currently:</span>
-            {#if isSupportOnline()}
-                <span class="icon-check-circle u-color-text-success" aria-hidden="true" />
-                <span class="u-color-text-success text">Online</span>
-            {:else}
-                <span class="icon-x-circle" aria-hidden="true" />
-                <span class="text">Offline</span>
-            {/if}
-        </div>
+        <Card.Base padding="m">
+            <Layout.Stack gap="xl">
+                <Typography.Title size="s">Contact the Appwrite Team</Typography.Title>
+                <Typography.Text
+                    >If you found a bug or have questions, please reach out to the Appwrite team. We
+                    try to respond to all messages within our office hours.</Typography.Text>
+                <Layout.Stack direction="row" gap="s">
+                    <Typography.Text>Available:</Typography.Text>
+                    <Typography.Text variant="m-500"
+                        >{supportWeekDays}, {supportTimings}</Typography.Text>
+                </Layout.Stack>
+                <Layout.Stack direction="row" gap="s">
+                    <Typography.Text>Currently:</Typography.Text>
+                    {#if isSupportOnline()}
+                        <Layout.Stack direction="row" gap="xxxs" alignItems="center">
+                            <Icon icon={IconCheckCircle} color="--fgcolor-success" />
+                            <Typography.Text color="--fgcolor-success">Online</Typography.Text>
+                        </Layout.Stack>{:else}
+                        <Layout.Stack direction="row" gap="xxxs" alignItems="center">
+                            <Icon icon={IconXCircle} />
+                            <Typography.Text>Offline</Typography.Text>
+                        </Layout.Stack>
+                    {/if}
+                </Layout.Stack>
+            </Layout.Stack>
+        </Card.Base>
     </svelte:fragment>
-</WizardWithSteps>
+</Wizard>
diff --git a/src/routes/(console)/wizard/support/step1.svelte b/src/routes/(console)/wizard/support/step1.svelte