+
+
+
+
+
+
+
+
+
+ {
+ 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/action/check-team-slug-availability.ts b/apps/web/modules/onboarding/teams/details/action/check-team-slug-availability.ts
new file mode 100644
index 0000000000..1bc7623e1c
--- /dev/null
+++ b/apps/web/modules/onboarding/teams/details/action/check-team-slug-availability.ts
@@ -0,0 +1,45 @@
+"use server";
+
+import { cookies, headers } from "next/headers";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { RESERVED_SUBDOMAINS } from "@calcom/lib/constants";
+import { prisma } from "@calcom/prisma";
+
+import { buildLegacyRequest } from "@lib/buildLegacyCtx";
+
+export async function checkTeamSlugAvailability(slug: string): Promise<{
+ available: boolean;
+ message?: string;
+}> {
+ if (!slug || slug.trim() === "") {
+ return { available: false, message: "Slug is required" };
+ }
+
+ // Check if slug is reserved
+ if (RESERVED_SUBDOMAINS.includes(slug)) {
+ return { available: false, message: "This slug is reserved" };
+ }
+
+ const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
+ if (!session?.user?.id) {
+ return { available: false, message: "Unauthorized" };
+ }
+
+ // Check if slug already exists (teams have parentId, organizations don't)
+ const existingTeam = await prisma.team.findFirst({
+ where: {
+ slug,
+ parentId: null,
+ },
+ select: {
+ id: true,
+ },
+ });
+
+ if (existingTeam) {
+ return { available: false, message: "This slug is already taken" };
+ }
+
+ return { available: true };
+}
diff --git a/apps/web/modules/onboarding/teams/details/team-details-view.tsx b/apps/web/modules/onboarding/teams/details/team-details-view.tsx
new file mode 100644
index 0000000000..410b8ca86d
--- /dev/null
+++ b/apps/web/modules/onboarding/teams/details/team-details-view.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import slugify from "@calcom/lib/slugify";
+import { Button } from "@calcom/ui/components/button";
+import { Label, TextField } from "@calcom/ui/components/form";
+import { Logo } from "@calcom/ui/components/logo";
+
+import { OnboardingContinuationPrompt } from "../../components/onboarding-continuation-prompt";
+import { useOnboardingStore } from "../../store/onboarding-store";
+import { ValidatedTeamSlug } from "./validated-team-slug";
+
+type TeamDetailsViewProps = {
+ userEmail: string;
+};
+
+export const TeamDetailsView = ({ userEmail }: TeamDetailsViewProps) => {
+ const router = useRouter();
+ const { t } = useLocale();
+ const { teamDetails, setTeamDetails } = useOnboardingStore();
+
+ const [teamName, setTeamName] = useState("");
+ const [teamSlug, setTeamSlug] = useState("");
+ const [isSlugValid, setIsSlugValid] = useState(false);
+ const [isSlugManuallyEdited, setIsSlugManuallyEdited] = useState(false);
+
+ useEffect(() => {
+ setTeamName(teamDetails.name);
+ setTeamSlug(teamDetails.slug);
+ if (teamDetails.slug) {
+ setIsSlugManuallyEdited(true);
+ }
+ }, [teamDetails]);
+
+ useEffect(() => {
+ if (!isSlugManuallyEdited && teamName) {
+ const slugifiedName = slugify(teamName);
+ setTeamSlug(slugifiedName);
+ }
+ }, [teamName, isSlugManuallyEdited]);
+
+ const handleSlugChange = (value: string) => {
+ setTeamSlug(value);
+ setIsSlugManuallyEdited(true);
+ };
+
+ const handleContinue = () => {
+ if (!isSlugValid) {
+ return;
+ }
+
+ setTeamDetails({
+ name: teamName,
+ slug: teamSlug,
+ });
+ router.push("/onboarding/teams/brand");
+ };
+
+ return (
+
+
+
+ {/* 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) => (
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+ );
+};
diff --git a/apps/web/modules/onboarding/teams/details/validated-team-slug.tsx b/apps/web/modules/onboarding/teams/details/validated-team-slug.tsx
new file mode 100644
index 0000000000..5d1e92097e
--- /dev/null
+++ b/apps/web/modules/onboarding/teams/details/validated-team-slug.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState, useTransition } from "react";
+
+import { WEBAPP_URL } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import classNames from "@calcom/ui/classNames";
+import { Label, TextField } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
+
+import { checkTeamSlugAvailability } from "./action/check-team-slug-availability";
+
+type ValidationState = "idle" | "checking" | "available" | "taken";
+
+type ValidatedTeamSlugProps = {
+ value: string;
+ onChange: (value: string) => void;
+ onValidationChange?: (isValid: boolean) => void;
+};
+
+export function ValidatedTeamSlug({ value, onChange, onValidationChange }: ValidatedTeamSlugProps) {
+ const { t } = useLocale();
+ const [validationState, setValidationState] = useState
+
+
+ {/* Main content */}
+
+
+
+
+
+
+
+
+
+ {userEmail}
+
+
+
+ {/* Card */}
+
+
+
+
+ {/* Card Header */}
+
+
+
+
+ {/* Form */}
+
+
+ {t("create_your_team")}
++ {t("team_onboarding_details_subtitle")} +
+
+
+
+ {/* Footer */}
+
+
+
+
+
+
+
+ {/* 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 */}
+
+
+
+
+
+ onChange(e.target.value)}
+ placeholder="acme"
+ addOnLeading={urlPrefix}
+ addOnSuffix={
+ validationState === "checking" ? (
+
+ );
+}
diff --git a/apps/web/modules/onboarding/teams/invite/team-invite-view.tsx b/apps/web/modules/onboarding/teams/invite/team-invite-view.tsx
new file mode 100644
index 0000000000..470811cf7d
--- /dev/null
+++ b/apps/web/modules/onboarding/teams/invite/team-invite-view.tsx
@@ -0,0 +1,221 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useRouter } from "next/navigation";
+import React from "react";
+import { useForm, useFieldArray } from "react-hook-form";
+import { z } from "zod";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button } from "@calcom/ui/components/button";
+import { Form, Label, TextField, ToggleGroup } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
+import { Logo } from "@calcom/ui/components/logo";
+
+import { useCreateTeam } from "../../hooks/useCreateTeam";
+import { useOnboardingStore, type InviteRole } from "../../store/onboarding-store";
+
+type TeamInviteViewProps = {
+ userEmail: string;
+};
+
+type FormValues = {
+ invites: {
+ email: string;
+ role: InviteRole;
+ }[];
+};
+
+export const TeamInviteView = ({ userEmail }: TeamInviteViewProps) => {
+ const router = useRouter();
+ const { t } = useLocale();
+
+ const store = useOnboardingStore();
+ const { teamInvites, setTeamInvites, teamDetails } = store;
+ const [inviteRole, setInviteRole] = React.useState{errorMessage}
} +
+ {/* Header */}
+
+ );
+};
+
+
+ {/* Main content */}
+
+
+
+
+
+
+
+
+
+ {userEmail}
+
+
+
+ {/* Card */}
+
+
+
+
+ {/* Skip button */}
+
+ {/* Card Header */}
+
+
+
+
+ {/* Content */}
+
+
+ {t("invite_team_members")}
+{t("team_invite_subtitle")}
+
+
+
+ {/* Footer */}
+
+
+
+
+
+
+
+
+
+