v3.4.0

reduced the toast timeout, so button is not overlayed.

.github/workflows/pr-assign-team-label.yml

@@ -13,4 +13,4 @@ jobs:
         with:
           repo-token: ${{ secrets.GH_ACCESS_TOKEN }}
           organization-name: calcom
-          ignore-labels: "app-store, authentication, automated-testing, billing, bookings, caldav, calendar-apps, ci, console, crm-apps, docs, documentation, emails, embeds, event-types, i18n, impersonation, manual-testing, ui, performance, ops-stack, organizations, public-api, routing-forms, seats, teams, webhooks, workflows, zapier"
+          ignore-labels: "app-store, ai, authentication, automated-testing, billing, bookings, caldav, calendar-apps, ci, console, crm-apps, docs, documentation, emails, embeds, event-types, i18n, impersonation, manual-testing, ui, performance, ops-stack, organizations, public-api, routing-forms, seats, teams, webhooks, workflows, zapier"

CONTRIBUTING.md

@@ -161,3 +161,48 @@ If you get errors, be sure to fix them before committing.
 - If your PR refers to or fixes an issue, be sure to add `refs #XXX` or `fixes #XXX` to the PR description. Replacing `XXX` with the respective issue number. See more about [Linking a pull request to an issue](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue).
 - Be sure to fill the PR Template accordingly.
 - Review [App Contribution Guidelines](./packages/app-store/CONTRIBUTING.md) when building integrations
+
+## Guidelines for committing yarn lockfile
+
+Do not commit your `yarn.lock` unless you've made changes to the `package.json`. If you've already committed `yarn.lock` unintentionally, follow these steps to undo:
+
+If your last commit has the `yarn.lock` file alongside other files and you only wish to uncommit the `yarn.lock`:
+   ```bash
+   git checkout HEAD~1 yarn.lock
+   git commit -m "Revert yarn.lock changes"
+   ```
+If you've pushed the commit with the `yarn.lock`:
+   1. Correct the commit locally using the above method.
+   2. Carefully force push:
+
+   ```bash
+   git push origin <your-branch-name> --force
+   ```
+
+If `yarn.lock` was committed a while ago and there have been several commits since, you can use the following steps to revert just the `yarn.lock` changes without impacting the subsequent changes:
+
+1. **Checkout a Previous Version**:
+   - Find the commit hash before the `yarn.lock` was unintentionally committed. You can do this by viewing the Git log:
+     ```bash
+     git log yarn.lock
+     ```
+   - Once you have identified the commit hash, use it to checkout the previous version of `yarn.lock`:
+     ```bash
+     git checkout <commit_hash> yarn.lock
+     ```
+
+2. **Commit the Reverted Version**:
+   - After checking out the previous version of the `yarn.lock`, commit this change:
+     ```bash
+     git commit -m "Revert yarn.lock to its state before unintended changes"
+     ```
+
+3. **Proceed with Caution**:
+   - If you need to push this change, first pull the latest changes from your remote branch to ensure you're not overwriting other recent changes:
+     ```bash
+     git pull origin <your-branch-name>
+     ```
+   - Then push the updated branch:
+     ```bash
+     git push origin <your-branch-name>
+     ```

README.md

@@ -253,6 +253,8 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env
 
 #### Setting up your first user
 
+##### Approach 1
+
 1. Open [Prisma Studio](https://prisma.io/studio) to look at or modify the database content:
 
    ```sh
@@ -264,6 +266,17 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env
    > New users are set on a `TRIAL` plan by default. You might want to adjust this behavior to your needs in the `packages/prisma/schema.prisma` file.
 1. Open a browser to [http://localhost:3000](http://localhost:3000) and login with your just created, first user.
 
+##### Approach 2
+
+Seed the local db by running
+
+```sh
+cd packages/prisma
+yarn db-seed
+```
+
+The above command will populate the local db with dummy users.
+
 ### E2E-Testing
 
 Be sure to set the environment variable `NEXTAUTH_URL` to the correct value. If you are running locally, as the documentation within `.env.example` mentions, the value should be `http://localhost:3000`.
@@ -368,6 +381,10 @@ Currently Vercel Pro Plan is required to be able to Deploy this application with
 
 [![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/calcom/docker)
 
+### Elestio
+
+[![Deploy on Elestio](https://pub-da36157c854648669813f3f76c526c2b.r2.dev/deploy-on-elestio-black.png)](https://elest.io/open-source/cal.com)
+
 <!-- ROADMAP -->
 
 ## Roadmap

apps/ai/.env.example

@@ -6,6 +6,9 @@ FRONTEND_URL=http://localhost:3000
 APP_ID=cal-ai
 APP_URL=http://localhost:3000/apps/cal-ai
 
+# This is for the onboard route. Which domain should we send emails from?
+SENDER_DOMAIN=cal.ai
+
 # Used to verify requests from sendgrid. You can generate a new one with: `openssl rand -hex 32`
 PARSE_KEY=
 

apps/ai/README.md

@@ -1,12 +1,12 @@
-# Cal.com Email Assistant
+# Cal.ai
 
-Welcome to the first stage of Cal.ai!
+Welcome to [Cal.ai](https://cal.ai)!
 
 This app lets you chat with your calendar via email:
 
 - Turn informal emails into bookings eg. forward "wanna meet tmrw at 2pm?"
-- List and rearrange your bookings eg. "Cancel my next meeting"
-- Answer basic questions about your busiest times eg. "How does my Tuesday look?"
+- List and rearrange your bookings eg. "clear my afternoon"
+- Answer basic questions about your busiest times eg. "how does my Tuesday look?"
 
 The core logic is contained in [agent/route.ts](/apps/ai/src/app/api/agent/route.ts). Here, a [LangChain Agent Executor](https://docs.langchain.com/docs/components/agents/agent-executor) is tasked with following your instructions. Given your last-known timezone, working hours, and busy times, it attempts to CRUD your bookings.
 
@@ -14,7 +14,7 @@ _The AI agent can only choose from a set of tools, without ever seeing your API
 
 Emails are cleaned and routed in [receive/route.ts](/apps/ai/src/app/api/receive/route.ts) using [MailParser](https://nodemailer.com/extras/mailparser/).
 
-Incoming emails are routed by email address. Addresses are verified by [DKIM record](https://support.google.com/a/answer/174124?hl=en), making it hard to spoof them.
+Incoming emails are routed by email address. Addresses are verified by [DKIM record](https://support.google.com/a/answer/174124?hl=en), making them hard to spoof.
 
 ## Getting Started
 
@@ -22,27 +22,39 @@ Incoming emails are routed by email address. Addresses are verified by [DKIM rec
 
 If you haven't yet, please run the [root setup](/README.md) steps.
 
-Before running the app, please see [env.mjs](./src/env.mjs) for all required environment variables. You'll need:
+Before running the app, please see [env.mjs](./src/env.mjs) for all required environment variables. Run `cp .env.example .env` in this folder to get started. You'll need:
 
 - An [OpenAI API key](https://platform.openai.com/account/api-keys) with access to GPT-4
 - A [SendGrid API key](https://app.sendgrid.com/settings/api_keys)
-- A default sender email (for example, `ai@cal.dev`)
-- The Cal.ai's app ID and URL (see [add.ts](/packages/app-store/cal-ai/api/index.ts))
+- A default sender email (for example, `me@dev.example.com`)
+- The Cal.ai app's ID and URL (see [add.ts](/packages/app-store/cal-ai/api/index.ts))
+- A unique value for `PARSE_KEY` with `openssl rand -hex 32`
 
 To stand up the API and AI apps simultaneously, simply run `yarn dev:ai`.
 
+### Agent Architecture
+
+The scheduling agent in [agent/route.ts](/apps/ai/src/app/api/agent/route.ts) calls an LLM (in this case, GPT-4) in a loop to accomplish a multi-step task. We use an [OpenAI Functions agent](https://js.langchain.com/docs/modules/agents/agent_types/openai_functions_agent), which is fine-tuned to output text suited for passing to tools.
+
+Tools (eg. [`createBooking`](/apps/ai/src/tools/createBooking.ts)) are simply JavaScript methods wrapped by Zod schemas, telling the agent what format to output.
+
+Here is the full architecture:
+
+![Cal.ai architecture](/apps/ai/src/public/architecture.png)
+
 ### Email Router
 
 To expose the AI app, run `ngrok http 3000` (or the AI app's port number) in a new terminal. You may need to install [nGrok](https://ngrok.com/).
 
-To forward incoming emails to the Node.js server, one option is to use [SendGrid's Inbound Parse Webhook](https://docs.sendgrid.com/for-developers/parsing-email/setting-up-the-inbound-parse-webhook).
+To forward incoming emails to the serverless function at `/agent`, we use [SendGrid's Inbound Parse](https://docs.sendgrid.com/for-developers/parsing-email/setting-up-the-inbound-parse-webhook).
 
-1.  [Sign up for an account](https://signup.sendgrid.com/)
-2.  Go to Settings > [Inbound Parse](https://app.sendgrid.com/settings/parse) > Add Host & URL.
-3.  For subdomain, use `<sub>.<domain>.com` for now, where `sub` can be any subdomain but `domain.com` will need to be verified via MX records in your environment variables, eg. on [Vercel](https://vercel.com/guides/how-to-add-vercel-environment-variables).
-4.  Use the nGrok URL from above as the **Destination URL**.
-5.  Activate "POST the raw, full MIME message".
-6.  Send an email to `<anyone>@ai.example.com`. You should see a ping on the nGrok listener and Node.js server.
-7.  Adjust the logic in [receive/route.ts](/apps/ai/src/app/api/receive/route.ts), save to hot-reload, and send another email to test the behaviour.
+1.  Ensure you have a [SendGrid account](https://signup.sendgrid.com/)
+2.  Ensure you have an authenticated domain. Go to Settings > Sender Authentication > Authenticate. For DNS host, select `I'm not sure`. Click Next and add your domain, eg. `example.com`. Choose Manual Setup. You'll be given three CNAME records to add to your DNS settings, eg. in [Vercel Domains](https://vercel.com/dashboard/domains). After adding those records, click Verify. To troubleshoot, see the [full instructions](https://docs.sendgrid.com/ui/account-and-settings/how-to-set-up-domain-authentication).
+3.  Authorize your domain for email with MX records: one with name `[your domain].com` and value `mx.sendgrid.net.`, and another with name `bounces.[your domain].com` and value `feedback-smtp.us-east-1.amazonses.com`, both with priority `10` if prompted.
+4.  Go to Settings > [Inbound Parse](https://app.sendgrid.com/settings/parse) > Add Host & URL. Choose your authenticated domain.
+5.  In the Destination URL field, use the nGrok URL from above along with the path, `/api/receive`, and one param, `parseKey`, which lives in [this app's .env](/apps/ai/.env.example) under `PARSE_KEY`. The full URL should look like `https://abc.ngrok.io/api/receive?parseKey=ABC-123`.
+6.  Activate "POST the raw, full MIME message".
+7.  Send an email to `[anyUsername]@example.com`. You should see a ping on the nGrok listener and server.
+8.  Adjust the logic in [receive/route.ts](/apps/ai/src/app/api/receive/route.ts), save to hot-reload, and send another email to test the behaviour.
 
-Please feel free to improve any part of this architecture.
+Please feel free to improve any part of this architecture!

apps/ai/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/ai",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "private": true,
   "author": "Cal.com Inc.",
   "dependencies": {
@@ -8,7 +8,7 @@
     "@t3-oss/env-nextjs": "^0.6.1",
     "langchain": "^0.0.131",
     "mailparser": "^3.6.5",
-    "next": "^13.4.6",
+    "next": "^13.5.4",
     "supports-color": "8.1.1",
     "zod": "^3.22.2"
   },

apps/ai/src/app/api/agent/route.ts

@@ -5,6 +5,9 @@ import agent from "../../../utils/agent";
 import sendEmail from "../../../utils/sendEmail";
 import { verifyParseKey } from "../../../utils/verifyParseKey";
 
+// Allow agent loop to run for up to 5 minutes
+export const maxDuration = 300;
+
 /**
  * Launches a LangChain agent to process an incoming email,
  * then sends the response to the user.

apps/ai/src/app/api/onboard/route.ts

@@ -0,0 +1,44 @@
+import type { NextRequest } from "next/server";
+
+import prisma from "@calcom/prisma";
+
+import { env } from "../../../env.mjs";
+import sendEmail from "../../../utils/sendEmail";
+
+export const POST = async (request: NextRequest) => {
+  const { userId } = await request.json();
+
+  const user = await prisma.user.findUnique({
+    select: {
+      email: true,
+      name: true,
+      username: true,
+    },
+    where: {
+      id: userId,
+    },
+  });
+
+  if (!user) {
+    return new Response("User not found", { status: 404 });
+  }
+
+  await sendEmail({
+    subject: "Welcome to Cal AI",
+    to: user.email,
+    from: `${user.username}@${env.SENDER_DOMAIN}`,
+    text: `Hi ${
+      user.name || `@${user.username}`
+    },\n\nI'm Cal AI, your personal booking assistant! I'll be here, 24/7 to help manage your busy schedule and find times to meet with the people you care about.\n\nHere are some things you can ask me:\n\n- "Book a meeting with @someone" (The @ symbol lets you tag Cal.com users)\n- "What meetings do I have today?" (I'll show you your schedule)\n- "Find a time for coffee with someone@gmail.com" (I'll intro and send them some good times)\n\nI'm still learning, so if you have any feedback, please tweet it to @calcom!\n\nRemember, you can always reach me here, at ${
+      user.username
+    }@${
+      env.SENDER_DOMAIN
+    }.\n\nLooking forward to working together (:\n\n- Cal AI, Your personal booking assistant`,
+    html: `Hi ${
+      user.name || `@${user.username}`
+    },<br><br>I'm Cal AI, your personal booking assistant! I'll be here, 24/7 to help manage your busy schedule and find times to meet with the people you care about.<br><br>Here are some things you can ask me:<br><br>- "Book a meeting with @someone" (The @ symbol lets you tag Cal.com users)<br>- "What meetings do I have today?" (I'll show you your schedule)<br>- "Find a time for coffee with someone@gmail.com" (I'll intro and send them some good times)<br><br>I'm still learning, so if you have any feedback, please send it to <a href="https://twitter.com/calcom">@calcom</a> on X!<br><br>Remember, you can always reach me here, at ${
+      user.username
+    }@${env.SENDER_DOMAIN}.<br><br>Looking forward to working together (:<br><br>- Cal AI`,
+  });
+  return new Response("OK", { status: 200 });
+};

apps/ai/src/app/api/receive/route.ts

@@ -14,6 +14,10 @@ import now from "../../../utils/now";
 import sendEmail from "../../../utils/sendEmail";
 import { verifyParseKey } from "../../../utils/verifyParseKey";
 
+// Allow receive loop to run for up to 30 seconds
+// Why so long? the rate determining API call (getAvailability, getEventTypes) can take up to 15 seconds at peak times so we give it a little extra time to complete.
+export const maxDuration = 30;
+
 /**
  * Verifies email signature and app authorization,
  * then hands off to booking agent.
@@ -55,7 +59,7 @@ export const POST = async (request: NextRequest) => {
         },
       },
     },
-    where: { email: envelope.from, credentials: { some: { appId: env.APP_ID } } },
+    where: { email: envelope.from },
   });
 
   // User is not a cal.com user or is using an unverified email.

apps/ai/src/env.mjs

@@ -20,6 +20,7 @@ export const env = createEnv({
     FRONTEND_URL: process.env.FRONTEND_URL,
     APP_ID: process.env.APP_ID,
     APP_URL: process.env.APP_URL,
+    SENDER_DOMAIN: process.env.SENDER_DOMAIN,
     PARSE_KEY: process.env.PARSE_KEY,
     NODE_ENV: process.env.NODE_ENV,
     OPENAI_API_KEY: process.env.OPENAI_API_KEY,
@@ -36,6 +37,7 @@ export const env = createEnv({
     FRONTEND_URL: z.string().url(),
     APP_ID: z.string().min(1),
     APP_URL: z.string().url(),
+    SENDER_DOMAIN: z.string().min(1),
     PARSE_KEY: z.string().min(1),
     NODE_ENV: z.enum(["development", "test", "production"]),
     OPENAI_API_KEY: z.string().min(1),

apps/ai/src/tools/createBooking.ts

@@ -47,7 +47,7 @@ const createBooking = async ({
   }
 
   const responses = {
-    id: invite,
+    id: invite.toString(),
     name: user.username,
     email: user.email,
   };

apps/ai/src/tools/sendBookingEmail.ts

@@ -0,0 +1,124 @@
+import { DynamicStructuredTool } from "langchain/tools";
+import { z } from "zod";
+
+import { env } from "~/src/env.mjs";
+import type { User, UserList } from "~/src/types/user";
+import sendEmail from "~/src/utils/sendEmail";
+
+export const sendBookingEmail = async ({
+  user,
+  agentEmail,
+  subject,
+  to,
+  message,
+  eventTypeSlug,
+  slots,
+  date,
+}: {
+  apiKey: string;
+  user: User;
+  users: UserList;
+  agentEmail: string;
+  subject: string;
+  to: string;
+  message: string;
+  eventTypeSlug: string;
+  slots?: {
+    time: string;
+    text: string;
+  }[];
+  date: {
+    date: string;
+    text: string;
+  };
+}) => {
+  // const url = `${env.FRONTEND_URL}/${user.username}/${eventTypeSlug}?date=${date}`;
+  const timeUrls = slots?.map(({ time, text }) => {
+    return {
+      url: `${env.FRONTEND_URL}/${user.username}/${eventTypeSlug}?slot=${time}`,
+      text,
+    };
+  });
+
+  const dateUrl = {
+    url: `${env.FRONTEND_URL}/${user.username}/${eventTypeSlug}?date=${date.date}`,
+    text: date.text,
+  };
+
+  await sendEmail({
+    subject,
+    to,
+    cc: user.email,
+    from: agentEmail,
+    text: message
+      .split("[[[Slots]]]")
+      .join(timeUrls?.map(({ url, text }) => `${text}: ${url}`).join("\n"))
+      .split("[[[Link]]]")
+      .join(`${dateUrl.text}: ${dateUrl.url}`),
+    html: message
+      .split("\n")
+      .join("<br>")
+      .split("[[[Slots]]]")
+      .join(timeUrls?.map(({ url, text }) => `<a href="${url}">${text}</a>`).join("<br>"))
+      .split("[[[Link]]]")
+      .join(`<a href="${dateUrl.url}">${dateUrl.text}</a>`),
+  });
+
+  return "Booking link sent";
+};
+
+const sendBookingEmailTool = (apiKey: string, user: User, users: UserList, agentEmail: string) => {
+  return new DynamicStructuredTool({
+    description:
+      "Send a booking link via email. Useful for scheduling with non cal users. Be confident, suggesting a good date/time with a fallback to a link to select a date/time.",
+    func: async ({ message, subject, to, eventTypeSlug, slots, date }) => {
+      return JSON.stringify(
+        await sendBookingEmail({
+          apiKey,
+          user,
+          users,
+          agentEmail,
+          subject,
+          to,
+          message,
+          eventTypeSlug,
+          slots,
+          date,
+        })
+      );
+    },
+    name: "sendBookingEmail",
+
+    schema: z.object({
+      message: z
+        .string()
+        .describe(
+          "A polite and professional email with an intro and signature at the end. Specify you are the AI booking assistant of the primary user. Use [[[Slots]]] and a fallback [[[Link]]] to inject good times and 'see all times' into messages"
+        ),
+      subject: z.string(),
+      to: z
+        .string()
+        .describe("email address to send the booking link to. Primary user is automatically CC'd"),
+      eventTypeSlug: z.string().describe("the slug of the event type to book"),
+      slots: z
+        .array(
+          z.object({
+            time: z.string().describe("YYYY-MM-DDTHH:mm in UTC"),
+            text: z.string().describe("minimum readable label. Ex. 4pm."),
+          })
+        )
+        .optional()
+        .describe("Time slots the external user can click"),
+      date: z
+        .object({
+          date: z.string().describe("YYYY-MM-DD"),
+          text: z.string().describe('"See all times" or similar'),
+        })
+        .describe(
+          "A booking link that allows the external user to select a date / time. Should be a fallback to time slots"
+        ),
+    }),
+  });
+};
+
+export default sendBookingEmailTool;

apps/ai/src/tools/sendBookingLink.ts

@@ -1,81 +0,0 @@
-import { DynamicStructuredTool } from "langchain/tools";
-import { z } from "zod";
-
-import { env } from "~/src/env.mjs";
-import type { User, UserList } from "~/src/types/user";
-import sendEmail from "~/src/utils/sendEmail";
-
-export const sendBookingLink = async ({
-  user,
-  agentEmail,
-  subject,
-  to,
-  message,
-  eventTypeSlug,
-  date,
-}: {
-  apiKey: string;
-  user: User;
-  users: UserList;
-  agentEmail: string;
-  subject: string;
-  to: string[];
-  message: string;
-  eventTypeSlug: string;
-  date: string;
-}) => {
-  const url = `${env.FRONTEND_URL}/${user.username}/${eventTypeSlug}?date=${date}`;
-
-  await sendEmail({
-    subject,
-    to,
-    cc: user.email,
-    from: agentEmail,
-    text: message.split("[[[Booking Link]]]").join(url),
-    html: message
-      .split("\n")
-      .join("<br>")
-      .split("[[[Booking Link]]]")
-      .join(`<a href="${url}">Booking Link</a>`),
-  });
-
-  return "Booking link sent";
-};
-
-const sendBookingLinkTool = (apiKey: string, user: User, users: UserList, agentEmail: string) => {
-  return new DynamicStructuredTool({
-    description: "Send a booking link via email. Useful for scheduling with non cal users.",
-    func: async ({ message, subject, to, eventTypeSlug, date }) => {
-      return JSON.stringify(
-        await sendBookingLink({
-          apiKey,
-          user,
-          users,
-          agentEmail,
-          subject,
-          to,
-          message,
-          eventTypeSlug,
-          date,
-        })
-      );
-    },
-    name: "sendBookingLink",
-
-    schema: z.object({
-      message: z
-        .string()
-        .describe(
-          "Make sure to nicely format the message and introduce yourself as the primary user's booking assistant. Make sure to include a spot for the link using: [[[Booking Link]]]"
-        ),
-      subject: z.string(),
-      to: z
-        .array(z.string())
-        .describe("array of emails to send the booking link to. Primary user is automatically CC'd"),
-      eventTypeSlug: z.string().describe("the slug of the event type to book"),
-      date: z.string().describe("the date (yyyy-mm-dd) to suggest for the booking"),
-    }),
-  });
-};
-
-export default sendBookingLinkTool;

apps/ai/src/utils/agent.ts

@@ -6,7 +6,7 @@ import createBookingIfAvailable from "../tools/createBooking";
 import deleteBooking from "../tools/deleteBooking";
 import getAvailability from "../tools/getAvailability";
 import getBookings from "../tools/getBookings";
-import sendBookingLink from "../tools/sendBookingLink";
+import sendBookingEmail from "../tools/sendBookingEmail";
 import updateBooking from "../tools/updateBooking";
 import type { EventType } from "../types/eventType";
 import type { User, UserList } from "../types/user";
@@ -35,7 +35,7 @@ const agent = async (
     createBookingIfAvailable(apiKey, userId, users),
     updateBooking(apiKey, userId),
     deleteBooking(apiKey),
-    sendBookingLink(apiKey, user, users, agentEmail),
+    sendBookingEmail(apiKey, user, users, agentEmail),
   ];
 
   const model = new ChatOpenAI({
@@ -53,6 +53,8 @@ const agent = async (
 Make sure your final answers are definitive, complete and well formatted.
 Sometimes, tools return errors. In this case, try to handle the error intelligently or ask the user for more information.
 Tools will always handle times in UTC, but times sent to users should be formatted per that user's timezone.
+In responses to users, always summarize necessary context and open the door to follow ups. For example "I have booked your chat with @username for 3pm on Wednesday, December 20th, 2023 EST. Please let me know if you need to reschedule."
+If you can't find a referenced user, ask the user for their email or @username. Make sure to specify that usernames require the @username format. Users don't know other users' userIds.
 
 The primary user's id is: ${userId}
 The primary user's username is: ${user.username}

apps/ai/src/utils/extractUsers.ts

@@ -6,8 +6,12 @@ import type { UserList } from "../types/user";
  * Extracts usernames (@Example) and emails (hi@example.com) from a string
  */
 export const extractUsers = async (text: string) => {
-  const usernames = text.match(/(?<![a-zA-Z0-9_.])@[a-zA-Z0-9_]+/g)?.map((username) => username.slice(1));
-  const emails = text.match(/[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+/g);
+  const usernames = text
+    .match(/(?<![a-zA-Z0-9_.])@[a-zA-Z0-9_]+/g)
+    ?.map((username) => username.slice(1).toLowerCase());
+  const emails = text
+    .match(/[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+/g)
+    ?.map((email) => email.toLowerCase());
 
   const dbUsersFromUsernames = usernames
     ? await prisma.user.findMany({

apps/api/lib/helpers/rateLimitApiKey.ts

@@ -0,0 +1,15 @@
+import type { NextMiddleware } from "next-api-middleware";
+
+import { checkRateLimitAndThrowError } from "@calcom/lib/checkRateLimitAndThrowError";
+
+export const rateLimitApiKey: NextMiddleware = async (req, res, next) => {
+  if (!req.query.apiKey) return res.status(401).json({ message: "No apiKey provided" });
+
+  // TODO: Add a way to add trusted api keys
+  await checkRateLimitAndThrowError({
+    identifier: req.query.apiKey as string,
+    rateLimitingType: "api",
+  });
+
+  await next();
+};

apps/api/lib/helpers/withMiddleware.ts

@@ -12,6 +12,7 @@ import {
   HTTP_GET_OR_POST,
   HTTP_GET_DELETE_PATCH,
 } from "./httpMethods";
+import { rateLimitApiKey } from "./rateLimitApiKey";
 import { verifyApiKey } from "./verifyApiKey";
 import { withPagination } from "./withPagination";
 
@@ -25,6 +26,7 @@ const withMiddleware = label(
     HTTP_DELETE,
     addRequestId,
     verifyApiKey,
+    rateLimitApiKey,
     customPrismaClient,
     extendRequest,
     pagination: withPagination,
@@ -37,6 +39,7 @@ const withMiddleware = label(
     // - Put customPrismaClient before verifyApiKey always.
     "customPrismaClient",
     "verifyApiKey",
+    "rateLimitApiKey",
     "addRequestId",
   ] // <-- Provide a list of middleware to call automatically
 );

apps/api/lib/utils/extractUserIdsFromQuery.ts

@@ -0,0 +1,14 @@
+import type { NextApiRequest } from "next";
+
+import { HttpError } from "@calcom/lib/http-error";
+
+import { schemaQuerySingleOrMultipleUserIds } from "~/lib/validations/shared/queryUserId";
+
+export function extractUserIdsFromQuery({ isAdmin, query }: NextApiRequest) {
+  /** Guard: Only admins can query other users */
+  if (!isAdmin) {
+    throw new HttpError({ statusCode: 401, message: "ADMIN required" });
+  }
+  const { userId: userIdOrUserIds } = schemaQuerySingleOrMultipleUserIds.parse(query);
+  return Array.isArray(userIdOrUserIds) ? userIdOrUserIds : [userIdOrUserIds];
+}

apps/api/lib/validations/booking.ts

@@ -58,7 +58,7 @@ export const schemaBookingReadPublic = Booking.extend({
       })
     )
     .optional(),
-  responses: z.record(z.any()),
+  responses: z.record(z.any()).nullable(),
 }).pick({
   id: true,
   userId: true,

apps/api/lib/validations/destination-calendar.ts

@@ -14,9 +14,9 @@ const schemaDestinationCalendarCreateParams = z
   .object({
     integration: z.string(),
     externalId: z.string(),
-    eventTypeId: z.number(),
-    bookingId: z.number(),
-    userId: z.number(),
+    eventTypeId: z.number().optional(),
+    bookingId: z.number().optional(),
+    userId: z.number().optional(),
   })
   .strict();
 

apps/api/pages/api/destination-calendars/[id].ts

@@ -1,240 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-
-import { withMiddleware } from "~/lib/helpers/withMiddleware";
-import type { DestinationCalendarResponse } from "~/lib/types";
-import {
-  schemaDestinationCalendarEditBodyParams,
-  schemaDestinationCalendarReadPublic,
-} from "~/lib/validations/destination-calendar";
-import {
-  schemaQueryIdParseInt,
-  withValidQueryIdTransformParseInt,
-} from "~/lib/validations/shared/queryIdTransformParseInt";
-
-export async function destionationCalendarById(
-  { method, query, body, userId, prisma }: NextApiRequest,
-  res: NextApiResponse<DestinationCalendarResponse>
-) {
-  const safeQuery = schemaQueryIdParseInt.safeParse(query);
-  const safeBody = schemaDestinationCalendarEditBodyParams.safeParse(body);
-  if (!safeQuery.success) {
-    res.status(400).json({ message: "Your query was invalid" });
-    return;
-  }
-  const data = await prisma.destinationCalendar.findMany({ where: { userId } });
-  const userDestinationCalendars = data.map((destinationCalendar) => destinationCalendar.id);
-  //  FIXME: Should we also check ownership of bokingId and eventTypeId to avoid users cross-pollinating other users calendars.
-  // On a related note, moving from sequential integer IDs to UUIDs would be a good idea. and maybe help avoid having this problem.
-  if (userDestinationCalendars.includes(safeQuery.data.id)) res.status(401).json({ message: "Unauthorized" });
-  else {
-    switch (method) {
-      /**
-       * @swagger
-       * /destination-calendars/{id}:
-       *   get:
-       *     summary: Find a destination calendar
-       *     parameters:
-       *       - in: path
-       *         name: id
-       *         schema:
-       *           type: integer
-       *         required: true
-       *         description: ID of the destination calendar to get
-       *       - in: query
-       *         name: apiKey
-       *         required: true
-       *         schema:
-       *           type: string
-       *         description: Your API key
-       *     tags:
-       *      - destination-calendars
-       *     responses:
-       *       200:
-       *         description: OK
-       *       401:
-       *        description: Authorization information is missing or invalid.
-       *       404:
-       *         description: DestinationCalendar was not found
-       *   patch:
-       *     summary: Edit an existing destination calendar
-       *     parameters:
-       *      - in: path
-       *        name: id
-       *        schema:
-       *          type: integer
-       *        required: true
-       *        description: ID of the destination calendar to edit
-       *      - in: query
-       *        name: apiKey
-       *        required: true
-       *        schema:
-       *          type: string
-       *        description: Your API key
-       *     requestBody:
-       *       description: Create a new booking related to one of your event-types
-       *       required: true
-       *       content:
-       *         application/json:
-       *           schema:
-       *             type: object
-       *             properties:
-       *               integration:
-       *                 type: string
-       *                 description: 'The integration'
-       *               externalId:
-       *                 type: string
-       *                 description: 'The external ID of the integration'
-       *               eventTypeId:
-       *                 type: integer
-       *                 description: 'The ID of the eventType it is associated with'
-       *               bookingId:
-       *                 type: integer
-       *                 description: 'The booking ID it is associated with'
-       *     tags:
-       *      - destination-calendars
-       *     responses:
-       *       201:
-       *         description: OK, destinationCalendar edited successfuly
-       *       400:
-       *        description: Bad request. DestinationCalendar body is invalid.
-       *       401:
-       *        description: Authorization information is missing or invalid.
-       *   delete:
-       *     summary: Remove an existing destination calendar
-       *     parameters:
-       *      - in: path
-       *        name: id
-       *        schema:
-       *          type: integer
-       *        required: true
-       *        description: ID of the destination calendar to delete
-       *      - in: query
-       *        name: apiKey
-       *        required: true
-       *        schema:
-       *          type: string
-       *        description: Your API key
-       *     tags:
-       *      - destination-calendars
-       *     responses:
-       *       201:
-       *         description: OK, destinationCalendar removed successfuly
-       *       400:
-       *        description: Bad request. DestinationCalendar id is invalid.
-       *       401:
-       *        description: Authorization information is missing or invalid.
-       */
-      case "GET":
-        await prisma.destinationCalendar
-          .findUnique({ where: { id: safeQuery.data.id } })
-          .then((data) => schemaDestinationCalendarReadPublic.parse(data))
-          .then((destination_calendar) => res.status(200).json({ destination_calendar }))
-          .catch((error: Error) =>
-            res.status(404).json({
-              message: `DestinationCalendar with id: ${safeQuery.data.id} not found`,
-              error,
-            })
-          );
-        break;
-      /**
-       * @swagger
-       * /destination-calendars/{id}:
-       *   patch:
-       *     summary: Edit an existing destination calendar
-       *     parameters:
-       *      - in: path
-       *        name: id
-       *        schema:
-       *          type: integer
-       *        required: true
-       *        description: ID of the destination calendar to edit
-       *      - in: query
-       *        name: apiKey
-       *        required: true
-       *        schema:
-       *          type: string
-       *        description: Your API key
-       *     tags:
-       *      - destination-calendars
-       *     responses:
-       *       201:
-       *         description: OK, destinationCalendar edited successfuly
-       *       400:
-       *        description: Bad request. DestinationCalendar body is invalid.
-       *       401:
-       *        description: Authorization information is missing or invalid.
-       */
-      case "PATCH":
-        if (!safeBody.success) {
-          {
-            res.status(400).json({ message: "Invalid request body" });
-            return;
-          }
-        }
-        await prisma.destinationCalendar
-          .update({ where: { id: safeQuery.data.id }, data: safeBody.data })
-          .then((data) => schemaDestinationCalendarReadPublic.parse(data))
-          .then((destination_calendar) => res.status(200).json({ destination_calendar }))
-          .catch((error: Error) =>
-            res.status(404).json({
-              message: `DestinationCalendar with id: ${safeQuery.data.id} not found`,
-              error,
-            })
-          );
-        break;
-      /**
-       * @swagger
-       * /destination-calendars/{id}:
-       *   delete:
-       *     summary: Remove an existing destination calendar
-       *     parameters:
-       *      - in: path
-       *        name: id
-       *        schema:
-       *          type: integer
-       *        required: true
-       *        description: ID of the destination calendar to delete
-       *      - in: query
-       *        name: apiKey
-       *        required: true
-       *        schema:
-       *          type: string
-       *        description: Your API key
-       *     tags:
-       *      - destination-calendars
-       *     responses:
-       *       201:
-       *         description: OK, destinationCalendar removed successfuly
-       *       400:
-       *        description: Bad request. DestinationCalendar id is invalid.
-       *       401:
-       *        description: Authorization information is missing or invalid.
-       */
-      case "DELETE":
-        await prisma.destinationCalendar
-          .delete({
-            where: { id: safeQuery.data.id },
-          })
-          .then(() =>
-            res.status(200).json({
-              message: `DestinationCalendar with id: ${safeQuery.data.id} deleted`,
-            })
-          )
-          .catch((error: Error) =>
-            res.status(404).json({
-              message: `DestinationCalendar with id: ${safeQuery.data.id} not found`,
-              error,
-            })
-          );
-        break;
-
-      default:
-        res.status(405).json({ message: "Method not allowed" });
-        break;
-    }
-  }
-}
-
-export default withMiddleware("HTTP_GET_DELETE_PATCH")(
-  withValidQueryIdTransformParseInt(destionationCalendarById)
-);

apps/api/pages/api/destination-calendars/[id]/_auth-middleware.ts

@@ -0,0 +1,32 @@
+import type { NextApiRequest } from "next";
+
+import { HttpError } from "@calcom/lib/http-error";
+
+import { schemaQueryIdParseInt } from "~/lib/validations/shared/queryIdTransformParseInt";
+
+async function authMiddleware(req: NextApiRequest) {
+  const { userId, isAdmin, prisma } = req;
+  const { id } = schemaQueryIdParseInt.parse(req.query);
+  if (isAdmin) return;
+  const userEventTypes = await prisma.eventType.findMany({
+    where: { userId },
+    select: { id: true },
+  });
+
+  const userEventTypeIds = userEventTypes.map((eventType) => eventType.id);
+
+  const destinationCalendar = await prisma.destinationCalendar.findFirst({
+    where: {
+      AND: [
+        { id },
+        {
+          OR: [{ userId }, { eventTypeId: { in: userEventTypeIds } }],
+        },
+      ],
+    },
+  });
+  if (!destinationCalendar)
+    throw new HttpError({ statusCode: 404, message: "Destination calendar not found" });
+}
+
+export default authMiddleware;

apps/api/pages/api/destination-calendars/[id]/_delete.ts

@@ -0,0 +1,42 @@
+import type { NextApiRequest } from "next";
+
+import { defaultResponder } from "@calcom/lib/server";
+
+import { schemaQueryIdParseInt } from "~/lib/validations/shared/queryIdTransformParseInt";
+
+/**
+ * @swagger
+ * /destination-calendars/{id}:
+ *   delete:
+ *     summary: Remove an existing destination calendar
+ *     parameters:
+ *      - in: path
+ *        name: id
+ *        schema:
+ *          type: integer
+ *        required: true
+ *        description: ID of the destination calendar to delete
+ *      - in: query
+ *        name: apiKey
+ *        required: true
+ *        schema:
+ *          type: string
+ *        description: Your API key
+ *     tags:
+ *      - destination-calendars
+ *     responses:
+ *       200:
+ *         description: OK, destinationCalendar removed successfully
+ *       401:
+ *        description: Authorization information is missing or invalid.
+ *       404:
+ *        description: Destination calendar not found
+ */
+export async function deleteHandler(req: NextApiRequest) {
+  const { prisma, query } = req;
+  const { id } = schemaQueryIdParseInt.parse(query);
+  await prisma.destinationCalendar.delete({ where: { id } });
+  return { message: `OK, Destination Calendar removed successfully` };
+}
+
+export default defaultResponder(deleteHandler);

apps/api/pages/api/destination-calendars/[id]/_get.ts

@@ -0,0 +1,47 @@
+import type { NextApiRequest } from "next";
+
+import { defaultResponder } from "@calcom/lib/server";
+
+import { schemaDestinationCalendarReadPublic } from "~/lib/validations/destination-calendar";
+import { schemaQueryIdParseInt } from "~/lib/validations/shared/queryIdTransformParseInt";
+
+/**
+ * @swagger
+ * /destination-calendars/{id}:
+ *   get:
+ *     summary: Find a destination calendar
+ *     parameters:
+ *       - in: path
+ *         name: id
+ *         schema:
+ *           type: integer
+ *         required: true
+ *         description: ID of the destination calendar to get
+ *       - in: query
+ *         name: apiKey
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: Your API key
+ *     tags:
+ *      - destination-calendars
+ *     responses:
+ *       200:
+ *         description: OK
+ *       401:
+ *        description: Authorization information is missing or invalid.
+ *       404:
+ *         description: Destination calendar not found
+ */
+export async function getHandler(req: NextApiRequest) {
+  const { prisma, query } = req;
+  const { id } = schemaQueryIdParseInt.parse(query);
+
+  const destinationCalendar = await prisma.destinationCalendar.findUnique({
+    where: { id },
+  });
+
+  return { destinationCalendar: schemaDestinationCalendarReadPublic.parse({ ...destinationCalendar }) };
+}
+
+export default defaultResponder(getHandler);

apps/api/pages/api/destination-calendars/[id]/_patch.ts

@@ -0,0 +1,71 @@
+import type { NextApiRequest } from "next";
+
+import { defaultResponder } from "@calcom/lib/server";
+
+import {
+  schemaDestinationCalendarEditBodyParams,
+  schemaDestinationCalendarReadPublic,
+} from "~/lib/validations/destination-calendar";
+import { schemaQueryIdParseInt } from "~/lib/validations/shared/queryIdTransformParseInt";
+
+/**
+ * @swagger
+ * /destination-calendars/{id}:
+ *   patch:
+ *     summary: Edit an existing destination calendar
+ *     parameters:
+ *      - in: path
+ *        name: id
+ *        schema:
+ *          type: integer
+ *        required: true
+ *        description: ID of the destination calendar to edit
+ *      - in: query
+ *        name: apiKey
+ *        required: true
+ *        schema:
+ *          type: string
+ *        description: Your API key
+ *     requestBody:
+ *       description: Create a new booking related to one of your event-types
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             properties:
+ *               integration:
+ *                 type: string
+ *                 description: 'The integration'
+ *               externalId:
+ *                 type: string
+ *                 description: 'The external ID of the integration'
+ *               eventTypeId:
+ *                 type: integer
+ *                 description: 'The ID of the eventType it is associated with'
+ *               bookingId:
+ *                 type: integer
+ *                 description: 'The booking ID it is associated with'
+ *     tags:
+ *      - destination-calendars
+ *     responses:
+ *       200:
+ *         description: OK
+ *       401:
+ *        description: Authorization information is missing or invalid.
+ *       404:
+ *        description: Destination calendar not found
+ */
+export async function patchHandler(req: NextApiRequest) {
+  const { prisma, query, body } = req;
+  const { id } = schemaQueryIdParseInt.parse(query);
+  const parsedBody = schemaDestinationCalendarEditBodyParams.parse(body);
+
+  const destinationCalendar = await prisma.destinationCalendar.update({
+    where: { id },
+    data: parsedBody,
+  });
+  return { destinationCalendar: schemaDestinationCalendarReadPublic.parse(destinationCalendar) };
+}
+
+export default defaultResponder(patchHandler);

apps/api/pages/api/destination-calendars/[id]/index.ts

@@ -0,0 +1,18 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+import { defaultHandler, defaultResponder } from "@calcom/lib/server";
+
+import { withMiddleware } from "~/lib/helpers/withMiddleware";
+
+import authMiddleware from "./_auth-middleware";
+
+export default withMiddleware()(
+  defaultResponder(async (req: NextApiRequest, res: NextApiResponse) => {
+    await authMiddleware(req);
+    return defaultHandler({
+      GET: import("./_get"),
+      PATCH: import("./_patch"),
+      DELETE: import("./_delete"),
+    })(req, res);
+  })
+);

apps/api/pages/api/destination-calendars/_get.ts

@@ -0,0 +1,58 @@
+import type { NextApiRequest } from "next";
+
+import { HttpError } from "@calcom/lib/http-error";
+import { defaultResponder } from "@calcom/lib/server";
+
+import { extractUserIdsFromQuery } from "~/lib/utils/extractUserIdsFromQuery";
+import { schemaDestinationCalendarReadPublic } from "~/lib/validations/destination-calendar";
+
+/**
+ * @swagger
+ * /destination-calendars:
+ *   get:
+ *     parameters:
+ *       - in: query
+ *         name: apiKey
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: Your API key
+ *     summary: Find all destination calendars
+ *     tags:
+ *      - destination-calendars
+ *     responses:
+ *       200:
+ *         description: OK
+ *       401:
+ *        description: Authorization information is missing or invalid.
+ *       404:
+ *         description: No destination calendars were found
+ */
+async function getHandler(req: NextApiRequest) {
+  const { userId, prisma } = req;
+  const userIds = req.query.userId ? extractUserIdsFromQuery(req) : [userId];
+
+  const userEventTypes = await prisma.eventType.findMany({
+    where: { userId: { in: userIds } },
+    select: { id: true },
+  });
+
+  const userEventTypeIds = userEventTypes.map((eventType) => eventType.id);
+
+  const allDestinationCalendars = await prisma.destinationCalendar.findMany({
+    where: {
+      OR: [{ userId: { in: userIds } }, { eventTypeId: { in: userEventTypeIds } }],
+    },
+  });
+
+  if (allDestinationCalendars.length === 0)
+    new HttpError({ statusCode: 404, message: "No destination calendars were found" });
+
+  return {
+    destinationCalendars: allDestinationCalendars.map((destinationCalendar) =>
+      schemaDestinationCalendarReadPublic.parse(destinationCalendar)
+    ),
+  };
+}
+
+export default defaultResponder(getHandler);

apps/api/pages/api/destination-calendars/_post.ts

@@ -0,0 +1,99 @@
+import type { NextApiRequest } from "next";
+
+import { HttpError } from "@calcom/lib/http-error";
+import { defaultResponder } from "@calcom/lib/server";
+
+import {
+  schemaDestinationCalendarReadPublic,
+  schemaDestinationCalendarCreateBodyParams,
+} from "~/lib/validations/destination-calendar";
+
+/**
+ * @swagger
+ * /destination-calendars:
+ *   post:
+ *     parameters:
+ *       - in: query
+ *         name: apiKey
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: Your API key
+ *     summary: Creates a new destination calendar
+ *     requestBody:
+ *       description: Create a new destination calendar for your events
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - integration
+ *               - externalId
+ *             properties:
+ *               integration:
+ *                 type: string
+ *                 description: 'The integration'
+ *               externalId:
+ *                 type: string
+ *                 description: 'The external ID of the integration'
+ *               eventTypeId:
+ *                 type: integer
+ *                 description: 'The ID of the eventType it is associated with'
+ *               bookingId:
+ *                 type: integer
+ *                 description: 'The booking ID it is associated with'
+ *     tags:
+ *      - destination-calendars
+ *     responses:
+ *       201:
+ *         description: OK, destination calendar created
+ *       400:
+ *        description: Bad request. DestinationCalendar body is invalid.
+ *       401:
+ *        description: Authorization information is missing or invalid.
+ */
+async function postHandler(req: NextApiRequest) {
+  const { userId, isAdmin, prisma, body } = req;
+
+  const parsedBody = schemaDestinationCalendarCreateBodyParams.parse(body);
+
+  await checkPermissions(req, userId);
+
+  if (!parsedBody.eventTypeId) {
+    parsedBody.userId = userId;
+  }
+
+  if (isAdmin) {
+    parsedBody.userId = parsedBody.userId || userId;
+  }
+
+  const destination_calendar = await prisma.destinationCalendar.create({ data: { ...parsedBody } });
+
+  return {
+    destinationCalendar: schemaDestinationCalendarReadPublic.parse(destination_calendar),
+    message: "Destination calendar created successfully",
+  };
+}
+
+async function checkPermissions(req: NextApiRequest, userId: number) {
+  const { isAdmin } = req;
+  const body = schemaDestinationCalendarCreateBodyParams.parse(req.body);
+
+  /* Non-admin users can only create destination calendars for themselves */
+  if (!isAdmin && body.userId)
+    throw new HttpError({
+      statusCode: 401,
+      message: "ADMIN required for `userId`",
+    });
+  /* Admin users are required to pass in a userId */
+  if (isAdmin && !body.userId) throw new HttpError({ statusCode: 400, message: "`userId` required" });
+  /* User should only be able to create for their own destination calendars*/
+  if (!isAdmin && body.eventTypeId) {
+    const ownsEventType = await req.prisma.eventType.findFirst({ where: { id: body.eventTypeId, userId } });
+    if (!ownsEventType) throw new HttpError({ statusCode: 401, message: "Unauthorized" });
+  }
+  // TODO:: Add support for team event types with validation
+}
+
+export default defaultResponder(postHandler);

apps/api/pages/api/destination-calendars/index.ts

@@ -1,114 +1,10 @@
-import type { NextApiRequest, NextApiResponse } from "next";
+import { defaultHandler } from "@calcom/lib/server";
 
 import { withMiddleware } from "~/lib/helpers/withMiddleware";
-import type { DestinationCalendarResponse, DestinationCalendarsResponse } from "~/lib/types";
-import {
-  schemaDestinationCalendarCreateBodyParams,
-  schemaDestinationCalendarReadPublic,
-} from "~/lib/validations/destination-calendar";
 
-async function createOrlistAllDestinationCalendars(
-  { method, body, userId, prisma }: NextApiRequest,
-  res: NextApiResponse<DestinationCalendarsResponse | DestinationCalendarResponse>
-) {
-  if (method === "GET") {
-    /**
-     * @swagger
-     * /destination-calendars:
-     *   get:
-     *     parameters:
-     *       - in: query
-     *         name: apiKey
-     *         required: true
-     *         schema:
-     *           type: string
-     *         description: Your API key
-     *     summary: Find all destination calendars
-     *     tags:
-     *      - destination-calendars
-     *     responses:
-     *       200:
-     *         description: OK
-     *       401:
-     *        description: Authorization information is missing or invalid.
-     *       404:
-     *         description: No destination calendars were found
-     */
-    const data = await prisma.destinationCalendar.findMany({ where: { userId } });
-    const destination_calendars = data.map((destinationCalendar) =>
-      schemaDestinationCalendarReadPublic.parse(destinationCalendar)
-    );
-    if (data) res.status(200).json({ destination_calendars });
-    else
-      (error: Error) =>
-        res.status(404).json({
-          message: "No DestinationCalendars were found",
-          error,
-        });
-  } else if (method === "POST") {
-    /**
-     * @swagger
-     * /destination-calendars:
-     *   post:
-     *     parameters:
-     *       - in: query
-     *         name: apiKey
-     *         required: true
-     *         schema:
-     *           type: string
-     *         description: Your API key
-     *     summary: Creates a new destination calendar
-     *     requestBody:
-     *       description: Create a new destination calendar for your events
-     *       required: true
-     *       content:
-     *         application/json:
-     *           schema:
-     *             type: object
-     *             required:
-     *               - integration
-     *               - externalId
-     *             properties:
-     *               integration:
-     *                 type: string
-     *                 description: 'The integration'
-     *               externalId:
-     *                 type: string
-     *                 description: 'The external ID of the integration'
-     *               eventTypeId:
-     *                 type: integer
-     *                 description: 'The ID of the eventType it is associated with'
-     *               bookingId:
-     *                 type: integer
-     *                 description: 'The booking ID it is associated with'
-     *     tags:
-     *      - destination-calendars
-     *     responses:
-     *       201:
-     *         description: OK, destination calendar created
-     *       400:
-     *        description: Bad request. DestinationCalendar body is invalid.
-     *       401:
-     *        description: Authorization information is missing or invalid.
-     */
-    const safe = schemaDestinationCalendarCreateBodyParams.safeParse(body);
-    if (!safe.success) {
-      res.status(400).json({ message: "Invalid request body" });
-      return;
-    }
-
-    const data = await prisma.destinationCalendar.create({ data: { ...safe.data, userId } });
-    const destination_calendar = schemaDestinationCalendarReadPublic.parse(data);
-
-    if (destination_calendar)
-      res.status(201).json({ destination_calendar, message: "DestinationCalendar created successfully" });
-    else
-      (error: Error) =>
-        res.status(400).json({
-          message: "Could not create new destinationCalendar",
-          error,
-        });
-  } else res.status(405).json({ message: `Method ${method} not allowed` });
-}
-
-export default withMiddleware("HTTP_GET_OR_POST")(createOrlistAllDestinationCalendars);
+export default withMiddleware()(
+  defaultHandler({
+    GET: import("./_get"),
+    POST: import("./_post"),
+  })
+);

apps/api/pages/api/event-types/[id]/_patch.ts

@@ -209,6 +209,8 @@ export async function patchHandler(req: NextApiRequest) {
     hosts = [],
     bookingLimits,
     durationLimits,
+    /** FIXME: Updating event-type children from API not supported for now  */
+    children: _,
     ...parsedBody
   } = schemaEventTypeEditBodyParams.parse(body);
 

apps/api/pages/api/event-types/_post.ts

@@ -268,6 +268,8 @@ async function postHandler(req: NextApiRequest) {
     hosts = [],
     bookingLimits,
     durationLimits,
+    /** FIXME: Adding event-type children from API not supported for now  */
+    children: _,
     ...parsedBody
   } = schemaEventTypeCreateBodyParams.parse(body || {});
 
@@ -282,8 +284,8 @@ async function postHandler(req: NextApiRequest) {
   await checkPermissions(req);
 
   if (parsedBody.parentId) {
-    await checkParentEventOwnership(parsedBody.parentId, userId);
-    await checkUserMembership(parsedBody.parentId, parsedBody.userId);
+    await checkParentEventOwnership(req);
+    await checkUserMembership(req);
   }
 
   if (isAdmin && parsedBody.userId) {

apps/api/pages/api/event-types/_utils/checkParentEventOwnership.ts

@@ -1,17 +1,21 @@
+import type { NextApiRequest } from "next";
+
 import { HttpError } from "@calcom/lib/http-error";
 
 /**
  * Checks if a user, identified by the provided userId, has ownership (or admin rights) over
  * the team associated with the event type identified by the parentId.
  *
- * @param parentId - The ID of the parent event type.
- * @param userId - The ID of the user.
+ * @param req - The current request
  *
  * @throws {HttpError} If the parent event type is not found,
  *                     if the parent event type doesn't belong to any team,
  *                     or if the user doesn't have ownership or admin rights to the associated team.
  */
-export default async function checkParentEventOwnership(parentId: number, userId: number) {
+export default async function checkParentEventOwnership(req: NextApiRequest) {
+  const { userId, prisma, body } = req;
+  /** These are already parsed upstream, we can assume they're good here. */
+  const parentId = Number(body.parentId);
   const parentEventType = await prisma.eventType.findUnique({
     where: {
       id: parentId,

apps/api/pages/api/event-types/_utils/checkUserMembership.ts

@@ -1,17 +1,22 @@
+import type { NextApiRequest } from "next";
+
 import { HttpError } from "@calcom/lib/http-error";
 
 /**
  * Checks if a user, identified by the provided userId, is a member of the team associated
  * with the event type identified by the parentId.
  *
- * @param parentId - The ID of the event type.
- * @param userId - The ID of the user.
+ * @param req - The current request
  *
  * @throws {HttpError} If the event type is not found,
  *                     if the event type doesn't belong to any team,
  *                     or if the user isn't a member of the associated team.
  */
-export default async function checkUserMembership(parentId: number, userId: number) {
+export default async function checkUserMembership(req: NextApiRequest) {
+  const { prisma, body } = req;
+  /** These are already parsed upstream, we can assume they're good here. */
+  const parentId = Number(body.parentId);
+  const userId = Number(body.userId);
   const parentEventType = await prisma.eventType.findUnique({
     where: {
       id: parentId,

apps/api/pages/api/slots/_get.ts

@@ -3,7 +3,7 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";
 import { createContext } from "@calcom/trpc/server/createContext";
-import { viewerRouter } from "@calcom/trpc/server/routers/viewer/_router";
+import { slotsRouter } from "@calcom/trpc/server/routers/viewer/slots/_router";
 
 import { TRPCError } from "@trpc/server";
 import { getHTTPStatusCodeFromError } from "@trpc/server/http";
@@ -11,10 +11,10 @@ import { getHTTPStatusCodeFromError } from "@trpc/server/http";
 async function handler(req: NextApiRequest, res: NextApiResponse) {
   /** @see https://trpc.io/docs/server-side-calls */
   const ctx = await createContext({ req, res });
-  const caller = viewerRouter.createCaller(ctx);
+  const caller = slotsRouter.createCaller(ctx);
   try {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return await caller.slots.getSchedule(req.query as any /* Let tRPC handle this */);
+    return await caller.getSchedule(req.query as any /* Let tRPC handle this */);
   } catch (cause) {
     if (cause instanceof TRPCError) {
       const statusCode = getHTTPStatusCodeFromError(cause);

apps/api/test/lib/bookings/_post.test.ts

@@ -1,3 +1,4 @@
+// TODO: Fix tests (These test were never running due to the vitest workspace config)
 import prismaMock from "../../../../../tests/libs/__mocks__/prisma";
 
 import type { Request, Response } from "express";
@@ -21,7 +22,7 @@ vi.mock("@calcom/lib/server/i18n", () => {
   };
 });
 
-describe("POST /api/bookings", () => {
+describe.skipIf(true)("POST /api/bookings", () => {
   describe("Errors", () => {
     test("Missing required data", async () => {
       const { req, res } = createMocks<CustomNextApiRequest, CustomNextApiResponse>({
@@ -31,7 +32,7 @@ describe("POST /api/bookings", () => {
 
       await handler(req, res);
 
-      expect(res._getStatusCode()).toBe(400);
+      expect(res.statusCode).toBe(400);
       expect(JSON.parse(res._getData())).toEqual(
         expect.objectContaining({
           message:

apps/api/test/lib/middleware/addRequestId.test.ts

@@ -0,0 +1,36 @@
+import type { Request, Response } from "express";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { createMocks } from "node-mocks-http";
+import { describe, vi, it, expect, afterEach } from "vitest";
+
+import { addRequestId } from "../../../lib/helpers/addRequestid";
+
+type CustomNextApiRequest = NextApiRequest & Request;
+type CustomNextApiResponse = NextApiResponse & Response;
+
+afterEach(() => {
+  vi.resetAllMocks();
+});
+
+describe("Adds a request ID", () => {
+  it("Should attach a request ID to the request", async () => {
+    const { req, res } = createMocks<CustomNextApiRequest, CustomNextApiResponse>({
+      method: "POST",
+      body: {},
+    });
+
+    const middleware = {
+      fn: addRequestId,
+    };
+
+    const serverNext = vi.fn((next: void) => Promise.resolve(next));
+
+    const middlewareSpy = vi.spyOn(middleware, "fn");
+
+    await middleware.fn(req, res, serverNext);
+
+    expect(middlewareSpy).toBeCalled();
+    expect(res.statusCode).toBe(200);
+    expect(res.getHeader("Calcom-Response-ID")).toBeDefined();
+  });
+});

apps/api/test/lib/middleware/httpMethods.test.ts

@@ -0,0 +1,53 @@
+import type { Request, Response } from "express";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { createMocks } from "node-mocks-http";
+import { describe, vi, it, expect, afterEach } from "vitest";
+
+import { httpMethod } from "../../../lib/helpers/httpMethods";
+
+type CustomNextApiRequest = NextApiRequest & Request;
+type CustomNextApiResponse = NextApiResponse & Response;
+
+afterEach(() => {
+  vi.resetAllMocks();
+});
+
+describe("HTTP Methods function only allows the correct HTTP Methods", () => {
+  it("Should allow the passed in Method", async () => {
+    const { req, res } = createMocks<CustomNextApiRequest, CustomNextApiResponse>({
+      method: "POST",
+      body: {},
+    });
+
+    const middleware = {
+      fn: httpMethod("POST"),
+    };
+
+    const serverNext = vi.fn((next: void) => Promise.resolve(next));
+
+    const middlewareSpy = vi.spyOn(middleware, "fn");
+
+    await middleware.fn(req, res, serverNext);
+
+    expect(middlewareSpy).toBeCalled();
+    expect(res.statusCode).toBe(200);
+  });
+  it("Should allow the passed in Method", async () => {
+    const { req, res } = createMocks<CustomNextApiRequest, CustomNextApiResponse>({
+      method: "POST",
+      body: {},
+    });
+
+    const middleware = {
+      fn: httpMethod("GET"),
+    };
+
+    const serverNext = vi.fn((next: void) => Promise.resolve(next));
+    const middlewareSpy = vi.spyOn(middleware, "fn");
+
+    await middleware.fn(req, res, serverNext);
+
+    expect(middlewareSpy).toBeCalled();
+    expect(res.statusCode).toBe(405);
+  });
+});

apps/api/test/lib/middleware/verifyApiKey.test.ts

@@ -0,0 +1,76 @@
+import type { Request, Response } from "express";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { createMocks } from "node-mocks-http";
+import { describe, vi, it, expect, afterEach } from "vitest";
+
+import checkLicense from "@calcom/features/ee/common/server/checkLicense";
+
+import { isAdminGuard } from "~/lib/utils/isAdmin";
+
+import { verifyApiKey } from "../../../lib/helpers/verifyApiKey";
+
+type CustomNextApiRequest = NextApiRequest & Request;
+type CustomNextApiResponse = NextApiResponse & Response;
+
+afterEach(() => {
+  vi.resetAllMocks();
+});
+
+vi.mock("@calcom/features/ee/common/server/checkLicense", () => {
+  return {
+    default: vi.fn(),
+  };
+});
+
+vi.mock("~/lib/utils/isAdmin", () => {
+  return {
+    isAdminGuard: vi.fn(),
+  };
+});
+
+describe("Verify API key", () => {
+  it("It should throw an error if the api key is not valid", async () => {
+    const { req, res } = createMocks<CustomNextApiRequest, CustomNextApiResponse>({
+      method: "POST",
+      body: {},
+    });
+
+    const middleware = {
+      fn: verifyApiKey,
+    };
+
+    vi.mocked(checkLicense).mockResolvedValue(false);
+    vi.mocked(isAdminGuard).mockResolvedValue(false);
+
+    const serverNext = vi.fn((next: void) => Promise.resolve(next));
+
+    const middlewareSpy = vi.spyOn(middleware, "fn");
+
+    await middleware.fn(req, res, serverNext);
+
+    expect(middlewareSpy).toBeCalled();
+    expect(res.statusCode).toBe(401);
+  });
+  it("It should thow an error if no api key is provided", async () => {
+    const { req, res } = createMocks<CustomNextApiRequest, CustomNextApiResponse>({
+      method: "POST",
+      body: {},
+    });
+
+    const middleware = {
+      fn: verifyApiKey,
+    };
+
+    vi.mocked(checkLicense).mockResolvedValue(true);
+    vi.mocked(isAdminGuard).mockResolvedValue(false);
+
+    const serverNext = vi.fn((next: void) => Promise.resolve(next));
+
+    const middlewareSpy = vi.spyOn(middleware, "fn");
+
+    await middleware.fn(req, res, serverNext);
+
+    expect(middlewareSpy).toBeCalled();
+    expect(res.statusCode).toBe(401);
+  });
+});

apps/web/components/AddToHomescreen.tsx

@@ -20,7 +20,7 @@ export default function AddToHomescreen() {
             <div className="flex w-0 flex-1 items-center">
               <span className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast flex rounded-lg bg-opacity-30 p-2">
                 <svg
-                  className="h-7 w-7 fill-current text-indigo-500"
+                  className="h-7 w-7 fill-current text-[#5B93F9]"
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 50 50"
                   enableBackground="new 0 0 50 50">
@@ -29,7 +29,7 @@ export default function AddToHomescreen() {
                   <path d="M35 40H15c-1.7 0-3-1.3-3-3V19c0-1.7 1.3-3 3-3h7v2h-7c-.6 0-1 .4-1 1v18c0 .6.4 1 1 1h20c.6 0 1-.4 1-1V19c0-.6-.4-1-1-1h-7v-2h7c1.7 0 3 1.3 3 3v18c0 1.7-1.3 3-3 3z" />
                 </svg>
               </span>
-              <p className="text-inverted ms-3 text-xs font-medium">
+              <p className="text-inverted ms-3 text-xs font-medium dark:text-white">
                 <span className="inline">{t("add_to_homescreen")}</span>
               </p>
             </div>
@@ -40,7 +40,7 @@ export default function AddToHomescreen() {
                 type="button"
                 className="-mr-1 flex rounded-md p-2 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
                 <span className="sr-only">{t("dismiss")}</span>
-                <X className="text-inverted h-6 w-6" aria-hidden="true" />
+                <X className="text-inverted h-6 w-6 dark:text-white" aria-hidden="true" />
               </button>
             </div>
           </div>

apps/web/components/I18nLanguageHandler.tsx

@@ -1,12 +1,7 @@
-import { lookup } from "bcp-47-match";
-import { useSession } from "next-auth/react";
-import { useTranslation } from "next-i18next";
-import { useEffect } from "react";
-
 import { CALCOM_VERSION } from "@calcom/lib/constants";
 import { trpc } from "@calcom/trpc/react";
 
-function useViewerI18n(locale: string) {
+export function useViewerI18n(locale: string) {
   return trpc.viewer.public.i18n.useQuery(
     { locale, CalComVersion: CALCOM_VERSION },
     {
@@ -19,46 +14,3 @@ function useViewerI18n(locale: string) {
     }
   );
 }
-
-function useClientLocale(locales: string[]) {
-  const session = useSession();
-  // If the user is logged in, use their locale
-  if (session.data?.user.locale) return session.data.user.locale;
-  // If the user is not logged in, use the browser locale
-  if (typeof window !== "undefined") {
-    // This is the only way I found to ensure the prefetched locale is used on first render
-    // FIXME: Find a better way to pick the best matching locale from the browser
-    return lookup(locales, window.navigator.language) || window.navigator.language;
-  }
-  // If the browser is not available, use English
-  return "en";
-}
-
-export function useClientViewerI18n(locales: string[]) {
-  const clientLocale = useClientLocale(locales);
-  return useViewerI18n(clientLocale);
-}
-
-/**
- * Auto-switches locale client-side to the logged in user's preference
- */
-const I18nLanguageHandler = (props: { locales: string[] }) => {
-  const { locales } = props;
-  const { i18n } = useTranslation("common");
-  const locale = useClientViewerI18n(locales).data?.locale || i18n.language;
-
-  useEffect(() => {
-    // bail early when i18n = {}
-    if (Object.keys(i18n).length === 0) return;
-    // if locale is ready and the i18n.language does != locale - changeLanguage
-    if (locale && i18n.language !== locale) {
-      i18n.changeLanguage(locale);
-    }
-    // set dir="rtl|ltr"
-    document.dir = i18n.dir();
-    document.documentElement.setAttribute("lang", locale);
-  }, [locale, i18n]);
-  return null;
-};
-
-export default I18nLanguageHandler;

apps/web/components/PageWrapper.tsx

@@ -13,8 +13,6 @@ import type { AppProps } from "@lib/app-providers";
 import AppProviders from "@lib/app-providers";
 import { seoConfig } from "@lib/config/next-seo.config";
 
-import I18nLanguageHandler from "@components/I18nLanguageHandler";
-
 export interface CalPageWrapper {
   (props?: AppProps): JSX.Element;
   PageWrapper?: AppProps["Component"]["PageWrapper"];
@@ -72,7 +70,6 @@ function PageWrapper(props: AppProps) {
         }
         {...seoConfig.defaultNextSeo}
       />
-      <I18nLanguageHandler locales={props.router.locales || []} />
       <Script
         nonce={nonce}
         id="page-status"

apps/web/components/dialog/ChargeCardDialog.tsx

@@ -47,7 +47,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
       <DialogContent>
         <div className="flex flex-row space-x-3">
-          <div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
+          <div className=" bg-subtle flex h-10 w-10 flex-shrink-0 justify-center rounded-full">
             <CreditCard className="m-auto h-6 w-6" />
           </div>
           <div className="pt-1">

apps/web/components/dialog/RescheduleDialog.tsx

@@ -43,7 +43,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
       <DialogContent enableOverflow>
         <div className="flex flex-row space-x-3">
-          <div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
+          <div className="bg-subtle flex h-10 w-10 flex-shrink-0 justify-center rounded-full ">
             <Clock className="m-auto h-6 w-6" />
           </div>
           <div className="pt-1">

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -130,7 +130,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
        * a team event. Since we don't have logic to handle each attendee calendar (for now).
        * This will fallback to each user selected destination calendar.
        */}
-      <div className="border-subtle space-y-6 rounded-md border p-6">
+      <div className="border-subtle space-y-6 rounded-lg border p-6">
         {!!connectedCalendarsQuery.data?.connectedCalendars.length && !team && (
           <div className="flex flex-col">
             <div className="flex justify-between">
@@ -182,9 +182,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         </div>
       </div>
 
-      <BookerLayoutSelector fallbackToUserSettings isDark={selectedThemeIsDark} />
+      <BookerLayoutSelector fallbackToUserSettings isDark={selectedThemeIsDark} isOuterBorder={true} />
 
-      <div className="border-subtle space-y-6 rounded-md border p-6">
+      <div className="border-subtle space-y-6 rounded-lg border p-6">
         <FormBuilder
           title={t("booking_questions_title")}
           description={t("booking_questions_description")}
@@ -213,8 +213,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         defaultValue={eventType.requiresBookerEmailVerification}
         render={({ field: { value, onChange } }) => (
           <SettingsToggle
+            labelClassName="text-sm"
             toggleSwitchAtTheEnd={true}
-            switchContainerClassName="border-subtle rounded-md border py-6 px-4 sm:px-6"
+            switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
             title={t("requires_booker_email_verification")}
             {...shouldLockDisableProps("requiresBookerEmailVerification")}
             description={t("description_requires_booker_email_verification")}
@@ -230,8 +231,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         defaultValue={eventType.hideCalendarNotes}
         render={({ field: { value, onChange } }) => (
           <SettingsToggle
+            labelClassName="text-sm"
             toggleSwitchAtTheEnd={true}
-            switchContainerClassName="border-subtle rounded-md border py-6 px-4 sm:px-6"
+            switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
             title={t("disable_notes")}
             {...shouldLockDisableProps("hideCalendarNotes")}
             description={t("disable_notes_description")}
@@ -247,9 +249,10 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         render={({ field: { value, onChange } }) => (
           <>
             <SettingsToggle
+              labelClassName="text-sm"
               toggleSwitchAtTheEnd={true}
               switchContainerClassName={classNames(
-                "border-subtle rounded-md border py-6 px-4 sm:px-6",
+                "border-subtle rounded-lg border py-6 px-4 sm:px-6",
                 redirectUrlVisible && "rounded-b-none"
               )}
               childrenClassName="lg:ml-0"
@@ -261,7 +264,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                 setRedirectUrlVisible(e);
                 onChange(e ? value : "");
               }}>
-              <div className="border-subtle rounded-b-md border border-t-0 p-6">
+              <div className="border-subtle rounded-b-lg border border-t-0 p-6">
                 <TextField
                   className="w-full"
                   label={t("redirect_success_booking")}
@@ -287,20 +290,21 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
       />
 
       <SettingsToggle
+        labelClassName="text-sm"
         toggleSwitchAtTheEnd={true}
         switchContainerClassName={classNames(
-          "border-subtle rounded-md border py-6 px-4 sm:px-6",
+          "border-subtle rounded-lg border py-6 px-4 sm:px-6",
           hashedLinkVisible && "rounded-b-none"
         )}
         childrenClassName="lg:ml-0"
         data-testid="hashedLinkCheck"
-        title={t("private_link")}
+        title={t("enable_private_url")}
         Badge={
           <a
             target="_blank"
             rel="noreferrer"
             href="https://cal.com/docs/core-features/event-types/single-use-private-links">
-            <Info className="mb-2 ml-1.5 h-4 w-4 cursor-pointer" />
+            <Info className="ml-1.5 h-4 w-4 cursor-pointer" />
           </a>
         }
         {...shouldLockDisableProps("hashedLinkCheck")}
@@ -310,7 +314,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           formMethods.setValue("hashedLink", e ? hashedUrl : undefined);
           setHashedLinkVisible(e);
         }}>
-        <div className="border-subtle rounded-b-md border border-t-0 p-6">
+        <div className="border-subtle rounded-b-lg border border-t-0 p-6">
           {!IS_VISUAL_REGRESSION_TESTING && (
             <TextField
               disabled
@@ -353,9 +357,10 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         render={({ field: { value, onChange } }) => (
           <>
             <SettingsToggle
+              labelClassName="text-sm"
               toggleSwitchAtTheEnd={true}
               switchContainerClassName={classNames(
-                "border-subtle rounded-md border py-6 px-4 sm:px-6",
+                "border-subtle rounded-lg border py-6 px-4 sm:px-6",
                 value && "rounded-b-none"
               )}
               childrenClassName="lg:ml-0"
@@ -379,13 +384,13 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                 }
                 onChange(e);
               }}>
-              <div className="border-subtle rounded-b-md border border-t-0 p-6">
+              <div className="border-subtle rounded-b-lg border border-t-0 p-6">
                 <Controller
                   name="seatsPerTimeSlot"
                   control={formMethods.control}
                   defaultValue={eventType.seatsPerTimeSlot}
                   render={({ field: { value, onChange } }) => (
-                    <div className="lg:-ml-2">
+                    <div>
                       <TextField
                         required
                         name="seatsPerTimeSlot"
@@ -395,12 +400,13 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                         disabled={seatsLocked.disabled}
                         defaultValue={value || 2}
                         min={1}
+                        containerClassName="max-w-80"
                         addOnSuffix={<>{t("seats")}</>}
                         onChange={(e) => {
                           onChange(Math.abs(Number(e.target.value)));
                         }}
                       />
-                      <div className="mt-2">
+                      <div className="mt-4">
                         <CheckboxField
                           description={t("show_attendees")}
                           disabled={seatsLocked.disabled}
@@ -435,8 +441,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
             render={({ field: { value, onChange } }) => (
               <>
                 <SettingsToggle
+                  labelClassName="text-sm"
                   toggleSwitchAtTheEnd={true}
-                  switchContainerClassName="border-subtle rounded-md border py-6 px-4 sm:px-6"
+                  switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
                   title={t("disable_attendees_confirmation_emails")}
                   description={t("disable_attendees_confirmation_emails_description")}
                   checked={value || false}
@@ -459,8 +466,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
             render={({ field: { value, onChange } }) => (
               <>
                 <SettingsToggle
+                  labelClassName="text-sm"
                   toggleSwitchAtTheEnd={true}
-                  switchContainerClassName="border-subtle rounded-md border py-6 px-4 sm:px-6"
+                  switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
                   title={t("disable_host_confirmation_emails")}
                   description={t("disable_host_confirmation_emails_description")}
                   checked={value || false}

apps/web/components/eventtype/EventLimitsTab.tsx

@@ -171,7 +171,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
 
   return (
     <div>
-      <div className="border-subtle space-y-6 rounded-md border p-6">
+      <div className="border-subtle space-y-6 rounded-lg border p-6">
         <div className="flex flex-col space-y-4 lg:flex-row lg:space-x-4 lg:space-y-0">
           <div className="w-full">
             <Label htmlFor="beforeBufferTime">
@@ -303,6 +303,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
           return (
             <SettingsToggle
               toggleSwitchAtTheEnd={true}
+              labelClassName="text-sm"
               title={t("limit_booking_frequency")}
               {...bookingLimitsLocked}
               description={t("limit_booking_frequency_description")}
@@ -317,11 +318,11 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                 }
               }}
               switchContainerClassName={classNames(
-                "border-subtle mt-6 rounded-md border py-6 px-4 sm:px-6",
+                "border-subtle mt-6 rounded-lg border py-6 px-4 sm:px-6",
                 isChecked && "rounded-b-none"
               )}
               childrenClassName="lg:ml-0">
-              <div className="border-subtle rounded-b-md border border-t-0 p-6">
+              <div className="border-subtle rounded-b-lg border border-t-0 p-6">
                 <IntervalLimitsManager
                   disabled={bookingLimitsLocked.disabled}
                   propertyName="bookingLimits"
@@ -340,9 +341,10 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
           const isChecked = Object.keys(value ?? {}).length > 0;
           return (
             <SettingsToggle
+              labelClassName="text-sm"
               toggleSwitchAtTheEnd={true}
               switchContainerClassName={classNames(
-                "border-subtle mt-6 rounded-md border py-6 px-4 sm:px-6",
+                "border-subtle mt-6 rounded-lg border py-6 px-4 sm:px-6",
                 isChecked && "rounded-b-none"
               )}
               childrenClassName="lg:ml-0"
@@ -359,7 +361,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                   formMethods.setValue("durationLimits", {});
                 }
               }}>
-              <div className="border-subtle rounded-b-md border border-t-0 p-6">
+              <div className="border-subtle rounded-b-lg border border-t-0 p-6">
                 <IntervalLimitsManager
                   propertyName="durationLimits"
                   defaultLimit={60}
@@ -380,9 +382,10 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
 
           return (
             <SettingsToggle
+              labelClassName="text-sm"
               toggleSwitchAtTheEnd={true}
               switchContainerClassName={classNames(
-                "border-subtle mt-6 rounded-md border py-6 px-4 sm:px-6",
+                "border-subtle mt-6 rounded-lg border py-6 px-4 sm:px-6",
                 isChecked && "rounded-b-none"
               )}
               childrenClassName="lg:ml-0"
@@ -391,7 +394,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
               {...periodTypeLocked}
               checked={isChecked}
               onCheckedChange={(bool) => formMethods.setValue("periodType", bool ? "ROLLING" : "UNLIMITED")}>
-              <div className="border-subtle rounded-b-md border border-t-0 p-6">
+              <div className="border-subtle rounded-b-lg border border-t-0 p-6">
                 <RadioGroup.Root
                   defaultValue={watchPeriodType}
                   value={watchPeriodType}
@@ -478,9 +481,10 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
         }}
       />
       <SettingsToggle
+        labelClassName="text-sm"
         toggleSwitchAtTheEnd={true}
         switchContainerClassName={classNames(
-          "border-subtle mt-6 rounded-md border py-6 px-4 sm:px-6",
+          "border-subtle mt-6 rounded-lg border py-6 px-4 sm:px-6",
           offsetToggle && "rounded-b-none"
         )}
         childrenClassName="lg:ml-0"
@@ -494,10 +498,11 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
             formMethods.setValue("offsetStart", 0);
           }
         }}>
-        <div className="border-subtle rounded-b-md border border-t-0 p-6">
+        <div className="border-subtle rounded-b-lg border border-t-0 p-6">
           <TextField
             required
             type="number"
+            containerClassName="max-w-80"
             {...offsetStartLockedProps}
             label={t("offset_start")}
             {...formMethods.register("offsetStart")}

apps/web/components/eventtype/EventSetupTab.tsx

@@ -392,7 +392,7 @@ export const EventSetupTab = (
   return (
     <div>
       <div className="space-y-4">
-        <div className="border-subtle space-y-6 rounded-md border p-6">
+        <div className="border-subtle space-y-6 rounded-lg border p-6">
           <TextField
             required
             label={t("title")}
@@ -431,7 +431,7 @@ export const EventSetupTab = (
             })}
           />
         </div>
-        <div className="border-subtle rounded-md border p-6">
+        <div className="border-subtle rounded-lg border p-6">
           {multipleDuration ? (
             <div className="space-y-6">
               <div>
@@ -527,7 +527,7 @@ export const EventSetupTab = (
           )}
         </div>
 
-        <div className="border-subtle rounded-md border p-6">
+        <div className="border-subtle rounded-lg border p-6">
           <div>
             <Skeleton as={Label} loadingClassName="w-16">
               {t("location")}

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -268,9 +268,11 @@ function EventTypeSingleLayout({
                   </Skeleton>
                 )}
                 <Tooltip
+                  sideOffset={4}
                   content={
                     formMethods.watch("hidden") ? t("show_eventtype_on_profile") : t("hide_from_profile")
-                  }>
+                  }
+                  side="bottom">
                   <div className="self-center rounded-md p-2">
                     <Switch
                       id="hiddenSwitch"
@@ -291,7 +293,7 @@ function EventTypeSingleLayout({
             {!isManagedEventType && (
               <>
                 {/* We have to warp this in tooltip as it has a href which disabels the tooltip on buttons */}
-                <Tooltip content={t("preview")}>
+                <Tooltip content={t("preview")} side="bottom" sideOffset={4}>
                   <Button
                     color="secondary"
                     data-testid="preview-button"
@@ -308,6 +310,8 @@ function EventTypeSingleLayout({
                   variant="icon"
                   StartIcon={LinkIcon}
                   tooltip={t("copy_link")}
+                  tooltipSide="bottom"
+                  tooltipOffset={4}
                   onClick={() => {
                     navigator.clipboard.writeText(permalink);
                     showToast("Link copied!", "success");
@@ -319,6 +323,8 @@ function EventTypeSingleLayout({
                   color="secondary"
                   variant="icon"
                   tooltip={t("embed")}
+                  tooltipSide="bottom"
+                  tooltipOffset={4}
                   eventId={eventType.id}
                 />
               </>
@@ -329,6 +335,8 @@ function EventTypeSingleLayout({
                 variant="icon"
                 StartIcon={Trash}
                 tooltip={t("delete")}
+                tooltipSide="bottom"
+                tooltipOffset={4}
                 disabled={!hasPermsToDelete}
                 onClick={() => setDeleteDialogOpen(true)}
               />
@@ -417,7 +425,7 @@ function EventTypeSingleLayout({
           <div className="p-2 md:mx-0 md:p-0 xl:hidden">
             <HorizontalTabs tabs={EventTypeTabs} linkShallow />
           </div>
-          <div className="w-full ltr:mr-2 rtl:ml-2">
+          <div className="w-full overflow-hidden ltr:mr-2 rtl:ml-2">
             <div
               className={classNames(
                 "bg-default border-subtle  mt-4 rounded-md sm:mx-0 xl:mt-0",

apps/web/components/eventtype/EventWebhooksTab.tsx

@@ -124,7 +124,7 @@ export const EventWebhooksTab = ({ eventType }: Pick<EventTypeSetupProps, "event
                         {t("add_webhook_description", { appName: APP_NAME })}
                       </p>
 
-                      <div className="border-subtle mt-8 rounded-md border">
+                      <div className="border-subtle my-8 rounded-md border">
                         {webhooks.map((webhook, index) => {
                           return (
                             <WebhookListItem
@@ -141,7 +141,7 @@ export const EventWebhooksTab = ({ eventType }: Pick<EventTypeSetupProps, "event
                         })}
                       </div>
 
-                      <p className="text-default mt-8 text-sm font-normal">
+                      <p className="text-default text-sm font-normal">
                         <Trans i18nKey="edit_or_manage_webhooks">
                           If you wish to edit or manage your web hooks, please head over to &nbsp;
                           <Link

apps/web/components/eventtype/RecurringEventController.tsx

@@ -53,9 +53,10 @@ export default function RecurringEventController({
               title="Experimental: Recurring Events are currently experimental and causes some issues sometimes when checking for availability. We are working on fixing this."
             />
             <SettingsToggle
+              labelClassName="text-sm"
               toggleSwitchAtTheEnd={true}
               switchContainerClassName={classNames(
-                "border-subtle rounded-md border py-6 px-4 sm:px-6",
+                "border-subtle rounded-lg border py-6 px-4 sm:px-6",
                 recurringEventState !== null && "rounded-b-none"
               )}
               childrenClassName="lg:ml-0"
@@ -78,7 +79,7 @@ export default function RecurringEventController({
                   setRecurringEventState(newVal);
                 }
               }}>
-              <div className="border-subtle rounded-b-md border border-t-0 p-6">
+              <div className="border-subtle rounded-b-lg border border-t-0 p-6">
                 {recurringEventState && (
                   <div data-testid="recurring-event-collapsible" className="text-sm">
                     <div className="flex items-center">

apps/web/components/eventtype/RequiresConfirmationController.tsx

@@ -67,9 +67,10 @@ export default function RequiresConfirmationController({
           control={formMethods.control}
           render={() => (
             <SettingsToggle
+              labelClassName="text-sm"
               toggleSwitchAtTheEnd={true}
               switchContainerClassName={classNames(
-                "border-subtle rounded-md border py-6 px-4 sm:px-6",
+                "border-subtle rounded-lg border py-6 px-4 sm:px-6",
                 requiresConfirmation && "rounded-b-none"
               )}
               childrenClassName="lg:ml-0"
@@ -83,7 +84,7 @@ export default function RequiresConfirmationController({
                 formMethods.setValue("requiresConfirmation", val);
                 onRequiresConfirmation(val);
               }}>
-              <div className="border-subtle rounded-b-md border border-t-0 p-6">
+              <div className="border-subtle rounded-b-lg border border-t-0 p-6">
                 <RadioGroup.Root
                   defaultValue={
                     requiresConfirmation
@@ -147,7 +148,7 @@ export default function RequiresConfirmationController({
                                           val
                                         );
                                       }}
-                                      className="border-default !m-0 block w-16 rounded-r-none border-r-0 text-sm [appearance:textfield]"
+                                      className="border-default !m-0 block w-16 rounded-r-none border-r-0 text-sm [appearance:textfield] focus:z-10 focus:border-r"
                                       defaultValue={metadata?.requiresConfirmationThreshold?.time || 30}
                                     />
                                     <label

apps/web/components/ui/AuthContainer.tsx

@@ -15,7 +15,7 @@ interface Props {
 
 export default function AuthContainer(props: React.PropsWithChildren<Props>) {
   return (
-    <div className="flex min-h-screen flex-col justify-center bg-[#f3f4f6] py-12 sm:px-6 lg:px-8">
+    <div className="bg-subtle dark:bg-darkgray-50 flex min-h-screen flex-col justify-center py-12 sm:px-6 lg:px-8">
       <HeadSeo title={props.title} description={props.description} />
       {props.showLogo && <Logo small inline={false} className="mx-auto mb-auto" />}
 
@@ -28,7 +28,7 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
         </div>
       )}
       <div className="mb-auto mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="bg-default border-subtle mx-2 rounded-md border px-4 py-10 sm:px-10">
+        <div className="bg-default dark:bg-muted border-subtle mx-2 rounded-md border px-4 py-10 sm:px-10">
           {props.children}
         </div>
         <div className="text-default mt-8 text-center text-sm">{props.footerText}</div>

apps/web/lib/app-providers.tsx

@@ -7,7 +7,8 @@ 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 { ComponentProps, PropsWithChildren, ReactNode } from "react";
+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";
@@ -17,9 +18,10 @@ 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 { useClientViewerI18n } from "@components/I18nLanguageHandler";
+import { useViewerI18n } from "@components/I18nLanguageHandler";
 
 const I18nextAdapter = appWithTranslation<
   NextJsAppProps<SSRConfig> & {
@@ -30,10 +32,12 @@ const I18nextAdapter = appWithTranslation<
 // Workaround for https://github.com/vercel/next.js/issues/8592
 export type AppProps = Omit<
   NextAppProps<
-    WithNonceProps & {
-      themeBasis?: string;
-      session: Session;
-    } & Record<string, unknown>
+    WithLocaleProps<
+      WithNonceProps<{
+        themeBasis?: string;
+        session: Session;
+      }>
+    >
   >,
   "Component"
 > & {
@@ -68,17 +72,37 @@ const CustomI18nextProvider = (props: AppPropsWithoutNonce) => {
   /**
    * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
    **/
-  const clientViewerI18n = useClientViewerI18n(props.router.locales || []);
-  const { i18n, locale } = clientViewerI18n.data || {};
+
+  const session = useSession();
+  const locale = session?.data?.user.locale ?? props.pageProps.newLocale;
+
+  useEffect(() => {
+    window.document.documentElement.lang = locale;
+
+    let direction = window.document.dir || "ltr";
+
+    try {
+      const intlLocale = new Intl.Locale(locale);
+      // @ts-expect-error INFO: Typescript does not know about the Intl.Locale textInfo attribute
+      direction = intlLocale.textInfo?.direction;
+    } catch (error) {
+      console.error(error);
+    }
+
+    window.document.dir = direction;
+  }, [locale]);
+
+  const clientViewerI18n = useViewerI18n(locale);
+  const i18n = clientViewerI18n.data?.i18n;
 
   const passedProps = {
     ...props,
     pageProps: {
       ...props.pageProps,
+
       ...i18n,
     },
-    router: locale ? { locale } : props.router,
-  } as unknown as ComponentProps<typeof I18nextAdapter>;
+  };
 
   return <I18nextAdapter {...passedProps} />;
 };
@@ -233,7 +257,9 @@ const AppProviders = (props: AppPropsWithChildren) => {
   // No need to have intercom on public pages - Good for Page Performance
   const isBookingPage = useIsBookingPage();
   const { pageProps, ...rest } = props;
-  const { _nonce, ...restPageProps } = pageProps;
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { nonce, ...restPageProps } = pageProps;
   const propsWithoutNonce = {
     pageProps: {
       ...restPageProps,

apps/web/lib/withLocale.tsx

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

apps/web/lib/withNonce.tsx

@@ -1,8 +1,8 @@
-import type { GetServerSideProps, GetServerSidePropsContext } from "next";
+import type { GetServerSideProps } from "next";
 
 import { csp } from "@lib/csp";
 
-export type WithNonceProps = {
+export type WithNonceProps<T extends Record<string, any>> = T & {
   nonce?: string;
 };
 
@@ -11,9 +11,16 @@ export type WithNonceProps = {
  * 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(getServerSideProps: GetServerSideProps) {
-  return async (context: GetServerSidePropsContext) => {
+export default function withNonce<T extends Record<string, any>>(
+  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.
@@ -23,10 +30,6 @@ export default function withNonce(getServerSideProps: GetServerSideProps) {
         }
       : null;
 
-    if (!("props" in ssrResponse)) {
-      return ssrResponse;
-    }
-
     // Helps in debugging that withNonce was used but a valid nonce couldn't be set
     context.res.setHeader("x-csp", nonce ? "ssr" : "false");
 

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/web",
-  "version": "3.3.6",
+  "version": "3.4.0",
   "private": true,
   "scripts": {
     "analyze": "ANALYZE=true next build",

apps/web/pages/[user]/[type].tsx

@@ -2,6 +2,7 @@ import type { GetServerSidePropsContext } from "next";
 import { z } from "zod";
 
 import { Booker } from "@calcom/atoms";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
 import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
 import {
@@ -43,6 +44,7 @@ export default function Type({
         hideBranding={isBrandingHidden}
         isSEOIndexable={isSEOIndexable ?? true}
         entity={entity}
+        bookingData={booking}
       />
       <Booker
         username={user}
@@ -61,6 +63,7 @@ Type.isBookingPage = true;
 Type.PageWrapper = PageWrapper;
 
 async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
+  const session = await getServerSession(context);
   const { user: usernames, type: slug } = paramsSchema.parse(context.params);
   const { rescheduleUid, bookingUid, duration: queryDuration } = context.query;
 
@@ -96,7 +99,7 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
 
   let booking: GetBookingType | null = null;
   if (rescheduleUid) {
-    booking = await getBookingForReschedule(`${rescheduleUid}`);
+    booking = await getBookingForReschedule(`${rescheduleUid}`, session?.user?.id);
   } else if (bookingUid) {
     booking = await getBookingForSeatedEvent(`${bookingUid}`);
   }
@@ -138,6 +141,7 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
 }
 
 async function getUserPageProps(context: GetServerSidePropsContext) {
+  const session = await getServerSession(context);
   const { user: usernames, type: slug } = paramsSchema.parse(context.params);
   const username = usernames[0];
   const { rescheduleUid, bookingUid, duration: queryDuration } = context.query;
@@ -168,7 +172,7 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
 
   let booking: GetBookingType | null = null;
   if (rescheduleUid) {
-    booking = await getBookingForReschedule(`${rescheduleUid}`);
+    booking = await getBookingForReschedule(`${rescheduleUid}`, session?.user?.id);
   } else if (bookingUid) {
     booking = await getBookingForSeatedEvent(`${bookingUid}`);
   }

apps/web/pages/_app.tsx

@@ -1,3 +1,5 @@
+import type { IncomingMessage } from "http";
+import type { AppContextType } from "next/dist/shared/lib/utils";
 import React from "react";
 
 import { trpc } from "@calcom/trpc/react";
@@ -8,8 +10,36 @@ import "../styles/globals.css";
 
 function MyApp(props: AppProps) {
   const { Component, pageProps } = props;
+
   if (Component.PageWrapper !== undefined) return Component.PageWrapper(props);
   return <Component {...pageProps} />;
 }
 
-export default trpc.withTRPC(MyApp);
+declare global {
+  interface Window {
+    calNewLocale: string;
+  }
+}
+
+MyApp.getInitialProps = async (ctx: AppContextType) => {
+  const { req } = ctx.ctx;
+
+  let newLocale = "en";
+
+  if (req) {
+    const { getLocale } = await import("@calcom/features/auth/lib/getLocale");
+    newLocale = await getLocale(req as IncomingMessage & { cookies: Record<string, any> });
+  } else if (typeof window !== "undefined" && window.calNewLocale) {
+    newLocale = window.calNewLocale;
+  }
+
+  return {
+    pageProps: {
+      newLocale,
+    },
+  };
+};
+
+const WrappedMyApp = trpc.withTRPC(MyApp);
+
+export default WrappedMyApp;

apps/web/pages/_document.tsx

@@ -1,3 +1,4 @@
+import type { IncomingMessage } from "http";
 import type { NextPageContext } from "next";
 import type { DocumentContext, DocumentProps } from "next/document";
 import Document, { Head, Html, Main, NextScript } from "next/document";
@@ -7,7 +8,7 @@ import { IS_PRODUCTION } from "@calcom/lib/constants";
 
 import { csp } from "@lib/csp";
 
-type Props = Record<string, unknown> & DocumentProps;
+type Props = Record<string, unknown> & DocumentProps & { newLocale: string };
 function setHeader(ctx: NextPageContext, name: string, value: string) {
   try {
     ctx.res?.setHeader(name, value);
@@ -26,6 +27,13 @@ class MyDocument extends Document<Props> {
       setHeader(ctx, "x-csp", "initialPropsOnly");
     }
 
+    const getLocaleModule = ctx.req ? await import("@calcom/features/auth/lib/getLocale") : null;
+
+    const newLocale =
+      ctx.req && getLocaleModule
+        ? await getLocaleModule.getLocale(ctx.req as IncomingMessage & { cookies: Record<string, any> })
+        : "en";
+
     const asPath = ctx.asPath || "";
     // Use a dummy URL as default so that URL parsing works for relative URLs as well. We care about searchParams and pathname only
     const parsedUrl = new URL(asPath, "https://dummyurl");
@@ -36,17 +44,36 @@ class MyDocument extends Document<Props> {
       !isEmbedSnippetGeneratorPath;
     const embedColorScheme = parsedUrl.searchParams.get("ui.color-scheme");
     const initialProps = await Document.getInitialProps(ctx);
-    return { isEmbed, embedColorScheme, nonce, ...initialProps };
+    return { isEmbed, embedColorScheme, nonce, ...initialProps, newLocale };
   }
 
   render() {
-    const { locale } = this.props.__NEXT_DATA__;
     const { isEmbed, embedColorScheme } = this.props;
+    const newLocale = this.props.newLocale || "en";
+
     const nonceParsed = z.string().safeParse(this.props.nonce);
     const nonce = nonceParsed.success ? nonceParsed.data : "";
+
+    const intlLocale = new Intl.Locale(newLocale);
+    // @ts-expect-error INFO: Typescript does not know about the Intl.Locale textInfo attribute
+    const direction = intlLocale.textInfo?.direction;
+    if (!direction) {
+      throw new Error("NodeJS major breaking change detected, use getTextInfo() instead.");
+    }
+
     return (
-      <Html lang={locale} style={embedColorScheme ? { colorScheme: embedColorScheme as string } : undefined}>
+      <Html
+        lang={newLocale}
+        dir={direction}
+        style={embedColorScheme ? { colorScheme: embedColorScheme as string } : undefined}>
         <Head nonce={nonce}>
+          <script
+            nonce={nonce}
+            id="newLocale"
+            dangerouslySetInnerHTML={{
+              __html: `window.calNewLocale = "${newLocale}";`,
+            }}
+          />
           <link rel="apple-touch-icon" sizes="180x180" href="/api/logo?type=apple-touch-icon" />
           <link rel="icon" type="image/png" sizes="32x32" href="/api/logo?type=favicon-32" />
           <link rel="icon" type="image/png" sizes="16x16" href="/api/logo?type=favicon-16" />

apps/web/pages/api/link.ts

@@ -7,7 +7,7 @@ import prisma from "@calcom/prisma";
 import { UserPermissionRole } from "@calcom/prisma/enums";
 import { TRPCError } from "@calcom/trpc/server";
 import { createContext } from "@calcom/trpc/server/createContext";
-import { viewerRouter } from "@calcom/trpc/server/routers/viewer/_router";
+import { bookingsRouter } from "@calcom/trpc/server/routers/viewer/bookings/_router";
 
 enum DirectAction {
   ACCEPT = "accept",
@@ -55,13 +55,13 @@ async function handler(req: NextApiRequest, res: NextApiResponse<Response>) {
   try {
     /** @see https://trpc.io/docs/server-side-calls */
     const ctx = await createContext({ req, res }, sessionGetter);
-    const caller = viewerRouter.createCaller({
+    const caller = bookingsRouter.createCaller({
       ...ctx,
       req,
       res,
       user: { ...user, locale: user?.locale ?? "en" },
     });
-    await caller.bookings.confirm({
+    await caller.confirm({
       bookingId: booking.id,
       recurringEventId: booking.recurringEventId || undefined,
       confirmed: action === DirectAction.ACCEPT,

apps/web/pages/auth/forgot-password/[id].tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import type { CSSProperties } from "react";
 import { useForm } from "react-hook-form";
 
+import { getLocale } from "@calcom/features/auth/lib/getLocale";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma from "@calcom/prisma";
 import { Button, PasswordField, Form } from "@calcom/ui";
@@ -141,7 +142,6 @@ export default function Page({ requestId, isRequestExpired, csrfToken }: Props)
   );
 }
 
-Page.isThemeSupported = false;
 Page.PageWrapper = PageWrapper;
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const id = context.params?.id as string;
@@ -163,12 +163,13 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   } catch (e) {
     resetPasswordRequest = null;
   }
+  const locale = await getLocale(context.req);
   return {
     props: {
       isRequestExpired: !resetPasswordRequest,
       requestId: id,
       csrfToken: await getCsrfToken({ req: context.req }),
-      ...(await serverSideTranslations(context.locale || "en", ["common"])),
+      ...(await serverSideTranslations(locale, ["common"])),
     },
   };
 }

apps/web/pages/auth/forgot-password/index.tsx

@@ -7,6 +7,7 @@ import Link from "next/link";
 import type { CSSProperties, SyntheticEvent } from "react";
 import React from "react";
 
+import { getLocale } from "@calcom/features/auth/lib/getLocale";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, EmailField } from "@calcom/ui";
@@ -126,8 +127,9 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
             />
             <div className="space-y-2">
               <Button
-                className="w-full justify-center"
+                className="w-full justify-center dark:bg-white dark:text-black"
                 type="submit"
+                color="primary"
                 disabled={loading}
                 aria-label={t("request_password_reset")}
                 loading={loading}>
@@ -141,7 +143,6 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
   );
 }
 
-ForgotPassword.isThemeSupported = false;
 ForgotPassword.PageWrapper = PageWrapper;
 
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
@@ -154,11 +155,12 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
     res.end();
     return { props: {} };
   }
+  const locale = await getLocale(context.req);
 
   return {
     props: {
       csrfToken: await getCsrfToken(context),
-      ...(await serverSideTranslations(context.locale || "en", ["common"])),
+      ...(await serverSideTranslations(locale, ["common"])),
     },
   };
 };

apps/web/pages/auth/login.tsx

@@ -15,11 +15,12 @@ import { SAMLLogin } from "@calcom/features/auth/SAMLLogin";
 import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { isSAMLLoginEnabled, samlProductID, samlTenantID } from "@calcom/features/ee/sso/lib/saml";
-import { WEBAPP_URL, WEBSITE_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL, WEBSITE_URL, HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
 import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import prisma from "@calcom/prisma";
+import { trpc } from "@calcom/trpc/react";
 import { Alert, Button, EmailField, PasswordField } from "@calcom/ui";
 import { ArrowLeft, Lock } from "@calcom/ui/components/icon";
 
@@ -50,7 +51,8 @@ export default function Login({
   samlTenantID,
   samlProductID,
   totpEmail,
-}: inferSSRProps<typeof _getServerSideProps> & WithNonceProps) {
+}: // eslint-disable-next-line @typescript-eslint/ban-types
+inferSSRProps<typeof _getServerSideProps> & WithNonceProps<{}>) {
   const searchParams = useSearchParams();
   const { t } = useLocale();
   const router = useRouter();
@@ -160,6 +162,16 @@ export default function Login({
     else setErrorMessage(errorMessages[res.error] || t("something_went_wrong"));
   };
 
+  const { data, isLoading } = trpc.viewer.public.ssoConnections.useQuery(undefined, {
+    onError: (err) => {
+      setErrorMessage(err.message);
+    },
+  });
+
+  const displaySSOLogin = HOSTED_CAL_FEATURES
+    ? true
+    : isSAMLLoginEnabled && !isLoading && data?.connectionExists;
+
   return (
     <div
       style={
@@ -225,14 +237,14 @@ export default function Login({
                 type="submit"
                 color="primary"
                 disabled={formState.isSubmitting}
-                className="w-full justify-center">
+                className="w-full justify-center dark:bg-white dark:text-black">
                 {twoFactorRequired ? t("submit") : t("sign_in")}
               </Button>
             </div>
           </form>
           {!twoFactorRequired && (
             <>
-              {(isGoogleLoginEnabled || isSAMLLoginEnabled) && <hr className="border-subtle my-8" />}
+              {(isGoogleLoginEnabled || displaySSOLogin) && <hr className="border-subtle my-8" />}
               <div className="space-y-3">
                 {isGoogleLoginEnabled && (
                   <Button
@@ -247,7 +259,7 @@ export default function Login({
                     {t("signin_with_google")}
                   </Button>
                 )}
-                {isSAMLLoginEnabled && (
+                {displaySSOLogin && (
                   <SAMLLogin
                     samlTenantID={samlTenantID}
                     samlProductID={samlProductID}
@@ -337,7 +349,6 @@ const _getServerSideProps = async function getServerSideProps(context: GetServer
   };
 };
 
-Login.isThemeSupported = false;
 Login.PageWrapper = PageWrapper;
 
 export const getServerSideProps = withNonce(_getServerSideProps);

apps/web/pages/auth/logout.tsx

@@ -57,7 +57,6 @@ export function Logout(props: Props) {
   );
 }
 
-Logout.isThemeSupported = false;
 Logout.PageWrapper = PageWrapper;
 export default Logout;
 

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

@@ -146,7 +146,7 @@ export default function Success(props: SuccessProps) {
   const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
   const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
   const [calculatedDuration, setCalculatedDuration] = useState<number | undefined>(undefined);
-
+  const { requiresLoginToUpdate } = props;
   function setIsCancellationMode(value: boolean) {
     const _searchParams = new URLSearchParams(searchParams);
 
@@ -532,7 +532,28 @@ export default function Success(props: SuccessProps) {
                     })}
                   </div>
                 </div>
-                {(!needsConfirmation || !userIsOwner) &&
+                {requiresLoginToUpdate && (
+                  <>
+                    <hr className="border-subtle mb-8" />
+                    <div className="text-center">
+                      <span className="text-emphasis ltr:mr-2 rtl:ml-2">{t("need_to_make_a_change")}</span>
+                      {/* Login button but redirect to here */}
+                      <span className="text-default inline">
+                        <span className="underline" data-testid="reschedule-link">
+                          <Link
+                            href={`/auth/login?callbackUrl=${encodeURIComponent(
+                              `/booking/${bookingInfo?.uid}`
+                            )}`}
+                            legacyBehavior>
+                            {t("login")}
+                          </Link>
+                        </span>
+                      </span>
+                    </div>
+                  </>
+                )}
+                {!requiresLoginToUpdate &&
+                  (!needsConfirmation || !userIsOwner) &&
                   !isCancelled &&
                   (!isCancellationMode ? (
                     <>
@@ -540,28 +561,30 @@ export default function Success(props: SuccessProps) {
                       <div className="text-center last:pb-0">
                         <span className="text-emphasis ltr:mr-2 rtl:ml-2">{t("need_to_make_a_change")}</span>
 
-                        {!props.recurringBookings && (
-                          <span className="text-default inline">
-                            <span className="underline" data-testid="reschedule-link">
-                              <Link
-                                href={`/reschedule/${seatReferenceUid || bookingInfo?.uid}`}
-                                legacyBehavior>
-                                {t("reschedule")}
-                              </Link>
+                        <>
+                          {!props.recurringBookings && (
+                            <span className="text-default inline">
+                              <span className="underline" data-testid="reschedule-link">
+                                <Link
+                                  href={`/reschedule/${seatReferenceUid || bookingInfo?.uid}`}
+                                  legacyBehavior>
+                                  {t("reschedule")}
+                                </Link>
+                              </span>
+                              <span className="mx-2">{t("or_lowercase")}</span>
                             </span>
-                            <span className="mx-2">{t("or_lowercase")}</span>
-                          </span>
-                        )}
-
-                        <button
-                          data-testid="cancel"
-                          className={classNames(
-                            "text-default underline",
-                            props.recurringBookings && "ltr:mr-2 rtl:ml-2"
                           )}
-                          onClick={() => setIsCancellationMode(true)}>
-                          {t("cancel")}
-                        </button>
+
+                          <button
+                            data-testid="cancel"
+                            className={classNames(
+                              "text-default underline",
+                              props.recurringBookings && "ltr:mr-2 rtl:ml-2"
+                            )}
+                            onClick={() => setIsCancellationMode(true)}>
+                            {t("cancel")}
+                          </button>
+                        </>
                       </div>
                     </>
                   ) : (
@@ -1010,7 +1033,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   const session = await getServerSession(context);
   let tz: string | null = null;
   let userTimeFormat: number | null = null;
-
+  let requiresLoginToUpdate = false;
   if (session) {
     const user = await ssr.viewer.me.fetch();
     tz = user.timeZone;
@@ -1022,9 +1045,10 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   if (!parsedQuery.success) return { notFound: true };
   const { uid, eventTypeSlug, seatReferenceUid } = parsedQuery.data;
 
+  const { uid: maybeUid } = await maybeGetBookingUidFromSeat(prisma, uid);
   const bookingInfoRaw = await prisma.booking.findFirst({
     where: {
-      uid: await maybeGetBookingUidFromSeat(prisma, uid),
+      uid: maybeUid,
     },
     select: {
       title: true,
@@ -1088,6 +1112,10 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
     };
   }
 
+  if (eventTypeRaw.seatsPerTimeSlot && !seatReferenceUid && !session) {
+    requiresLoginToUpdate = true;
+  }
+
   const bookingInfo = getBookingWithResponses(bookingInfoRaw);
   // @NOTE: had to do this because Server side cant return [Object objects]
   // probably fixable with json.stringify -> json.parse
@@ -1156,6 +1184,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       paymentStatus: payment,
       ...(tz && { tz }),
       userTimeFormat,
+      requiresLoginToUpdate,
     },
   };
 }

apps/web/pages/d/[link]/[slug].tsx

@@ -2,6 +2,7 @@ import type { GetServerSidePropsContext } from "next";
 import { z } from "zod";
 
 import { Booker } from "@calcom/atoms";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
 import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
 import { getBookingForReschedule, getMultipleDurationValue } from "@calcom/features/bookings/lib/get-booking";
@@ -57,6 +58,7 @@ Type.PageWrapper = PageWrapper;
 Type.isBookingPage = true;
 
 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.headers.host ?? "");
@@ -119,7 +121,7 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
 
   let booking: GetBookingType | null = null;
   if (rescheduleUid) {
-    booking = await getBookingForReschedule(`${rescheduleUid}`);
+    booking = await getBookingForReschedule(`${rescheduleUid}`, session?.user?.id);
   }
 
   const isTeamEvent = !!hashedLink.eventType?.team?.id;

apps/web/pages/event-types/[type]/index.tsx

@@ -184,7 +184,7 @@ const EventTypePage = (props: EventTypeSetupProps) => {
           created: true,
         }))
       );
-      showToast(t("event_type_updated_successfully"), "success");
+      showToast(t("event_type_updated_successfully", { eventTypeTitle: eventType.title }), "success");
     },
     async onSettled() {
       await utils.viewer.eventTypes.get.invalidate();

apps/web/pages/getting-started/[[...step]].tsx

@@ -6,6 +6,7 @@ import type { CSSProperties } from "react";
 import { Suspense } from "react";
 import { z } from "zod";
 
+import { getLocale } from "@calcom/features/auth/lib/getLocale";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -219,10 +220,11 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   if (user.completedOnboarding) {
     return { redirect: { permanent: false, destination: "/event-types" } };
   }
+  const locale = await getLocale(context.req);
 
   return {
     props: {
-      ...(await serverSideTranslations(context.locale ?? "", ["common"])),
+      ...(await serverSideTranslations(locale, ["common"])),
       trpcState: ssr.dehydrate(),
       hasPendingInvites: user.teams.find((team) => team.accepted === false) ?? false,
     },

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

@@ -2,6 +2,7 @@ import type { GetServerSidePropsContext } from "next";
 import { URLSearchParams } from "url";
 import { z } from "zod";
 
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { getDefaultEvent } from "@calcom/lib/defaultEvents";
 import { maybeGetBookingUidFromSeat } from "@calcom/lib/server/maybeGetBookingUidFromSeat";
 import prisma, { bookingMinimalSelect } from "@calcom/prisma";
@@ -12,11 +13,16 @@ export default function Type() {
 }
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
-  const { uid: bookingId, seatReferenceUid } = z
+  const session = await getServerSession(context);
+
+  const { uid: bookingUid, seatReferenceUid } = z
     .object({ uid: z.string(), seatReferenceUid: z.string().optional() })
     .parse(context.query);
 
-  const uid = await maybeGetBookingUidFromSeat(prisma, bookingId);
+  const { uid, seatReferenceUid: maybeSeatReferenceUid } = await maybeGetBookingUidFromSeat(
+    prisma,
+    bookingUid
+  );
   const booking = await prisma.booking.findUnique({
     where: {
       uid,
@@ -37,6 +43,21 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
             },
           },
           seatsPerTimeSlot: true,
+          userId: true,
+          owner: {
+            select: {
+              id: true,
+            },
+          },
+          hosts: {
+            select: {
+              user: {
+                select: {
+                  id: true,
+                },
+              },
+            },
+          },
         },
       },
       dynamicEventSlugRef: true,
@@ -53,7 +74,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   }
 
   if (!booking?.eventType && !booking?.dynamicEventSlugRef) {
-    // TODO: Show something in UI to let user know that this booking is not rescheduleable.
+    // TODO: Show something in UI to let user know that this booking is not rescheduleable
     return {
       notFound: true,
     } as {
@@ -61,6 +82,33 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
     };
   }
 
+  // if booking event type is for a seated event and no seat reference uid is provided, throw not found
+  if (booking?.eventType?.seatsPerTimeSlot && !maybeSeatReferenceUid) {
+    const userId = session?.user?.id;
+
+    if (!userId && !seatReferenceUid) {
+      return {
+        redirect: {
+          destination: `/auth/login?callbackUrl=/reschedule/${bookingUid}`,
+          permanent: false,
+        },
+      };
+    }
+    const userIsHost = booking?.eventType.hosts.find((host) => {
+      if (host.user.id === userId) return true;
+    });
+
+    const userIsOwnerOfEventType = booking?.eventType.owner?.id === userId;
+
+    if (!userIsHost && !userIsOwnerOfEventType) {
+      return {
+        notFound: true,
+      } as {
+        notFound: true;
+      };
+    }
+  }
+
   const eventType = booking.eventType ? booking.eventType : getDefaultEvent(dynamicEventSlugRef);
 
   const eventPage = `${
@@ -72,7 +120,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   }/${eventType?.slug}`;
   const destinationUrl = new URLSearchParams();
 
-  destinationUrl.set("rescheduleUid", seatReferenceUid || bookingId);
+  destinationUrl.set("rescheduleUid", seatReferenceUid || bookingUid);
 
   return {
     redirect: {

apps/web/pages/settings/billing/index.tsx

@@ -45,7 +45,7 @@ const BillingView = () => {
   return (
     <>
       <Meta title={t("billing")} description={t("manage_billing_description")} borderInShellHeader={true} />
-      <div className="border-subtle space-y-6 rounded-b-xl border border-t-0 px-6 py-8 text-sm sm:space-y-8">
+      <div className="border-subtle space-y-6 rounded-b-lg border border-t-0 px-6 py-8 text-sm sm:space-y-8">
         <CtaRow title={t("view_and_manage_billing_details")} description={t("view_and_edit_billing_details")}>
           <Button color="primary" href={billingHref} target="_blank" EndIcon={ExternalLink}>
             {t("billing_portal")}

apps/web/pages/settings/developer/api-keys.tsx

@@ -25,7 +25,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
   return (
     <SkeletonContainer>
       <Meta title={title} description={description} borderInShellHeader={true} />
-      <div className="divide-subtle border-subtle space-y-6 rounded-b-xl border border-t-0 px-6 py-4">
+      <div className="divide-subtle border-subtle space-y-6 rounded-b-lg border border-t-0 px-6 py-4">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
       </div>
@@ -79,7 +79,7 @@ const ApiKeysView = () => {
         <div>
           {data?.length ? (
             <>
-              <div className="border-subtle rounded-b-md border border-t-0">
+              <div className="border-subtle rounded-b-lg border border-t-0">
                 {data.map((apiKey, index) => (
                   <ApiKeyListItem
                     key={apiKey.id}
@@ -98,7 +98,7 @@ const ApiKeysView = () => {
               Icon={LinkIcon}
               headline={t("create_first_api_key")}
               description={t("create_first_api_key_description", { appName: APP_NAME })}
-              className="rounded-b-md rounded-t-none border-t-0"
+              className="rounded-b-lg rounded-t-none border-t-0"
               buttonRaw={<NewApiKeyButton />}
             />
           )}

apps/web/pages/settings/my-account/appearance.tsx

@@ -6,8 +6,8 @@ import { BookerLayoutSelector } from "@calcom/features/settings/BookerLayoutSele
 import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
 import ThemeLabel from "@calcom/features/settings/ThemeLabel";
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
-import { classNames } from "@calcom/lib";
 import { APP_NAME } from "@calcom/lib/constants";
+import { DEFAULT_LIGHT_BRAND_COLOR, DEFAULT_DARK_BRAND_COLOR } from "@calcom/lib/constants";
 import { checkWCAGContrastColor } from "@calcom/lib/getBrandColours";
 import { useHasPaidPlan } from "@calcom/lib/hooks/useHasPaidPlan";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -35,7 +35,10 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
   return (
     <SkeletonContainer>
       <Meta title={title} description={description} borderInShellHeader={false} />
-      <div className="border-subtle mt-6 space-y-6 rounded-t-xl border border-b-0 px-4 py-6 sm:px-6">
+      <div className="border-subtle mt-6 flex items-center rounded-t-xl border p-6 text-sm">
+        <SkeletonText className="h-8 w-1/3" />
+      </div>
+      <div className="border-subtle space-y-6 border-x px-4 py-6 sm:px-6">
         <div className="flex items-center justify-center">
           <SkeletonButton className="mr-6 h-32 w-48 rounded-md p-5" />
           <SkeletonButton className="mr-6 h-32 w-48 rounded-md p-5" />
@@ -48,7 +51,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
 
         <SkeletonText className="h-8 w-full" />
       </div>
-      <div className="rounded-b-xl">
+      <div className="rounded-b-lg">
         <SectionBottomActions align="end">
           <SkeletonButton className="mr-6 h-8 w-20 rounded-md p-5" />
         </SectionBottomActions>
@@ -57,9 +60,6 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
   );
 };
 
-const DEFAULT_LIGHT_BRAND_COLOR = "#292929";
-const DEFAULT_DARK_BRAND_COLOR = "#fafafa";
-
 const AppearanceView = ({
   user,
   hasPaidPlan,
@@ -137,7 +137,7 @@ const AppearanceView = ({
   return (
     <div>
       <Meta title={t("appearance")} description={t("appearance_description")} borderInShellHeader={false} />
-      <div className="border-subtle mt-6 flex items-center rounded-t-xl border p-6 text-sm">
+      <div className="border-subtle mt-6 flex items-center rounded-t-lg border p-6 text-sm">
         <div>
           <p className="text-default text-base font-semibold">{t("theme")}</p>
           <p className="text-default">{t("theme_applies_note")}</p>
@@ -149,13 +149,13 @@ const AppearanceView = ({
           mutation.mutate({
             // Radio values don't support null as values, therefore we convert an empty string
             // back to null here.
-            theme: values.theme || null,
+            theme: values.theme ?? null,
           });
         }}>
         <div className="border-subtle flex flex-col justify-between border-x px-6 py-8 sm:flex-row">
           <ThemeLabel
             variant="system"
-            value={null}
+            value={undefined}
             label={t("theme_system")}
             defaultChecked={user.theme === null}
             register={userThemeFormMethods.register}
@@ -226,11 +226,7 @@ const AppearanceView = ({
                 });
               }
             }}
-            childrenClassName="lg:ml-0"
-            switchContainerClassName={classNames(
-              "py-6 px-4 sm:px-6 border-subtle rounded-xl border",
-              isCustomBrandColorChecked && "rounded-b-none"
-            )}>
+            childrenClassName="lg:ml-0">
             <div className="border-subtle flex flex-col gap-6 border-x p-6">
               <Controller
                 name="brandColor"
@@ -241,7 +237,7 @@ const AppearanceView = ({
                     <p className="text-default mb-2 block text-sm font-medium">{t("light_brand_color")}</p>
                     <ColorPicker
                       defaultValue={user.brandColor}
-                      resetDefaultValue="#292929"
+                      resetDefaultValue={DEFAULT_LIGHT_BRAND_COLOR}
                       onChange={(value) => {
                         try {
                           checkWCAGContrastColor("#ffffff", value);
@@ -273,7 +269,7 @@ const AppearanceView = ({
                     <p className="text-default mb-2 block text-sm font-medium">{t("dark_brand_color")}</p>
                     <ColorPicker
                       defaultValue={user.darkBrandColor}
-                      resetDefaultValue="#fafafa"
+                      resetDefaultValue={DEFAULT_DARK_BRAND_COLOR}
                       onChange={(value) => {
                         try {
                           checkWCAGContrastColor("#101010", value);
@@ -328,7 +324,7 @@ const AppearanceView = ({
           setHideBrandingValue(checked);
           mutation.mutate({ hideBranding: checked });
         }}
-        switchContainerClassName="border-subtle mt-6 rounded-xl border py-6 px-4 sm:px-6"
+        switchContainerClassName="mt-6"
       />
     </div>
   );

apps/web/pages/settings/my-account/calendars.tsx

@@ -35,7 +35,7 @@ import PageWrapper from "@components/PageWrapper";
 const SkeletonLoader = () => {
   return (
     <SkeletonContainer>
-      <div className="border-subtle mt-8 space-y-6 rounded-xl border px-4 py-6 sm:px-6">
+      <div className="border-subtle mt-8 space-y-6 rounded-lg border px-4 py-6 sm:px-6">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
@@ -109,11 +109,11 @@ const CalendarsView = () => {
             selectedDestinationCalendarOption?.externalId === query?.data?.destinationCalendar?.externalId;
           return data.connectedCalendars.length ? (
             <div>
-              <div className="border-subtle mt-8 rounded-t-xl border px-4 py-6 sm:px-6">
+              <div className="border-subtle mt-8 rounded-t-lg border px-4 py-6 sm:px-6">
                 <h2 className="text-emphasis mb-1 text-base font-bold leading-5 tracking-wide">
                   {t("add_to_calendar")}
                 </h2>
-                <p className="text-default text-sm">{t("add_to_calendar_description")}</p>
+                <p className="text-default text-sm leading-tight">{t("add_to_calendar_description")}</p>
               </div>
               <div className="border-subtle flex w-full flex-col space-y-3 border border-x border-y-0 px-4 py-6 sm:px-6">
                 <DestinationCalendarSelector
@@ -137,15 +137,15 @@ const CalendarsView = () => {
                 </Button>
               </SectionBottomActions>
 
-              <div className="border-subtle mt-8 rounded-t-xl border px-4 py-6 sm:px-6">
+              <div className="border-subtle mt-8 rounded-t-lg border px-4 py-6 sm:px-6">
                 <h4 className="text-emphasis text-base font-semibold leading-5">
                   {t("check_for_conflicts")}
                 </h4>
-                <p className="text-default pb-2 text-sm leading-5">{t("select_calendars")}</p>
+                <p className="text-default text-sm leading-tight">{t("select_calendars")}</p>
               </div>
 
               <List
-                className="border-subtle flex flex-col gap-6 rounded-b-xl border border-t-0 p-6"
+                className="border-subtle flex flex-col gap-6 rounded-b-lg border border-t-0 p-6"
                 noBorderTreatment>
                 {data.connectedCalendars.map((item) => (
                   <Fragment key={item.credentialId}>
@@ -173,7 +173,7 @@ const CalendarsView = () => {
                       />
                     )}
                     {item?.error === undefined && item.calendars && (
-                      <ListItem className="flex-col rounded-md">
+                      <ListItem className="flex-col rounded-lg">
                         <div className="flex w-full flex-1 items-center space-x-3 p-4 rtl:space-x-reverse">
                           {
                             // eslint-disable-next-line @next/next/no-img-element

apps/web/pages/settings/my-account/conferencing.tsx

@@ -16,7 +16,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
   return (
     <SkeletonContainer>
       <Meta title={title} description={description} borderInShellHeader={true} />
-      <div className="divide-subtle border-subtle space-y-6 rounded-b-xl border border-t-0 px-6 py-4">
+      <div className="divide-subtle border-subtle space-y-6 rounded-b-lg border border-t-0 px-6 py-4">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
       </div>
@@ -100,7 +100,7 @@ const ConferencingLayout = () => {
             }
             return (
               <AppList
-                listClassName="rounded-xl rounded-t-none border-t-0"
+                listClassName="rounded-lg rounded-t-none border-t-0"
                 handleDisconnect={handleDisconnect}
                 data={data}
                 variant="conferencing"

apps/web/pages/settings/my-account/general.tsx

@@ -68,7 +68,11 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
       await utils.viewer.me.invalidate();
       reset(getValues());
       showToast(t("settings_updated_successfully"), "success");
-      update(res);
+      await update(res);
+
+      if (res.locale) {
+        window.calNewLocale = res.locale;
+      }
     },
     onError: () => {
       showToast(t("error_updating_settings"), "error");
@@ -233,7 +237,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
           setIsAllowDynamicBookingChecked(checked);
           mutation.mutate({ allowDynamicBooking: checked });
         }}
-        switchContainerClassName="border-subtle mt-6 rounded-xl border py-6 px-4 sm:px-6"
+        switchContainerClassName="mt-6"
       />
 
       <SettingsToggle
@@ -246,7 +250,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
           setIsAllowSEOIndexingChecked(checked);
           mutation.mutate({ allowSEOIndexing: checked });
         }}
-        switchContainerClassName="border-subtle mt-6 rounded-xl border py-6 px-4 sm:px-6"
+        switchContainerClassName="mt-6"
       />
 
       <SettingsToggle
@@ -259,7 +263,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
           setIsReceiveMonthlyDigestEmailChecked(checked);
           mutation.mutate({ receiveMonthlyDigestEmail: checked });
         }}
-        switchContainerClassName="border-subtle mt-6 rounded-xl border py-6 px-4 sm:px-6"
+        switchContainerClassName="mt-6"
       />
     </div>
   );

apps/web/pages/settings/my-account/profile.tsx

@@ -50,7 +50,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
   return (
     <SkeletonContainer>
       <Meta title={title} description={description} borderInShellHeader={true} />
-      <div className="border-subtle space-y-6 rounded-b-xl border border-t-0 px-4 py-8">
+      <div className="border-subtle space-y-6 rounded-b-lg border border-t-0 px-4 py-8">
         <div className="flex items-center">
           <SkeletonAvatar className="me-4 mt-0 h-16 w-16 px-4" />
           <SkeletonButton className="h-6 w-32 rounded-md p-5" />
@@ -279,7 +279,7 @@ const ProfileView = () => {
         }
       />
 
-      <div className="border-subtle mt-6 rounded-xl rounded-b-none border border-b-0 p-6">
+      <div className="border-subtle mt-6 rounded-lg rounded-b-none border border-b-0 p-6">
         <Label className="text-base font-semibold text-red-700">{t("danger_zone")}</Label>
         <p className="text-subtle">{t("account_deletion_cannot_be_undone")}</p>
       </div>

apps/web/pages/settings/organizations/billing.tsx

@@ -1,9 +1,9 @@
-import TeamBillingView from "@calcom/features/ee/teams/pages/team-billing-view";
-
 import type { CalPageWrapper } from "@components/PageWrapper";
 import PageWrapper from "@components/PageWrapper";
 
-const Page = TeamBillingView as CalPageWrapper;
+import BillingPage from "../../settings/billing/index";
+
+const Page = BillingPage as CalPageWrapper;
 Page.PageWrapper = PageWrapper;
 
 export default Page;

apps/web/pages/settings/security/impersonation.tsx

@@ -66,8 +66,8 @@ const ProfileImpersonationView = ({ user }: { user: RouterOutputs["viewer"]["me"
           onCheckedChange={(checked) => {
             mutation.mutate({ disableImpersonation: !checked });
           }}
+          switchContainerClassName="rounded-t-none border-t-0"
           disabled={mutation.isLoading}
-          switchContainerClassName="py-6 px-4 sm:px-6 border-subtle rounded-b-xl border border-t-0"
         />
       </div>
     </>

apps/web/pages/settings/security/two-factor-auth.tsx

@@ -63,7 +63,7 @@ const TwoFactorAuthView = () => {
             {user?.twoFactorEnabled ? t("enabled") : t("disabled")}
           </Badge>
         }
-        switchContainerClassName="border-subtle rounded-b-xl border border-t-0 px-5 py-6 sm:px-6"
+        switchContainerClassName="rounded-t-none border-t-0"
       />
 
       <EnableTwoFactorModal

apps/web/pages/settings/teams/[id]/billing.tsx

@@ -1,9 +1,9 @@
-import TeamBillingView from "@calcom/features/ee/teams/pages/team-billing-view";
-
 import type { CalPageWrapper } from "@components/PageWrapper";
 import PageWrapper from "@components/PageWrapper";
 
-const Page = TeamBillingView as CalPageWrapper;
+import BillingPage from "../../billing";
+
+const Page = BillingPage as CalPageWrapper;
 Page.PageWrapper = PageWrapper;
 
 export default Page;

apps/web/pages/team/[slug].tsx

@@ -5,7 +5,6 @@ import { usePathname } from "next/navigation";
 import { useEffect } from "react";
 
 import { sdkActionManager, useIsEmbed } from "@calcom/embed-core/embed-iframe";
-import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
 import EventTypeDescription from "@calcom/features/eventtypes/components/EventTypeDescription";
 import { getFeatureFlagMap } from "@calcom/features/flags/server/utils";
@@ -33,7 +32,13 @@ import { ssrInit } from "@server/lib/ssr";
 
 export type PageProps = inferSSRProps<typeof getServerSideProps>;
 
-function TeamPage({ team, isUnpublished, markdownStrippedBio, isValidOrgDomain }: PageProps) {
+function TeamPage({
+  team,
+  isUnpublished,
+  markdownStrippedBio,
+  isValidOrgDomain,
+  currentOrgDomain,
+}: PageProps) {
   useTheme(team.theme);
   const routerQuery = useRouterQuery();
   const pathname = usePathname();
@@ -44,7 +49,6 @@ function TeamPage({ team, isUnpublished, markdownStrippedBio, isValidOrgDomain }
   const teamName = team.name || "Nameless Team";
   const isBioEmpty = !team.bio || !team.bio.replace("<p><br></p>", "").length;
   const metadata = teamMetadataSchema.parse(team.metadata);
-  const orgBranding = useOrgBranding();
 
   useEffect(() => {
     telemetry.event(
@@ -182,8 +186,8 @@ function TeamPage({ team, isUnpublished, markdownStrippedBio, isValidOrgDomain }
             <Avatar
               alt={teamName}
               imageSrc={
-                !!team.parent && !!orgBranding
-                  ? `${orgBranding?.fullDomain}/org/${orgBranding?.slug}/avatar.png`
+                isValidOrgDomain
+                  ? `/org/${currentOrgDomain}/avatar.png`
                   : `${WEBAPP_URL}/${team.metadata?.isOrganization ? "org" : "team"}/${team.slug}/avatar.png`
               }
               size="lg"
@@ -354,6 +358,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       trpcState: ssr.dehydrate(),
       markdownStrippedBio,
       isValidOrgDomain,
+      currentOrgDomain,
     },
   } as const;
 };

apps/web/pages/team/[slug]/[type].tsx

@@ -2,6 +2,7 @@ import type { GetServerSidePropsContext } from "next";
 import { z } from "zod";
 
 import { Booker } from "@calcom/atoms";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
 import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
 import { getBookingForReschedule, getMultipleDurationValue } from "@calcom/features/bookings/lib/get-booking";
@@ -37,6 +38,7 @@ export default function Type({
         hideBranding={isBrandingHidden}
         isTeamEvent
         entity={entity}
+        bookingData={booking}
       />
       <Booker
         username={user}
@@ -64,6 +66,7 @@ const paramsSchema = z.object({
 // 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 } = context.query;
   const { ssrInit } = await import("@server/lib/ssr");
@@ -92,7 +95,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
 
   let booking: GetBookingType | null = null;
   if (rescheduleUid) {
-    booking = await getBookingForReschedule(`${rescheduleUid}`);
+    booking = await getBookingForReschedule(`${rescheduleUid}`, session?.user?.id);
   }
 
   const org = isValidOrgDomain ? currentOrgDomain : null;

apps/web/playwright/availability.e2e.ts

@@ -28,6 +28,7 @@ test.describe("Availablity tests", () => {
       await page.locator('[data-testid="day"][data-disabled="false"]').nth(0).click();
       await page.locator('[data-testid="date-override-mark-unavailable"]').click();
       await page.locator('[data-testid="add-override-submit-btn"]').click();
+      await page.locator('[data-testid="dialog-rejection"]').click();
       await expect(page.locator('[data-testid="date-overrides-list"] > li')).toHaveCount(1);
       await page.locator('[form="availability-form"][type="submit"]').click();
     });

apps/web/playwright/booking-seats.e2e.ts

@@ -2,6 +2,7 @@ import { expect } from "@playwright/test";
 import { uuid } from "short-uuid";
 import { v4 as uuidv4 } from "uuid";
 
+import { randomString } from "@calcom/lib/random";
 import prisma from "@calcom/prisma";
 import { BookingStatus } from "@calcom/prisma/enums";
 
@@ -96,7 +97,7 @@ test.describe("Booking with Seats", () => {
   });
 
   test(`Attendees can cancel a seated event time slot`, async ({ page, users, bookings }) => {
-    const { booking } = await createUserWithSeatedEventAndAttendees({ users, bookings }, [
+    const { booking, user } = await createUserWithSeatedEventAndAttendees({ users, bookings }, [
       { name: "John First", email: "first+seats@cal.com", timeZone: "Europe/Berlin" },
       { name: "Jane Second", email: "second+seats@cal.com", timeZone: "Europe/Berlin" },
       { name: "John Third", email: "third+seats@cal.com", timeZone: "Europe/Berlin" },
@@ -143,6 +144,19 @@ test.describe("Booking with Seats", () => {
       expect(attendeeIds).not.toContain(bookingAttendees[0].id);
     });
 
+    await test.step("Attendee #2 shouldn't be able to cancel booking using only booking/uid", async () => {
+      await page.goto(`/booking/${booking.uid}`);
+
+      await expect(page.locator("[text=Cancel]")).toHaveCount(0);
+    });
+
+    await test.step("Attendee #2 shouldn't be able to cancel booking using randomString for seatReferenceUId", async () => {
+      await page.goto(`/booking/${booking.uid}?seatReferenceUid=${randomString(10)}`);
+
+      // expect cancel button to don't be in the page
+      await expect(page.locator("[text=Cancel]")).toHaveCount(0);
+    });
+
     await test.step("All attendees cancelling should delete the booking for the user", async () => {
       // The remaining 2 attendees cancel
       for (let i = 1; i < bookingSeats.length; i++) {
@@ -166,6 +180,47 @@ test.describe("Booking with Seats", () => {
       expect(updatedBooking?.status).toBe(BookingStatus.CANCELLED);
     });
   });
+
+  test("Owner shouldn't be able to cancel booking without login in", async ({ page, bookings, users }) => {
+    const { booking, user } = await createUserWithSeatedEventAndAttendees({ users, bookings }, [
+      { name: "John First", email: "first+seats@cal.com", timeZone: "Europe/Berlin" },
+      { name: "Jane Second", email: "second+seats@cal.com", timeZone: "Europe/Berlin" },
+      { name: "John Third", email: "third+seats@cal.com", timeZone: "Europe/Berlin" },
+    ]);
+    await page.goto(`/booking/${booking.uid}?cancel=true`);
+    await expect(page.locator("[text=Cancel]")).toHaveCount(0);
+
+    // expect login text to be in the page, not data-testid
+    await expect(page.locator("text=Login")).toHaveCount(1);
+
+    // click on login button text
+    await page.locator("text=Login").click();
+
+    // expect to be redirected to login page with query parameter callbackUrl
+    await expect(page).toHaveURL(/\/auth\/login\?callbackUrl=.*/);
+
+    await user.apiLogin();
+
+    // manual redirect to booking page
+    await page.goto(`/booking/${booking.uid}?cancel=true`);
+
+    // expect login button to don't be in the page
+    await expect(page.locator("text=Login")).toHaveCount(0);
+
+    // fill reason for cancellation
+    await page.fill('[data-testid="cancel_reason"]', "Double booked!");
+
+    // confirm cancellation
+    await page.locator('[data-testid="confirm_cancel"]').click();
+    await page.waitForLoadState("networkidle");
+
+    const updatedBooking = await prisma.booking.findFirst({
+      where: { id: booking.id },
+    });
+
+    expect(updatedBooking).not.toBeNull();
+    expect(updatedBooking?.status).toBe(BookingStatus.CANCELLED);
+  });
 });
 
 test.describe("Reschedule for booking with seats", () => {
@@ -543,4 +598,113 @@ test.describe("Reschedule for booking with seats", () => {
       .first();
     await expect(foundFirstAttendeeAgain).toHaveCount(1);
   });
+
+  test("Owner shouldn't be able to reschedule booking without login in", async ({
+    page,
+    bookings,
+    users,
+  }) => {
+    const { booking, user } = await createUserWithSeatedEventAndAttendees({ users, bookings }, [
+      { name: "John First", email: "first+seats@cal.com", timeZone: "Europe/Berlin" },
+      { name: "Jane Second", email: "second+seats@cal.com", timeZone: "Europe/Berlin" },
+      { name: "John Third", email: "third+seats@cal.com", timeZone: "Europe/Berlin" },
+    ]);
+    const getBooking = await booking.self();
+
+    await page.goto(`/booking/${booking.uid}`);
+    await expect(page.locator('[data-testid="reschedule"]')).toHaveCount(0);
+
+    // expect login text to be in the page, not data-testid
+    await expect(page.locator("text=Login")).toHaveCount(1);
+
+    // click on login button text
+    await page.locator("text=Login").click();
+
+    // expect to be redirected to login page with query parameter callbackUrl
+    await expect(page).toHaveURL(/\/auth\/login\?callbackUrl=.*/);
+
+    await user.apiLogin();
+
+    // manual redirect to booking page
+    await page.goto(`/booking/${booking.uid}`);
+
+    // expect login button to don't be in the page
+    await expect(page.locator("text=Login")).toHaveCount(0);
+
+    // reschedule-link click
+    await page.locator('[data-testid="reschedule-link"]').click();
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+
+    // data displayed in form should be user owner
+    const nameElement = await page.locator("input[name=name]");
+    const name = await nameElement.inputValue();
+    expect(name).toBe(user.username);
+
+    //same for email
+    const emailElement = await page.locator("input[name=email]");
+    const email = await emailElement.inputValue();
+    expect(email).toBe(user.email);
+
+    // reason to reschedule input should be visible textfield with name rescheduleReason
+    const reasonElement = await page.locator("textarea[name=rescheduleReason]");
+    await expect(reasonElement).toBeVisible();
+
+    // expect to be redirected to reschedule page
+    await page.locator('[data-testid="confirm-reschedule-button"]').click();
+
+    // should wait for URL but that path starts with booking/
+    await page.waitForURL(/\/booking\/.*/);
+
+    await expect(page).toHaveURL(/\/booking\/.*/);
+
+    await page.waitForLoadState("networkidle");
+
+    const updatedBooking = await prisma.booking.findFirst({
+      where: { id: booking.id },
+    });
+
+    expect(updatedBooking).not.toBeNull();
+    expect(getBooking?.startTime).not.toBe(updatedBooking?.startTime);
+    expect(getBooking?.endTime).not.toBe(updatedBooking?.endTime);
+    expect(updatedBooking?.status).toBe(BookingStatus.ACCEPTED);
+  });
+
+  test("Owner shouldn't be able to reschedule when going directly to booking/rescheduleUid", async ({
+    page,
+    bookings,
+    users,
+  }) => {
+    const { booking, user } = await createUserWithSeatedEventAndAttendees({ users, bookings }, [
+      { name: "John First", email: "first+seats@cal.com", timeZone: "Europe/Berlin" },
+      { name: "Jane Second", email: "second+seats@cal.com", timeZone: "Europe/Berlin" },
+      { name: "John Third", email: "third+seats@cal.com", timeZone: "Europe/Berlin" },
+    ]);
+    const getBooking = await booking.self();
+
+    await page.goto(`/${user.username}/seats?rescheduleUid=${getBooking?.uid}&bookingUid=null`);
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+
+    // expect textarea with name notes to be visible
+    const notesElement = await page.locator("textarea[name=notes]");
+    await expect(notesElement).toBeVisible();
+
+    // expect button confirm instead of reschedule
+    await expect(page.locator('[data-testid="confirm-book-button"]')).toHaveCount(1);
+
+    // now login and try again
+    await user.apiLogin();
+
+    await page.goto(`/${user.username}/seats?rescheduleUid=${getBooking?.uid}&bookingUid=null`);
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+
+    await expect(page).toHaveTitle(/(?!.*reschedule).*/);
+
+    // expect button reschedule
+    await expect(page.locator('[data-testid="confirm-reschedule-button"]')).toHaveCount(1);
+  });
+
+  // @TODO: force 404 when rescheduleUid is not found
 });

apps/web/playwright/fixtures/embeds.ts

@@ -1,81 +1,90 @@
 import type { Page } from "@playwright/test";
 
 export const createEmbedsFixture = (page: Page) => {
-  return async (calNamespace: string) => {
-    await page.addInitScript(
-      ({ calNamespace }: { calNamespace: string }) => {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        //@ts-ignore
-        window.eventsFiredStoreForPlaywright = window.eventsFiredStoreForPlaywright || {};
-        document.addEventListener("DOMContentLoaded", function tryAddingListener() {
-          if (parent !== window) {
-            // Firefox seems to execute this snippet for iframe as well. Avoid that. It must be executed only for parent frame.
-
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            //@ts-ignore
-            window.initialBodyVisibility = document.body.style.visibility;
-
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            //@ts-ignore
-            window.initialBodyBackground = document.body.style.background;
-
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            //@ts-ignore
-            window.initialValuesSet = true;
-
-            return;
-          }
-
+  return {
+    /**
+     * @deprecated Use gotoPlayground instead
+     */
+    async addEmbedListeners(calNamespace: string) {
+      await page.addInitScript(
+        ({ calNamespace }: { calNamespace: string }) => {
+          console.log("PlaywrightTest:", "Adding listener for __iframeReady on namespace:", calNamespace);
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           //@ts-ignore
-          let api = window.Cal;
+          window.eventsFiredStoreForPlaywright = window.eventsFiredStoreForPlaywright || {};
+          document.addEventListener("DOMContentLoaded", function tryAddingListener() {
+            if (parent !== window) {
+              // Firefox seems to execute this snippet for iframe as well. Avoid that. It must be executed only for parent frame.
+
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              //@ts-ignore
+              window.initialBodyVisibility = document.body.style.visibility;
+
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              //@ts-ignore
+              window.initialBodyBackground = document.body.style.background;
+
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              //@ts-ignore
+              window.initialValuesSet = true;
+              return;
+            }
 
-          if (!api) {
-            setTimeout(tryAddingListener, 500);
-            return;
-          }
-          if (calNamespace) {
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             //@ts-ignore
-            api = window.Cal.ns[calNamespace];
-          }
-          console.log("PlaywrightTest:", "Adding listener for __iframeReady");
-          if (!api) {
-            throw new Error(`namespace "${calNamespace}" not found`);
-          }
-          api("on", {
-            action: "*",
-            callback: (e) => {
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore
-              window.iframeReady = true; // Technically if there are multiple cal embeds, it can be set due to some other iframe. But it works for now. Improve it when it doesn't work
+            let api = window.Cal;
 
+            if (!api) {
+              console.log("PlaywrightTest:", "window.Cal not available yet, trying again");
+              setTimeout(tryAddingListener, 500);
+              return;
+            }
+            if (calNamespace) {
               // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore
-              const store = window.eventsFiredStoreForPlaywright;
-              const eventStore = (store[`${e.detail.type}-${e.detail.namespace}`] =
-                store[`${e.detail.type}-${e.detail.namespace}`] || []);
-              eventStore.push(e.detail);
-            },
+              //@ts-ignore
+              api = window.Cal.ns[calNamespace];
+            }
+            console.log("PlaywrightTest:", `Adding listener for __iframeReady on namespace:${calNamespace}`);
+            if (!api) {
+              throw new Error(`namespace "${calNamespace}" not found`);
+            }
+            api("on", {
+              action: "*",
+              callback: (e) => {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                window.iframeReady = true; // Technically if there are multiple cal embeds, it can be set due to some other iframe. But it works for now. Improve it when it doesn't work
+
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                const store = window.eventsFiredStoreForPlaywright;
+                const eventStore = (store[`${e.detail.type}-${e.detail.namespace}`] =
+                  store[`${e.detail.type}-${e.detail.namespace}`] || []);
+                eventStore.push(e.detail);
+              },
+            });
           });
-        });
-      },
-      { calNamespace }
-    );
-  };
-};
-
-export const createGetActionFiredDetails = (page: Page) => {
-  return async ({ calNamespace, actionType }: { calNamespace: string; actionType: string }) => {
-    if (!page.isClosed()) {
-      return await page.evaluate(
-        ({ actionType, calNamespace }) => {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          //@ts-ignore
-          return window.eventsFiredStoreForPlaywright[`${actionType}-${calNamespace}`];
         },
-        { actionType, calNamespace }
+        { calNamespace }
       );
-    }
+    },
+
+    async getActionFiredDetails({ calNamespace, actionType }: { calNamespace: string; actionType: string }) {
+      if (!page.isClosed()) {
+        return await page.evaluate(
+          ({ actionType, calNamespace }) => {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            //@ts-ignore
+            return window.eventsFiredStoreForPlaywright[`${actionType}-${calNamespace}`];
+          },
+          { actionType, calNamespace }
+        );
+      }
+    },
+
+    async gotoPlayground({ calNamespace, url }: { calNamespace: string; url: string }) {
+      await this.addEmbedListeners(calNamespace);
+      await page.goto(url);
+    },
   };
 };

apps/web/playwright/lib/fixtures.ts

@@ -8,7 +8,7 @@ import prisma from "@calcom/prisma";
 
 import type { ExpectedUrlDetails } from "../../../../playwright.config";
 import { createBookingsFixture } from "../fixtures/bookings";
-import { createEmbedsFixture, createGetActionFiredDetails } from "../fixtures/embeds";
+import { createEmbedsFixture } from "../fixtures/embeds";
 import { createPaymentsFixture } from "../fixtures/payments";
 import { createRoutingFormsFixture } from "../fixtures/routingForms";
 import { createServersFixture } from "../fixtures/servers";
@@ -19,8 +19,7 @@ export interface Fixtures {
   users: ReturnType<typeof createUsersFixture>;
   bookings: ReturnType<typeof createBookingsFixture>;
   payments: ReturnType<typeof createPaymentsFixture>;
-  addEmbedListeners: ReturnType<typeof createEmbedsFixture>;
-  getActionFiredDetails: ReturnType<typeof createGetActionFiredDetails>;
+  embeds: ReturnType<typeof createEmbedsFixture>;
   servers: ReturnType<typeof createServersFixture>;
   prisma: typeof prisma;
   emails?: API;
@@ -36,7 +35,8 @@ declare global {
         calNamespace: string,
         // eslint-disable-next-line
         getActionFiredDetails: (a: { calNamespace: string; actionType: string }) => Promise<any>,
-        expectedUrlDetails?: ExpectedUrlDetails
+        expectedUrlDetails?: ExpectedUrlDetails,
+        isPrendered?: boolean
       ): Promise<R>;
     }
   }
@@ -58,14 +58,10 @@ export const test = base.extend<Fixtures>({
     const payemntsFixture = createPaymentsFixture(page);
     await use(payemntsFixture);
   },
-  addEmbedListeners: async ({ page }, use) => {
+  embeds: async ({ page }, use) => {
     const embedsFixture = createEmbedsFixture(page);
     await use(embedsFixture);
   },
-  getActionFiredDetails: async ({ page }, use) => {
-    const getActionFiredDetailsFixture = createGetActionFiredDetails(page);
-    await use(getActionFiredDetailsFixture);
-  },
   servers: async ({}, use) => {
     const servers = createServersFixture();
     await use(servers);

apps/web/playwright/lib/testUtils.ts

@@ -1,4 +1,4 @@
-import type { Page } from "@playwright/test";
+import type { Frame, Page } from "@playwright/test";
 import { expect } from "@playwright/test";
 import type { IncomingMessage, ServerResponse } from "http";
 import { createServer } from "http";
@@ -86,7 +86,7 @@ export async function waitFor(fn: () => Promise<unknown> | unknown, opts: { time
   }
 }
 
-export async function selectFirstAvailableTimeSlotNextMonth(page: Page) {
+export async function selectFirstAvailableTimeSlotNextMonth(page: Page | Frame) {
   // Let current month dates fully render.
   await page.click('[data-testid="incrementMonth"]');
 

apps/web/playwright/locale.e2e.ts

@@ -0,0 +1,259 @@
+import { expect } from "@playwright/test";
+
+import { test } from "./lib/fixtures";
+
+test.describe.configure({ mode: "serial" });
+
+test.describe("unauthorized user sees correct translations (de)", async () => {
+  test.use({
+    locale: "de",
+  });
+
+  test("should use correct translations and html attributes", async ({ page }) => {
+    await page.goto("/");
+    await page.waitForLoadState("load");
+
+    await page.locator("html[lang=de]").waitFor({ state: "attached" });
+    await page.locator("html[dir=ltr]").waitFor({ state: "attached" });
+
+    {
+      const locator = page.getByText("Willkommen zurück", { exact: true });
+      expect(await locator.count()).toEqual(1);
+    }
+
+    {
+      const locator = page.getByText("Welcome back", { exact: true });
+      expect(await locator.count()).toEqual(0);
+    }
+  });
+});
+
+test.describe("unauthorized user sees correct translations (ar)", async () => {
+  test.use({
+    locale: "ar",
+  });
+
+  test("should use correct translations and html attributes", async ({ page }) => {
+    await page.goto("/");
+    await page.waitForLoadState("load");
+
+    await page.locator("html[lang=ar]").waitFor({ state: "attached" });
+    await page.locator("html[dir=rtl]").waitFor({ state: "attached" });
+
+    {
+      const locator = page.getByText("أهلاً بك من جديد", { exact: true });
+      expect(await locator.count()).toEqual(1);
+    }
+
+    {
+      const locator = page.getByText("Welcome back", { exact: true });
+      expect(await locator.count()).toEqual(0);
+    }
+  });
+});
+
+test.describe("authorized user sees correct translations (de) [locale1]", async () => {
+  test.use({
+    locale: "en",
+  });
+
+  test("should return correct translations and html attributes", async ({ page, users }) => {
+    await test.step("should create a de user", async () => {
+      const user = await users.create({
+        locale: "de",
+      });
+      await user.apiLogin();
+    });
+
+    await test.step("should navigate to /event-types and show German translations", async () => {
+      await page.goto("/event-types");
+
+      await page.waitForLoadState("networkidle");
+
+      await page.locator("html[lang=de]").waitFor({ state: "attached" });
+      await page.locator("html[dir=ltr]").waitFor({ state: "attached" });
+
+      {
+        const locator = page.getByText("Ereignistypen", { exact: true });
+        expect(await locator.count()).toBeGreaterThanOrEqual(1);
+      }
+
+      {
+        const locator = page.getByText("Event Types", { exact: true });
+        expect(await locator.count()).toEqual(0);
+      }
+    });
+
+    await test.step("should navigate to /bookings and show German translations", async () => {
+      await page.goto("/bookings");
+
+      await page.waitForLoadState("networkidle");
+
+      await page.locator("html[lang=de]").waitFor({ state: "attached" });
+      await page.locator("html[dir=ltr]").waitFor({ state: "attached" });
+
+      {
+        const locator = page.getByText("Buchungen", { exact: true });
+        expect(await locator.count()).toBeGreaterThanOrEqual(1);
+      }
+
+      {
+        const locator = page.getByText("Bookings", { exact: true });
+        expect(await locator.count()).toEqual(0);
+      }
+    });
+
+    await test.step("should reload the /bookings and show German translations", async () => {
+      await page.reload();
+
+      await page.waitForLoadState("networkidle");
+
+      await page.locator("html[lang=de]").waitFor({ state: "attached" });
+      await page.locator("html[dir=ltr]").waitFor({ state: "attached" });
+
+      {
+        const locator = page.getByText("Buchungen", { exact: true });
+        expect(await locator.count()).toBeGreaterThanOrEqual(1);
+      }
+
+      {
+        const locator = page.getByText("Bookings", { exact: true });
+        expect(await locator.count()).toEqual(0);
+      }
+    });
+  });
+});
+
+test.describe("authorized user sees correct translations (ar)", async () => {
+  test.use({
+    locale: "en",
+  });
+
+  test("should return correct translations and html attributes", async ({ page, users }) => {
+    await test.step("should create a de user", async () => {
+      const user = await users.create({
+        locale: "ar",
+      });
+      await user.apiLogin();
+    });
+
+    await test.step("should navigate to /event-types and show German translations", async () => {
+      await page.goto("/event-types");
+
+      await page.waitForLoadState("networkidle");
+
+      await page.locator("html[lang=ar]").waitFor({ state: "attached" });
+      await page.locator("html[dir=rtl]").waitFor({ state: "attached" });
+
+      {
+        const locator = page.getByText("أنواع الحدث", { exact: true });
+        expect(await locator.count()).toBeGreaterThanOrEqual(1);
+      }
+
+      {
+        const locator = page.getByText("Event Types", { exact: true });
+        expect(await locator.count()).toEqual(0);
+      }
+    });
+
+    await test.step("should navigate to /bookings and show German translations", async () => {
+      await page.goto("/bookings");
+
+      await page.waitForLoadState("networkidle");
+
+      await page.locator("html[lang=ar]").waitFor({ state: "attached" });
+      await page.locator("html[dir=rtl]").waitFor({ state: "attached" });
+
+      {
+        const locator = page.getByText("عمليات الحجز", { exact: true });
+        expect(await locator.count()).toBeGreaterThanOrEqual(1);
+      }
+
+      {
+        const locator = page.getByText("Bookings", { exact: true });
+        expect(await locator.count()).toEqual(0);
+      }
+    });
+
+    await test.step("should reload the /bookings and show German translations", async () => {
+      await page.reload();
+
+      await page.waitForLoadState("networkidle");
+
+      await page.locator("html[lang=ar]").waitFor({ state: "attached" });
+      await page.locator("html[dir=rtl]").waitFor({ state: "attached" });
+
+      {
+        const locator = page.getByText("عمليات الحجز", { exact: true });
+        expect(await locator.count()).toBeGreaterThanOrEqual(1);
+      }
+
+      {
+        const locator = page.getByText("Bookings", { exact: true });
+        expect(await locator.count()).toEqual(0);
+      }
+    });
+  });
+});
+
+test.describe("authorized user sees changed translations (de->ar)", async () => {
+  test.use({
+    locale: "en",
+  });
+
+  test("should return correct translations and html attributes", async ({ page, users }) => {
+    await test.step("should create a de user", async () => {
+      const user = await users.create({
+        locale: "de",
+      });
+      await user.apiLogin();
+    });
+
+    await test.step("should change the language and show Arabic translations", async () => {
+      await page.goto("/settings/my-account/general");
+
+      await page.waitForLoadState("networkidle");
+
+      await page.locator(".bg-default > div > div:nth-child(2)").first().click();
+      await page.locator("#react-select-2-option-0").click();
+
+      await page.getByRole("button", { name: "Aktualisieren" }).click();
+
+      await page
+        .getByRole("button", { name: "Einstellungen erfolgreich aktualisiert" })
+        .waitFor({ state: "visible" });
+
+      await page.locator("html[lang=ar]").waitFor({ state: "attached" });
+      await page.locator("html[dir=rtl]").waitFor({ state: "attached" });
+
+      {
+        const locator = page.getByText("عام", { exact: true }); // "general"
+        expect(await locator.count()).toBeGreaterThanOrEqual(1);
+      }
+
+      {
+        const locator = page.getByText("Allgemein", { exact: true }); // "general"
+        expect(await locator.count()).toEqual(0);
+      }
+    });
+
+    await test.step("should reload and show Arabic translations", async () => {
+      await page.reload();
+
+      await page.waitForLoadState("networkidle");
+
+      await page.locator("html[lang=ar]").waitFor({ state: "attached" });
+      await page.locator("html[dir=rtl]").waitFor({ state: "attached" });
+
+      {
+        const locator = page.getByText("عام", { exact: true }); // "general"
+        expect(await locator.count()).toBeGreaterThanOrEqual(1);
+      }
+
+      {
+        const locator = page.getByText("Allgemein", { exact: true }); // "general"
+        expect(await locator.count()).toEqual(0);
+      }
+    });
+  });
+});

apps/web/playwright/login.oauth.e2e.ts

@@ -15,7 +15,8 @@ test("Should display SAML Login button", async ({ page }) => {
   // eslint-disable-next-line playwright/no-skipped-test
   test.skip(!IS_SAML_LOGIN_ENABLED, "It should only run if SAML Login is installed");
 
-  await page.goto(`/auth/login`);
-
-  await expect(page.locator(`[data-testid=saml]`)).toBeVisible();
+  // TODO: Fix this later
+  // Button is visible only if there is a SAML connection exists (self-hosted)
+  // await page.goto(`/auth/login`);
+  // await expect(page.locator(`[data-testid=saml]`)).toBeVisible();
 });

apps/web/playwright/oauth-provider.e2e.ts

@@ -2,6 +2,7 @@ import { expect } from "@playwright/test";
 import { randomBytes } from "crypto";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
+import { prisma } from "@calcom/prisma";
 import { generateSecret } from "@calcom/trpc/server/routers/viewer/oAuth/addClient.handler";
 
 import { test } from "./lib/fixtures";

apps/web/playwright/overlay-calendar.e2e.ts

@@ -0,0 +1,39 @@
+export {};
+//  TODO: @sean - I can't run E2E locally - causing me a lot of pain to try and debug.
+//  Will tackle in follow up once i reset my system.
+// test.describe("User can overlay their calendar", async () => {
+//   test.afterAll(async ({ users }) => {
+//     await users.deleteAll();
+//   });
+//   test("Continue with Cal.com flow", async ({ page, users }) => {
+//     await users.create({
+//       username: "overflow-user-test",
+//     });
+//     await test.step("toggles overlay without a session", async () => {
+//       await page.goto("/overflow-user-test/30-min");
+//       const switchLocator = page.locator(`[data-testid=overlay-calendar-switch]`);
+//       await switchLocator.click();
+//       const continueWithCalCom = page.locator(`[data-testid=overlay-calendar-continue-button]`);
+//       await expect(continueWithCalCom).toBeVisible();
+//       await continueWithCalCom.click();
+//     });
+//     // log in trail user
+//     await test.step("Log in and return to booking page", async () => {
+//       const user = await users.create();
+//       await user.login();
+//       // Expect page to be redirected to the test users booking page
+//       await page.waitForURL("/overflow-user-test/30-min");
+//     });
+//     await test.step("Expect settings cog to be visible when session exists", async () => {
+//       const settingsCog = page.locator(`[data-testid=overlay-calendar-settings-button]`);
+//       await expect(settingsCog).toBeVisible();
+//     });
+//     await test.step("Settings should so no calendars connected", async () => {
+//       const settingsCog = page.locator(`[data-testid=overlay-calendar-settings-button]`);
+//       await settingsCog.click();
+//       await page.waitForLoadState("networkidle");
+//       const emptyScreenLocator = page.locator(`[data-testid=empty-screen]`);
+//       await expect(emptyScreenLocator).toBeVisible();
+//     });
+//   });
+// });

apps/web/public/static/locales/de/common.json

@@ -288,6 +288,7 @@
   "when": "Wann",
   "where": "Wo",
   "add_to_calendar": "Zum Kalender hinzufügen",
+  "add_to_calendar_description": "Legen Sie fest, wo neue Termine hinzugefügt werden sollen, wenn Sie gebucht werden.",
   "add_another_calendar": "Einen weiteren Kalender hinzufügen",
   "other": "Sonstige",
   "email_sign_in_subject": "Ihr Anmelde-Link für {{appName}}",
@@ -599,6 +600,7 @@
   "hide_book_a_team_member": "„Ein Teammitglied buchen“-Schaltfläche ausblenden",
   "hide_book_a_team_member_description": "Blendet die „Ein Teammitglied buchen“-Schaltflächen auf Ihren öffentlichen Seiten aus.",
   "danger_zone": "Achtung",
+  "account_deletion_cannot_be_undone": "Vorsicht. Löschen eines Kontos kann nicht rückgängig gemacht werden.",
   "back": "Zurück",
   "cancel": "Absagen",
   "cancel_all_remaining": "Alle verbleibenden absagen",
@@ -688,6 +690,7 @@
   "people": "Personen",
   "your_email": "Ihre E-Mail-Adresse",
   "change_avatar": "Profilbild ändern",
+  "upload_avatar": "Avatar hochladen",
   "language": "Sprache",
   "timezone": "Zeitzone",
   "first_day_of_week": "Erster Tag der Woche",
@@ -1276,6 +1279,7 @@
   "personal_cal_url": "Meine persönliche {{appName}}-URL",
   "bio_hint": "Schreiben Sie eine kurze Beschreibung, welche auf Ihrer persönlichen Profil-Seite erscheinen wird.",
   "user_has_no_bio": "Dieser Benutzer hat noch keine Bio hinzugefügt.",
+  "bio": "Biografie",
   "delete_account_modal_title": "Account löschen",
   "confirm_delete_account_modal": "Sind Sie sicher, dass Sie Ihr {{appName}}-Konto löschen möchten?",
   "delete_my_account": "Meinen Account löschen",
@@ -1530,6 +1534,7 @@
   "problem_registering_domain": "Es gab ein Problem bei der Registrierung der Subdomain, bitte versuchen Sie es erneut oder kontaktieren Sie einen Administrator",
   "team_publish": "Team veröffentlichen",
   "number_text_notifications": "Telefonnummer (Textbenachrichtigungen)",
+  "number_sms_notifications": "Telefonnummer (SMS-Benachrichtigungen)",
   "attendee_email_variable": "Teilnehmer E-Mail",
   "attendee_email_info": "Die E-Mail-Adresse der buchenden Person",
   "kbar_search_placeholder": "Geben Sie einen Befehl ein oder suchen Sie ...",
@@ -1639,6 +1644,7 @@
   "minimum_round_robin_hosts_count": "Anzahl der Veranstalter, die teilnehmen müssen",
   "hosts": "Veranstalter",
   "upgrade_to_enable_feature": "Sie müssen ein Team erstellen, um diese Funktion zu aktivieren. Klicken Sie hier, um ein Team zu erstellen.",
+  "orgs_upgrade_to_enable_feature": "Sie müssen auf unsere Enterprise-Lizenz aktualisieren, um diese Funktion zu aktivieren.",
   "new_attendee": "Neuer Teilnehmer",
   "awaiting_approval": "Wartet auf Genehmigung",
   "requires_google_calendar": "Diese App erfordert eine Verbindung mit Google Calendar",
@@ -1743,6 +1749,7 @@
   "show_on_booking_page": "Auf der Buchungsseite anzeigen",
   "get_started_zapier_templates": "Legen Sie mit Zapier-Vorlagen los",
   "team_is_unpublished": "{{team}} ist unveröffentlicht",
+  "org_is_unpublished_description": "Dieser Organisations-Link ist derzeit nicht verfügbar. Bitte kontaktieren Sie den Organisations-Besitzer oder fragen Sie ihn, ob er ihn veröffentlicht.",
   "team_is_unpublished_description": "Dieser {{entity}}-Link ist derzeit nicht verfügbar. Bitte kontaktieren Sie den {{entity}}-Besitzer oder fragen Sie ihn, ob er ihn veröffentlicht.",
   "team_member": "Teammitglied",
   "a_routing_form": "Ein Weiterleitungsformular",
@@ -1877,6 +1884,7 @@
   "edit_invite_link": "Linkeinstellungen bearbeiten",
   "invite_link_copied": "Einladungslink kopiert",
   "invite_link_deleted": "Einladungslink gelöscht",
+  "api_key_deleted": "API-Schlüssel gelöscht",
   "invite_link_updated": "Einladungslink-Einstellungen gespeichert",
   "link_expires_after": "Links verfallen nach...",
   "one_day": "1 Tag",
@@ -2011,7 +2019,13 @@
   "attendee_last_name_variable": "Nachname des Teilnehmers",
   "attendee_first_name_info": "Vorname der buchenden Person",
   "attendee_last_name_info": "Nachname der buchenden Person",
+  "your_monthly_digest": "Ihre monatliche Statistik",
+  "member_name": "Mitgliedsname",
+  "most_popular_events": "Beliebteste Termine",
+  "summary_of_events_for_your_team_for_the_last_30_days": "Hier ist Ihre Zusammenfassung der beliebten Termine für Ihr Team {{teamName}} der letzten 30 Tage",
   "me": "Ich",
+  "monthly_digest_email": "Monatliche Statistik E-Mail",
+  "monthly_digest_email_for_teams": "Monatliche Statistik E-Mail für Teams",
   "verify_team_tooltip": "Verifizieren Sie Ihr Team, um das Senden von Nachrichten an Teilnehmer zu aktivieren",
   "member_removed": "Mitglied entfernt",
   "my_availability": "Meine Verfügbarkeit",
@@ -2041,12 +2055,28 @@
   "team_no_event_types": "Dieses Team hat keine Ereignistypen",
   "seat_options_doesnt_multiple_durations": "Platzoption unterstützt mehrere Dauern nicht",
   "include_calendar_event": "Kalenderereignis hinzufügen",
+  "oAuth": "OAuth",
   "recently_added": "Kürzlich hinzugefügt",
   "no_members_found": "Keine Mitglieder gefunden",
   "event_setup_length_error": "Ereignis-Einrichtung: Die Dauer muss mindestens 1 Minute betragen.",
   "availability_schedules": "Verfügbarkeitspläne",
+  "unauthorized": "Nicht authorisiert",
+  "access_cal_account": "{{clientName}} möchte auf Ihr {{appName}} Konto zugreifen",
+  "select_account_team": "Konto oder Team auswählen",
+  "allow_client_to": "Dies wird {{clientName}} erlauben",
+  "see_personal_info": "Ihre persönlichen Daten einzusehen, einschließlich persönlicher Informationen, die Sie öffentlich zugänglich gemacht haben",
+  "see_primary_email_address": "Ihre primäre E-Mail-Adresse einzusehen",
+  "connect_installed_apps": "Sich mit Ihren installierten Apps zu verbinden",
+  "access_event_type": "Lesen, Bearbeiten, Löschen Ihrer Ereignis-Typen",
+  "access_availability": "Lesen, Bearbeiten, Löschen Ihrer Verfügbarkeiten",
+  "access_bookings": "Lesen, Bearbeiten, Löschen Ihrer Termine",
+  "allow_client_to_do": "{{clientName}} zulassen, dies zu tun?",
+  "allow": "Zulassen",
   "view_only_edit_availability_not_onboarded": "Dieser Benutzer hat das Onboarding noch nicht abgeschlossen. Sie können seine Verfügbarkeit erst festlegen, wenn er das Onboarding abgeschlossen hat.",
   "view_only_edit_availability": "Sie sehen die Verfügbarkeit dieses Benutzers. Sie können nur Ihre eigene Verfügbarkeit bearbeiten.",
   "edit_users_availability": "Benutzerverfügbarkeit bearbeiten: {{username}}",
+  "resend_invitation": "Einladung erneut senden",
+  "invitation_resent": "Die Einladung wurde erneut gesendet.",
+  "this_app_is_not_setup_already": "Diese App wurde noch nicht eingerichtet",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Fügen Sie Ihre neuen Code-Zeilen über dieser hinzu ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }

apps/web/public/static/locales/en/common.json

@@ -268,6 +268,7 @@
   "set_availability": "Set your availability",
   "availability_settings": "Availability Settings",
   "continue_without_calendar": "Continue without calendar",
+  "continue_with": "Continue with {{appName}}",
   "connect_your_calendar": "Connect your calendar",
   "connect_your_video_app": "Connect your video apps",
   "connect_your_video_app_instructions": "Connect your video apps to use them on your event types.",
@@ -289,6 +290,7 @@
   "where": "Where",
   "add_to_calendar": "Add to calendar",
   "add_to_calendar_description":"Select where to add events when you’re booked.",
+  "add_events_to":"Add events to",
   "add_another_calendar": "Add another calendar",
   "other": "Other",
   "email_sign_in_subject": "Your sign-in link for {{appName}}",
@@ -332,7 +334,7 @@
   "bookerlayout_error_min_one_enabled": "At least one layout has to be enabled.",
   "bookerlayout_error_default_not_enabled": "The layout you selected as the default view is not part of the enabled layouts.",
   "bookerlayout_error_unknown_layout": "The layout you selected is not a valid layout.",
-  "bookerlayout_override_global_settings": "You can manage this for all your event types in <2>settings / appearance</2> or <6>override for this event only</6>.",
+  "bookerlayout_override_global_settings": "You can manage this for all your event types in Settings -> <2>Appearance</2> or <6>Override</6> for this event only.",
   "unexpected_error_try_again": "An unexpected error occurred. Try again.",
   "sunday_time_error": "Invalid time on Sunday",
   "monday_time_error": "Invalid time on Monday",
@@ -458,6 +460,7 @@
   "no_event_types_have_been_setup": "This user hasn't set up any event types yet.",
   "edit_logo": "Edit logo",
   "upload_a_logo": "Upload a logo",
+  "upload_logo": "Upload logo",
   "remove_logo": "Remove logo",
   "enable": "Enable",
   "code": "Code",
@@ -570,6 +573,7 @@
   "your_team_name": "Your team name",
   "team_updated_successfully": "Team updated successfully",
   "your_team_updated_successfully": "Your team has been updated successfully.",
+  "your_org_updated_successfully": "Your Org has been updated successfully.",
   "about": "About",
   "team_description": "A few sentences about your team. This will appear on your team's url page.",
   "org_description": "A few sentences about your organization. This will appear on your organization's url page.",
@@ -684,8 +688,8 @@
   "new_event_type_btn": "New event type",
   "new_event_type_heading": "Create your first event type",
   "new_event_type_description": "Event types enable you to share links that show available times on your calendar and allow people to make bookings with you.",
-  "event_type_created_successfully": "Event type created successfully",
-  "event_type_updated_successfully": "Event type updated successfully",
+  "event_type_created_successfully": "{{eventTypeTitle}} event type created successfully",
+  "event_type_updated_successfully": "{{eventTypeTitle}} event type updated successfully",
   "event_type_deleted_successfully": "Event type deleted successfully",
   "hours": "Hours",
   "people": "People",
@@ -782,6 +786,7 @@
   "disable_guests": "Disable Guests",
   "disable_guests_description": "Disable adding additional guests while booking.",
   "private_link": "Generate private link",
+  "enable_private_url": "Enable Private URL",
   "private_link_label": "Private link",
   "private_link_hint": "Your private link will regenerate after each use",
   "copy_private_link": "Copy private link",
@@ -1619,6 +1624,7 @@
   "date_overrides_mark_all_day_unavailable_other": "Mark unavailable on selected dates",
   "date_overrides_add_btn": "Add Override",
   "date_overrides_update_btn": "Update Override",
+  "date_successfully_added": "Date override added successfully",
   "event_type_duplicate_copy_text": "{{slug}}-copy",
   "set_as_default": "Set as default",
   "hide_eventtype_details": "Hide event type details",
@@ -2077,6 +2083,7 @@
   "allow": "Allow",
   "view_only_edit_availability_not_onboarded":"This user has not completed onboarding. You will not be able to set their availability until they have completed onboarding.",
   "view_only_edit_availability":"You are viewing this user's availability. You can only edit your own availability.",
+  "you_can_override_calendar_in_advanced_tab":"You can override this on a per-event basis in Advanced settings in each event type.",
   "edit_users_availability":"Edit user's availability: {{username}}",
   "resend_invitation": "Resend invitation",
   "invitation_resent": "The invitation was resent.",
@@ -2084,5 +2091,8 @@
   "copy_client_secret_info": "After copying the secret you won't be able to view it anymore",
   "add_new_client": "Add new Client",
   "this_app_is_not_setup_already": "This app has not been setup yet",
+  "overlay_my_calendar":"Overlay my calendar",
+  "overlay_my_calendar_toc":"By connecting to your calendar, you accept our privacy policy and terms of use. You may revoke access at any time.",
+  "view_overlay_calendar_events":"View your calendar events to prevent clashed booking.",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }

apps/web/public/static/locales/fr/common.json

@@ -681,8 +681,8 @@
   "new_event_type_btn": "Nouveau type d'événement",
   "new_event_type_heading": "Créez votre premier type d'événement",
   "new_event_type_description": "Les types d'événements vous permettent de partager des liens qui affichent vos disponibilités sur votre calendrier et permettent aux personnes de réserver des créneaux.",
-  "event_type_created_successfully": "Type d'événement créé avec succès",
-  "event_type_updated_successfully": "Type d'événement mis à jour avec succès",
+  "event_type_created_successfully": "{{eventTypeTitle}} type d'événement créé avec succès",
+  "event_type_updated_successfully": "{{eventTypeTitle}} type d'événement mis à jour avec succès",
   "event_type_deleted_successfully": "Type d'événement supprimé avec succès",
   "hours": "heures",
   "people": "Personnes",

apps/web/public/static/locales/lv/common.json

@@ -0,0 +1 @@
+{}

apps/web/public/static/locales/pt-BR/common.json

@@ -682,7 +682,7 @@
   "new_event_type_heading": "Crie seu primeiro evento",
   "new_event_type_description": "Os eventos permitem que você compartilhe links que mostram os horários disponíveis no seu calendário para que os usuários façam agendamentos com você.",
   "event_type_created_successfully": "{{eventTypeTitle}} evento criado com sucesso",
-  "event_type_updated_successfully": "Tipo de evento atualizado com sucesso",
+  "event_type_updated_successfully": "{{eventTypeTitle}} tipo de evento atualizado com sucesso",
   "event_type_deleted_successfully": "Tipo de evento removido com sucesso",
   "hours": "Horas",
   "people": "Pessoas",

apps/web/public/static/locales/pt/common.json

@@ -682,7 +682,7 @@
   "new_event_type_heading": "Crie o seu primeiro tipo de evento",
   "new_event_type_description": "Os tipos de evento permitem partilhar ligações que mostram os horários disponíveis na sua agenda, e permitem que as pessoas façam reservas consigo.",
   "event_type_created_successfully": "Tipo de evento {{eventTypeTitle}} criado com sucesso",
-  "event_type_updated_successfully": "Tipo de evento atualizado com sucesso",
+  "event_type_updated_successfully": "Tipo de evento {{eventTypeTitle}} atualizado com sucesso",
   "event_type_deleted_successfully": "Tipo de evento eliminado com sucesso",
   "hours": "Horas",
   "people": "Pessoas",

apps/web/server/lib/ssr.ts

@@ -2,8 +2,8 @@ import type { GetServerSidePropsContext } from "next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import superjson from "superjson";
 
+import { getLocale } from "@calcom/features/auth/lib/getLocale";
 import { CALCOM_VERSION } from "@calcom/lib/constants";
-import { getLocaleFromRequest } from "@calcom/lib/getLocaleFromRequest";
 import { createProxySSGHelpers } from "@calcom/trpc/react/ssg";
 import { createContext } from "@calcom/trpc/server/createContext";
 import { appRouter } from "@calcom/trpc/server/routers/_app";
@@ -16,7 +16,7 @@ import { appRouter } from "@calcom/trpc/server/routers/_app";
  */
 export async function ssrInit(context: GetServerSidePropsContext, options?: { noI18nPreload: boolean }) {
   const ctx = await createContext(context);
-  const locale = await getLocaleFromRequest(context.req);
+  const locale = await getLocale(context.req);
   const i18n = await serverSideTranslations(locale, ["common", "vital"]);
 
   const ssr = createProxySSGHelpers({

apps/web/test/lib/checkBookingLimits.test.ts

@@ -23,7 +23,6 @@ const MOCK_DATA: Mockdata = {
 
 describe("Check Booking Limits Tests", () => {
   it("Should return no errors", async () => {
-    // @ts-expect-error Prisma v5 typings are not yet available
     prismaMock.booking.count.mockResolvedValue(0);
     expect(
       checkBookingLimits(MOCK_DATA.bookingLimits, MOCK_DATA.startDate, MOCK_DATA.id)
@@ -31,7 +30,6 @@ describe("Check Booking Limits Tests", () => {
   });
   it("Should throw an error", async () => {
     // Mock there being two a day
-    // @ts-expect-error Prisma v5 typings are not yet available
     prismaMock.booking.count.mockResolvedValue(2);
     expect(
       checkBookingLimits(MOCK_DATA.bookingLimits, MOCK_DATA.startDate, MOCK_DATA.id)
@@ -39,7 +37,6 @@ describe("Check Booking Limits Tests", () => {
   });
 
   it("Should pass with multiple booking limits", async () => {
-    // @ts-expect-error Prisma v5 typings are not yet available
     prismaMock.booking.count.mockResolvedValue(0);
     expect(
       checkBookingLimits(
@@ -53,7 +50,6 @@ describe("Check Booking Limits Tests", () => {
     ).resolves.toBeTruthy();
   });
   it("Should pass with multiple booking limits with one undefined", async () => {
-    // @ts-expect-error Prisma v5 typings are not yet available
     prismaMock.booking.count.mockResolvedValue(0);
     expect(
       checkBookingLimits(
@@ -67,7 +63,6 @@ describe("Check Booking Limits Tests", () => {
     ).resolves.toBeTruthy();
   });
   it("Should handle mutiple limits correctly", async () => {
-    // @ts-expect-error Prisma v5 typings are not yet available
     prismaMock.booking.count.mockResolvedValue(1);
     expect(
       checkBookingLimit({
@@ -77,7 +72,6 @@ describe("Check Booking Limits Tests", () => {
         eventId: MOCK_DATA.id,
       })
     ).resolves.not.toThrow();
-    // @ts-expect-error Prisma v5 typings are not yet available
     prismaMock.booking.count.mockResolvedValue(3);
     expect(
       checkBookingLimit({

apps/web/test/lib/handleChildrenEventTypes.test.ts

@@ -10,7 +10,6 @@ import type { CompleteEventType, CompleteWorkflowsOnEventTypes } from "@calcom/p
 
 const mockFindFirstEventType = (data?: Partial<CompleteEventType>) => {
   const eventType = buildEventType(data as Partial<EventType>);
-  // @ts-expect-error Prisma v5 typings are not yet available
   prismaMock.eventType.findFirst.mockResolvedValue(eventType as EventType);
   return eventType;
 };
@@ -31,7 +30,7 @@ describe("handleChildrenEventTypes", () => {
   describe("Shortcircuits", () => {
     it("Returns message 'No managed event type'", async () => {
       mockFindFirstEventType();
-      // @ts-expect-error Prisma v5 typings are not yet available
+
       const result = await updateChildrenEventTypes({
         eventTypeId: 1,
         oldEventType: { children: [], team: { name: "" } },
@@ -40,7 +39,6 @@ describe("handleChildrenEventTypes", () => {
         currentUserId: 1,
         hashedLink: undefined,
         connectedLink: null,
-        // @ts-expect-error Prisma v5 typings are not yet available
         prisma: prismaMock,
       });
       expect(result.newUserIds).toEqual(undefined);
@@ -60,7 +58,6 @@ describe("handleChildrenEventTypes", () => {
         currentUserId: 1,
         hashedLink: undefined,
         connectedLink: null,
-        // @ts-expect-error Prisma v5 typings are not yet available
         prisma: prismaMock,
       });
       expect(result.newUserIds).toEqual(undefined);
@@ -86,7 +83,6 @@ describe("handleChildrenEventTypes", () => {
         currentUserId: 1,
         hashedLink: undefined,
         connectedLink: null,
-        // @ts-expect-error Prisma v5 typings are not yet available
         prisma: prismaMock,
       });
       expect(result.newUserIds).toEqual(undefined);
@@ -116,7 +112,6 @@ describe("handleChildrenEventTypes", () => {
         currentUserId: 1,
         hashedLink: undefined,
         connectedLink: null,
-        // @ts-expect-error Prisma v5 typings are not yet available
         prisma: prismaMock,
       });
       expect(prismaMock.eventType.create).toHaveBeenCalledWith({
@@ -163,7 +158,6 @@ describe("handleChildrenEventTypes", () => {
         currentUserId: 1,
         hashedLink: "somestring",
         connectedLink: null,
-        // @ts-expect-error Prisma v5 typings are not yet available
         prisma: prismaMock,
       });
       expect(prismaMock.eventType.update).toHaveBeenCalledWith({
@@ -197,7 +191,6 @@ describe("handleChildrenEventTypes", () => {
         currentUserId: 1,
         hashedLink: undefined,
         connectedLink: null,
-        // @ts-expect-error Prisma v5 typings are not yet available
         prisma: prismaMock,
       });
       expect(result.newUserIds).toEqual([]);
@@ -222,7 +215,6 @@ describe("handleChildrenEventTypes", () => {
         currentUserId: 1,
         hashedLink: undefined,
         connectedLink: null,
-        // @ts-expect-error Prisma v5 typings are not yet available
         prisma: prismaMock,
       });
       // Have been called
@@ -253,7 +245,6 @@ describe("handleChildrenEventTypes", () => {
         currentUserId: 1,
         hashedLink: undefined,
         connectedLink: null,
-        // @ts-expect-error Prisma v5 typings are not yet available
         prisma: prismaMock,
       });
       expect(prismaMock.eventType.create).toHaveBeenCalledWith({
@@ -300,7 +291,6 @@ describe("handleChildrenEventTypes", () => {
         currentUserId: 1,
         hashedLink: undefined,
         connectedLink: null,
-        // @ts-expect-error Prisma v5 typings are not yet available
         prisma: prismaMock,
       });
       expect(prismaMock.eventType.update).toHaveBeenCalledWith({
@@ -359,7 +349,6 @@ describe("handleChildrenEventTypes", () => {
         currentUserId: 1,
         hashedLink: undefined,
         connectedLink: null,
-        // @ts-expect-error Prisma v5 typings are not yet available
         prisma: prismaMock,
       });
       expect(prismaMock.eventType.create).toHaveBeenCalledWith({