73 lines
1.7 KiB
TypeScript
73 lines
1.7 KiB
TypeScript
|
"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>
|
||
|
|
);
|
||
|
|
}
|