feat(onboarding): add notifier step reusing real provider list

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-14 11:16:13 +02:00 · 2026-06-17 09:17:11 +02:00
parent cd4364e664
commit 1b7ab65aab
1 changed files with 56 additions and 0 deletions
@@ -0,0 +1,56 @@
+"use client";
+
+import { useState } from "react";
+import { useOnboarding } from "@onboardjs/react";
+import { Button } from "@/components/ui/button";
+import { notificationProviders } from "@/features/channel/channels-notification-helper";
+import { OnboardingChannel } from "@/features/onboarding/onboarding.types";
+
+export const StepNotifier = () => {
+    const { next, updateContext, state } = useOnboarding();
+    const [selected, setSelected] = useState<string[]>([]);
+
+    const toggle = (value: string) => {
+        setSelected((prev) => (prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]));
+    };
+
+    const onContinue = async () => {
+        const notifiers: OnboardingChannel[] = selected.map((providerId) => {
+            const provider = notificationProviders.find((p) => p.value === providerId);
+            return { id: providerId, provider: providerId, label: provider?.label ?? providerId };
+        });
+        await updateContext({ flowData: { ...state?.context.flowData, notifiers } });
+        await next();
+    };
+
+    return (
+        <div className="flex flex-col gap-4">
+            <div>
+                <h1 className="text-2xl font-semibold">Connect a notifier</h1>
+                <p className="text-sm text-muted-foreground mt-1">Optional — get notified about backups, restores and health checks.</p>
+            </div>
+            <div className="grid grid-cols-2 gap-2">
+                {notificationProviders
+                    .filter((p) => !p.preview)
+                    .map((provider) => {
+                        const Icon = provider.icon;
+                        const isSelected = selected.includes(provider.value);
+                        return (
+                            <button
+                                key={provider.value}
+                                type="button"
+                                onClick={() => toggle(provider.value)}
+                                className={`flex items-center gap-2 rounded-md border p-3 text-sm ${isSelected ? "border-primary bg-primary/10" : "border-white/10"}`}
+                            >
+                                <Icon className="size-4" />
+                                {provider.label}
+                            </button>
+                        );
+                    })}
+            </div>
+            <Button type="button" onClick={onContinue}>
+                Continue
+            </Button>
+        </div>
+    );
+};