WEBDIENSTE/appointment-booking-software
1
0
Fork 0
mirror of https://github.com/open-reception/appointment-booking-software.git synced 2026-09-10 19:27:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve onboarding expericene

Browse Source
This commit is contained in:
Karl Ludwig Weise
2025-11-12 09:29:27 +01:00
parent 649307b6dd
commit 91e448b3ec
9 changed files with 63 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
project.inlang/messages/de.json
+11 -3
View File
@@ -348,10 +348,18 @@
},
"onboarding": {
"title": "Mach' Dich bereit für Termine",
"description": "Für das beste Ergebnis folge dieser Anleitung Schritt für Schritt:",
"notification": {
"title": "Einrichtung noch nicht abgeschlossen",
"description": "Nächste Schritte anzeigen",
"action": "Weiter"
"ongoing": {
"title": "Einrichtung noch nicht abgeschlossen",
"description": "Nächste Schritte anzeigen",
"action": "Weiter"
},
"done": {
"title": "Einrichtung abgeschlossen!",
"description": "Sie können jetzt Termine entgegennehmen",
"action": "Startseite öffnen"
}
},
"sections": {
"settings": {
project.inlang/messages/en.json
+11 -3
View File
@@ -356,10 +356,18 @@
},
"onboarding": {
"title": "Get ready to collect appointments",
"description": "Follow this step-by-step to get the best results:",
"notification": {
"title": "Onboarding not complete",
"description": "Review next steps",
"action": "Proceed"
"ongoing": {
"title": "Onboarding not complete",
"description": "Review next steps",
"action": "Proceed"
},
"done": {
"title": "Onboarding complete!",
"description": "You can now collect appointments",
"action": "Open Homepage"
}
},
"sections": {
"settings": {
src/app.css
+11 -11
View File
@@ -36,11 +36,11 @@
--sidebar-ring: oklch(0.704 0.04 256.788);
/* custom colors */
--lighter: oklch(77.983% 0.03673 254.95);
--light: oklch(69.121% 0.03859 257.443);
--medium: oklch(62.379% 0.01913 256.381);
--dark: oklch(43.309% 0.00977 254.027);
--darker: oklch(27.232% 0.00797 264.468);
--lighter: oklch(74.262% 0.05601 254.57);
--light: oklch(65.382% 0.05802 257.123);
--medium: oklch(57.414% 0.04099 256.06);
--dark: oklch(40.615% 0.0213 256.41);
--darker: oklch(26.345% 0.01439 261.705);
}
.dark {
@@ -69,7 +69,7 @@
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.208 0.042 265.755);
--sidebar-foreground: oklch(0.984 0.003 247.858);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary: oklch(27.237% 0.04051 269.508);
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
--sidebar-accent: oklch(0.279 0.041 260.031);
--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
@@ -77,11 +77,11 @@
--sidebar-ring: oklch(0.551 0.027 264.364);
/* custom colors */
--lighter: oklch(27.232% 0.00797 264.468);
--light: oklch(43.309% 0.00977 254.027);
--medium: oklch(62.379% 0.01913 256.381);
--dark: oklch(69.121% 0.03859 257.443);
--darker: oklch(77.983% 0.03673 254.95);
--lighter: oklch(26.345% 0.01439 261.705);
--light: oklch(40.615% 0.0213 256.41);
--medium: oklch(57.414% 0.04099 256.06);
--dark: oklch(65.382% 0.05802 257.123);
--darker: oklch(74.262% 0.05601 254.57);
}
@theme {
src/lib/components/ui/onboarding-guide/onboarding-guide.svelte
+10 -2
View File
@@ -17,14 +17,22 @@
type Props = {
title: string;
description?: string;
steps: Step[];
};
let { title, steps }: Props = $props();
let { title, description, steps }: Props = $props();
</script>
<div class="flex max-w-[50ch] flex-col gap-4">
<Headline level="h2" style="h4">{title}</Headline>
<div class="flex flex-col gap-0.5">
<Headline level="h2" style="h4">{title}</Headline>
{#if description}
<Text style="sm" class="text-muted-foreground">
{description}
</Text>
{/if}
</div>
<div class="flex flex-col gap-4">
{#each steps as step, index (`step-${index}`)}
<div class="flex flex-col gap-1">
src/lib/stores/tenants.ts
+16 -4
View File
@@ -2,7 +2,7 @@ import logger from "$lib/logger";
import type { TTenant } from "$lib/types/tenant";
import { changeTenantUsingApi } from "$lib/utils/tenants";
import { toast } from "svelte-sonner";
import { writable } from "svelte/store";
import { get, writable } from "svelte/store";
import { auth } from "./auth";
import { m } from "$i18n/messages";
import { goto } from "$app/navigation";
@@ -74,14 +74,26 @@ const createTenantsStore = () => {
const newCurrentTenant = tenants.find((t: TTenant) => t.id === newCurrentTenantId) || null;
if (newCurrentTenant?.setupState !== "READY") {
toast.info(m["dashboard.onboarding.notification.title"](), {
toast.info(m["dashboard.onboarding.notification.ongoing.title"](), {
duration: 4000,
description: m["dashboard.onboarding.notification.description"](),
description: m["dashboard.onboarding.notification.ongoing.description"](),
action: {
label: m["dashboard.onboarding.notification.action"](),
label: m["dashboard.onboarding.notification.ongoing.action"](),
onClick: () => goto(ROUTES.DASHBOARD.MAIN),
},
});
} else {
const curState = get(store);
if (curState && curState.currentTenant?.setupState !== "READY") {
toast.info(m["dashboard.onboarding.notification.done.title"](), {
duration: 4000,
description: m["dashboard.onboarding.notification.done.description"](),
action: {
label: m["dashboard.onboarding.notification.done.action"](),
onClick: () => goto(ROUTES.MAIN),
},
});
}
}
store.update((state) => {
src/routes/(pages)/dashboard/+page.svelte
+1
View File
@@ -94,6 +94,7 @@
{#if $auth.user && ["GLOBAL_ADMIN", "TENANT_ADMIN"].includes($auth.user?.role) && tenant && tenant.setupState !== "READY"}
<OnboardingGuide
title={m["dashboard.onboarding.title"]()}
description={m["dashboard.onboarding.description"]()}
steps={[
{
title: m["dashboard.onboarding.sections.settings.title"](),
src/routes/(pages)/dashboard/agents/+page.svelte
+1
View File
@@ -129,6 +129,7 @@
closeDialog("delete");
curItem = null;
agents.load();
tenants.reload();
invalidate(ROUTES.DASHBOARD.AGENTS);
}}
/>
src/routes/(pages)/dashboard/channels/+page.svelte
+1
View File
@@ -155,6 +155,7 @@
done={() => {
closeDialog("delete");
curItem = null;
tenants.reload();
invalidate(ROUTES.DASHBOARD.CHANNELS);
}}
/>
src/routes/(pages)/dashboard/staff/+page.svelte
+1
View File
@@ -146,6 +146,7 @@
done={() => {
closeDialog("delete");
curItem = null;
tenants.reload();
invalidate(ROUTES.DASHBOARD.STAFF);
}}
/>