From 2273b7ea24eb8973e4e2ebe91ced19b16f2e272d Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Fri, 31 Oct 2025 08:07:37 +0000
Subject: [PATCH] chore: add signout button on onboarding v3 layout (#24801)

<img width="2778" height="1633" alt="CleanShot 2025-10-30 at 16 42 23" src="https://github.com/user-attachments/assets/45d84980-26c9-4cb4-ac85-21dc174dba35" />



<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Added a sign-out button to the onboarding v3 layout and refactored Getting Started to use the shared OnboardingLayout for a consistent header and structure.

- **New Features**
  - Sign-out button in the onboarding footer using next-auth (redirects to /auth/logout).
  - Localized button label via useLocale.

- **Refactors**
  - Getting Started view now wraps content with OnboardingLayout.
  - Removed duplicated header and progress UI from the view.
  - Simplified content container and spacing; layout handles max width and flex.

<sup>Written for commit 830bfd1. Summary will update automatically on new commits.</sup>

<!-- End of auto-generated description by cubic. -->
---
 .../getting-started/onboarding-view.tsx       | 30 ++++---------------
 .../personal/_components/OnboardingLayout.tsx | 20 ++++++++++++-
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/apps/web/modules/onboarding/getting-started/onboarding-view.tsx b/apps/web/modules/onboarding/getting-started/onboarding-view.tsx
index d9e49c1c27..4a908efa8e 100644
--- a/apps/web/modules/onboarding/getting-started/onboarding-view.tsx
+++ b/apps/web/modules/onboarding/getting-started/onboarding-view.tsx
@@ -8,11 +8,11 @@ import classNames from "@calcom/ui/classNames";
 import { Badge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
 import { type IconName } from "@calcom/ui/components/icon";
-import { Logo } from "@calcom/ui/components/logo";
 import { RadioAreaGroup } from "@calcom/ui/components/radio";
 
 import { OnboardingContinuationPrompt } from "../components/onboarding-continuation-prompt";
 import { PlanIcon } from "../components/plan-icon";
+import { OnboardingLayout } from "../personal/_components/OnboardingLayout";
 import { useOnboardingStore, type PlanType } from "../store/onboarding-store";
 
 type OnboardingViewProps = {
@@ -77,28 +77,10 @@ export const OnboardingView = ({ userName, userEmail }: OnboardingViewProps) =>
   });
 
   return (
-    <div className="bg-default flex min-h-screen w-full flex-col items-start overflow-clip">
+    <>
       <OnboardingContinuationPrompt />
-      {/* Header */}
-      <div className="flex w-full items-center justify-between px-6 py-4">
-        <Logo className="h-5 w-auto" />
-
-        {/* Progress dots - centered */}
-        <div className="absolute left-1/2 flex -translate-x-1/2 items-center justify-center gap-1">
-          <div className="bg-emphasis h-1.5 w-1.5 rounded-full" />
-          <div className="bg-subtle h-1 w-1 rounded-full" />
-          <div className="bg-subtle h-1 w-1 rounded-full" />
-          <div className="bg-subtle h-1 w-1 rounded-full" />
-        </div>
-
-        <div className="bg-muted flex items-center gap-2 rounded-full px-3 py-2">
-          <p className="text-emphasis font-mediumu text-sm leading-none">{userEmail}</p>
-        </div>
-      </div>
-
-      {/* Main content */}
-      <div className="flex h-full w-full items-start justify-center px-6 py-8">
-        <div className="flex w-full max-w-[600px] flex-col gap-6">
+      <OnboardingLayout userEmail={userEmail} currentStep={1}>
+        <div className="flex w-full flex-col gap-6">
           {/* Card */}
           <div className="bg-muted border-muted relative rounded-xl border p-1">
             <div className="rounded-inherit flex w-full flex-col items-start overflow-clip">
@@ -173,7 +155,7 @@ export const OnboardingView = ({ userName, userEmail }: OnboardingViewProps) =>
             </div>
           </div>
         </div>
-      </div>
-    </div>
+      </OnboardingLayout>
+    </>
   );
 };
diff --git a/apps/web/modules/onboarding/personal/_components/OnboardingLayout.tsx b/apps/web/modules/onboarding/personal/_components/OnboardingLayout.tsx
index 23fa842640..659e09e8ee 100644
--- a/apps/web/modules/onboarding/personal/_components/OnboardingLayout.tsx
+++ b/apps/web/modules/onboarding/personal/_components/OnboardingLayout.tsx
@@ -1,5 +1,10 @@
+"use client";
+
+import { signOut } from "next-auth/react";
 import type { ReactNode } from "react";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button } from "@calcom/ui/components/button";
 import { Logo } from "@calcom/ui/components/logo";
 
 type OnboardingLayoutProps = {
@@ -9,6 +14,12 @@ type OnboardingLayoutProps = {
 };
 
 export const OnboardingLayout = ({ userEmail, currentStep, children }: OnboardingLayoutProps) => {
+  const { t } = useLocale();
+
+  const handleSignOut = () => {
+    signOut({ callbackUrl: "/auth/logout" });
+  };
+
   return (
     <div className="bg-default flex min-h-screen w-full flex-col items-start overflow-clip rounded-xl">
       {/* Header */}
@@ -33,9 +44,16 @@ export const OnboardingLayout = ({ userEmail, currentStep, children }: Onboardin
       </div>
 
       {/* Main content */}
-      <div className="flex h-full w-full items-start justify-center px-6 py-8">
+      <div className="flex w-full flex-1 items-start justify-center px-6 py-8">
         <div className="flex w-full max-w-[600px] flex-col gap-4">{children}</div>
       </div>
+
+      {/* Footer with signout button */}
+      <div className="flex w-full items-center justify-center px-6 py-6">
+        <Button onClick={handleSignOut} color="minimal">
+          {t("sign_out")}
+        </Button>
+      </div>
     </div>
   );
 };