chore: bootstrapping phase

.yarn/patches/libphonenumber-js-npm-1.10.12-51c84f8bf1.patch

@@ -0,0 +1,15 @@
+diff --git a/index.cjs b/index.cjs
+index b645707a3549fc298508726e404243499bbed499..f34b0891e99b275a9218e253f303f43d31ef3f73 100644
+--- a/index.cjs
++++ b/index.cjs
+@@ -13,8 +13,8 @@ function withMetadataArgument(func, _arguments) {
+ // https://github.com/babel/babel/issues/2212#issuecomment-131827986
+ // An alternative approach:
+ // https://www.npmjs.com/package/babel-plugin-add-module-exports
+-exports = module.exports = min.parsePhoneNumberFromString
+-exports['default'] = min.parsePhoneNumberFromString
++// exports = module.exports = min.parsePhoneNumberFromString
++// exports['default'] = min.parsePhoneNumberFromString
+
+ // `parsePhoneNumberFromString()` named export is now considered legacy:
+ // it has been promoted to a default export due to being too verbose.

.yarn/patches/next-i18next-npm-13.3.0-bf25b0943c.patch

@@ -0,0 +1,26 @@
+diff --git a/dist/commonjs/serverSideTranslations.js b/dist/commonjs/serverSideTranslations.js
+index bcad3d02fbdfab8dacb1d85efd79e98623a0c257..fff668f598154a13c4030d1b4a90d5d9c18214ad 100644
+--- a/dist/commonjs/serverSideTranslations.js
++++ b/dist/commonjs/serverSideTranslations.js
+@@ -36,7 +36,6 @@ var _fs = _interopRequireDefault(require("fs"));
+ var _path = _interopRequireDefault(require("path"));
+ var _createConfig = require("./config/createConfig");
+ var _node = _interopRequireDefault(require("./createClient/node"));
+-var _appWithTranslation = require("./appWithTranslation");
+ var _utils = require("./utils");
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+@@ -110,12 +109,8 @@ var serverSideTranslations = /*#__PURE__*/function () {
+               lng: initialLocale
+             }));
+             localeExtension = config.localeExtension, localePath = config.localePath, fallbackLng = config.fallbackLng, reloadOnPrerender = config.reloadOnPrerender;
+-            if (!reloadOnPrerender) {
+-              _context.next = 18;
+-              break;
+-            }
+             _context.next = 18;
+-            return _appWithTranslation.globalI18n === null || _appWithTranslation.globalI18n === void 0 ? void 0 : _appWithTranslation.globalI18n.reloadResources();
++            return void 0;
+           case 18:
+             _createClient = (0, _node["default"])(_objectSpread(_objectSpread({}, config), {}, {
+               lng: initialLocale

apps/web/app/_not-found.tsx

@@ -0,0 +1,36 @@
+import NotFoundPage from "@pages/404";
+import { cookies, headers } from "next/headers";
+
+import { getLocale } from "@calcom/features/auth/lib/getLocale";
+import { serverSideTranslations } from "@calcom/web/server/lib/serverSideTranslations";
+
+import PageWrapper from "@components/PageWrapperAppDir";
+
+const getProps = async (h: ReturnType<typeof headers>, c: ReturnType<typeof cookies>) => {
+  // @ts-expect-error we cannot access ctx.req in app dir, however headers and cookies are only properties needed to extract the locale
+  const locale = await getLocale({ headers: h, cookies: c });
+
+  const i18n = (await serverSideTranslations(locale)) || "en";
+
+  return {
+    i18n,
+  };
+};
+
+const NotFound = async () => {
+  const h = headers();
+  const c = cookies();
+
+  const nonce = h.get("x-nonce") ?? undefined;
+
+  const { i18n } = await getProps(h, c);
+
+  return (
+    // @ts-expect-error withTrpc expects AppProps
+    <PageWrapper requiresLicense={false} pageProps={{ i18n }} nonce={nonce} themeBasis={null} i18n={i18n}>
+      <NotFoundPage />
+    </PageWrapper>
+  );
+};
+
+export default NotFound;

apps/web/app/event-types-1/layout.tsx

@@ -0,0 +1,27 @@
+import { headers } from "next/headers";
+import { type ReactElement } from "react";
+
+import { getLayout } from "@calcom/features/MainLayout";
+
+import PageWrapper from "@components/PageWrapperAppDir";
+
+type EventTypesLayoutProps = {
+  children: ReactElement;
+};
+
+export default function EventTypesLayout({ children }: EventTypesLayoutProps) {
+  const h = headers();
+  const nonce = h.get("x-nonce") ?? undefined;
+
+  return (
+    // @ts-expect-error withTrpc expects AppProps
+    <PageWrapper
+      getLayout={getLayout}
+      requiresLicense={false}
+      pageProps={children?.props}
+      nonce={nonce}
+      themeBasis={null}>
+      {children}
+    </PageWrapper>
+  );
+}

apps/web/app/event-types-1/page.tsx

@@ -0,0 +1,18 @@
+import EventTypes from "@pages/event-types";
+import type { Metadata } from "next";
+
+import { IS_CALCOM, WEBAPP_URL } from "@calcom/lib/constants";
+
+export const metadata: Metadata = {
+  viewport: "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0",
+  metadataBase: new URL(IS_CALCOM ? "https://cal.com" : WEBAPP_URL),
+  alternates: {
+    canonical: "/event-types",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "@calcom",
+  },
+};
+
+export default EventTypes;

apps/web/app/layout.tsx

@@ -0,0 +1,110 @@
+import type { Metadata } from "next";
+import { headers as nextHeaders, cookies as nextCookies } from "next/headers";
+import Script from "next/script";
+import React from "react";
+
+import { getLocale } from "@calcom/features/auth/lib/getLocale";
+import { IS_PRODUCTION } from "@calcom/lib/constants";
+
+import "../styles/globals.css";
+
+export const metadata: Metadata = {
+  icons: {
+    icon: [
+      {
+        sizes: "32x32",
+        url: "/api/logo?type=favicon-32",
+      },
+      {
+        sizes: "16x16",
+        url: "/api/logo?type=favicon-16",
+      },
+    ],
+    apple: {
+      sizes: "180x180",
+      url: "/api/logo?type=apple-touch-icon",
+    },
+    other: [
+      {
+        url: "/safari-pinned-tab.svg",
+        rel: "mask-icon",
+      },
+    ],
+  },
+  manifest: "/site.webmanifest",
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "#f9fafb" },
+    { media: "(prefers-color-scheme: dark)", color: "#1C1C1C" },
+  ],
+  other: {
+    "msapplication-TileColor": "#000000",
+  },
+};
+
+const getInitialProps = async (
+  url: string,
+  headers: ReturnType<typeof nextHeaders>,
+  cookies: ReturnType<typeof nextCookies>
+) => {
+  const { pathname, searchParams } = new URL(url);
+
+  const isEmbed = pathname.endsWith("/embed") || (searchParams?.get("embedType") ?? null) !== null;
+  const embedColorScheme = searchParams?.get("ui.color-scheme");
+
+  // @ts-expect-error we cannot access ctx.req in app dir, however headers and cookies are only properties needed to extract the locale
+  const newLocale = await getLocale({ headers, cookies });
+  let direction = "ltr";
+
+  try {
+    const intlLocale = new Intl.Locale(newLocale);
+    // @ts-expect-error INFO: Typescript does not know about the Intl.Locale textInfo attribute
+    direction = intlLocale.textInfo?.direction;
+  } catch (e) {
+    console.error(e);
+  }
+
+  return { isEmbed, embedColorScheme, locale: newLocale, direction };
+};
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const headers = nextHeaders();
+  const cookies = nextCookies();
+
+  const fullUrl = headers.get("x-url") ?? "";
+  const nonce = headers.get("x-csp") ?? "";
+
+  const { locale, direction, isEmbed, embedColorScheme } = await getInitialProps(fullUrl, headers, cookies);
+  console.log(locale, "?locale in here");
+  return (
+    <html
+      lang={locale}
+      dir={direction}
+      style={embedColorScheme ? { colorScheme: embedColorScheme as string } : undefined}>
+      <head nonce={nonce}>
+        {!IS_PRODUCTION && process.env.VERCEL_ENV === "preview" && (
+          // eslint-disable-next-line @next/next/no-sync-scripts
+          <Script
+            data-project-id="KjpMrKTnXquJVKfeqmjdTffVPf1a6Unw2LZ58iE4"
+            src="https://snippet.meticulous.ai/v1/stagingMeticulousSnippet.js"
+          />
+        )}
+      </head>
+      <body
+        className="dark:bg-darkgray-50 desktop-transparent bg-subtle antialiased"
+        style={
+          isEmbed
+            ? {
+                background: "transparent",
+                // Keep the embed hidden till parent initializes and
+                // - gives it the appropriate styles if UI instruction is there.
+                // - gives iframe the appropriate height(equal to document height) which can only be known after loading the page once in browser.
+                // - Tells iframe which mode it should be in (dark/light) - if there is a a UI instruction for that
+                visibility: "hidden",
+              }
+            : {}
+        }>
+        {children}
+      </body>
+    </html>
+  );
+}

apps/web/components/AppListCard.tsx

@@ -63,7 +63,7 @@ export default function AppListCard(props: AppListCardProps) {
     if (shouldHighlight && highlight) {
       const timer = setTimeout(() => {
         setHighlight(false);
-        const _searchParams = new URLSearchParams(searchParams);
+        const _searchParams = new URLSearchParams(searchParams ?? undefined);
         _searchParams.delete("hl");
         router.replace(`${pathname}?${_searchParams.toString()}`);
       }, 3000);

apps/web/components/PageWrapperAppDir.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import type { SSRConfig } from "next-i18next";
+import { Inter } from "next/font/google";
+import localFont from "next/font/local";
+// import I18nLanguageHandler from "@components/I18nLanguageHandler";
+import { usePathname } from "next/navigation";
+import Script from "next/script";
+import type { ReactNode } from "react";
+
+import "@calcom/embed-core/src/embed-iframe";
+import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
+import { trpc } from "@calcom/trpc/react";
+
+import type { AppProps } from "@lib/app-providers-app-dir";
+import AppProviders from "@lib/app-providers-app-dir";
+
+export interface CalPageWrapper {
+  (props?: AppProps): JSX.Element;
+  PageWrapper?: AppProps["Component"]["PageWrapper"];
+}
+
+const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" });
+const calFont = localFont({
+  src: "../fonts/CalSans-SemiBold.woff2",
+  variable: "--font-cal",
+  preload: true,
+  display: "swap",
+});
+
+export type PageWrapperProps = Readonly<{
+  getLayout: (page: React.ReactElement) => ReactNode;
+  children: React.ReactElement;
+  requiresLicense: boolean;
+  isThemeSupported: boolean;
+  isBookingPage: boolean;
+  nonce: string | undefined;
+  themeBasis: string | null;
+  i18n?: SSRConfig;
+}>;
+
+function PageWrapper(props: PageWrapperProps) {
+  const pathname = usePathname();
+  let pageStatus = "200";
+
+  if (pathname === "/404") {
+    pageStatus = "404";
+  } else if (pathname === "/500") {
+    pageStatus = "500";
+  }
+
+  // On client side don't let nonce creep into DOM
+  // It also avoids hydration warning that says that Client has the nonce value but server has "" because browser removes nonce attributes before DOM is built
+  // See https://github.com/kentcdodds/nonce-hydration-issues
+  // Set "" only if server had it set otherwise keep it undefined because server has to match with client to avoid hydration error
+  const nonce = typeof window !== "undefined" ? (props.nonce ? "" : undefined) : props.nonce;
+  const providerProps: PageWrapperProps = {
+    ...props,
+    nonce,
+  };
+
+  const getLayout: (page: React.ReactElement) => ReactNode = props.getLayout ?? ((page) => page);
+
+  return (
+    <AppProviders {...providerProps}>
+      {/* <I18nLanguageHandler locales={props.router.locales || []} /> */}
+      <>
+        <Script
+          nonce={nonce}
+          id="page-status"
+          dangerouslySetInnerHTML={{ __html: `window.CalComPageStatus = '${pageStatus}'` }}
+        />
+        <style jsx global>{`
+          :root {
+            --font-inter: ${interFont.style.fontFamily};
+            --font-cal: ${calFont.style.fontFamily};
+          }
+        `}</style>
+
+        {getLayout(
+          props.requiresLicense ? <LicenseRequired>{props.children}</LicenseRequired> : props.children
+        )}
+      </>
+    </AppProviders>
+  );
+}
+
+export default trpc.withTRPC(PageWrapper);

apps/web/components/booking/CancelBooking.tsx

@@ -28,7 +28,7 @@ type Props = {
 export default function CancelBooking(props: Props) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
-  const asPath = `${pathname}?${searchParams.toString()}`;
+  const asPath = `${pathname}?${searchParams?.toString() ?? ""}`;
   const [cancellationReason, setCancellationReason] = useState<string>("");
   const { t } = useLocale();
   const router = useRouter();

apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx

@@ -222,9 +222,9 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
             onChange={(event) => {
               event.preventDefault();
               // Reset payment status
-              const _searchParams = new URLSearchParams(searchParams);
+              const _searchParams = new URLSearchParams(searchParams ?? undefined);
               _searchParams.delete("paymentStatus");
-              if (searchParams.toString() !== _searchParams.toString()) {
+              if (searchParams?.toString() !== _searchParams.toString()) {
                 router.replace(`${pathname}?${_searchParams.toString()}`);
               }
               setInputUsernameValue(event.target.value);