{isLoading ? (
+ );
+};
diff --git a/apps/web/modules/onboarding/getting-started/onboarding-view.tsx b/apps/web/modules/onboarding/getting-started/onboarding-view.tsx
index b41cbf0168..1b9425a0d7 100644
--- a/apps/web/modules/onboarding/getting-started/onboarding-view.tsx
+++ b/apps/web/modules/onboarding/getting-started/onboarding-view.tsx
@@ -106,7 +106,7 @@ export const OnboardingView = ({ userEmail }: OnboardingViewProps) => {
return (
<>
-
diff --git a/apps/web/modules/onboarding/components/onboarding-organization-browser-view.tsx b/apps/web/modules/onboarding/components/onboarding-organization-browser-view.tsx
new file mode 100644
index 0000000000..5970460546
--- /dev/null
+++ b/apps/web/modules/onboarding/components/onboarding-organization-browser-view.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import classNames from "classnames";
+
+import { WEBAPP_URL } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Avatar } from "@calcom/ui/components/avatar";
+import { Button } from "@calcom/ui/components/button";
+import { Icon, type IconName } from "@calcom/ui/components/icon";
+
+type OnboardingOrganizationBrowserViewProps = {
+ avatar?: string | null;
+ name?: string;
+ bio?: string;
+ slug?: string;
+ bannerUrl?: string | null;
+};
+
+export const OnboardingOrganizationBrowserView = ({
+ avatar,
+ name,
+ bio,
+ slug,
+ bannerUrl,
+}: OnboardingOrganizationBrowserViewProps) => {
+ const { t } = useLocale();
+ const webappUrl = WEBAPP_URL.replace(/^https?:\/\//, "");
+ const displayUrl = `${webappUrl}/${slug || ""}`;
+
+ const events: Array<{
+ title: string;
+ description: string;
+ duration: number;
+ icon: IconName;
+ }> = [
+ {
+ title: t("onboarding_browser_view_demo"),
+ description: t("onboarding_browser_view_demo_description"),
+ duration: 15,
+ icon: "bell",
+ },
+ {
+ title: t("onboarding_browser_view_quick_meeting"),
+ description: t("onboarding_browser_view_quick_meeting_description"),
+ duration: 15,
+ icon: "bell",
+ },
+ {
+ title: t("onboarding_browser_view_longer_meeting"),
+ description: t("onboarding_browser_view_longer_meeting_description"),
+ duration: 30,
+ icon: "clock",
+ },
+ {
+ title: t("in_person_meeting"),
+ description: t("onboarding_browser_view_in_person_description"),
+ duration: 120,
+ icon: "map-pin",
+ },
+ ];
+
+ return (
+
- {[1, 2, 3].map((step) => (
-
);
};
-
diff --git a/apps/web/modules/onboarding/components/RoleSelector.tsx b/apps/web/modules/onboarding/components/RoleSelector.tsx
new file mode 100644
index 0000000000..207f107a98
--- /dev/null
+++ b/apps/web/modules/onboarding/components/RoleSelector.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { ToggleGroup } from "@calcom/ui/components/form";
+import { InfoBadge } from "@calcom/ui/components/badge";
+
+import type { InviteRole } from "../store/onboarding-store";
+
+type RoleSelectorProps = {
+ value: InviteRole;
+ onValueChange: (value: InviteRole) => void;
+ showInfoBadge?: boolean;
+};
+
+export const RoleSelector = ({ value, onValueChange, showInfoBadge = false }: RoleSelectorProps) => {
+ const { t } = useLocale();
+
+ return (
+
-
- {step <= currentStep && }
-
- ))}
+
+ {Array.from({ length: totalSteps }, (_, i) => i + 1).map((step) => {
+ const isCurrentStep = step === currentStep;
+ const isCompleted = step < currentStep;
+ return (
+
+
+ {(isCompleted || isCurrentStep) && (
+
+ )}
+
+ );
+ })}
+
+ );
+};
+
diff --git a/apps/web/modules/onboarding/components/onboarding-browser-view.tsx b/apps/web/modules/onboarding/components/onboarding-browser-view.tsx
index 3736266871..3c42077a08 100644
--- a/apps/web/modules/onboarding/components/onboarding-browser-view.tsx
+++ b/apps/web/modules/onboarding/components/onboarding-browser-view.tsx
@@ -1,5 +1,7 @@
"use client";
+import classNames from "classnames";
+
import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Avatar } from "@calcom/ui/components/avatar";
@@ -95,7 +97,11 @@ export const OnboardingBrowserView = ({
+ {t("onboarding_invite_all_as")}
+ val && onValueChange(val as InviteRole)}
+ options={[
+ { value: "MEMBER", label: t("members") },
+ { value: "ADMIN", label: t("onboarding_admins") },
+ ]}
+ />
+ {showInfoBadge &&
+ {!showInfoBadge && (
+ {t("onboarding_modify_roles_later")}
+ )}
+ {name || t("your_name")}
-+
{bio || t("onboarding_browser_view_default_bio")}
+ {/* Browser header */}
+
+ );
+};
diff --git a/apps/web/modules/onboarding/components/onboarding-teams-browser-view.tsx b/apps/web/modules/onboarding/components/onboarding-teams-browser-view.tsx
new file mode 100644
index 0000000000..ef72985074
--- /dev/null
+++ b/apps/web/modules/onboarding/components/onboarding-teams-browser-view.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import { WEBAPP_URL } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Avatar } from "@calcom/ui/components/avatar";
+import { Icon } from "@calcom/ui/components/icon";
+
+type OnboardingTeamsBrowserViewProps = {
+ teams: Array<{ name: string }>;
+ organizationLogo?: string | null;
+ organizationName?: string;
+ organizationBanner?: string | null;
+};
+
+export const OnboardingTeamsBrowserView = ({
+ teams,
+ organizationLogo,
+ organizationName,
+ organizationBanner,
+}: OnboardingTeamsBrowserViewProps) => {
+ const { t } = useLocale();
+ const webappUrl = WEBAPP_URL.replace(/^https?:\/\//, "");
+
+ // Show placeholder if no teams or all teams are empty
+ const hasValidTeams = teams.some((team) => team.name && team.name.trim().length > 0);
+
+ return (
+
+ {/* Navigation buttons */}
+
+ {/* Content */}
+
+
+
+
+ {displayUrl}
+
+
+
+ {/* Organization Profile Header with Banner */}
+
+
+
+
+ {/* Events List */}
+
+ {/* Banner Image */}
+
+
+ {/* Organization Info */}
+
+ {bannerUrl ? (
+ 
+ ) : (
+
+ )}
+
+
+ {/* Organization Avatar - Overlaying the banner */}
+
+
+
+
+ + {name || t("organization_name")} +
++ {bio || t("onboarding_browser_view_default_bio")} +
+
+ {events.map((event, index) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+ {event.title}
+
+
+ {event.description}
+
+ {/* Browser header */}
+
+
+ {/* Navigation buttons */}
+
+
+ {/* Content */}
+
+
+
+
+ {webappUrl}/teams
+
+
+
+ {/* Teams Header with Banner */}
+
+
+
+
+ {/* Teams List */}
+
+ {/* Banner Image */}
+
+
+ {/* Teams Info */}
+
+ {organizationBanner ? (
+ 
+ ) : (
+
+ )}
+
+
+ {/* Organization Logo - Overlaying the banner */}
+ {organizationLogo && (
+
+
+ )}
+
+
+ {t("teams")}
++ {hasValidTeams + ? t("onboarding_teams_browser_view_subtitle") + : t("onboarding_teams_browser_view_placeholder_subtitle")} +
+
+ {hasValidTeams ? (
+ teams
+ .filter((team) => team.name && team.name.trim().length > 0)
+ .map((team, index) => (
+
+ ))
+ ) : (
+
+ {index > 0 && }
+
+
+
+ {team.name.charAt(0).toUpperCase()}
+
+ }
+ />
+
+
+ {team.name}
++ {t("onboarding_teams_browser_view_team_description")} +
+
+
+ )}
+
+
+
+
+ + {t("onboarding_teams_browser_view_no_teams_title")} +
++ {t("onboarding_teams_browser_view_no_teams_description")} +
+
-
-
-
-
-
-
-
-
-
- {
- 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 { organizationDetails, organizationBrand, setOrganizationBrand } = useOnboardingStore();
- const [brandColor, setBrandColor] = useState("#000000");
const [_logoFile, setLogoFile] = useState