import { GetServerSidePropsContext } from "next"; import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import Head from "next/head"; import { useRouter } from "next/router"; import { z } from "zod"; import { getSession } from "@calcom/lib/auth"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { User } from "@calcom/prisma/client"; import { Button } from "@calcom/ui/v2"; import prisma from "@lib/prisma"; import { StepCard } from "@components/getting-started/components/StepCard"; import { Steps } from "@components/getting-started/components/Steps"; import { ConnectedCalendars } from "@components/getting-started/steps-views/ConnectCalendars"; import { SetupAvailability } from "@components/getting-started/steps-views/SetupAvailability"; import UserProfile from "@components/getting-started/steps-views/UserProfile"; import { UserSettings } from "@components/getting-started/steps-views/UserSettings"; interface IOnboardingPageProps { user: User; } const INITIAL_STEP = "user-settings"; const steps = ["user-settings", "connected-calendar", "setup-availability", "user-profile"] as const; const stepTransform = (step: typeof steps[number]) => { const stepIndex = steps.indexOf(step); if (stepIndex > -1) { return steps[stepIndex]; } return INITIAL_STEP; }; const stepRouteSchema = z.object({ step: z.array(z.enum(steps)).default([INITIAL_STEP]), }); const OnboardingPage = (props: IOnboardingPageProps) => { const router = useRouter(); const { user } = props; const { t } = useLocale(); const result = stepRouteSchema.safeParse(router.query); const currentStep = result.success ? result.data.step[0] : INITIAL_STEP; const headers = [ { title: `${t("welcome_to_cal_header")}`, subtitle: [`${t("we_just_need_basic_info")}`, `${t("edit_form_later_subtitle")}`], }, { title: `${t("connect_your_calendar")}`, subtitle: [`${t("connect_your_calendar_instructions")}`], skipText: `${t("connect_calendar_later")}`, }, { title: `${t("set_availability")}`, subtitle: [ `${t("set_availability_getting_started_subtitle_1")}`, `${t("set_availability_getting_started_subtitle_2")}`, ], skipText: `${t("set_my_availability_later")}`, }, { title: `${t("nearly_there")}`, subtitle: [`${t("nearly_there_instructions")}`], }, ]; const goToIndex = (index: number) => { const newStep = steps[index]; router.push( { pathname: `/getting-started/${stepTransform(newStep)}`, }, undefined ); }; const currentStepIndex = steps.indexOf(currentStep); return (
Cal.com - {t("getting_started")}

{headers[currentStepIndex]?.title || "Undefined title"}

{headers[currentStepIndex]?.subtitle.map((subtitle, index) => (

{subtitle}

))}
{currentStep === "user-settings" && goToIndex(1)} />} {currentStep === "connected-calendar" && goToIndex(2)} />} {currentStep === "setup-availability" && ( goToIndex(3)} defaultScheduleId={user.defaultScheduleId} /> )} {currentStep === "user-profile" && } {headers[currentStepIndex]?.skipText && (
)}
); }; export const getServerSideProps = async (context: GetServerSidePropsContext) => { const crypto = await import("crypto"); const session = await getSession(context); if (!session?.user?.id) { return { redirect: { permanent: false, destination: "/auth/login" } }; } const user = await prisma.user.findUnique({ where: { id: session.user.id, }, select: { id: true, username: true, name: true, email: true, bio: true, avatar: true, timeZone: true, weekStart: true, hideBranding: true, theme: true, plan: true, brandColor: true, darkBrandColor: true, metadata: true, timeFormat: true, allowDynamicBooking: true, defaultScheduleId: true, completedOnboarding: true, }, }); if (!user) { throw new Error("User from session not found"); } return { props: { ...(await serverSideTranslations(context.locale ?? "", ["common"])), user: { ...user, emailMd5: crypto.createHash("md5").update(user.email).digest("hex"), }, }, }; }; export default OnboardingPage;