chore: App Router Migration - Fix metadata util used in App Router and remove duplicate code (#16346)

apps/web/app/future/[user]/[type]/page.tsx

@@ -1,24 +1,19 @@
 import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import { type GetServerSidePropsContext } from "next";
 import { headers, cookies } from "next/headers";
 
 import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 
 import LegacyPage from "~/users/views/users-type-public-view";
-import { getServerSideProps, type PageProps } from "~/users/views/users-type-public-view.getServerSideProps";
+import {
+  getServerSideProps,
+  type PageProps as LegacyPageProps,
+} from "~/users/views/users-type-public-view.getServerSideProps";
 
-export const generateMetadata = async ({
-  params,
-  searchParams,
-}: {
-  params: Record<string, string | string[]>;
-  searchParams: { [key: string]: string | string[] | undefined };
-}) => {
-  const props = await getData(
-    buildLegacyCtx(headers(), cookies(), params, searchParams) as unknown as GetServerSidePropsContext
-  );
+export const generateMetadata = async ({ params, searchParams }: PageProps) => {
+  const props = await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
 
   const { eventData, booking, user, slug } = props;
   const rescheduleUid = booking?.uid;
@@ -42,7 +37,7 @@ export const generateMetadata = async ({
     (t) => `${rescheduleUid ? t("reschedule") : ""} ${title}`
   );
 };
-const getData = withAppDirSsr<PageProps>(getServerSideProps);
+const getData = withAppDirSsr<LegacyPageProps>(getServerSideProps);
 
 export default WithLayout({
   getData,

apps/web/app/future/[user]/page.tsx

@@ -1,7 +1,7 @@
 import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import { type GetServerSidePropsContext } from "next";
 import { headers, cookies } from "next/headers";
 
 import { getLayout } from "@calcom/features/MainLayoutAppDir";
@@ -11,16 +11,8 @@ import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 import LegacyPage from "~/users/views/users-public-view";
 import { getServerSideProps, type UserPageProps } from "~/users/views/users-public-view.getServerSideProps";
 
-export const generateMetadata = async ({
-  params,
-  searchParams,
-}: {
-  params: Record<string, string | string[]>;
-  searchParams: { [key: string]: string | string[] | undefined };
-}) => {
-  const props = await getData(
-    buildLegacyCtx(headers(), cookies(), params, searchParams) as unknown as GetServerSidePropsContext
-  );
+export const generateMetadata = async ({ params, searchParams }: PageProps) => {
+  const props = await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
 
   const { profile, markdownStrippedBio } = props;
   return await _generateMetadata(

apps/web/app/future/apps/[slug]/[...pages]/page.tsx

@@ -13,7 +13,6 @@ import RoutingFormsRoutingConfig, {
 } from "@calcom/app-store/routing-forms/pages/app-routing.config";
 import TypeformRoutingConfig from "@calcom/app-store/typeform/pages/app-routing.config";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
-import { APP_NAME } from "@calcom/lib/constants";
 import prisma from "@calcom/prisma";
 import type { AppGetServerSideProps } from "@calcom/types/AppGetServerSideProps";
 
@@ -65,21 +64,16 @@ export const generateMetadata = async ({
 
   if (mainPage === "forms") {
     return await _generateMetadata(
-      () => `Forms | ${APP_NAME}`,
+      () => `Forms`,
       () => ""
     );
   }
 
-  const legacyContext = buildLegacyCtx(
-    headers(),
-    cookies(),
-    params,
-    searchParams
-  ) as unknown as GetServerSidePropsContext;
+  const legacyContext = buildLegacyCtx(headers(), cookies(), params, searchParams);
   const { form } = await getPageProps(legacyContext);
 
   return await _generateMetadata(
-    () => `${form.name} | ${APP_NAME}`,
+    () => `${form.name}`,
     () => form.description
   );
 };
@@ -182,12 +176,7 @@ export default async function Page({ params, searchParams }: PageProps) {
   const h = headers();
   const nonce = h.get("x-nonce") ?? undefined;
 
-  const legacyContext = buildLegacyCtx(
-    h,
-    cookies(),
-    params,
-    searchParams
-  ) as unknown as GetServerSidePropsContext;
+  const legacyContext = buildLegacyCtx(h, cookies(), params, searchParams);
   const props = await getPageProps(legacyContext);
   return (
     <PageWrapper getLayout={getLayout} requiresLicense={false} nonce={nonce} themeBasis={null} {...props}>

apps/web/app/future/apps/[slug]/page.tsx

@@ -1,12 +1,12 @@
 import Page from "@pages/apps/[slug]/index";
 import { Prisma } from "@prisma/client";
 import { withAppDirSsg } from "app/WithAppDirSsg";
+import type { PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 import type { InferGetStaticPropsType } from "next";
 import { cookies, headers } from "next/headers";
 
-import { APP_NAME } from "@calcom/lib/constants";
 import prisma from "@calcom/prisma";
 
 import { getStaticProps } from "@lib/apps/[slug]/getStaticProps";
@@ -15,18 +15,12 @@ import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 type Y = InferGetStaticPropsType<typeof getStaticProps>;
 const getData = withAppDirSsg<Y>(getStaticProps);
 
-export const generateMetadata = async ({
-  params,
-  searchParams,
-}: {
-  params: Record<string, string | string[]>;
-  searchParams: { [key: string]: string | string[] | undefined };
-}) => {
+export const generateMetadata = async ({ params, searchParams }: PageProps) => {
   const legacyContext = buildLegacyCtx(headers(), cookies(), params, searchParams);
   const res = await getData(legacyContext);
 
   return await _generateMetadata(
-    () => `${res?.data.name} | ${APP_NAME}`,
+    () => res?.data.name ?? "",
     () => res?.data.description ?? ""
   );
 };

apps/web/app/future/apps/[slug]/setup/page.tsx

@@ -5,11 +5,10 @@ import { WithLayout } from "app/layoutHOC";
 import type { InferGetServerSidePropsType } from "next";
 
 import { getServerSideProps } from "@calcom/app-store/_pages/setup/_getServerSideProps";
-import { APP_NAME } from "@calcom/lib/constants";
 
 export const generateMetadata = async ({ params }: { params: Record<string, string | string[]> }) => {
   return await _generateMetadata(
-    () => `${params.slug} | ${APP_NAME}`,
+    () => `${params.slug}`,
     () => ""
   );
 };

apps/web/app/future/apps/categories/[category]/page.tsx

@@ -11,7 +11,7 @@ import { getStaticProps } from "@lib/apps/categories/[category]/getStaticProps";
 
 export const generateMetadata = async () => {
   return await _generateMetadata(
-    () => `${APP_NAME} | ${APP_NAME}`,
+    () => `${APP_NAME}`,
     () => ""
   );
 };

apps/web/app/future/apps/categories/page.tsx

@@ -3,13 +3,11 @@ import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
-import { APP_NAME } from "@calcom/lib/constants";
-
 import { getServerSideProps } from "@lib/apps/categories/getServerSideProps";
 
 export const generateMetadata = async () => {
   return await _generateMetadata(
-    () => `Categories | ${APP_NAME}`,
+    () => `Categories`,
     () => ""
   );
 };

apps/web/app/future/apps/installed/[category]/page.tsx

@@ -3,13 +3,11 @@ import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
-import { APP_NAME } from "@calcom/lib/constants";
-
 import { getServerSideProps } from "@lib/apps/installed/[category]/getServerSideProps";
 
 export const generateMetadata = async () => {
   return await _generateMetadata(
-    (t) => `${t("installed_apps")} | ${APP_NAME}`,
+    (t) => `${t("installed_apps")}`,
     (t) => t("manage_your_connected_apps")
   );
 };

apps/web/app/future/auth/login/page.tsx

@@ -4,13 +4,11 @@ import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 import type { InferGetServerSidePropsType } from "next";
 
-import { APP_NAME } from "@calcom/lib/constants";
-
 import { getServerSideProps } from "@server/lib/auth/login/getServerSideProps";
 
 export const generateMetadata = async () => {
   return await _generateMetadata(
-    (t) => `${t("login")} | ${APP_NAME}`,
+    (t) => `${t("login")}`,
     (t) => t("login")
   );
 };

apps/web/app/future/booking/[uid]/page.tsx

@@ -2,7 +2,6 @@ import { withAppDirSsr } from "app/WithAppDirSsr";
 import type { Params, SearchParams } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import { type GetServerSidePropsContext } from "next";
 import { cookies, headers } from "next/headers";
 
 import { BookingStatus } from "@calcom/prisma/enums";
@@ -20,7 +19,7 @@ export const generateMetadata = async ({
   searchParams: SearchParams;
 }) => {
   const { bookingInfo, eventType, recurringBookings } = await getData(
-    buildLegacyCtx(headers(), cookies(), params, searchParams) as unknown as GetServerSidePropsContext
+    buildLegacyCtx(headers(), cookies(), params, searchParams)
   );
   const needsConfirmation = bookingInfo.status === BookingStatus.PENDING && eventType.requiresConfirmation;
 

apps/web/app/future/event-types/[type]/page.tsx

@@ -4,8 +4,6 @@ import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 import { cookies, headers } from "next/headers";
 
-import { APP_NAME } from "@calcom/lib/constants";
-
 import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 
 import EventTypePageWrapper from "~/event-types/views/event-types-single-view";
@@ -22,7 +20,7 @@ export const generateMetadata = async ({
   const { eventType } = await getData(legacyCtx);
 
   return await _generateMetadata(
-    (t) => `${eventType.title} | ${t("event_type")} | ${APP_NAME}`,
+    (t) => `${eventType.title} | ${t("event_type")}`,
     () => ""
   );
 };

apps/web/app/future/maintenance/page.tsx

@@ -6,7 +6,7 @@ import { APP_NAME } from "@calcom/lib/constants";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
-    (t) => `${t("under_maintenance")} | ${APP_NAME}`,
+    (t) => `${t("under_maintenance")}`,
     (t) => t("under_maintenance_description", { appName: APP_NAME })
   );
 

apps/web/app/future/org/[orgSlug]/embed/page.tsx

@@ -5,7 +5,6 @@ import withEmbedSsrAppDir from "app/WithEmbedSSR";
 import type { Params, SearchParams } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import { type GetServerSidePropsContext } from "next";
 import { cookies, headers } from "next/headers";
 
 import { buildLegacyCtx } from "@lib/buildLegacyCtx";
@@ -20,9 +19,7 @@ export const generateMetadata = async ({
   params: Params;
   searchParams: SearchParams;
 }) => {
-  const props = await getData(
-    buildLegacyCtx(headers(), cookies(), params, searchParams) as unknown as GetServerSidePropsContext
-  );
+  const props = await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
   const teamName = props.team.name || "Nameless Team";
 
   return await _generateMetadata(

apps/web/app/future/org/[orgSlug]/page.tsx

@@ -3,7 +3,6 @@ import { withAppDirSsr } from "app/WithAppDirSsr";
 import type { Params, SearchParams } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import { type GetServerSidePropsContext } from "next";
 import { cookies, headers } from "next/headers";
 
 import { buildLegacyCtx } from "@lib/buildLegacyCtx";
@@ -16,9 +15,7 @@ export const generateMetadata = async ({
   params: Params;
   searchParams: SearchParams;
 }) => {
-  const props = await getData(
-    buildLegacyCtx(headers(), cookies(), params, searchParams) as unknown as GetServerSidePropsContext
-  );
+  const props = await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
   const teamName = props.team.name || "Nameless Team";
 
   return await _generateMetadata(

apps/web/app/future/org/[orgSlug]/team/[slug]/[type]/page.tsx

@@ -3,7 +3,6 @@ import { withAppDirSsr } from "app/WithAppDirSsr";
 import type { Params, SearchParams } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import { type GetServerSidePropsContext } from "next";
 import { cookies, headers } from "next/headers";
 
 import { buildLegacyCtx } from "@lib/buildLegacyCtx";
@@ -17,7 +16,7 @@ export const generateMetadata = async ({
   searchParams: SearchParams;
 }) => {
   const legacyCtx = buildLegacyCtx(headers(), cookies(), params, searchParams);
-  const props = await getData(legacyCtx as unknown as GetServerSidePropsContext);
+  const props = await getData(legacyCtx);
   const { eventData, user, slug, booking } = props;
   const entity = eventData.entity;
   const { trpc } = await import("@calcom/trpc");

apps/web/app/future/org/[orgSlug]/team/[slug]/page.tsx

@@ -3,7 +3,6 @@ import { withAppDirSsr } from "app/WithAppDirSsr";
 import type { Params, SearchParams } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import { type GetServerSidePropsContext } from "next";
 import { cookies, headers } from "next/headers";
 
 import { buildLegacyCtx } from "@lib/buildLegacyCtx";
@@ -16,9 +15,7 @@ export const generateMetadata = async ({
   params: Params;
   searchParams: SearchParams;
 }) => {
-  const props = await getData(
-    buildLegacyCtx(headers(), cookies(), params, searchParams) as unknown as GetServerSidePropsContext
-  );
+  const props = await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
   const teamName = props.team.name || "Nameless Team";
 
   return await _generateMetadata(

apps/web/app/future/payment/[uid]/page.tsx

@@ -4,12 +4,11 @@ import { WithLayout } from "app/layoutHOC";
 
 import PaymentPage from "@calcom/features/ee/payments/components/PaymentPage";
 import { getServerSideProps, type PaymentPageProps } from "@calcom/features/ee/payments/pages/payment";
-import { APP_NAME } from "@calcom/lib/constants";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
     // the title does not contain the eventName as in the legacy page
-    (t) => `${t("payment")} | ${APP_NAME}`,
+    (t) => `${t("payment")}`,
     () => ""
   );
 

apps/web/app/future/routing-forms/page.tsx

@@ -28,7 +28,7 @@ type PageProps = Readonly<{
 
 const Page = async ({ params, searchParams }: PageProps) => {
   const legacyCtx = buildLegacyCtx(headers(), cookies(), params, searchParams);
-  await getPageProps(legacyCtx as unknown as GetServerSidePropsContext);
+  await getPageProps(legacyCtx);
 
   return null;
 };

apps/web/app/future/settings/organizations/[id]/about/page.tsx

@@ -1,4 +1,4 @@
-import LegacyPage, { WrappedAboutOrganizationPage } from "@pages/settings/organizations/[id]/about";
+import LegacyPage, { LayoutWrapper } from "@pages/settings/organizations/[id]/about";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
@@ -8,4 +8,4 @@ export const generateMetadata = async () =>
     (t) => t("about_your_organization_description")
   );
 
-export default WithLayout({ Page: LegacyPage, getLayout: WrappedAboutOrganizationPage });
+export default WithLayout({ Page: LegacyPage, getLayout: LayoutWrapper });

apps/web/app/future/settings/organizations/[id]/add-teams/page.tsx

@@ -1,4 +1,4 @@
-import LegacyPage, { WrapperAddNewTeamsPage } from "@pages/settings/organizations/[id]/add-teams";
+import LegacyPage, { LayoutWrapper } from "@pages/settings/organizations/[id]/add-teams";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
@@ -8,4 +8,4 @@ export const generateMetadata = async () =>
     (t) => t("create_your_teams_description")
   );
 
-export default WithLayout({ Page: LegacyPage, getLayout: WrapperAddNewTeamsPage });
+export default WithLayout({ Page: LegacyPage, getLayout: LayoutWrapper });

apps/web/app/future/settings/organizations/new/page.tsx

@@ -1,4 +1,4 @@
-import LegacyPage, { getServerSideProps, LayoutWrapperAppDir } from "@pages/settings/organizations/new/index";
+import LegacyPage, { getServerSideProps, LayoutWrapper } from "@pages/settings/organizations/new/index";
 import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
@@ -12,7 +12,7 @@ export const generateMetadata = async () =>
   );
 
 export default WithLayout({
-  getLayout: LayoutWrapperAppDir,
+  getLayout: LayoutWrapper,
   Page: LegacyPage,
   getData: withAppDirSsr<inferSSRProps<typeof getServerSideProps>>(getServerSideProps),
 });

apps/web/app/future/team/[slug]/[type]/page.tsx

@@ -1,21 +1,15 @@
-import LegacyPage, { type PageProps, getServerSideProps } from "@pages/team/[slug]/[type]";
+import LegacyPage, { type PageProps as LegacyPageProps, getServerSideProps } from "@pages/team/[slug]/[type]";
 import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import { type GetServerSidePropsContext } from "next";
 import { cookies, headers } from "next/headers";
 
 import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 
-export const generateMetadata = async ({
-  params,
-  searchParams,
-}: {
-  params: Record<string, string | string[]>;
-  searchParams: { [key: string]: string | string[] | undefined };
-}) => {
+export const generateMetadata = async ({ params, searchParams }: PageProps) => {
   const legacyCtx = buildLegacyCtx(headers(), cookies(), params, searchParams);
-  const props = await getData(legacyCtx as unknown as GetServerSidePropsContext);
+  const props = await getData(legacyCtx);
   const { eventData, user, slug, booking } = props;
   const entity = eventData.entity;
   const { trpc } = await import("@calcom/trpc");
@@ -38,7 +32,7 @@ export const generateMetadata = async ({
     (t) => `${booking?.uid ? t("reschedule") : ""} ${title}`
   );
 };
-const getData = withAppDirSsr<PageProps>(getServerSideProps);
+const getData = withAppDirSsr<LegacyPageProps>(getServerSideProps);
 
 export default WithLayout({
   Page: LegacyPage,

apps/web/app/future/team/[slug]/page.tsx

@@ -1,22 +1,14 @@
-import LegacyPage, { getServerSideProps, type PageProps } from "@pages/team/[slug]";
+import LegacyPage, { getServerSideProps, type PageProps as LegacyPageProps } from "@pages/team/[slug]";
 import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import { type GetServerSidePropsContext } from "next";
 import { cookies, headers } from "next/headers";
 
 import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 
-export const generateMetadata = async ({
-  params,
-  searchParams,
-}: {
-  params: Record<string, string | string[]>;
-  searchParams: { [key: string]: string | string[] | undefined };
-}) => {
-  const props = await getData(
-    buildLegacyCtx(headers(), cookies(), params, searchParams) as unknown as GetServerSidePropsContext
-  );
+export const generateMetadata = async ({ params, searchParams }: PageProps) => {
+  const props = await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
   const teamName = props.team.name || "Nameless Team";
 
   return await _generateMetadata(
@@ -25,7 +17,7 @@ export const generateMetadata = async ({
   );
 };
 
-const getData = withAppDirSsr<PageProps>(getServerSideProps);
+const getData = withAppDirSsr<LegacyPageProps>(getServerSideProps);
 
 export default WithLayout({
   Page: LegacyPage,

apps/web/app/future/workflows/[workflow]/page.tsx

@@ -1,22 +1,14 @@
 import LegacyPage, { getStaticProps } from "@pages/workflows/[workflow]";
 import { withAppDirSsg } from "app/WithAppDirSsg";
+import type { PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import { type GetServerSidePropsContext } from "next";
 import { headers, cookies } from "next/headers";
 
 import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 
-export const generateMetadata = async ({
-  params,
-  searchParams,
-}: {
-  params: Record<string, string | string[]>;
-  searchParams: { [key: string]: string | string[] | undefined };
-}) => {
-  const { workflow } = await getData(
-    buildLegacyCtx(headers(), cookies(), params, searchParams) as unknown as GetServerSidePropsContext
-  );
+export const generateMetadata = async ({ params, searchParams }: PageProps) => {
+  const { workflow } = await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
   return await _generateMetadata(
     () => workflow ?? "Untitled",
     () => ""

apps/web/lib/metadata.ts

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 
+import { APP_NAME } from "@calcom/lib/constants";
 import { truncateOnWord } from "@calcom/lib/text";
 
 type RootMetadataRecipe = Readonly<{
@@ -65,18 +66,23 @@ export const prepareRootMetadata = (recipe: RootMetadataRecipe): Metadata => ({
   },
 });
 
-export const preparePageMetadata = (recipe: PageMetadataRecipe): Metadata => ({
-  title: recipe.title,
-  alternates: {
-    canonical: recipe.canonical,
-  },
-  openGraph: {
-    description: truncateOnWord(recipe.description, 158),
-    url: recipe.canonical,
-    type: "website",
-    siteName: recipe.siteName,
-    title: recipe.title,
-    images: [recipe.image],
-  },
-  metadataBase: recipe.metadataBase,
-});
+export const preparePageMetadata = (recipe: PageMetadataRecipe): Metadata => {
+  const titleSuffix = `| ${APP_NAME}`;
+  const { description } = recipe;
+  return {
+    title: recipe.title.includes(titleSuffix) ? recipe.title : `${recipe.title} ${titleSuffix}`,
+    description,
+    alternates: {
+      canonical: recipe.canonical,
+    },
+    openGraph: {
+      description: truncateOnWord(description, 158),
+      url: recipe.canonical,
+      type: "website",
+      siteName: recipe.siteName,
+      title: recipe.title,
+      images: [recipe.image],
+    },
+    metadataBase: recipe.metadataBase,
+  };
+};

apps/web/pages/settings/organizations/[id]/about.tsx

@@ -2,7 +2,7 @@
 
 import { AboutOrganizationForm } from "@calcom/features/ee/organizations/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Meta, WizardLayout, WizardLayoutAppDir } from "@calcom/ui";
+import { Meta, WizardLayout } from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
 
@@ -25,14 +25,6 @@ export const LayoutWrapper = (page: React.ReactElement) => {
   );
 };
 
-export const WrappedAboutOrganizationPage = (page: React.ReactElement) => {
-  return (
-    <WizardLayoutAppDir currentStep={3} maxSteps={5}>
-      {page}
-    </WizardLayoutAppDir>
-  );
-};
-
 AboutOrganizationPage.getLayout = LayoutWrapper;
 AboutOrganizationPage.PageWrapper = PageWrapper;
 

apps/web/pages/settings/organizations/[id]/add-teams.tsx

@@ -3,7 +3,6 @@
 import { AddNewTeamsForm } from "@calcom/features/ee/organizations/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Meta, WizardLayout } from "@calcom/ui";
-import { WizardLayoutAppDir } from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
 
@@ -19,7 +18,7 @@ const AddNewTeamsPage = () => {
   );
 };
 
-AddNewTeamsPage.getLayout = (page: React.ReactElement) => {
+export const LayoutWrapper = (page: React.ReactElement) => {
   return (
     <WizardLayout currentStep={5} maxSteps={5}>
       {page}
@@ -27,14 +26,7 @@ AddNewTeamsPage.getLayout = (page: React.ReactElement) => {
   );
 };
 
+AddNewTeamsPage.getLayout = LayoutWrapper;
 AddNewTeamsPage.PageWrapper = PageWrapper;
 
-export const WrapperAddNewTeamsPage = (page: React.ReactElement) => {
-  return (
-    <WizardLayoutAppDir currentStep={5} maxSteps={5}>
-      {page}
-    </WizardLayoutAppDir>
-  );
-};
-
 export default AddNewTeamsPage;

apps/web/pages/settings/organizations/[id]/onboard-members.tsx

@@ -5,7 +5,7 @@ import { redirect, useRouter } from "next/navigation";
 import AddNewTeamMembers from "@calcom/features/ee/teams/components/AddNewTeamMembers";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Meta, WizardLayout, WizardLayoutAppDir } from "@calcom/ui";
+import { Meta, WizardLayout } from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
 
@@ -48,14 +48,14 @@ export const buildWrappedOnboardTeamMembersPage = (
   page: React.ReactElement
 ) => {
   return (
-    <WizardLayoutAppDir
+    <WizardLayout
       currentStep={4}
       maxSteps={5}
       isOptionalCallback={() => {
         redirect(`/settings/organizations/${id}/add-teams`);
       }}>
       {page}
-    </WizardLayoutAppDir>
+    </WizardLayout>
   );
 };
 

apps/web/pages/settings/organizations/new/index.tsx

@@ -3,7 +3,7 @@
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import { CreateANewOrganizationForm } from "@calcom/features/ee/organizations/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { WizardLayout, Meta, WizardLayoutAppDir } from "@calcom/ui";
+import { WizardLayout, Meta } from "@calcom/ui";
 
 import { getServerSideProps } from "@lib/settings/organizations/new/getServerSideProps";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -19,7 +19,7 @@ const CreateNewOrganizationPage = ({ querySlug }: inferSSRProps<typeof getServer
     </LicenseRequired>
   );
 };
-const LayoutWrapper = (page: React.ReactElement) => {
+export const LayoutWrapper = (page: React.ReactElement) => {
   return (
     <WizardLayout currentStep={1} maxSteps={5}>
       {page}
@@ -27,14 +27,6 @@ const LayoutWrapper = (page: React.ReactElement) => {
   );
 };
 
-export const LayoutWrapperAppDir = (page: React.ReactElement) => {
-  return (
-    <WizardLayoutAppDir currentStep={1} maxSteps={5}>
-      {page}
-    </WizardLayoutAppDir>
-  );
-};
-
 CreateNewOrganizationPage.getLayout = LayoutWrapper;
 CreateNewOrganizationPage.PageWrapper = PageWrapper;
 

apps/web/pages/settings/platform/new/index.tsx

@@ -3,7 +3,7 @@
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import { CreateANewPlatformForm } from "@calcom/features/ee/platform/components/index";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { WizardLayout, Meta, WizardLayoutAppDir } from "@calcom/ui";
+import { WizardLayout, Meta } from "@calcom/ui";
 
 import { getServerSideProps } from "@lib/settings/organizations/new/getServerSideProps";
 
@@ -21,7 +21,7 @@ const CreateNewOrganizationPage = () => {
     </LicenseRequired>
   );
 };
-const LayoutWrapper = (page: React.ReactElement) => {
+export const LayoutWrapper = (page: React.ReactElement) => {
   return (
     <WizardLayout currentStep={1} maxSteps={1}>
       {page}
@@ -29,14 +29,6 @@ const LayoutWrapper = (page: React.ReactElement) => {
   );
 };
 
-export const LayoutWrapperAppDir = (page: React.ReactElement) => {
-  return (
-    <WizardLayoutAppDir currentStep={1} maxSteps={2}>
-      {page}
-    </WizardLayoutAppDir>
-  );
-};
-
 CreateNewOrganizationPage.getLayout = LayoutWrapper;
 CreateNewOrganizationPage.PageWrapper = PageWrapper;
 

packages/ui/index.tsx

@@ -172,7 +172,6 @@ export { CreateButton, CreateButtonWithTeamsList } from "./components/createButt
 export { useCalcomTheme } from "./styles/useCalcomTheme";
 export { ScrollableArea } from "./components/scrollable/ScrollableArea";
 export { WizardLayout } from "./layouts/WizardLayout";
-export { WizardLayoutAppDir } from "./layouts/WizardLayoutAppDir";
 export { DataTable } from "./components/data-table";
 export {
   Sheet,

packages/ui/layouts/WizardLayoutAppDir.tsx

@@ -1,76 +0,0 @@
-"use client";
-
-// eslint-disable-next-line no-restricted-imports
-import { noop } from "lodash";
-import { usePathname } from "next/navigation";
-import React, { useEffect, useState } from "react";
-import { Toaster } from "react-hot-toast";
-
-import { APP_NAME } from "@calcom/lib/constants";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, SkeletonText, StepCard, Steps } from "@calcom/ui";
-
-export function WizardLayoutAppDir({
-  children,
-  maxSteps = 2,
-  currentStep = 0,
-  isOptionalCallback,
-}: {
-  children: React.ReactNode;
-} & { maxSteps?: number; currentStep?: number; isOptionalCallback?: () => void }) {
-  const { t, isLocaleReady } = useLocale();
-  const [meta, setMeta] = useState({ title: "", subtitle: " " });
-  const pathname = usePathname();
-  const { title, subtitle } = meta;
-
-  useEffect(() => {
-    setMeta({
-      title: window.document.title,
-      subtitle: window.document.querySelector('meta[name="description"]')?.getAttribute("content") || "",
-    });
-  }, [pathname]);
-
-  return (
-    <div
-      className="dark:bg-brand dark:text-brand-contrast text-emphasis min-h-screen"
-      data-testid="onboarding">
-      <div>
-        <Toaster position="bottom-right" />
-      </div>
-      <div className="mx-auto px-4 py-24">
-        <div className="relative">
-          <div className="sm:mx-auto sm:w-full sm:max-w-[600px]">
-            <div className="mx-auto sm:max-w-[520px]">
-              <header>
-                {isLocaleReady ? (
-                  <>
-                    <p className="font-cal mb-3 text-[28px] font-medium leading-7">
-                      {title.replace(` | ${APP_NAME}`, "")}&nbsp;
-                    </p>
-                    <p className="text-subtle font-sans text-sm font-normal">{subtitle}&nbsp;</p>
-                  </>
-                ) : (
-                  <>
-                    <SkeletonText className="h-6 w-1/2" />
-                    <SkeletonText className="mt-4 h-4 w-3/4" />
-                  </>
-                )}
-              </header>
-              <Steps maxSteps={maxSteps} currentStep={currentStep} navigateToStep={noop} />
-            </div>
-            <StepCard>{children}</StepCard>
-          </div>
-        </div>
-        {isOptionalCallback && (
-          <div className="mt-4 flex justify-center">
-            <Button color="minimal" onClick={isOptionalCallback}>
-              {t("ill_do_this_later")}
-            </Button>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export const getLayout = (page: React.ReactElement) => <WizardLayoutAppDir>{page}</WizardLayoutAppDir>;