feat: new support screens

src/lib/components/support.svelte

@@ -1,18 +1,28 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
     import { app } from '$lib/stores/app';
-    import { wizard } from '$lib/stores/wizard';
-    import SupportWizard from '$routes/(console)/supportWizard.svelte';
-    import { showSupportModal } from '$routes/(console)/wizard/support/store';
     import { isCloud } from '$lib/system';
     import { organization } from '$lib/stores/organization';
     import { BillingPlan } from '$lib/constants';
     import { trackEvent } from '$lib/actions/analytics';
     import { localeTimezoneName, utcHourToLocaleHour } from '$lib/helpers/date';
     import { upgradeURL } from '$lib/stores/billing';
+    import { base } from '$app/paths';
+    import { project } from '$routes/(console)/project-[project]/store';
 
     export let show = false;
 
+    function supportURL() {
+        let url = `${base}/support`;
+        if ($organization?.$id) {
+            url += `?org=${$organization?.$id}`;
+            if ($project?.$id) {
+                url += `&project=${$project?.$id}`;
+            }
+        }
+        return url;
+    }
+
     $: isPaid =
         $organization?.billingPlan === BillingPlan.PRO ||
         $organization?.billingPlan === BillingPlan.SCALE;
@@ -46,54 +56,45 @@
             <Button
                 secondary
                 fullWidth
+                href={supportURL()}
                 on:click={() => {
                     show = false;
-                    $showSupportModal = false;
-                    wizard.start(SupportWizard);
                 }}>
-                <span class="text">Contact our Support Team</span>
+                <span class="text">Email support</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>
+<section class="drop-section u-flex u-flex-vertical u-gap-16 u-padding-24">
+    <h4 class="eyebrow-heading-3">Troubleshooting</h4>
 
-        <div class="u-margin-block-start-8 u-width-full-line">
-            {#key $app.themeInUse}
-                <iframe
-                    style="color-scheme: none"
-                    title="Appwrite Status"
-                    src={`https://status.appwrite.online/badge?theme=${
-                        $app.themeInUse === 'dark' ? 'dark' : 'light'
-                    }`}
-                    width="250"
-                    height="30"
-                    frameborder="0"
-                    scrolling="no">
-                </iframe>
-            {/key}
-        </div>
+    <div class="u-margin-block-start-8 u-width-full-line">
+        {#key $app.themeInUse}
+            <iframe
+                style="color-scheme: none"
+                title="Appwrite Status"
+                src={`https://status.appwrite.online/badge?theme=${
+                    $app.themeInUse === 'dark' ? 'dark' : 'light'
+                }`}
+                width="250"
+                height="30"
+                frameborder="0"
+                scrolling="no">
+            </iframe>
+        {/key}
     </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>
+    <div class="u-flex u-flex-vertical u-gap-8">
+        <a href="https://appwrite.io/docs" target="_blank" rel="noopener noreferrer" class="link">
+            Visit our docs
         </a>
         <a
             href="https://github.com/appwrite/appwrite/issues"
             aria-label="Open issue on GitHub"
             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>
+            class="link">
+            Open a GitHub issue
         </a>
     </div>
 </section>

src/lib/elements/forms/inputSelectCheckbox.svelte

@@ -12,6 +12,7 @@
     export let tags: string[] = [];
     export let placeholder: string;
     export let options: Option[] = [];
+    export let removable = false;
 
     let search = '';
     let input: HTMLInputElement;
@@ -54,6 +55,23 @@
                     <li class="tags-item">
                         <div class="input-tag">
                             <span class="tag-text">{tag}</span>
+                            {#if removable}
+                                <button
+                                    type="button"
+                                    class="input-tag-delete-button"
+                                    aria-label={`delete ${tag} tag`}
+                                    on:click|preventDefault|stopPropagation={() => {
+                                        tags = tags.filter((t) => t !== tag);
+                                        options = options.map((option) => {
+                                            if (option.value === tag) {
+                                                option.checked = false;
+                                            }
+                                            return option;
+                                        });
+                                    }}>
+                                    <span class="icon-x" aria-hidden="true" />
+                                </button>
+                            {/if}
                         </div>
                     </li>
                 {/each}

src/lib/layout/navigation.svelte

@@ -12,7 +12,7 @@
     import { wizard } from '$lib/stores/wizard';
     import { isCloud } from '$lib/system';
     import Create from '$routes/(console)/feedbackWizard.svelte';
-    import { showSupportModal } from '$routes/(console)/wizard/support/store';
+    import { showSupportModal } from '$routes/(console)/store';
     import { getContext } from 'svelte';
     import type { Writable } from 'svelte/store';
 

src/routes/(console)/+layout.svelte

@@ -38,9 +38,8 @@
     import { feedback } from '$lib/stores/feedback';
     import { hasStripePublicKey, isCloud, VARS } from '$lib/system';
     import { stripe } from '$lib/stores/stripe';
-    import MobileSupportModal from './wizard/support/mobileSupportModal.svelte';
-    import { showSupportModal } from './wizard/support/store';
-    import { activeHeaderAlert, consoleVariables } from './store';
+    import MobileSupportModal from '$lib/components/mobileSupportModal.svelte';
+    import { activeHeaderAlert, consoleVariables, showSupportModal } from './store';
     import { headerAlert } from '$lib/stores/headerAlert';
     import { UsageRates } from '$lib/components/billing';
     import { base } from '$app/paths';

src/routes/(console)/project-[project]/databases/database-[database]/backups/containerHeader.svelte

@@ -2,10 +2,10 @@
     import { Button } from '$lib/elements/forms';
     import { DropList } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { wizard } from '$lib/stores/wizard';
-    import SupportWizard from '$routes/(console)/supportWizard.svelte';
     import { BillingPlan } from '$lib/constants';
     import { organization } from '$lib/stores/organization';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
 
     export let isFlex = true;
     export let title: string;
@@ -27,7 +27,7 @@
     <div class="u-flex u-cross-child-center u-cross-center u-gap-12">
         <div class="body-text-1 u-bold backups-title">{title}</div>
 
-        {#if hasLimitations && $organization.billingPlan === BillingPlan.PRO}
+        {#if hasLimitations && $organization?.billingPlan === BillingPlan.PRO}
             <div style="height: 40px; padding-block-start: 4px">
                 <DropList bind:show={showDropdown} width="16">
                     <Pill button on:click={() => (showDropdown = true)}>
@@ -37,13 +37,13 @@
                         <slot name="tooltip">
                             <span>
                                 You are limited to one policy on Pro plan.
-                                <button
-                                    class="u-underline"
+                                <a
+                                    class="link"
+                                    href={`${base}/support?org=${$organization?.$id}&project=${$page.params.project}`}
                                     on:click={() => {
                                         showDropdown = !showDropdown;
-                                        wizard.start(SupportWizard);
-                                    }}>Contact support</button> to upgrade your plan and add customized
-                                backup policies.
+                                    }}>Contact support</a> to upgrade your plan and add customized backup
+                                policies.
                             </span>
                         </slot>
                     </svelte:fragment>

src/routes/(console)/project-[project]/databases/database-[database]/backups/createPolicy.svelte

@@ -24,8 +24,8 @@
     import { organization } from '$lib/stores/organization';
     import { BillingPlan } from '$lib/constants';
     import { Card } from '$lib/components';
-    import { wizard } from '$lib/stores/wizard';
-    import SupportWizard from '$routes/(console)/supportWizard.svelte';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
 
     export let isShowing: boolean;
     export let isFromBackupsTab: boolean = false;
@@ -204,15 +204,13 @@
                         </div>
                     </Card>
                     <span>
-                        <button
-                            type="button"
-                            class="u-underline cursor-pointer"
+                        <a
+                            class="link"
+                            href={`${base}/support?org=${$organization?.$id}&project=${$page.params.project}`}
                             on:click={() => {
                                 isShowing = false;
                                 $showCreatePolicy = false;
-                                wizard.start(SupportWizard);
-                            }}>Contact support</button> to upgrade your plan and add customized backup
-                        policies.
+                            }}>Contact support</a> to upgrade your plan and add customized backup policies.
                     </span>
                 </div>
             {:else}
@@ -224,13 +222,12 @@
                         <svelte:fragment slot="description">
                             <span>
                                 Daily backups are retained for 7 days.
-                                <button
-                                    type="button"
-                                    class="u-underline cursor-pointer"
+                                <a
+                                    class="link"
+                                    href={`${base}/support?org=${$organization?.$id}&project=${$page.params.project}`}
                                     on:click={() => {
                                         isShowing = false;
-                                        wizard.start(SupportWizard);
-                                    }}>Contact support</button>
+                                    }}>Contact support</a>
                                 to upgrade your plan and add customized backup policies.
                             </span>
                         </svelte:fragment>

src/routes/(console)/store.ts

@@ -12,3 +12,4 @@ export const consoleVariables = derived(
 
 export const activeHeaderAlert = writable<HeaderAlert>(null);
 export const orgMissingPaymentMethod = writable<Organization>(null);
+export const showSupportModal = writable<boolean>(false);