support.svelte

<script lang="ts">
    import { Button } from '$lib/elements/forms';
    import { app } from '$lib/stores/app';
    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;

    $: supportTimings = `${utcHourToLocaleHour('16:00')} - ${utcHourToLocaleHour('00:00')} ${localeTimezoneName()}`;
</script>

{#if isCloud}
    <section class="drop-section u-grid u-gap-24 u-padding-24">
        <div>
            <h4 class="eyebrow-heading-3">Premium support</h4>
            {#if isPaid}
                <p class="u-line-height-1-5 u-margin-block-start-8">
                    Get personalized support from the Appwrite team from <b>{supportTimings}</b>
                </p>
            {/if}
        </div>
        {#if $organization?.billingPlan === BillingPlan.FREE}
            <Button
                fullWidth
                href={$upgradeURL}
                on:click={() => {
                    trackEvent('click_organization_upgrade', {
                        from: 'button',
                        source: 'support_menu'
                    });
                }}>
                <span class="text">Get Premium support</span>
            </Button>
        {:else}
            <Button
                secondary
                fullWidth
                href={supportURL()}
                on:click={() => {
                    show = false;
                }}>
                <span class="text">Email support</span>
            </Button>
        {/if}
    </section>
{/if}
<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-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="link">
            Open a GitHub issue
        </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 u-gap-8">
        <li>
            <Button href="https://github.com/appwrite" 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>