d951a5b872
* adjustments for each language json file: - changed every Cal or Cal.com with a variable to make it possible to change that with a custom brand - fix and renamed ATTENDEE with attendeeName * added two new variables for appName and support mail address. so everybody can change it via env * changed static Cal or Cal.com with new defined constants * Using useLocal to modify static text to make it multilingual, and passing the correct variables for brand and mail * adding new readable variables for brand, website domain and mail address * fixed search routes * made static text multilingual and fixed german translations * Revert "fixed search routes" moved changes in another pr This reverts commit e6ba11a1ec7821d8c16c502d0357f6d5fcdb1958. * revert non whitelabel changes and moved it into another pr * revert attendeeName fix * reverted translation fixes and moved them in another pr * changed back to "Cal.com Logo" * changed back to "https://console.cal.com" * added new env variable for company name and replaced some domainName variables in language files * changed default for COMPANY_NAME to Cal.com, Inc. * changed Cal.com to APP_NAME for mail templates * Dropped website domain in favor of app name * Update .env.example * Apply suggestions from code review * Code review feedback * Delete App.tsx * Update packages/ui/Kbar.tsx * added meta.CTA back it was mistakenly removed * updated add members test Co-authored-by: maxi <maximilian.oehrlein@clicksports.de> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: zomars <zomars@me.com>
195 lines
5.9 KiB
TypeScript
195 lines
5.9 KiB
TypeScript
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 { APP_NAME } from "@calcom/lib/constants";
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { User } from "@calcom/prisma/client";
|
|
import { Button, StepCard, Steps } from "@calcom/ui";
|
|
|
|
import prisma from "@lib/prisma";
|
|
|
|
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", { appName: APP_NAME })}`,
|
|
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 (
|
|
<div
|
|
className="dark:bg-brand dark:text-brand-contrast min-h-screen text-black"
|
|
data-testid="onboarding"
|
|
key={router.asPath}>
|
|
<Head>
|
|
<title>
|
|
{APP_NAME} - {t("getting_started")}
|
|
</title>
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
|
|
<div className="mx-auto px-4 py-6 md:py-24">
|
|
<div className="relative">
|
|
<div className="sm:mx-auto sm:w-full sm:max-w-[600px]">
|
|
<div className="mx-auto sm:max-w-[520px]">
|
|
<header>
|
|
<p className="font-cal mb-3 text-[28px] font-medium leading-7">
|
|
{headers[currentStepIndex]?.title || "Undefined title"}
|
|
</p>
|
|
|
|
{headers[currentStepIndex]?.subtitle.map((subtitle, index) => (
|
|
<p className="font-sans text-sm font-normal text-gray-500" key={index}>
|
|
{subtitle}
|
|
</p>
|
|
))}
|
|
</header>
|
|
<Steps maxSteps={steps.length} currentStep={currentStepIndex} navigateToStep={goToIndex} />
|
|
</div>
|
|
<StepCard>
|
|
{currentStep === "user-settings" && <UserSettings user={user} nextStep={() => goToIndex(1)} />}
|
|
|
|
{currentStep === "connected-calendar" && <ConnectedCalendars nextStep={() => goToIndex(2)} />}
|
|
|
|
{currentStep === "setup-availability" && (
|
|
<SetupAvailability nextStep={() => goToIndex(3)} defaultScheduleId={user.defaultScheduleId} />
|
|
)}
|
|
|
|
{currentStep === "user-profile" && <UserProfile user={user} />}
|
|
</StepCard>
|
|
{headers[currentStepIndex]?.skipText && (
|
|
<div className="flex w-full flex-row justify-center">
|
|
<Button
|
|
color="minimal"
|
|
data-testid="skip-step"
|
|
onClick={(event) => {
|
|
event.preventDefault();
|
|
goToIndex(currentStepIndex + 1);
|
|
}}
|
|
className="mt-8 cursor-pointer px-4 py-2 font-sans text-sm font-medium">
|
|
{headers[currentStepIndex]?.skipText}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
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;
|