first

apps/web/modules/saas/onboarding/components/OnboardingForm.tsx

@@ -0,0 +1,72 @@
+"use client";
+import { authClient } from "@repo/auth/client";
+import { useRouter } from "@shared/hooks/router";
+import { clearCache } from "@shared/lib/cache";
+import { Progress } from "@ui/components/progress";
+import { useTranslations } from "next-intl";
+import { useSearchParams } from "next/navigation";
+import { withQuery } from "ufo";
+import { OnboardingStep1 } from "./OnboardingStep1";
+
+export function OnboardingForm() {
+	const t = useTranslations();
+	const router = useRouter();
+	const searchParams = useSearchParams();
+
+	const stepSearchParam = searchParams.get("step");
+	const redirectTo = searchParams.get("redirectTo");
+	const onboardingStep = stepSearchParam
+		? Number.parseInt(stepSearchParam, 10)
+		: 1;
+
+	const setStep = (step: number) => {
+		router.replace(
+			withQuery(window.location.search ?? "", {
+				step,
+			}),
+		);
+	};
+
+	const onCompleted = async () => {
+		await authClient.updateUser({
+			onboardingComplete: true,
+		});
+
+		await clearCache();
+		router.replace(redirectTo ?? "/app");
+	};
+
+	const steps = [
+		{
+			component: <OnboardingStep1 onCompleted={() => onCompleted()} />,
+		},
+	];
+
+	return (
+		<div>
+			<h1 className="font-bold text-xl md:text-2xl">
+				{t("onboarding.title")}
+			</h1>
+			<p className="mt-2 mb-6 text-foreground/60">
+				{t("onboarding.message")}
+			</p>
+
+			{steps.length > 1 && (
+				<div className="mb-6 flex items-center gap-3">
+					<Progress
+						value={(onboardingStep / steps.length) * 100}
+						className="h-2"
+					/>
+					<span className="shrink-0 text-foreground/60 text-xs">
+						{t("onboarding.step", {
+							step: onboardingStep,
+							total: steps.length,
+						})}
+					</span>
+				</div>
+			)}
+
+			{steps[onboardingStep - 1].component}
+		</div>
+	);
+}

apps/web/modules/saas/onboarding/components/OnboardingStep1.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { authClient } from "@repo/auth/client";
+import { useSession } from "@saas/auth/hooks/use-session";
+import { UserAvatarUpload } from "@saas/settings/components/UserAvatarUpload";
+import { Button } from "@ui/components/button";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+} from "@ui/components/form";
+import { Input } from "@ui/components/input";
+import { ArrowRightIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useEffect } from "react";
+import type { SubmitHandler } from "react-hook-form";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+const formSchema = z.object({
+	name: z.string(),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+export function OnboardingStep1({ onCompleted }: { onCompleted: () => void }) {
+	const t = useTranslations();
+	const { user } = useSession();
+	const form = useForm<FormValues>({
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			name: user?.name ?? "",
+		},
+	});
+
+	useEffect(() => {
+		if (user) {
+			form.setValue("name", user.name ?? "");
+		}
+	}, [user]);
+
+	const onSubmit: SubmitHandler<FormValues> = async ({ name }) => {
+		form.clearErrors("root");
+
+		try {
+			await authClient.updateUser({
+				name,
+			});
+
+			onCompleted();
+		} catch (e) {
+			form.setError("root", {
+				type: "server",
+				message: t("onboarding.notifications.accountSetupFailed"),
+			});
+		}
+	};
+
+	return (
+		<div>
+			<Form {...form}>
+				<form
+					className="flex flex-col items-stretch gap-8"
+					onSubmit={form.handleSubmit(onSubmit)}
+				>
+					<FormField
+						control={form.control}
+						name="name"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>
+									{t("onboarding.account.name")}
+								</FormLabel>
+								<FormControl>
+									<Input {...field} />
+								</FormControl>
+							</FormItem>
+						)}
+					/>
+
+					<FormItem className="flex items-center justify-between gap-4">
+						<div>
+							<FormLabel>
+								{t("onboarding.account.avatar")}
+							</FormLabel>
+
+							<FormDescription>
+								{t("onboarding.account.avatarDescription")}
+							</FormDescription>
+						</div>
+						<FormControl>
+							<UserAvatarUpload
+								onSuccess={() => {
+									return;
+								}}
+								onError={() => {
+									return;
+								}}
+							/>
+						</FormControl>
+					</FormItem>
+
+					<Button type="submit" loading={form.formState.isSubmitting}>
+						{t("onboarding.continue")}
+						<ArrowRightIcon className="ml-2 size-4" />
+					</Button>
+				</form>
+			</Form>
+		</div>
+	);
+}