chore: refactor handling logic for embeds in app router (#18362)

* refactor handling logic for embeds in app router

* fix type checks

* add test for withEmbedSsrAppDir

* fix

apps/web/app/WithEmbedSSR.test.ts

@@ -0,0 +1,247 @@
+import type { Request, Response } from "express";
+import type { NextApiRequest, NextApiResponse, Redirect } from "next";
+import { redirect, notFound } from "next/navigation";
+import { createMocks } from "node-mocks-http";
+import { describe, expect, it, vi } from "vitest";
+
+import withEmbedSsrAppDir from "./WithEmbedSSR";
+
+export type CustomNextApiRequest = NextApiRequest & Request;
+export type CustomNextApiResponse = NextApiResponse & Response;
+
+export function createMockNextJsRequest(...args: Parameters<typeof createMocks>) {
+  return createMocks<CustomNextApiRequest, CustomNextApiResponse>(...args);
+}
+
+vi.mock("next/navigation", () => ({
+  redirect: vi.fn(),
+  notFound: vi.fn(),
+}));
+
+function getServerSidePropsFnGenerator(
+  config:
+    | { redirectUrl: string }
+    | { props: Record<string, unknown> }
+    | {
+        notFound: true;
+      }
+) {
+  if ("redirectUrl" in config)
+    return async () => {
+      return {
+        redirect: {
+          permanent: false,
+          destination: config.redirectUrl,
+        } satisfies Redirect,
+      };
+    };
+
+  if ("props" in config)
+    return async () => {
+      return {
+        props: config.props,
+      };
+    };
+
+  if ("notFound" in config)
+    return async () => {
+      return {
+        notFound: true as const,
+      };
+    };
+
+  throw new Error("Invalid config");
+}
+
+interface ServerSidePropsContext {
+  embedRelatedParams?: Record<string, string>;
+}
+
+function getServerSidePropsContextArg({ embedRelatedParams = {} }: ServerSidePropsContext) {
+  const { req, res } = createMockNextJsRequest();
+  return {
+    req,
+    res,
+    query: {
+      ...embedRelatedParams,
+    },
+    resolvedUrl: "/MOCKED_RESOLVED_URL",
+  };
+}
+
+describe("withEmbedSsrAppDir", () => {
+  describe("when gSSP returns redirect", () => {
+    describe("when redirect destination is relative", () => {
+      it("should redirect with layout and embed params from the current query", async () => {
+        const withEmbedGetSsr = withEmbedSsrAppDir(
+          getServerSidePropsFnGenerator({
+            redirectUrl: "/reschedule",
+          })
+        );
+
+        await withEmbedGetSsr(
+          getServerSidePropsContextArg({
+            embedRelatedParams: {
+              layout: "week_view",
+              embed: "namespace1",
+            },
+          })
+        ).catch(() => {});
+
+        expect(redirect).toHaveBeenCalledWith("/reschedule/embed?layout=week_view&embed=namespace1");
+      });
+
+      it("should preserve existing query params in redirect URL", async () => {
+        const withEmbedGetSsr = withEmbedSsrAppDir(
+          getServerSidePropsFnGenerator({
+            redirectUrl: "/reschedule?redirectParam=1",
+          })
+        );
+
+        await withEmbedGetSsr(
+          getServerSidePropsContextArg({
+            embedRelatedParams: {
+              layout: "week_view",
+              embed: "namespace1",
+            },
+          })
+        ).catch(() => {});
+
+        expect(redirect).toHaveBeenCalledWith(
+          "/reschedule/embed?redirectParam=1&layout=week_view&embed=namespace1"
+        );
+      });
+
+      it("should handle empty embed namespace", async () => {
+        const withEmbedGetSsr = withEmbedSsrAppDir(
+          getServerSidePropsFnGenerator({
+            redirectUrl: "/reschedule?redirectParam=1",
+          })
+        );
+
+        await withEmbedGetSsr(
+          getServerSidePropsContextArg({
+            embedRelatedParams: {
+              layout: "week_view",
+              embed: "",
+            },
+          })
+        ).catch(() => {});
+
+        expect(redirect).toHaveBeenCalledWith("/reschedule/embed?redirectParam=1&layout=week_view&embed=");
+      });
+    });
+
+    describe("when redirect destination is absolute", () => {
+      it("should handle HTTPS URLs", async () => {
+        const withEmbedGetSsr = withEmbedSsrAppDir(
+          getServerSidePropsFnGenerator({
+            redirectUrl: "https://calcom.cal.local/owner",
+          })
+        );
+
+        await withEmbedGetSsr(
+          getServerSidePropsContextArg({
+            embedRelatedParams: {
+              layout: "week_view",
+              embed: "namespace1",
+            },
+          })
+        ).catch(() => {});
+
+        expect(redirect).toHaveBeenCalledWith(
+          "https://calcom.cal.local/owner/embed?layout=week_view&embed=namespace1"
+        );
+      });
+
+      it("should handle HTTP URLs", async () => {
+        const withEmbedGetSsr = withEmbedSsrAppDir(
+          getServerSidePropsFnGenerator({
+            redirectUrl: "http://calcom.cal.local/owner",
+          })
+        );
+
+        await withEmbedGetSsr(
+          getServerSidePropsContextArg({
+            embedRelatedParams: {
+              layout: "week_view",
+              embed: "namespace1",
+            },
+          })
+        ).catch(() => {});
+
+        expect(redirect).toHaveBeenCalledWith(
+          "http://calcom.cal.local/owner/embed?layout=week_view&embed=namespace1"
+        );
+      });
+
+      it("should treat URLs without protocol as relative", async () => {
+        const withEmbedGetSsr = withEmbedSsrAppDir(
+          getServerSidePropsFnGenerator({
+            redirectUrl: "calcom.cal.local/owner",
+          })
+        );
+
+        await withEmbedGetSsr(
+          getServerSidePropsContextArg({
+            embedRelatedParams: {
+              layout: "week_view",
+              embed: "namespace1",
+            },
+          })
+        ).catch(() => {});
+
+        expect(redirect).toHaveBeenCalledWith(
+          "/calcom.cal.local/owner/embed?layout=week_view&embed=namespace1"
+        );
+      });
+    });
+  });
+
+  describe("when gSSP returns props", () => {
+    it("should add isEmbed=true prop", async () => {
+      const withEmbedGetSsr = withEmbedSsrAppDir(
+        getServerSidePropsFnGenerator({
+          props: {
+            prop1: "value1",
+          },
+        })
+      );
+
+      const ret = await withEmbedGetSsr(
+        getServerSidePropsContextArg({
+          embedRelatedParams: {
+            layout: "week_view",
+            embed: "",
+          },
+        })
+      );
+
+      expect(ret).toEqual({
+        prop1: "value1",
+        isEmbed: true,
+      });
+    });
+  });
+
+  describe("when gSSP returns notFound", () => {
+    it("should throw notFound", async () => {
+      const withEmbedGetSsr = withEmbedSsrAppDir(
+        getServerSidePropsFnGenerator({
+          notFound: true,
+        })
+      );
+
+      await withEmbedGetSsr(
+        getServerSidePropsContextArg({
+          embedRelatedParams: {
+            layout: "week_view",
+            embed: "",
+          },
+        })
+      ).catch(() => {});
+
+      expect(notFound).toHaveBeenCalled();
+    });
+  });
+});

apps/web/app/WithEmbedSSR.tsx

@@ -1,6 +1,4 @@
-import type { GetServerSidePropsContext } from "next";
-import { isNotFoundError } from "next/dist/client/components/not-found";
-import { getURLFromRedirectError, isRedirectError } from "next/dist/client/components/redirect";
+import type { GetServerSideProps, GetServerSidePropsContext } from "next";
 import { notFound, redirect } from "next/navigation";
 
 import { WebAppURL } from "@calcom/lib/WebAppURL";
@@ -9,48 +7,46 @@ export type EmbedProps = {
   isEmbed?: boolean;
 };
 
-export default function withEmbedSsrAppDir<T extends Record<string, any>>(
-  getData: (context: GetServerSidePropsContext) => Promise<T>
-) {
-  return async (context: GetServerSidePropsContext): Promise<T> => {
+const withEmbedSsrAppDir =
+  <T extends Record<string, any>>(getServerSideProps: GetServerSideProps<T>) =>
+  async (context: GetServerSidePropsContext): Promise<T> => {
     const { embed, layout } = context.query;
-    try {
-      const props = await getData(context);
+    const ssrResponse = await getServerSideProps(context);
 
-      return {
-        ...props,
-        isEmbed: true,
-      };
-    } catch (e) {
-      if (isRedirectError(e)) {
-        const destinationUrl = getURLFromRedirectError(e);
-        let urlPrefix = "";
+    if ("redirect" in ssrResponse) {
+      const destinationUrl = ssrResponse.redirect.destination;
+      let urlPrefix = "";
 
-        // Get the URL parsed from URL so that we can reliably read pathname and searchParams from it.
-        const destinationUrlObj = new WebAppURL(destinationUrl);
+      // Get the URL parsed from URL so that we can reliably read pathname and searchParams from it.
+      const destinationUrlObj = new WebAppURL(ssrResponse.redirect.destination);
 
-        // If it's a complete URL, use the origin as the prefix to ensure we redirect to the same domain.
-        if (destinationUrl.search(/^(http:|https:).*/) !== -1) {
-          urlPrefix = destinationUrlObj.origin;
-        } else {
-          // Don't use any prefix for relative URLs to ensure we stay on the same domain
-          urlPrefix = "";
-        }
-
-        const destinationQueryStr = destinationUrlObj.searchParams.toString();
-        // Make sure that redirect happens to /embed page and pass on embed query param as is for preserving Cal JS API namespace
-        const newDestinationUrl = `${urlPrefix}${destinationUrlObj.pathname}/embed?${
-          destinationQueryStr ? `${destinationQueryStr}&` : ""
-        }layout=${layout}&embed=${embed}`;
-
-        redirect(newDestinationUrl);
+      // If it's a complete URL, use the origin as the prefix to ensure we redirect to the same domain.
+      if (destinationUrl.search(/^(http:|https:).*/) !== -1) {
+        urlPrefix = destinationUrlObj.origin;
+      } else {
+        // Don't use any prefix for relative URLs to ensure we stay on the same domain
+        urlPrefix = "";
       }
 
-      if (isNotFoundError(e)) {
-        notFound();
-      }
-
-      throw e;
+      const destinationQueryStr = destinationUrlObj.searchParams.toString();
+      // Make sure that redirect happens to /embed page and pass on embed query param as is for preserving Cal JS API namespace
+      const newDestinationUrl = `${urlPrefix}${destinationUrlObj.pathname}/embed?${
+        destinationQueryStr ? `${destinationQueryStr}&` : ""
+      }layout=${layout}&embed=${embed}`;
+      redirect(newDestinationUrl);
     }
+
+    if ("notFound" in ssrResponse) {
+      notFound();
+    }
+
+    return {
+      ...ssrResponse.props,
+      ...("trpcState" in ssrResponse.props && {
+        dehydratedState: ssrResponse.props.trpcState,
+      }),
+      isEmbed: true,
+    };
   };
-}
+
+export default withEmbedSsrAppDir;

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

@@ -1,12 +1,9 @@
-import { withAppDirSsr } from "app/WithAppDirSsr";
 import withEmbedSsrAppDir from "app/WithEmbedSSR";
 import { WithLayout } from "app/layoutHOC";
 
 import OldPage from "~/bookings/views/bookings-single-view";
 import { getServerSideProps, type PageProps } from "~/bookings/views/bookings-single-view.getServerSideProps";
 
-const getData = withAppDirSsr<PageProps>(getServerSideProps);
-
-const getEmbedData = withEmbedSsrAppDir(getData);
+const getEmbedData = withEmbedSsrAppDir<PageProps>(getServerSideProps);
 
 export default WithLayout({ getLayout: null, getData: getEmbedData, Page: OldPage });

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

@@ -1,4 +1,3 @@
-import { withAppDirSsr } from "app/WithAppDirSsr";
 import withEmbedSsrAppDir from "app/WithEmbedSSR";
 import { WithLayout } from "app/layoutHOC";
 
@@ -6,10 +5,6 @@ import { getServerSideProps } from "@server/lib/[user]/[type]/getServerSideProps
 
 import LegacyPage, { type PageProps } from "~/users/views/users-type-public-view";
 
-export { generateMetadata } from "../page";
-
-const getData = withAppDirSsr<PageProps>(getServerSideProps);
-
-const getEmbedData = withEmbedSsrAppDir(getData);
+const getEmbedData = withEmbedSsrAppDir<PageProps>(getServerSideProps);
 
 export default WithLayout({ getLayout: null, getData: getEmbedData, Page: LegacyPage })<"P">;

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

@@ -1,4 +1,3 @@
-import { withAppDirSsr } from "app/WithAppDirSsr";
 import withEmbedSsrAppDir from "app/WithEmbedSSR";
 import { WithLayout } from "app/layoutHOC";
 
@@ -7,10 +6,6 @@ import { getServerSideProps } from "@server/lib/[user]/getServerSideProps";
 import type { PageProps as UserPageProps } from "~/users/views/users-public-view";
 import LegacyPage from "~/users/views/users-public-view";
 
-export { generateMetadata } from "../page";
-
-const getData = withAppDirSsr<UserPageProps>(getServerSideProps);
-
-const getEmbedData = withEmbedSsrAppDir(getData);
+const getEmbedData = withEmbedSsrAppDir<UserPageProps>(getServerSideProps);
 
 export default WithLayout({ getLayout: null, getData: getEmbedData, Page: LegacyPage })<"P">;

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

@@ -1,12 +1,10 @@
 import { type PageProps } from "@pages/org/[orgSlug]/[user]/[type]";
 import Page from "@pages/org/[orgSlug]/[user]/[type]/embed";
-import { withAppDirSsr } from "app/WithAppDirSsr";
 import withEmbedSsrAppDir from "app/WithEmbedSSR";
 import { WithLayout } from "app/layoutHOC";
 
 import { getServerSideProps } from "@lib/org/[orgSlug]/[user]/[type]/getServerSideProps";
 
-const getData = withAppDirSsr<PageProps>(getServerSideProps);
-const getEmbedData = withEmbedSsrAppDir(getData);
+const getEmbedData = withEmbedSsrAppDir<PageProps>(getServerSideProps);
 
 export default WithLayout({ getLayout: null, getData: getEmbedData, isBookingPage: true, Page });

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

@@ -1,11 +1,8 @@
 import { getServerSideProps, type PageProps } from "@pages/org/[orgSlug]/[user]";
 import Page from "@pages/org/[orgSlug]/[user]/embed";
-import { withAppDirSsr } from "app/WithAppDirSsr";
 import withEmbedSsrAppDir from "app/WithEmbedSSR";
 import { WithLayout } from "app/layoutHOC";
 
-const getData = withAppDirSsr<PageProps>(getServerSideProps);
-
-const getEmbedData = withEmbedSsrAppDir(getData);
+const getEmbedData = withEmbedSsrAppDir<PageProps>(getServerSideProps);
 
 export default WithLayout({ getLayout: null, getData: getEmbedData, isBookingPage: true, Page });

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

@@ -1,28 +1,14 @@
-import { withAppDirSsr } from "app/WithAppDirSsr";
 import withEmbedSsrAppDir from "app/WithEmbedSSR";
 import type { PageProps as _PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import { cookies, headers } from "next/headers";
 
-import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 import { getServerSideProps } from "@lib/team/[slug]/getServerSideProps";
 
 import type { PageProps } from "~/team/team-view";
 import TeamPage from "~/team/team-view";
 
-const getData = withAppDirSsr<PageProps>(getServerSideProps);
-
-export const generateMetadata = async ({ params, searchParams }: _PageProps) => {
-  const props = await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
-
-  return await _generateMetadata(
-    (t) => props.team.name || t("nameless_team"),
-    (t) => props.team.name || t("nameless_team")
-  );
-};
-
-const getEmbedData = withEmbedSsrAppDir(getData);
+const getEmbedData = withEmbedSsrAppDir<PageProps>(getServerSideProps);
 
 export default WithLayout({
   Page: TeamPage,

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

@@ -1,43 +1,13 @@
-import { withAppDirSsr } from "app/WithAppDirSsr";
 import withEmbedSsrAppDir from "app/WithEmbedSSR";
 import type { PageProps as _PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import { cookies, headers } from "next/headers";
 
-import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
-import { EventRepository } from "@calcom/lib/server/repository/event";
-
-import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 import { getServerSideProps } from "@lib/team/[slug]/[type]/getServerSideProps";
 
 import type { PageProps } from "~/team/type-view";
 import LegacyPage from "~/team/type-view";
 
-export const generateMetadata = async ({ params, searchParams }: _PageProps) => {
-  const legacyCtx = buildLegacyCtx(headers(), cookies(), params, searchParams);
-  const props = await getData(legacyCtx);
-  const { user: username, slug: eventSlug, booking } = props;
-  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(legacyCtx.req, legacyCtx.params?.orgSlug);
-
-  const event = await EventRepository.getPublicEvent({
-    username,
-    eventSlug,
-    isTeamEvent: true,
-    org: isValidOrgDomain ? currentOrgDomain : null,
-    fromRedirectOfNonOrgLink: legacyCtx.query.orgRedirection === "true",
-  });
-
-  const profileName = event?.profile?.name ?? "";
-  const title = event?.title ?? "";
-
-  return await _generateMetadata(
-    (t) => `${booking?.uid && !!booking ? t("reschedule") : ""} ${title} | ${profileName}`,
-    (t) => `${booking?.uid ? t("reschedule") : ""} ${title}`
-  );
-};
-
-const getData = withAppDirSsr<PageProps>(getServerSideProps);
-const getEmbedData = withEmbedSsrAppDir(getData);
+const getEmbedData = withEmbedSsrAppDir<PageProps>(getServerSideProps);
 
 export default WithLayout({ getLayout: null, getData: getEmbedData, Page: LegacyPage })<"P">;

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

@@ -3,24 +3,12 @@ import withEmbedSsrAppDir from "app/WithEmbedSSR";
 import type { PageProps as _PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import { cookies, headers } from "next/headers";
 
-import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 import { getServerSideProps } from "@lib/team/[slug]/getServerSideProps";
 
 import type { PageProps } from "~/team/team-view";
 import LegacyPage from "~/team/team-view";
 
-export const generateMetadata = async ({ params, searchParams }: _PageProps) => {
-  const props = await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
-
-  return await _generateMetadata(
-    (t) => props.team.name || t("nameless_team"),
-    (t) => props.team.name || t("nameless_team")
-  );
-};
-
-const getData = withAppDirSsr<PageProps>(getServerSideProps);
-const getEmbedData = withEmbedSsrAppDir(getData);
+const getEmbedData = withEmbedSsrAppDir<PageProps>(getServerSideProps);
 
 export default WithLayout({ getLayout: null, getData: getEmbedData, Page: LegacyPage })<"P">;

apps/web/app/reschedule/[uid]/embed/page.tsx

@@ -1,4 +1,3 @@
-import { withAppDirSsr } from "app/WithAppDirSsr";
 import withEmbedSsrAppDir from "app/WithEmbedSSR";
 import type { PageProps } from "app/_types";
 import { cookies, headers } from "next/headers";
@@ -6,8 +5,7 @@ import { cookies, headers } from "next/headers";
 import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 import { getServerSideProps } from "@lib/reschedule/[uid]/getServerSideProps";
 
-const getData = withAppDirSsr(getServerSideProps);
-const getEmbedData = withEmbedSsrAppDir(getData);
+const getEmbedData = withEmbedSsrAppDir(getServerSideProps);
 
 const Page = async ({ params, searchParams }: PageProps) => {
   const legacyCtx = buildLegacyCtx(headers(), cookies(), params, searchParams);

apps/web/lib/d/[link]/[slug]/getServerSideProps.tsx

@@ -12,7 +12,7 @@ import { RedirectType } from "@calcom/prisma/enums";
 
 import { getTemporaryOrgRedirect } from "@lib/getTemporaryOrgRedirect";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
-import type { EmbedProps } from "@lib/withEmbedSsr";
+import type { EmbedProps } from "app/WithEmbedSSR";
 
 export type PageProps = inferSSRProps<typeof getServerSideProps> & EmbedProps;
 

apps/web/modules/org/[orgSlug]/instant-meeting/team/[slug]/[type]/instant-meeting-view.tsx

@@ -6,7 +6,7 @@ import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
 
 import type { getServerSideProps } from "@lib/org/[orgSlug]/instant-meeting/team/[slug]/[type]/getServerSideProps";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
-import type { EmbedProps } from "@lib/withEmbedSsr";
+import type { EmbedProps } from "app/WithEmbedSSR";
 
 export type PageProps = inferSSRProps<typeof getServerSideProps> & EmbedProps;
 

apps/web/modules/team/type-view.tsx

@@ -8,7 +8,7 @@ import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
 
 import type { getServerSideProps } from "@lib/team/[slug]/[type]/getServerSideProps";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
-import type { EmbedProps } from "@lib/withEmbedSsr";
+import type { EmbedProps } from "app/WithEmbedSSR";
 
 export type PageProps = inferSSRProps<typeof getServerSideProps> & EmbedProps;
 

apps/web/modules/users/views/users-type-public-view.tsx

@@ -7,7 +7,7 @@ import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/
 import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
-import type { EmbedProps } from "@lib/withEmbedSsr";
+import type { EmbedProps } from "app/WithEmbedSSR";
 
 import type { getServerSideProps } from "@server/lib/[user]/[type]/getServerSideProps";
 

apps/web/pagesAndRewritePaths.js

@@ -24,6 +24,7 @@ let pages = (exports.pages = glob
         "global-error",
         "WithAppDirSsr",
         "WithEmbedSSR",
+        "WithEmbedSSR.test",
       ].some((prefix) => v.startsWith(prefix))
   ));
 

apps/web/server/lib/[user]/getServerSideProps.ts

@@ -18,7 +18,7 @@ import type { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 import type { UserProfile } from "@calcom/types/UserProfile";
 
 import { getTemporaryOrgRedirect } from "@lib/getTemporaryOrgRedirect";
-import type { EmbedProps } from "@lib/withEmbedSsr";
+import type { EmbedProps } from "app/WithEmbedSSR";
 
 import { ssrInit } from "@server/lib/ssr";