Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New layout for support and add subject #1564

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

New layout for support and add subject #1564

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bc20be4
add: subject to support wizard form.
ItzNotABug Dec 15, 2024
7ff085d
new: support layout.
ItzNotABug Dec 16, 2024
e1fa344
address comments, fix colors.
ItzNotABug Dec 17, 2024
25f5bd0
ci: empty commit
ItzNotABug Dec 17, 2024
7ebad3c
Merge branch 'main' into `fix-support`.
ItzNotABug Jan 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
239 changes: 139 additions & 100 deletions src/lib/components/support.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,120 +1,159 @@
<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 { isSupportOnline, showSupportModal } from '$routes/(console)/wizard/support/store';
import { trackEvent } from '$lib/actions/analytics';
import { localeTimezoneName, utcHourToLocaleHour } from '$lib/helpers/date';
import { localeShortTimezoneName, utcHourToLocaleHour } from '$lib/helpers/date';
import { upgradeURL } from '$lib/stores/billing';
import { Card } from '$lib/components/index';
import { app } from '$lib/stores/app';
import { currentPlan } from '$lib/stores/organization';

export let show = false;

$: hasPremiumSupport = $currentPlan?.premiumSupport ?? false;

$: supportTimings = `${utcHourToLocaleHour('16:00')} - ${utcHourToLocaleHour('00:00')} ${localeTimezoneName()}`;
$: supportTimings = `${utcHourToLocaleHour('16:00')} - ${utcHourToLocaleHour('00:00')} ${localeShortTimezoneName()}`;

type SupportOption = {
cta?: string;
icon: string;
label: string;
link?: string;
description: string;
showSupport: boolean;
};

const supportOptions: SupportOption[] = [
{
showSupport: true,
icon: 'support',
label: 'Premium support',
description: 'Get priority email support from the Appwrite team'
},

{
icon: 'discord',
cta: 'Discord',
showSupport: false,
label: 'Community support',
link: 'https://appwrite.io/discord',
description: 'Get support from our community through Discord'
},
{
icon: 'github',
cta: 'Open issue',
showSupport: false,
label: 'Open GitHub issue',
link: 'https://github.com/appwrite',
description: 'Report a bug or pitch a new feature'
}
];
</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 hasPremiumSupport}
<section class="drop-section support-section">
<h4 class="heading-level-6">Support</h4>

{#each supportOptions as option}
<Card
isTile
class="support-option-card u-flex u-flex-vertical u-gap-12"
style="border-radius: var(--border-radius-small, 8px); padding: 0.65rem;">
<div class="u-flex u-flex-vertical u-gap-4">
<h4 class="body-text-2 u-bold">{option.label}</h4>

<p class="u-line-height-1-5 u-margin-block-start-8">
Get personalized support from the Appwrite team from <b>{supportTimings}</b>
{option.description}
</p>
</div>

{#if option.showSupport}
<div class="u-flex u-gap-12 u-cross-center">
{#if !hasPremiumSupport}
<Button
href={$upgradeURL}
on:click={() => {
trackEvent('click_organization_upgrade', {
from: 'button',
source: 'support_menu'
});
}}
><span class="text">Get Premium support</span>
</Button>
{:else}
<Button
secondary
on:click={() => {
show = false;
$showSupportModal = false;
wizard.start(SupportWizard);
}}>
<span class="text">Contact support</span>
</Button>
{/if}

<div class="u-flex u-gap-4 u-cross-center">
{#if isSupportOnline()}
<span
class="icon-check-circle u-color-text-success"
aria-hidden="true" />
{/if}

{supportTimings}
</div>
</div>
{:else}
<Button
href={option.link}
external
secondary
class="u-flex u-cross-center u-gap-6"
on:click={() => {
trackEvent('click_organization_upgrade', {
from: 'button',
source: 'support_menu'
});
}}>
<span class={`icon-${option.icon}`} />
<span>{option.cta}</span>
</Button>
{/if}
</div>
{#if !hasPremiumSupport}
<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
on:click={() => {
show = false;
$showSupportModal = false;
wizard.start(SupportWizard);
}}>
<span class="text">Contact our Support Team</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>

<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>
</Card>
{/each}

<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>
</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>
</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 class="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>
<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>

<style lang="scss">
.support-section {
gap: 1rem;
padding: 20px;
display: flex;
flex-direction: column;

@media (max-width: 768px) {
gap: 1.25rem;
padding: 0.5rem;
}
}

:global(.theme-light .support-option-card) {
border: 1px solid var(--color-border-neutral, #ededf0);
background: var(--color-bgColor-neutral-default, #fafafb);
}
</style>
5 changes: 5 additions & 0 deletions src/lib/helpers/date.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,11 @@ export const localeTimezoneName = () => {
return dateWithTimezone.split(', ')[1];
};

export const localeShortTimezoneName = () => {
const timezone = localeTimezoneName();
return timezone.match(/[A-Z]/g)?.join('') || timezone;
};

export const isSameDay = (date1: Date, date2: Date) => {
return (
date1.getFullYear() === date2.getFullYear() &&
Expand Down
2 changes: 1 addition & 1 deletion src/lib/layout/header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@
</DropList>

{#if isCloud}
<DropList width="18.5" bind:show={showSupport} scrollable={true}>
<DropList width="25" bind:show={showSupport} scrollable={true}>
<Button text on:click={() => (showSupport = !showSupport)}>
<span class="text">Support</span>
</Button>
Expand Down
4 changes: 3 additions & 1 deletion src/routes/(console)/supportWizard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
onDestroy(() => {
$supportData = {
message: null,
subject: null,
category: 'general',
file: null
};
Expand All @@ -39,8 +40,8 @@
'Content-Type': 'application/json'
},
body: JSON.stringify({
subject: 'support',
email: $user.email,
subject: $supportData.subject,
firstName: $user?.name || 'Unknown',
message: $supportData.message,
tags: ['cloud'],
Expand Down Expand Up @@ -75,6 +76,7 @@
function resetData() {
$supportData = {
message: null,
subject: null,
category: 'general',
file: null,
project: null
Expand Down
9 changes: 8 additions & 1 deletion src/routes/(console)/wizard/support/step1.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { FormList, InputSelect, InputTextarea } from '$lib/elements/forms';
import { FormList, InputSelect, InputText, InputTextarea } from '$lib/elements/forms';
import { WizardStep } from '$lib/layout';
import { supportData } from './store';
import { Pill } from '$lib/elements';
Expand Down Expand Up @@ -50,6 +50,13 @@
bind:value={$supportData.project}
{options} />
{/if}
<InputText
label="Subject"
id="subject"
placeholder="Briefly summarize your issue..."
bind:value={$supportData.subject}
required />

<InputTextarea
label="Tell us a bit more"
id="message"
Expand Down
2 changes: 2 additions & 0 deletions src/routes/(console)/wizard/support/store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@ import { writable } from 'svelte/store';

export type SupportData = {
message: string;
subject: string;
category: string;
file?: File | null;
project?: string;
};

export const supportData = writable<SupportData>({
message: '',
subject: '',
category: 'general',
file: null
});
Expand Down
Loading