first

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>
+	);
+}