chore: app router - /event-types pages

.env.example

@@ -346,8 +346,6 @@ E2E_TEST_OIDC_USER_PASSWORD=
 # provide a value between 0 and 100 to ensure the percentage of traffic
 # redirected from the legacy to the future pages
 AB_TEST_BUCKET_PROBABILITY=50
-# whether we redirect to the future/event-types from event-types or not
-APP_ROUTER_EVENT_TYPES_ENABLED=0
 APP_ROUTER_APPS_INSTALLED_CATEGORY_ENABLED=0
 APP_ROUTER_APPS_SLUG_ENABLED=0
 APP_ROUTER_APPS_SLUG_SETUP_ENABLED=0

apps/web/abTest/middlewareFactory.ts

@@ -6,7 +6,6 @@ import z from "zod";
 import { FUTURE_ROUTES_ENABLED_COOKIE_NAME, FUTURE_ROUTES_OVERRIDE_COOKIE_NAME } from "@calcom/lib/constants";
 
 const ROUTES: [URLPattern, boolean][] = [
-  ["/event-types", process.env.APP_ROUTER_EVENT_TYPES_ENABLED === "1"] as const,
   ["/apps/installed/:category", process.env.APP_ROUTER_APPS_INSTALLED_CATEGORY_ENABLED === "1"] as const,
   ["/apps/:slug", process.env.APP_ROUTER_APPS_SLUG_ENABLED === "1"] as const,
   ["/apps/:slug/setup", process.env.APP_ROUTER_APPS_SLUG_SETUP_ENABLED === "1"] as const,

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

@@ -4,11 +4,10 @@ import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 import { cookies, headers } from "next/headers";
 
-import { EventType } from "@calcom/atoms/monorepo";
-
 import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 import { getServerSideProps } from "@lib/event-types/[type]/getServerSideProps";
-import type { PageProps as EventTypePageProps } from "@lib/event-types/[type]/getServerSideProps";
+
+import EventTypePageWrapper from "~/event-types/views/event-types-single-view";
 
 export const generateMetadata = async ({ params, searchParams }: PageProps) => {
   const legacyCtx = buildLegacyCtx(headers(), cookies(), params, searchParams);
@@ -21,5 +20,5 @@ export const generateMetadata = async ({ params, searchParams }: PageProps) => {
 };
 
 const getData = withAppDirSsr(getServerSideProps);
-const Page = ({ type, ...rest }: EventTypePageProps) => <EventType {...rest} id={type} isAppDir={true} />;
-export default WithLayout({ getLayout: null, getData, Page })<"P">;
+
+export default WithLayout({ getLayout: null, getData, Page: EventTypePageWrapper })<"P">;

apps/web/middleware.ts

@@ -172,7 +172,6 @@ export const config = {
     "/apps/routing_forms/:path*",
 
     "/event-types",
-    "/future/event-types/",
     "/apps/installed/:category/",
     "/future/apps/installed/:category/",
     "/apps/:slug/",

apps/web/modules/event-types/views/event-types-listing-view.tsx

@@ -946,10 +946,7 @@ const InfiniteScrollMain = ({
   );
 };
 
-const EventTypesPage: React.FC & {
-  PageWrapper?: AppProps["Component"]["PageWrapper"];
-  getLayout?: AppProps["Component"]["getLayout"];
-} = () => {
+const EventTypesPage: React.FC = () => {
   const { t } = useLocale();
   const searchParams = useCompatSearchParams();
   const { open } = useIntercom();
@@ -1009,17 +1006,14 @@ const EventTypesPage: React.FC & {
   return (
     <Shell
       withoutMain={false}
-      title="Event Types"
-      description="Create events to share for people to book on your calendar."
+      title={t("event_types_page_title")}
+      description={t("event_types_page_subtitle")}
       withoutSeo
       heading={t("event_types_page_title")}
       hideHeadingOnMobile
       subtitle={t("event_types_page_subtitle")}
       CTA={<CTA profileOptions={profileOptions} isOrganization={!!user?.organizationId} />}>
-      <HeadSeo
-        title="Event Types"
-        description="Create events to share for people to book on your calendar."
-      />
+      <HeadSeo title={t("event_types_page_title")} description={t("event_types_page_subtitle")} />
 
       <InfiniteScrollMain
         profiles={getUserEventGroupsData?.profiles}

apps/web/modules/event-types/views/event-types-single-view.tsx

@@ -5,7 +5,7 @@ import { EventType } from "@calcom/atoms/monorepo";
 import type { PageProps } from "@lib/event-types/[type]/getServerSideProps";
 
 const EventTypePageWrapper = ({ type, ...rest }: PageProps) => {
-  return <EventType {...rest} id={type} isAppDir={false} />;
+  return <EventType {...rest} id={type} />;
 };
 
 export default EventTypePageWrapper;

apps/web/pages/event-types/[type]/index.tsx

@@ -4,13 +4,7 @@ import PageWrapper from "@components/PageWrapper";
 
 import EventTypePageWrapper from "~/event-types/views/event-types-single-view";
 
-export type {
-  FormValues,
-  CustomInputParsed,
-  EventTypeSetup,
-  EventTypeSetupProps,
-  Host,
-} from "@calcom/features/eventtypes/lib/types";
+
 
 const Page = (props: PageProps) => <EventTypePageWrapper {...props} />;
 Page.PageWrapper = PageWrapper;

apps/web/scripts/vercel-app-router-deploy.sh

@@ -6,7 +6,6 @@ checkRoute () {
 
 # These conditionals are used to remove directories from the build that are not needed in production
 # This is to reduce the size of the build and prevent OOM errors
-checkRoute "$APP_ROUTER_EVENT_TYPES_ENABLED" app/future/event-types
 checkRoute "$APP_ROUTER_APPS_INSTALLED_CATEGORY_ENABLED" app/future/apps/installed
 checkRoute "$APP_ROUTER_APPS_SLUG_ENABLED" app/future/apps/\[slug\]
 checkRoute "$APP_ROUTER_APPS_SLUG_SETUP_ENABLED" app/future/apps/\[slug\]/setup

packages/platform/atoms/event-types/wrappers/EventTypeWebWrapper.tsx

@@ -3,10 +3,6 @@
 import type { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import dynamic from "next/dynamic";
 import { usePathname, useRouter as useAppRouter } from "next/navigation";
-// eslint-disable-next-line @calcom/eslint/deprecated-imports-next-router
-import { useRouter as usePageRouter } from "next/router";
-// eslint-disable-next-line @calcom/eslint/deprecated-imports-next-router
-import type { NextRouter as NextPageRouter } from "next/router";
 import { useEffect, useRef, useState } from "react";
 import { z } from "zod";
 
@@ -89,71 +85,34 @@ const EventAITab = dynamic(() =>
 
 export type EventTypeWebWrapperProps = {
   id: number;
-  isAppDir?: boolean;
 };
 
-// discriminative factor: isAppDir
 type EventTypeAppComponentProp = {
   id: number;
-  isAppDir: true;
   pathname: string;
-  pageRouter: null;
   appRouter: AppRouterInstance;
 };
 
-// discriminative factor: isAppDir
-type EventTypePageComponentProp = {
-  id: number;
-  isAppDir: false;
-  pageRouter: NextPageRouter;
-  pathname: null;
-  appRouter: null;
-};
-
-type EventTypeAppPageComponentProp = EventTypeAppComponentProp | EventTypePageComponentProp;
-
-export const EventTypeWebWrapper = ({ id, isAppDir }: EventTypeWebWrapperProps & { isAppDir?: boolean }) => {
+export const EventTypeWebWrapper = ({ id }: EventTypeWebWrapperProps) => {
   const { data: eventTypeQueryData } = trpc.viewer.eventTypes.get.useQuery({ id });
 
   if (!eventTypeQueryData) return null;
 
-  return isAppDir ? (
-    <EventTypeAppWrapper {...eventTypeQueryData} id={id} />
-  ) : (
-    <EventTypePageWrapper {...eventTypeQueryData} id={id} />
-  );
-};
-
-const EventTypePageWrapper = ({ id, ...rest }: EventTypeSetupProps & { id: number }) => {
-  const router = usePageRouter();
-  return (
-    <EventTypeWeb {...rest} id={id} isAppDir={false} pageRouter={router} pathname={null} appRouter={null} />
-  );
+  return <EventTypeAppWrapper {...eventTypeQueryData} id={id} />;
 };
 
 const EventTypeAppWrapper = ({ id, ...rest }: EventTypeSetupProps & { id: number }) => {
   const pathname = usePathname();
   const router = useAppRouter();
-  return (
-    <EventTypeWeb
-      {...rest}
-      id={id}
-      isAppDir={true}
-      pathname={pathname ?? ""}
-      pageRouter={null}
-      appRouter={router}
-    />
-  );
+  return <EventTypeWeb {...rest} id={id} pathname={pathname ?? ""} appRouter={router} />;
 };
 
 const EventTypeWeb = ({
   id,
-  isAppDir,
-  pageRouter,
   appRouter,
   pathname,
   ...rest
-}: EventTypeSetupProps & EventTypeAppPageComponentProp) => {
+}: EventTypeSetupProps & EventTypeAppComponentProp) => {
   const { t } = useLocale();
   const utils = trpc.useUtils();
 
@@ -281,7 +240,7 @@ const EventTypeWeb = ({
   } as const;
 
   useHandleRouteChange({
-    watchTrigger: isAppDir ? pageRouter : pathname,
+    watchTrigger: pathname,
     isTeamEventTypeDeleted: isTeamEventTypeDeleted.current,
     isleavingWithoutAssigningHosts: leaveWithoutAssigningHosts.current,
     isTeamEventType: !!team,
@@ -292,22 +251,10 @@ const EventTypeWeb = ({
     onError: (url) => {
       setIsOpenAssignmentWarnDialog(true);
       setPendingRoute(url);
-      if (!isAppDir) {
-        pageRouter.events.emit(
-          "routeChangeError",
-          new Error(`Aborted route change to ${url} because none was assigned to team event`)
-        );
-        throw "Aborted";
-      }
-
-      if (isAppDir) throw new Error(`Aborted route change to ${url} because none was assigned to team event`);
+      throw new Error(`Aborted route change to ${url} because none was assigned to team event`);
     },
     onStart: (handleRouteChange) => {
-      !isAppDir && pageRouter.events.on("routeChangeStart", handleRouteChange);
-      isAppDir && handleRouteChange(pathname || "");
-    },
-    onEnd: (handleRouteChange) => {
-      !isAppDir && pageRouter.events.off("routeChangeStart", handleRouteChange);
+      handleRouteChange(pathname || "");
     },
   });
 
@@ -370,7 +317,7 @@ const EventTypeWeb = ({
       await utils.viewer.eventTypes.invalidate();
       showToast(t("event_type_deleted_successfully"), "success");
       isTeamEventTypeDeleted.current = true;
-      isAppDir ? appRouter.push("/event-types") : pageRouter.push("/event-types");
+      appRouter.push("/event-types");
       setSlugExistsChildrenDialogOpen([]);
       setIsOpenAssignmentWarnDialog(false);
     },

turbo.json

@@ -239,7 +239,6 @@
     "APP_ROUTER_APPS_SLUG_SETUP_ENABLED",
     "APP_ROUTER_BOOKING_ENABLED",
     "APP_ROUTER_BOOKINGS_STATUS_ENABLED",
-    "APP_ROUTER_EVENT_TYPES_ENABLED",
     "APP_ROUTER_GETTING_STARTED_STEP_ENABLED",
     "APP_ROUTER_AUTH_FORGOT_PASSWORD_ENABLED",
     "APP_ROUTER_AUTH_LOGIN_ENABLED",