+
+
+
+
+
+
+
+
+
+ {
+ 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 OrganizationBrandView = ({ userEmail }: OrganizationBrandViewProps) => {
+ const router = useRouter();
+ const { t } = useLocale();
+ const { organizationBrand, setOrganizationBrand, organizationDetails } = useOnboardingStore();
+
+ const [brandColor, setBrandColor] = useState("#000000");
+ const [_logoFile, setLogoFile] = useState
+ {/* Header */}
+
+ );
+};
diff --git a/apps/web/modules/onboarding/organization/details/action/check-slug-availability.ts b/apps/web/modules/onboarding/organization/details/action/check-slug-availability.ts
new file mode 100644
index 0000000000..c1591a1abb
--- /dev/null
+++ b/apps/web/modules/onboarding/organization/details/action/check-slug-availability.ts
@@ -0,0 +1,46 @@
+"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 checkSlugAvailability(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
+ const existingOrg = await prisma.team.findFirst({
+ where: {
+ slug,
+ parentId: null,
+ },
+ select: {
+ id: true,
+ isOrganization: true,
+ },
+ });
+
+ if (existingOrg) {
+ return { available: false, message: "This slug is already taken" };
+ }
+
+ return { available: true };
+}
diff --git a/apps/web/modules/onboarding/organization/details/organization-details-view.tsx b/apps/web/modules/onboarding/organization/details/organization-details-view.tsx
new file mode 100644
index 0000000000..be4e22b223
--- /dev/null
+++ b/apps/web/modules/onboarding/organization/details/organization-details-view.tsx
@@ -0,0 +1,176 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button } from "@calcom/ui/components/button";
+import { Label, TextField, TextArea } 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 { ValidatedOrganizationSlug } from "./validated-organization-slug";
+
+type OrganizationDetailsViewProps = {
+ userEmail: string;
+};
+
+// Helper function to slugify organization name
+const slugify = (text: string): string => {
+ return text
+ .toLowerCase()
+ .trim()
+ .replace(/[^\w\s-]/g, "") // Remove special characters
+ .replace(/[\s_-]+/g, "-") // Replace spaces, underscores with single dash
+ .replace(/^-+|-+$/g, ""); // Remove leading/trailing dashes
+};
+
+export const OrganizationDetailsView = ({ userEmail }: OrganizationDetailsViewProps) => {
+ const router = useRouter();
+ const { t } = useLocale();
+ const { organizationDetails, setOrganizationDetails } = useOnboardingStore();
+
+ const [organizationName, setOrganizationName] = useState("");
+ const [organizationLink, setOrganizationLink] = useState("");
+ const [organizationBio, setOrganizationBio] = useState("");
+ const [isSlugValid, setIsSlugValid] = useState(false);
+ const [isSlugManuallyEdited, setIsSlugManuallyEdited] = useState(false);
+
+ // Load from store on mount
+ useEffect(() => {
+ setOrganizationName(organizationDetails.name);
+ setOrganizationLink(organizationDetails.link);
+ setOrganizationBio(organizationDetails.bio);
+ // If there's a pre-existing link, consider it manually set
+ if (organizationDetails.link) {
+ setIsSlugManuallyEdited(true);
+ }
+ }, [organizationDetails]);
+
+ // Auto-populate slug from organization name (unless manually edited)
+ useEffect(() => {
+ if (!isSlugManuallyEdited && organizationName) {
+ const slugifiedName = slugify(organizationName);
+ setOrganizationLink(slugifiedName);
+ }
+ }, [organizationName, isSlugManuallyEdited]);
+
+ const handleSlugChange = (value: string) => {
+ setOrganizationLink(value);
+ setIsSlugManuallyEdited(true);
+ };
+
+ const handleContinue = () => {
+ if (!isSlugValid) {
+ return;
+ }
+
+ // Save to store
+ setOrganizationDetails({
+ name: organizationName,
+ link: organizationLink,
+ bio: organizationBio,
+ });
+ router.push("/onboarding/organization/brand");
+ };
+
+ return (
+
+
+
+ {/* Main content */}
+
+
+
+
+
+
+
+
+
+ {userEmail}
+
+
+
+ {/* Card */}
+
+
+
+
+ {/* Card Header */}
+
+
+
+
+ {/* Form */}
+
+
+ {t("onboarding_org_brand_title")}
++ {t("onboarding_org_brand_subtitle")} +
+
+
+
+ {/* Footer */}
+
+
+
+
+
+ {/* Left side - Form */}
+
+
+ {/* Brand Color */}
+
+
+ {/* Right side - Preview */}
+
+
+
+ {/* Logo Upload */}
+ {t("brand_color")}
+
+ {
+ setBrandColor(value);
+ setOrganizationBrand({ color: value });
+ }}
+ t={t}
+ />
+
+ + {t("onboarding_primary_color_label")} +
+
+
+
+ {/* Banner Upload */}
+ {t("logo")}
+
+
+
+ {logoPreview && (
+ 
+ )}
+
+
+
+ handleLogoChange(e.target.files?.[0] || null)}
+ />
+
+ + {t("onboarding_logo_size_hint")} +
+
+
+ {t("onboarding_banner_label")}
+
+
+
+ {bannerPreview && (
+ 
+ )}
+
+
+
+ handleBannerChange(e.target.files?.[0] || null)}
+ />
+
+ + {t("onboarding_banner_size_hint")} +
+
+
+
+
+ {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) => (
+
+
+
+
+
+ ))}
+
+
+
+
+
+ {/* Header */}
+
+
+
+ {/* Main content */}
+
+
+
+
+
+
+
+
+
+ {userEmail}
+
+
+ {/* Card */}
+
+
+ {/* Card Header */}
+
+
+
+ {/* Form */}
+
+
+ + {t("onboarding_org_details_title")} +
++ {t("onboarding_org_details_subtitle")} +
+
+
+
+
+
+ {/* Organization Name */}
+
+
+ setOrganizationName(e.target.value)}
+ placeholder={t("organization_name")}
+ className="border-default h-7 rounded-[10px] border px-2 py-1.5 text-sm"
+ />
+
+
+ {/* Organization Link */}
+
+
+