From 3e7a848769d49295ee6e4251cf4afd2390793ae2 Mon Sep 17 00:00:00 2001
From: chauhan_s <somaychauhan98@gmail.com>
Date: Wed, 12 Nov 2025 16:49:35 +0530
Subject: [PATCH] refactor: extract back button logic into dedicated wrapper
 component (#25093)

* refactor: extract back button logic into dedicated wrapper component

* Added changeset
---
 .changeset/happy-buckets-dance.md             |  5 ++++
 .../developer/webhooks/[id]/page.tsx          | 11 ++++-----
 .../settings/appDir/SettingsHeader.tsx        | 24 +++++++++++++------
 .../appDir/SettingsHeaderWithBackButton.tsx   | 23 ++++++++++++++++++
 .../webhooks/pages/webhook-new-skeleton.tsx   | 10 ++++----
 .../webhooks/pages/webhook-new-view.tsx       |  9 ++++---
 6 files changed, 59 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/happy-buckets-dance.md
 create mode 100644 packages/features/settings/appDir/SettingsHeaderWithBackButton.tsx

diff --git a/.changeset/happy-buckets-dance.md b/.changeset/happy-buckets-dance.md
new file mode 100644
index 0000000000..59e7147b9d
--- /dev/null
+++ b/.changeset/happy-buckets-dance.md
@@ -0,0 +1,5 @@
+---
+"@calcom/atoms": minor
+---
+
+Refactor SettingsHeader to accept onBackButtonClick callback instead of using useRouter directly.
diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/developer/webhooks/[id]/page.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/developer/webhooks/[id]/page.tsx
index 1dd209cb0b..b76496fed9 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/developer/webhooks/[id]/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/developer/webhooks/[id]/page.tsx
@@ -1,7 +1,7 @@
 import type { PageProps } from "app/_types";
-import { getTranslate, _generateMetadata } from "app/_utils";
+import { _generateMetadata, getTranslate } from "app/_utils";
 
-import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import SettingsHeaderWithBackButton from "@calcom/features/settings/appDir/SettingsHeaderWithBackButton";
 import { WebhookRepository } from "@calcom/features/webhooks/lib/repository/WebhookRepository";
 import { EditWebhookView } from "@calcom/features/webhooks/pages/webhook-edit-view";
 import { APP_NAME } from "@calcom/lib/constants";
@@ -24,13 +24,12 @@ const Page = async ({ params: _params }: PageProps) => {
   const webhook = await webhookRepository.findByWebhookId(id);
 
   return (
-    <SettingsHeader
+    <SettingsHeaderWithBackButton
       title={t("edit_webhook")}
       description={t("add_webhook_description", { appName: APP_NAME })}
-      borderInShellHeader={true}
-      backButton>
+      borderInShellHeader={true}>
       <EditWebhookView webhook={webhook} />
-    </SettingsHeader>
+    </SettingsHeaderWithBackButton>
   );
 };
 
diff --git a/packages/features/settings/appDir/SettingsHeader.tsx b/packages/features/settings/appDir/SettingsHeader.tsx
index 1ca60a1092..6121107937 100644
--- a/packages/features/settings/appDir/SettingsHeader.tsx
+++ b/packages/features/settings/appDir/SettingsHeader.tsx
@@ -6,17 +6,27 @@ import classNames from "@calcom/ui/classNames";
 import { Icon } from "@calcom/ui/components/icon";
 import { Button } from "@calcom/ui/components/button";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { useRouter } from "next/navigation";
 
-interface HeaderProps {
+type HeaderPropsBase = {
   children: React.ReactNode;
   title?: string;
   description?: string;
   CTA?: React.ReactNode;
   ctaClassName?: string;
   borderInShellHeader?: boolean;
-  backButton?: boolean;
-}
+};
+
+type HeaderPropsWithBackButton = HeaderPropsBase & {
+  backButton: true;
+  onBackButtonClick: () => void;
+};
+
+type HeaderPropsWithoutBackButton = HeaderPropsBase & {
+  backButton?: false;
+  onBackButtonClick?: never;
+};
+
+type HeaderProps = HeaderPropsWithBackButton | HeaderPropsWithoutBackButton;
 
 export default function Header({
   children,
@@ -26,8 +36,8 @@ export default function Header({
   ctaClassName,
   borderInShellHeader,
   backButton,
+  onBackButtonClick,
 }: HeaderProps) {
-  const router = useRouter();
   const { t } = useLocale();
   
   return (
@@ -40,12 +50,12 @@ export default function Header({
         )}>
         <div className="flex w-full items-center justify-between gap-2">
           <div className="flex items-center">
-            {backButton && (
+            {backButton && onBackButtonClick && (
               <Button
                 variant="icon"
                 size="sm"
                 color="minimal"
-                onClick={() => router.back()}
+                onClick={onBackButtonClick}
                 className="rounded-md ltr:mr-2 rtl:ml-2"
                 StartIcon="arrow-left"
                 aria-label={t("go_back")}
diff --git a/packages/features/settings/appDir/SettingsHeaderWithBackButton.tsx b/packages/features/settings/appDir/SettingsHeaderWithBackButton.tsx
new file mode 100644
index 0000000000..fd35f900cc
--- /dev/null
+++ b/packages/features/settings/appDir/SettingsHeaderWithBackButton.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import type { ReactNode } from "react";
+
+import SettingsHeader from "./SettingsHeader";
+
+type SettingsHeaderWithBackButtonProps = {
+  children: ReactNode;
+  title?: string;
+  description?: string;
+  CTA?: ReactNode;
+  ctaClassName?: string;
+  borderInShellHeader?: boolean;
+};
+
+export default function SettingsHeaderWithBackButton(props: SettingsHeaderWithBackButtonProps) {
+  const router = useRouter();
+
+  return (
+    <SettingsHeader {...props} backButton={true} onBackButtonClick={() => router.back()} />
+  );
+}
diff --git a/packages/features/webhooks/pages/webhook-new-skeleton.tsx b/packages/features/webhooks/pages/webhook-new-skeleton.tsx
index 314466c8a8..e45ada88bd 100644
--- a/packages/features/webhooks/pages/webhook-new-skeleton.tsx
+++ b/packages/features/webhooks/pages/webhook-new-skeleton.tsx
@@ -1,24 +1,24 @@
 "use client";
 
-import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import SettingsHeaderWithBackButton from "@calcom/features/settings/appDir/SettingsHeaderWithBackButton";
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SkeletonText, SkeletonContainer } from "@calcom/ui/components/skeleton";
 
 export const SkeletonLoader = () => {
   const { t } = useLocale();
+  
   return (
-    <SettingsHeader
+    <SettingsHeaderWithBackButton
       title={t("add_webhook")}
       description={t("add_webhook_description", { appName: APP_NAME })}
-      borderInShellHeader={true}
-      backButton={true}>
+      borderInShellHeader={true}>
       <SkeletonContainer>
         <div className="divide-subtle border-subtle space-y-6 rounded-b-lg border border-t-0 px-6 py-4">
           <SkeletonText className="h-8 w-full" />
           <SkeletonText className="h-8 w-full" />
         </div>
       </SkeletonContainer>
-    </SettingsHeader>
+    </SettingsHeaderWithBackButton>
   );
 };
diff --git a/packages/features/webhooks/pages/webhook-new-view.tsx b/packages/features/webhooks/pages/webhook-new-view.tsx
index c2f5551197..e3be7c23e1 100644
--- a/packages/features/webhooks/pages/webhook-new-view.tsx
+++ b/packages/features/webhooks/pages/webhook-new-view.tsx
@@ -3,7 +3,7 @@
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 
-import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import SettingsHeaderWithBackButton from "@calcom/features/settings/appDir/SettingsHeaderWithBackButton";
 import { APP_NAME } from "@calcom/lib/constants";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -76,17 +76,16 @@ export const NewWebhookView = ({ webhooks, installedApps }: Props) => {
   };
 
   return (
-    <SettingsHeader
+    <SettingsHeaderWithBackButton
       title={t("add_webhook")}
       description={t("add_webhook_description", { appName: APP_NAME })}
-      borderInShellHeader={true}
-      backButton={true}>
+      borderInShellHeader={true}>
       <WebhookForm
         noRoutingFormTriggers={false}
         onSubmit={onCreateWebhook}
         apps={installedApps?.items.map((app) => app.slug)}
       />
-    </SettingsHeader>
+    </SettingsHeaderWithBackButton>
   );
 };