first commit

calcom/apps/web/lib/QueryCell.tsx

@@ -0,0 +1,80 @@
+import type {
+  QueryObserverPendingResult,
+  QueryObserverRefetchErrorResult,
+  QueryObserverSuccessResult,
+  QueryObserverLoadingErrorResult,
+  UseQueryResult,
+} from "@tanstack/react-query";
+import type { ReactNode } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Alert, Loader } from "@calcom/ui";
+
+type ErrorLike = {
+  message: string;
+};
+type JSXElementOrNull = JSX.Element | null;
+
+interface QueryCellOptionsBase<TData, TError extends ErrorLike> {
+  query: UseQueryResult<TData, TError>;
+  customLoader?: ReactNode;
+  error?: (
+    query: QueryObserverLoadingErrorResult<TData, TError> | QueryObserverRefetchErrorResult<TData, TError>
+  ) => JSXElementOrNull;
+  loading?: (query: QueryObserverPendingResult<TData, TError> | null) => JSXElementOrNull;
+}
+
+interface QueryCellOptionsNoEmpty<TData, TError extends ErrorLike>
+  extends QueryCellOptionsBase<TData, TError> {
+  success: (query: QueryObserverSuccessResult<TData, TError>) => JSXElementOrNull;
+}
+
+interface QueryCellOptionsWithEmpty<TData, TError extends ErrorLike>
+  extends QueryCellOptionsBase<TData, TError> {
+  success: (query: QueryObserverSuccessResult<NonNullable<TData>, TError>) => JSXElementOrNull;
+  /**
+   * If there's no data (`null`, `undefined`, or `[]`), render this component
+   */
+  empty: (query: QueryObserverSuccessResult<TData, TError>) => JSXElementOrNull;
+}
+
+export function QueryCell<TData, TError extends ErrorLike>(
+  opts: QueryCellOptionsWithEmpty<TData, TError>
+): JSXElementOrNull;
+export function QueryCell<TData, TError extends ErrorLike>(
+  opts: QueryCellOptionsNoEmpty<TData, TError>
+): JSXElementOrNull;
+/** @deprecated Use `trpc.useQuery` instead. */
+export function QueryCell<TData, TError extends ErrorLike>(
+  opts: QueryCellOptionsNoEmpty<TData, TError> | QueryCellOptionsWithEmpty<TData, TError>
+) {
+  const { query } = opts;
+  const { isLocaleReady } = useLocale();
+  const StatusLoader = opts.customLoader || <Loader />; // Fixes edge case where this can return null form query cell
+
+  if (!isLocaleReady) {
+    return opts.loading?.(query.status === "pending" ? query : null) ?? StatusLoader;
+  }
+  if (query.status === "pending") {
+    return opts.loading?.(query) ?? StatusLoader;
+  }
+
+  if (query.status === "success") {
+    if ("empty" in opts && (query.data == null || (Array.isArray(query.data) && query.data.length === 0))) {
+      return opts.empty(query);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return opts.success(query as any);
+  }
+
+  if (query.status === "error") {
+    return (
+      opts.error?.(query) ?? (
+        <Alert severity="error" title="Something went wrong" message={query.error.message} />
+      )
+    );
+  }
+
+  // impossible state
+  return null;
+}

calcom/apps/web/lib/app-providers-app-dir.tsx

@@ -0,0 +1,298 @@
+import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { TrpcProvider } from "app/_trpc/trpc-provider";
+import { dir } from "i18next";
+import type { Session } from "next-auth";
+import { SessionProvider, useSession } from "next-auth/react";
+import { EventCollectionProvider } from "next-collect/client";
+import { appWithTranslation, type SSRConfig } from "next-i18next";
+import { ThemeProvider } from "next-themes";
+import type { AppProps as NextAppProps } from "next/app";
+import type { ReadonlyURLSearchParams } from "next/navigation";
+import { useSearchParams } from "next/navigation";
+import { useEffect, type ReactNode } from "react";
+
+import { OrgBrandingProvider } from "@calcom/features/ee/organizations/context/provider";
+import DynamicHelpscoutProvider from "@calcom/features/ee/support/lib/helpscout/providerDynamic";
+import DynamicIntercomProvider from "@calcom/features/ee/support/lib/intercom/providerDynamic";
+import { FeatureProvider } from "@calcom/features/flags/context/provider";
+import { useFlags } from "@calcom/features/flags/hooks";
+import { MetaProvider } from "@calcom/ui";
+
+import useIsBookingPage from "@lib/hooks/useIsBookingPage";
+import type { WithNonceProps } from "@lib/withNonce";
+
+import { useViewerI18n } from "@components/I18nLanguageHandler";
+import type { PageWrapperProps } from "@components/PageWrapperAppDir";
+
+// Workaround for https://github.com/vercel/next.js/issues/8592
+export type AppProps = Omit<
+  NextAppProps<
+    WithNonceProps<{
+      themeBasis?: string;
+      session: Session;
+    }>
+  >,
+  "Component"
+> & {
+  Component: NextAppProps["Component"] & {
+    requiresLicense?: boolean;
+    isThemeSupported?: boolean;
+    isBookingPage?: boolean | ((arg: { router: NextAppProps["router"] }) => boolean);
+    getLayout?: (page: React.ReactElement) => ReactNode;
+    PageWrapper?: (props: AppProps) => JSX.Element;
+  };
+
+  /** Will be defined only is there was an error */
+  err?: Error;
+};
+
+const getEmbedNamespace = (searchParams: ReadonlyURLSearchParams) => {
+  // Mostly embed query param should be available on server. Use that there.
+  // Use the most reliable detection on client
+  return typeof window !== "undefined" ? window.getEmbedNamespace() : searchParams.get("embed") ?? null;
+};
+
+// @ts-expect-error appWithTranslation expects AppProps
+const AppWithTranslationHoc = appWithTranslation(({ children }) => <>{children}</>);
+
+const CustomI18nextProvider = (props: { children: React.ReactElement; i18n?: SSRConfig }) => {
+  /**
+   * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
+   **/
+  // @TODO
+
+  const session = useSession();
+
+  // window.document.documentElement.lang can be empty in some cases, for instance when we rendering GlobalError (not-found) page.
+  const locale =
+    session?.data?.user.locale ?? typeof window !== "undefined"
+      ? window.document.documentElement.lang || "en"
+      : "en";
+
+  useEffect(() => {
+    try {
+      // @ts-expect-error TS2790: The operand of a 'delete' operator must be optional.
+      delete window.document.documentElement["lang"];
+
+      window.document.documentElement.lang = locale;
+
+      // Next.js writes the locale to the same attribute
+      // https://github.com/vercel/next.js/blob/1609da2d9552fed48ab45969bdc5631230c6d356/packages/next/src/shared/lib/router/router.ts#L1786
+      // which can result in a race condition
+      // this property descriptor ensures this never happens
+      Object.defineProperty(window.document.documentElement, "lang", {
+        configurable: true,
+        // value: locale,
+        set: function (this) {
+          // empty setter on purpose
+        },
+        get: function () {
+          return locale;
+        },
+      });
+    } catch (error) {
+      console.error(error);
+
+      window.document.documentElement.lang = locale;
+    }
+    window.document.dir = dir(locale);
+  }, [locale]);
+
+  const clientViewerI18n = useViewerI18n(locale);
+  const i18n = clientViewerI18n.data?.i18n ?? props.i18n;
+
+  return (
+    // @ts-expect-error AppWithTranslationHoc expects AppProps
+    <AppWithTranslationHoc pageProps={{ _nextI18Next: i18n?._nextI18Next }}>
+      {props.children}
+    </AppWithTranslationHoc>
+  );
+};
+
+const enum ThemeSupport {
+  // e.g. Login Page
+  None = "none",
+  // Entire App except Booking Pages
+  App = "userConfigured",
+  // Booking Pages(including Routing Forms)
+  Booking = "userConfigured",
+}
+
+type CalcomThemeProps = Readonly<{
+  isBookingPage: boolean;
+  themeBasis: string | null;
+  nonce: string | undefined;
+  isThemeSupported: boolean;
+  children: React.ReactNode;
+}>;
+
+const CalcomThemeProvider = (props: CalcomThemeProps) => {
+  // Use namespace of embed to ensure same namespaced embed are displayed with same theme. This allows different embeds on the same website to be themed differently
+  // One such example is our Embeds Demo and Testing page at http://localhost:3100
+  // Having `getEmbedNamespace` defined on window before react initializes the app, ensures that embedNamespace is available on the first mount and can be used as part of storageKey
+
+  const searchParams = useSearchParams();
+  const embedNamespace = searchParams ? getEmbedNamespace(searchParams) : null;
+  const isEmbedMode = typeof embedNamespace === "string";
+
+  return (
+    <ThemeProvider {...getThemeProviderProps({ ...props, isEmbedMode, embedNamespace })}>
+      {/* Embed Mode can be detected reliably only on client side here as there can be static generated pages as well which can't determine if it's embed mode at backend */}
+      {/* color-scheme makes background:transparent not work in iframe which is required by embed. */}
+      {typeof window !== "undefined" && !isEmbedMode && (
+        <style jsx global>
+          {`
+            .dark {
+              color-scheme: dark;
+            }
+          `}
+        </style>
+      )}
+      {props.children}
+    </ThemeProvider>
+  );
+};
+
+/**
+ * The most important job for this fn is to generate correct storageKey for theme persistenc.
+ * `storageKey` is important because that key is listened for changes(using [`storage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event) event) and any pages opened will change it's theme based on that(as part of next-themes implementation).
+ * Choosing the right storageKey avoids theme flickering caused by another page using different theme
+ * So, we handle all the cases here namely,
+ * - Both Booking Pages, /free/30min and /pro/30min but configured with different themes but being operated together.
+ * - Embeds using different namespace. They can be completely themed different on the same page.
+ * - Embeds using the same namespace but showing different cal.com links with different themes
+ * - Embeds using the same namespace and showing same cal.com links with different themes(Different theme is possible for same cal.com link in case of embed because of theme config available in embed)
+ * - App has different theme then Booking Pages.
+ *
+ * All the above cases have one thing in common, which is the origin and thus localStorage is shared and thus `storageKey` is critical to avoid theme flickering.
+ *
+ * Some things to note:
+ * - There is a side effect of so many factors in `storageKey` that many localStorage keys will be created if a user goes through all these scenarios(e.g like booking a lot of different users)
+ * - Some might recommend disabling localStorage persistence but that doesn't give good UX as then we would default to light theme always for a few seconds before switching to dark theme(if that's the user's preference).
+ * - We can't disable [`storage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event) event handling as well because changing theme in one tab won't change the theme without refresh in other tabs. That's again a bad UX
+ * - Theme flickering becomes infinitely ongoing in case of embeds because of the browser's delay in processing `storage` event within iframes. Consider two embeds simulatenously opened with pages A and B. Note the timeline and keep in mind that it happened
+ *  because 'setItem(A)' and 'Receives storageEvent(A)' allowed executing setItem(B) in b/w because of the delay.
+ *    - t1 -> setItem(A) & Fires storageEvent(A) - On Page A) - Current State(A)
+ *    - t2 -> setItem(B) & Fires storageEvent(B) - On Page B) - Current State(B)
+ *    - t3 -> Receives storageEvent(A) & thus setItem(A) & thus fires storageEvent(A) (On Page B) - Current State(A)
+ *    - t4 -> Receives storageEvent(B) & thus setItem(B) & thus fires storageEvent(B) (On Page A) - Current State(B)
+ *    - ... and so on ...
+ */
+function getThemeProviderProps(props: {
+  isBookingPage: boolean;
+  themeBasis: string | null;
+  nonce: string | undefined;
+  isEmbedMode: boolean;
+  embedNamespace: string | null;
+  isThemeSupported: boolean;
+}) {
+  const themeSupport = props.isBookingPage
+    ? ThemeSupport.Booking
+    : // if isThemeSupported is explicitly false, we don't use theme there
+    props.isThemeSupported === false
+    ? ThemeSupport.None
+    : ThemeSupport.App;
+
+  const isBookingPageThemeSupportRequired = themeSupport === ThemeSupport.Booking;
+
+  if (
+    !process.env.NEXT_PUBLIC_IS_E2E &&
+    (isBookingPageThemeSupportRequired || props.isEmbedMode) &&
+    !props.themeBasis
+  ) {
+    console.warn(
+      "`themeBasis` is required for booking page theme support. Not providing it will cause theme flicker."
+    );
+  }
+
+  const appearanceIdSuffix = props.themeBasis ? `:${props.themeBasis}` : "";
+  const forcedTheme = themeSupport === ThemeSupport.None ? "light" : undefined;
+  let embedExplicitlySetThemeSuffix = "";
+
+  if (typeof window !== "undefined") {
+    const embedTheme = window.getEmbedTheme();
+    if (embedTheme) {
+      embedExplicitlySetThemeSuffix = `:${embedTheme}`;
+    }
+  }
+
+  const storageKey = props.isEmbedMode
+    ? // Same Namespace, Same Organizer but different themes would still work seamless and not cause theme flicker
+      // Even though it's recommended to use different namespaces when you want to theme differently on the same page but if the embeds are on different pages, the problem can still arise
+      `embed-theme-${props.embedNamespace}${appearanceIdSuffix}${embedExplicitlySetThemeSuffix}`
+    : themeSupport === ThemeSupport.App
+    ? "app-theme"
+    : isBookingPageThemeSupportRequired
+    ? `booking-theme${appearanceIdSuffix}`
+    : undefined;
+
+  return {
+    storageKey,
+    forcedTheme,
+    themeSupport,
+    nonce: props.nonce,
+    enableColorScheme: false,
+    enableSystem: themeSupport !== ThemeSupport.None,
+    // next-themes doesn't listen to changes on storageKey. So we need to force a re-render when storageKey changes
+    // This is how login to dashboard soft navigation changes theme from light to dark
+    key: storageKey,
+    attribute: "class",
+  };
+}
+
+function FeatureFlagsProvider({ children }: { children: React.ReactNode }) {
+  const flags = useFlags();
+  return <FeatureProvider value={flags}>{children}</FeatureProvider>;
+}
+
+function useOrgBrandingValues() {
+  const session = useSession();
+  return session?.data?.user.org;
+}
+
+function OrgBrandProvider({ children }: { children: React.ReactNode }) {
+  const orgBrand = useOrgBrandingValues();
+  return <OrgBrandingProvider value={{ orgBrand }}>{children}</OrgBrandingProvider>;
+}
+
+const AppProviders = (props: PageWrapperProps) => {
+  // No need to have intercom on public pages - Good for Page Performance
+  const isBookingPage = useIsBookingPage();
+
+  const RemainingProviders = (
+    <TrpcProvider dehydratedState={props.dehydratedState}>
+      <EventCollectionProvider options={{ apiPath: "/api/collect-events" }}>
+        <SessionProvider>
+          <CustomI18nextProvider i18n={props.i18n}>
+            <TooltipProvider>
+              {/* color-scheme makes background:transparent not work which is required by embed. We need to ensure next-theme adds color-scheme to `body` instead of `html`(https://github.com/pacocoursey/next-themes/blob/main/src/index.tsx#L74). Once that's done we can enable color-scheme support */}
+              <CalcomThemeProvider
+                themeBasis={props.themeBasis}
+                nonce={props.nonce}
+                isThemeSupported={/* undefined gets treated as true */ props.isThemeSupported ?? true}
+                isBookingPage={props.isBookingPage || isBookingPage}>
+                <FeatureFlagsProvider>
+                  <OrgBrandProvider>
+                    <MetaProvider>{props.children}</MetaProvider>
+                  </OrgBrandProvider>
+                </FeatureFlagsProvider>
+              </CalcomThemeProvider>
+            </TooltipProvider>
+          </CustomI18nextProvider>
+        </SessionProvider>
+      </EventCollectionProvider>
+    </TrpcProvider>
+  );
+
+  if (isBookingPage) {
+    return RemainingProviders;
+  }
+
+  return (
+    <DynamicHelpscoutProvider>
+      <DynamicIntercomProvider>{RemainingProviders}</DynamicIntercomProvider>
+    </DynamicHelpscoutProvider>
+  );
+};
+
+export default AppProviders;

calcom/apps/web/lib/app-providers.tsx

@@ -0,0 +1,323 @@
+import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { dir } from "i18next";
+import type { Session } from "next-auth";
+import { SessionProvider, useSession } from "next-auth/react";
+import { EventCollectionProvider } from "next-collect/client";
+import type { SSRConfig } from "next-i18next";
+import { appWithTranslation } from "next-i18next";
+import { ThemeProvider } from "next-themes";
+import type { AppProps as NextAppProps, AppProps as NextJsAppProps } from "next/app";
+import type { ParsedUrlQuery } from "querystring";
+import type { PropsWithChildren, ReactNode } from "react";
+import { useEffect } from "react";
+
+import { OrgBrandingProvider } from "@calcom/features/ee/organizations/context/provider";
+import DynamicHelpscoutProvider from "@calcom/features/ee/support/lib/helpscout/providerDynamic";
+import DynamicIntercomProvider from "@calcom/features/ee/support/lib/intercom/providerDynamic";
+import { FeatureProvider } from "@calcom/features/flags/context/provider";
+import { useFlags } from "@calcom/features/flags/hooks";
+import { MetaProvider } from "@calcom/ui";
+
+import useIsBookingPage from "@lib/hooks/useIsBookingPage";
+import type { WithLocaleProps } from "@lib/withLocale";
+import type { WithNonceProps } from "@lib/withNonce";
+
+import { useViewerI18n } from "@components/I18nLanguageHandler";
+
+const I18nextAdapter = appWithTranslation<
+  NextJsAppProps<SSRConfig> & {
+    children: React.ReactNode;
+  }
+>(({ children }) => <>{children}</>);
+
+// Workaround for https://github.com/vercel/next.js/issues/8592
+export type AppProps = Omit<
+  NextAppProps<
+    WithLocaleProps<
+      WithNonceProps<{
+        themeBasis?: string;
+        session: Session;
+        i18n?: SSRConfig;
+      }>
+    >
+  >,
+  "Component"
+> & {
+  Component: NextAppProps["Component"] & {
+    requiresLicense?: boolean;
+    isThemeSupported?: boolean;
+    isBookingPage?: boolean | ((arg: { router: NextAppProps["router"] }) => boolean);
+    getLayout?: (page: React.ReactElement) => ReactNode;
+    PageWrapper?: (props: AppProps) => JSX.Element;
+  };
+
+  /** Will be defined only is there was an error */
+  err?: Error;
+};
+
+type AppPropsWithChildren = AppProps & {
+  children: ReactNode;
+};
+
+const getEmbedNamespace = (query: ParsedUrlQuery) => {
+  // Mostly embed query param should be available on server. Use that there.
+  // Use the most reliable detection on client
+  return typeof window !== "undefined" ? window.getEmbedNamespace() : (query.embed as string) || null;
+};
+
+// We dont need to pass nonce to the i18n provider - this was causing x2-x3 re-renders on a hard refresh
+type AppPropsWithoutNonce = Omit<AppPropsWithChildren, "pageProps"> & {
+  pageProps: Omit<AppPropsWithChildren["pageProps"], "nonce">;
+};
+
+const CustomI18nextProvider = (props: AppPropsWithoutNonce) => {
+  /**
+   * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
+   **/
+
+  const session = useSession();
+  const locale = session?.data?.user.locale ?? props.pageProps.newLocale;
+
+  useEffect(() => {
+    try {
+      // @ts-expect-error TS2790: The operand of a 'delete' operator must be optional.
+      delete window.document.documentElement["lang"];
+
+      window.document.documentElement.lang = locale;
+
+      // Next.js writes the locale to the same attribute
+      // https://github.com/vercel/next.js/blob/1609da2d9552fed48ab45969bdc5631230c6d356/packages/next/src/shared/lib/router/router.ts#L1786
+      // which can result in a race condition
+      // this property descriptor ensures this never happens
+      Object.defineProperty(window.document.documentElement, "lang", {
+        configurable: true,
+        // value: locale,
+        set: function (this) {
+          // empty setter on purpose
+        },
+        get: function () {
+          return locale;
+        },
+      });
+    } catch (error) {
+      console.error(error);
+
+      window.document.documentElement.lang = locale;
+    }
+
+    window.document.dir = dir(locale);
+  }, [locale]);
+
+  const clientViewerI18n = useViewerI18n(locale);
+  const i18n = clientViewerI18n.data?.i18n ?? props.pageProps.i18n;
+
+  const passedProps = {
+    ...props,
+    pageProps: {
+      ...props.pageProps,
+
+      ...i18n,
+    },
+  };
+
+  return <I18nextAdapter {...passedProps} />;
+};
+
+const enum ThemeSupport {
+  // e.g. Login Page
+  None = "none",
+  // Entire App except Booking Pages
+  App = "appConfigured",
+  // Booking Pages(including Routing Forms)
+  Booking = "bookingConfigured",
+}
+
+type CalcomThemeProps = PropsWithChildren<
+  Pick<AppProps, "router"> &
+    Pick<AppProps["pageProps"], "nonce" | "themeBasis"> &
+    Pick<AppProps["Component"], "isBookingPage" | "isThemeSupported">
+>;
+const CalcomThemeProvider = (props: CalcomThemeProps) => {
+  // Use namespace of embed to ensure same namespaced embed are displayed with same theme. This allows different embeds on the same website to be themed differently
+  // One such example is our Embeds Demo and Testing page at http://localhost:3100
+  // Having `getEmbedNamespace` defined on window before react initializes the app, ensures that embedNamespace is available on the first mount and can be used as part of storageKey
+  const embedNamespace = getEmbedNamespace(props.router.query);
+  const isEmbedMode = typeof embedNamespace === "string";
+
+  const themeProviderProps = getThemeProviderProps({ props, isEmbedMode, embedNamespace });
+
+  return (
+    <ThemeProvider {...themeProviderProps}>
+      {/* Embed Mode can be detected reliably only on client side here as there can be static generated pages as well which can't determine if it's embed mode at backend */}
+      {/* color-scheme makes background:transparent not work in iframe which is required by embed. */}
+      {typeof window !== "undefined" && !isEmbedMode && (
+        <style jsx global>
+          {`
+            .dark {
+              color-scheme: dark;
+            }
+          `}
+        </style>
+      )}
+      {props.children}
+    </ThemeProvider>
+  );
+};
+
+/**
+ * The most important job for this fn is to generate correct storageKey for theme persistenc.
+ * `storageKey` is important because that key is listened for changes(using [`storage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event) event) and any pages opened will change it's theme based on that(as part of next-themes implementation).
+ * Choosing the right storageKey avoids theme flickering caused by another page using different theme
+ * So, we handle all the cases here namely,
+ * - Both Booking Pages, /free/30min and /pro/30min but configured with different themes but being operated together.
+ * - Embeds using different namespace. They can be completely themed different on the same page.
+ * - Embeds using the same namespace but showing different cal.com links with different themes
+ * - Embeds using the same namespace and showing same cal.com links with different themes(Different theme is possible for same cal.com link in case of embed because of theme config available in embed)
+ * - App has different theme then Booking Pages.
+ *
+ * All the above cases have one thing in common, which is the origin and thus localStorage is shared and thus `storageKey` is critical to avoid theme flickering.
+ *
+ * Some things to note:
+ * - There is a side effect of so many factors in `storageKey` that many localStorage keys will be created if a user goes through all these scenarios(e.g like booking a lot of different users)
+ * - Some might recommend disabling localStorage persistence but that doesn't give good UX as then we would default to light theme always for a few seconds before switching to dark theme(if that's the user's preference).
+ * - We can't disable [`storage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event) event handling as well because changing theme in one tab won't change the theme without refresh in other tabs. That's again a bad UX
+ * - Theme flickering becomes infinitely ongoing in case of embeds because of the browser's delay in processing `storage` event within iframes. Consider two embeds simulatenously opened with pages A and B. Note the timeline and keep in mind that it happened
+ *  because 'setItem(A)' and 'Receives storageEvent(A)' allowed executing setItem(B) in b/w because of the delay.
+ *    - t1 -> setItem(A) & Fires storageEvent(A) - On Page A) - Current State(A)
+ *    - t2 -> setItem(B) & Fires storageEvent(B) - On Page B) - Current State(B)
+ *    - t3 -> Receives storageEvent(A) & thus setItem(A) & thus fires storageEvent(A) (On Page B) - Current State(A)
+ *    - t4 -> Receives storageEvent(B) & thus setItem(B) & thus fires storageEvent(B) (On Page A) - Current State(B)
+ *    - ... and so on ...
+ */
+function getThemeProviderProps({
+  props,
+  isEmbedMode,
+  embedNamespace,
+}: {
+  props: Omit<CalcomThemeProps, "children">;
+  isEmbedMode: boolean;
+  embedNamespace: string | null;
+}) {
+  const isBookingPage = (() => {
+    if (typeof props.isBookingPage === "function") {
+      return props.isBookingPage({ router: props.router });
+    }
+    return props.isBookingPage;
+  })();
+
+  const themeSupport = isBookingPage
+    ? ThemeSupport.Booking
+    : // if isThemeSupported is explicitly false, we don't use theme there
+    props.isThemeSupported === false
+    ? ThemeSupport.None
+    : ThemeSupport.App;
+
+  const isBookingPageThemeSupportRequired = themeSupport === ThemeSupport.Booking;
+  const themeBasis = props.themeBasis;
+
+  if (!process.env.NEXT_PUBLIC_IS_E2E && (isBookingPageThemeSupportRequired || isEmbedMode) && !themeBasis) {
+    console.warn(
+      "`themeBasis` is required for booking page theme support. Not providing it will cause theme flicker."
+    );
+  }
+
+  const appearanceIdSuffix = themeBasis ? `:${themeBasis}` : "";
+  const forcedTheme = themeSupport === ThemeSupport.None ? "light" : undefined;
+  let embedExplicitlySetThemeSuffix = "";
+
+  if (typeof window !== "undefined") {
+    const embedTheme = window.getEmbedTheme();
+    if (embedTheme) {
+      embedExplicitlySetThemeSuffix = `:${embedTheme}`;
+    }
+  }
+
+  const storageKey = isEmbedMode
+    ? // Same Namespace, Same Organizer but different themes would still work seamless and not cause theme flicker
+      // Even though it's recommended to use different namespaces when you want to theme differently on the same page but if the embeds are on different pages, the problem can still arise
+      `embed-theme-${embedNamespace}${appearanceIdSuffix}${embedExplicitlySetThemeSuffix}`
+    : themeSupport === ThemeSupport.App
+    ? "app-theme"
+    : isBookingPageThemeSupportRequired
+    ? `booking-theme${appearanceIdSuffix}`
+    : undefined;
+
+  return {
+    storageKey,
+    forcedTheme,
+    themeSupport,
+    nonce: props.nonce,
+    enableColorScheme: false,
+    enableSystem: themeSupport !== ThemeSupport.None,
+    // next-themes doesn't listen to changes on storageKey. So we need to force a re-render when storageKey changes
+    // This is how login to dashboard soft navigation changes theme from light to dark
+    key: storageKey,
+    attribute: "class",
+  };
+}
+
+function FeatureFlagsProvider({ children }: { children: React.ReactNode }) {
+  const flags = useFlags();
+  return <FeatureProvider value={flags}>{children}</FeatureProvider>;
+}
+
+function useOrgBrandingValues() {
+  const session = useSession();
+  return session?.data?.user.org;
+}
+
+function OrgBrandProvider({ children }: { children: React.ReactNode }) {
+  const orgBrand = useOrgBrandingValues();
+  return <OrgBrandingProvider value={{ orgBrand }}>{children}</OrgBrandingProvider>;
+}
+
+const AppProviders = (props: AppPropsWithChildren) => {
+  // No need to have intercom on public pages - Good for Page Performance
+  const isBookingPage = useIsBookingPage();
+  const { pageProps, ...rest } = props;
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { nonce, ...restPageProps } = pageProps;
+  const propsWithoutNonce = {
+    pageProps: {
+      ...restPageProps,
+    },
+    ...rest,
+  };
+
+  const RemainingProviders = (
+    <EventCollectionProvider options={{ apiPath: "/api/collect-events" }}>
+      <SessionProvider session={pageProps.session ?? undefined}>
+        <CustomI18nextProvider {...propsWithoutNonce}>
+          <TooltipProvider>
+            {/* color-scheme makes background:transparent not work which is required by embed. We need to ensure next-theme adds color-scheme to `body` instead of `html`(https://github.com/pacocoursey/next-themes/blob/main/src/index.tsx#L74). Once that's done we can enable color-scheme support */}
+            <CalcomThemeProvider
+              themeBasis={props.pageProps.themeBasis}
+              nonce={props.pageProps.nonce}
+              isThemeSupported={props.Component.isThemeSupported}
+              isBookingPage={props.Component.isBookingPage || isBookingPage}
+              router={props.router}>
+              <FeatureFlagsProvider>
+                <OrgBrandProvider>
+                  <MetaProvider>{props.children}</MetaProvider>
+                </OrgBrandProvider>
+              </FeatureFlagsProvider>
+            </CalcomThemeProvider>
+          </TooltipProvider>
+        </CustomI18nextProvider>
+      </SessionProvider>
+    </EventCollectionProvider>
+  );
+
+  if (isBookingPage) {
+    return RemainingProviders;
+  }
+
+  return (
+    <DynamicHelpscoutProvider>
+      <DynamicIntercomProvider>{RemainingProviders}</DynamicIntercomProvider>
+    </DynamicHelpscoutProvider>
+  );
+};
+
+export default AppProviders;

calcom/apps/web/lib/apps/[slug]/getStaticProps.tsx

@@ -0,0 +1,94 @@
+import fs from "fs";
+import matter from "gray-matter";
+import MarkdownIt from "markdown-it";
+import type { GetStaticPropsContext } from "next";
+import path from "path";
+import { z } from "zod";
+
+import { getAppWithMetadata } from "@calcom/app-store/_appRegistry";
+import { getAppAssetFullPath } from "@calcom/app-store/getAppAssetFullPath";
+import { IS_PRODUCTION } from "@calcom/lib/constants";
+import prisma from "@calcom/prisma";
+
+const md = new MarkdownIt("default", { html: true, breaks: true });
+
+export const sourceSchema = z.object({
+  content: z.string(),
+  data: z.object({
+    description: z.string().optional(),
+    items: z
+      .array(
+        z.union([
+          z.string(),
+          z.object({
+            iframe: z.object({ src: z.string() }),
+          }),
+        ])
+      )
+      .optional(),
+  }),
+});
+
+export const getStaticProps = async (ctx: GetStaticPropsContext) => {
+  if (typeof ctx.params?.slug !== "string") return { notFound: true } as const;
+
+  const appMeta = await getAppWithMetadata({
+    slug: ctx.params?.slug,
+  });
+
+  const appFromDb = await prisma.app.findUnique({
+    where: { slug: ctx.params.slug.toLowerCase() },
+  });
+
+  const isAppAvailableInFileSystem = appMeta;
+  const isAppDisabled = isAppAvailableInFileSystem && (!appFromDb || !appFromDb.enabled);
+
+  if (!IS_PRODUCTION && isAppDisabled) {
+    return {
+      props: {
+        isAppDisabled: true as const,
+        data: {
+          ...appMeta,
+        },
+      },
+    };
+  }
+
+  if (!appFromDb || !appMeta || isAppDisabled) return { notFound: true } as const;
+
+  const isTemplate = appMeta.isTemplate;
+  const appDirname = path.join(isTemplate ? "templates" : "", appFromDb.dirName);
+  const README_PATH = path.join(process.cwd(), "..", "..", `packages/app-store/${appDirname}/DESCRIPTION.md`);
+  const postFilePath = path.join(README_PATH);
+  let source = "";
+
+  try {
+    source = fs.readFileSync(postFilePath).toString();
+    source = source.replace(/{DESCRIPTION}/g, appMeta.description);
+  } catch (error) {
+    /* If the app doesn't have a README we fallback to the package description */
+    console.log(`No DESCRIPTION.md provided for: ${appDirname}`);
+    source = appMeta.description;
+  }
+
+  const result = matter(source);
+  const { content, data } = sourceSchema.parse({ content: result.content, data: result.data });
+  if (data.items) {
+    data.items = data.items.map((item) => {
+      if (typeof item === "string") {
+        return getAppAssetFullPath(item, {
+          dirName: appMeta.dirName,
+          isTemplate: appMeta.isTemplate,
+        });
+      }
+      return item;
+    });
+  }
+  return {
+    props: {
+      isAppDisabled: false as const,
+      source: { content, data },
+      data: appMeta,
+    },
+  };
+};

calcom/apps/web/lib/apps/categories/[category]/getStaticProps.tsx

@@ -0,0 +1,31 @@
+import type { GetStaticPropsContext } from "next";
+
+import { getAppRegistry } from "@calcom/app-store/_appRegistry";
+import prisma from "@calcom/prisma";
+import type { AppCategories } from "@calcom/prisma/enums";
+
+export const getStaticProps = async (context: GetStaticPropsContext) => {
+  const category = context.params?.category as AppCategories;
+
+  const appQuery = await prisma.app.findMany({
+    where: {
+      categories: {
+        has: category,
+      },
+    },
+    select: {
+      slug: true,
+    },
+  });
+
+  const dbAppsSlugs = appQuery.map((category) => category.slug);
+
+  const appStore = await getAppRegistry();
+
+  const apps = appStore.filter((app) => dbAppsSlugs.includes(app.slug));
+  return {
+    props: {
+      apps,
+    },
+  };
+};

calcom/apps/web/lib/apps/categories/getServerSideProps.tsx

@@ -0,0 +1,35 @@
+import type { GetServerSidePropsContext } from "next";
+
+import { getAppRegistry, getAppRegistryWithCredentials } from "@calcom/app-store/_appRegistry";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+
+import { ssrInit } from "@server/lib/ssr";
+
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const { req } = context;
+
+  const ssr = await ssrInit(context);
+
+  const session = await getServerSession({ req });
+
+  let appStore;
+  if (session?.user?.id) {
+    appStore = await getAppRegistryWithCredentials(session.user.id);
+  } else {
+    appStore = await getAppRegistry();
+  }
+
+  const categories = appStore.reduce((c, app) => {
+    for (const category of app.categories) {
+      c[category] = c[category] ? c[category] + 1 : 1;
+    }
+    return c;
+  }, {} as Record<string, number>);
+
+  return {
+    props: {
+      categories: Object.entries(categories).map(([name, count]) => ({ name, count })),
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};

calcom/apps/web/lib/apps/getServerSideProps.tsx

@@ -0,0 +1,52 @@
+import type { GetServerSidePropsContext } from "next";
+
+import { getAppRegistry, getAppRegistryWithCredentials } from "@calcom/app-store/_appRegistry";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import type { UserAdminTeams } from "@calcom/lib/server/repository/user";
+import { UserRepository } from "@calcom/lib/server/repository/user";
+import type { AppCategories } from "@calcom/prisma/enums";
+
+import { ssrInit } from "@server/lib/ssr";
+
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const { req } = context;
+
+  const ssr = await ssrInit(context);
+
+  const session = await getServerSession({ req });
+
+  let appStore, userAdminTeams: UserAdminTeams;
+  if (session?.user?.id) {
+    userAdminTeams = await UserRepository.getUserAdminTeams(session.user.id);
+    appStore = await getAppRegistryWithCredentials(session.user.id, userAdminTeams);
+  } else {
+    appStore = await getAppRegistry();
+    userAdminTeams = [];
+  }
+
+  const categoryQuery = appStore.map(({ categories }) => ({
+    categories: categories || [],
+  }));
+  const categories = categoryQuery.reduce((c, app) => {
+    for (const category of app.categories) {
+      c[category] = c[category] ? c[category] + 1 : 1;
+    }
+    return c;
+  }, {} as Record<string, number>);
+
+  return {
+    props: {
+      categories: Object.entries(categories)
+        .map(([name, count]): { name: AppCategories; count: number } => ({
+          name: name as AppCategories,
+          count,
+        }))
+        .sort(function (a, b) {
+          return b.count - a.count;
+        }),
+      appStore,
+      userAdminTeams,
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};

calcom/apps/web/lib/apps/installed/[category]/getServerSideProps.tsx

@@ -0,0 +1,43 @@
+import type { GetServerSidePropsContext } from "next";
+import { z } from "zod";
+
+import { AppCategories } from "@calcom/prisma/enums";
+
+export type querySchemaType = z.infer<typeof querySchema>;
+
+export const querySchema = z.object({
+  category: z.nativeEnum(AppCategories),
+});
+
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+  // get return-to cookie and redirect if needed
+  const { cookies } = ctx.req;
+
+  const returnTo = cookies["return-to"];
+
+  if (cookies && returnTo) {
+    ctx.res.setHeader("Set-Cookie", "return-to=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT");
+    const redirect = {
+      redirect: {
+        destination: `${returnTo}`,
+        permanent: false,
+      },
+    } as const;
+
+    return redirect;
+  }
+
+  const params = querySchema.safeParse(ctx.params);
+
+  if (!params.success) {
+    const notFound = { notFound: true } as const;
+
+    return notFound;
+  }
+
+  return {
+    props: {
+      category: params.data.category,
+    },
+  };
+}

calcom/apps/web/lib/apps/installed/getServerSideProps.tsx

@@ -0,0 +1,3 @@
+export async function getServerSideProps() {
+  return { redirect: { permanent: false, destination: "/apps/installed/calendar" } };
+}

calcom/apps/web/lib/asStringOrNull.tsx

@@ -0,0 +1,27 @@
+/** @deprecated use zod instead  */
+export function asStringOrNull(str: unknown) {
+  return typeof str === "string" ? str : null;
+}
+
+/** @deprecated use zod instead  */
+export function asStringOrUndefined(str: unknown) {
+  return typeof str === "string" ? str : undefined;
+}
+
+/** @deprecated use zod instead  */
+export function asNumberOrUndefined(str: unknown) {
+  return typeof str === "string" ? parseInt(str) : undefined;
+}
+
+/** @deprecated use zod instead  */
+export function asNumberOrThrow(str: unknown) {
+  return parseInt(asStringOrThrow(str));
+}
+
+/** @deprecated use zod instead  */
+export function asStringOrThrow(str: unknown): string {
+  if (typeof str !== "string") {
+    throw new Error(`Expected "string" - got ${typeof str}`);
+  }
+  return str;
+}

calcom/apps/web/lib/booking.ts

@@ -0,0 +1,187 @@
+import { getBookingFieldsWithSystemFields } from "@calcom/features/bookings/lib/getBookingFields";
+import { bookingResponsesDbSchema } from "@calcom/features/bookings/lib/getBookingResponsesSchema";
+import { workflowSelect } from "@calcom/features/ee/workflows/lib/getAllWorkflows";
+import prisma from "@calcom/prisma";
+import type { Prisma } from "@calcom/prisma/client";
+import { BookingStatus } from "@calcom/prisma/enums";
+import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+
+export const getEventTypesFromDB = async (id: number) => {
+  const userSelect = {
+    id: true,
+    name: true,
+    username: true,
+    hideBranding: true,
+    theme: true,
+    brandColor: true,
+    darkBrandColor: true,
+    email: true,
+    timeZone: true,
+  };
+  const eventType = await prisma.eventType.findUnique({
+    where: {
+      id,
+    },
+    select: {
+      id: true,
+      title: true,
+      description: true,
+      length: true,
+      eventName: true,
+      recurringEvent: true,
+      requiresConfirmation: true,
+      userId: true,
+      successRedirectUrl: true,
+      customInputs: true,
+      locations: true,
+      price: true,
+      currency: true,
+      bookingFields: true,
+      disableGuests: true,
+      timeZone: true,
+      owner: {
+        select: userSelect,
+      },
+      users: {
+        select: userSelect,
+      },
+      hosts: {
+        select: {
+          user: {
+            select: userSelect,
+          },
+        },
+      },
+      team: {
+        select: {
+          slug: true,
+          name: true,
+          hideBranding: true,
+        },
+      },
+      workflows: {
+        select: {
+          workflow: {
+            select: workflowSelect,
+          },
+        },
+      },
+      metadata: true,
+      seatsPerTimeSlot: true,
+      seatsShowAttendees: true,
+      seatsShowAvailabilityCount: true,
+      schedulingType: true,
+      periodStartDate: true,
+      periodEndDate: true,
+    },
+  });
+
+  if (!eventType) {
+    return eventType;
+  }
+
+  const metadata = EventTypeMetaDataSchema.parse(eventType.metadata);
+
+  return {
+    isDynamic: false,
+    ...eventType,
+    bookingFields: getBookingFieldsWithSystemFields(eventType),
+    metadata,
+  };
+};
+
+export const handleSeatsEventTypeOnBooking = async (
+  eventType: {
+    seatsPerTimeSlot?: number | null;
+    seatsShowAttendees: boolean | null;
+    seatsShowAvailabilityCount: boolean | null;
+    [x: string | number | symbol]: unknown;
+  },
+  bookingInfo: Partial<
+    Prisma.BookingGetPayload<{
+      include: {
+        attendees: { select: { name: true; email: true } };
+        seatsReferences: { select: { referenceUid: true } };
+        user: {
+          select: {
+            id: true;
+            name: true;
+            email: true;
+            username: true;
+            timeZone: true;
+          };
+        };
+      };
+    }>
+  >,
+  seatReferenceUid?: string,
+  isHost?: boolean
+) => {
+  bookingInfo["responses"] = {};
+  type seatAttendee = {
+    attendee: {
+      email: string;
+      name: string;
+    };
+    id: number;
+    data: Prisma.JsonValue;
+    bookingId: number;
+    attendeeId: number;
+    referenceUid: string;
+  } | null;
+  let seatAttendee: seatAttendee = null;
+  if (seatReferenceUid) {
+    seatAttendee = await prisma.bookingSeat.findFirst({
+      where: {
+        referenceUid: seatReferenceUid,
+      },
+      include: {
+        attendee: {
+          select: {
+            name: true,
+            email: true,
+          },
+        },
+      },
+    });
+  }
+  if (seatAttendee) {
+    const seatAttendeeData = seatAttendee.data as unknown as {
+      description?: string;
+      responses: Prisma.JsonValue;
+    };
+    bookingInfo["description"] = seatAttendeeData.description ?? null;
+    bookingInfo["responses"] = bookingResponsesDbSchema.parse(seatAttendeeData.responses ?? {});
+  }
+
+  if (!eventType.seatsShowAttendees && !isHost) {
+    if (seatAttendee) {
+      const attendee = bookingInfo?.attendees?.find((a) => {
+        return a.email === seatAttendee?.attendee?.email;
+      });
+      bookingInfo["attendees"] = attendee ? [attendee] : [];
+    } else {
+      bookingInfo["attendees"] = [];
+    }
+  }
+
+  // // @TODO: If handling teams, we need to do more check ups for this.
+  // if (bookingInfo?.user?.id === userId) {
+  //   return;
+  // }
+  return bookingInfo;
+};
+
+export async function getRecurringBookings(recurringEventId: string | null) {
+  if (!recurringEventId) return null;
+  const recurringBookings = await prisma.booking.findMany({
+    where: {
+      recurringEventId,
+      status: BookingStatus.ACCEPTED,
+    },
+    select: {
+      startTime: true,
+    },
+  });
+  return recurringBookings.map((obj) => obj.startTime.toString());
+}

calcom/apps/web/lib/buildLegacyCtx.tsx

@@ -0,0 +1,49 @@
+import type { SearchParams } from "app/_types";
+import { type Params } from "app/_types";
+import type { GetServerSidePropsContext } from "next";
+import { type ReadonlyHeaders } from "next/dist/server/web/spec-extension/adapters/headers";
+import { type ReadonlyRequestCookies } from "next/dist/server/web/spec-extension/adapters/request-cookies";
+
+const createProxifiedObject = (object: Record<string, string>) =>
+  new Proxy(object, {
+    set: () => {
+      throw new Error("You are trying to modify 'headers' or 'cookies', which is not supported in app dir");
+    },
+  });
+
+const buildLegacyHeaders = (headers: ReadonlyHeaders) => {
+  const headersObject = Object.fromEntries(headers.entries());
+
+  return createProxifiedObject(headersObject);
+};
+
+const buildLegacyCookies = (cookies: ReadonlyRequestCookies) => {
+  const cookiesObject = cookies.getAll().reduce<Record<string, string>>((acc, { name, value }) => {
+    acc[name] = value;
+    return acc;
+  }, {});
+
+  return createProxifiedObject(cookiesObject);
+};
+
+export const buildLegacyCtx = (
+  headers: ReadonlyHeaders,
+  cookies: ReadonlyRequestCookies,
+  params: Params,
+  searchParams: SearchParams
+) => {
+  return {
+    query: { ...searchParams, ...params },
+    params,
+    req: { headers: buildLegacyHeaders(headers), cookies: buildLegacyCookies(cookies) },
+    res: new Proxy(Object.create(null), {
+      // const { req, res } = ctx - valid
+      // res.anything - throw
+      get() {
+        throw new Error(
+          "You are trying to access the 'res' property of the context, which is not supported in app dir"
+        );
+      },
+    }),
+  } as unknown as GetServerSidePropsContext;
+};

calcom/apps/web/lib/buildNonce.test.ts

@@ -0,0 +1,96 @@
+import { describe, it, expect } from "vitest";
+
+import { buildNonce } from "./buildNonce";
+
+describe("buildNonce", () => {
+  it("should return an empty string for an empty array", () => {
+    const nonce = buildNonce(new Uint8Array());
+
+    expect(nonce).toEqual("");
+    expect(atob(nonce).length).toEqual(0);
+  });
+
+  it("should return a base64 string for values from 0 to 63", () => {
+    const array = Array(22)
+      .fill(0)
+      .map((_, i) => i);
+    const nonce = buildNonce(new Uint8Array(array));
+
+    expect(nonce.length).toEqual(24);
+    expect(nonce).toEqual("ABCDEFGHIJKLMNOPQRSTQQ==");
+
+    expect(atob(nonce).length).toEqual(16);
+  });
+
+  it("should return a base64 string for values from 64 to 127", () => {
+    const array = Array(22)
+      .fill(0)
+      .map((_, i) => i + 64);
+    const nonce = buildNonce(new Uint8Array(array));
+
+    expect(nonce.length).toEqual(24);
+    expect(nonce).toEqual("ABCDEFGHIJKLMNOPQRSTQQ==");
+
+    expect(atob(nonce).length).toEqual(16);
+  });
+
+  it("should return a base64 string for values from 128 to 191", () => {
+    const array = Array(22)
+      .fill(0)
+      .map((_, i) => i + 128);
+    const nonce = buildNonce(new Uint8Array(array));
+
+    expect(nonce.length).toEqual(24);
+    expect(nonce).toEqual("ABCDEFGHIJKLMNOPQRSTQQ==");
+
+    expect(atob(nonce).length).toEqual(16);
+  });
+
+  it("should return a base64 string for values from 192 to 255", () => {
+    const array = Array(22)
+      .fill(0)
+      .map((_, i) => i + 192);
+    const nonce = buildNonce(new Uint8Array(array));
+
+    expect(nonce.length).toEqual(24);
+    expect(nonce).toEqual("ABCDEFGHIJKLMNOPQRSTQQ==");
+
+    expect(atob(nonce).length).toEqual(16);
+  });
+
+  it("should return a base64 string for values from 0 to 42", () => {
+    const array = Array(22)
+      .fill(0)
+      .map((_, i) => 2 * i);
+    const nonce = buildNonce(new Uint8Array(array));
+
+    expect(nonce.length).toEqual(24);
+    expect(nonce).toEqual("ACEGIKMOQSUWYacegikmgg==");
+
+    expect(atob(nonce).length).toEqual(16);
+  });
+
+  it("should return a base64 string for 0 values", () => {
+    const array = Array(22)
+      .fill(0)
+      .map(() => 0);
+    const nonce = buildNonce(new Uint8Array(array));
+
+    expect(nonce.length).toEqual(24);
+    expect(nonce).toEqual("AAAAAAAAAAAAAAAAAAAAAA==");
+
+    expect(atob(nonce).length).toEqual(16);
+  });
+
+  it("should return a base64 string for 0xFF values", () => {
+    const array = Array(22)
+      .fill(0)
+      .map(() => 0xff);
+    const nonce = buildNonce(new Uint8Array(array));
+
+    expect(nonce.length).toEqual(24);
+    expect(nonce).toEqual("////////////////////ww==");
+
+    expect(atob(nonce).length).toEqual(16);
+  });
+});

calcom/apps/web/lib/buildNonce.ts

@@ -0,0 +1,46 @@
+const BASE64_ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+
+/*
+The buildNonce array allows a randomly generated 22-unsigned-byte array
+and returns a 24-ASCII character string that mimics a base64-string.
+*/
+
+export const buildNonce = (uint8array: Uint8Array): string => {
+  // the random uint8array should contain 22 bytes
+  // 22 bytes mimic the base64-encoded 16 bytes
+  // base64 encodes 6 bits (log2(64)) with 8 bits (64 allowed characters)
+  // thus ceil(16*8/6) gives us 22 bytes
+  if (uint8array.length != 22) {
+    return "";
+  }
+
+  // for each random byte, we take:
+  // a) only the last 6 bits (so we map them to the base64 alphabet)
+  // b) for the last byte, we are interested in two bits
+  // explaination:
+  // 16*8 bits = 128 bits of information (order: left->right)
+  // 22*6 bits = 132 bits (order: left->right)
+  // thus the last byte has 4 redundant (least-significant, right-most) bits
+  // it leaves the last byte with 2 bits of information before the redundant bits
+  // so the bitmask is 0x110000 (2 bits of information, 4 redundant bits)
+  const bytes = uint8array.map((value, i) => {
+    if (i < 20) {
+      return value & 0b111111;
+    }
+
+    return value & 0b110000;
+  });
+
+  const nonceCharacters: string[] = [];
+
+  bytes.forEach((value) => {
+    nonceCharacters.push(BASE64_ALPHABET.charAt(value));
+  });
+
+  // base64-encoded strings can be padded with 1 or 2 `=`
+  // since 22 % 4 = 2, we pad with two `=`
+  nonceCharacters.push("==");
+
+  // the end result has 22 information and 2 padding ASCII characters = 24 ASCII characters
+  return nonceCharacters.join("");
+};

calcom/apps/web/lib/classNames.ts

@@ -0,0 +1,2 @@
+// TODO: Remove this file once every `classNames` is imported from `@calcom/lib`
+export { default } from "@calcom/lib/classNames";

calcom/apps/web/lib/clock.ts

@@ -0,0 +1,55 @@
+// handles logic related to user clock display using 24h display / timeZone options.
+import dayjs from "@calcom/dayjs";
+import {
+  getIs24hClockFromLocalStorage,
+  isBrowserLocale24h,
+  setIs24hClockInLocalStorage,
+} from "@calcom/lib/timeFormat";
+import { localStorage } from "@calcom/lib/webstorage";
+
+interface TimeOptions {
+  is24hClock: boolean;
+  inviteeTimeZone: string;
+}
+
+const timeOptions: TimeOptions = {
+  is24hClock: false,
+  inviteeTimeZone: "",
+};
+
+const isInitialized = false;
+
+const initClock = () => {
+  if (isInitialized) {
+    return;
+  }
+  // This only sets browser locale if there's no preference on localStorage.
+  if (getIs24hClockFromLocalStorage() === null) set24hClock(isBrowserLocale24h());
+  timeOptions.is24hClock = !!getIs24hClockFromLocalStorage();
+  timeOptions.inviteeTimeZone =
+    localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess() || "Europe/London";
+};
+
+const is24h = (is24hClock?: boolean) => {
+  initClock();
+  if (typeof is24hClock !== "undefined") set24hClock(is24hClock);
+  return timeOptions.is24hClock;
+};
+
+const set24hClock = (is24hClock: boolean) => {
+  setIs24hClockInLocalStorage(is24hClock);
+  timeOptions.is24hClock = is24hClock;
+};
+
+function setTimeZone(selectedTimeZone: string) {
+  localStorage.setItem("timeOption.preferredTimeZone", selectedTimeZone);
+  timeOptions.inviteeTimeZone = selectedTimeZone;
+}
+
+const timeZone = (selectedTimeZone?: string) => {
+  initClock();
+  if (selectedTimeZone) setTimeZone(selectedTimeZone);
+  return timeOptions.inviteeTimeZone;
+};
+
+export { is24h, timeZone };

calcom/apps/web/lib/config/next-seo.config.ts

@@ -0,0 +1,39 @@
+import type { DefaultSeoProps, NextSeoProps } from "next-seo";
+
+import { APP_NAME, SEO_IMG_DEFAULT, SEO_IMG_OGIMG } from "@calcom/lib/constants";
+
+export type HeadSeoProps = {
+  title: string;
+  description: string;
+  siteName?: string;
+  name?: string;
+  url?: string;
+  username?: string;
+  canonical?: string;
+  nextSeoProps?: NextSeoProps;
+};
+
+const seoImages = {
+  default: SEO_IMG_DEFAULT,
+  ogImage: SEO_IMG_OGIMG,
+};
+
+export const getSeoImage = (key: keyof typeof seoImages): string => {
+  return seoImages[key];
+};
+
+export const seoConfig: {
+  headSeo: Required<Pick<HeadSeoProps, "siteName">>;
+  defaultNextSeo: DefaultSeoProps;
+} = {
+  headSeo: {
+    siteName: APP_NAME,
+  },
+  defaultNextSeo: {
+    twitter: {
+      handle: "@calcom",
+      site: "@calcom",
+      cardType: "summary_large_image",
+    },
+  },
+} as const;

calcom/apps/web/lib/core/http/error/http-error.ts

@@ -0,0 +1,33 @@
+export class HttpError<TCode extends number = number> extends Error {
+  public readonly cause?: Error;
+  public readonly statusCode: TCode;
+  public readonly message: string;
+  public readonly url: string | undefined;
+  public readonly method: string | undefined;
+
+  constructor(opts: { url?: string; method?: string; message?: string; statusCode: TCode; cause?: Error }) {
+    super(opts.message ?? `HTTP Error ${opts.statusCode} `);
+
+    Object.setPrototypeOf(this, HttpError.prototype);
+    this.name = HttpError.prototype.constructor.name;
+
+    this.cause = opts.cause;
+    this.statusCode = opts.statusCode;
+    this.url = opts.url;
+    this.method = opts.method;
+    this.message = opts.message ?? `HTTP Error ${opts.statusCode}`;
+
+    if (opts.cause instanceof Error && opts.cause.stack) {
+      this.stack = opts.cause.stack;
+    }
+  }
+
+  public static fromRequest(request: Request, response: Response) {
+    return new HttpError({
+      message: response.statusText,
+      url: response.url,
+      method: request.method,
+      statusCode: response.status,
+    });
+  }
+}

calcom/apps/web/lib/core/http/error/index.ts

@@ -0,0 +1,2 @@
+// Base http Error
+export { HttpError } from "./http-error";

calcom/apps/web/lib/cropImage.ts

@@ -0,0 +1,57 @@
+const MAX_IMAGE_SIZE = 512;
+
+export type Area = {
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+};
+
+const createImage = (url: string) =>
+  new Promise<HTMLImageElement>((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener("load", () => resolve(image));
+    image.addEventListener("error", (error) => reject(error));
+    image.setAttribute("crossOrigin", "anonymous"); // needed to avoid cross-origin issues on CodeSandbox
+    image.src = url;
+  });
+
+export async function getCroppedImg(imageSrc: string, pixelCrop: Area): Promise<string> {
+  const image = await createImage(imageSrc);
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Context is null, this should never happen.");
+
+  const maxSize = Math.max(image.naturalWidth, image.naturalHeight);
+  const resizeRatio = MAX_IMAGE_SIZE / maxSize < 1 ? Math.max(MAX_IMAGE_SIZE / maxSize, 0.75) : 1;
+  // huh, what? - Having this turned off actually improves image quality as otherwise anti-aliasing is applied
+  // this reduces the quality of the image overall because it anti-aliases the existing, copied image; blur results
+  ctx.imageSmoothingEnabled = false;
+  // pixelCrop is always 1:1 - width = height
+  canvas.width = canvas.height = Math.min(maxSize * resizeRatio, pixelCrop.width);
+
+  ctx.drawImage(
+    image,
+    pixelCrop.x,
+    pixelCrop.y,
+    pixelCrop.width,
+    pixelCrop.height,
+    0,
+    0,
+    canvas.width,
+    canvas.height
+  );
+
+  // on very low ratios, the quality of the resize becomes awful. For this reason the resizeRatio is limited to 0.75
+  if (resizeRatio <= 0.75) {
+    // With a smaller image, thus improved ratio. Keep doing this until the resizeRatio > 0.75.
+    return getCroppedImg(canvas.toDataURL("image/png"), {
+      width: canvas.width,
+      height: canvas.height,
+      x: 0,
+      y: 0,
+    });
+  }
+
+  return canvas.toDataURL("image/png");
+}

calcom/apps/web/lib/csp.ts

@@ -0,0 +1,108 @@
+import type { IncomingMessage, OutgoingMessage } from "http";
+import type { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+
+import { IS_PRODUCTION } from "@calcom/lib/constants";
+import { WEBAPP_URL } from "@calcom/lib/constants";
+
+import { buildNonce } from "./buildNonce";
+
+function getCspPolicy(nonce: string) {
+  //TODO: Do we need to explicitly define it in turbo.json
+  const CSP_POLICY = process.env.CSP_POLICY;
+
+  // Note: "non-strict" policy only allows inline styles otherwise it's the same as "strict"
+  // We can remove 'unsafe-inline' from style-src when we add nonces to all style tags
+  // Maybe see how @next-safe/middleware does it if it's supported.
+  const useNonStrictPolicy = CSP_POLICY === "non-strict";
+
+  // We add WEBAPP_URL to img-src because of booking pages, which end up loading images from app.cal.com on cal.com
+  // FIXME: Write a layer to extract out EventType Analytics tracking endpoints and add them to img-src or connect-src as needed. e.g. fathom, Google Analytics and others
+  return `
+	  default-src 'self' ${IS_PRODUCTION ? "" : "data:"};
+	  script-src ${
+      IS_PRODUCTION
+        ? // 'self' 'unsafe-inline' https: added for Browsers not supporting strict-dynamic not supporting strict-dynamic
+          `'nonce-${nonce}' 'strict-dynamic' 'self' 'unsafe-inline' https:`
+        : // Note: We could use 'strict-dynamic' with 'nonce-..' instead of unsafe-inline but there are some streaming related scripts that get blocked(because they don't have nonce on them). It causes a really frustrating full page error model by Next.js to show up sometimes
+          "'unsafe-inline' 'unsafe-eval' https: http:"
+    };
+    object-src 'none';
+    base-uri 'none';
+	  child-src app.cal.com;
+	  style-src 'self' ${
+      IS_PRODUCTION ? (useNonStrictPolicy ? "'unsafe-inline'" : "") : "'unsafe-inline'"
+    } app.cal.com;
+	  font-src 'self';
+	  img-src 'self' ${WEBAPP_URL} https://img.youtube.com https://eu.ui-avatars.com/api/ data:;
+    connect-src 'self'
+	`;
+}
+
+// Taken from @next-safe/middleware
+const isPagePathRequest = (url: URL) => {
+  const isNonPagePathPrefix = /^\/(?:_next|api)\//;
+  const isFile = /\..*$/;
+  const { pathname } = url;
+  return !isNonPagePathPrefix.test(pathname) && !isFile.test(pathname);
+};
+
+export function csp(req: IncomingMessage | NextRequest | null, res: OutgoingMessage | NextResponse | null) {
+  if (!req) {
+    return { nonce: undefined };
+  }
+  const existingNonce = "cache" in req ? req.headers.get("x-nonce") : req.headers["x-nonce"];
+
+  if (existingNonce) {
+    const existingNoneParsed = z.string().safeParse(existingNonce);
+    return { nonce: existingNoneParsed.success ? existingNoneParsed.data : "" };
+  }
+  if (!req.url) {
+    return { nonce: undefined };
+  }
+  const CSP_POLICY = process.env.CSP_POLICY;
+  const cspEnabledForInstance = CSP_POLICY;
+  const nonce = buildNonce(crypto.getRandomValues(new Uint8Array(22)));
+
+  const parsedUrl = new URL(req.url, "http://base_url");
+  const cspEnabledForPage = cspEnabledForInstance && isPagePathRequest(parsedUrl);
+  if (!cspEnabledForPage) {
+    return {
+      nonce: undefined,
+    };
+  }
+  // Set x-nonce request header to be used by `getServerSideProps` or similar fns and `Document.getInitialProps` to read the nonce from
+  // It is generated for all page requests but only used by pages that need CSP
+
+  if ("cache" in req) {
+    req.headers.set("x-nonce", nonce);
+  } else {
+    req.headers["x-nonce"] = nonce;
+  }
+
+  if (res) {
+    const enforced =
+      "cache" in req ? req.headers.get("x-csp-enforce") === "true" : req.headers["x-csp-enforce"] === "true";
+
+    // No need to enable REPORT ONLY mode for CSP unless we start actively working on it. See https://github.com/calcom/cal.com/issues/13844
+    const name = enforced ? "Content-Security-Policy" : /*"Content-Security-Policy-Report-Only"*/ null;
+
+    if (!name) {
+      return {
+        nonce: undefined,
+      };
+    }
+
+    const value = getCspPolicy(nonce)
+      .replace(/\s{2,}/g, " ")
+      .trim();
+
+    if ("body" in res) {
+      res.headers.set(name, value);
+    } else {
+      res.setHeader(name, value);
+    }
+  }
+
+  return { nonce };
+}

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

@@ -0,0 +1,149 @@
+import type { GetServerSidePropsContext } from "next";
+import { z } from "zod";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { getBookingForReschedule, getMultipleDurationValue } from "@calcom/features/bookings/lib/get-booking";
+import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
+import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
+import { UserRepository } from "@calcom/lib/server/repository/user";
+import slugify from "@calcom/lib/slugify";
+import prisma from "@calcom/prisma";
+import { RedirectType } from "@calcom/prisma/enums";
+
+import { getTemporaryOrgRedirect } from "@lib/getTemporaryOrgRedirect";
+import type { inferSSRProps } from "@lib/types/inferSSRProps";
+import type { EmbedProps } from "@lib/withEmbedSsr";
+
+export type PageProps = inferSSRProps<typeof getServerSideProps> & EmbedProps;
+
+async function getUserPageProps(context: GetServerSidePropsContext) {
+  const session = await getServerSession(context);
+  const { link, slug } = paramsSchema.parse(context.params);
+  const { rescheduleUid, duration: queryDuration } = context.query;
+  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req);
+  const org = isValidOrgDomain ? currentOrgDomain : null;
+
+  const { ssrInit } = await import("@server/lib/ssr");
+  const ssr = await ssrInit(context);
+
+  const hashedLink = await prisma.hashedLink.findUnique({
+    where: {
+      link,
+    },
+    select: {
+      eventTypeId: true,
+      eventType: {
+        select: {
+          users: {
+            select: {
+              username: true,
+            },
+          },
+          team: {
+            select: {
+              id: true,
+              slug: true,
+              hideBranding: true,
+            },
+          },
+        },
+      },
+    },
+  });
+
+  let name: string;
+  let hideBranding = false;
+
+  const notFound = {
+    notFound: true,
+  } as const;
+
+  if (!hashedLink) {
+    return notFound;
+  }
+
+  if (hashedLink.eventType.team) {
+    name = hashedLink.eventType.team.slug || "";
+    hideBranding = hashedLink.eventType.team.hideBranding;
+  } else {
+    const username = hashedLink.eventType.users[0]?.username;
+
+    if (!username) {
+      return notFound;
+    }
+
+    if (!org) {
+      const redirect = await getTemporaryOrgRedirect({
+        slugs: [username],
+        redirectType: RedirectType.User,
+        eventTypeSlug: slug,
+        currentQuery: context.query,
+      });
+
+      if (redirect) {
+        return redirect;
+      }
+    }
+
+    const [user] = await UserRepository.findUsersByUsername({
+      usernameList: [username],
+      orgSlug: org,
+    });
+
+    if (!user) {
+      return notFound;
+    }
+
+    name = username;
+    hideBranding = user.hideBranding;
+  }
+
+  let booking: GetBookingType | null = null;
+  if (rescheduleUid) {
+    booking = await getBookingForReschedule(`${rescheduleUid}`, session?.user?.id);
+  }
+
+  const isTeamEvent = !!hashedLink.eventType?.team?.id;
+
+  // We use this to both prefetch the query on the server,
+  // as well as to check if the event exist, so we c an show a 404 otherwise.
+  const eventData = await ssr.viewer.public.event.fetch({
+    username: name,
+    eventSlug: slug,
+    isTeamEvent,
+    org,
+    fromRedirectOfNonOrgLink: context.query.orgRedirection === "true",
+  });
+
+  if (!eventData) {
+    return notFound;
+  }
+
+  return {
+    props: {
+      entity: eventData.entity,
+      duration: getMultipleDurationValue(
+        eventData.metadata?.multipleDuration,
+        queryDuration,
+        eventData.length
+      ),
+      booking,
+      user: name,
+      slug,
+      trpcState: ssr.dehydrate(),
+      isBrandingHidden: hideBranding,
+      // Sending the team event from the server, because this template file
+      // is reused for both team and user events.
+      isTeamEvent,
+      hashedLink: link,
+    },
+  };
+}
+
+const paramsSchema = z.object({ link: z.string(), slug: z.string().transform((s) => slugify(s)) });
+
+// Booker page fetches a tiny bit of data server side, to determine early
+// whether the page should show an away state or dynamic booking not allowed.
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  return await getUserPageProps(context);
+};

calcom/apps/web/lib/daily-webhook/getBooking.ts

@@ -0,0 +1,55 @@
+import { HttpError } from "@calcom/lib/http-error";
+import logger from "@calcom/lib/logger";
+import { safeStringify } from "@calcom/lib/safeStringify";
+import prisma, { bookingMinimalSelect } from "@calcom/prisma";
+
+const log = logger.getSubLogger({ prefix: ["daily-video-webhook-handler"] });
+
+// TODO: use BookingRepository
+export const getBooking = async (bookingId: number) => {
+  const booking = await prisma.booking.findUniqueOrThrow({
+    where: {
+      id: bookingId,
+    },
+    select: {
+      ...bookingMinimalSelect,
+      uid: true,
+      location: true,
+      isRecorded: true,
+      eventTypeId: true,
+      eventType: {
+        select: {
+          teamId: true,
+          parentId: true,
+        },
+      },
+      user: {
+        select: {
+          id: true,
+          timeZone: true,
+          email: true,
+          name: true,
+          locale: true,
+          destinationCalendar: true,
+        },
+      },
+    },
+  });
+
+  if (!booking) {
+    log.error(
+      "Couldn't find Booking Id:",
+      safeStringify({
+        bookingId,
+      })
+    );
+
+    throw new HttpError({
+      message: `Booking of id ${bookingId} does not exist or does not contain daily video as location`,
+      statusCode: 404,
+    });
+  }
+  return booking;
+};
+
+export type getBookingResponse = Awaited<ReturnType<typeof getBooking>>;

calcom/apps/web/lib/daily-webhook/getBookingReference.ts

@@ -0,0 +1,24 @@
+import { HttpError } from "@calcom/lib/http-error";
+import logger from "@calcom/lib/logger";
+import { safeStringify } from "@calcom/lib/safeStringify";
+import { BookingReferenceRepository } from "@calcom/lib/server/repository/bookingReference";
+
+const log = logger.getSubLogger({ prefix: ["daily-video-webhook-handler"] });
+
+export const getBookingReference = async (roomName: string) => {
+  const bookingReference = await BookingReferenceRepository.findDailyVideoReferenceByRoomName({ roomName });
+
+  if (!bookingReference || !bookingReference.bookingId) {
+    log.error(
+      "bookingReference not found error:",
+      safeStringify({
+        bookingReference,
+        roomName,
+      })
+    );
+
+    throw new HttpError({ message: "Booking reference not found", statusCode: 200 });
+  }
+
+  return bookingReference;
+};

calcom/apps/web/lib/daily-webhook/getCalendarEvent.ts

@@ -0,0 +1,40 @@
+import { getTranslation } from "@calcom/lib/server/i18n";
+import type { CalendarEvent } from "@calcom/types/Calendar";
+
+import type { getBookingResponse } from "./getBooking";
+
+export const getCalendarEvent = async (booking: getBookingResponse) => {
+  const t = await getTranslation(booking?.user?.locale ?? "en", "common");
+
+  const attendeesListPromises = booking.attendees.map(async (attendee) => {
+    return {
+      id: attendee.id,
+      name: attendee.name,
+      email: attendee.email,
+      timeZone: attendee.timeZone,
+      language: {
+        translate: await getTranslation(attendee.locale ?? "en", "common"),
+        locale: attendee.locale ?? "en",
+      },
+    };
+  });
+
+  const attendeesList = await Promise.all(attendeesListPromises);
+  const evt: CalendarEvent = {
+    type: booking.title,
+    title: booking.title,
+    description: booking.description || undefined,
+    startTime: booking.startTime.toISOString(),
+    endTime: booking.endTime.toISOString(),
+    organizer: {
+      email: booking?.userPrimaryEmail || booking.user?.email || "Email-less",
+      name: booking.user?.name || "Nameless",
+      timeZone: booking.user?.timeZone || "Europe/London",
+      language: { translate: t, locale: booking?.user?.locale ?? "en" },
+    },
+    attendees: attendeesList,
+    uid: booking.uid,
+  };
+
+  return Promise.resolve(evt);
+};

calcom/apps/web/lib/daily-webhook/schema.ts

@@ -0,0 +1,63 @@
+import { z } from "zod";
+
+const commonSchema = z
+  .object({
+    version: z.string(),
+    type: z.string(),
+    id: z.string(),
+    event_ts: z.number().optional(),
+  })
+  .passthrough();
+
+export const meetingEndedSchema = commonSchema.extend({
+  payload: z
+    .object({
+      meeting_id: z.string(),
+      end_ts: z.number().optional(),
+      room: z.string(),
+      start_ts: z.number().optional(),
+    })
+    .passthrough(),
+});
+
+export const recordingReadySchema = commonSchema.extend({
+  payload: z.object({
+    recording_id: z.string(),
+    end_ts: z.number().optional(),
+    room_name: z.string(),
+    start_ts: z.number().optional(),
+    status: z.string(),
+
+    max_participants: z.number().optional(),
+    duration: z.number().optional(),
+    s3_key: z.string().optional(),
+  }),
+});
+
+export const batchProcessorJobFinishedSchema = commonSchema.extend({
+  payload: z
+    .object({
+      id: z.string(),
+      status: z.string(),
+      input: z.object({
+        sourceType: z.string(),
+        recordingId: z.string(),
+      }),
+      output: z
+        .object({
+          transcription: z.array(z.object({ format: z.string() }).passthrough()),
+        })
+        .passthrough(),
+    })
+    .passthrough(),
+});
+
+export type TBatchProcessorJobFinished = z.infer<typeof batchProcessorJobFinishedSchema>;
+
+export const downloadLinkSchema = z.object({
+  download_link: z.string(),
+});
+
+export const testRequestSchema = z.object({
+  test: z.enum(["test"]),
+});

calcom/apps/web/lib/daily-webhook/tests/recorded-daily-video.test.ts

@@ -0,0 +1,244 @@
+import {
+  createBookingScenario,
+  getScenarioData,
+  TestData,
+  getDate,
+  getMockBookingAttendee,
+  getOrganizer,
+  getBooker,
+} from "@calcom/web/test/utils/bookingScenario/bookingScenario";
+import { expectWebhookToHaveBeenCalledWith } from "@calcom/web/test/utils/bookingScenario/expects";
+
+import type { Request, Response } from "express";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { createMocks } from "node-mocks-http";
+import { describe, afterEach, test, vi, beforeEach, beforeAll } from "vitest";
+
+import { appStoreMetadata } from "@calcom/app-store/apps.metadata.generated";
+import { getRoomNameFromRecordingId, getBatchProcessorJobAccessLink } from "@calcom/app-store/dailyvideo/lib";
+import { getDownloadLinkOfCalVideoByRecordingId } from "@calcom/core/videoClient";
+import prisma from "@calcom/prisma";
+import { WebhookTriggerEvents } from "@calcom/prisma/enums";
+import { BookingStatus } from "@calcom/prisma/enums";
+import handler from "@calcom/web/pages/api/recorded-daily-video";
+
+type CustomNextApiRequest = NextApiRequest & Request;
+type CustomNextApiResponse = NextApiResponse & Response;
+beforeAll(() => {
+  // Setup env vars
+  vi.stubEnv("SENDGRID_API_KEY", "FAKE_SENDGRID_API_KEY");
+  vi.stubEnv("SENDGRID_EMAIL", "FAKE_SENDGRID_EMAIL");
+});
+
+vi.mock("@calcom/app-store/dailyvideo/lib", () => {
+  return {
+    getRoomNameFromRecordingId: vi.fn(),
+    getBatchProcessorJobAccessLink: vi.fn(),
+  };
+});
+
+vi.mock("@calcom/core/videoClient", () => {
+  return {
+    getDownloadLinkOfCalVideoByRecordingId: vi.fn(),
+  };
+});
+
+const BATCH_PROCESSOR_JOB_FINSISHED_PAYLOAD = {
+  version: "1.1.0",
+  type: "batch-processor.job-finished",
+  id: "77b1cb9e-cd79-43cd-bad6-3ccaccba26be",
+  payload: {
+    id: "77b1cb9e-cd79-43cd-bad6-3ccaccba26be",
+    status: "finished",
+    input: {
+      sourceType: "recordingId",
+      recordingId: "eb9e84de-783e-4e14-875d-94700ee4b976",
+    },
+    output: {
+      transcription: [
+        {
+          format: "json",
+          s3Config: {
+            key: "transcript.json",
+            bucket: "daily-bucket",
+            region: "us-west-2",
+          },
+        },
+        {
+          format: "srt",
+          s3Config: {
+            key: "transcript.srt",
+            bucket: "daily-bucket",
+            region: "us-west-2",
+          },
+        },
+        {
+          format: "txt",
+          s3Config: {
+            key: "transcript.txt",
+            bucket: "daily-bucket",
+            region: "us-west-2",
+          },
+        },
+        {
+          format: "vtt",
+          s3Config: {
+            key: "transcript.vtt",
+            bucket: "daily-bucket",
+            region: "us-west-2",
+          },
+        },
+      ],
+    },
+  },
+  event_ts: 1717688213.803,
+};
+
+const timeout = process.env.CI ? 5000 : 20000;
+
+const TRANSCRIPTION_ACCESS_LINK = {
+  id: "MOCK_ID",
+  preset: "transcript",
+  status: "finished",
+  transcription: [
+    {
+      format: "json",
+      link: "https://download.json",
+    },
+    {
+      format: "srt",
+      link: "https://download.srt",
+    },
+  ],
+};
+
+describe("Handler: /api/recorded-daily-video", () => {
+  beforeEach(() => {
+    fetchMock.resetMocks();
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+    fetchMock.resetMocks();
+  });
+
+  test(
+    `Batch Processor Job finished triggers RECORDING_TRANSCRIPTION_GENERATED webhooks`,
+    async () => {
+      const organizer = getOrganizer({
+        name: "Organizer",
+        email: "organizer@example.com",
+        id: 101,
+        schedules: [TestData.schedules.IstWorkHours],
+      });
+
+      const bookingUid = "n5Wv3eHgconAED2j4gcVhP";
+      const iCalUID = `${bookingUid}@Cal.com`;
+      const subscriberUrl = "http://my-webhook.example.com";
+      const recordingDownloadLink = "https://download-link.com";
+
+      const { dateString: plus1DateString } = getDate({ dateIncrement: 1 });
+      const booker = getBooker({
+        email: "booker@example.com",
+        name: "Booker",
+      });
+
+      await createBookingScenario(
+        getScenarioData({
+          webhooks: [
+            {
+              userId: organizer.id,
+              eventTriggers: [WebhookTriggerEvents.RECORDING_TRANSCRIPTION_GENERATED],
+              subscriberUrl,
+              active: true,
+              eventTypeId: 1,
+              appId: null,
+            },
+          ],
+          eventTypes: [
+            {
+              id: 1,
+              slotInterval: 15,
+              length: 15,
+              users: [
+                {
+                  id: 101,
+                },
+              ],
+            },
+          ],
+          bookings: [
+            {
+              uid: bookingUid,
+              eventTypeId: 1,
+              status: BookingStatus.ACCEPTED,
+              startTime: `${plus1DateString}T05:00:00.000Z`,
+              endTime: `${plus1DateString}T05:15:00.000Z`,
+              userId: organizer.id,
+              metadata: {
+                videoCallUrl: "https://existing-daily-video-call-url.example.com",
+              },
+              references: [
+                {
+                  type: appStoreMetadata.dailyvideo.type,
+                  uid: "MOCK_ID",
+                  meetingId: "MOCK_ID",
+                  meetingPassword: "MOCK_PASS",
+                  meetingUrl: "http://mock-dailyvideo.example.com",
+                  credentialId: null,
+                },
+              ],
+              attendees: [
+                getMockBookingAttendee({
+                  id: 2,
+                  name: booker.name,
+                  email: booker.email,
+                  locale: "en",
+                  timeZone: "Asia/Kolkata",
+                  noShow: false,
+                }),
+              ],
+              iCalUID,
+            },
+          ],
+          organizer,
+          apps: [TestData.apps["daily-video"]],
+        })
+      );
+
+      vi.mocked(getRoomNameFromRecordingId).mockResolvedValue("MOCK_ID");
+      vi.mocked(getBatchProcessorJobAccessLink).mockResolvedValue(TRANSCRIPTION_ACCESS_LINK);
+      vi.mocked(getDownloadLinkOfCalVideoByRecordingId).mockResolvedValue({
+        download_link: recordingDownloadLink,
+      });
+
+      const { req, res } = createMocks<CustomNextApiRequest, CustomNextApiResponse>({
+        method: "POST",
+        body: BATCH_PROCESSOR_JOB_FINSISHED_PAYLOAD,
+        prisma,
+      });
+
+      await handler(req, res);
+
+      await expectWebhookToHaveBeenCalledWith(subscriberUrl, {
+        triggerEvent: WebhookTriggerEvents.RECORDING_TRANSCRIPTION_GENERATED,
+        payload: {
+          type: "Test Booking Title",
+          uid: bookingUid,
+          downloadLinks: {
+            transcription: TRANSCRIPTION_ACCESS_LINK.transcription,
+            recording: recordingDownloadLink,
+          },
+          organizer: {
+            email: organizer.email,
+            name: organizer.name,
+            timeZone: organizer.timeZone,
+            language: { locale: "en" },
+            utcOffset: 330,
+          },
+        },
+      });
+    },
+    timeout
+  );
+});

calcom/apps/web/lib/daily-webhook/triggerWebhooks.ts

@@ -0,0 +1,112 @@
+import type { TGetTranscriptAccessLink } from "@calcom/app-store/dailyvideo/zod";
+import getWebhooks from "@calcom/features/webhooks/lib/getWebhooks";
+import sendPayload from "@calcom/features/webhooks/lib/sendOrSchedulePayload";
+import getOrgIdFromMemberOrTeamId from "@calcom/lib/getOrgIdFromMemberOrTeamId";
+import logger from "@calcom/lib/logger";
+import { safeStringify } from "@calcom/lib/safeStringify";
+import { WebhookTriggerEvents } from "@calcom/prisma/enums";
+import type { CalendarEvent } from "@calcom/types/Calendar";
+
+const log = logger.getSubLogger({ prefix: ["daily-video-webhook-handler:triggerRecordingReadyWebhook"] });
+
+type Booking = {
+  userId: number | undefined;
+  eventTypeId: number | null;
+  eventTypeParentId: number | null | undefined;
+  teamId?: number | null;
+};
+
+const getWebhooksByEventTrigger = async (eventTrigger: WebhookTriggerEvents, booking: Booking) => {
+  const isTeamBooking = booking.teamId;
+  const isBookingForManagedEventtype = booking.teamId && booking.eventTypeParentId;
+  const triggerForUser = !isTeamBooking || isBookingForManagedEventtype;
+  const organizerUserId = triggerForUser ? booking.userId : null;
+  const orgId = await getOrgIdFromMemberOrTeamId({ memberId: organizerUserId, teamId: booking.teamId });
+
+  const subscriberOptions = {
+    userId: organizerUserId,
+    eventTypeId: booking.eventTypeId,
+    triggerEvent: eventTrigger,
+    teamId: booking.teamId,
+    orgId,
+  };
+
+  return getWebhooks(subscriberOptions);
+};
+
+export const triggerRecordingReadyWebhook = async ({
+  evt,
+  downloadLink,
+  booking,
+}: {
+  evt: CalendarEvent;
+  downloadLink: string;
+  booking: Booking;
+}) => {
+  const eventTrigger: WebhookTriggerEvents = "RECORDING_READY";
+  const webhooks = await getWebhooksByEventTrigger(eventTrigger, booking);
+
+  log.debug(
+    "Webhooks:",
+    safeStringify({
+      webhooks,
+    })
+  );
+
+  const promises = webhooks.map((webhook) =>
+    sendPayload(webhook.secret, eventTrigger, new Date().toISOString(), webhook, {
+      ...evt,
+      downloadLink,
+    }).catch((e) => {
+      log.error(
+        `Error executing webhook for event: ${eventTrigger}, URL: ${webhook.subscriberUrl}, bookingId: ${evt.bookingId}, bookingUid: ${evt.uid}`,
+        safeStringify(e)
+      );
+    })
+  );
+  await Promise.all(promises);
+};
+
+export const triggerTranscriptionGeneratedWebhook = async ({
+  evt,
+  downloadLinks,
+  booking,
+}: {
+  evt: CalendarEvent;
+  downloadLinks?: {
+    transcription: TGetTranscriptAccessLink["transcription"];
+    recording: string;
+  };
+  booking: Booking;
+}) => {
+  const webhooks = await getWebhooksByEventTrigger(
+    WebhookTriggerEvents.RECORDING_TRANSCRIPTION_GENERATED,
+    booking
+  );
+
+  log.debug(
+    "Webhooks:",
+    safeStringify({
+      webhooks,
+    })
+  );
+
+  const promises = webhooks.map((webhook) =>
+    sendPayload(
+      webhook.secret,
+      WebhookTriggerEvents.RECORDING_TRANSCRIPTION_GENERATED,
+      new Date().toISOString(),
+      webhook,
+      {
+        ...evt,
+        downloadLinks,
+      }
+    ).catch((e) => {
+      log.error(
+        `Error executing webhook for event: ${WebhookTriggerEvents.RECORDING_TRANSCRIPTION_GENERATED}, URL: ${webhook.subscriberUrl}, bookingId: ${evt.bookingId}, bookingUid: ${evt.uid}`,
+        safeStringify(e)
+      );
+    })
+  );
+  await Promise.all(promises);
+};

calcom/apps/web/lib/ensureArray.ts

@@ -0,0 +1,9 @@
+export function ensureArray<T>(val: unknown): T[] {
+  if (Array.isArray(val)) {
+    return val;
+  }
+  if (typeof val === "undefined") {
+    return [];
+  }
+  return [val] as T[];
+}

calcom/apps/web/lib/event-types/getServerSideProps.tsx

@@ -0,0 +1,21 @@
+import type { GetServerSidePropsContext } from "next";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+
+import { ssrInit } from "@server/lib/ssr";
+
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+  const session = await getServerSession({ req: context.req, res: context.res });
+
+  if (!session) {
+    return {
+      redirect: {
+        permanent: false,
+        destination: "/auth/login",
+      },
+    };
+  }
+
+  return { props: { trpcState: ssr.dehydrate() } };
+};

calcom/apps/web/lib/getQuery.tsx

@@ -0,0 +1,11 @@
+// returns query object same as ctx.query but for app dir
+export const getQuery = (url: string, params: Record<string, string | string[]>) => {
+  if (!url.length) {
+    return params;
+  }
+
+  const { searchParams } = new URL(url);
+  const searchParamsObj = Object.fromEntries(searchParams.entries());
+
+  return { ...searchParamsObj, ...params };
+};

calcom/apps/web/lib/getTemporaryOrgRedirect.test.ts

@@ -0,0 +1,333 @@
+import prismaMock from "../../../tests/libs/__mocks__/prismaMock";
+
+import { describe, it, expect, beforeEach } from "vitest";
+
+import { RedirectType } from "@calcom/prisma/client";
+
+import { getTemporaryOrgRedirect } from "./getTemporaryOrgRedirect";
+
+const mockData = {
+  redirects: [] as {
+    toUrl: string;
+    from: string;
+    redirectType: RedirectType;
+  }[],
+};
+
+function mockARedirectInDB({
+  toUrl,
+  slug,
+  redirectType,
+}: {
+  toUrl: string;
+  slug: string;
+  redirectType: RedirectType;
+}) {
+  mockData.redirects.push({
+    toUrl,
+    from: slug,
+    redirectType,
+  });
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-ignore
+  prismaMock.tempOrgRedirect.findMany.mockImplementation(({ where }) => {
+    return new Promise((resolve) => {
+      const tempOrgRedirects: typeof mockData.redirects = [];
+      where.from.in.forEach((whereSlug: string) => {
+        const matchingRedirect = mockData.redirects.find((redirect) => {
+          return where.type === redirect.redirectType && whereSlug === redirect.from && where.fromOrgId === 0;
+        });
+        if (matchingRedirect) {
+          tempOrgRedirects.push(matchingRedirect);
+        }
+      });
+      resolve(tempOrgRedirects);
+    });
+  });
+}
+
+beforeEach(() => {
+  mockData.redirects = [];
+});
+
+describe("getTemporaryOrgRedirect", () => {
+  it("should generate event-type URL without existing query params", async () => {
+    mockARedirectInDB({ slug: "slug", toUrl: "https://calcom.cal.com", redirectType: RedirectType.User });
+    const redirect = await getTemporaryOrgRedirect({
+      slugs: "slug",
+      redirectType: RedirectType.User,
+      eventTypeSlug: "30min",
+      currentQuery: {},
+    });
+
+    expect(redirect).toEqual({
+      redirect: {
+        permanent: false,
+        destination: "https://calcom.cal.com/30min?orgRedirection=true",
+      },
+    });
+  });
+
+  it("should generate event-type URL with existing query params", async () => {
+    mockARedirectInDB({ slug: "slug", toUrl: "https://calcom.cal.com", redirectType: RedirectType.User });
+
+    const redirect = await getTemporaryOrgRedirect({
+      slugs: "slug",
+      redirectType: RedirectType.User,
+      eventTypeSlug: "30min",
+      currentQuery: {
+        abc: "1",
+      },
+    });
+
+    expect(redirect).toEqual({
+      redirect: {
+        permanent: false,
+        destination: "https://calcom.cal.com/30min?abc=1&orgRedirection=true",
+      },
+    });
+  });
+
+  it("should generate User URL with existing query params", async () => {
+    mockARedirectInDB({ slug: "slug", toUrl: "https://calcom.cal.com", redirectType: RedirectType.User });
+
+    const redirect = await getTemporaryOrgRedirect({
+      slugs: "slug",
+      redirectType: RedirectType.User,
+      eventTypeSlug: null,
+      currentQuery: {
+        abc: "1",
+      },
+    });
+
+    expect(redirect).toEqual({
+      redirect: {
+        permanent: false,
+        destination: "https://calcom.cal.com?abc=1&orgRedirection=true",
+      },
+    });
+  });
+
+  it("should generate Team Profile URL with existing query params", async () => {
+    mockARedirectInDB({
+      slug: "seeded-team",
+      toUrl: "https://calcom.cal.com",
+      redirectType: RedirectType.Team,
+    });
+
+    const redirect = await getTemporaryOrgRedirect({
+      slugs: "seeded-team",
+      redirectType: RedirectType.Team,
+      eventTypeSlug: null,
+      currentQuery: {
+        abc: "1",
+      },
+    });
+
+    expect(redirect).toEqual({
+      redirect: {
+        permanent: false,
+        destination: "https://calcom.cal.com?abc=1&orgRedirection=true",
+      },
+    });
+  });
+
+  it("should generate Team Event URL with existing query params", async () => {
+    mockARedirectInDB({
+      slug: "seeded-team",
+      toUrl: "https://calcom.cal.com",
+      redirectType: RedirectType.Team,
+    });
+
+    const redirect = await getTemporaryOrgRedirect({
+      slugs: "seeded-team",
+      redirectType: RedirectType.Team,
+      eventTypeSlug: "30min",
+      currentQuery: {
+        abc: "1",
+      },
+    });
+
+    expect(redirect).toEqual({
+      redirect: {
+        permanent: false,
+        destination: "https://calcom.cal.com/30min?abc=1&orgRedirection=true",
+      },
+    });
+  });
+
+  it("should generate Team Event URL without query params", async () => {
+    mockARedirectInDB({
+      slug: "seeded-team",
+      toUrl: "https://calcom.cal.com",
+      redirectType: RedirectType.Team,
+    });
+
+    const redirect = await getTemporaryOrgRedirect({
+      slugs: "seeded-team",
+      redirectType: RedirectType.Team,
+      eventTypeSlug: "30min",
+      currentQuery: {},
+    });
+
+    expect(redirect).toEqual({
+      redirect: {
+        permanent: false,
+        destination: "https://calcom.cal.com/30min?orgRedirection=true",
+      },
+    });
+  });
+
+  it("should generate Dynamic Group Booking Profile Url", async () => {
+    mockARedirectInDB({
+      slug: "first",
+      toUrl: "https://calcom.cal.com/first-in-org1",
+      redirectType: RedirectType.Team,
+    });
+    mockARedirectInDB({
+      slug: "second",
+      toUrl: "https://calcom.cal.com/second-in-org1",
+      redirectType: RedirectType.Team,
+    });
+
+    const redirect = await getTemporaryOrgRedirect({
+      slugs: ["first", "second"],
+      redirectType: RedirectType.Team,
+      eventTypeSlug: null,
+      currentQuery: {},
+    });
+
+    expect(redirect).toEqual({
+      redirect: {
+        permanent: false,
+        destination: "https://calcom.cal.com/first-in-org1+second-in-org1?orgRedirection=true",
+      },
+    });
+  });
+
+  it("should generate Dynamic Group Booking Profile Url - same order", async () => {
+    mockARedirectInDB({
+      slug: "second",
+      toUrl: "https://calcom.cal.com/second-in-org1",
+      redirectType: RedirectType.Team,
+    });
+    mockARedirectInDB({
+      slug: "first",
+      toUrl: "https://calcom.cal.com/first-in-org1",
+      redirectType: RedirectType.Team,
+    });
+
+    const redirect = await getTemporaryOrgRedirect({
+      slugs: ["first", "second"],
+      redirectType: RedirectType.Team,
+      eventTypeSlug: null,
+      currentQuery: {},
+    });
+
+    expect(redirect).toEqual({
+      redirect: {
+        permanent: false,
+        destination: "https://calcom.cal.com/first-in-org1+second-in-org1?orgRedirection=true",
+      },
+    });
+
+    const redirect1 = await getTemporaryOrgRedirect({
+      slugs: ["second", "first"],
+      redirectType: RedirectType.Team,
+      eventTypeSlug: null,
+      currentQuery: {},
+    });
+
+    expect(redirect1).toEqual({
+      redirect: {
+        permanent: false,
+        destination: "https://calcom.cal.com/second-in-org1+first-in-org1?orgRedirection=true",
+      },
+    });
+  });
+
+  it("should generate Dynamic Group Booking Profile Url with query params", async () => {
+    mockARedirectInDB({
+      slug: "first",
+      toUrl: "https://calcom.cal.com/first-in-org1",
+      redirectType: RedirectType.Team,
+    });
+    mockARedirectInDB({
+      slug: "second",
+      toUrl: "https://calcom.cal.com/second-in-org1",
+      redirectType: RedirectType.Team,
+    });
+
+    const redirect = await getTemporaryOrgRedirect({
+      slugs: ["first", "second"],
+      redirectType: RedirectType.Team,
+      eventTypeSlug: null,
+      currentQuery: {
+        abc: "1",
+      },
+    });
+
+    expect(redirect).toEqual({
+      redirect: {
+        permanent: false,
+        destination: "https://calcom.cal.com/first-in-org1+second-in-org1?abc=1&orgRedirection=true",
+      },
+    });
+  });
+
+  it("should generate Dynamic Group Booking EventType Url", async () => {
+    mockARedirectInDB({
+      slug: "first",
+      toUrl: "https://calcom.cal.com/first-in-org1",
+      redirectType: RedirectType.Team,
+    });
+    mockARedirectInDB({
+      slug: "second",
+      toUrl: "https://calcom.cal.com/second-in-org1",
+      redirectType: RedirectType.Team,
+    });
+
+    const redirect = await getTemporaryOrgRedirect({
+      slugs: ["first", "second"],
+      redirectType: RedirectType.Team,
+      eventTypeSlug: "30min",
+      currentQuery: {},
+    });
+
+    expect(redirect).toEqual({
+      redirect: {
+        permanent: false,
+        destination: "https://calcom.cal.com/first-in-org1+second-in-org1/30min?orgRedirection=true",
+      },
+    });
+  });
+
+  it("should generate Dynamic Group Booking EventType Url with query params", async () => {
+    mockARedirectInDB({
+      slug: "first",
+      toUrl: "https://calcom.cal.com/first-in-org1",
+      redirectType: RedirectType.Team,
+    });
+    mockARedirectInDB({
+      slug: "second",
+      toUrl: "https://calcom.cal.com/second-in-org1",
+      redirectType: RedirectType.Team,
+    });
+
+    const redirect = await getTemporaryOrgRedirect({
+      slugs: ["first", "second"],
+      redirectType: RedirectType.Team,
+      eventTypeSlug: "30min",
+      currentQuery: {
+        abc: "1",
+      },
+    });
+
+    expect(redirect).toEqual({
+      redirect: {
+        permanent: false,
+        destination: "https://calcom.cal.com/first-in-org1+second-in-org1/30min?abc=1&orgRedirection=true",
+      },
+    });
+  });
+});

calcom/apps/web/lib/getTemporaryOrgRedirect.ts

@@ -0,0 +1,71 @@
+import type { ParsedUrlQuery } from "querystring";
+import { stringify } from "querystring";
+
+import logger from "@calcom/lib/logger";
+import { safeStringify } from "@calcom/lib/safeStringify";
+import type { RedirectType } from "@calcom/prisma/client";
+
+const log = logger.getSubLogger({ prefix: ["lib", "getTemporaryOrgRedirect"] });
+export const getTemporaryOrgRedirect = async ({
+  slugs,
+  redirectType,
+  eventTypeSlug,
+  currentQuery,
+}: {
+  slugs: string[] | string;
+  redirectType: RedirectType;
+  eventTypeSlug: string | null;
+  currentQuery: ParsedUrlQuery;
+}) => {
+  const prisma = (await import("@calcom/prisma")).default;
+  slugs = slugs instanceof Array ? slugs : [slugs];
+  log.debug(
+    `Looking for redirect for`,
+    safeStringify({
+      slugs,
+      redirectType,
+      eventTypeSlug,
+    })
+  );
+
+  const redirects = await prisma.tempOrgRedirect.findMany({
+    where: {
+      type: redirectType,
+      from: {
+        in: slugs,
+      },
+      fromOrgId: 0,
+    },
+  });
+
+  const currentQueryString = stringify(currentQuery);
+  if (!redirects.length) {
+    return null;
+  }
+
+  // Use the first redirect origin as the new origin as we aren't supposed to handle different org usernames in a group
+  const newOrigin = new URL(redirects[0].toUrl).origin;
+  const query = currentQueryString ? `?${currentQueryString}&orgRedirection=true` : "?orgRedirection=true";
+  // Use the same order as in input slugs - It is important from Dynamic Group perspective as the first user's settings are used for various things
+  const newSlugs = slugs.map((slug) => {
+    const redirect = redirects.find((redirect) => redirect.from === slug);
+    if (!redirect) {
+      return slug;
+    }
+    const newSlug = new URL(redirect.toUrl).pathname.slice(1);
+    return newSlug;
+  });
+
+  const newSlug = newSlugs.join("+");
+  const newPath = newSlug ? `/${newSlug}` : "";
+
+  const newDestination = `${newOrigin}${newPath}${eventTypeSlug ? `/${eventTypeSlug}` : ""}${query}`;
+  log.debug(`Suggesting redirect from ${slugs} to ${newDestination}`);
+
+  return {
+    redirect: {
+      permanent: false,
+      destination: newDestination,
+    },
+  } as const;
+};

calcom/apps/web/lib/getting-started/[[...step]]/getServerSideProps.tsx

@@ -0,0 +1,59 @@
+import type { GetServerSidePropsContext } from "next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+
+import { getLocale } from "@calcom/features/auth/lib/getLocale";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import prisma from "@calcom/prisma";
+
+import { ssrInit } from "@server/lib/ssr";
+
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const { req } = context;
+
+  const session = await getServerSession({ req });
+
+  if (!session?.user?.id) {
+    return { redirect: { permanent: false, destination: "/auth/login" } };
+  }
+
+  const ssr = await ssrInit(context);
+
+  await ssr.viewer.me.prefetch();
+
+  const user = await prisma.user.findUnique({
+    where: {
+      id: session.user.id,
+    },
+    select: {
+      completedOnboarding: true,
+      teams: {
+        select: {
+          accepted: true,
+          team: {
+            select: {
+              id: true,
+              name: true,
+              logoUrl: true,
+            },
+          },
+        },
+      },
+    },
+  });
+
+  if (!user) {
+    throw new Error("User from session not found");
+  }
+
+  if (user.completedOnboarding) {
+    return { redirect: { permanent: false, destination: "/event-types" } };
+  }
+  const locale = await getLocale(context.req);
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ["common"])),
+      trpcState: ssr.dehydrate(),
+      hasPendingInvites: user.teams.find((team) => team.accepted === false) ?? false,
+    },
+  };
+};

calcom/apps/web/lib/hasKeyInMetadata.ts

@@ -0,0 +1,9 @@
+import isPrismaObj from "./isPrismaObj";
+
+const hasKeyInMetadata = <T extends string>(
+  x: { metadata: unknown } | null,
+  key: T
+): x is { metadata: { [key in T]: string | boolean | number } } =>
+  isPrismaObj(x?.metadata) && !!x?.metadata && key in x.metadata;
+
+export default hasKeyInMetadata;

calcom/apps/web/lib/hooks/settings/platform/oauth-clients/useOAuthClients.ts

@@ -0,0 +1,84 @@
+import { useQuery } from "@tanstack/react-query";
+
+import type { ApiSuccessResponse } from "@calcom/platform-types";
+import type { PlatformOAuthClient } from "@calcom/prisma/client";
+
+export type ManagedUser = {
+  id: number;
+  email: string;
+  username: string | null;
+  timeZone: string;
+  weekStart: string;
+  createdDate: Date;
+  timeFormat: number | null;
+  defaultScheduleId: number | null;
+};
+
+export const useOAuthClients = () => {
+  const query = useQuery<ApiSuccessResponse<PlatformOAuthClient[]>>({
+    queryKey: ["oauth-clients"],
+    queryFn: () => {
+      return fetch("/api/v2/oauth-clients", {
+        method: "get",
+        headers: { "Content-type": "application/json" },
+      }).then((res) => res.json());
+    },
+  });
+
+  return { ...query, data: query.data?.data ?? [] };
+};
+
+export const useOAuthClient = (clientId?: string) => {
+  const {
+    isLoading,
+    error,
+    data: response,
+    isFetched,
+    isError,
+    isFetching,
+    isSuccess,
+    isFetchedAfterMount,
+    refetch,
+  } = useQuery<ApiSuccessResponse<PlatformOAuthClient>>({
+    queryKey: ["oauth-client", clientId],
+    queryFn: () => {
+      return fetch(`/api/v2/oauth-clients/${clientId}`, {
+        method: "get",
+        headers: { "Content-type": "application/json" },
+      }).then((res) => res.json());
+    },
+    enabled: Boolean(clientId),
+    staleTime: Infinity,
+  });
+
+  return {
+    isLoading,
+    error,
+    data: response?.data,
+    isFetched,
+    isError,
+    isFetching,
+    isSuccess,
+    isFetchedAfterMount,
+    refetch,
+  };
+};
+export const useGetOAuthClientManagedUsers = (clientId: string) => {
+  const {
+    isLoading,
+    error,
+    data: response,
+    refetch,
+  } = useQuery<ApiSuccessResponse<ManagedUser[]>>({
+    queryKey: ["oauth-client-managed-users", clientId],
+    queryFn: () => {
+      return fetch(`/api/v2/oauth-clients/${clientId}/managed-users`, {
+        method: "get",
+        headers: { "Content-type": "application/json" },
+      }).then((res) => res.json());
+    },
+    enabled: Boolean(clientId),
+  });
+
+  return { isLoading, error, data: response?.data, refetch };
+};

calcom/apps/web/lib/hooks/settings/platform/oauth-clients/usePersistOAuthClient.ts

@@ -0,0 +1,176 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+
+import { SUCCESS_STATUS } from "@calcom/platform-constants";
+import type {
+  ApiResponse,
+  CreateOAuthClientInput,
+  DeleteOAuthClientInput,
+  SubscribeTeamInput,
+} from "@calcom/platform-types";
+import type { OAuthClient } from "@calcom/prisma/client";
+
+interface IPersistOAuthClient {
+  onSuccess?: () => void;
+  onError?: () => void;
+}
+
+export const useCreateOAuthClient = (
+  { onSuccess, onError }: IPersistOAuthClient = {
+    onSuccess: () => {
+      return;
+    },
+    onError: () => {
+      return;
+    },
+  }
+) => {
+  return useMutation<
+    ApiResponse<{ clientId: string; clientSecret: string }>,
+    unknown,
+    CreateOAuthClientInput
+  >({
+    mutationFn: (data) => {
+      return fetch("/api/v2/oauth-clients", {
+        method: "post",
+        headers: { "Content-type": "application/json" },
+        body: JSON.stringify(data),
+      }).then((res) => res.json());
+    },
+    onSuccess: (data) => {
+      if (data.status === SUCCESS_STATUS) {
+        onSuccess?.();
+      } else {
+        onError?.();
+      }
+    },
+    onError: () => {
+      onError?.();
+    },
+  });
+};
+
+export const useUpdateOAuthClient = (
+  { onSuccess, onError, clientId }: IPersistOAuthClient & { clientId?: string } = {
+    onSuccess: () => {
+      return;
+    },
+    onError: () => {
+      return;
+    },
+  }
+) => {
+  const mutation = useMutation<
+    ApiResponse<{ clientId: string; clientSecret: string }>,
+    unknown,
+    Omit<CreateOAuthClientInput, "permissions">
+  >({
+    mutationFn: (data) => {
+      return fetch(`/api/v2/oauth-clients/${clientId}`, {
+        method: "PATCH",
+        headers: { "Content-type": "application/json" },
+        body: JSON.stringify(data),
+      }).then((res) => res?.json());
+    },
+    onSuccess: (data) => {
+      if (data.status === SUCCESS_STATUS) {
+        onSuccess?.();
+      } else {
+        onError?.();
+      }
+    },
+    onError: () => {
+      onError?.();
+    },
+  });
+
+  return mutation;
+};
+
+export const useDeleteOAuthClient = (
+  { onSuccess, onError }: IPersistOAuthClient = {
+    onSuccess: () => {
+      return;
+    },
+    onError: () => {
+      return;
+    },
+  }
+) => {
+  const mutation = useMutation<ApiResponse<OAuthClient>, unknown, DeleteOAuthClientInput>({
+    mutationFn: (data) => {
+      const { id } = data;
+      return fetch(`/api/v2/oauth-clients/${id}`, {
+        method: "delete",
+        headers: { "Content-type": "application/json" },
+      }).then((res) => res?.json());
+    },
+    onSuccess: (data) => {
+      if (data.status === SUCCESS_STATUS) {
+        onSuccess?.();
+      } else {
+        onError?.();
+      }
+    },
+    onError: () => {
+      onError?.();
+    },
+  });
+
+  return mutation;
+};
+
+export const useCheckTeamBilling = (teamId?: number | null, isPlatformTeam?: boolean | null) => {
+  const QUERY_KEY = "check-team-billing";
+  const isTeamBilledAlready = useQuery({
+    queryKey: [QUERY_KEY, teamId],
+    queryFn: async () => {
+      const response = await fetch(`/api/v2/billing/${teamId}/check`, {
+        method: "get",
+        headers: { "Content-type": "application/json" },
+      });
+      const data = await response.json();
+
+      return data.data;
+    },
+    enabled: !!teamId && !!isPlatformTeam,
+  });
+
+  return isTeamBilledAlready;
+};
+
+export const useSubscribeTeamToStripe = (
+  {
+    onSuccess,
+    onError,
+    teamId,
+  }: { teamId?: number | null; onSuccess: (redirectUrl: string) => void; onError: () => void } = {
+    onSuccess: () => {
+      return;
+    },
+    onError: () => {
+      return;
+    },
+  }
+) => {
+  const mutation = useMutation<ApiResponse<{ action: string; url: string }>, unknown, SubscribeTeamInput>({
+    mutationFn: (data) => {
+      return fetch(`/api/v2/billing/${teamId}/subscribe`, {
+        method: "post",
+        headers: { "Content-type": "application/json" },
+        body: JSON.stringify(data),
+      }).then((res) => res?.json());
+    },
+    onSuccess: (data) => {
+      if (data.status === SUCCESS_STATUS) {
+        onSuccess?.(data.data?.url);
+      } else {
+        onError?.();
+      }
+    },
+    onError: () => {
+      onError?.();
+    },
+  });
+
+  return mutation;
+};

calcom/apps/web/lib/hooks/useAppsData.ts

@@ -0,0 +1,58 @@
+import type { FormValues } from "pages/event-types/[type]";
+import { useFormContext } from "react-hook-form";
+
+import type { GetAppData, SetAppData } from "@calcom/app-store/EventTypeAppContext";
+import type { EventTypeAppsList } from "@calcom/app-store/utils";
+
+const useAppsData = () => {
+  const formMethods = useFormContext<FormValues>();
+  const allAppsData = formMethods.watch("metadata")?.apps || {};
+
+  const setAllAppsData = (_allAppsData: typeof allAppsData) => {
+    formMethods.setValue(
+      "metadata",
+      {
+        ...formMethods.getValues("metadata"),
+        apps: _allAppsData,
+      },
+      { shouldDirty: true }
+    );
+  };
+
+  const getAppDataGetter = (appId: EventTypeAppsList): GetAppData => {
+    return function (key) {
+      const appData = allAppsData[appId as keyof typeof allAppsData] || {};
+      if (key) {
+        return appData[key as keyof typeof appData];
+      }
+      return appData;
+    };
+  };
+
+  const eventTypeFormMetadata = formMethods.getValues("metadata");
+
+  const getAppDataSetter = (
+    appId: EventTypeAppsList,
+    appCategories: string[],
+    credentialId?: number
+  ): SetAppData => {
+    return function (key, value) {
+      // Always get latest data available in Form because consequent calls to setData would update the Form but not allAppsData(it would update during next render)
+      const allAppsDataFromForm = formMethods.getValues("metadata")?.apps || {};
+      const appData = allAppsDataFromForm[appId];
+      setAllAppsData({
+        ...allAppsDataFromForm,
+        [appId]: {
+          ...appData,
+          [key]: value,
+          credentialId,
+          appCategories,
+        },
+      });
+    };
+  };
+
+  return { getAppDataGetter, getAppDataSetter, eventTypeFormMetadata };
+};
+
+export default useAppsData;

calcom/apps/web/lib/hooks/useCurrentUserId.ts

@@ -0,0 +1,9 @@
+import useMeQuery from "./useMeQuery";
+
+export const useCurrentUserId = () => {
+  const query = useMeQuery();
+  const user = query.data;
+  return user?.id;
+};
+
+export default useCurrentUserId;

calcom/apps/web/lib/hooks/useFileReader.ts

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+
+type ReadAsMethod = "readAsText" | "readAsDataURL" | "readAsArrayBuffer" | "readAsBinaryString";
+
+type UseFileReaderProps = {
+  method: ReadAsMethod;
+  onLoad?: (result: unknown) => void;
+};
+
+export const useFileReader = (options: UseFileReaderProps) => {
+  const { method = "readAsText", onLoad } = options;
+  const [file, setFile] = useState<File | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<DOMException | null>(null);
+  const [result, setResult] = useState<string | ArrayBuffer | null>(null);
+
+  useEffect(() => {
+    if (!file && result) {
+      setResult(null);
+    }
+  }, [file, result]);
+
+  useEffect(() => {
+    if (!file) {
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onloadstart = () => setLoading(true);
+    reader.onloadend = () => setLoading(false);
+    reader.onerror = () => setError(reader.error);
+
+    reader.onload = (e: ProgressEvent<FileReader>) => {
+      setResult(e.target?.result ?? null);
+      if (onLoad) {
+        onLoad(e.target?.result ?? null);
+      }
+    };
+    reader[method](file);
+  }, [file, method, onLoad]);
+
+  return [{ result, error, file, loading }, setFile] as const;
+};

calcom/apps/web/lib/hooks/useInViewObserver.ts

@@ -0,0 +1,42 @@
+import React from "react";
+
+const isInteractionObserverSupported = typeof window !== "undefined" && "IntersectionObserver" in window;
+
+export const useInViewObserver = (onInViewCallback: () => void) => {
+  const [node, setRef] = React.useState<HTMLElement | null>(null);
+
+  const onInViewCallbackRef = React.useRef(onInViewCallback);
+  onInViewCallbackRef.current = onInViewCallback;
+
+  React.useEffect(() => {
+    if (!isInteractionObserverSupported) {
+      // Skip interaction check if not supported in browser
+      return;
+    }
+
+    let observer: IntersectionObserver;
+    if (node && node.parentElement) {
+      observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            onInViewCallbackRef.current();
+          }
+        },
+        {
+          root: document.body,
+        }
+      );
+      observer.observe(node);
+    }
+
+    return () => {
+      if (observer) {
+        observer.disconnect();
+      }
+    };
+  }, [node]);
+
+  return {
+    ref: setRef,
+  };
+};

calcom/apps/web/lib/hooks/useIsBookingPage.ts

@@ -0,0 +1,14 @@
+import { usePathname } from "next/navigation";
+
+import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
+
+export default function useIsBookingPage(): boolean {
+  const pathname = usePathname();
+  const isBookingPage = ["/booking/", "/cancel", "/reschedule"].some((route) => pathname?.startsWith(route));
+
+  const searchParams = useCompatSearchParams();
+  const userParam = Boolean(searchParams?.get("user"));
+  const teamParam = Boolean(searchParams?.get("team"));
+
+  return isBookingPage || userParam || teamParam;
+}

calcom/apps/web/lib/hooks/useMeQuery.ts

@@ -0,0 +1,13 @@
+import { trpc } from "@calcom/trpc/react";
+
+export function useMeQuery() {
+  const meQuery = trpc.viewer.me.useQuery(undefined, {
+    retry(failureCount) {
+      return failureCount > 3;
+    },
+  });
+
+  return meQuery;
+}
+
+export default useMeQuery;

calcom/apps/web/lib/hooks/useMediaQuery.ts

@@ -0,0 +1,20 @@
+// lets refactor and move this into packages/lib/hooks/
+import { useState, useEffect } from "react";
+
+const useMediaQuery = (query: string) => {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => setMatches(media.matches);
+    window.addEventListener("resize", listener);
+    return () => window.removeEventListener("resize", listener);
+  }, [matches, query]);
+
+  return matches;
+};
+
+export default useMediaQuery;

calcom/apps/web/lib/hooks/useRouterQuery.ts

@@ -0,0 +1,28 @@
+import { usePathname, useRouter } from "next/navigation";
+import { useCallback } from "react";
+
+import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
+
+export default function useRouterQuery<T extends string>(name: T) {
+  const searchParams = useCompatSearchParams();
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const setQuery = useCallback(
+    (newValue: string | number | null | undefined) => {
+      const _searchParams = new URLSearchParams(searchParams ?? undefined);
+      if (typeof newValue === "undefined") {
+        // when newValue is of type undefined, clear the search param.
+        _searchParams.delete(name);
+      } else {
+        _searchParams.set(name, newValue as string);
+      }
+      router.replace(`${pathname}?${_searchParams.toString()}`);
+    },
+    [name, pathname, router, searchParams]
+  );
+
+  return { [name]: searchParams?.get(name), setQuery } as {
+    [K in T]: string | undefined;
+  } & { setQuery: typeof setQuery };
+}

calcom/apps/web/lib/hooks/useToggleQuery.tsx

@@ -0,0 +1,9 @@
+import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
+
+export function useToggleQuery(name: string) {
+  const searchParams = useCompatSearchParams();
+
+  return {
+    isOn: searchParams?.get(name) === "1",
+  };
+}

calcom/apps/web/lib/insights/getServerSideProps.tsx

@@ -0,0 +1,15 @@
+import { getFeatureFlag } from "@calcom/features/flags/server/utils";
+
+// If feature flag is disabled, return not found on getServerSideProps
+export const getServerSideProps = async () => {
+  const prisma = await import("@calcom/prisma").then((mod) => mod.default);
+  const insightsEnabled = await getFeatureFlag(prisma, "insights");
+
+  if (!insightsEnabled) {
+    return {
+      notFound: true,
+    } as const;
+  }
+
+  return { props: {} };
+};

calcom/apps/web/lib/isBrandingHidden.tsx

@@ -0,0 +1,3 @@
+export function isBrandingHidden(hideBrandingSetting: boolean, hasPaidPlan: boolean) {
+  return hasPaidPlan && hideBrandingSetting;
+}

calcom/apps/web/lib/isPrismaObj.ts

@@ -0,0 +1,11 @@
+import type { Prisma } from "@prisma/client";
+
+function isPrismaObj(obj: unknown): obj is Prisma.JsonObject {
+  return typeof obj === "object" && !Array.isArray(obj);
+}
+
+export function isPrismaObjOrUndefined(obj: unknown) {
+  return isPrismaObj(obj) ? obj : undefined;
+}
+
+export default isPrismaObj;

calcom/apps/web/lib/metadata.ts

@@ -0,0 +1,82 @@
+import type { Metadata } from "next";
+
+import { truncateOnWord } from "@calcom/lib/text";
+
+type RootMetadataRecipe = Readonly<{
+  twitterCreator: string;
+  twitterSite: string;
+  robots: {
+    index: boolean;
+    follow: boolean;
+  };
+}>;
+
+export type PageMetadataRecipe = Readonly<{
+  title: string;
+  canonical: string;
+  image: string;
+  description: string;
+  siteName: string;
+  metadataBase: URL;
+}>;
+
+export const prepareRootMetadata = (recipe: RootMetadataRecipe): Metadata => ({
+  icons: {
+    icon: "/favicon.icon",
+    apple: "/api/logo?type=apple-touch-icon",
+    other: [
+      {
+        rel: "icon-mask",
+        url: "/safari-pinned-tab.svg",
+        color: "#000000",
+      },
+      {
+        url: "/api/logo?type=favicon-16",
+        sizes: "16x16",
+        type: "image/png",
+      },
+      {
+        url: "/api/logo?type=favicon-32",
+        sizes: "32x32",
+        type: "image/png",
+      },
+    ],
+  },
+  manifest: "/site.webmanifest",
+  viewport: "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0",
+  robots: recipe.robots,
+  other: {
+    "application-TileColor": "#ff0000",
+  },
+  themeColor: [
+    {
+      media: "(prefers-color-scheme: light)",
+      color: "#f9fafb",
+    },
+    {
+      media: "(prefers-color-scheme: dark)",
+      color: "#1C1C1C",
+    },
+  ],
+  twitter: {
+    site: recipe.twitterSite,
+    creator: recipe.twitterCreator,
+    card: "summary_large_image",
+  },
+});
+
+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,
+});

calcom/apps/web/lib/org/[orgSlug]/[user]/[type]/getServerSideProps.tsx

@@ -0,0 +1,59 @@
+import type { GetServerSidePropsContext } from "next";
+import z from "zod";
+
+import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains";
+import slugify from "@calcom/lib/slugify";
+import prisma from "@calcom/prisma";
+
+import { getServerSideProps as GSSTeamTypePage } from "@lib/team/[slug]/[type]/getServerSideProps";
+
+import { getServerSideProps as GSSUserTypePage } from "~/users/views/users-type-public-view.getServerSideProps";
+
+const paramsSchema = z.object({
+  orgSlug: z.string().transform((s) => slugify(s)),
+  user: z.string(),
+  type: z.string().transform((s) => slugify(s)),
+});
+
+export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
+  const { user: teamOrUserSlugOrDynamicGroup, orgSlug, type } = paramsSchema.parse(ctx.params);
+  const team = await prisma.team.findFirst({
+    where: {
+      slug: slugify(teamOrUserSlugOrDynamicGroup),
+      parentId: {
+        not: null,
+      },
+      parent: getSlugOrRequestedSlug(orgSlug),
+    },
+    select: {
+      id: true,
+    },
+  });
+
+  if (team) {
+    const params = { slug: teamOrUserSlugOrDynamicGroup, type };
+    return GSSTeamTypePage({
+      ...ctx,
+      params: {
+        ...ctx.params,
+        ...params,
+      },
+      query: {
+        ...ctx.query,
+        ...params,
+      },
+    });
+  }
+  const params = { user: teamOrUserSlugOrDynamicGroup, type };
+  return GSSUserTypePage({
+    ...ctx,
+    params: {
+      ...ctx.params,
+      ...params,
+    },
+    query: {
+      ...ctx.query,
+      ...params,
+    },
+  });
+};

calcom/apps/web/lib/org/[orgSlug]/[user]/getServerSideProps.tsx

@@ -0,0 +1,35 @@
+import { getServerSideProps as GSSUserPage } from "@pages/[user]";
+import { getServerSideProps as GSSTeamPage } from "@pages/team/[slug]";
+import type { GetServerSidePropsContext } from "next";
+
+import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains";
+import prisma from "@calcom/prisma";
+
+export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
+  const team = await prisma.team.findFirst({
+    where: {
+      slug: ctx.query.user as string,
+      parentId: {
+        not: null,
+      },
+      parent: getSlugOrRequestedSlug(ctx.query.orgSlug as string),
+    },
+    select: {
+      id: true,
+    },
+  });
+  if (team) {
+    return GSSTeamPage({
+      ...ctx,
+      query: { slug: ctx.query.user, orgRedirection: ctx.query.orgRedirection },
+    });
+  }
+  return GSSUserPage({
+    ...ctx,
+    query: {
+      user: ctx.query.user,
+      redirect: ctx.query.redirect,
+      orgRedirection: ctx.query.orgRedirection,
+    },
+  });
+};

calcom/apps/web/lib/orgMigration.ts

@@ -0,0 +1,899 @@
+import { getOrgUsernameFromEmail } from "@calcom/features/auth/signup/utils/getOrgUsernameFromEmail";
+import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomains";
+import { HttpError } from "@calcom/lib/http-error";
+import logger from "@calcom/lib/logger";
+import { safeStringify } from "@calcom/lib/safeStringify";
+import { ProfileRepository } from "@calcom/lib/server/repository/profile";
+import prisma from "@calcom/prisma";
+import type { Team, User } from "@calcom/prisma/client";
+import { RedirectType } from "@calcom/prisma/client";
+import { Prisma } from "@calcom/prisma/client";
+import type { MembershipRole } from "@calcom/prisma/enums";
+import { teamMetadataSchema } from "@calcom/prisma/zod-utils";
+
+const log = logger.getSubLogger({ prefix: ["orgMigration"] });
+
+type UserMetadata = {
+  migratedToOrgFrom?: {
+    username: string;
+    reverted: boolean;
+    revertTime: string;
+    lastMigrationTime: string;
+  };
+};
+
+/**
+ * Make sure that the migration is idempotent
+ */
+export async function moveUserToOrg({
+  user: { id: userId, userName: userName },
+  targetOrg: {
+    id: targetOrgId,
+    username: targetOrgUsername,
+    membership: { role: targetOrgRole, accepted: targetOrgMembershipAccepted = true },
+  },
+  shouldMoveTeams,
+}: {
+  user: { id?: number; userName?: string };
+  targetOrg: {
+    id: number;
+    username?: string;
+    membership: { role: MembershipRole; accepted?: boolean };
+  };
+  shouldMoveTeams: boolean;
+}) {
+  assertUserIdOrUserName(userId, userName);
+  const team = await getTeamOrThrowError(targetOrgId);
+
+  const teamMetadata = teamMetadataSchema.parse(team?.metadata);
+
+  if (!team.isOrganization) {
+    throw new Error(`Team with ID:${targetOrgId} is not an Org`);
+  }
+
+  const targetOrganization = {
+    ...team,
+    metadata: teamMetadata,
+  };
+  const userToMoveToOrg = await getUniqueUserThatDoesntBelongToOrg(userName, userId, targetOrgId);
+  assertUserPartOfOtherOrg(userToMoveToOrg, userName, userId, targetOrgId);
+
+  if (!targetOrgUsername) {
+    targetOrgUsername = getOrgUsernameFromEmail(
+      userToMoveToOrg.email,
+      targetOrganization.organizationSettings?.orgAutoAcceptEmail || ""
+    );
+  }
+
+  const userWithSameUsernameInOrg = await prisma.user.findFirst({
+    where: {
+      username: targetOrgUsername,
+      organizationId: targetOrgId,
+    },
+  });
+
+  log.debug({
+    userWithSameUsernameInOrg,
+    targetOrgUsername,
+    targetOrgId,
+    userId,
+  });
+
+  if (userWithSameUsernameInOrg && userWithSameUsernameInOrg.id !== userId) {
+    throw new HttpError({
+      statusCode: 400,
+      message: `Username ${targetOrgUsername} already exists for orgId: ${targetOrgId} for some other user`,
+    });
+  }
+
+  assertUserPartOfOrgAndRemigrationAllowed(userToMoveToOrg, targetOrgId, targetOrgUsername, userId);
+
+  const orgMetadata = teamMetadata;
+
+  const userToMoveToOrgMetadata = (userToMoveToOrg.metadata || {}) as UserMetadata;
+
+  const nonOrgUserName =
+    (userToMoveToOrgMetadata.migratedToOrgFrom?.username as string) || userToMoveToOrg.username;
+  if (!nonOrgUserName) {
+    throw new HttpError({
+      statusCode: 400,
+      message: `User with id: ${userId} doesn't have a non-org username`,
+    });
+  }
+
+  await dbMoveUserToOrg({ userToMoveToOrg, targetOrgId, targetOrgUsername, nonOrgUserName });
+
+  let teamsToBeMovedToOrg;
+  if (shouldMoveTeams) {
+    teamsToBeMovedToOrg = await moveTeamsWithoutMembersToOrg({ targetOrgId, userToMoveToOrg });
+  }
+
+  await updateMembership({ targetOrgId, userToMoveToOrg, targetOrgRole, targetOrgMembershipAccepted });
+
+  await addRedirect({
+    nonOrgUserName,
+    teamsToBeMovedToOrg: teamsToBeMovedToOrg || [],
+    organization: targetOrganization,
+    targetOrgUsername,
+  });
+
+  await setOrgSlugIfNotSet(targetOrganization, orgMetadata, targetOrgId);
+
+  log.debug(`orgId:${targetOrgId} attached to userId:${userId}`);
+}
+
+/**
+ * Make sure that the migration is idempotent
+ */
+export async function removeUserFromOrg({ targetOrgId, userId }: { targetOrgId: number; userId: number }) {
+  const userToRemoveFromOrg = await prisma.user.findUnique({
+    where: {
+      id: userId,
+    },
+  });
+
+  if (!userToRemoveFromOrg) {
+    throw new HttpError({
+      statusCode: 400,
+      message: `User with id: ${userId} not found`,
+    });
+  }
+
+  if (userToRemoveFromOrg.organizationId !== targetOrgId) {
+    throw new HttpError({
+      statusCode: 400,
+      message: `User with id: ${userId} is not part of orgId: ${targetOrgId}`,
+    });
+  }
+
+  const userToRemoveFromOrgMetadata = (userToRemoveFromOrg.metadata || {}) as {
+    migratedToOrgFrom?: {
+      username: string;
+      reverted: boolean;
+      revertTime: string;
+      lastMigrationTime: string;
+    };
+  };
+
+  if (!userToRemoveFromOrgMetadata.migratedToOrgFrom) {
+    throw new HttpError({
+      statusCode: 400,
+      message: `User with id: ${userId} wasn't migrated. So, there is nothing to revert`,
+    });
+  }
+
+  const nonOrgUserName = userToRemoveFromOrgMetadata.migratedToOrgFrom.username as string;
+  if (!nonOrgUserName) {
+    throw new HttpError({
+      statusCode: 500,
+      message: `User with id: ${userId} doesn't have a non-org username`,
+    });
+  }
+
+  const teamsToBeRemovedFromOrg = await removeTeamsWithoutItsMemberFromOrg({ userToRemoveFromOrg });
+  await dbRemoveUserFromOrg({ userToRemoveFromOrg, nonOrgUserName });
+
+  await removeUserAlongWithItsTeamsRedirects({ nonOrgUserName, teamsToBeRemovedFromOrg });
+  await removeMembership({ targetOrgId, userToRemoveFromOrg });
+
+  log.debug(`orgId:${targetOrgId} attached to userId:${userId}`);
+}
+
+/**
+ * Make sure that the migration is idempotent
+ */
+export async function moveTeamToOrg({
+  targetOrg,
+  teamId,
+  moveMembers,
+}: {
+  targetOrg: { id: number; teamSlug: string };
+  teamId: number;
+  moveMembers?: boolean;
+}) {
+  const possibleOrg = await getTeamOrThrowError(targetOrg.id);
+  const { oldTeamSlug, updatedTeam } = await dbMoveTeamToOrg({ teamId, targetOrg });
+
+  const teamMetadata = teamMetadataSchema.parse(possibleOrg?.metadata);
+
+  if (!possibleOrg.isOrganization) {
+    throw new Error(`${targetOrg.id} is not an Org`);
+  }
+
+  const targetOrganization = possibleOrg;
+  const orgMetadata = teamMetadata;
+  await addTeamRedirect({
+    oldTeamSlug,
+    teamSlug: updatedTeam.slug,
+    orgSlug: targetOrganization.slug || orgMetadata?.requestedSlug || null,
+  });
+  await setOrgSlugIfNotSet({ slug: targetOrganization.slug }, orgMetadata, targetOrg.id);
+  if (moveMembers) {
+    for (const membership of updatedTeam.members) {
+      await moveUserToOrg({
+        user: {
+          id: membership.userId,
+        },
+        targetOrg: {
+          id: targetOrg.id,
+          membership: {
+            role: membership.role,
+            accepted: membership.accepted,
+          },
+        },
+        shouldMoveTeams: false,
+      });
+    }
+  }
+  log.debug(`Successfully moved team ${teamId} to org ${targetOrg.id}`);
+}
+
+/**
+ * Make sure that the migration is idempotent
+ */
+export async function removeTeamFromOrg({ targetOrgId, teamId }: { targetOrgId: number; teamId: number }) {
+  const removedTeam = await dbRemoveTeamFromOrg({ teamId });
+  await removeTeamRedirect(removedTeam.slug);
+  for (const membership of removedTeam.members) {
+    await removeUserFromOrg({
+      userId: membership.userId,
+      targetOrgId,
+    });
+  }
+  log.debug(`Successfully removed team ${teamId} from org ${targetOrgId}`);
+}
+
+async function dbMoveTeamToOrg({
+  teamId,
+  targetOrg,
+}: {
+  teamId: number;
+  targetOrg: {
+    id: number;
+    teamSlug: string;
+  };
+}) {
+  const team = await prisma.team.findUnique({
+    where: {
+      id: teamId,
+    },
+    include: {
+      members: true,
+    },
+  });
+
+  if (!team) {
+    throw new HttpError({
+      statusCode: 400,
+      message: `Team with id: ${teamId} not found`,
+    });
+  }
+
+  const teamMetadata = teamMetadataSchema.parse(team?.metadata);
+  const oldTeamSlug = teamMetadata?.migratedToOrgFrom?.teamSlug || team.slug;
+
+  const updatedTeam = await prisma.team.update({
+    where: {
+      id: teamId,
+    },
+    data: {
+      slug: targetOrg.teamSlug,
+      parentId: targetOrg.id,
+      metadata: {
+        ...teamMetadata,
+        migratedToOrgFrom: {
+          teamSlug: team.slug,
+          lastMigrationTime: new Date().toISOString(),
+        },
+      },
+    },
+    include: {
+      members: true,
+    },
+  });
+
+  return { oldTeamSlug, updatedTeam };
+}
+
+async function getUniqueUserThatDoesntBelongToOrg(
+  userName: string | undefined,
+  userId: number | undefined,
+  excludeOrgId: number
+) {
+  log.debug("getUniqueUserThatDoesntBelongToOrg", { userName, userId, excludeOrgId });
+  if (userName) {
+    const matchingUsers = await prisma.user.findMany({
+      where: {
+        username: userName,
+      },
+    });
+    const foundUsers = matchingUsers.filter(
+      (user) => user.organizationId === excludeOrgId || user.organizationId === null
+    );
+    if (foundUsers.length > 1) {
+      throw new Error(`More than one user found with username: ${userName}`);
+    }
+    return foundUsers[0];
+  } else {
+    return await prisma.user.findUnique({
+      where: {
+        id: userId,
+      },
+    });
+  }
+}
+
+async function setOrgSlugIfNotSet(
+  targetOrganization: {
+    slug: string | null;
+  },
+  orgMetadata: {
+    requestedSlug?: string | null | undefined;
+  } | null,
+  targetOrgId: number
+) {
+  if (targetOrganization.slug) {
+    return;
+  }
+
+  if (!orgMetadata?.requestedSlug) {
+    throw new HttpError({
+      statusCode: 400,
+      message: `Org with id: ${targetOrgId} doesn't have a slug. Tried using requestedSlug but that's also not present. So, all migration done but failed to set the Organization slug. Please set it manually`,
+    });
+  }
+  await setOrgSlug({
+    targetOrgId,
+    targetSlug: orgMetadata.requestedSlug,
+  });
+}
+
+function assertUserPartOfOrgAndRemigrationAllowed(
+  userToMoveToOrg: {
+    organizationId: number | null;
+  },
+  targetOrgId: number,
+  targetOrgUsername: string,
+  userId: number | undefined
+) {
+  if (userToMoveToOrg.organizationId) {
+    if (userToMoveToOrg.organizationId !== targetOrgId) {
+      throw new HttpError({
+        statusCode: 400,
+        message: `User ${targetOrgUsername} already exists for different Org with orgId: ${targetOrgId}`,
+      });
+    } else {
+      log.debug(`Redoing migration for userId: ${userId} to orgId:${targetOrgId}`);
+    }
+  }
+}
+
+async function getTeamOrThrowError(targetOrgId: number) {
+  const team = await prisma.team.findUnique({
+    where: {
+      id: targetOrgId,
+    },
+    include: {
+      organizationSettings: true,
+    },
+  });
+
+  if (!team) {
+    throw new HttpError({
+      statusCode: 400,
+      message: `Org with id: ${targetOrgId} not found`,
+    });
+  }
+  return team;
+}
+
+function assertUserPartOfOtherOrg(
+  userToMoveToOrg: {
+    organizationId: number | null;
+  } | null,
+  userName: string | undefined,
+  userId: number | undefined,
+  targetOrgId: number
+): asserts userToMoveToOrg {
+  if (!userToMoveToOrg) {
+    throw new HttpError({
+      message: `User ${userName ? userName : `ID:${userId}`} is part of an org already`,
+      statusCode: 400,
+    });
+  }
+
+  if (userToMoveToOrg.organizationId && userToMoveToOrg.organizationId !== targetOrgId) {
+    throw new HttpError({
+      message: `User is already a part of different organization ID: ${userToMoveToOrg.organizationId}`,
+      statusCode: 400,
+    });
+  }
+}
+
+function assertUserIdOrUserName(userId: number | undefined, userName: string | undefined) {
+  if (!userId && !userName) {
+    throw new HttpError({ statusCode: 400, message: "userId or userName is required" });
+  }
+  if (userId && userName) {
+    throw new HttpError({ statusCode: 400, message: "Provide either userId or userName" });
+  }
+}
+
+async function addRedirect({
+  nonOrgUserName,
+  organization,
+  targetOrgUsername,
+  teamsToBeMovedToOrg,
+}: {
+  nonOrgUserName: string | null;
+  organization: Team;
+  targetOrgUsername: string;
+  teamsToBeMovedToOrg: { slug: string | null }[];
+}) {
+  if (!nonOrgUserName) {
+    return;
+  }
+  const orgSlug = organization.slug || (organization.metadata as { requestedSlug?: string })?.requestedSlug;
+  if (!orgSlug) {
+    log.debug("No slug for org. Not adding the redirect", safeStringify({ organization, nonOrgUserName }));
+    return;
+  }
+  // If the user had a username earlier, we need to redirect it to the new org username
+  const orgUrlPrefix = getOrgFullOrigin(orgSlug);
+  log.debug({
+    orgUrlPrefix,
+    nonOrgUserName,
+    targetOrgUsername,
+  });
+
+  await prisma.tempOrgRedirect.upsert({
+    where: {
+      from_type_fromOrgId: {
+        type: RedirectType.User,
+        from: nonOrgUserName,
+        fromOrgId: 0,
+      },
+    },
+    create: {
+      type: RedirectType.User,
+      from: nonOrgUserName,
+      fromOrgId: 0,
+      toUrl: `${orgUrlPrefix}/${targetOrgUsername}`,
+    },
+    update: {
+      toUrl: `${orgUrlPrefix}/${targetOrgUsername}`,
+    },
+  });
+
+  for (const [, team] of Object.entries(teamsToBeMovedToOrg)) {
+    if (!team.slug) {
+      log.debug("No slug for team. Not adding the redirect", safeStringify({ team }));
+      continue;
+    }
+    await prisma.tempOrgRedirect.upsert({
+      where: {
+        from_type_fromOrgId: {
+          type: RedirectType.Team,
+          from: team.slug,
+          fromOrgId: 0,
+        },
+      },
+      create: {
+        type: RedirectType.Team,
+        from: team.slug,
+        fromOrgId: 0,
+        toUrl: `${orgUrlPrefix}/team/${team.slug}`,
+      },
+      update: {
+        toUrl: `${orgUrlPrefix}/team/${team.slug}`,
+      },
+    });
+  }
+}
+
+async function addTeamRedirect({
+  oldTeamSlug,
+  teamSlug,
+  orgSlug,
+}: {
+  oldTeamSlug: string | null;
+  teamSlug: string | null;
+  orgSlug: string | null;
+}) {
+  if (!oldTeamSlug) {
+    throw new HttpError({
+      statusCode: 400,
+      message: "No oldSlug for team. Not adding the redirect",
+    });
+  }
+  if (!teamSlug) {
+    throw new HttpError({
+      statusCode: 400,
+      message: "No slug for team. Not adding the redirect",
+    });
+  }
+  if (!orgSlug) {
+    log.warn(`No slug for org. Not adding the redirect`);
+    return;
+  }
+  const orgUrlPrefix = getOrgFullOrigin(orgSlug);
+
+  await prisma.tempOrgRedirect.upsert({
+    where: {
+      from_type_fromOrgId: {
+        type: RedirectType.Team,
+        from: oldTeamSlug,
+        fromOrgId: 0,
+      },
+    },
+    create: {
+      type: RedirectType.Team,
+      from: oldTeamSlug,
+      fromOrgId: 0,
+      toUrl: `${orgUrlPrefix}/${teamSlug}`,
+    },
+    update: {
+      toUrl: `${orgUrlPrefix}/${teamSlug}`,
+    },
+  });
+}
+
+async function updateMembership({
+  targetOrgId,
+  userToMoveToOrg,
+  targetOrgRole,
+  targetOrgMembershipAccepted,
+}: {
+  targetOrgId: number;
+  userToMoveToOrg: User;
+  targetOrgRole: MembershipRole;
+  targetOrgMembershipAccepted: boolean;
+}) {
+  log.debug("updateMembership", { targetOrgId, userToMoveToOrg, targetOrgRole, targetOrgMembershipAccepted });
+  await prisma.membership.upsert({
+    where: {
+      userId_teamId: {
+        teamId: targetOrgId,
+        userId: userToMoveToOrg.id,
+      },
+    },
+    create: {
+      teamId: targetOrgId,
+      userId: userToMoveToOrg.id,
+      role: targetOrgRole,
+      accepted: targetOrgMembershipAccepted,
+    },
+    update: {
+      role: targetOrgRole,
+      accepted: targetOrgMembershipAccepted,
+    },
+  });
+}
+
+async function dbMoveUserToOrg({
+  userToMoveToOrg,
+  targetOrgId,
+  targetOrgUsername,
+  nonOrgUserName,
+}: {
+  userToMoveToOrg: User;
+  targetOrgId: number;
+  targetOrgUsername: string;
+  nonOrgUserName: string | null;
+}) {
+  await prisma.user.update({
+    where: {
+      id: userToMoveToOrg.id,
+    },
+    data: {
+      organizationId: targetOrgId,
+      username: targetOrgUsername,
+      metadata: {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        ...(userToMoveToOrg.metadata || {}),
+        migratedToOrgFrom: {
+          username: nonOrgUserName,
+          lastMigrationTime: new Date().toISOString(),
+        },
+      },
+    },
+  });
+
+  await prisma.profile.upsert({
+    create: {
+      uid: ProfileRepository.generateProfileUid(),
+      userId: userToMoveToOrg.id,
+      organizationId: targetOrgId,
+      username: targetOrgUsername,
+      movedFromUser: {
+        connect: {
+          id: userToMoveToOrg.id,
+        },
+      },
+    },
+    update: {
+      organizationId: targetOrgId,
+      username: targetOrgUsername,
+      movedFromUser: {
+        connect: {
+          id: userToMoveToOrg.id,
+        },
+      },
+    },
+    where: {
+      userId_organizationId: {
+        userId: userToMoveToOrg.id,
+        organizationId: targetOrgId,
+      },
+    },
+  });
+}
+
+async function moveTeamsWithoutMembersToOrg({
+  targetOrgId,
+  userToMoveToOrg,
+}: {
+  targetOrgId: number;
+  userToMoveToOrg: User;
+}) {
+  const memberships = await prisma.membership.findMany({
+    where: {
+      userId: userToMoveToOrg.id,
+    },
+  });
+
+  const membershipTeamIds = memberships.map((m) => m.teamId);
+  const teams = await prisma.team.findMany({
+    where: {
+      id: {
+        in: membershipTeamIds,
+      },
+    },
+    select: {
+      id: true,
+      slug: true,
+      metadata: true,
+      isOrganization: true,
+    },
+  });
+
+  const teamsToBeMovedToOrg = teams
+    .map((team) => {
+      return {
+        ...team,
+        metadata: teamMetadataSchema.parse(team.metadata),
+      };
+    })
+    // Remove Orgs from the list
+    .filter((team) => !team.isOrganization);
+
+  const teamIdsToBeMovedToOrg = teamsToBeMovedToOrg.map((t) => t.id);
+
+  if (memberships.length) {
+    // Add the user's teams to the org
+    await prisma.team.updateMany({
+      where: {
+        id: {
+          in: teamIdsToBeMovedToOrg,
+        },
+      },
+      data: {
+        parentId: targetOrgId,
+      },
+    });
+  }
+  return teamsToBeMovedToOrg;
+}
+
+/**
+ * Make sure you pass it an organization ID only and not a team ID.
+ */
+async function setOrgSlug({ targetOrgId, targetSlug }: { targetOrgId: number; targetSlug: string }) {
+  await prisma.team.update({
+    where: {
+      id: targetOrgId,
+    },
+    data: {
+      slug: targetSlug,
+    },
+  });
+}
+
+async function removeTeamRedirect(teamSlug: string | null) {
+  if (!teamSlug) {
+    throw new HttpError({
+      statusCode: 400,
+      message: "No slug for team. Not removing the redirect",
+    });
+    return;
+  }
+
+  await prisma.tempOrgRedirect.deleteMany({
+    where: {
+      type: RedirectType.Team,
+      from: teamSlug,
+      fromOrgId: 0,
+    },
+  });
+}
+
+async function removeUserAlongWithItsTeamsRedirects({
+  nonOrgUserName,
+  teamsToBeRemovedFromOrg,
+}: {
+  nonOrgUserName: string | null;
+  teamsToBeRemovedFromOrg: { slug: string | null }[];
+}) {
+  if (!nonOrgUserName) {
+    return;
+  }
+
+  await prisma.tempOrgRedirect.deleteMany({
+    // This where clause is unique, so we will get only one result but using deleteMany because it doesn't throw an error if there are no rows to delete
+    where: {
+      type: RedirectType.User,
+      from: nonOrgUserName,
+      fromOrgId: 0,
+    },
+  });
+
+  for (const [, team] of Object.entries(teamsToBeRemovedFromOrg)) {
+    if (!team.slug) {
+      log.debug("No slug for team. Not removing the redirect", safeStringify({ team }));
+      continue;
+    }
+    await prisma.tempOrgRedirect.deleteMany({
+      where: {
+        type: RedirectType.Team,
+        from: team.slug,
+        fromOrgId: 0,
+      },
+    });
+  }
+}
+
+async function dbRemoveTeamFromOrg({ teamId }: { teamId: number }) {
+  const team = await prisma.team.findUnique({
+    where: {
+      id: teamId,
+    },
+  });
+
+  if (!team) {
+    throw new HttpError({
+      statusCode: 400,
+      message: `Team with id: ${teamId} not found`,
+    });
+  }
+
+  const teamMetadata = teamMetadataSchema.parse(team?.metadata);
+  try {
+    return await prisma.team.update({
+      where: {
+        id: teamId,
+      },
+      data: {
+        parentId: null,
+        slug: teamMetadata?.migratedToOrgFrom?.teamSlug || team.slug,
+        metadata: {
+          ...teamMetadata,
+          migratedToOrgFrom: {
+            reverted: true,
+            lastRevertTime: new Date().toISOString(),
+          },
+        },
+      },
+      include: {
+        members: true,
+      },
+    });
+  } catch (e) {
+    if (e instanceof Prisma.PrismaClientKnownRequestError) {
+      if (e.code === "P2002") {
+        throw new HttpError({
+          message: `Looks like the team's name is already taken by some other team outside the org or an org itself. Please change this team's name or the other team/org's name. If you rename the team that you are trying to remove from the org, you will have to manually remove the redirect from the database for that team as the slug would have changed.`,
+          statusCode: 400,
+        });
+      }
+    }
+    throw e;
+  }
+}
+
+async function removeTeamsWithoutItsMemberFromOrg({ userToRemoveFromOrg }: { userToRemoveFromOrg: User }) {
+  const memberships = await prisma.membership.findMany({
+    where: {
+      userId: userToRemoveFromOrg.id,
+    },
+  });
+
+  const membershipTeamIds = memberships.map((m) => m.teamId);
+  const teams = await prisma.team.findMany({
+    where: {
+      id: {
+        in: membershipTeamIds,
+      },
+    },
+    select: {
+      id: true,
+      slug: true,
+      metadata: true,
+      isOrganization: true,
+    },
+  });
+
+  const teamsToBeRemovedFromOrg = teams
+    .map((team) => {
+      return {
+        ...team,
+        metadata: teamMetadataSchema.parse(team.metadata),
+      };
+    })
+    // Remove Orgs from the list
+    .filter((team) => !team.isOrganization);
+
+  const teamIdsToBeRemovedFromOrg = teamsToBeRemovedFromOrg.map((t) => t.id);
+
+  if (memberships.length) {
+    // Remove the user's teams from the org
+    await prisma.team.updateMany({
+      where: {
+        id: {
+          in: teamIdsToBeRemovedFromOrg,
+        },
+      },
+      data: {
+        parentId: null,
+      },
+    });
+  }
+  return teamsToBeRemovedFromOrg;
+}
+
+async function dbRemoveUserFromOrg({
+  userToRemoveFromOrg,
+  nonOrgUserName,
+}: {
+  userToRemoveFromOrg: User;
+  nonOrgUserName: string;
+}) {
+  await prisma.user.update({
+    where: {
+      id: userToRemoveFromOrg.id,
+    },
+    data: {
+      organizationId: null,
+      username: nonOrgUserName,
+      metadata: {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        ...(userToRemoveFromOrg.metadata || {}),
+        migratedToOrgFrom: {
+          username: null,
+          reverted: true,
+          revertTime: new Date().toISOString(),
+        },
+      },
+    },
+  });
+
+  await ProfileRepository.deleteMany({
+    userIds: [userToRemoveFromOrg.id],
+  });
+}
+
+async function removeMembership({
+  targetOrgId,
+  userToRemoveFromOrg,
+}: {
+  targetOrgId: number;
+  userToRemoveFromOrg: User;
+}) {
+  await prisma.membership.deleteMany({
+    where: {
+      teamId: targetOrgId,
+      userId: userToRemoveFromOrg.id,
+    },
+  });
+}

calcom/apps/web/lib/settings/license-keys/new/getServerSideProps.tsx

@@ -0,0 +1,22 @@
+import type { GetServerSidePropsContext } from "next";
+
+import { getServerSession } from "@calcom/feature-auth/lib/getServerSession";
+import { AUTH_OPTIONS } from "@calcom/feature-auth/lib/next-auth-options";
+
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const session = await getServerSession({
+    req: context.req,
+    res: context.res,
+    authOptions: AUTH_OPTIONS,
+  });
+  // Disable this check if we ever make this self serve.
+  if (session?.user.role !== "ADMIN") {
+    return {
+      notFound: true,
+    } as const;
+  }
+
+  return {
+    props: {},
+  };
+};

calcom/apps/web/lib/settings/organizations/new/getServerSideProps.tsx

@@ -0,0 +1,22 @@
+import type { GetServerSidePropsContext } from "next";
+
+import { getFeatureFlag } from "@calcom/features/flags/server/utils";
+
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const prisma = await import("@calcom/prisma").then((mod) => mod.default);
+  const organizations = await getFeatureFlag(prisma, "organizations");
+  // Check if organizations are enabled
+  if (!organizations) {
+    return {
+      notFound: true,
+    } as const;
+  }
+
+  const querySlug = context.query.slug as string;
+
+  return {
+    props: {
+      querySlug: querySlug ?? null,
+    },
+  };
+};

calcom/apps/web/lib/settings/platform/utils.ts

@@ -0,0 +1,106 @@
+import type { IconName } from "@calcom/ui";
+
+type IndividualPlatformPlan = {
+  plan: string;
+  description: string;
+  pricing?: number;
+  includes: string[];
+};
+
+type HelpCardInfo = {
+  icon: IconName;
+  variant: "basic" | "ProfileCard" | "SidebarCard" | null;
+  title: string;
+  description: string;
+  actionButton: {
+    href: string;
+    child: string;
+  };
+};
+
+// if pricing or plans change in future modify this
+export const platformPlans: IndividualPlatformPlan[] = [
+  {
+    plan: "Starter",
+    description:
+      "Perfect for just getting started with community support and access to hosted platform APIs, Cal.com Atoms (React components) and more.",
+    pricing: 99,
+    includes: [
+      "Up to 100 bookings a month",
+      "Community Support",
+      "Cal Atoms (React Library)",
+      "Platform APIs",
+      "Admin APIs",
+    ],
+  },
+  {
+    plan: "Essentials",
+    description:
+      "Your essential package with sophisticated support, hosted platform APIs, Cal.com Atoms (React components) and more.",
+    pricing: 299,
+    includes: [
+      "Up to 500 bookings a month. $0,60 overage beyond",
+      "Everything in Starter",
+      "Cal Atoms (React Library)",
+      "User Management and Analytics",
+      "Technical Account Manager and Onboarding Support",
+    ],
+  },
+  {
+    plan: "Scale",
+    description:
+      "The best all-in-one plan to scale your company. Everything you need to provide scheduling for the masses, without breaking things.",
+    pricing: 2499,
+    includes: [
+      "Up to 5000 bookings a month. $0.50 overage beyond",
+      "Everything in Essentials",
+      "Credential import from other platforms",
+      "Compliance Check SOC2, HIPAA",
+      "One-on-one developer calls",
+      "Help with Credentials Verification (Zoom, Google App Store)",
+      "Expedited features and integrations",
+      "SLA (99.999% uptime)",
+    ],
+  },
+  {
+    plan: "Enterprise",
+    description: "Everything in Scale with generous volume discounts beyond 50,000 bookings a month.",
+    includes: ["Beyond 50,000 bookings a month", "Everything in Scale", "Up to 50% discount on overages"],
+  },
+];
+
+export const helpCards: HelpCardInfo[] = [
+  {
+    icon: "rocket",
+    title: "Try our Platform Starter Kit",
+    description:
+      "If you are building a marketplace or platform from scratch, our Platform Starter Kit has everything you need.",
+    variant: "basic",
+    actionButton: {
+      href: "https://experts.cal.com",
+      child: "Try the Demo",
+    },
+  },
+  {
+    icon: "github",
+    title: "Get the Source code",
+    description:
+      "Our Platform Starter Kit is being used in production by Cal.com itself. You can find the ready-to-rock source code on GitHub.",
+    variant: "basic",
+    actionButton: {
+      href: "https://github.com/calcom/examples",
+      child: "GitHub",
+    },
+  },
+  {
+    icon: "calendar-check-2",
+    title: "Contact us",
+    description:
+      "Book our engineering team for a 15 minute onboarding call and debug a problem. Please come prepared with questions.",
+    variant: "basic",
+    actionButton: {
+      href: "https://i.cal.com/platform",
+      child: "Schedule a call",
+    },
+  },
+];

calcom/apps/web/lib/signup/getServerSideProps.tsx

@@ -0,0 +1,191 @@
+import type { GetServerSidePropsContext } from "next";
+import { z } from "zod";
+
+import { getOrgUsernameFromEmail } from "@calcom/features/auth/signup/utils/getOrgUsernameFromEmail";
+import { checkPremiumUsername } from "@calcom/features/ee/common/lib/checkPremiumUsername";
+import { isSAMLLoginEnabled } from "@calcom/features/ee/sso/lib/saml";
+import { getFeatureFlag } from "@calcom/features/flags/server/utils";
+import { IS_SELF_HOSTED, WEBAPP_URL } from "@calcom/lib/constants";
+import slugify from "@calcom/lib/slugify";
+import { teamMetadataSchema } from "@calcom/prisma/zod-utils";
+
+import { IS_GOOGLE_LOGIN_ENABLED } from "@server/lib/constants";
+import { ssrInit } from "@server/lib/ssr";
+
+const checkValidEmail = (email: string) => z.string().email().safeParse(email).success;
+
+const querySchema = z.object({
+  username: z
+    .string()
+    .optional()
+    .transform((val) => val || ""),
+  email: z.string().email().optional(),
+});
+
+export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
+  const prisma = await import("@calcom/prisma").then((mod) => mod.default);
+  const emailVerificationEnabled = await getFeatureFlag(prisma, "email-verification");
+  await ssrInit(ctx);
+  const signupDisabled = await getFeatureFlag(prisma, "disable-signup");
+
+  const token = z.string().optional().parse(ctx.query.token);
+  const redirectUrlData = z
+    .string()
+    .refine((value) => value.startsWith(WEBAPP_URL), {
+      params: (value: string) => ({ value }),
+      message: "Redirect URL must start with 'cal.com'",
+    })
+    .optional()
+    .safeParse(ctx.query.redirect);
+
+  const redirectUrl = redirectUrlData.success && redirectUrlData.data ? redirectUrlData.data : null;
+
+  const props = {
+    redirectUrl,
+    isGoogleLoginEnabled: IS_GOOGLE_LOGIN_ENABLED,
+    isSAMLLoginEnabled,
+    prepopulateFormValues: undefined,
+    emailVerificationEnabled,
+  };
+
+  // username + email prepopulated from query params
+  const { username: preFillusername, email: prefilEmail } = querySchema.parse(ctx.query);
+
+  if ((process.env.NEXT_PUBLIC_DISABLE_SIGNUP === "true" && !token) || signupDisabled) {
+    return {
+      redirect: {
+        permanent: false,
+        destination: `/auth/error?error=Bitte melde dich bei uns, wenn du interesse an einem BLS cal Account hast`,
+      },
+    } as const;
+  }
+
+  // no token given, treat as a normal signup without verification token
+  if (!token) {
+    return {
+      props: JSON.parse(
+        JSON.stringify({
+          ...props,
+          prepopulateFormValues: {
+            username: preFillusername || null,
+            email: prefilEmail || null,
+          },
+        })
+      ),
+    };
+  }
+
+  const verificationToken = await prisma.verificationToken.findUnique({
+    where: {
+      token,
+    },
+    include: {
+      team: {
+        select: {
+          metadata: true,
+          isOrganization: true,
+          parentId: true,
+          parent: {
+            select: {
+              slug: true,
+              isOrganization: true,
+              organizationSettings: true,
+            },
+          },
+          slug: true,
+          organizationSettings: true,
+        },
+      },
+    },
+  });
+
+  if (!verificationToken || verificationToken.expires < new Date()) {
+    return {
+      redirect: {
+        permanent: false,
+        destination: `/auth/error?error=Token zur Verifizierung fehlt oder ist abgelaufen`,
+      },
+    } as const;
+  }
+
+  const existingUser = await prisma.user.findFirst({
+    where: {
+      AND: [
+        {
+          email: verificationToken?.identifier,
+        },
+        {
+          emailVerified: {
+            not: null,
+          },
+        },
+      ],
+    },
+  });
+
+  if (existingUser) {
+    return {
+      redirect: {
+        permanent: false,
+        destination: `/auth/login?callbackUrl=${WEBAPP_URL}/${ctx.query.callbackUrl}`,
+      },
+    };
+  }
+
+  const guessUsernameFromEmail = (email: string) => {
+    const [username] = email.split("@");
+    return username;
+  };
+
+  let username = guessUsernameFromEmail(verificationToken.identifier);
+
+  const tokenTeam = {
+    ...verificationToken?.team,
+    metadata: teamMetadataSchema.parse(verificationToken?.team?.metadata),
+  };
+
+  const isATeamInOrganization = tokenTeam?.parentId !== null;
+  // Detect if the team is an org by either the metadata flag or if it has a parent team
+  const isOrganization = tokenTeam.isOrganization;
+  const isOrganizationOrATeamInOrganization = isOrganization || isATeamInOrganization;
+  // If we are dealing with an org, the slug may come from the team itself or its parent
+  const orgSlug = isOrganizationOrATeamInOrganization
+    ? tokenTeam.metadata?.requestedSlug || tokenTeam.parent?.slug || tokenTeam.slug
+    : null;
+
+  // Org context shouldn't check if a username is premium
+  if (!IS_SELF_HOSTED && !isOrganizationOrATeamInOrganization) {
+    // Im not sure we actually hit this because of next redirects signup to website repo - but just in case this is pretty cool :)
+    const { available, suggestion } = await checkPremiumUsername(username);
+
+    username = available ? username : suggestion || username;
+  }
+
+  const isValidEmail = checkValidEmail(verificationToken.identifier);
+  const isOrgInviteByLink = isOrganizationOrATeamInOrganization && !isValidEmail;
+  const parentOrgSettings = tokenTeam?.parent?.organizationSettings ?? null;
+
+  return {
+    props: {
+      ...props,
+      token,
+      prepopulateFormValues: !isOrgInviteByLink
+        ? {
+            email: verificationToken.identifier,
+            username: isOrganizationOrATeamInOrganization
+              ? getOrgUsernameFromEmail(
+                  verificationToken.identifier,
+                  (isOrganization
+                    ? tokenTeam.organizationSettings?.orgAutoAcceptEmail
+                    : parentOrgSettings?.orgAutoAcceptEmail) || ""
+                )
+              : slugify(username),
+          }
+        : null,
+      orgSlug,
+      orgAutoAcceptEmail: isOrgInviteByLink
+        ? tokenTeam?.organizationSettings?.orgAutoAcceptEmail ?? parentOrgSettings?.orgAutoAcceptEmail ?? null
+        : null,
+    },
+  };
+};

calcom/apps/web/lib/team/[slug]/[type]/getServerSideProps.tsx

@@ -0,0 +1,102 @@
+import type { GetServerSidePropsContext } from "next";
+import { z } from "zod";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { getBookingForReschedule } from "@calcom/features/bookings/lib/get-booking";
+import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
+import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains";
+import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
+import slugify from "@calcom/lib/slugify";
+import prisma from "@calcom/prisma";
+import { RedirectType } from "@calcom/prisma/client";
+
+import { getTemporaryOrgRedirect } from "@lib/getTemporaryOrgRedirect";
+
+const paramsSchema = z.object({
+  type: z.string().transform((s) => slugify(s)),
+  slug: z.string().transform((s) => slugify(s)),
+});
+
+// Booker page fetches a tiny bit of data server side:
+// 1. Check if team exists, to show 404
+// 2. If rescheduling, get the booking details
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const session = await getServerSession(context);
+  const { slug: teamSlug, type: meetingSlug } = paramsSchema.parse(context.params);
+  const { rescheduleUid, duration: queryDuration, isInstantMeeting: queryIsInstantMeeting } = context.query;
+  const { ssrInit } = await import("@server/lib/ssr");
+  const ssr = await ssrInit(context);
+  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req, context.params?.orgSlug);
+  const isOrgContext = currentOrgDomain && isValidOrgDomain;
+
+  if (!isOrgContext) {
+    const redirect = await getTemporaryOrgRedirect({
+      slugs: teamSlug,
+      redirectType: RedirectType.Team,
+      eventTypeSlug: meetingSlug,
+      currentQuery: context.query,
+    });
+
+    if (redirect) {
+      return redirect;
+    }
+  }
+
+  const team = await prisma.team.findFirst({
+    where: {
+      ...getSlugOrRequestedSlug(teamSlug),
+      parent: isValidOrgDomain && currentOrgDomain ? getSlugOrRequestedSlug(currentOrgDomain) : null,
+    },
+    select: {
+      id: true,
+      hideBranding: true,
+    },
+  });
+
+  if (!team) {
+    return {
+      notFound: true,
+    } as const;
+  }
+
+  let booking: GetBookingType | null = null;
+  if (rescheduleUid) {
+    booking = await getBookingForReschedule(`${rescheduleUid}`, session?.user?.id);
+  }
+
+  const org = isValidOrgDomain ? currentOrgDomain : null;
+  // We use this to both prefetch the query on the server,
+  // as well as to check if the event exist, so we c an show a 404 otherwise.
+  const eventData = await ssr.viewer.public.event.fetch({
+    username: teamSlug,
+    eventSlug: meetingSlug,
+    isTeamEvent: true,
+    org,
+    fromRedirectOfNonOrgLink: context.query.orgRedirection === "true",
+  });
+
+  if (!eventData) {
+    return {
+      notFound: true,
+    } as const;
+  }
+
+  return {
+    props: {
+      eventData: {
+        entity: eventData.entity,
+        length: eventData.length,
+        metadata: eventData.metadata,
+      },
+      booking,
+      user: teamSlug,
+      teamId: team.id,
+      slug: meetingSlug,
+      trpcState: ssr.dehydrate(),
+      isBrandingHidden: team?.hideBranding,
+      isInstantMeeting: eventData.isInstantEvent && queryIsInstantMeeting ? true : false,
+      themeBasis: null,
+      orgBannerUrl: eventData?.team?.parent?.bannerUrl ?? "",
+    },
+  };
+};

calcom/apps/web/lib/team/[slug]/getServerSideProps.tsx

@@ -0,0 +1,223 @@
+import type { GetServerSidePropsContext } from "next";
+
+import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
+import { getFeatureFlag } from "@calcom/features/flags/server/utils";
+import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
+import { getBookerBaseUrlSync } from "@calcom/lib/getBookerUrl/client";
+import logger from "@calcom/lib/logger";
+import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
+import { getTeamWithMembers } from "@calcom/lib/server/queries/teams";
+import slugify from "@calcom/lib/slugify";
+import { stripMarkdown } from "@calcom/lib/stripMarkdown";
+import prisma from "@calcom/prisma";
+import type { Team } from "@calcom/prisma/client";
+import { RedirectType } from "@calcom/prisma/client";
+import { teamMetadataSchema } from "@calcom/prisma/zod-utils";
+
+import { getTemporaryOrgRedirect } from "@lib/getTemporaryOrgRedirect";
+
+import { ssrInit } from "@server/lib/ssr";
+
+const log = logger.getSubLogger({ prefix: ["team/[slug]"] });
+
+const getTheLastArrayElement = (value: ReadonlyArray<string> | string | undefined): string | undefined => {
+  if (value === undefined || typeof value === "string") {
+    return value;
+  }
+
+  return value.at(-1);
+};
+
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const slug = getTheLastArrayElement(context.query.slug) ?? getTheLastArrayElement(context.query.orgSlug);
+
+  const { isValidOrgDomain, currentOrgDomain } = orgDomainConfig(
+    context.req,
+    context.params?.orgSlug ?? context.query?.orgSlug
+  );
+  const isOrgContext = isValidOrgDomain && currentOrgDomain;
+
+  // Provided by Rewrite from next.config.js
+  const isOrgProfile = context.query?.isOrgProfile === "1";
+  const organizationsEnabled = await getFeatureFlag(prisma, "organizations");
+
+  log.debug("getServerSideProps", {
+    isOrgProfile,
+    isOrganizationFeatureEnabled: organizationsEnabled,
+    isValidOrgDomain,
+    currentOrgDomain,
+  });
+
+  const team = await getTeamWithMembers({
+    // It only finds those teams that have slug set. So, if only requestedSlug is set, it won't get that team
+    slug: slugify(slug ?? ""),
+    orgSlug: currentOrgDomain,
+    isTeamView: true,
+    isOrgView: isValidOrgDomain && isOrgProfile,
+  });
+
+  if (!isOrgContext && slug) {
+    const redirect = await getTemporaryOrgRedirect({
+      slugs: slug,
+      redirectType: RedirectType.Team,
+      eventTypeSlug: null,
+      currentQuery: context.query,
+    });
+
+    if (redirect) {
+      return redirect;
+    }
+  }
+
+  const ssr = await ssrInit(context);
+  const metadata = teamMetadataSchema.parse(team?.metadata ?? {});
+
+  // Taking care of sub-teams and orgs
+  if (
+    (!isValidOrgDomain && team?.parent) ||
+    (!isValidOrgDomain && !!team?.isOrganization) ||
+    !organizationsEnabled
+  ) {
+    return { notFound: true } as const;
+  }
+
+  if (!team) {
+    // Because we are fetching by requestedSlug being set, it can either be an organization or a regular team. But it can't be a sub-team i.e.
+    const unpublishedTeam = await prisma.team.findFirst({
+      where: {
+        metadata: {
+          path: ["requestedSlug"],
+          equals: slug,
+        },
+      },
+      include: {
+        parent: {
+          select: {
+            id: true,
+            slug: true,
+            name: true,
+            isPrivate: true,
+            isOrganization: true,
+            metadata: true,
+            logoUrl: true,
+          },
+        },
+      },
+    });
+
+    if (!unpublishedTeam) return { notFound: true } as const;
+    const teamParent = unpublishedTeam.parent ? getTeamWithoutMetadata(unpublishedTeam.parent) : null;
+    return {
+      props: {
+        considerUnpublished: true,
+        team: {
+          ...unpublishedTeam,
+          parent: teamParent,
+          createdAt: null,
+        },
+        trpcState: ssr.dehydrate(),
+      },
+    } as const;
+  }
+
+  const isTeamOrParentOrgPrivate = team.isPrivate || (team.parent?.isOrganization && team.parent?.isPrivate);
+
+  team.eventTypes =
+    team.eventTypes?.map((type) => ({
+      ...type,
+      users: !isTeamOrParentOrgPrivate
+        ? type.users.map((user) => ({
+            ...user,
+            avatar: getUserAvatarUrl(user),
+          }))
+        : [],
+      descriptionAsSafeHTML: markdownToSafeHTML(type.description),
+    })) ?? null;
+
+  const safeBio = markdownToSafeHTML(team.bio) || "";
+
+  const members = !isTeamOrParentOrgPrivate
+    ? team.members.map((member) => {
+        return {
+          name: member.name,
+          id: member.id,
+          avatarUrl: member.avatarUrl,
+          bio: member.bio,
+          profile: member.profile,
+          subteams: member.subteams,
+          username: member.username,
+          accepted: member.accepted,
+          organizationId: member.organizationId,
+          safeBio: markdownToSafeHTML(member.bio || ""),
+          bookerUrl: getBookerBaseUrlSync(member.organization?.slug || ""),
+        };
+      })
+    : [];
+
+  const markdownStrippedBio = stripMarkdown(team?.bio || "");
+
+  const serializableTeam = getSerializableTeam(team);
+
+  // For a team or Organization we check if it's unpublished
+  // For a subteam, we check if the parent org is unpublished. A subteam can't be unpublished in itself
+  const isUnpublished = team.parent ? !team.parent.slug : !team.slug;
+  const isARedirectFromNonOrgLink = context.query.orgRedirection === "true";
+
+  const considerUnpublished = isUnpublished && !isARedirectFromNonOrgLink;
+
+  if (considerUnpublished) {
+    return {
+      props: {
+        considerUnpublished: true,
+        team: { ...serializableTeam },
+        trpcState: ssr.dehydrate(),
+      },
+    } as const;
+  }
+
+  return {
+    props: {
+      team: {
+        ...serializableTeam,
+        safeBio,
+        members,
+        metadata,
+        children: isTeamOrParentOrgPrivate ? [] : team.children,
+      },
+      themeBasis: serializableTeam.slug,
+      trpcState: ssr.dehydrate(),
+      markdownStrippedBio,
+      isValidOrgDomain,
+      currentOrgDomain,
+    },
+  } as const;
+};
+
+/**
+ * Removes sensitive data from team and ensures that the object is serialiable by Next.js
+ */
+function getSerializableTeam(team: NonNullable<Awaited<ReturnType<typeof getTeamWithMembers>>>) {
+  const { inviteToken: _inviteToken, ...serializableTeam } = team;
+
+  const teamParent = team.parent ? getTeamWithoutMetadata(team.parent) : null;
+
+  return {
+    ...serializableTeam,
+    parent: teamParent,
+  };
+}
+
+/**
+ * Removes metadata from team and just adds requestedSlug
+ */
+function getTeamWithoutMetadata<T extends Pick<Team, "metadata">>(team: T) {
+  const { metadata, ...rest } = team;
+  const teamMetadata = teamMetadataSchema.parse(metadata);
+  return {
+    ...rest,
+    // add requestedSlug if available.
+    ...(typeof teamMetadata?.requestedSlug !== "undefined"
+      ? { requestedSlug: teamMetadata?.requestedSlug }
+      : {}),
+  };
+}

calcom/apps/web/lib/teams/getServerSideProps.tsx

@@ -0,0 +1,25 @@
+import type { GetServerSidePropsContext } from "next";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+
+import { ssrInit } from "@server/lib/ssr";
+
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+  await ssr.viewer.me.prefetch();
+  const session = await getServerSession({ req: context.req, res: context.res });
+  const token = Array.isArray(context.query?.token) ? context.query.token[0] : context.query?.token;
+
+  const callbackUrl = token ? `/teams?token=${encodeURIComponent(token)}` : null;
+
+  if (!session) {
+    return {
+      redirect: {
+        destination: callbackUrl ? `/auth/login?callbackUrl=${callbackUrl}` : "/auth/login",
+        permanent: false,
+      },
+    };
+  }
+
+  return { props: { trpcState: ssr.dehydrate() } };
+};

calcom/apps/web/lib/types/booking.ts

@@ -0,0 +1,3 @@
+export type BookingResponse = Awaited<
+  ReturnType<typeof import("@calcom/features/bookings/lib/handleNewBooking").default>
+>;

calcom/apps/web/lib/types/inferSSRProps.ts

@@ -0,0 +1,10 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+type GetSSRResult<TProps> =
+  //
+  { props: TProps } | { redirect: { destination: string; permanent: boolean } } | { notFound: boolean };
+
+type GetSSRFn<TProps> = (...args: any[]) => Promise<GetSSRResult<TProps>>;
+
+export type inferSSRProps<TFn extends GetSSRFn<any>> = TFn extends GetSSRFn<infer TProps>
+  ? NonNullable<TProps>
+  : never;

calcom/apps/web/lib/types/schedule.ts

@@ -0,0 +1,27 @@
+export type TimeRange = {
+  start: Date;
+  end: Date;
+};
+
+export type Schedule = TimeRange[][];
+
+/**
+ * ```text
+ * Ensure startTime and endTime in minutes since midnight; serialized to UTC by using the organizer timeZone, either by using the schedule timeZone or the user timeZone.
+ * @see lib/availability.ts getWorkingHours(timeZone: string, availability: Availability[])
+ * ```
+ */
+export type WorkingHours = {
+  days: number[];
+  startTime: number;
+  endTime: number;
+};
+
+export type TravelSchedule = {
+  id: number;
+  timeZone: string;
+  userId: number;
+  startDate: Date;
+  endDate: Date | null;
+  prevTimeZone: string | null;
+};

calcom/apps/web/lib/withEmbedSsr.test.ts

@@ -0,0 +1,258 @@
+import type { Request, Response } from "express";
+import type { Redirect } from "next";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { createMocks } from "node-mocks-http";
+import { describe, expect, it } from "vitest";
+
+import withEmbedSsr from "./withEmbedSsr";
+
+export type CustomNextApiRequest = NextApiRequest & Request;
+
+export type CustomNextApiResponse = NextApiResponse & Response;
+export function createMockNextJsRequest(...args: Parameters<typeof createMocks>) {
+  return createMocks<CustomNextApiRequest, CustomNextApiResponse>(...args);
+}
+
+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");
+}
+
+function getServerSidePropsContextArg({
+  embedRelatedParams,
+}: {
+  embedRelatedParams?: Record<string, string>;
+}) {
+  return {
+    ...createMockNextJsRequest(),
+    query: {
+      ...embedRelatedParams,
+    },
+    resolvedUrl: "/MOCKED_RESOLVED_URL",
+  };
+}
+
+describe("withEmbedSsr", () => {
+  describe("when gSSP returns redirect", () => {
+    describe("when redirect destination is relative, should add /embed to end of the path", () => {
+      it("should add layout and embed params from the current query", async () => {
+        const withEmbedGetSsr = withEmbedSsr(
+          getServerSidePropsFnGenerator({
+            redirectUrl: "/reschedule",
+          })
+        );
+
+        const ret = await withEmbedGetSsr(
+          getServerSidePropsContextArg({
+            embedRelatedParams: {
+              layout: "week_view",
+              embed: "namespace1",
+            },
+          })
+        );
+        expect(ret).toEqual({
+          redirect: {
+            destination: "/reschedule/embed?layout=week_view&embed=namespace1",
+            permanent: false,
+          },
+        });
+      });
+
+      it("should add layout and embed params without losing query params that were in redirect", async () => {
+        const withEmbedGetSsr = withEmbedSsr(
+          getServerSidePropsFnGenerator({
+            redirectUrl: "/reschedule?redirectParam=1",
+          })
+        );
+
+        const ret = await withEmbedGetSsr(
+          getServerSidePropsContextArg({
+            embedRelatedParams: {
+              layout: "week_view",
+              embed: "namespace1",
+            },
+          })
+        );
+        expect(ret).toEqual({
+          redirect: {
+            destination: "/reschedule/embed?redirectParam=1&layout=week_view&embed=namespace1",
+            permanent: false,
+          },
+        });
+      });
+
+      it("should add embed param even when it was empty(i.e. default namespace of embed)", async () => {
+        const withEmbedGetSsr = withEmbedSsr(
+          getServerSidePropsFnGenerator({
+            redirectUrl: "/reschedule?redirectParam=1",
+          })
+        );
+
+        const ret = await withEmbedGetSsr(
+          getServerSidePropsContextArg({
+            embedRelatedParams: {
+              layout: "week_view",
+              embed: "",
+            },
+          })
+        );
+        expect(ret).toEqual({
+          redirect: {
+            destination: "/reschedule/embed?redirectParam=1&layout=week_view&embed=",
+            permanent: false,
+          },
+        });
+      });
+    });
+
+    describe("when redirect destination is absolute, should add /embed to end of the path", () => {
+      it("should add layout and embed params from the current query when destination URL is HTTPS", async () => {
+        const withEmbedGetSsr = withEmbedSsr(
+          getServerSidePropsFnGenerator({
+            redirectUrl: "https://calcom.cal.local/owner",
+          })
+        );
+
+        const ret = await withEmbedGetSsr(
+          getServerSidePropsContextArg({
+            embedRelatedParams: {
+              layout: "week_view",
+              embed: "namespace1",
+            },
+          })
+        );
+
+        expect(ret).toEqual({
+          redirect: {
+            destination: "https://calcom.cal.local/owner/embed?layout=week_view&embed=namespace1",
+            permanent: false,
+          },
+        });
+      });
+      it("should add layout and embed params from the current query when destination URL is HTTP", async () => {
+        const withEmbedGetSsr = withEmbedSsr(
+          getServerSidePropsFnGenerator({
+            redirectUrl: "http://calcom.cal.local/owner",
+          })
+        );
+
+        const ret = await withEmbedGetSsr(
+          getServerSidePropsContextArg({
+            embedRelatedParams: {
+              layout: "week_view",
+              embed: "namespace1",
+            },
+          })
+        );
+
+        expect(ret).toEqual({
+          redirect: {
+            destination: "http://calcom.cal.local/owner/embed?layout=week_view&embed=namespace1",
+            permanent: false,
+          },
+        });
+      });
+      it("should correctly identify a URL as non absolute URL if protocol is missing", async () => {
+        const withEmbedGetSsr = withEmbedSsr(
+          getServerSidePropsFnGenerator({
+            redirectUrl: "httpcalcom.cal.local/owner",
+          })
+        );
+
+        const ret = await withEmbedGetSsr(
+          getServerSidePropsContextArg({
+            embedRelatedParams: {
+              layout: "week_view",
+              embed: "namespace1",
+            },
+          })
+        );
+
+        expect(ret).toEqual({
+          redirect: {
+            // FIXME: Note that it is adding a / in the beginning of the path, which might be fine for now, but could be an issue
+            destination: "/httpcalcom.cal.local/owner/embed?layout=week_view&embed=namespace1",
+            permanent: false,
+          },
+        });
+      });
+    });
+  });
+
+  describe("when gSSP returns props", () => {
+    it("should add isEmbed=true prop", async () => {
+      const withEmbedGetSsr = withEmbedSsr(
+        getServerSidePropsFnGenerator({
+          props: {
+            prop1: "value1",
+          },
+        })
+      );
+      const ret = await withEmbedGetSsr(
+        getServerSidePropsContextArg({
+          embedRelatedParams: {
+            layout: "week_view",
+            embed: "",
+          },
+        })
+      );
+      expect(ret).toEqual({
+        props: {
+          prop1: "value1",
+          isEmbed: true,
+        },
+      });
+    });
+  });
+
+  describe("when gSSP doesn't have props or redirect ", () => {
+    it("should return the result from gSSP as is", async () => {
+      const withEmbedGetSsr = withEmbedSsr(
+        getServerSidePropsFnGenerator({
+          notFound: true,
+        })
+      );
+
+      const ret = await withEmbedGetSsr(
+        getServerSidePropsContextArg({
+          embedRelatedParams: {
+            layout: "week_view",
+            embed: "",
+          },
+        })
+      );
+
+      expect(ret).toEqual({ notFound: true });
+    });
+  });
+});

calcom/apps/web/lib/withEmbedSsr.tsx

@@ -0,0 +1,55 @@
+import type { GetServerSideProps, GetServerSidePropsContext, GetServerSidePropsResult } from "next";
+
+import { WebAppURL } from "@calcom/lib/WebAppURL";
+
+export type EmbedProps = {
+  isEmbed?: boolean;
+};
+
+export default function withEmbedSsr(getServerSideProps: GetServerSideProps) {
+  return async (context: GetServerSidePropsContext): Promise<GetServerSidePropsResult<EmbedProps>> => {
+    const ssrResponse = await getServerSideProps(context);
+    const embed = context.query.embed;
+    const layout = context.query.layout;
+
+    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(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}`;
+      return {
+        ...ssrResponse,
+        redirect: {
+          ...ssrResponse.redirect,
+          destination: newDestinationUrl,
+        },
+      };
+    }
+
+    if (!("props" in ssrResponse)) {
+      return ssrResponse;
+    }
+    return {
+      ...ssrResponse,
+      props: {
+        ...ssrResponse.props,
+        isEmbed: true,
+      },
+    };
+  };
+}

calcom/apps/web/lib/withLocale.tsx

@@ -0,0 +1,3 @@
+export type WithLocaleProps<T extends Record<string, unknown>> = T & {
+  newLocale: string;
+};

calcom/apps/web/lib/withNonce.tsx

@@ -0,0 +1,44 @@
+import type { GetServerSideProps } from "next";
+
+import { csp } from "@lib/csp";
+
+export type WithNonceProps<T extends Record<string, unknown>> = T & {
+  nonce?: string;
+};
+
+/**
+ * Make any getServerSideProps fn return the nonce so that it can be used by Components in the page to add any script tag.
+ * Note that if the Components are not adding any script tag then this is not needed. Even in absence of this, Document.getInitialProps would be able to generate nonce itself which it needs to add script tags common to all pages
+ * There is no harm in wrapping a `getServerSideProps` fn with this even if it doesn't add any script tag.
+ */
+export default function withNonce<T extends Record<string, unknown>>(
+  getServerSideProps: GetServerSideProps<T>
+): GetServerSideProps<WithNonceProps<T>> {
+  return async (context) => {
+    const ssrResponse = await getServerSideProps(context);
+
+    if (!("props" in ssrResponse)) {
+      return ssrResponse;
+    }
+
+    const { nonce } = csp(context.req, context.res);
+
+    // Skip nonce property if it's not available instead of setting it to undefined because undefined can't be serialized.
+    const nonceProps = nonce
+      ? {
+          nonce,
+        }
+      : null;
+
+    // Helps in debugging that withNonce was used but a valid nonce couldn't be set
+    context.res.setHeader("x-csp", nonce ? "ssr" : "false");
+
+    return {
+      ...ssrResponse,
+      props: {
+        ...ssrResponse.props,
+        ...nonceProps,
+      },
+    };
+  };
+}

calcom/apps/web/lib/workflows/[workflow]/getStaticProps.tsx

@@ -0,0 +1,19 @@
+import type { GetStaticProps } from "next";
+import { z } from "zod";
+
+const querySchema = z.object({
+  workflow: z.string(),
+});
+
+export const getStaticProps: GetStaticProps = (ctx) => {
+  const params = querySchema.safeParse(ctx.params);
+  console.log("Built workflow page:", params);
+  if (!params.success) return { notFound: true };
+
+  return {
+    props: {
+      workflow: params.data.workflow,
+    },
+    revalidate: 10, // seconds
+  };
+};