+ {/* Left column - Main content */}
+
+
+
+ }>
{/* Card */}
-
+
-
{/* Banner Upload */}
@@ -225,69 +229,14 @@ export const OrganizationBrandView = ({ userEmail }: OrganizationBrandViewProps)
-
- {/* Right side - Preview */}
-
- {/* Card Header */}
-
"pr-12 [&>button]:left-auto [&>button]:right-6 [&>button]:mt-0 [&>button]:transform"
)}
classNames={{
- container: "flex w-full items-center gap-4 p-4 pl-5 pr-12 md:p-5 md:pr-14",
+ container: "flex w-full items-center gap-3 p-5 pr-12",
}}>
-
+ {/* Left column - Main content */}
-
-
{/* Plan options */}
-
- - {t("onboarding_welcome_message", { userName })} -
-- {t("onboarding_welcome_question")} -
-
-
+
+
+ {/* Right column - Icon display */}
+
-
-
-
- {plan.badge}
-
-
-
+ {plan.title}
-
+
+ {plan.badge}
+
+
);
})}
-
- {/* Footer */}
-
+
+ className="hidden h-4 rounded-md px-1 py-1 md:flex md:items-center">
{plan.badge}
-
+ {plan.title}
- {plan.description} -
+ {plan.description} +
-
-
+
+ {selectedPlanData && (
+
diff --git a/apps/web/modules/onboarding/hooks/useSubmitPersonalOnboarding.ts b/apps/web/modules/onboarding/hooks/useSubmitPersonalOnboarding.ts
new file mode 100644
index 0000000000..15c3b10c73
--- /dev/null
+++ b/apps/web/modules/onboarding/hooks/useSubmitPersonalOnboarding.ts
@@ -0,0 +1,80 @@
+import { useRouter } from "next/navigation";
+
+import { setShowWelcomeToCalcomModalFlag } from "@calcom/features/shell/hooks/useWelcomeToCalcomModal";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useTelemetry } from "@calcom/lib/hooks/useTelemetry";
+import { telemetryEventTypes } from "@calcom/lib/telemetry";
+import { trpc } from "@calcom/trpc/react";
+import { showToast } from "@calcom/ui/components/toast";
+
+const DEFAULT_EVENT_TYPES = [
+ {
+ title: "15min_meeting",
+ slug: "15min",
+ length: 15,
+ },
+ {
+ title: "30min_meeting",
+ slug: "30min",
+ length: 30,
+ },
+ {
+ title: "secret_meeting",
+ slug: "secret",
+ length: 15,
+ hidden: true,
+ },
+];
+
+export const useSubmitPersonalOnboarding = () => {
+ const router = useRouter();
+ const { t } = useLocale();
+ const telemetry = useTelemetry();
+ const utils = trpc.useUtils();
+
+ const { data: eventTypes } = trpc.viewer.eventTypes.list.useQuery();
+ const createEventType = trpc.viewer.eventTypesHeavy.create.useMutation();
+
+ const mutation = trpc.viewer.me.updateProfile.useMutation({
+ onSuccess: async () => {
+ try {
+ // Create default event types if user has none
+ if (eventTypes?.length === 0) {
+ await Promise.all(
+ DEFAULT_EVENT_TYPES.map(async (event) => {
+ return createEventType.mutateAsync({
+ title: t(event.title),
+ slug: event.slug,
+ length: event.length,
+ hidden: event.hidden,
+ });
+ })
+ );
+ }
+ } catch (error) {
+ console.error(error);
+ }
+
+ await utils.viewer.me.get.refetch();
+ // Set flag to show welcome modal after redirect
+ setShowWelcomeToCalcomModalFlag();
+ router.push("/event-types?welcomeToCalcomModal=true");
+ },
+ onError: (error) => {
+ showToast(t("something_went_wrong"), "error");
+ console.error(error);
+ },
+ });
+
+ const submitPersonalOnboarding = () => {
+ telemetry.event(telemetryEventTypes.onboardingFinished);
+ mutation.mutate({
+ completedOnboarding: true,
+ });
+ };
+
+ return {
+ submitPersonalOnboarding,
+ isSubmitting: mutation.isPending,
+ };
+};
diff --git a/apps/web/modules/onboarding/organization/brand/organization-brand-view.tsx b/apps/web/modules/onboarding/organization/brand/organization-brand-view.tsx
index 6868e24e86..66df2dbc2e 100644
--- a/apps/web/modules/onboarding/organization/brand/organization-brand-view.tsx
+++ b/apps/web/modules/onboarding/organization/brand/organization-brand-view.tsx
@@ -8,8 +8,9 @@ import { HexColorPicker } from "react-colorful";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button } from "@calcom/ui/components/button";
-import { OnboardingCard } from "../../personal/_components/OnboardingCard";
-import { OnboardingLayout } from "../../personal/_components/OnboardingLayout";
+import { OnboardingCard } from "../../components/OnboardingCard";
+import { OnboardingLayout } from "../../components/OnboardingLayout";
+import { OnboardingBrowserView } from "../../components/onboarding-browser-view";
import { useOnboardingStore } from "../../store/onboarding-store";
type OrganizationBrandViewProps = {
@@ -118,6 +119,7 @@ export const OrganizationBrandView = ({ userEmail }: OrganizationBrandViewProps)
return (
{t("onboarding_logo_size_hint")}
++ {t("onboarding_logo_size_hint")} +
-
+
+ {/* Right column - Browser view */}
+
-
- {t("preview")}
-
- {/* Banner preview */}
-
-
- {bannerPreview && (
- 
- )}
-
-
- {/* Content */}
-
-
-
-
-
- {/* Logo preview */}
-
-
- {logoPreview && (
- 
- )}
-
- - {organizationDetails.name || t("onboarding_preview_nameless")} -
-
-
-
-
- - {t("onboarding_preview_example_title")} -
-- {t("onboarding_preview_example_description")} -
-
- {[134, 104, 84, 104].map((width, i) => (
-
-
-
-
-
- ))}
-
-
- {/* Card */}
-
-
- {/* Card Header */}
-
+
+ {/* Left column - Main content */}
- {t("continue")}
-
+
-
);
};
diff --git a/apps/web/modules/onboarding/personal/profile/personal-profile-view.tsx b/apps/web/modules/onboarding/personal/profile/personal-profile-view.tsx
deleted file mode 100644
index 67efa29b4f..0000000000
--- a/apps/web/modules/onboarding/personal/profile/personal-profile-view.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
-import { useForm } from "react-hook-form";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { md } from "@calcom/lib/markdownIt";
-import turndown from "@calcom/lib/turndownService";
-import { trpc } from "@calcom/trpc/react";
-import { UserAvatar } from "@calcom/ui/components/avatar";
-import { Button } from "@calcom/ui/components/button";
-import { Editor } from "@calcom/ui/components/editor";
-import { Label } from "@calcom/ui/components/form";
-import { ImageUploader } from "@calcom/ui/components/image-uploader";
-import { showToast } from "@calcom/ui/components/toast";
-
-import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
-
-import { OnboardingCard } from "../_components/OnboardingCard";
-import { OnboardingLayout } from "../_components/OnboardingLayout";
-import { useOnboardingStore } from "../../store/onboarding-store";
-
-type PersonalProfileViewProps = {
- userEmail: string;
-};
-
-type FormData = {
- bio: string;
-};
-
-export const PersonalProfileView = ({ userEmail }: PersonalProfileViewProps) => {
- const { data: user } = trpc.viewer.me.get.useQuery();
- const router = useRouter();
- const { t } = useLocale();
- const { personalDetails, setPersonalDetails } = useOnboardingStore();
-
- const avatarRef = useRef(null);
- const [imageSrc, setImageSrc] = useState("");
- const [firstRender, setFirstRender] = useState(true);
-
- // Update imageSrc when user loads
- useEffect(() => {
- if (user) {
- setImageSrc(personalDetails.avatar || user.avatar || "");
- }
- }, [user, personalDetails.avatar]);
-
- const { setValue, handleSubmit, getValues } = useForm({
- defaultValues: { bio: personalDetails.bio || user?.bio || "" },
- });
-
- const utils = trpc.useUtils();
-
- // Avatar mutation
- const avatarMutation = trpc.viewer.me.updateProfile.useMutation({
- onSuccess: async (data) => {
- showToast(t("your_user_profile_updated_successfully"), "success");
- setImageSrc(data.avatarUrl ?? "");
- setPersonalDetails({ avatar: data.avatarUrl ?? null });
- },
- onError: () => {
- showToast(t("problem_saving_user_profile"), "error");
- },
- });
-
- // Profile mutation
- const mutation = trpc.viewer.me.updateProfile.useMutation({
- onSuccess: async () => {
- await utils.viewer.me.invalidate();
- },
- });
-
- const onSubmit = handleSubmit(async (data: { bio: string }) => {
- const { bio } = data;
-
- // Save to store
- setPersonalDetails({
- bio,
- });
-
- // Save to backend
- await mutation.mutateAsync({
- bio,
- });
-
- router.push("/onboarding/personal/calendar");
- });
-
- async function updateProfileHandler(newAvatar: string) {
- avatarMutation.mutate({
- avatarUrl: newAvatar,
- });
- }
-
- if (!user) {
- return null;
- }
-
- return (
-
-
- {t("continue")}
-
- }>
- {/* Form */}
-
-
- );
-};
diff --git a/apps/web/modules/onboarding/personal/settings/personal-settings-view.tsx b/apps/web/modules/onboarding/personal/settings/personal-settings-view.tsx
index 84b4638351..ba2ae42491 100644
--- a/apps/web/modules/onboarding/personal/settings/personal-settings-view.tsx
+++ b/apps/web/modules/onboarding/personal/settings/personal-settings-view.tsx
@@ -2,23 +2,26 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
+import { useEffect, useRef, useState } from "react";
+import { FormProvider, useForm } from "react-hook-form";
import { z } from "zod";
-import dayjs from "@calcom/dayjs";
-import { useTimePreferences } from "@calcom/features/bookings/lib";
-import { TimezoneSelect } from "@calcom/features/components/timezone-select";
import { FULL_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
+import { UserAvatar } from "@calcom/ui/components/avatar";
import { Button } from "@calcom/ui/components/button";
-import { Label, TextField } from "@calcom/ui/components/form";
+import { Label, TextArea, TextField } from "@calcom/ui/components/form";
+import { ImageUploader } from "@calcom/ui/components/image-uploader";
+import { showToast } from "@calcom/ui/components/toast";
+import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
+
+import { OnboardingCard } from "../../components/OnboardingCard";
+import { OnboardingLayout } from "../../components/OnboardingLayout";
+import { OnboardingBrowserView } from "../../components/onboarding-browser-view";
import { OnboardingContinuationPrompt } from "../../components/onboarding-continuation-prompt";
import { useOnboardingStore } from "../../store/onboarding-store";
-import { OnboardingCard } from "../_components/OnboardingCard";
-import { OnboardingLayout } from "../_components/OnboardingLayout";
type PersonalSettingsViewProps = {
userEmail: string;
@@ -28,17 +31,17 @@ type PersonalSettingsViewProps = {
export const PersonalSettingsView = ({ userEmail, userName }: PersonalSettingsViewProps) => {
const router = useRouter();
const { t } = useLocale();
+ const { data: user } = trpc.viewer.me.get.useQuery();
const { personalDetails, setPersonalDetails } = useOnboardingStore();
- const { setTimezone: setSelectedTimeZone, timezone: selectedTimeZone } = useTimePreferences();
- const [name, setName] = useState("");
+ const avatarRef = useRef(null);
+ const [imageSrc, setImageSrc] = useState("");
useEffect(() => {
- setName(personalDetails.name || userName || "");
- if (personalDetails.timezone) {
- setSelectedTimeZone(personalDetails.timezone);
+ if (user) {
+ setImageSrc(personalDetails.avatar || user.avatar || "");
}
- }, [personalDetails, userName, setSelectedTimeZone]);
+ }, [personalDetails.avatar, user]);
const formSchema = z.object({
name: z
@@ -47,98 +50,169 @@ export const PersonalSettingsView = ({ userEmail, userName }: PersonalSettingsVi
.max(FULL_NAME_LENGTH_MAX_LIMIT, {
message: t("max_limit_allowed_hint", { limit: FULL_NAME_LENGTH_MAX_LIMIT }),
}),
+ bio: z.string().optional(),
});
const form = useForm>({
resolver: zodResolver(formSchema),
defaultValues: {
name: personalDetails.name || userName || "",
+ bio: personalDetails.bio || "",
},
});
const utils = trpc.useUtils();
+
+ // Avatar mutation
+ const avatarMutation = trpc.viewer.me.updateProfile.useMutation({
+ onSuccess: async (data) => {
+ showToast(t("your_user_profile_updated_successfully"), "success");
+ setImageSrc(data.avatarUrl ?? "");
+ setPersonalDetails({ avatar: data.avatarUrl ?? null });
+ },
+ onError: () => {
+ showToast(t("problem_saving_user_profile"), "error");
+ },
+ });
+
+ // Profile mutation
const mutation = trpc.viewer.me.updateProfile.useMutation({
onSuccess: async () => {
await utils.viewer.me.invalidate();
},
});
+ async function updateProfileHandler(newAvatar: string) {
+ avatarMutation.mutate({
+ avatarUrl: newAvatar,
+ });
+ }
+
const handleContinue = form.handleSubmit(async (data) => {
// Save to store
setPersonalDetails({
name: data.name,
- timezone: selectedTimeZone,
+ bio: data.bio || "",
});
// Save to backend
await mutation.mutateAsync({
name: data.name,
- timeZone: selectedTimeZone,
+ bio: data.bio || "",
});
- router.push("/onboarding/personal/profile");
+ router.push("/onboarding/personal/calendar");
});
+ if (!user) {
+ return null;
+ }
+
return (
<>
+ {/* Left column - Main content */}
- {t("continue")}
-
- }>
- {/* Form */}
-
-
diff --git a/apps/web/modules/onboarding/personal/calendar/personal-calendar-view.tsx b/apps/web/modules/onboarding/personal/calendar/personal-calendar-view.tsx
index c7b76a37bd..f30674773e 100644
--- a/apps/web/modules/onboarding/personal/calendar/personal-calendar-view.tsx
+++ b/apps/web/modules/onboarding/personal/calendar/personal-calendar-view.tsx
@@ -1,15 +1,14 @@
"use client";
-import { useRouter } from "next/navigation";
-
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button } from "@calcom/ui/components/button";
+import { OnboardingCalendarBrowserView } from "../../components/onboarding-calendar-browser-view";
+import { useSubmitPersonalOnboarding } from "../../hooks/useSubmitPersonalOnboarding";
import { InstallableAppCard } from "../_components/InstallableAppCard";
-import { OnboardingCard } from "../_components/OnboardingCard";
-import { OnboardingLayout } from "../_components/OnboardingLayout";
-import { SkipButton } from "../_components/SkipButton";
+import { OnboardingCard } from "../../components/OnboardingCard";
+import { OnboardingLayout } from "../../components/OnboardingLayout";
import { useAppInstallation } from "../_components/useAppInstallation";
type PersonalCalendarViewProps = {
@@ -17,9 +16,9 @@ type PersonalCalendarViewProps = {
};
export const PersonalCalendarView = ({ userEmail }: PersonalCalendarViewProps) => {
- const router = useRouter();
const { t } = useLocale();
const { installingAppSlug, setInstallingAppSlug, createInstallHandlers } = useAppInstallation();
+ const { submitPersonalOnboarding, isSubmitting } = useSubmitPersonalOnboarding();
const queryIntegrations = trpc.viewer.apps.integrations.useQuery({
variant: "calendar",
@@ -29,23 +28,38 @@ export const PersonalCalendarView = ({ userEmail }: PersonalCalendarViewProps) =
});
const handleContinue = () => {
- router.push("/onboarding/personal/video");
+ submitPersonalOnboarding();
};
const handleSkip = () => {
- router.push("/onboarding/personal/video");
+ submitPersonalOnboarding();
};
return (
-
-
- {t("onboarding_org_invite_title")} -
-- {isEmailMode - ? t("onboarding_org_invite_subtitle_email") - : t("onboarding_org_invite_subtitle_full")} -
+
+ {/* Left column - Main content */}
+
+ {/* Card */}
+
- {/* Skip button */}
-
+
- {/* Footer */}
-
+ {/* Card Header */}
+
- {/* Content */}
-
+
-
+
+ {t("onboarding_org_invite_title")} +
++ {isEmailMode + ? t("onboarding_org_invite_subtitle_email") + : t("onboarding_org_invite_subtitle_full")} +
+
-
+
- {!isEmailMode ? (
- // Coming soon
- // Initial invite options view
-
+
+ {/* Footer */}
+
-
-
-
- ) : (
- // Email invite form
-
-
- {t("onboarding_or_divider")}
-
-
-
-
-
-
-
-
-
- {/* Role selector */}
-
-
-
- {t("onboarding_invite_all_as")}
- value && setInviteRole(value as "MEMBER" | "ADMIN")}
- options={[
- { value: "ADMIN", label: t("onboarding_admins") },
- { value: "MEMBER", label: t("members") },
- ]}
- />
-
- {t("onboarding_modify_roles_later")}
-
+
-
-
+ {/* Skip button */}
+
+
-
-
+ {/* Right column - Browser view */}
+
+
+
+
}>
{queryIntegrations.data?.items?.map((app) => (
@@ -60,7 +74,8 @@ export const PersonalCalendarView = ({ userEmail }: PersonalCalendarViewProps) =
-
-
-
-
-
-
-
-
+
+
+
+ {/* Right column - Browser view */}
+
-
- {t("finish_and_start")}
-
- }>
-
-
-
- );
-};
diff --git a/apps/web/modules/onboarding/store/onboarding-store.ts b/apps/web/modules/onboarding/store/onboarding-store.ts
index 2da6bb0236..52579e809f 100644
--- a/apps/web/modules/onboarding/store/onboarding-store.ts
+++ b/apps/web/modules/onboarding/store/onboarding-store.ts
@@ -31,6 +31,7 @@ export interface Invite {
export interface TeamDetails {
name: string;
slug: string;
+ bio: string;
}
export interface TeamBrand {
@@ -104,6 +105,7 @@ const initialState = {
teamDetails: {
name: "",
slug: "",
+ bio: "",
},
teamBrand: {
color: "#000000",
diff --git a/apps/web/modules/onboarding/teams/brand/team-brand-view.tsx b/apps/web/modules/onboarding/teams/brand/team-brand-view.tsx
deleted file mode 100644
index 75fb540a5f..0000000000
--- a/apps/web/modules/onboarding/teams/brand/team-brand-view.tsx
+++ /dev/null
@@ -1,258 +0,0 @@
-"use client";
-
-import * as Popover from "@radix-ui/react-popover";
-import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { HexColorPicker } from "react-colorful";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button } from "@calcom/ui/components/button";
-import { Logo } from "@calcom/ui/components/logo";
-
-import { useOnboardingStore } from "../../store/onboarding-store";
-
-type TeamBrandViewProps = {
- userEmail: string;
-};
-
-const BrandColorPicker = ({
- value,
- onChange,
- t,
-}: {
- value: string;
- onChange: (value: string) => void;
- t: (key: string) => string;
-}) => {
- return (
- (null);
- const [logoPreview, setLogoPreview] = useState(null);
-
- useEffect(() => {
- setBrandColor(teamBrand.color);
- setLogoPreview(teamBrand.logo);
- }, [teamBrand]);
-
- const handleLogoChange = (file: File | null) => {
- setLogoFile(file);
- if (file) {
- const reader = new FileReader();
- reader.onloadend = () => {
- const base64 = reader.result as string;
- setLogoPreview(base64);
- setTeamBrand({ logo: base64 });
- };
- reader.readAsDataURL(file);
- } else {
- setLogoPreview(null);
- setTeamBrand({ logo: null });
- }
- };
-
- const handleContinue = () => {
- setTeamBrand({ color: brandColor });
- router.push("/onboarding/teams/invite");
- };
-
- const handleSkip = () => {
- router.push("/onboarding/teams/invite");
- };
-
- return (
- (null);
const [teamName, setTeamName] = useState("");
const [teamSlug, setTeamSlug] = useState("");
+ const [teamBio, setTeamBio] = useState("");
+ const [teamLogo, setTeamLogo] = useState("");
const [isSlugValid, setIsSlugValid] = useState(false);
const [isSlugManuallyEdited, setIsSlugManuallyEdited] = useState(false);
useEffect(() => {
setTeamName(teamDetails.name);
setTeamSlug(teamDetails.slug);
+ setTeamBio(teamDetails.bio);
+ setTeamLogo(teamBrand.logo || "");
if (teamDetails.slug) {
setIsSlugManuallyEdited(true);
}
- }, [teamDetails]);
+ }, [teamDetails, teamBrand]);
useEffect(() => {
if (!isSlugManuallyEdited && teamName) {
@@ -47,6 +56,13 @@ export const TeamDetailsView = ({ userEmail }: TeamDetailsViewProps) => {
setIsSlugManuallyEdited(true);
};
+ const handleLogoChange = (newLogo: string) => {
+ if (logoRef.current) {
+ logoRef.current.value = newLogo;
+ }
+ setTeamLogo(newLogo);
+ };
+
const handleContinue = () => {
if (!isSlugValid) {
return;
@@ -55,89 +71,101 @@ export const TeamDetailsView = ({ userEmail }: TeamDetailsViewProps) => {
setTeamDetails({
name: teamName,
slug: teamSlug,
+ bio: teamBio,
});
- router.push("/onboarding/teams/brand");
+
+ setTeamBrand({
+ logo: teamLogo || null,
+ });
+
+ router.push("/onboarding/teams/invite");
};
return (
-
-
+ }>
+
-
+
-
-
- {/* Name */}
-
-
- {
- setName(e.target.value);
- form.setValue("name", e.target.value);
- }}
- placeholder="John Doe"
- />
- {form.formState.errors.name && (
-
-
- {/* Timezone */}
- {form.formState.errors.name.message}
- )} -
-
- setSelectedTimeZone(value)}
- />
-
- - {t("current_time")}{" "} - {dayjs().tz(selectedTimeZone).format("LT").toString().toLowerCase()} -
-
+
+
-
- {queryConnectedVideoApps?.items
- .filter((app) => app.slug !== "daily-video")
- .map((app) => {
- const shouldAutoSetDefault =
- !hasDefaultConferencingApp && app.appData?.location?.linkType === "dynamic";
-
- return (
- {
- // Auto-set as default if it's the first connected video app
- if (shouldAutoSetDefault) {
- setDefaultConferencingApp.mutate({ slug: appSlug });
- }
- })}
- />
- );
- })}
-
-
-
-
-
-
-
-
-
-
-
- {
- const newValue = e.target.value.startsWith("#") ? e.target.value : `#${e.target.value}`;
- onChange(newValue);
- }}
- className="text-emphasis grow border-none bg-transparent text-sm font-medium leading-4 outline-none"
- maxLength={6}
- />
-
- );
-};
-
-export const TeamBrandView = ({ userEmail }: TeamBrandViewProps) => {
- const router = useRouter();
- const { t } = useLocale();
- const { teamBrand, setTeamBrand, teamDetails } = useOnboardingStore();
-
- const [brandColor, setBrandColor] = useState("#000000");
- const [_logoFile, setLogoFile] = useState
- {/* Header */}
-
- );
-};
diff --git a/apps/web/modules/onboarding/teams/details/team-details-view.tsx b/apps/web/modules/onboarding/teams/details/team-details-view.tsx
index 410b8ca86d..ed320f485f 100644
--- a/apps/web/modules/onboarding/teams/details/team-details-view.tsx
+++ b/apps/web/modules/onboarding/teams/details/team-details-view.tsx
@@ -1,14 +1,18 @@
"use client";
import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import slugify from "@calcom/lib/slugify";
+import { Avatar } from "@calcom/ui/components/avatar";
import { Button } from "@calcom/ui/components/button";
-import { Label, TextField } from "@calcom/ui/components/form";
-import { Logo } from "@calcom/ui/components/logo";
+import { Label, TextField, TextArea } from "@calcom/ui/components/form";
+import { ImageUploader } from "@calcom/ui/components/image-uploader";
+import { OnboardingCard } from "../../components/OnboardingCard";
+import { OnboardingLayout } from "../../components/OnboardingLayout";
+import { OnboardingBrowserView } from "../../components/onboarding-browser-view";
import { OnboardingContinuationPrompt } from "../../components/onboarding-continuation-prompt";
import { useOnboardingStore } from "../../store/onboarding-store";
import { ValidatedTeamSlug } from "./validated-team-slug";
@@ -20,20 +24,25 @@ type TeamDetailsViewProps = {
export const TeamDetailsView = ({ userEmail }: TeamDetailsViewProps) => {
const router = useRouter();
const { t } = useLocale();
- const { teamDetails, setTeamDetails } = useOnboardingStore();
+ const { teamDetails, teamBrand, setTeamDetails, setTeamBrand } = useOnboardingStore();
+ const logoRef = useRef
-
-
- {/* Main content */}
-
-
-
-
-
-
-
-
-
- {userEmail}
-
-
-
- {/* Card */}
-
-
-
-
- {/* Card Header */}
-
-
-
-
- {/* Form */}
-
-
- {t("customize_team_brand")}
-{t("team_brand_subtitle")}
-
-
-
- {/* Footer */}
-
-
-
-
-
- {/* Left side - Form */}
-
-
- {/* Brand Color */}
-
-
- {/* Right side - Preview */}
-
-
-
- {/* Logo Upload */}
- {t("brand_color")}
-
- {
- setBrandColor(value);
- setTeamBrand({ color: value });
- }}
- t={t}
- />
-
- - {t("onboarding_primary_color_label")} -
-
-
- {t("logo")}
-
-
-
- {logoPreview && (
-
- )}
-
-
-
- handleLogoChange(e.target.files?.[0] || null)}
- />
-
- - {t("onboarding_logo_size_hint")} -
-
-
-
-
- {t("preview")}
-
- {/* Content */}
-
-
-
-
-
-
- {/* Logo preview */}
-
-
- {logoPreview && (
-
- )}
-
- - {teamDetails.name || t("onboarding_preview_nameless")} -
-
-
-
-
- - {t("onboarding_preview_example_title")} -
-- {t("onboarding_preview_example_description")} -
-
- {[134, 104, 84, 104].map((width, i) => (
-
-
-
-
-
- ))}
-
-
-
-
-
+ <>
-
-
- {/* Main content */}
-
-
-
-
-
-
-
-
-
- {userEmail}
-
-
- {/* Card */}
-
-
- {/* Card Header */}
-
-
-
+ {/* Left column - Main content */}
+
+
+
+
+ }>
+ {t("create_your_team")}
-- {t("team_onboarding_details_subtitle")} -
+
+ {/* Team Profile Picture */}
+
+
+
- {/* Form */}
-
+
+
+
+
+ {t("onboarding_logo_size_hint")}
+
-
+ {/* Team Slug */}
+
-
-
-
-
-
-
- {/* Team Name */}
-
-
-
- setTeamName(e.target.value)}
- placeholder="Acme Inc."
- className="border-default h-7 rounded-[10px] border px-2 py-1.5 text-sm"
- />
-
+ {/* Team Name */}
+
+
+ setTeamName(e.target.value)}
+ placeholder="Acme Inc."
+ className="border-default h-7 rounded-[10px] border px-2 py-1.5 text-sm"
+ />
+
- {/* Team Slug */}
-
-
-
+ {/* Team Bio */}
+
+
+