v3.4.9

Co-authored-by: CarinaWolli <wollencarina@gmail.com>

.env.example

@@ -87,7 +87,7 @@ CRON_ENABLE_APP_SYNC=false
 
 # Application Key for symmetric encryption and decryption
 # must be 32 bytes for AES256 encryption algorithm
-# You can use: `openssl rand -base64 24` to generate one
+# You can use: `openssl rand -base64 32` to generate one
 CALENDSO_ENCRYPTION_KEY=
 
 # Intercom Config
@@ -115,6 +115,10 @@ SENDGRID_API_KEY=
 SENDGRID_EMAIL=
 NEXT_PUBLIC_SENDGRID_SENDER_NAME=
 
+# Sentry
+# Used for capturing exceptions and logging messages
+NEXT_PUBLIC_SENTRY_DSN=
+
 # Twilio
 # Used to send SMS reminders in workflows
 TWILIO_SID=
@@ -126,7 +130,7 @@ TWILIO_WHATSAPP_PHONE_NUMBER=
 NEXT_PUBLIC_SENDER_ID=
 TWILIO_VERIFY_SID=
 
-# Set it to "1" if you need to run E2E tests locally. 
+# Set it to "1" if you need to run E2E tests locally.
 NEXT_PUBLIC_IS_E2E=
 
 # Used for internal billing system
@@ -203,6 +207,8 @@ CSP_POLICY=
 EDGE_CONFIG=
 
 NEXT_PUBLIC_MINUTES_TO_BOOK=5 # Minutes
+# Control time intervals on a user's Schedule availability
+NEXT_PUBLIC_AVAILABILITY_SCHEDULE_INTERVAL=
 
 # - ORGANIZATIONS *******************************************************************************************
 # Enable Organizations non-prod domain setup, works in combination with organizations feature flag

.github/ISSUE_TEMPLATE/feature_request.md

@@ -47,3 +47,9 @@ assignees: ""
 -->
 
 (Share it here.)
+
+---
+##### House rules
+- If this issue has a `🚨 needs approval` label, don't start coding yet. Wait until a core member approves feature request by removing this label, then you can start coding.
+  - For clarity: Non-core member issues automatically get the `🚨 needs approval` label.
+  - Your feature ideas are invaluable to us! However, they undergo review to ensure alignment with the product's direction.

.github/PULL_REQUEST_TEMPLATE.md

@@ -40,7 +40,7 @@ Fixes # (issue)
 
 ## Checklist
 
-<!-- Please remove all the irrelevant bullets to your PR -->
+<!-- Remove bullet points below that don't apply to you -->
 
 - I haven't read the [contributing guide](https://github.com/calcom/cal.com/blob/main/CONTRIBUTING.md)
 - My code doesn't follow the style guidelines of this project

.github/workflows/merge-conflict.yml

@@ -1,18 +0,0 @@
-name: Auto Comment Merge Conflicts
-on: push
-
-permissions:
-  pull-requests: write
-
-jobs:
-  auto-comment-merge-conflicts:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: codytseng/auto-comment-merge-conflicts@v1
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          comment-body: "Hey there, there is a merge conflict, can you take a look?"
-          wait-ms: 3000
-          max-retries: 5
-          label-name: "🚨 merge conflict"
-          ignore-authors: dependabot,otherAuthor

.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"

.github/workflows/test.yml

@@ -15,3 +15,5 @@ jobs:
       - uses: ./.github/actions/yarn-install
       # Should be an 8GB machine as per https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners
       - run: yarn test
+      # We could add different timezones here that we need to run our tests in
+      - run: TZ=America/Los_Angeles yarn test -- --timeZoneDependentTestsOnly

.github/workflows/welcome-new-contributors.yml

@@ -1,27 +0,0 @@
-name: "Welcome new contributors"
-
-on:
-  issues:
-    types: opened
-  pull_request:
-    types: opened
-
-permissions:
-  pull-requests: write
-  issues: write
-
-jobs:
-  welcome-message:
-    name: Welcoming New Users
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-    if: github.event.action == 'opened'
-    steps:
-      - uses: actions/first-interaction@v1
-        with:
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
-          pr-message: |-
-            Thank you for making your first Pull Request and taking the time to improve Cal.com ! ❤️🎉
-            Feel free to join our [discord](https://go.cal.com/discord) and post your PR link to [collect XP and win prizes!](https://cal.com/blog/community-incentives)            
-          issue-message: |
-            Thank you for opening your first issue, one of our team members will review it as soon as it possible. ❤️🎉

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

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

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

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

CONTRIBUTING.md

@@ -2,7 +2,18 @@
 
 Contributions are what makes the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
 
-- Before jumping into a PR be sure to search [existing PRs](https://github.com/calcom/cal.com/pulls) or [issues](https://github.com/calcom/cal.com/issues) for an open or closed item that relates to your submission.
+## House rules
+
+- Before submitting a new issue or PR, check if it already exists in [issues](https://github.com/calcom/cal.com/issues) or [PRs](https://github.com/calcom/cal.com/pulls).
+- GitHub issues: take note of the `🚨 needs approval` label.
+  - **For Contributors**:
+    - Feature Requests: Wait for a core member to approve and remove the `🚨 needs approval` label before you start coding or submit a PR.
+    - Bugs, Security, Performance, Documentation, etc.: You can start coding immediately, even if the `🚨 needs approval` label is present. This label mainly concerns feature requests.
+  - **Our Process**:
+    - Issues from non-core members automatically receive the `🚨 needs approval` label.
+    - We greatly value new feature ideas. To ensure consistency in the product's direction, they undergo review and approval.
+
+
 
 ## Priorities
 

README.md

@@ -122,7 +122,7 @@ Here is what you need to be able to run Cal.com.
 
 ### Setup
 
-1. Clone the repo into a public GitHub repository (or fork https://github.com/calcom/cal.com/fork). If you plan to distribute the code, keep the source code public to comply with [AGPLv3](https://github.com/calcom/cal.com/blob/main/LICENSE). To clone in a private repository, [acquire a commercial license](https://cal.com/sales))
+1. Clone the repo into a public GitHub repository (or fork https://github.com/calcom/cal.com/fork). If you plan to distribute the code, keep the source code public to comply with [AGPLv3](https://github.com/calcom/cal.com/blob/main/LICENSE). To clone in a private repository, [acquire a commercial license](https://cal.com/sales)
 
    ```sh
    git clone https://github.com/calcom/cal.com.git
@@ -221,7 +221,7 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env
 
 1. Copy and paste your `DATABASE_URL` from `.env` to `.env.appStore`.
 
-1. Set a 32 character random string in your `.env` file for the `CALENDSO_ENCRYPTION_KEY` (You can use a command like `openssl rand -base64 24` to generate one).
+1. Set a 24 character random string in your `.env` file for the `CALENDSO_ENCRYPTION_KEY` (You can use a command like `openssl rand -base64 24` to generate one).
 1. Set up the database using the Prisma schema (found in `packages/prisma/schema.prisma`)
 
    In a development environment, run:
@@ -381,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
@@ -593,8 +597,6 @@ Distributed under the [AGPLv3 License](https://github.com/calcom/cal.com/blob/ma
 
 Special thanks to these amazing projects which help power Cal.com:
 
-[<img src="https://cal.com/powered-by-vercel.svg">](https://vercel.com/?utm_source=calend-so&utm_campaign=oss)
-
 - [Vercel](https://vercel.com/?utm_source=calend-so&utm_campaign=oss)
 - [Next.js](https://nextjs.org/)
 - [Day.js](https://day.js.org/)

__checks__/README.md

@@ -0,0 +1,4 @@
+# Checkly Tests
+
+Run as `yarn checkly test`
+Deploy the tests as `yarn checkly deploy`

__checks__/organization.spec.ts

@@ -0,0 +1,53 @@
+import type { Page } from "@playwright/test";
+import { test, expect } from "@playwright/test";
+
+test.describe("Org", () => {
+  // Because these pages involve next.config.js rewrites, it's better to test them on production
+  test.describe("Embeds - i.cal.com", () => {
+    test("Org Profile Page should be embeddable", async ({ page }) => {
+      const response = await page.goto("https://i.cal.com/embed");
+      expect(response?.status()).toBe(200);
+      await page.screenshot({ path: "screenshot.jpg" });
+      await expectPageToBeServerSideRendered(page);
+    });
+
+    test("Org User(Peer) Page should be embeddable", async ({ page }) => {
+      const response = await page.goto("https://i.cal.com/peer/embed");
+      expect(response?.status()).toBe(200);
+      await expect(page.locator("text=Peer Richelsen")).toBeVisible();
+      await expectPageToBeServerSideRendered(page);
+    });
+
+    test("Org User Event(peer/meet) Page should be embeddable", async ({ page }) => {
+      const response = await page.goto("https://i.cal.com/peer/meet/embed");
+      expect(response?.status()).toBe(200);
+      await expect(page.locator('[data-testid="decrementMonth"]')).toBeVisible();
+      await expect(page.locator('[data-testid="incrementMonth"]')).toBeVisible();
+      await expectPageToBeServerSideRendered(page);
+    });
+
+    test("Org Team Profile(/sales) page should be embeddable", async ({ page }) => {
+      const response = await page.goto("https://i.cal.com/sales/embed");
+      expect(response?.status()).toBe(200);
+      await expect(page.locator("text=Cal.com Sales")).toBeVisible();
+      await expectPageToBeServerSideRendered(page);
+    });
+
+    test("Org Team Event page(/sales/hippa) should be embeddable", async ({ page }) => {
+      const response = await page.goto("https://i.cal.com/sales/hipaa/embed");
+      expect(response?.status()).toBe(200);
+      await expect(page.locator('[data-testid="decrementMonth"]')).toBeVisible();
+      await expect(page.locator('[data-testid="incrementMonth"]')).toBeVisible();
+      await expectPageToBeServerSideRendered(page);
+    });
+  });
+});
+
+// This ensures that the route is actually mapped to a page that is using withEmbedSsr
+async function expectPageToBeServerSideRendered(page: Page) {
+  expect(
+    await page.evaluate(() => {
+      return window.__NEXT_DATA__.props.pageProps.isEmbed;
+    })
+  ).toBe(true);
+}

app.json

@@ -83,6 +83,10 @@
     "NEXT_PUBLIC_TEAM_IMPERSONATION": {
       "description": "Set the following value to true if you wish to enable Team Impersonation",
       "value": "false"
+    },
+    "NEXT_PUBLIC_AVAILABILITY_SCHEDULE_INTERVAL": {
+      "description": "Control time intervals on a user's Schedule availability",
+      "value": "15"
     }
   },
   "scripts": {

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,11 @@ _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.
+
+## Recognition
+
+<a href="https://www.producthunt.com/posts/cal-ai?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-cal&#0045;ai" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=419860&theme=light&period=daily" alt="Cal&#0046;ai - World&#0039;s&#0032;first&#0032;open&#0032;source&#0032;AI&#0032;scheduling&#0032;assistant | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a> <a href="https://www.producthunt.com/posts/cal-ai?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-cal&#0045;ai" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=419860&theme=light" alt="Cal&#0046;ai - World&#0039;s&#0032;first&#0032;open&#0032;source&#0032;AI&#0032;scheduling&#0032;assistant | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 
 ## Getting Started
 
@@ -22,27 +26,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 expose the AI app, run `ngrok http 3005` (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.1",
   "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.
@@ -37,6 +40,13 @@ export const POST = async (request: NextRequest) => {
 
     return new NextResponse("ok");
   } catch (error) {
+    await sendEmail({
+      subject: `Re: ${subject}`,
+      text: "Thanks for using Cal.ai! We're experiencing high demand and can't currently process your request. Please try again later.",
+      to: user.email,
+      from: agentEmail,
+    });
+
     return new NextResponse(
       (error as Error).message || "Something went wrong. Please try again or reach out for help.",
       { status: 500 }

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

@@ -3,6 +3,7 @@ import { simpleParser } from "mailparser";
 import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
 
+import { checkRateLimitAndThrowError } from "@calcom/lib/checkRateLimitAndThrowError";
 import prisma from "@calcom/prisma";
 
 import { env } from "../../../env.mjs";
@@ -14,6 +15,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.
@@ -27,18 +32,37 @@ export const POST = async (request: NextRequest) => {
 
   const formData = await request.formData();
   const body = Object.fromEntries(formData);
-
-  // body.dkim looks like {@domain-com.22222222.gappssmtp.com : pass}
-  const signature = (body.dkim as string).includes(" : pass");
-
   const envelope = JSON.parse(body.envelope as string);
 
   const aiEmail = envelope.to[0];
+  const subject = body.subject || "";
+
+  try {
+    await checkRateLimitAndThrowError({
+      identifier: `ai:email:${envelope.from}`,
+      rateLimitingType: "ai",
+    });
+  } catch (error) {
+    await sendEmail({
+      subject: `Re: ${subject}`,
+      text: "Thanks for using Cal.ai! You've reached your daily limit. Please try again tomorrow.",
+      to: envelope.from,
+      from: aiEmail,
+    });
+
+    return new NextResponse("Exceeded rate limit", { status: 200 }); // Don't return 429 to avoid triggering retry logic in SendGrid
+  }
 
   // Parse email from mixed MIME type
   const parsed: ParsedMail = await simpleParser(body.email as Source);
 
   if (!parsed.text && !parsed.subject) {
+    await sendEmail({
+      subject: `Re: ${subject}`,
+      text: "Thanks for using Cal.ai! It looks like you forgot to include a message. Please try again.",
+      to: envelope.from,
+      from: aiEmail,
+    });
     return new NextResponse("Email missing text and subject", { status: 400 });
   }
 
@@ -55,14 +79,17 @@ export const POST = async (request: NextRequest) => {
         },
       },
     },
-    where: { email: envelope.from, credentials: { some: { appId: env.APP_ID } } },
+    where: { email: envelope.from },
   });
 
+  // body.dkim looks like {@domain-com.22222222.gappssmtp.com : pass}
+  const signature = (body.dkim as string).includes(" : pass");
+
   // User is not a cal.com user or is using an unverified email.
   if (!signature || !user) {
     await sendEmail({
-      html: `Thanks for your interest in Cal.ai! To get started, Make sure you have a <a href="https://cal.com/signup" target="_blank">cal.com</a> account with this email address.`,
-      subject: `Re: ${body.subject}`,
+      html: `Thanks for your interest in Cal.ai! To get started, Make sure you have a <a href="https://cal.com/signup" target="_blank">cal.com</a> account with this email address and then install Cal.ai here: <a href="https://go.cal.com/ai" target="_blank">go.cal.com/ai</a>.`,
+      subject: `Re: ${subject}`,
       text: `Thanks for your interest in Cal.ai! To get started, Make sure you have a cal.com account with this email address. You can sign up for an account at: https://cal.com/signup`,
       to: envelope.from,
       from: aiEmail,
@@ -79,7 +106,7 @@ export const POST = async (request: NextRequest) => {
 
     await sendEmail({
       html: `Thanks for using Cal.ai! To get started, the app must be installed. <a href=${url} target="_blank">Click this link</a> to install it.`,
-      subject: `Re: ${body.subject}`,
+      subject: `Re: ${subject}`,
       text: `Thanks for using Cal.ai! To get started, the app must be installed. Click this link to install the Cal.ai app: ${url}`,
       to: envelope.from,
       from: aiEmail,
@@ -106,7 +133,7 @@ export const POST = async (request: NextRequest) => {
 
   if ("error" in availability) {
     await sendEmail({
-      subject: `Re: ${body.subject}`,
+      subject: `Re: ${subject}`,
       text: "Sorry, there was an error fetching your availability. Please try again.",
       to: user.email,
       from: aiEmail,
@@ -117,7 +144,7 @@ export const POST = async (request: NextRequest) => {
 
   if ("error" in eventTypes) {
     await sendEmail({
-      subject: `Re: ${body.subject}`,
+      subject: `Re: ${subject}`,
       text: "Sorry, there was an error fetching your event types. Please try again.",
       to: user.email,
       from: aiEmail,
@@ -135,8 +162,8 @@ export const POST = async (request: NextRequest) => {
     body: JSON.stringify({
       apiKey,
       userId: user.id,
-      message: parsed.text,
-      subject: parsed.subject,
+      message: parsed.text || "",
+      subject: parsed.subject || "",
       replyTo: aiEmail,
       user: {
         email: user.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/customPrisma.ts

@@ -1,7 +1,7 @@
 import type { NextMiddleware } from "next-api-middleware";
 
 import { CONSOLE_URL } from "@calcom/lib/constants";
-import { customPrisma } from "@calcom/prisma";
+import prisma, { customPrisma } from "@calcom/prisma";
 
 const LOCAL_CONSOLE_URL = process.env.NEXT_PUBLIC_CONSOLE_URL || CONSOLE_URL;
 
@@ -12,32 +12,41 @@ export const customPrismaClient: NextMiddleware = async (req, res, next) => {
   } = req;
   // If no custom api Id is provided, attach to request the regular cal.com prisma client.
   if (!key) {
-    req.prisma = customPrisma();
+    req.prisma = prisma;
     await next();
     return;
   }
 
-  // If we have a key, we check if the deployment matching the key, has a databaseUrl value set.
-  const databaseUrl = await fetch(`${LOCAL_CONSOLE_URL}/api/deployments/database?key=${key}`)
-    .then((res) => res.json())
-    .then((res) => res.databaseUrl);
+  try {
+    // If we have a key, we check if the deployment matching the key, has a databaseUrl value set.
+    const databaseUrl = await fetch(`${LOCAL_CONSOLE_URL}/api/deployments/database?key=${key}`)
+      .then((res) => res.json())
+      .then((res) => res.databaseUrl);
 
-  if (!databaseUrl) {
-    res.status(400).json({ error: "no databaseUrl set up at your instance yet" });
-    return;
-  }
-  req.prisma = customPrisma({ datasources: { db: { url: databaseUrl } } });
-  /* @note:
+    if (!databaseUrl) {
+      res.status(400).json({ error: "no databaseUrl set up at your instance yet" });
+      return;
+    }
+    req.prisma = customPrisma({ datasources: { db: { url: databaseUrl } } });
+    /* @note:
     In order to skip verifyApiKey for customPrisma requests, 
     we pass isAdmin true, and userId 0, if we detect them later, 
     we skip verifyApiKey logic and pass onto next middleware instead.
      */
-  req.isAdmin = true;
-  req.isCustomPrisma = true;
-  // We don't need the key from here and on. Prevents unrecognized key errors.
-  delete req.query.key;
-  await next();
-  await req.prisma.$disconnect();
-  // @ts-expect-error testing
-  delete req.prisma;
+    req.isAdmin = true;
+    req.isCustomPrisma = true;
+    // We don't need the key from here and on. Prevents unrecognized key errors.
+    delete req.query.key;
+    await next();
+    await req.prisma.$disconnect();
+    // @ts-expect-error testing
+    delete req.prisma;
+  } catch (err) {
+    if (req.prisma) {
+      await req.prisma.$disconnect();
+      // @ts-expect-error testing
+      delete req.prisma;
+    }
+    throw err;
+  }
 };

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/verifyApiKey.ts

@@ -4,7 +4,7 @@ import { hashAPIKey } from "@calcom/features/ee/api-keys/lib/apiKeys";
 import checkLicense from "@calcom/features/ee/common/server/checkLicense";
 import { IS_PRODUCTION } from "@calcom/lib/constants";
 
-import { isAdminGuard } from "~/lib/utils/isAdmin";
+import { isAdminGuard } from "../utils/isAdmin";
 
 // Used to check if the apiKey is not expired, could be extracted if reused. but not for now.
 export const dateNotInPast = function (date: Date) {

apps/api/lib/helpers/withMiddleware.ts

@@ -12,24 +12,29 @@ import {
   HTTP_GET_OR_POST,
   HTTP_GET_DELETE_PATCH,
 } from "./httpMethods";
+import { rateLimitApiKey } from "./rateLimitApiKey";
 import { verifyApiKey } from "./verifyApiKey";
 import { withPagination } from "./withPagination";
 
-const withMiddleware = label(
-  {
-    HTTP_GET_OR_POST,
-    HTTP_GET_DELETE_PATCH,
-    HTTP_GET,
-    HTTP_PATCH,
-    HTTP_POST,
-    HTTP_DELETE,
-    addRequestId,
-    verifyApiKey,
-    customPrismaClient,
-    extendRequest,
-    pagination: withPagination,
-    captureErrors,
-  },
+const middleware = {
+  HTTP_GET_OR_POST,
+  HTTP_GET_DELETE_PATCH,
+  HTTP_GET,
+  HTTP_PATCH,
+  HTTP_POST,
+  HTTP_DELETE,
+  addRequestId,
+  verifyApiKey,
+  rateLimitApiKey,
+  customPrismaClient,
+  extendRequest,
+  pagination: withPagination,
+  captureErrors,
+};
+
+type Middleware = keyof typeof middleware;
+
+const middlewareOrder =
   // The order here, determines the order of execution
   [
     "extendRequest",
@@ -37,8 +42,10 @@ const withMiddleware = label(
     // - Put customPrismaClient before verifyApiKey always.
     "customPrismaClient",
     "verifyApiKey",
+    "rateLimitApiKey",
     "addRequestId",
-  ] // <-- Provide a list of middleware to call automatically
-);
+  ] as Middleware[]; // <-- Provide a list of middleware to call automatically
 
-export { withMiddleware };
+const withMiddleware = label(middleware, middlewareOrder);
+
+export { withMiddleware, middleware, middlewareOrder };

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/utils/isValidBase64Image.ts

@@ -0,0 +1,4 @@
+export function isValidBase64Image(input: string): boolean {
+  const regex = /^data:image\/[^;]+;base64,(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/;
+  return regex.test(input);
+}

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/lib/validations/user.ts

@@ -4,6 +4,7 @@ import { checkUsername } from "@calcom/lib/server/checkUsername";
 import { _UserModel as User } from "@calcom/prisma/zod";
 import { iso8601 } from "@calcom/prisma/zod-utils";
 
+import { isValidBase64Image } from "~/lib/utils/isValidBase64Image";
 import { timeZone } from "~/lib/validations/shared/timeZone";
 
 // @note: These are the ONLY values allowed as weekStart. So user don't introduce bad data.
@@ -75,6 +76,7 @@ export const schemaUserBaseBodyParams = User.pick({
   theme: true,
   defaultScheduleId: true,
   locale: true,
+  hideBranding: true,
   timeFormat: true,
   brandColor: true,
   darkBrandColor: true,
@@ -95,6 +97,7 @@ const schemaUserEditParams = z.object({
   weekStart: z.nativeEnum(weekdays).optional(),
   brandColor: z.string().min(4).max(9).regex(/^#/).optional(),
   darkBrandColor: z.string().min(4).max(9).regex(/^#/).optional(),
+  hideBranding: z.boolean().optional(),
   timeZone: timeZone.optional(),
   theme: z.nativeEnum(theme).optional().nullable(),
   timeFormat: z.nativeEnum(timeFormat).optional(),
@@ -104,6 +107,7 @@ const schemaUserEditParams = z.object({
     .optional()
     .nullable(),
   locale: z.nativeEnum(locales).optional().nullable(),
+  avatar: z.string().refine(isValidBase64Image).optional(),
 });
 
 // @note: These are the values that are editable via PATCH method on the user Model,
@@ -115,6 +119,7 @@ const schemaUserCreateParams = z.object({
   weekStart: z.nativeEnum(weekdays).optional(),
   brandColor: z.string().min(4).max(9).regex(/^#/).optional(),
   darkBrandColor: z.string().min(4).max(9).regex(/^#/).optional(),
+  hideBranding: z.boolean().optional(),
   timeZone: timeZone.optional(),
   theme: z.nativeEnum(theme).optional().nullable(),
   timeFormat: z.nativeEnum(timeFormat).optional(),
@@ -125,6 +130,7 @@ const schemaUserCreateParams = z.object({
     .nullable(),
   locale: z.nativeEnum(locales).optional(),
   createdDate: iso8601.optional(),
+  avatar: z.string().refine(isValidBase64Image).optional(),
 });
 
 // @note: These are the values that are editable via PATCH method on the user Model,
@@ -157,6 +163,7 @@ export const schemaUserReadPublic = User.pick({
   defaultScheduleId: true,
   locale: true,
   timeFormat: true,
+  hideBranding: true,
   brandColor: true,
   darkBrandColor: true,
   allowDynamicBooking: true,

apps/api/lib/validations/webhook.ts

@@ -20,6 +20,7 @@ export const schemaWebhookCreateParams = z
     payloadTemplate: z.string().optional().nullable(),
     eventTypeId: z.number().optional(),
     userId: z.number().optional(),
+    secret: z.string().optional().nullable(),
     // API shouldn't mess with Apps webhooks yet (ie. Zapier)
     // appId: z.string().optional().nullable(),
   })
@@ -31,6 +32,7 @@ export const schemaWebhookEditBodyParams = schemaWebhookBaseBodyParams
   .merge(
     z.object({
       eventTriggers: z.enum(WEBHOOK_TRIGGER_EVENTS).array().optional(),
+      secret: z.string().optional().nullable(),
     })
   )
   .partial()

apps/api/package.json

@@ -13,6 +13,7 @@
     "lint": "eslint . --ignore-path .gitignore",
     "lint:fix": "eslint . --ext .ts,.js,.tsx,.jsx --fix",
     "start": "PORT=3002 next start",
+    "docker-start-api": "PORT=80 next start",
     "type-check": "tsc --pretty --noEmit"
   },
   "devDependencies": {
@@ -29,7 +30,7 @@
     "@calcom/lib": "*",
     "@calcom/prisma": "*",
     "@calcom/trpc": "*",
-    "@sentry/nextjs": "^7.20.0",
+    "@sentry/nextjs": "^7.73.0",
     "bcryptjs": "^2.4.3",
     "memory-cache": "^0.2.0",
     "next": "^13.4.6",

apps/api/pages/api/bookings/[id]/_delete.ts

@@ -56,10 +56,6 @@ import { schemaQueryIdParseInt } from "~/lib/validations/shared/queryIdTransform
  *               <td>The provided id didn't correspond to any existing booking.</td>
  *             </tr>
  *             <tr>
- *               <td>Cannot cancel past events</td>
- *               <td>The provided id matched an existing booking with a past startDate.</td>
- *             </tr>
- *             <tr>
  *               <td>User not found</td>
  *               <td>The userId did not matched an existing user.</td>
  *             </tr>

apps/api/pages/api/bookings/_post.ts

@@ -205,8 +205,8 @@ import { defaultResponder } from "@calcom/lib/server";
 async function handler(req: NextApiRequest) {
   const { userId, isAdmin } = req;
   if (isAdmin) req.userId = req.body.userId || userId;
-  const booking = await handleNewBooking(req);
-  return booking;
+
+  return await handleNewBooking(req);
 }
 
 export default defaultResponder(handler);

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,312 @@
+import type { Prisma } from "@prisma/client";
+import type { NextApiRequest } from "next";
+import type { z } from "zod";
+
+import { getCalendarCredentials, getConnectedCalendars } from "@calcom/core/CalendarManager";
+import { HttpError } from "@calcom/lib/http-error";
+import { defaultResponder } from "@calcom/lib/server";
+import type { PrismaClient } from "@calcom/prisma";
+import { credentialForCalendarServiceSelect } from "@calcom/prisma/selects/credential";
+
+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
+ */
+type DestinationCalendarType = {
+  userId?: number | null;
+  eventTypeId?: number | null;
+  credentialId: number | null;
+};
+
+type UserCredentialType = {
+  id: number;
+  appId: string | null;
+  type: string;
+  userId: number | null;
+  user: {
+    email: string;
+  } | null;
+  teamId: number | null;
+  key: Prisma.JsonValue;
+  invalid: boolean | null;
+};
+
+export async function patchHandler(req: NextApiRequest) {
+  const { userId, isAdmin, prisma, query, body } = req;
+  const { id } = schemaQueryIdParseInt.parse(query);
+  const parsedBody = schemaDestinationCalendarEditBodyParams.parse(body);
+  const assignedUserId = isAdmin ? parsedBody.userId || userId : userId;
+
+  validateIntegrationInput(parsedBody);
+  const destinationCalendarObject: DestinationCalendarType = await getDestinationCalendar(id, prisma);
+  await validateRequestAndOwnership({ destinationCalendarObject, parsedBody, assignedUserId, prisma });
+
+  const userCredentials = await getUserCredentials({
+    credentialId: destinationCalendarObject.credentialId,
+    userId: assignedUserId,
+    prisma,
+  });
+  const credentialId = await verifyCredentialsAndGetId({
+    parsedBody,
+    userCredentials,
+    currentCredentialId: destinationCalendarObject.credentialId,
+  });
+  // If the user has passed eventTypeId, we need to remove userId from the update data to make sure we don't link it to user as well
+  if (parsedBody.eventTypeId) parsedBody.userId = undefined;
+  const destinationCalendar = await prisma.destinationCalendar.update({
+    where: { id },
+    data: { ...parsedBody, credentialId },
+  });
+  return { destinationCalendar: schemaDestinationCalendarReadPublic.parse(destinationCalendar) };
+}
+
+/**
+ * Retrieves user credentials associated with a given credential ID and user ID and validates if the credentials belong to this user
+ *
+ * @param credentialId - The ID of the credential to fetch. If not provided, an error is thrown.
+ * @param userId - The user ID against which the credentials need to be verified.
+ * @param prisma - An instance of PrismaClient for database operations.
+ *
+ * @returns - An array containing the matching user credentials.
+ *
+ * @throws HttpError - If `credentialId` is not provided or no associated credentials are found in the database.
+ */
+async function getUserCredentials({
+  credentialId,
+  userId,
+  prisma,
+}: {
+  credentialId: number | null;
+  userId: number;
+  prisma: PrismaClient;
+}) {
+  if (!credentialId) {
+    throw new HttpError({
+      statusCode: 404,
+      message: `Destination calendar missing credential id`,
+    });
+  }
+  const userCredentials = await prisma.credential.findMany({
+    where: { id: credentialId, userId },
+    select: credentialForCalendarServiceSelect,
+  });
+
+  if (!userCredentials || userCredentials.length === 0) {
+    throw new HttpError({
+      statusCode: 400,
+      message: `Bad request, no associated credentials found`,
+    });
+  }
+  return userCredentials;
+}
+
+/**
+ * Verifies the provided credentials and retrieves the associated credential ID.
+ *
+ * This function checks if the `integration` and `externalId` properties from the parsed body are present.
+ * If both properties exist, it fetches the connected calendar credentials using the provided user credentials
+ * and checks for a matching external ID and integration from the list of connected calendars.
+ *
+ * If a match is found, it updates the `credentialId` with the one from the connected calendar.
+ * Otherwise, it throws an HTTP error with a 400 status indicating an invalid credential ID.
+ *
+ * If the parsed body does not contain the necessary properties, the function
+ * returns the `credentialId` from the destination calendar object.
+ *
+ * @param parsedBody - The parsed body from the incoming request, validated against a predefined schema.
+ *                     Checked if it contain properties like `integration` and `externalId`.
+ * @param userCredentials - An array of user credentials used to fetch the connected calendar credentials.
+ * @param destinationCalendarObject - An object representing the destination calendar. Primarily used
+ *                                    to fetch the default `credentialId`.
+ *
+ * @returns - The verified `credentialId` either from the matched connected calendar in case of updating the destination calendar,
+ *            or the provided destination calendar object in other cases.
+ *
+ * @throws HttpError - If no matching connected calendar is found for the given `integration` and `externalId`.
+ */
+async function verifyCredentialsAndGetId({
+  parsedBody,
+  userCredentials,
+  currentCredentialId,
+}: {
+  parsedBody: z.infer<typeof schemaDestinationCalendarEditBodyParams>;
+  userCredentials: UserCredentialType[];
+  currentCredentialId: number | null;
+}) {
+  if (parsedBody.integration && parsedBody.externalId) {
+    const calendarCredentials = getCalendarCredentials(userCredentials);
+
+    const { connectedCalendars } = await getConnectedCalendars(
+      calendarCredentials,
+      [],
+      parsedBody.externalId
+    );
+    const eligibleCalendars = connectedCalendars[0]?.calendars?.filter((calendar) => !calendar.readOnly);
+    const calendar = eligibleCalendars?.find(
+      (c) => c.externalId === parsedBody.externalId && c.integration === parsedBody.integration
+    );
+
+    if (!calendar?.credentialId)
+      throw new HttpError({
+        statusCode: 400,
+        message: "Bad request, credential id invalid",
+      });
+    return calendar?.credentialId;
+  }
+  return currentCredentialId;
+}
+
+/**
+ * Validates the request for updating a destination calendar.
+ *
+ * This function checks the validity of the provided eventTypeId against the existing destination calendar object
+ * in the sense that if the destination calendar is not linked to an event type, the eventTypeId can not be provided.
+ *
+ * It also ensures that the eventTypeId, if provided, belongs to the assigned user.
+ *
+ * @param destinationCalendarObject - An object representing the destination calendar.
+ * @param parsedBody - The parsed body from the incoming request, validated against a predefined schema.
+ * @param assignedUserId - The user ID assigned for the operation, which might be an admin or a regular user.
+ * @param prisma - An instance of PrismaClient for database operations.
+ *
+ * @throws HttpError - If the validation fails or inconsistencies are detected in the request data.
+ */
+async function validateRequestAndOwnership({
+  destinationCalendarObject,
+  parsedBody,
+  assignedUserId,
+  prisma,
+}: {
+  destinationCalendarObject: DestinationCalendarType;
+  parsedBody: z.infer<typeof schemaDestinationCalendarEditBodyParams>;
+  assignedUserId: number;
+  prisma: PrismaClient;
+}) {
+  if (parsedBody.eventTypeId) {
+    if (!destinationCalendarObject.eventTypeId) {
+      throw new HttpError({
+        statusCode: 400,
+        message: `The provided destination calendar can not be linked to an event type`,
+      });
+    }
+
+    const userEventType = await prisma.eventType.findFirst({
+      where: { id: parsedBody.eventTypeId },
+      select: { userId: true },
+    });
+
+    if (!userEventType || userEventType.userId !== assignedUserId) {
+      throw new HttpError({
+        statusCode: 404,
+        message: `Event type with ID ${parsedBody.eventTypeId} not found`,
+      });
+    }
+  }
+
+  if (!parsedBody.eventTypeId) {
+    if (destinationCalendarObject.eventTypeId) {
+      throw new HttpError({
+        statusCode: 400,
+        message: `The provided destination calendar can only be linked to an event type`,
+      });
+    }
+    if (destinationCalendarObject.userId !== assignedUserId) {
+      throw new HttpError({
+        statusCode: 403,
+        message: `Forbidden`,
+      });
+    }
+  }
+}
+
+/**
+ * Fetches the destination calendar based on the provided ID as the path parameter, specifically `credentialId` and `eventTypeId`.
+ *
+ * If no matching destination calendar is found for the provided ID, an HTTP error with a 404 status
+ * indicating that the desired destination calendar was not found is thrown.
+ *
+ * @param id - The ID of the destination calendar to be retrieved.
+ * @param prisma - An instance of PrismaClient for database operations.
+ *
+ * @returns - An object containing details of the matching destination calendar, specifically `credentialId` and `eventTypeId`.
+ *
+ * @throws HttpError - If no destination calendar matches the provided ID.
+ */
+async function getDestinationCalendar(id: number, prisma: PrismaClient) {
+  const destinationCalendarObject = await prisma.destinationCalendar.findFirst({
+    where: {
+      id,
+    },
+    select: { userId: true, eventTypeId: true, credentialId: true },
+  });
+
+  if (!destinationCalendarObject) {
+    throw new HttpError({
+      statusCode: 404,
+      message: `Destination calendar with ID ${id} not found`,
+    });
+  }
+
+  return destinationCalendarObject;
+}
+
+function validateIntegrationInput(parsedBody: z.infer<typeof schemaDestinationCalendarEditBodyParams>) {
+  if (parsedBody.integration && !parsedBody.externalId) {
+    throw new HttpError({ statusCode: 400, message: "External Id is required with integration value" });
+  }
+  if (!parsedBody.integration && parsedBody.externalId) {
+    throw new HttpError({ statusCode: 400, message: "Integration value is required with external ID" });
+  }
+}
+
+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,141 @@
+import type { NextApiRequest } from "next";
+
+import { getCalendarCredentials, getConnectedCalendars } from "@calcom/core/CalendarManager";
+import { HttpError } from "@calcom/lib/http-error";
+import { defaultResponder } from "@calcom/lib/server";
+import { credentialForCalendarServiceSelect } from "@calcom/prisma/selects/credential";
+
+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
+ *               - credentialId
+ *             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'
+ *               userId:
+ *                 type: integer
+ *                 description: 'The user 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);
+
+  const assignedUserId = isAdmin && parsedBody.userId ? parsedBody.userId : userId;
+
+  /* Check if credentialId data matches the ownership and integration passed in */
+  const userCredentials = await prisma.credential.findMany({
+    where: {
+      type: parsedBody.integration,
+      userId: assignedUserId,
+    },
+    select: credentialForCalendarServiceSelect,
+  });
+
+  if (userCredentials.length === 0)
+    throw new HttpError({
+      statusCode: 400,
+      message: "Bad request, credential id invalid",
+    });
+
+  const calendarCredentials = getCalendarCredentials(userCredentials);
+
+  const { connectedCalendars } = await getConnectedCalendars(calendarCredentials, [], parsedBody.externalId);
+
+  const eligibleCalendars = connectedCalendars[0]?.calendars?.filter((calendar) => !calendar.readOnly);
+  const calendar = eligibleCalendars?.find(
+    (c) => c.externalId === parsedBody.externalId && c.integration === parsedBody.integration
+  );
+  if (!calendar?.credentialId)
+    throw new HttpError({
+      statusCode: 400,
+      message: "Bad request, credential id invalid",
+    });
+  const credentialId = calendar.credentialId;
+
+  if (parsedBody.eventTypeId) {
+    const eventType = await prisma.eventType.findFirst({
+      where: { id: parsedBody.eventTypeId, userId: parsedBody.userId },
+    });
+    if (!eventType)
+      throw new HttpError({
+        statusCode: 400,
+        message: "Bad request, eventTypeId invalid",
+      });
+    parsedBody.userId = undefined;
+  }
+
+  const destination_calendar = await prisma.destinationCalendar.create({
+    data: { ...parsedBody, credentialId },
+  });
+
+  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]/_get.ts

@@ -51,6 +51,7 @@ export async function getHandler(req: NextApiRequest) {
       customInputs: true,
       team: { select: { slug: true } },
       users: true,
+      hosts: { select: { userId: true, isFixed: true } },
       owner: { select: { username: true, id: true } },
       children: { select: { id: true, userId: true } },
     },

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

@@ -45,6 +45,7 @@ async function getHandler(req: NextApiRequest) {
       customInputs: true,
       team: { select: { slug: true } },
       users: true,
+      hosts: { select: { userId: true, isFixed: true } },
       owner: { select: { username: true, id: true } },
       children: { select: { id: true, userId: true } },
     },

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

@@ -284,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) {
@@ -316,8 +316,9 @@ async function checkPermissions(req: NextApiRequest) {
       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" });
+  /* Admin users are required to pass in a userId or teamId */
+  if (isAdmin && (!body.userId || !body.teamId))
+    throw new HttpError({ statusCode: 400, message: "`userId` or `teamId` required" });
 }
 
 export default defaultResponder(postHandler);

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,18 +3,17 @@ 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 { slotsRouter } from "@calcom/trpc/server/routers/viewer/slots/_router";
+import { getScheduleSchema } from "@calcom/trpc/server/routers/viewer/slots/types";
+import { getAvailableSlots } from "@calcom/trpc/server/routers/viewer/slots/util";
 
 import { TRPCError } from "@trpc/server";
 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 = slotsRouter.createCaller(ctx);
   try {
+    const input = getScheduleSchema.parse(req.query);
+    return await getAvailableSlots({ ctx: await createContext({ req, res }), input });
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return await caller.getSchedule(req.query as any /* Let tRPC handle this */);
   } catch (cause) {
     if (cause instanceof TRPCError) {
       const statusCode = getHTTPStatusCodeFromError(cause);

apps/api/pages/api/users/[userId]/_patch.ts

@@ -53,6 +53,9 @@ import { schemaUserEditBodyParams, schemaUserReadPublic } from "~/lib/validation
  *               timeZone:
  *                 description: The user's time zone
  *                 type: string
+ *               hideBranding:
+ *                 description: Remove branding from the user's calendar page
+ *                 type: boolean
  *               theme:
  *                 description: Default theme for the user. Acceptable values are one of [DARK, LIGHT]
  *                 type: string
@@ -62,6 +65,9 @@ import { schemaUserEditBodyParams, schemaUserReadPublic } from "~/lib/validation
  *               locale:
  *                 description: The user's locale. Acceptable values are one of [EN, FR, IT, RU, ES, DE, PT, RO, NL, PT_BR, ES_419, KO, JA, PL, AR, IW, ZH_CH, ZH_TW, CS, SR, SV, VI]
  *                 type: string
+ *               avatar:
+ *                 description: The user's avatar, in base64 format
+ *                 type: string
  *           examples:
  *              user:
  *                summary: An example of USER
@@ -79,7 +85,7 @@ import { schemaUserEditBodyParams, schemaUserReadPublic } from "~/lib/validation
  *       - users
  *     responses:
  *       200:
- *         description: OK, user edited successfuly
+ *         description: OK, user edited successfully
  *       400:
  *         description: Bad request. User body is invalid.
  *       401:
@@ -94,9 +100,10 @@ export async function patchHandler(req: NextApiRequest) {
   if (!isAdmin && query.userId !== req.userId) throw new HttpError({ statusCode: 403, message: "Forbidden" });
 
   const body = await schemaUserEditBodyParams.parseAsync(req.body);
-  // disable role changes unless admin.
-  if (!isAdmin && body.role) {
-    body.role = undefined;
+  // disable role or branding changes unless admin.
+  if (!isAdmin) {
+    if (body.role) body.role = undefined;
+    if (body.hideBranding) body.hideBranding = undefined;
   }
 
   const userSchedules = await prisma.schedule.findMany({

apps/api/pages/api/users/_post.ts

@@ -42,6 +42,9 @@ import { schemaUserCreateBodyParams } from "~/lib/validations/user";
  *               darkBrandColor:
  *                 description: The new user's brand color for dark mode
  *                 type: string
+ *               hideBranding:
+ *                 description: Remove branding from the user's calendar page
+ *                 type: boolean
  *               weekStart:
  *                 description: Start of the week. Acceptable values are one of [SUNDAY, MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY, SATURDAY]
  *                 type: string
@@ -57,6 +60,9 @@ import { schemaUserCreateBodyParams } from "~/lib/validations/user";
  *               locale:
  *                 description: The new user's locale. Acceptable values are one of [EN, FR, IT, RU, ES, DE, PT, RO, NL, PT_BR, ES_419, KO, JA, PL, AR, IW, ZH_CH, ZH_TW, CS, SR, SV, VI]
  *                 type: string
+ *               avatar:
+ *                 description: The user's avatar, in base64 format
+ *                 type: string
  *           examples:
  *              user:
  *                summary: An example of USER

apps/api/pages/api/webhooks/[id]/_patch.ts

@@ -51,6 +51,9 @@ import { schemaWebhookEditBodyParams, schemaWebhookReadPublic } from "~/lib/vali
  *               eventTypeId:
  *                 type: number
  *                 description: The event type ID if this webhook should be associated with only that event type
+ *               secret:
+ *                 type: string
+ *                 description: The secret to verify the authenticity of the received payload
  *     tags:
  *     - webhooks
  *     externalDocs:

apps/api/pages/api/webhooks/_post.ts

@@ -49,6 +49,9 @@ import { schemaWebhookCreateBodyParams, schemaWebhookReadPublic } from "~/lib/va
  *               eventTypeId:
  *                 type: number
  *                 description: The event type ID if this webhook should be associated with only that event type
+ *               secret:
+ *                 type: string
+ *                 description: The secret to verify the authenticity of the received payload
  *     tags:
  *     - webhooks
  *     externalDocs:

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/api/test/lib/middleware/withMiddleware.test.ts

@@ -0,0 +1,17 @@
+import { describe, vi, it, expect, afterEach } from "vitest";
+
+import { middlewareOrder } from "../../../lib/helpers/withMiddleware";
+
+afterEach(() => {
+  vi.resetAllMocks();
+});
+
+// Not sure if there is much point testing this order is actually applied via an integration test:
+// It is tested internally https://github.com/htunnicliff/next-api-middleware/blob/368b12aa30e79f4bd7cfe7aacc18da263cc3de2f/lib/label.spec.ts#L62
+describe("API - withMiddleware test", () => {
+  it("Custom prisma should be before verifyApiKey", async () => {
+    const customPrismaClientIndex = middlewareOrder.indexOf("customPrismaClient");
+    const verifyApiKeyIndex = middlewareOrder.indexOf("verifyApiKey");
+    expect(customPrismaClientIndex).toBeLessThan(verifyApiKeyIndex);
+  });
+});

apps/platform/README.md

@@ -0,0 +1 @@
+Hello World

apps/web/app/layout.tsx

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

apps/web/calendso.yaml

@@ -631,8 +631,7 @@ paths:
                   type: string
                 role:
                   type: string
-                sendEmailInvitation:
-                  type: boolean
+                  
     parameters:
       - schema:
           type: string

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/AppListCard.tsx

@@ -60,14 +60,18 @@ export default function AppListCard(props: AppListCardProps) {
   const pathname = usePathname();
 
   useEffect(() => {
-    if (shouldHighlight && highlight) {
-      const timer = setTimeout(() => {
-        setHighlight(false);
+    if (shouldHighlight && highlight && searchParams !== null && pathname !== null) {
+      timeoutRef.current = setTimeout(() => {
         const _searchParams = new URLSearchParams(searchParams);
         _searchParams.delete("hl");
-        router.replace(`${pathname}?${_searchParams.toString()}`);
+        _searchParams.delete("category"); // this comes from params, not from search params
+
+        setHighlight(false);
+
+        const stringifiedSearchParams = _searchParams.toString();
+
+        router.replace(`${pathname}${stringifiedSearchParams !== "" ? `?${stringifiedSearchParams}` : ""}`);
       }, 3000);
-      timeoutRef.current = timer;
     }
     return () => {
       if (timeoutRef.current) {
@@ -75,8 +79,7 @@ export default function AppListCard(props: AppListCardProps) {
         timeoutRef.current = null;
       }
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [highlight, pathname, router, searchParams, shouldHighlight]);
 
   return (
     <div className={classNames(highlight && "dark:bg-muted bg-yellow-100")}>

apps/web/components/PageWrapper.tsx

@@ -58,7 +58,7 @@ function PageWrapper(props: AppProps) {
       <Head>
         <meta
           name="viewport"
-          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover"
         />
       </Head>
       <DefaultSeo

apps/web/components/PageWrapperAppDir.tsx

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

apps/web/components/apps/CalendarListContainer.tsx

@@ -221,6 +221,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
                             hidePlaceholder
                             isLoading={mutation.isLoading}
                             value={data.destinationCalendar?.externalId}
+                            hideAdvancedText
                           />
                         </div>
                       </div>

apps/web/components/booking/BookingListItem.tsx

@@ -32,8 +32,6 @@ import {
 } from "@calcom/ui";
 import { Ban, Check, Clock, CreditCard, MapPin, RefreshCcw, Send, X } from "@calcom/ui/components/icon";
 
-import useMeQuery from "@lib/hooks/useMeQuery";
-
 import { ChargeCardDialog } from "@components/dialog/ChargeCardDialog";
 import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
 import { RescheduleDialog } from "@components/dialog/RescheduleDialog";
@@ -45,14 +43,18 @@ type BookingItem = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][number
 type BookingItemProps = BookingItem & {
   listingStatus: BookingListingStatus;
   recurringInfo: RouterOutputs["viewer"]["bookings"]["get"]["recurringInfo"][number] | undefined;
+  loggedInUser: {
+    userId: number | undefined;
+    userTimeZone: string | undefined;
+    userTimeFormat: number | null | undefined;
+    userEmail: string | undefined;
+  };
 };
 
 function BookingListItem(booking: BookingItemProps) {
-  // Get user so we can determine 12/24 hour format preferences
-  const query = useMeQuery();
   const bookerUrl = useBookerUrl();
+  const { userId, userTimeZone, userTimeFormat, userEmail } = booking.loggedInUser;
 
-  const user = query.data;
   const {
     t,
     i18n: { language },
@@ -141,17 +143,6 @@ function BookingListItem(booking: BookingItemProps) {
       : []),
   ];
 
-  const showRecordingActions: ActionType[] = [
-    {
-      id: "view_recordings",
-      label: t("view_recordings"),
-      onClick: () => {
-        setViewRecordingsDialogIsOpen(true);
-      },
-      disabled: mutation.isLoading,
-    },
-  ];
-
   let bookedActions: ActionType[] = [
     {
       id: "cancel",
@@ -226,6 +217,7 @@ function BookingListItem(booking: BookingItemProps) {
   };
 
   const startTime = dayjs(booking.startTime)
+    .tz(userTimeZone)
     .locale(language)
     .format(isUpcoming ? "ddd, D MMM" : "D MMMM YYYY");
   const [isOpenRescheduleDialog, setIsOpenRescheduleDialog] = useState(false);
@@ -269,11 +261,19 @@ function BookingListItem(booking: BookingItemProps) {
   const bookingLink = buildBookingLink();
 
   const title = booking.title;
-  // To be used after we run query on legacy bookings
-  // const showRecordingsButtons = booking.isRecorded && isPast && isConfirmed;
 
-  const showRecordingsButtons =
-    (booking.location === "integrations:daily" || booking?.location?.trim() === "") && isPast && isConfirmed;
+  const showRecordingsButtons = !!(booking.isRecorded && isPast && isConfirmed);
+
+  const showRecordingActions: ActionType[] = [
+    {
+      id: "view_recordings",
+      label: t("view_recordings"),
+      onClick: () => {
+        setViewRecordingsDialogIsOpen(true);
+      },
+      disabled: mutation.isLoading,
+    },
+  ];
 
   return (
     <>
@@ -303,7 +303,7 @@ function BookingListItem(booking: BookingItemProps) {
           booking={booking}
           isOpenDialog={viewRecordingsDialogIsOpen}
           setIsOpenDialog={setViewRecordingsDialogIsOpen}
-          timeFormat={user?.timeFormat ?? null}
+          timeFormat={userTimeFormat ?? null}
         />
       )}
       {/* NOTE: Should refactor this dialog component as is being rendered multiple times */}
@@ -343,11 +343,11 @@ function BookingListItem(booking: BookingItemProps) {
             <div className="cursor-pointer py-4">
               <div className="text-emphasis text-sm leading-6">{startTime}</div>
               <div className="text-subtle text-sm">
-                {formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "}
-                {formatTime(booking.endTime, user?.timeFormat, user?.timeZone)}
+                {formatTime(booking.startTime, userTimeFormat, userTimeZone)} -{" "}
+                {formatTime(booking.endTime, userTimeFormat, userTimeZone)}
                 <MeetingTimeInTimezones
-                  timeFormat={user?.timeFormat}
-                  userTimezone={user?.timeZone}
+                  timeFormat={userTimeFormat}
+                  userTimezone={userTimeZone}
                   startTime={booking.startTime}
                   endTime={booking.endTime}
                   attendees={booking.attendees}
@@ -374,7 +374,12 @@ function BookingListItem(booking: BookingItemProps) {
               ) : null}
               {recurringDates !== undefined && (
                 <div className="text-muted mt-2 text-sm">
-                  <RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
+                  <RecurringBookingsTooltip
+                    userTimeFormat={userTimeFormat}
+                    userTimeZone={userTimeZone}
+                    booking={booking}
+                    recurringDates={recurringDates}
+                  />
                 </div>
               )}
             </div>
@@ -387,11 +392,11 @@ function BookingListItem(booking: BookingItemProps) {
               <div className="flex w-full items-center justify-between sm:hidden">
                 <div className="text-emphasis text-sm leading-6">{startTime}</div>
                 <div className="text-subtle pr-2 text-sm">
-                  {formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "}
-                  {formatTime(booking.endTime, user?.timeFormat, user?.timeZone)}
+                  {formatTime(booking.startTime, userTimeFormat, userTimeZone)} -{" "}
+                  {formatTime(booking.endTime, userTimeFormat, userTimeZone)}
                   <MeetingTimeInTimezones
-                    timeFormat={user?.timeFormat}
-                    userTimezone={user?.timeZone}
+                    timeFormat={userTimeFormat}
+                    userTimezone={userTimeZone}
                     startTime={booking.startTime}
                     endTime={booking.endTime}
                     attendees={booking.attendees}
@@ -416,7 +421,12 @@ function BookingListItem(booking: BookingItemProps) {
               )}
               {recurringDates !== undefined && (
                 <div className="text-muted text-sm sm:hidden">
-                  <RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
+                  <RecurringBookingsTooltip
+                    userTimeFormat={userTimeFormat}
+                    userTimeZone={userTimeZone}
+                    booking={booking}
+                    recurringDates={recurringDates}
+                  />
                 </div>
               )}
             </div>
@@ -448,7 +458,7 @@ function BookingListItem(booking: BookingItemProps) {
                 <DisplayAttendees
                   attendees={booking.attendees}
                   user={booking.user}
-                  currentEmail={user?.email}
+                  currentEmail={userEmail}
                 />
               )}
               {isCancelled && booking.rescheduled && (
@@ -462,7 +472,7 @@ function BookingListItem(booking: BookingItemProps) {
         <td className="flex w-full justify-end py-4 pl-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4 sm:pl-0">
           {isUpcoming && !isCancelled ? (
             <>
-              {isPending && user?.id === booking.user?.id && <TableActions actions={pendingActions} />}
+              {isPending && userId === booking.user?.id && <TableActions actions={pendingActions} />}
               {isConfirmed && <TableActions actions={bookedActions} />}
               {isRejected && <div className="text-subtle text-sm">{t("rejected")}</div>}
             </>
@@ -488,12 +498,16 @@ function BookingListItem(booking: BookingItemProps) {
 interface RecurringBookingsTooltipProps {
   booking: BookingItemProps;
   recurringDates: Date[];
+  userTimeZone: string | undefined;
+  userTimeFormat: number | null | undefined;
 }
 
-const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookingsTooltipProps) => {
-  // Get user so we can determine 12/24 hour format preferences
-  const query = useMeQuery();
-  const user = query.data;
+const RecurringBookingsTooltip = ({
+  booking,
+  recurringDates,
+  userTimeZone,
+  userTimeFormat,
+}: RecurringBookingsTooltipProps) => {
   const {
     t,
     i18n: { language },
@@ -525,7 +539,7 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
                     .includes(aDate.toDateString());
                 return (
                   <p key={key} className={classNames(pastOrCancelled && "line-through")}>
-                    {formatTime(aDate, user?.timeFormat, user?.timeZone)}
+                    {formatTime(aDate, userTimeFormat, userTimeZone)}
                     {" - "}
                     {dayjs(aDate).locale(language).format("D MMMM YYYY")}
                   </p>
@@ -538,7 +552,7 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
                 />
                 <p className="mt-1 pl-5 text-xs">
                   {booking.status === BookingStatus.ACCEPTED
-                    ? `${t("event_remaining", {
+                    ? `${t("event_remaining_other", {
                         count: recurringCount,
                       })}`
                     : getEveryFreqFor({

apps/web/components/booking/CancelBooking.tsx

@@ -1,4 +1,4 @@
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { useCallback, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -26,9 +26,6 @@ type Props = {
 };
 
 export default function CancelBooking(props: Props) {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const asPath = `${pathname}?${searchParams.toString()}`;
   const [cancellationReason, setCancellationReason] = useState<string>("");
   const { t } = useLocale();
   const router = useRouter();
@@ -44,6 +41,7 @@ export default function CancelBooking(props: Props) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+
   return (
     <>
       {error && (
@@ -100,7 +98,8 @@ export default function CancelBooking(props: Props) {
                   });
 
                   if (res.status >= 200 && res.status < 300) {
-                    router.replace(asPath);
+                    // tested by apps/web/playwright/booking-pages.e2e.ts
+                    router.refresh();
                   } else {
                     setLoading(false);
                     setError(

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/EditLocationDialog.tsx

@@ -356,9 +356,9 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                             onChange={(val) => {
                               if (val) {
                                 locationFormMethods.setValue("locationType", val.value);
-                                if (val.credential) {
-                                  locationFormMethods.setValue("credentialId", val.credential.id);
-                                  locationFormMethods.setValue("teamName", val.credential.team?.name);
+                                if (!!val.credentialId) {
+                                  locationFormMethods.setValue("credentialId", val.credentialId);
+                                  locationFormMethods.setValue("teamName", val.teamName);
                                 }
 
                                 locationFormMethods.unregister([

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,11 +130,13 @@ 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">
-              <Label className="font-medium">{t("add_to_calendar")}</Label>
+              <div>
+                <Label className="text-emphasis mb-0 font-medium">{t("add_to_calendar")}</Label>
+              </div>
               <Link
                 href="/apps/categories/calendar"
                 target="_blank"
@@ -142,21 +144,20 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                 {t("add_another_calendar")}
               </Link>
             </div>
-            <div className="-mt-1 w-full">
-              <Controller
-                control={formMethods.control}
-                name="destinationCalendar"
-                defaultValue={eventType.destinationCalendar || undefined}
-                render={({ field: { onChange, value } }) => (
-                  <DestinationCalendarSelector
-                    destinationCalendar={eventType.destinationCalendar}
-                    value={value ? value.externalId : undefined}
-                    onChange={onChange}
-                    hidePlaceholder
-                  />
-                )}
-              />
-            </div>
+            <Controller
+              control={formMethods.control}
+              name="destinationCalendar"
+              defaultValue={eventType.destinationCalendar || undefined}
+              render={({ field: { onChange, value } }) => (
+                <DestinationCalendarSelector
+                  destinationCalendar={eventType.destinationCalendar}
+                  value={value ? value.externalId : undefined}
+                  onChange={onChange}
+                  hidePlaceholder
+                  hideAdvancedText
+                />
+              )}
+            />
             <p className="text-subtle text-sm">{t("select_which_cal")}</p>
           </div>
         )}
@@ -182,9 +183,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 +214,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 +232,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 +250,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 +265,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 +291,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 +315,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 +358,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 +385,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 +401,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}
@@ -427,6 +434,23 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           </>
         )}
       />
+      <Controller
+        name="lockTimeZoneToggleOnBookingPage"
+        control={formMethods.control}
+        defaultValue={eventType.lockTimeZoneToggleOnBookingPage}
+        render={({ field: { value, onChange } }) => (
+          <SettingsToggle
+            labelClassName="text-sm"
+            toggleSwitchAtTheEnd={true}
+            switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
+            title={t("lock_timezone_toggle_on_booking_page")}
+            {...shouldLockDisableProps("lockTimeZoneToggleOnBookingPage")}
+            description={t("description_lock_timezone_toggle_on_booking_page")}
+            checked={value}
+            onCheckedChange={(e) => onChange(e)}
+          />
+        )}
+      />
       {allowDisablingAttendeeConfirmationEmails(workflows) && (
         <>
           <Controller
@@ -435,8 +459,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 +484,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

@@ -7,7 +7,6 @@ import type { UseFormRegisterReturn } from "react-hook-form";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import type { SingleValue } from "react-select";
 
-import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
 import { classNames } from "@calcom/lib";
 import type { DurationType } from "@calcom/lib/convertToNewDurationType";
 import convertToNewDurationType from "@calcom/lib/convertToNewDurationType";
@@ -141,17 +140,6 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
     defaultValue: periodType?.type,
   });
 
-  const { shouldLockIndicator, shouldLockDisableProps } = useLockedFieldsManager(
-    eventType,
-    t("locked_fields_admin_description"),
-    t("locked_fields_member_description")
-  );
-
-  const bookingLimitsLocked = shouldLockDisableProps("bookingLimits");
-  const durationLimitsLocked = shouldLockDisableProps("durationLimits");
-  const periodTypeLocked = shouldLockDisableProps("periodType");
-  const offsetStartLockedProps = shouldLockDisableProps("offsetStart");
-
   const optionsPeriod = [
     { value: 1, label: t("calendar_days") },
     { value: 0, label: t("business_days") },
@@ -171,13 +159,10 @@ 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">
-              {t("before_event")}
-              {shouldLockIndicator("bookingLimits")}
-            </Label>
+            <Label htmlFor="beforeBufferTime">{t("before_event")}</Label>
             <Controller
               name="beforeBufferTime"
               control={formMethods.control}
@@ -196,7 +181,6 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                 return (
                   <Select
                     isSearchable={false}
-                    isDisabled={shouldLockDisableProps("bookingLimits").disabled}
                     onChange={(val) => {
                       if (val) onChange(val.value);
                     }}
@@ -210,10 +194,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
             />
           </div>
           <div className="w-full">
-            <Label htmlFor="afterBufferTime">
-              {t("after_event")}
-              {shouldLockIndicator("bookingLimits")}
-            </Label>
+            <Label htmlFor="afterBufferTime">{t("after_event")}</Label>
             <Controller
               name="afterBufferTime"
               control={formMethods.control}
@@ -232,7 +213,6 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                 return (
                   <Select
                     isSearchable={false}
-                    isDisabled={shouldLockDisableProps("bookingLimits").disabled}
                     onChange={(val) => {
                       if (val) onChange(val.value);
                     }}
@@ -248,20 +228,11 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
         </div>
         <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="minimumBookingNotice">
-              {t("minimum_booking_notice")}
-              {shouldLockIndicator("minimumBookingNotice")}
-            </Label>
-            <MinimumBookingNoticeInput
-              disabled={shouldLockDisableProps("minimumBookingNotice").disabled}
-              {...formMethods.register("minimumBookingNotice")}
-            />
+            <Label htmlFor="minimumBookingNotice">{t("minimum_booking_notice")}</Label>
+            <MinimumBookingNoticeInput {...formMethods.register("minimumBookingNotice")} />
           </div>
           <div className="w-full">
-            <Label htmlFor="slotInterval">
-              {t("slot_interval")}
-              {shouldLockIndicator("slotInterval")}
-            </Label>
+            <Label htmlFor="slotInterval">{t("slot_interval")}</Label>
             <Controller
               name="slotInterval"
               control={formMethods.control}
@@ -279,7 +250,6 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                 return (
                   <Select
                     isSearchable={false}
-                    isDisabled={shouldLockDisableProps("slotInterval").disabled}
                     onChange={(val) => {
                       formMethods.setValue("slotInterval", val && (val.value || 0) > 0 ? val.value : null);
                     }}
@@ -303,8 +273,8 @@ 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")}
               checked={isChecked}
               onCheckedChange={(active) => {
@@ -317,17 +287,12 @@ 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">
-                <IntervalLimitsManager
-                  disabled={bookingLimitsLocked.disabled}
-                  propertyName="bookingLimits"
-                  defaultLimit={1}
-                  step={1}
-                />
+              <div className="border-subtle rounded-b-lg border border-t-0 p-6">
+                <IntervalLimitsManager propertyName="bookingLimits" defaultLimit={1} step={1} />
               </div>
             </SettingsToggle>
           );
@@ -340,15 +305,15 @@ 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"
               title={t("limit_total_booking_duration")}
               description={t("limit_total_booking_duration_description")}
-              {...durationLimitsLocked}
               checked={isChecked}
               onCheckedChange={(active) => {
                 if (active) {
@@ -359,11 +324,10 @@ 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}
-                  disabled={durationLimitsLocked.disabled}
                   step={15}
                   textFieldSuffix={t("minutes")}
                 />
@@ -380,25 +344,23 @@ 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"
               title={t("limit_future_bookings")}
               description={t("limit_future_bookings_description")}
-              {...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}
                   onValueChange={(val) => formMethods.setValue("periodType", val as PeriodType)}>
-                  {PERIOD_TYPES.filter((opt) =>
-                    periodTypeLocked.disabled ? watchPeriodType === opt.type : true
-                  ).map((period) => {
+                  {PERIOD_TYPES.map((period) => {
                     if (period.type === "UNLIMITED") return null;
                     return (
                       <div
@@ -407,14 +369,13 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                           watchPeriodType === "UNLIMITED" && "pointer-events-none opacity-30"
                         )}
                         key={period.type}>
-                        {!periodTypeLocked.disabled && (
-                          <RadioGroup.Item
-                            id={period.type}
-                            value={period.type}
-                            className="min-w-4 bg-default border-default flex h-4 w-4 cursor-pointer items-center rounded-full border focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
-                            <RadioGroup.Indicator className="after:bg-inverted relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full" />
-                          </RadioGroup.Item>
-                        )}
+                        <RadioGroup.Item
+                          id={period.type}
+                          value={period.type}
+                          className="min-w-4 bg-default border-default flex h-4 w-4 cursor-pointer items-center rounded-full border focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
+                          <RadioGroup.Indicator className="after:bg-inverted relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full" />
+                        </RadioGroup.Item>
+
                         {period.prefix ? <span>{period.prefix}&nbsp;</span> : null}
                         {period.type === "ROLLING" && (
                           <div className="flex items-center">
@@ -423,14 +384,12 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                               type="number"
                               className="border-default my-0 block w-16 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                               placeholder="30"
-                              disabled={periodTypeLocked.disabled}
                               {...formMethods.register("periodDays", { valueAsNumber: true })}
                               defaultValue={eventType.periodDays || 30}
                             />
                             <Select
                               options={optionsPeriod}
                               isSearchable={false}
-                              isDisabled={periodTypeLocked.disabled}
                               onChange={(opt) => {
                                 formMethods.setValue(
                                   "periodCountCalendarDays",
@@ -455,7 +414,6 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                                 <DateRangePicker
                                   startDate={formMethods.getValues("periodDates").startDate}
                                   endDate={formMethods.getValues("periodDates").endDate}
-                                  disabled={periodTypeLocked.disabled}
                                   onDatesChange={({ startDate, endDate }) => {
                                     formMethods.setValue("periodDates", {
                                       startDate,
@@ -478,15 +436,15 @@ 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"
         title={t("offset_toggle")}
         description={t("offset_toggle_description")}
-        {...offsetStartLockedProps}
         checked={offsetToggle}
         onCheckedChange={(active) => {
           setOffsetToggle(active);
@@ -494,11 +452,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"
-            {...offsetStartLockedProps}
+            containerClassName="max-w-80"
             label={t("offset_start")}
             {...formMethods.register("offsetStart")}
             addOnSuffix={<>{t("minutes")}</>}

apps/web/components/eventtype/EventSetupTab.tsx

@@ -1,27 +1,22 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { isValidPhoneNumber } from "libphonenumber-js";
+import { ErrorMessage } from "@hookform/error-message";
 import { Trans } from "next-i18next";
 import Link from "next/link";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useEffect, useState } from "react";
-import { Controller, useForm, useFormContext } from "react-hook-form";
+import { Controller, useFormContext, useFieldArray } from "react-hook-form";
 import type { MultiValue } from "react-select";
-import { z } from "zod";
 
 import type { EventLocationType } from "@calcom/app-store/locations";
-import { getEventLocationType, MeetLocationType, LocationType } from "@calcom/app-store/locations";
+import { getEventLocationType, MeetLocationType } from "@calcom/app-store/locations";
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
-import { classNames } from "@calcom/lib";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import invertLogoOnDark from "@calcom/lib/invertLogoOnDark";
 import { md } from "@calcom/lib/markdownIt";
 import { slugify } from "@calcom/lib/slugify";
 import turndown from "@calcom/lib/turndownService";
 import {
-  Button,
   Label,
   Select,
   SettingsToggle,
@@ -30,11 +25,15 @@ import {
   Editor,
   SkeletonContainer,
   SkeletonText,
+  Input,
+  PhoneInput,
+  Button,
+  showToast,
 } from "@calcom/ui";
-import { Edit2, Check, X, Plus } from "@calcom/ui/components/icon";
+import { Plus, X, Check, CornerDownRight } from "@calcom/ui/components/icon";
 
-import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
-import type { SingleValueLocationOption, LocationOption } from "@components/ui/form/LocationSelect";
+import CheckboxField from "@components/ui/form/CheckboxField";
+import type { SingleValueLocationOption } from "@components/ui/form/LocationSelect";
 import LocationSelect from "@components/ui/form/LocationSelect";
 
 const getLocationFromType = (
@@ -114,9 +113,6 @@ export const EventSetupTab = (
   const { t } = useLocale();
   const formMethods = useFormContext<FormValues>();
   const { eventType, team, destinationCalendar } = props;
-  const [showLocationModal, setShowLocationModal] = useState(false);
-  const [editingLocationType, setEditingLocationType] = useState<string>("");
-  const [selectedLocation, setSelectedLocation] = useState<LocationOption | undefined>(undefined);
   const [multipleDuration, setMultipleDuration] = useState(eventType.metadata?.multipleDuration);
   const orgBranding = useOrgBranding();
   const seatsEnabled = formMethods.watch("seatsPerTimeSlotEnabled");
@@ -150,83 +146,6 @@ export const EventSetupTab = (
     selectedMultipleDuration.find((opt) => opt.value === eventType.length) ?? null
   );
 
-  const openLocationModal = (type: EventLocationType["type"], address = "") => {
-    const option = getLocationFromType(type, locationOptions);
-    if (option && option.value === LocationType.InPerson) {
-      const inPersonOption = {
-        ...option,
-        address,
-      };
-      setSelectedLocation(inPersonOption);
-    } else {
-      setSelectedLocation(option);
-    }
-    setShowLocationModal(true);
-  };
-
-  const removeLocation = (selectedLocation: (typeof eventType.locations)[number]) => {
-    formMethods.setValue(
-      "locations",
-      formMethods.getValues("locations").filter((location) => {
-        if (location.type === LocationType.InPerson) {
-          return location.address !== selectedLocation.address;
-        }
-        return location.type !== selectedLocation.type;
-      }),
-      { shouldValidate: true }
-    );
-  };
-
-  const saveLocation = (newLocationType: EventLocationType["type"], details = {}) => {
-    const locationType = editingLocationType !== "" ? editingLocationType : newLocationType;
-    const existingIdx = formMethods.getValues("locations").findIndex((loc) => locationType === loc.type);
-    if (existingIdx !== -1) {
-      const copy = formMethods.getValues("locations");
-      if (editingLocationType !== "") {
-        copy[existingIdx] = {
-          ...details,
-          type: newLocationType,
-        };
-      }
-
-      formMethods.setValue("locations", [
-        ...copy,
-        ...(newLocationType === LocationType.InPerson && editingLocationType === ""
-          ? [{ ...details, type: newLocationType }]
-          : []),
-      ]);
-    } else {
-      formMethods.setValue(
-        "locations",
-        formMethods.getValues("locations").concat({ type: newLocationType, ...details })
-      );
-    }
-
-    setEditingLocationType("");
-    setShowLocationModal(false);
-  };
-
-  const locationFormSchema = z.object({
-    locationType: z.string(),
-    locationAddress: z.string().optional(),
-    displayLocationPublicly: z.boolean().optional(),
-    locationPhoneNumber: z
-      .string()
-      .refine((val) => isValidPhoneNumber(val))
-      .optional(),
-    locationLink: z.string().url().optional(), // URL validates as new URL() - which requires HTTPS:// In the input field
-  });
-
-  const locationFormMethods = useForm<{
-    locationType: EventLocationType["type"];
-    locationPhoneNumber?: string;
-    locationAddress?: string; // TODO: We should validate address or fetch the address from googles api to see if its valid?
-    locationLink?: string; // Currently this only accepts links that are HTTPS://
-    displayLocationPublicly?: boolean;
-  }>({
-    resolver: zodResolver(locationFormSchema),
-  });
-
   const { isChildrenManagedEventType, isManagedEventType, shouldLockIndicator, shouldLockDisableProps } =
     useLockedFieldsManager(
       eventType,
@@ -236,6 +155,15 @@ export const EventSetupTab = (
 
   const Locations = () => {
     const { t } = useLocale();
+    const {
+      fields: locationFields,
+      append,
+      remove,
+      update: updateLocationField,
+    } = useFieldArray({
+      control: formMethods.control,
+      name: "locations",
+    });
 
     const [animationRef] = useAutoAnimate<HTMLUListElement>();
 
@@ -254,131 +182,270 @@ export const EventSetupTab = (
 
     const { locationDetails, locationAvailable } = getLocationInfo(props);
 
+    const LocationInput = (props: {
+      eventLocationType: EventLocationType;
+      defaultValue?: string;
+      index: number;
+    }) => {
+      const { eventLocationType, index, ...remainingProps } = props;
+
+      if (eventLocationType?.organizerInputType === "text") {
+        const { defaultValue, ...rest } = remainingProps;
+
+        return (
+          <Controller
+            name={`locations.${index}.${eventLocationType.defaultValueVariable}`}
+            control={formMethods.control}
+            defaultValue={defaultValue}
+            render={({ field: { onChange, value } }) => {
+              return (
+                <Input
+                  name={`locations[${index}].${eventLocationType.defaultValueVariable}`}
+                  placeholder={t(eventLocationType.organizerInputPlaceholder || "")}
+                  type="text"
+                  required
+                  onChange={onChange}
+                  value={value}
+                  className="my-0"
+                  {...rest}
+                />
+              );
+            }}
+          />
+        );
+      } else if (eventLocationType?.organizerInputType === "phone") {
+        const { defaultValue, ...rest } = remainingProps;
+
+        return (
+          <Controller
+            name={`locations.${index}.${eventLocationType.defaultValueVariable}`}
+            control={formMethods.control}
+            defaultValue={defaultValue}
+            render={({ field: { onChange, value } }) => {
+              return (
+                <PhoneInput
+                  required
+                  placeholder={t(eventLocationType.organizerInputPlaceholder || "")}
+                  name={`locations[${index}].${eventLocationType.defaultValueVariable}`}
+                  value={value}
+                  onChange={onChange}
+                  {...rest}
+                />
+              );
+            }}
+          />
+        );
+      }
+      return null;
+    };
+
+    const [showEmptyLocationSelect, setShowEmptyLocationSelect] = useState(false);
+    const [selectedNewOption, setSelectedNewOption] = useState<SingleValueLocationOption | null>(null);
+
     return (
       <div className="w-full">
-        {validLocations.length === 0 && (
-          <div className="flex">
-            <LocationSelect
-              placeholder={t("select")}
-              options={locationOptions}
-              isDisabled={shouldLockDisableProps("locations").disabled}
-              defaultValue={defaultValue}
-              isSearchable={false}
-              className="block w-full min-w-0 flex-1 rounded-sm text-sm"
-              menuPlacement="auto"
-              onChange={(e: SingleValueLocationOption) => {
-                if (e?.value) {
-                  const newLocationType = e.value;
-                  const eventLocationType = getEventLocationType(newLocationType);
-                  if (!eventLocationType) {
-                    return;
-                  }
-                  locationFormMethods.setValue("locationType", newLocationType);
-                  if (eventLocationType.organizerInputType) {
-                    openLocationModal(newLocationType);
-                  } else {
-                    saveLocation(newLocationType);
-                  }
-                }
-              }}
-            />
-          </div>
-        )}
-        {validLocations.length > 0 && (
-          <ul ref={animationRef}>
-            {validLocations.map((location, index) => {
-              const eventLocationType = getEventLocationType(location.type);
-              if (!eventLocationType) {
-                return null;
-              }
+        <ul ref={animationRef} className="space-y-2">
+          {locationFields.map((field, index) => {
+            const eventLocationType = getEventLocationType(field.type);
+            const defaultLocation = field;
 
-              const eventLabel =
-                location[eventLocationType.defaultValueVariable] || t(eventLocationType.label);
-              return (
-                <li
-                  key={`${location.type}${index}`}
-                  className="border-default text-default mb-2 h-9 rounded-md border px-2 py-1.5 hover:cursor-pointer">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center">
-                      <img
-                        src={eventLocationType.iconUrl}
-                        className={classNames(
-                          "h-4 w-4",
-                          classNames(invertLogoOnDark(eventLocationType.iconUrl))
-                        )}
-                        alt={`${eventLocationType.label} logo`}
-                      />
-                      <span className="ms-1 line-clamp-1 text-sm">{`${eventLabel} ${
-                        location.teamName ? `(${location.teamName})` : ""
-                      }`}</span>
+            const option = getLocationFromType(field.type, locationOptions);
+
+            return (
+              <li key={field.id}>
+                <div className="flex w-full items-center">
+                  <LocationSelect
+                    name={`locations[${index}].type`}
+                    placeholder={t("select")}
+                    options={locationOptions}
+                    isDisabled={shouldLockDisableProps("locations").disabled}
+                    defaultValue={option}
+                    isSearchable={false}
+                    className="block min-w-0 flex-1 rounded-sm text-sm"
+                    menuPlacement="auto"
+                    onChange={(e: SingleValueLocationOption) => {
+                      if (e?.value) {
+                        const newLocationType = e.value;
+                        const eventLocationType = getEventLocationType(newLocationType);
+                        if (!eventLocationType) {
+                          return;
+                        }
+                        const canAddLocation =
+                          eventLocationType.organizerInputType ||
+                          !validLocations.find((location) => location.type === newLocationType);
+
+                        if (canAddLocation) {
+                          updateLocationField(index, {
+                            type: newLocationType,
+                            ...(e.credentialId && {
+                              credentialId: e.credentialId,
+                              teamName: e.teamName,
+                            }),
+                          });
+                        } else {
+                          updateLocationField(index, {
+                            type: field.type,
+                            ...(field.credentialId && {
+                              credentialId: field.credentialId,
+                              teamName: field.teamName,
+                            }),
+                          });
+                          showToast(t("location_already_exists"), "warning");
+                        }
+                      }
+                    }}
+                  />
+                  <button
+                    data-testid={`delete-locations.${index}.type`}
+                    className="min-h-9 block h-9 px-2"
+                    type="button"
+                    onClick={() => remove(index)}
+                    aria-label={t("remove")}>
+                    <div className="h-4 w-4">
+                      <X className="border-l-1 hover:text-emphasis text-subtle h-4 w-4" />
                     </div>
-                    <div className="flex">
-                      <button
-                        type="button"
-                        onClick={() => {
-                          locationFormMethods.setValue("locationType", location.type);
-                          locationFormMethods.unregister("locationLink");
-                          if (location.type === LocationType.InPerson) {
-                            locationFormMethods.setValue("locationAddress", location.address);
-                          } else {
-                            locationFormMethods.unregister("locationAddress");
+                  </button>
+                </div>
+
+                {eventLocationType?.organizerInputType && (
+                  <div className="mt-2 space-y-2">
+                    <div className="w-full">
+                      <div className="flex gap-2">
+                        <div className="flex items-center justify-center">
+                          <CornerDownRight className="h-4 w-4" />
+                        </div>
+                        <LocationInput
+                          defaultValue={
+                            defaultLocation
+                              ? defaultLocation[eventLocationType.defaultValueVariable]
+                              : undefined
                           }
-                          locationFormMethods.unregister("locationPhoneNumber");
-                          setEditingLocationType(location.type);
-                          openLocationModal(location.type, location.address);
+                          eventLocationType={eventLocationType}
+                          index={index}
+                        />
+                      </div>
+                      <ErrorMessage
+                        errors={formMethods.formState.errors.locations?.[index]}
+                        name={eventLocationType.defaultValueVariable}
+                        className="text-error my-1 ml-6 text-sm"
+                        as="div"
+                        id="location-error"
+                      />
+                    </div>
+                    <div className="ml-6">
+                      <CheckboxField
+                        name={`locations[${index}].displayLocationPublicly`}
+                        data-testid="display-location"
+                        defaultChecked={defaultLocation?.displayLocationPublicly}
+                        description={t("display_location_label")}
+                        onChange={(e) => {
+                          const fieldValues = formMethods.getValues().locations[index];
+                          updateLocationField(index, {
+                            ...fieldValues,
+                            displayLocationPublicly: e.target.checked,
+                          });
                         }}
-                        aria-label={t("edit")}
-                        className="hover:text-emphasis text-subtle mr-1 p-1">
-                        <Edit2 className="h-4 w-4" />
-                      </button>
-                      <button type="button" onClick={() => removeLocation(location)} aria-label={t("remove")}>
-                        <X className="border-l-1 hover:text-emphasis text-subtle h-6 w-6 pl-1 " />
-                      </button>
+                        informationIconText={t("display_location_info_badge")}
+                      />
                     </div>
                   </div>
-                </li>
-              );
-            })}
-            {validLocations.some(
-              (location) =>
-                location.type === MeetLocationType && destinationCalendar?.integration !== "google_calendar"
-            ) && (
-              <div className="text-default flex text-sm">
-                <Check className="mr-1.5 mt-0.5 h-2 w-2.5" />
-                <Trans i18nKey="event_type_requres_google_cal">
-                  <p>
-                    The “Add to calendar” for this event type needs to be a Google Calendar for Meet to work.
-                    Change it{" "}
-                    <Link
-                      href={`${CAL_URL}/event-types/${eventType.id}?tabName=advanced`}
-                      className="underline">
-                      here.
-                    </Link>{" "}
-                  </p>
-                </Trans>
-              </div>
-            )}
-            {isChildrenManagedEventType && !locationAvailable && locationDetails && (
-              <p className="pl-1 text-sm leading-none text-red-600">
-                {t("app_not_connected", { appName: locationDetails.name })}{" "}
-                <a className="underline" href={`${CAL_URL}/apps/${locationDetails.slug}`}>
-                  {t("connect_now")}
-                </a>
-              </p>
-            )}
-            {validLocations.length > 0 && !isManagedEventType && !isChildrenManagedEventType && (
-              <li>
-                <Button
-                  data-testid="add-location"
-                  StartIcon={Plus}
-                  color="minimal"
-                  onClick={() => setShowLocationModal(true)}>
-                  {t("add_location")}
-                </Button>
+                )}
               </li>
-            )}
-          </ul>
-        )}
+            );
+          })}
+          {(validLocations.length === 0 || showEmptyLocationSelect) && (
+            <div className="flex">
+              <LocationSelect
+                defaultMenuIsOpen={showEmptyLocationSelect}
+                autoFocus
+                placeholder={t("select")}
+                options={locationOptions}
+                value={selectedNewOption}
+                isDisabled={shouldLockDisableProps("locations").disabled}
+                defaultValue={defaultValue}
+                isSearchable={false}
+                className="block w-full min-w-0 flex-1 rounded-sm text-sm"
+                menuPlacement="auto"
+                onChange={(e: SingleValueLocationOption) => {
+                  if (e?.value) {
+                    const newLocationType = e.value;
+                    const eventLocationType = getEventLocationType(newLocationType);
+                    if (!eventLocationType) {
+                      return;
+                    }
+
+                    const canAppendLocation =
+                      eventLocationType.organizerInputType ||
+                      !validLocations.find((location) => location.type === newLocationType);
+
+                    if (canAppendLocation) {
+                      append({
+                        type: newLocationType,
+                        ...(e.credentialId && {
+                          credentialId: e.credentialId,
+                          teamName: e.teamName,
+                        }),
+                      });
+                      setSelectedNewOption(e);
+                    } else {
+                      showToast(t("location_already_exists"), "warning");
+                      setSelectedNewOption(null);
+                    }
+                  }
+                }}
+              />
+            </div>
+          )}
+          {validLocations.some(
+            (location) =>
+              location.type === MeetLocationType && destinationCalendar?.integration !== "google_calendar"
+          ) && (
+            <div className="text-default flex items-center text-sm">
+              <div className="mr-1.5 h-3 w-3">
+                <Check className="h-3 w-3" />
+              </div>
+              <Trans i18nKey="event_type_requres_google_cal">
+                <p>
+                  The “Add to calendar” for this event type needs to be a Google Calendar for Meet to work.
+                  Change it{" "}
+                  <Link
+                    href={`${CAL_URL}/event-types/${eventType.id}?tabName=advanced`}
+                    className="underline">
+                    here.
+                  </Link>{" "}
+                </p>
+              </Trans>
+            </div>
+          )}
+          {isChildrenManagedEventType && !locationAvailable && locationDetails && (
+            <p className="pl-1 text-sm leading-none text-red-600">
+              {t("app_not_connected", { appName: locationDetails.name })}{" "}
+              <a className="underline" href={`${CAL_URL}/apps/${locationDetails.slug}`}>
+                {t("connect_now")}
+              </a>
+            </p>
+          )}
+          {validLocations.length > 0 && !isManagedEventType && !isChildrenManagedEventType && (
+            <li>
+              <Button
+                data-testid="add-location"
+                StartIcon={Plus}
+                color="minimal"
+                onClick={() => setShowEmptyLocationSelect(true)}>
+                {t("add_location")}
+              </Button>
+            </li>
+          )}
+        </ul>
+        <p className="text-default mt-2 text-sm">
+          <Trans i18nKey="cant_find_the_right_video_app_visit_our_app_store">
+            Can&apos;t find the right video app? Visit our
+            <Link className="cursor-pointer text-blue-500 underline" href="/apps/categories/video">
+              App Store
+            </Link>
+            .
+          </Trans>
+        </p>
       </div>
     );
   };
@@ -392,7 +459,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 +498,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 +594,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")}
@@ -542,33 +609,6 @@ export const EventSetupTab = (
             />
           </div>
         </div>
-
-        {/* We portal this modal so we can submit the form inside. Otherwise we get issues submitting two forms at once  */}
-        <EditLocationDialog
-          isOpenDialog={showLocationModal}
-          setShowLocationModal={setShowLocationModal}
-          saveLocation={saveLocation}
-          defaultValues={formMethods.getValues("locations")}
-          selection={
-            selectedLocation
-              ? selectedLocation.address
-                ? {
-                    value: selectedLocation.value,
-                    label: t(selectedLocation.label),
-                    icon: selectedLocation.icon,
-                    address: selectedLocation.address,
-                  }
-                : {
-                    value: selectedLocation.value,
-                    label: t(selectedLocation.label),
-                    icon: selectedLocation.icon,
-                  }
-              : undefined
-          }
-          setSelectedLocation={setSelectedLocation}
-          setEditingLocationType={setEditingLocationType}
-          teamId={eventType.team?.id}
-        />
       </div>
     </div>
   );

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)}
               />

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/getting-started/steps-views/UserProfile.tsx

@@ -3,12 +3,13 @@ import type { FormEvent } from "react";
 import { useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 
-import OrganizationAvatar from "@calcom/features/ee/organizations/components/OrganizationAvatar";
+import OrganizationMemberAvatar from "@calcom/features/ee/organizations/components/OrganizationMemberAvatar";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { md } from "@calcom/lib/markdownIt";
 import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import turndown from "@calcom/lib/turndownService";
 import { trpc } from "@calcom/trpc/react";
+import type { Ensure } from "@calcom/types/utils";
 import { Button, Editor, ImageUploader, Label, showToast } from "@calcom/ui";
 import { ArrowRight } from "@calcom/ui/components/icon";
 
@@ -96,16 +97,19 @@ const UserProfile = () => {
     },
   ];
 
+  const organization =
+    user.organization && user.organization.id
+      ? {
+          ...(user.organization as Ensure<typeof user.organization, "id">),
+          slug: user.organization.slug || null,
+          requestedSlug: user.organization.metadata?.requestedSlug || null,
+        }
+      : null;
   return (
     <form onSubmit={onSubmit}>
       <div className="flex flex-row items-center justify-start rtl:justify-end">
         {user && (
-          <OrganizationAvatar
-            alt={user.username || "user avatar"}
-            size="lg"
-            imageSrc={imageSrc}
-            organizationSlug={user.organization?.slug}
-          />
+          <OrganizationMemberAvatar size="lg" user={user} previewSrc={imageSrc} organization={organization} />
         )}
         <input
           ref={avatarRef}

apps/web/components/team/screens/Team.tsx

@@ -5,11 +5,15 @@ import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { md } from "@calcom/lib/markdownIt";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import type { TeamWithMembers } from "@calcom/lib/server/queries/teams";
-import { Avatar } from "@calcom/ui";
+
+import { UserAvatar } from "@components/ui/avatar/UserAvatar";
 
 type TeamType = Omit<NonNullable<TeamWithMembers>, "inviteToken">;
 type MembersType = TeamType["members"];
-type MemberType = Pick<MembersType[number], "id" | "name" | "bio" | "username"> & { safeBio: string | null };
+type MemberType = Pick<MembersType[number], "id" | "name" | "bio" | "username" | "organizationId"> & {
+  safeBio: string | null;
+  orgOrigin: string;
+};
 
 const Member = ({ member, teamName }: { member: MemberType; teamName: string | null }) => {
   const routerQuery = useRouterQuery();
@@ -20,9 +24,11 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
   const { slug: _slug, orgSlug: _orgSlug, user: _user, ...queryParamsToForward } = routerQuery;
 
   return (
-    <Link key={member.id} href={{ pathname: `/${member.username}`, query: queryParamsToForward }}>
+    <Link
+      key={member.id}
+      href={{ pathname: `${member.orgOrigin}/${member.username}`, query: queryParamsToForward }}>
       <div className="sm:min-w-80 sm:max-w-80 bg-default hover:bg-muted border-subtle group flex min-h-full flex-col space-y-2 rounded-md border p-4 hover:cursor-pointer">
-        <Avatar size="md" alt={member.name || ""} imageSrc={`/${member.username}/avatar.png`} />
+        <UserAvatar size="md" user={member} />
         <section className="mt-2 line-clamp-4 w-full space-y-1">
           <p className="text-default font-medium">{member.name}</p>
           <div className="text-subtle line-clamp-3 overflow-ellipsis text-sm font-normal">

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

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

apps/web/components/ui/avatar/UserAvatar.tsx

@@ -0,0 +1,19 @@
+import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
+import type { User } from "@calcom/prisma/client";
+import { Avatar } from "@calcom/ui";
+
+type UserAvatarProps = Omit<React.ComponentProps<typeof Avatar>, "alt" | "imageSrc"> & {
+  user: Pick<User, "organizationId" | "name" | "username">;
+  /**
+   * Useful when allowing the user to upload their own avatar and showing the avatar before it's uploaded
+   */
+  previewSrc?: string | null;
+};
+
+/**
+ * It is aware of the user's organization to correctly show the avatar from the correct URL
+ */
+export function UserAvatar(props: UserAvatarProps) {
+  const { user, previewSrc, ...rest } = props;
+  return <Avatar {...rest} alt={user.name || ""} imageSrc={previewSrc ?? getUserAvatarUrl(user)} />;
+}

apps/web/components/ui/avatar/UserAvatarGroup.tsx

@@ -0,0 +1,20 @@
+import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
+import type { User } from "@calcom/prisma/client";
+import { AvatarGroup } from "@calcom/ui";
+
+type UserAvatarProps = Omit<React.ComponentProps<typeof AvatarGroup>, "items"> & {
+  users: Pick<User, "organizationId" | "name" | "username">[];
+};
+export function UserAvatarGroup(props: UserAvatarProps) {
+  const { users, ...rest } = props;
+  return (
+    <AvatarGroup
+      {...rest}
+      items={users.map((user) => ({
+        alt: user.name || "",
+        title: user.name || "",
+        image: getUserAvatarUrl(user),
+      }))}
+    />
+  );
+}

apps/web/components/ui/avatar/UserAvatarGroupWithOrg.tsx

@@ -0,0 +1,30 @@
+import { WEBAPP_URL } from "@calcom/lib/constants";
+import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
+import type { Team, User } from "@calcom/prisma/client";
+import { AvatarGroup } from "@calcom/ui";
+
+type UserAvatarProps = Omit<React.ComponentProps<typeof AvatarGroup>, "items"> & {
+  users: Pick<User, "organizationId" | "name" | "username">[];
+  organization: Pick<Team, "slug" | "name">;
+};
+
+export function UserAvatarGroupWithOrg(props: UserAvatarProps) {
+  const { users, organization, ...rest } = props;
+  const items = [
+    {
+      image: `${WEBAPP_URL}/team/${organization.slug}/avatar.png`,
+      alt: organization.name || undefined,
+      title: organization.name,
+    },
+  ].concat(
+    users.map((user) => {
+      return {
+        image: getUserAvatarUrl(user),
+        alt: user.name || undefined,
+        title: user.name || user.username || "",
+      };
+    })
+  );
+  users.unshift();
+  return <AvatarGroup {...rest} items={items} />;
+}

apps/web/components/ui/form/CheckboxField.tsx

@@ -52,7 +52,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
                     className="text-primary-600 focus:ring-primary-500 border-default bg-default h-4 w-4 rounded"
                   />
                 </div>
-                <span className="ms-3 text-sm">{description}</span>
+                <span className="ms-2 text-sm">{description}</span>
               </>
             )}
             {informationIconText && <InfoBadge content={informationIconText} />}

apps/web/components/ui/form/LocationSelect.tsx

@@ -2,7 +2,6 @@ import type { GroupBase, Props, SingleValue } from "react-select";
 import { components } from "react-select";
 
 import type { EventLocationType } from "@calcom/app-store/locations";
-import type { CredentialDataWithTeamName } from "@calcom/app-store/utils";
 import { classNames } from "@calcom/lib";
 import invertLogoOnDark from "@calcom/lib/invertLogoOnDark";
 import { Select } from "@calcom/ui";
@@ -13,7 +12,8 @@ export type LocationOption = {
   icon?: string;
   disabled?: boolean;
   address?: string;
-  credential?: CredentialDataWithTeamName;
+  credentialId?: number;
+  teamName?: string;
 };
 
 export type SingleValueLocationOption = SingleValue<LocationOption>;

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

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

apps/web/lib/app-providers.tsx

@@ -1,4 +1,5 @@
 import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { dir } from "i18next";
 import type { Session } from "next-auth";
 import { SessionProvider, useSession } from "next-auth/react";
 import { EventCollectionProvider } from "next-collect/client";
@@ -8,6 +9,7 @@ import { ThemeProvider } from "next-themes";
 import type { AppProps as NextAppProps, AppProps as NextJsAppProps } from "next/app";
 import type { ParsedUrlQuery } from "querystring";
 import type { PropsWithChildren, ReactNode } from "react";
+import { useEffect } from "react";
 
 import { OrgBrandingProvider } from "@calcom/features/ee/organizations/context/provider";
 import DynamicHelpscoutProvider from "@calcom/features/ee/support/lib/helpscout/providerDynamic";
@@ -71,13 +73,48 @@ const CustomI18nextProvider = (props: AppPropsWithoutNonce) => {
   /**
    * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
    **/
-  const clientViewerI18n = useViewerI18n(props.pageProps.newLocale);
+
+  const session = useSession();
+  const locale = session?.data?.user.locale ?? props.pageProps.newLocale;
+
+  useEffect(() => {
+    try {
+      // @ts-expect-error TS2790: The operand of a 'delete' operator must be optional.
+      delete window.document.documentElement["lang"];
+
+      window.document.documentElement.lang = locale;
+
+      // Next.js writes the locale to the same attribute
+      // https://github.com/vercel/next.js/blob/1609da2d9552fed48ab45969bdc5631230c6d356/packages/next/src/shared/lib/router/router.ts#L1786
+      // which can result in a race condition
+      // this property descriptor ensures this never happens
+      Object.defineProperty(window.document.documentElement, "lang", {
+        configurable: true,
+        // value: locale,
+        set: function (this) {
+          // empty setter on purpose
+        },
+        get: function () {
+          return locale;
+        },
+      });
+    } catch (error) {
+      console.error(error);
+
+      window.document.documentElement.lang = locale;
+    }
+
+    window.document.dir = dir(locale);
+  }, [locale]);
+
+  const clientViewerI18n = useViewerI18n(locale);
   const i18n = clientViewerI18n.data?.i18n;
 
   const passedProps = {
     ...props,
     pageProps: {
       ...props.pageProps,
+
       ...i18n,
     },
   };
@@ -247,8 +284,8 @@ const AppProviders = (props: AppPropsWithChildren) => {
 
   const RemainingProviders = (
     <EventCollectionProvider options={{ apiPath: "/api/collect-events" }}>
-      <CustomI18nextProvider {...propsWithoutNonce}>
-        <SessionProvider session={pageProps.session ?? undefined}>
+      <SessionProvider session={pageProps.session ?? undefined}>
+        <CustomI18nextProvider {...propsWithoutNonce}>
           <TooltipProvider>
             {/* color-scheme makes background:transparent not work which is required by embed. We need to ensure next-theme adds color-scheme to `body` instead of `html`(https://github.com/pacocoursey/next-themes/blob/main/src/index.tsx#L74). Once that's done we can enable color-scheme support */}
             <CalcomThemeProvider
@@ -264,8 +301,8 @@ const AppProviders = (props: AppPropsWithChildren) => {
               </FeatureFlagsProvider>
             </CalcomThemeProvider>
           </TooltipProvider>
-        </SessionProvider>
-      </CustomI18nextProvider>
+        </CustomI18nextProvider>
+      </SessionProvider>
     </EventCollectionProvider>
   );
 

apps/web/lib/buildNonce.test.ts

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

apps/web/lib/buildNonce.ts

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

apps/web/lib/csp.ts

@@ -1,10 +1,12 @@
-import crypto from "crypto";
 import type { IncomingMessage, OutgoingMessage } from "http";
+import type { NextRequest, NextResponse } from "next/server";
 import { z } from "zod";
 
 import { IS_PRODUCTION } from "@calcom/lib/constants";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 
+import { buildNonce } from "./buildNonce";
+
 function getCspPolicy(nonce: string) {
   //TODO: Do we need to explicitly define it in turbo.json
   const CSP_POLICY = process.env.CSP_POLICY;
@@ -45,11 +47,12 @@ const isPagePathRequest = (url: URL) => {
   return !isNonPagePathPrefix.test(pathname) && !isFile.test(pathname);
 };
 
-export function csp(req: IncomingMessage | null, res: OutgoingMessage | null) {
+export function csp(req: IncomingMessage | NextRequest | null, res: OutgoingMessage | NextResponse | null) {
   if (!req) {
     return { nonce: undefined };
   }
-  const existingNonce = req.headers["x-nonce"];
+  const existingNonce = "cache" in req ? req.headers.get("x-nonce") : req.headers["x-nonce"];
+
   if (existingNonce) {
     const existingNoneParsed = z.string().safeParse(existingNonce);
     return { nonce: existingNoneParsed.success ? existingNoneParsed.data : "" };
@@ -59,7 +62,7 @@ export function csp(req: IncomingMessage | null, res: OutgoingMessage | null) {
   }
   const CSP_POLICY = process.env.CSP_POLICY;
   const cspEnabledForInstance = CSP_POLICY;
-  const nonce = crypto.randomBytes(16).toString("base64");
+  const nonce = buildNonce(crypto.getRandomValues(new Uint8Array(22)));
 
   const parsedUrl = new URL(req.url, "http://base_url");
   const cspEnabledForPage = cspEnabledForInstance && isPagePathRequest(parsedUrl);
@@ -70,17 +73,28 @@ export function csp(req: IncomingMessage | null, res: OutgoingMessage | null) {
   }
   // Set x-nonce request header to be used by `getServerSideProps` or similar fns and `Document.getInitialProps` to read the nonce from
   // It is generated for all page requests but only used by pages that need CSP
-  req.headers["x-nonce"] = nonce;
+
+  if ("cache" in req) {
+    req.headers.set("x-nonce", nonce);
+  } else {
+    req.headers["x-nonce"] = nonce;
+  }
 
   if (res) {
-    res.setHeader(
-      req.headers["x-csp-enforce"] === "true"
-        ? "Content-Security-Policy"
-        : "Content-Security-Policy-Report-Only",
-      getCspPolicy(nonce)
-        .replace(/\s{2,}/g, " ")
-        .trim()
-    );
+    const enforced =
+      "cache" in req ? req.headers.get("x-csp-enforce") === "true" : req.headers["x-csp-enforce"] === "true";
+
+    const name = enforced ? "Content-Security-Policy" : "Content-Security-Policy-Report-Only";
+
+    const value = getCspPolicy(nonce)
+      .replace(/\s{2,}/g, " ")
+      .trim();
+
+    if ("body" in res) {
+      res.headers.set(name, value);
+    } else {
+      res.setHeader(name, value);
+    }
   }
 
   return { nonce };

apps/web/lib/getTemporaryOrgRedirect.test.ts

@@ -0,0 +1,162 @@
+import prismaMock from "../../../tests/libs/__mocks__/prismaMock";
+
+import { describe, it, expect } from "vitest";
+
+import { RedirectType } from "@calcom/prisma/client";
+
+import { getTemporaryOrgRedirect } from "./getTemporaryOrgRedirect";
+
+function mockARedirectInDB({
+  toUrl,
+  slug,
+  redirectType,
+}: {
+  toUrl: string;
+  slug: string;
+  redirectType: RedirectType;
+}) {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-ignore
+  prismaMock.tempOrgRedirect.findUnique.mockImplementation(({ where }) => {
+    return new Promise((resolve) => {
+      if (
+        where.from_type_fromOrgId.type === redirectType &&
+        where.from_type_fromOrgId.from === slug &&
+        where.from_type_fromOrgId.fromOrgId === 0
+      ) {
+        resolve({ toUrl });
+      } else {
+        resolve(null);
+      }
+    });
+  });
+}
+
+describe("getTemporaryOrgRedirect", () => {
+  it("should generate event-type URL without existing query params", async () => {
+    mockARedirectInDB({ slug: "slug", toUrl: "https://calcom.cal.com", redirectType: RedirectType.User });
+    const redirect = await getTemporaryOrgRedirect({
+      slug: "slug",
+      redirectType: RedirectType.User,
+      eventTypeSlug: "30min",
+      currentQuery: {},
+    });
+
+    expect(redirect).toEqual({
+      redirect: {
+        permanent: false,
+        destination: "https://calcom.cal.com/30min",
+      },
+    });
+  });
+
+  it("should generate event-type URL with existing query params", async () => {
+    mockARedirectInDB({ slug: "slug", toUrl: "https://calcom.cal.com", redirectType: RedirectType.User });
+
+    const redirect = await getTemporaryOrgRedirect({
+      slug: "slug",
+      redirectType: RedirectType.User,
+      eventTypeSlug: "30min",
+      currentQuery: {
+        abc: "1",
+      },
+    });
+
+    expect(redirect).toEqual({
+      redirect: {
+        permanent: false,
+        destination: "https://calcom.cal.com/30min?abc=1",
+      },
+    });
+  });
+
+  it("should generate User URL with existing query params", async () => {
+    mockARedirectInDB({ slug: "slug", toUrl: "https://calcom.cal.com", redirectType: RedirectType.User });
+
+    const redirect = await getTemporaryOrgRedirect({
+      slug: "slug",
+      redirectType: RedirectType.User,
+      eventTypeSlug: null,
+      currentQuery: {
+        abc: "1",
+      },
+    });
+
+    expect(redirect).toEqual({
+      redirect: {
+        permanent: false,
+        destination: "https://calcom.cal.com?abc=1",
+      },
+    });
+  });
+
+  it("should generate Team Profile URL with existing query params", async () => {
+    mockARedirectInDB({
+      slug: "seeded-team",
+      toUrl: "https://calcom.cal.com",
+      redirectType: RedirectType.Team,
+    });
+
+    const redirect = await getTemporaryOrgRedirect({
+      slug: "seeded-team",
+      redirectType: RedirectType.Team,
+      eventTypeSlug: null,
+      currentQuery: {
+        abc: "1",
+      },
+    });
+
+    expect(redirect).toEqual({
+      redirect: {
+        permanent: false,
+        destination: "https://calcom.cal.com?abc=1",
+      },
+    });
+  });
+
+  it("should generate Team Event URL with existing query params", async () => {
+    mockARedirectInDB({
+      slug: "seeded-team",
+      toUrl: "https://calcom.cal.com",
+      redirectType: RedirectType.Team,
+    });
+
+    const redirect = await getTemporaryOrgRedirect({
+      slug: "seeded-team",
+      redirectType: RedirectType.Team,
+      eventTypeSlug: "30min",
+      currentQuery: {
+        abc: "1",
+      },
+    });
+
+    expect(redirect).toEqual({
+      redirect: {
+        permanent: false,
+        destination: "https://calcom.cal.com/30min?abc=1",
+      },
+    });
+  });
+
+  it("should generate Team Event URL without query params", async () => {
+    mockARedirectInDB({
+      slug: "seeded-team",
+      toUrl: "https://calcom.cal.com",
+      redirectType: RedirectType.Team,
+    });
+
+    const redirect = await getTemporaryOrgRedirect({
+      slug: "seeded-team",
+      redirectType: RedirectType.Team,
+      eventTypeSlug: "30min",
+      currentQuery: {},
+    });
+
+    expect(redirect).toEqual({
+      redirect: {
+        permanent: false,
+        destination: "https://calcom.cal.com/30min",
+      },
+    });
+  });
+});

apps/web/lib/getTemporaryOrgRedirect.ts

@@ -0,0 +1,51 @@
+import type { ParsedUrlQuery } from "querystring";
+import { stringify } from "querystring";
+
+import logger from "@calcom/lib/logger";
+import { safeStringify } from "@calcom/lib/safeStringify";
+import type { RedirectType } from "@calcom/prisma/client";
+
+const log = logger.getSubLogger({ prefix: ["lib", "getTemporaryOrgRedirect"] });
+export const getTemporaryOrgRedirect = async ({
+  slug,
+  redirectType,
+  eventTypeSlug,
+  currentQuery,
+}: {
+  slug: string;
+  redirectType: RedirectType;
+  eventTypeSlug: string | null;
+  currentQuery: ParsedUrlQuery;
+}) => {
+  const prisma = (await import("@calcom/prisma")).default;
+  log.debug(
+    `Looking for redirect for`,
+    safeStringify({
+      slug,
+      redirectType,
+      eventTypeSlug,
+    })
+  );
+  const redirect = await prisma.tempOrgRedirect.findUnique({
+    where: {
+      from_type_fromOrgId: {
+        type: redirectType,
+        from: slug,
+        fromOrgId: 0,
+      },
+    },
+  });
+
+  if (redirect) {
+    log.debug(`Redirecting ${slug} to ${redirect.toUrl}`);
+    const newDestinationWithoutQuery = eventTypeSlug ? `${redirect.toUrl}/${eventTypeSlug}` : redirect.toUrl;
+    const currentQueryString = stringify(currentQuery);
+    return {
+      redirect: {
+        permanent: false,
+        destination: `${newDestinationWithoutQuery}${currentQueryString ? `?${currentQueryString}` : ""}`,
+      },
+    } as const;
+  }
+  return null;
+};

apps/web/lib/hooks/useIsBookingPage.ts

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

apps/web/lib/hooks/useRouterQuery.ts

@@ -1,17 +1,21 @@
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useCallback } from "react";
 
 export default function useRouterQuery<T extends string>(name: T) {
   const searchParams = useSearchParams();
   const pathname = usePathname();
   const router = useRouter();
 
-  const setQuery = (newValue: string | number | null | undefined) => {
-    const _searchParams = new URLSearchParams(searchParams);
-    _searchParams.set(name, newValue as string);
-    router.replace(`${pathname}?${_searchParams.toString()}`);
-  };
+  const setQuery = useCallback(
+    (newValue: string | number | null | undefined) => {
+      const _searchParams = new URLSearchParams(searchParams ?? undefined);
+      _searchParams.set(name, newValue as string);
+      router.replace(`${pathname}?${_searchParams.toString()}`);
+    },
+    [name, pathname, router, searchParams]
+  );
 
-  return { [name]: searchParams.get(name), setQuery } as {
+  return { [name]: searchParams?.get(name), setQuery } as {
     [K in T]: string | undefined;
   } & { setQuery: typeof setQuery };
 }