Skip to content

New layout for support and add subject #1564

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

Merged
merged 11 commits into from
Jan 14, 2025
Merged

New layout for support and add subject #1564

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
11 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
c51bf9c
ci: empty commit
ItzNotABug Jan 9, 2025
5294517
address comments, fix styles.
ItzNotABug Jan 10, 2025
0b404df
address comments, fix styles.
ItzNotABug Jan 13, 2025
9c2154b
address comments.
ItzNotABug Jan 13, 2025
3c6f2eb
update: color tokens.
ItzNotABug Jan 13, 2025
c75db74
address comment: `add a comment explaining why we need this workaround`.
ItzNotABug Jan 14, 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
236 changes: 136 additions & 100 deletions src/lib/components/support.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,123 +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 { organization } from '$lib/stores/organization';
import { BillingPlan } from '$lib/constants';
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';

export let show = false;

$: isPaid =
$organization?.billingPlan === BillingPlan.PRO ||
$organization?.billingPlan === BillingPlan.SCALE;

$: 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 isPaid}
<section class="drop-section support-section">
<h4 class="heading-level-6">Support</h4>

{#each supportOptions as option}
<Card
isTile
class="restore-modal-inner-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>
{/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
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>

<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>
{#if option.showSupport}
<div class="u-flex u-gap-12 u-cross-center">
{#if !isPaid}
<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-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-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}
</Card>
{/each}

<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>
.support-section {
gap: 1rem;
padding: 20px;
display: flex;
flex-direction: column;
}

@media (max-width: 768px) {
.support-section {
gap: 1.25rem;
padding: 0.5rem;
}
}
</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