diff --git a/src/lib/components/evaluation.svelte b/src/lib/components/feedback/evaluation.svelte similarity index 100% rename from src/lib/components/evaluation.svelte rename to src/lib/components/feedback/evaluation.svelte diff --git a/src/lib/components/feedbackGeneral.svelte b/src/lib/components/feedback/feedback.svelte similarity index 54% rename from src/lib/components/feedbackGeneral.svelte rename to src/lib/components/feedback/feedback.svelte index 7cef18c388..98cb759bdb 100644 --- a/src/lib/components/feedbackGeneral.svelte +++ b/src/lib/components/feedback/feedback.svelte @@ -1,40 +1,41 @@
-

How can we improve?

+

{$selectedFeedback.title}

- Your feedback is important to us. Please be honest and tell us what you think. + {$selectedFeedback.desc}
-
- - - - - - + +
diff --git a/src/lib/components/feedback/feedbackGeneral.svelte b/src/lib/components/feedback/feedbackGeneral.svelte new file mode 100644 index 0000000000..183921a56f --- /dev/null +++ b/src/lib/components/feedback/feedbackGeneral.svelte @@ -0,0 +1,19 @@ + + + + + + + diff --git a/src/lib/components/feedback/feedbackNPS.svelte b/src/lib/components/feedback/feedbackNPS.svelte new file mode 100644 index 0000000000..613e10514a --- /dev/null +++ b/src/lib/components/feedback/feedbackNPS.svelte @@ -0,0 +1,30 @@ + + + + How likely are you to recommend Appwrite to a friend or colleague? + +{#if $feedbackData.value} + + + + + +{/if} diff --git a/src/lib/components/feedback/index.ts b/src/lib/components/feedback/index.ts new file mode 100644 index 0000000000..15d522683d --- /dev/null +++ b/src/lib/components/feedback/index.ts @@ -0,0 +1,3 @@ +export { default as Feedback } from './feedback.svelte'; +export { default as FeedbackGeneral } from './feedbackGeneral.svelte'; +export { default as FeedbackNPS } from './feedbackNPS.svelte'; diff --git a/src/lib/components/feedbackNPS.svelte b/src/lib/components/feedbackNPS.svelte deleted file mode 100644 index a9276b4a75..0000000000 --- a/src/lib/components/feedbackNPS.svelte +++ /dev/null @@ -1,78 +0,0 @@ - - -
-
-

How are we doing?

- -
-
- At Appwrite, we value the feedback of our users. That means you! We'd love to hear what you - think. -
- - - - How likely are you to recommend Appwrite to a friend or colleague? - - {#if value} - - - - - - {/if} -
- - -
- -
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts index f891b82552..f2cf6e0eed 100644 --- a/src/lib/components/index.ts +++ b/src/lib/components/index.ts @@ -31,9 +31,6 @@ export { default as Box } from './box.svelte'; export { default as Search } from './search.svelte'; export { default as SearchQuery } from './searchQuery.svelte'; export { default as GridItem1 } from './gridItem1.svelte'; -export { default as FeedbackGeneral } from './feedbackGeneral.svelte'; -export { default as FeedbackNPS } from './feedbackNPS.svelte'; -export { default as Evaluation } from './evaluation.svelte'; export { default as Steps } from './steps.svelte'; export { default as Step } from './step.svelte'; export { default as Code } from './code.svelte'; diff --git a/src/lib/images/feedback/feedback-dark.svg b/src/lib/images/feedback/feedback-dark.svg new file mode 100644 index 0000000000..8f0b553d6b --- /dev/null +++ b/src/lib/images/feedback/feedback-dark.svg @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/images/feedback/feedback-light.svg b/src/lib/images/feedback/feedback-light.svg new file mode 100644 index 0000000000..d7ace402f4 --- /dev/null +++ b/src/lib/images/feedback/feedback-light.svg @@ -0,0 +1,126 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte index e9ec88e7fa..099c1411f4 100644 --- a/src/lib/layout/header.svelte +++ b/src/lib/layout/header.svelte @@ -1,26 +1,20 @@ @@ -122,6 +136,24 @@ Storage +
  • + trackEvent('click_menu_settings')} + class:is-selected={$page.url.pathname.startsWith( + `${projectPath}/settings` + )} + title="Settings" + use:tooltip={{ + content: 'Settings', + placement: 'right', + disabled: !narrow + }}> + +
    • @@ -129,7 +161,7 @@
    trackEvent('click_menu_settings')} class:is-selected={$page.url.pathname.startsWith(`${projectPath}/settings`)} @@ -142,6 +174,13 @@ +
    {/if} diff --git a/src/lib/stores/app.ts b/src/lib/stores/app.ts index 11afe9d6af..7c4b2a1849 100644 --- a/src/lib/stores/app.ts +++ b/src/lib/stores/app.ts @@ -1,5 +1,4 @@ import { browser } from '$app/environment'; -import { VARS } from '$lib/system'; import { writable } from 'svelte/store'; export type AppStore = { @@ -7,89 +6,11 @@ export type AppStore = { themeInUse: 'light' | 'dark'; }; -export type Feedback = { - elapsed: number; - visualized: number; - notification: boolean; - type: 'nps' | 'general'; - show: boolean; -}; - export const app = writable({ theme: 'auto', themeInUse: 'light' }); -function createFeedbackStore() { - const { subscribe, update } = writable({ - elapsed: browser ? parseInt(localStorage.getItem('feedbackElapsed')) : 0, - visualized: browser ? parseInt(localStorage.getItem('feedbackVisualized')) : 0, - notification: false, - type: 'general', - show: false - }); - return { - subscribe, - update, - toggleFeedback: () => { - update((feedback) => { - feedback.show = !feedback.show; - return feedback; - }); - }, - toggleNotification: () => - update((feedback) => { - feedback.notification = !feedback.notification; - return feedback; - }), - switchType: (feedType: Feedback['type']) => - update((feedback) => { - feedback.type = feedType; - return feedback; - }), - addVisualization: () => - update((feedback) => { - feedback.visualized += 1; - localStorage.setItem('feedbackVisualized', feedback.visualized.toString()); - return feedback; - }), - - increaseElapsed: (time: number) => { - update((feedback) => { - feedback.elapsed += time; - localStorage.setItem('feedbackElapsed', feedback.elapsed.toString()); - return feedback; - }); - }, - submitFeedback: async ( - subject: string, - message: string, - firstname?: string, - email?: string, - value?: number - ) => { - if (!VARS.GROWTH_ENDPOINT) return; - const response = await fetch(`${VARS.GROWTH_ENDPOINT}/feedback`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - subject, - message, - email, - firstname: firstname ? firstname : undefined, - customFields: value ? [{ id: '40655', value }] : undefined - }) - }); - if (response.status >= 400) { - throw new Error('Failed to submit feedback'); - } - } - }; -} -export const feedback = createFeedbackStore(); - if (browser) { app.update((n) => ({ ...n, diff --git a/src/lib/stores/feedback.ts b/src/lib/stores/feedback.ts new file mode 100644 index 0000000000..d63e1d2ec1 --- /dev/null +++ b/src/lib/stores/feedback.ts @@ -0,0 +1,139 @@ +import { browser } from '$app/environment'; +import { VARS } from '$lib/system'; +import { writable } from 'svelte/store'; +import type { SvelteComponent } from 'svelte'; +import FeedbackGeneral from '$lib/components/feedback/feedbackGeneral.svelte'; +import FeedbackNps from '$lib/components/feedback/feedbackNPS.svelte'; + +export type Feedback = { + elapsed: number; + visualized: number; + notification: boolean; + type: 'nps' | 'general'; + show: boolean; +}; + +export type FeedbackData = { + message: string; + name?: string; + email?: string; + value?: number; +}; + +export type FeedbackOption = { + type: Feedback['type']; + title: string; + desc: string; + component: typeof SvelteComponent; +}; + +export const feedbackOptions: FeedbackOption[] = [ + { + type: 'general', + title: 'How can we improve?', + desc: 'Your feedback is important to us. Please be honest and tell us what you think.', + component: FeedbackGeneral + }, + { + type: 'nps', + title: 'How are we doing?', + desc: "At Appwrite, we value the feedback of our users. That means you! We'd love to hear what you think.", + component: FeedbackNps + } +]; + +export const selectedFeedback = writable(); + +function createFeedbackDataStore() { + const { subscribe, update } = writable({ + message: '', + name: '', + email: '', + value: 0 + }); + return { + subscribe, + update, + reset: () => { + update((feedbackData) => { + feedbackData.message = ''; + feedbackData.name = ''; + feedbackData.email = ''; + feedbackData.value = 0; + return feedbackData; + }); + } + }; +} + +export const feedbackData = createFeedbackDataStore(); + +function createFeedbackStore() { + const { subscribe, update } = writable({ + elapsed: browser ? parseInt(localStorage.getItem('feedbackElapsed')) : 0, + visualized: browser ? parseInt(localStorage.getItem('feedbackVisualized')) : 0, + notification: false, + type: 'general', + show: false + }); + return { + subscribe, + update, + toggleFeedback: () => { + update((feedback) => { + feedback.show = !feedback.show; + return feedback; + }); + }, + toggleNotification: () => + update((feedback) => { + feedback.notification = !feedback.notification; + return feedback; + }), + switchType: (feedType: Feedback['type']) => + update((feedback) => { + feedback.type = feedType; + return feedback; + }), + addVisualization: () => + update((feedback) => { + feedback.visualized += 1; + localStorage.setItem('feedbackVisualized', feedback.visualized.toString()); + return feedback; + }), + + increaseElapsed: (time: number) => { + update((feedback) => { + feedback.elapsed += time; + localStorage.setItem('feedbackElapsed', feedback.elapsed.toString()); + return feedback; + }); + }, + submitFeedback: async ( + subject: string, + message: string, + firstname?: string, + email?: string, + value?: number + ) => { + if (!VARS.GROWTH_ENDPOINT) return; + const response = await fetch(`${VARS.GROWTH_ENDPOINT}/feedback`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + subject, + message, + email, + firstname: firstname ? firstname : undefined, + customFields: value ? [{ id: '40655', value }] : undefined + }) + }); + if (response.status >= 400) { + throw new Error('Failed to submit feedback'); + } + } + }; +} +export const feedback = createFeedbackStore(); diff --git a/src/routes/console/+layout.svelte b/src/routes/console/+layout.svelte index 870794b406..38e74b324b 100644 --- a/src/routes/console/+layout.svelte +++ b/src/routes/console/+layout.svelte @@ -7,7 +7,7 @@ import Header from '$lib/layout/header.svelte'; import SideNavigation from '$lib/layout/navigation.svelte'; import Shell from '$lib/layout/shell.svelte'; - import { feedback } from '$lib/stores/app'; + import { feedback } from '$lib/stores/feedback'; import { log } from '$lib/stores/logs'; import { newOrgModal } from '$lib/stores/organization'; import { wizard } from '$lib/stores/wizard'; @@ -15,6 +15,8 @@ import { loading } from '../store'; import Create from './createOrganization.svelte'; + let isOpen = false; + onMount(() => { loading.set(false); @@ -47,12 +49,13 @@
    - +