Fix reschedule embed (#5861)

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

apps/web/lib/withEmbedSsr.tsx

@@ -7,6 +7,29 @@ export type EmbedProps = {
 export default function withEmbedSsr(getServerSideProps: GetServerSideProps) {
   return async (context: GetServerSidePropsContext): Promise<GetServerSidePropsResult<EmbedProps>> => {
     const ssrResponse = await getServerSideProps(context);
+    const embed = context.query.embed;
+
+    if ("redirect" in ssrResponse) {
+      // Use a dummy URL https://base as the fallback base URL so that URL parsing works for relative URLs as well.
+      const destinationUrlObj = new URL(ssrResponse.redirect.destination, "https://base");
+
+      // Make sure that redirect happens to /embed page and pass on embed query param as is for preserving Cal JS API namespace
+      const newDestinationUrl =
+        destinationUrlObj.pathname +
+        "/embed?" +
+        destinationUrlObj.searchParams.toString() +
+        "&embed=" +
+        embed;
+
+      return {
+        ...ssrResponse,
+        redirect: {
+          ...ssrResponse.redirect,
+          destination: newDestinationUrl,
+        },
+      };
+    }
+
     if (!("props" in ssrResponse)) {
       return ssrResponse;
     }

apps/web/pages/_document.tsx

@@ -3,10 +3,9 @@ import Document, { DocumentContext, Head, Html, Main, NextScript, DocumentProps
 type Props = Record<string, unknown> & DocumentProps;
 
 function toRunBeforeReactOnClient() {
-  const calEmbedMode =
-    location.search.includes("embed=") ||
-    /* Iframe Name */
-    window.name.includes("cal-embed");
+  const calEmbedMode = typeof new URL(document.URL).searchParams.get("embed") === "string";
+  /* Iframe Name */
+  window.name.includes("cal-embed");
 
   window.isEmbed = () => {
     // Once an embed mode always an embed mode

apps/web/pages/reschedule/[uid].tsx

@@ -42,6 +42,8 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   if (!booking) {
     return {
       notFound: true,
+    } as {
+      notFound: true;
     };
   }
 
@@ -49,6 +51,8 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
     // TODO: Show something in UI to let user know that this booking is not rescheduleable.
     return {
       notFound: true,
+    } as {
+      notFound: true;
     };
   }
 
@@ -62,7 +66,6 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       : booking.user?.username || "rick") /* This shouldn't happen */ +
     "/" +
     eventType?.slug;
-
   return {
     redirect: {
       destination: "/" + eventPage + "?rescheduleUid=" + context.query.uid,

apps/web/pages/reschedule/[uid]/embed.tsx

@@ -0,0 +1,7 @@
+import withEmbedSsr from "@lib/withEmbedSsr";
+
+import { getServerSideProps as _getServerSideProps } from "../[uid]";
+
+export { default } from "../[uid]";
+
+export const getServerSideProps = withEmbedSsr(_getServerSideProps);

packages/embeds/embed-core/index.html

@@ -88,6 +88,7 @@
       <button data-cal-namespace="popupTeamLinkLightTheme" data-cal-config='{"theme":"light"}' data-cal-link="team/seeded-team/collective-seeded-team-event">Book with Test Team[Light Theme]</button>
       <button data-cal-namespace="popupTeamLinkDarkTheme" data-cal-config='{"theme":"dark"}' data-cal-link="team/seeded-team/collective-seeded-team-event">Book with Test Team[Dark Theme]</button>
       <button data-cal-namespace="popupTeamLinksList" data-cal-link="team/seeded-team/">See Team Links [Auto Theme]</button>
+      <button data-cal-namespace="popupReschedule" data-cal-link="reschedule/qm3kwt3aTnVD7vmP9tiT2f">Reschedule Event[Auto Theme]</button>
       <button data-cal-namespace="popupPaidEvent" data-cal-link="pro/paid">Book Paid Event [Auto Theme]</button>
       <button data-cal-namespace="routingFormAuto" data-cal-link="forms/948ae412-d995-4865-875a-48302588de03">Book through Routing Form [Auto Theme]</button>
       <button data-cal-namespace="routingFormDark" data-cal-config='{"theme":"dark"}' data-cal-link="forms/948ae412-d995-4865-875a-48302588de03">Book through Routing Form [Dark Theme]</button>
@@ -430,6 +431,12 @@
         debug: 1,
         origin: "http://localhost:3000",
       })
+      
+      Cal('init', 'popupReschedule', {
+        debug: 1,
+        origin: "http://localhost:3000",
+      })
+
       Cal('init', 'popupAutoTheme', {
         debug: 1,
         origin: "http://localhost:3000",

packages/prisma/seed.ts

@@ -242,6 +242,14 @@ async function main() {
             endTime: dayjs().add(2, "day").add(30, "minutes").toDate(),
             status: BookingStatus.PENDING,
           },
+          {
+            // hardcode UID so that we can easily test rescheduling in embed
+            uid: "qm3kwt3aTnVD7vmP9tiT2f",
+            title: "30min Seeded Booking",
+            startTime: dayjs().add(3, "day").toDate(),
+            endTime: dayjs().add(3, "day").add(30, "minutes").toDate(),
+            status: BookingStatus.PENDING,
+          },
         ],
       },
       {