chore: app router - /event-types pages (#18181)

* refactor event type web wrapper

* finish migration

* move event-types folder out of future

* remove vars

* remove pages router

* fix

* fix

* fix test

* remove test tag

* refactor

* remove completely

* add withoutSeo prop for event type web page

* remove HeadSeo usage from event types listing view

* make onboarding e2e test faster

* remove useIntercom

---------

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

apps/web/abTest/middlewareFactory.ts

@@ -5,7 +5,6 @@ import { NextResponse, URLPattern } from "next/server";
 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/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

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

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

@@ -3,7 +3,7 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { Trans } from "next-i18next";
 import Link from "next/link";
-import { usePathname, useRouter } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type { FC } from "react";
 import { memo, useEffect, useState } from "react";
 import { z } from "zod";
@@ -18,7 +18,6 @@ import { getTeamsFiltersFromQuery } from "@calcom/features/filters/lib/getTeamsF
 import Shell from "@calcom/features/shell/Shell";
 import { classNames, parseEventTypeColor } from "@calcom/lib";
 import { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants";
-import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useCopy } from "@calcom/lib/hooks/useCopy";
 import { useDebounce } from "@calcom/lib/hooks/useDebounce";
 import { useInViewObserver } from "@calcom/lib/hooks/useInViewObserver";
@@ -47,7 +46,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   EmptyScreen,
-  HeadSeo,
   HorizontalTabs,
   Icon,
   Label,
@@ -60,7 +58,6 @@ import {
   UserAvatarGroup,
 } from "@calcom/ui";
 
-import type { AppProps } from "@lib/app-providers";
 import useMeQuery from "@lib/hooks/useMeQuery";
 
 type GetUserEventGroupsResponse = RouterOutputs["viewer"]["eventTypes"]["getUserEventGroups"];
@@ -256,7 +253,7 @@ export const InfiniteEventTypeList = ({
   const { t } = useLocale();
   const router = useRouter();
   const pathname = usePathname();
-  const searchParams = useCompatSearchParams();
+  const searchParams = useSearchParams();
   const { copyToClipboard } = useCopy();
   const [parent] = useAutoAnimate<HTMLUListElement>();
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -373,7 +370,7 @@ export const InfiniteEventTypeList = ({
 
   // inject selection data into url for correct router history
   const openDuplicateModal = (eventType: InfiniteEventType, group: InfiniteEventTypeGroup) => {
-    const newSearchParams = new URLSearchParams(searchParams ?? undefined);
+    const newSearchParams = new URLSearchParams(searchParams?.toString() ?? undefined);
     function setParamsIfDefined(key: string, value: string | number | boolean | null | undefined) {
       if (value) newSearchParams.set(key, value.toString());
       if (value === null) newSearchParams.delete(key);
@@ -897,7 +894,7 @@ const InfiniteScrollMain = ({
   eventTypeGroups: GetUserEventGroupsResponse["eventTypeGroups"] | undefined;
   profiles: GetUserEventGroupsResponse["profiles"] | undefined;
 }) => {
-  const searchParams = useCompatSearchParams();
+  const searchParams = useSearchParams();
   const { data } = useTypedQuery(querySchema);
   const orgBranding = useOrgBranding();
 
@@ -945,11 +942,9 @@ const InfiniteScrollMain = ({
   );
 };
 
-const EventTypesPage: React.FC & {
-  PageWrapper?: AppProps["Component"]["PageWrapper"];
-  getLayout?: AppProps["Component"]["getLayout"];
-} = () => {
+const EventTypesPage: React.FC = () => {
   const { t } = useLocale();
+  const searchParams = useSearchParams();
   const { data: user } = useMeQuery();
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [_showProfileBanner, setShowProfileBanner] = useState(false);
@@ -1003,18 +998,13 @@ 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."
-      />
-
       <InfiniteScrollMain
         profiles={getUserEventGroupsData?.profiles}
         eventTypeGroups={getUserEventGroupsData?.eventTypeGroups}

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

@@ -1,19 +0,0 @@
-import type { PageProps } from "@lib/event-types/[type]/getServerSideProps";
-
-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;
-
-export { getServerSideProps } from "@lib/event-types/[type]/getServerSideProps";
-export default Page;

apps/web/pages/event-types/index.tsx

@@ -1,9 +0,0 @@
-import PageWrapper from "@components/PageWrapper";
-
-import EventTypesPage from "~/event-types/views/event-types-listing-view";
-
-export { getServerSideProps } from "@lib/event-types/getServerSideProps";
-
-EventTypesPage.PageWrapper = PageWrapper;
-
-export default EventTypesPage;

apps/web/playwright/manage-booking-questions.e2e.ts

@@ -258,8 +258,6 @@ test.describe("Manage Booking Questions", () => {
 
       await test.step("Go to First Team Event", async () => {
         await page.getByTestId(`horizontal-tab-${team?.name}`).click();
-        await page.waitForLoadState("networkidle");
-
         const $eventTypes = page.locator("[data-testid=event-types]").locator("li a");
         const firstEventTypeElement = $eventTypes.first();
 

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