v3.5.3

Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>

.env.example

@@ -25,6 +25,7 @@ CALCOM_LICENSE_KEY=
 DATABASE_URL="postgresql://postgres:@localhost:5450/calendso"
 UPSTASH_REDIS_REST_URL=
 UPSTASH_REDIS_REST_TOKEN=
+INSIGHTS_DATABASE_URL=
 
 # Uncomment to enable a dedicated connection pool for Prisma using Prisma Data Proxy
 # Cold boots will be faster and you'll be able to scale your DB independently of your app.
@@ -87,7 +88,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
@@ -106,6 +107,19 @@ NEXT_PUBLIC_HELPSCOUT_KEY=
 NEXT_PUBLIC_FRESHCHAT_TOKEN=
 NEXT_PUBLIC_FRESHCHAT_HOST=
 
+# Google OAuth credentials
+# To enable Login with Google you need to:
+# 1. Set `GOOGLE_API_CREDENTIALS` above
+# 2. Set `GOOGLE_LOGIN_ENABLED` to `true`
+# When self-hosting please ensure you configure the Google integration as an Internal app so no one else can login to your instance
+# @see https://support.google.com/cloud/answer/6158849#public-and-internal&zippy=%2Cpublic-and-internal-applications
+GOOGLE_LOGIN_ENABLED=false
+
+#   - GOOGLE CALENDAR/MEET/LOGIN
+# Needed to enable Google Calendar integration and Login with Google
+# @see https://github.com/calcom/cal.com#obtaining-the-google-api-credentials
+GOOGLE_API_CREDENTIALS=
+
 # Inbox to send user feedback
 SEND_FEEDBACK_EMAIL=
 
@@ -115,6 +129,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 +144,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
@@ -137,6 +155,7 @@ NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE=
 STRIPE_TEAM_MONTHLY_PRICE_ID=
 STRIPE_ORG_MONTHLY_PRICE_ID=
 STRIPE_WEBHOOK_SECRET=
+STRIPE_WEBHOOK_SECRET_APPS=
 STRIPE_PRIVATE_KEY=
 STRIPE_CLIENT_ID=
 PAYMENT_FEE_FIXED=
@@ -203,6 +222,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
@@ -230,6 +251,12 @@ AUTH_BEARER_TOKEN_VERCEL=
 E2E_TEST_APPLE_CALENDAR_EMAIL=""
 E2E_TEST_APPLE_CALENDAR_PASSWORD=""
 
+# - CALCOM QA ACCOUNT
+# Used for E2E tests on Cal.com that require 3rd party integrations
+E2E_TEST_CALCOM_QA_EMAIL="qa@example.com"
+# Replace with your own password
+E2E_TEST_CALCOM_QA_PASSWORD="password"
+
 # - APP CREDENTIAL SYNC ***********************************************************************************
 # Used for self-hosters that are implementing Cal.com into their applications that already have certain integrations
 # Under settings/admin/apps ensure that all app secrets are set the same as the parent application
@@ -257,3 +284,9 @@ E2E_TEST_OIDC_USER_EMAIL=
 E2E_TEST_OIDC_USER_PASSWORD=
 
 # ***********************************************************************************************************
+
+# provide a value between 0 and 100 to ensure the percentage of traffic
+# redirected from the legacy to the future pages
+AB_TEST_BUCKET_PROBABILITY=50
+# whether we redirect to the future/event-types from event-types or not
+APP_ROUTER_EVENT_TYPES_ENABLED=1

.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, 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"
+          ignore-labels: "app-store, ai, authentication, automated-testing, platform, 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:
@@ -597,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/src/app/api/receive/route.ts

@@ -88,7 +88,7 @@ export const POST = async (request: NextRequest) => {
   // 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.`,
+      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,

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

@@ -26,6 +26,7 @@ const schemaAvailabilityCreateParams = z
     startTime: z.date().or(z.string()),
     endTime: z.date().or(z.string()),
     days: z.array(z.number()).optional(),
+    date: z.date().or(z.string()).optional(),
   })
   .strict();
 
@@ -34,6 +35,7 @@ const schemaAvailabilityEditParams = z
     startTime: z.date().or(z.string()).optional(),
     endTime: z.date().or(z.string()).optional(),
     days: z.array(z.number()).optional(),
+    date: z.date().or(z.string()).optional(),
   })
   .strict();
 

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

@@ -3,7 +3,6 @@ import { z } from "zod";
 import { _DestinationCalendarModel as DestinationCalendar } from "@calcom/prisma/zod";
 
 export const schemaDestinationCalendarBaseBodyParams = DestinationCalendar.pick({
-  credentialId: true,
   integration: true,
   externalId: true,
   eventTypeId: true,
@@ -15,7 +14,6 @@ const schemaDestinationCalendarCreateParams = z
   .object({
     integration: z.string(),
     externalId: z.string(),
-    credentialId: z.number(),
     eventTypeId: z.number().optional(),
     bookingId: z.number().optional(),
     userId: z.number().optional(),
@@ -47,5 +45,4 @@ export const schemaDestinationCalendarReadPublic = DestinationCalendar.pick({
   eventTypeId: true,
   bookingId: true,
   userId: true,
-  credentialId: true,
 });

apps/api/lib/validations/schedule.ts

@@ -21,7 +21,16 @@ export const schemaSchedulePublic = z
   .merge(
     z.object({
       availability: z
-        .array(Availability.pick({ id: true, eventTypeId: true, days: true, startTime: true, endTime: true }))
+        .array(
+          Availability.pick({
+            id: true,
+            eventTypeId: true,
+            date: true,
+            days: true,
+            startTime: true,
+            endTime: true,
+          })
+        )
         .transform((v) =>
           v.map((item) => ({
             ...item,

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.
@@ -106,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,
@@ -128,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,

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]/_patch.ts

@@ -1,6 +1,12 @@
+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,
@@ -56,16 +62,251 @@ import { schemaQueryIdParseInt } from "~/lib/validations/shared/queryIdTransform
  *       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 { prisma, query, body } = req;
+  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,
+    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/_post.ts

@@ -1,7 +1,9 @@
 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,
@@ -38,9 +40,6 @@ import {
  *               externalId:
  *                 type: string
  *                 description: 'The external ID of the integration'
- *               credentialId:
- *                 type: integer
- *                 description: 'The credential ID it is associated with'
  *               eventTypeId:
  *                 type: integer
  *                 description: 'The ID of the eventType it is associated with'
@@ -65,20 +64,38 @@ async function postHandler(req: NextApiRequest) {
   const parsedBody = schemaDestinationCalendarCreateBodyParams.parse(body);
   await checkPermissions(req, userId);
 
-  const assignedUserId = isAdmin ? parsedBody.userId || userId : userId;
+  const assignedUserId = isAdmin && parsedBody.userId ? parsedBody.userId : userId;
 
   /* Check if credentialId data matches the ownership and integration passed in */
-  const credential = await prisma.credential.findFirst({
-    where: { type: parsedBody.integration, userId: assignedUserId },
-    select: { id: true, type: true, userId: true },
+  const userCredentials = await prisma.credential.findMany({
+    where: {
+      type: parsedBody.integration,
+      userId: assignedUserId,
+    },
+    select: credentialForCalendarServiceSelect,
   });
 
-  if (!credential)
+  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 },
@@ -91,7 +108,9 @@ async function postHandler(req: NextApiRequest) {
     parsedBody.userId = undefined;
   }
 
-  const destination_calendar = await prisma.destinationCalendar.create({ data: { ...parsedBody } });
+  const destination_calendar = await prisma.destinationCalendar.create({
+    data: { ...parsedBody, credentialId },
+  });
 
   return {
     destinationCalendar: schemaDestinationCalendarReadPublic.parse(destination_calendar),

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

@@ -2,6 +2,7 @@ import type { NextApiRequest } from "next";
 
 import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";
+import { MembershipRole } from "@calcom/prisma/enums";
 
 import { schemaEventTypeReadPublic } from "~/lib/validations/event-type";
 import { schemaQueryIdParseInt } from "~/lib/validations/shared/queryIdTransformParseInt";
@@ -51,6 +52,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 } },
     },
@@ -88,7 +90,9 @@ async function checkPermissions<T extends BaseEventTypeCheckPermissions>(
   if (req.isAdmin) return true;
   if (eventType?.teamId) {
     req.query.teamId = String(eventType.teamId);
-    await canAccessTeamEventOrThrow(req, "MEMBER");
+    await canAccessTeamEventOrThrow(req, {
+      in: [MembershipRole.OWNER, MembershipRole.ADMIN, MembershipRole.MEMBER],
+    });
   }
   if (eventType?.userId === req.userId) return true; // is owner.
   throw new HttpError({ statusCode: 403, message: "Forbidden" });

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

@@ -299,7 +299,7 @@ async function postHandler(req: NextApiRequest) {
     data.hosts = { createMany: { data: hosts } };
   }
 
-  const eventType = await prisma.eventType.create({ data });
+  const eventType = await prisma.eventType.create({ data, include: { hosts: true } });
 
   return {
     event_type: schemaEventTypeReadPublic.parse(eventType),
@@ -316,8 +316,14 @@ 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" });
+  if (!isAdmin && body.teamId)
+    throw new HttpError({
+      statusCode: 401,
+      message: "ADMIN required for `teamId`",
+    });
+  /* 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/index.ts

@@ -1,5 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 
 export default async function CalcomApi(_: NextApiRequest, res: NextApiResponse) {
-  res.status(201).json({ message: "Welcome to Cal.com API - docs are at https://developer.cal.com/api" });
+  res.status(200).json({ message: "Welcome to Cal.com API - docs are at https://developer.cal.com/api" });
 }

apps/api/pages/api/teams/[teamId]/_auth-middleware.ts

@@ -22,7 +22,11 @@ export async function checkPermissions(
   role: Prisma.MembershipWhereInput["role"] = MembershipRole.OWNER
 ) {
   const { userId, prisma, isAdmin } = req;
-  const { teamId } = schemaQueryTeamId.parse(req.query);
+  const { teamId } = schemaQueryTeamId.parse({
+    teamId: req.query.teamId,
+    version: req.query.version,
+    apiKey: req.query.apiKey,
+  });
   const args: Prisma.TeamFindFirstArgs = { where: { id: teamId } };
   /** If not ADMIN then we check if the actual user belongs to team and matches the required role */
   if (!isAdmin) args.where = { ...args.where, members: { some: { userId, role } } };

apps/api/pages/api/teams/[teamId]/event-types/_get.ts

@@ -56,6 +56,14 @@ async function getHandler(req: NextApiRequest) {
             members: { some: { userId } },
           },
     },
+    include: {
+      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 } },
+    },
   };
 
   const data = await prisma.eventType.findMany(args);

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

@@ -1,5 +1,6 @@
 import type { NextApiRequest } from "next";
 
+import { deleteUser } from "@calcom/features/users/lib/userDeletionService";
 import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";
 
@@ -41,10 +42,18 @@ export async function deleteHandler(req: NextApiRequest) {
   // Here we only check for ownership of the user if the user is not admin, otherwise we let ADMIN's edit any user
   if (!isAdmin && query.userId !== req.userId) throw new HttpError({ statusCode: 403, message: "Forbidden" });
 
-  const user = await prisma.user.findUnique({ where: { id: query.userId } });
+  const user = await prisma.user.findUnique({
+    where: { id: query.userId },
+    select: {
+      id: true,
+      email: true,
+      metadata: true,
+    },
+  });
   if (!user) throw new HttpError({ statusCode: 404, message: "User not found" });
 
-  await prisma.user.delete({ where: { id: user.id } });
+  await deleteUser(user);
+
   return { message: `User with id: ${user.id} deleted successfully` };
 }
 

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

@@ -65,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

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

@@ -60,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

@@ -8,6 +8,7 @@ import { describe, expect, test, vi } from "vitest";
 
 import dayjs from "@calcom/dayjs";
 import sendPayload from "@calcom/features/webhooks/lib/sendPayload";
+import { ErrorCode } from "@calcom/lib/errorCodes";
 import { buildBooking, buildEventType, buildWebhook } from "@calcom/lib/test/builder";
 import prisma from "@calcom/prisma";
 
@@ -148,7 +149,7 @@ describe.skipIf(true)("POST /api/bookings", () => {
       expect(res._getStatusCode()).toBe(500);
       expect(JSON.parse(res._getData())).toEqual(
         expect.objectContaining({
-          message: "No available users found.",
+          message: ErrorCode.NoAvailableUsersFound,
         })
       );
     });

apps/api/vercel.json

@@ -0,0 +1,7 @@
+{
+  "functions": {
+    "pages/api/slots/*.ts": {
+      "memory": 512
+    }
+  }
+}

apps/storybook/package.json

@@ -10,7 +10,7 @@
     "@calcom/config": "*",
     "@calcom/dayjs": "*",
     "@calcom/ui": "*",
-    "@radix-ui/react-avatar": "^1.0.0",
+    "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.0",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
@@ -49,7 +49,7 @@
     "storybook-addon-designs": "^6.3.1",
     "storybook-addon-next": "^1.6.9",
     "storybook-react-i18next": "^1.1.2",
-    "tailwindcss": "^3.3.1",
+    "tailwindcss": "^3.3.3",
     "typescript": "^4.9.4",
     "vite": "^4.1.2"
   }

apps/web/abTest/middlewareFactory.ts

@@ -0,0 +1,68 @@
+import { getBucket } from "abTest/utils";
+import type { NextMiddleware, NextRequest } from "next/server";
+import { NextResponse, URLPattern } from "next/server";
+import z from "zod";
+
+const ROUTES: [URLPattern, boolean][] = [
+  ["/event-types", process.env.APP_ROUTER_EVENT_TYPES_ENABLED === "1"] as const,
+].map(([pathname, enabled]) => [
+  new URLPattern({
+    pathname,
+  }),
+  enabled,
+]);
+
+const FUTURE_ROUTES_OVERRIDE_COOKIE_NAME = "x-calcom-future-routes-override";
+const FUTURE_ROUTES_ENABLED_COOKIE_NAME = "x-calcom-future-routes-enabled";
+
+const bucketSchema = z.union([z.literal("legacy"), z.literal("future")]);
+
+export const abTestMiddlewareFactory =
+  (next: (req: NextRequest) => Promise<NextResponse<unknown>>): NextMiddleware =>
+  async (req: NextRequest) => {
+    const response = await next(req);
+
+    const { pathname } = req.nextUrl;
+
+    const override = req.cookies.has(FUTURE_ROUTES_OVERRIDE_COOKIE_NAME);
+
+    const route = ROUTES.find(([regExp]) => regExp.test(req.url)) ?? null;
+
+    const enabled = route !== null ? route[1] || override : false;
+
+    if (pathname.includes("future") || !enabled) {
+      return response;
+    }
+
+    const safeParsedBucket = override
+      ? { success: true as const, data: "future" as const }
+      : bucketSchema.safeParse(req.cookies.get(FUTURE_ROUTES_ENABLED_COOKIE_NAME)?.value);
+
+    if (!safeParsedBucket.success) {
+      // cookie does not exist or it has incorrect value
+      const bucket = getBucket();
+
+      response.cookies.set(FUTURE_ROUTES_ENABLED_COOKIE_NAME, bucket, {
+        expires: Date.now() + 1000 * 60 * 30,
+        httpOnly: true,
+      }); // 30 min in ms
+
+      if (bucket === "legacy") {
+        return response;
+      }
+
+      const url = req.nextUrl.clone();
+      url.pathname = `future${pathname}/`;
+
+      return NextResponse.rewrite(url, response);
+    }
+
+    if (safeParsedBucket.data === "legacy") {
+      return response;
+    }
+
+    const url = req.nextUrl.clone();
+    url.pathname = `future${pathname}/`;
+
+    return NextResponse.rewrite(url, response);
+  };

apps/web/abTest/utils.ts

@@ -0,0 +1,9 @@
+import { AB_TEST_BUCKET_PROBABILITY } from "@calcom/lib/constants";
+
+const cryptoRandom = () => {
+  return crypto.getRandomValues(new Uint8Array(1))[0] / 0xff;
+};
+
+export const getBucket = () => {
+  return cryptoRandom() * 100 < AB_TEST_BUCKET_PROBABILITY ? "future" : "legacy";
+};

apps/web/app/_trpc/HydrateClient.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { createHydrateClient } from "app/_trpc/createHydrateClient";
+import superjson from "superjson";
+
+export const HydrateClient = createHydrateClient({
+  transformer: superjson,
+});

apps/web/app/_trpc/client.ts

@@ -0,0 +1,5 @@
+import type { AppRouter } from "@calcom/trpc/server/routers/_app";
+
+import { createTRPCReact } from "@trpc/react-query";
+
+export const trpc = createTRPCReact<AppRouter>({});

apps/web/app/_trpc/createHydrateClient.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { type DehydratedState, Hydrate } from "@tanstack/react-query";
+import { useMemo } from "react";
+
+import type { DataTransformer } from "@trpc/server";
+
+export function createHydrateClient(opts: { transformer?: DataTransformer }) {
+  return function HydrateClient(props: { children: React.ReactNode; state: DehydratedState }) {
+    const { state, children } = props;
+
+    const transformedState: DehydratedState = useMemo(() => {
+      if (opts.transformer) {
+        return opts.transformer.deserialize(state);
+      }
+      return state;
+    }, [state]);
+
+    return <Hydrate state={transformedState}>{children}</Hydrate>;
+  };
+}

apps/web/app/_trpc/trpc-provider.tsx

@@ -0,0 +1,128 @@
+import { type DehydratedState, QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { HydrateClient } from "app/_trpc/HydrateClient";
+import { trpc } from "app/_trpc/client";
+import { useState } from "react";
+import superjson from "superjson";
+
+import { httpBatchLink } from "@calcom/trpc/client/links/httpBatchLink";
+import { httpLink } from "@calcom/trpc/client/links/httpLink";
+import { loggerLink } from "@calcom/trpc/client/links/loggerLink";
+import { splitLink } from "@calcom/trpc/client/links/splitLink";
+
+const ENDPOINTS = [
+  "admin",
+  "apiKeys",
+  "appRoutingForms",
+  "apps",
+  "auth",
+  "availability",
+  "appBasecamp3",
+  "bookings",
+  "deploymentSetup",
+  "eventTypes",
+  "features",
+  "insights",
+  "payments",
+  "public",
+  "saml",
+  "slots",
+  "teams",
+  "organizations",
+  "users",
+  "viewer",
+  "webhook",
+  "workflows",
+  "appsRouter",
+  "googleWorkspace",
+] as const;
+export type Endpoint = (typeof ENDPOINTS)[number];
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const resolveEndpoint = (links: any) => {
+  // TODO: Update our trpc routes so they are more clear.
+  // This function parses paths like the following and maps them
+  // to the correct API endpoints.
+  // - viewer.me - 2 segment paths like this are for logged in requests
+  // - viewer.public.i18n - 3 segments paths can be public or authed
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (ctx: any) => {
+    const parts = ctx.op.path.split(".");
+    let endpoint;
+    let path = "";
+    if (parts.length == 2) {
+      endpoint = parts[0] as keyof typeof links;
+      path = parts[1];
+    } else {
+      endpoint = parts[1] as keyof typeof links;
+      path = parts.splice(2, parts.length - 2).join(".");
+    }
+    return links[endpoint]({ ...ctx, op: { ...ctx.op, path } });
+  };
+};
+
+export const TrpcProvider: React.FC<{ children: React.ReactNode; dehydratedState?: DehydratedState }> = ({
+  children,
+  dehydratedState,
+}) => {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: { queries: { staleTime: 5000 } },
+      })
+  );
+  const url =
+    typeof window !== "undefined"
+      ? "/api/trpc"
+      : process.env.VERCEL_URL
+      ? `https://${process.env.VERCEL_URL}/api/trpc`
+      : `${process.env.NEXT_PUBLIC_WEBAPP_URL}/api/trpc`;
+
+  const [trpcClient] = useState(() =>
+    trpc.createClient({
+      links: [
+        // adds pretty logs to your console in development and logs errors in production
+        loggerLink({
+          enabled: (opts) =>
+            !!process.env.NEXT_PUBLIC_DEBUG || (opts.direction === "down" && opts.result instanceof Error),
+        }),
+        splitLink({
+          // check for context property `skipBatch`
+          condition: (op) => !!op.context.skipBatch,
+          // when condition is true, use normal request
+          true: (runtime) => {
+            const links = Object.fromEntries(
+              ENDPOINTS.map((endpoint) => [
+                endpoint,
+                httpLink({
+                  url: `${url}/${endpoint}`,
+                })(runtime),
+              ])
+            );
+            return resolveEndpoint(links);
+          },
+          // when condition is false, use batch request
+          false: (runtime) => {
+            const links = Object.fromEntries(
+              ENDPOINTS.map((endpoint) => [
+                endpoint,
+                httpBatchLink({
+                  url: `${url}/${endpoint}`,
+                })(runtime),
+              ])
+            );
+            return resolveEndpoint(links);
+          },
+        }),
+      ],
+      transformer: superjson,
+    })
+  );
+
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        {dehydratedState ? <HydrateClient state={dehydratedState}>{children}</HydrateClient> : children}
+      </QueryClientProvider>
+    </trpc.Provider>
+  );
+};

apps/web/app/_utils.tsx

@@ -0,0 +1,40 @@
+import { type TFunction } from "i18next";
+import { headers } from "next/headers";
+
+import { constructGenericImage } from "@calcom/lib/OgImages";
+import { IS_CALCOM, WEBAPP_URL, APP_NAME, SEO_IMG_OGIMG } from "@calcom/lib/constants";
+import { getFixedT } from "@calcom/lib/server/getFixedT";
+
+import { preparePageMetadata } from "@lib/metadata";
+
+export const _generateMetadata = async (
+  getTitle: (t: TFunction<string, undefined>) => string,
+  getDescription: (t: TFunction<string, undefined>) => string
+) => {
+  const h = headers();
+  const canonical = h.get("x-pathname") ?? "";
+  const locale = h.get("x-locale") ?? "en";
+
+  const t = await getFixedT(locale, "common");
+
+  const title = getTitle(t);
+  const description = getDescription(t);
+
+  const metadataBase = new URL(IS_CALCOM ? "https://cal.com" : WEBAPP_URL);
+
+  const image =
+    SEO_IMG_OGIMG +
+    constructGenericImage({
+      title,
+      description,
+    });
+
+  return preparePageMetadata({
+    title,
+    canonical,
+    image,
+    description,
+    siteName: APP_NAME,
+    metadataBase,
+  });
+};

apps/web/app/error.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+/**
+ * Typescript class based component for custom-error
+ * @link https://nextjs.org/docs/advanced-features/custom-error-page
+ */
+import type { NextPage } from "next";
+import type { ErrorProps } from "next/error";
+import React from "react";
+
+import { HttpError } from "@calcom/lib/http-error";
+import logger from "@calcom/lib/logger";
+import { redactError } from "@calcom/lib/redactError";
+
+import { ErrorPage } from "@components/error/error-page";
+
+type NextError = Error & { digest?: string };
+
+// Ref: https://nextjs.org/docs/app/api-reference/file-conventions/error#props
+export type DefaultErrorProps = {
+  error: NextError;
+  reset: () => void; // A function to reset the error boundary
+};
+
+type AugmentedError = NextError | HttpError | null;
+
+type CustomErrorProps = {
+  err?: AugmentedError;
+  statusCode?: number;
+  message?: string;
+} & Omit<ErrorProps, "err" | "statusCode">;
+
+const log = logger.getSubLogger({ prefix: ["[error]"] });
+
+const CustomError: NextPage<DefaultErrorProps> = (props) => {
+  const { error } = props;
+  let errorObject: CustomErrorProps = {
+    message: error.message,
+    err: error,
+  };
+
+  if (error instanceof HttpError) {
+    const redactedError = redactError(error);
+    errorObject = {
+      statusCode: error.statusCode,
+      title: redactedError.name,
+      message: redactedError.message,
+      err: {
+        ...redactedError,
+        ...error,
+      },
+    };
+  }
+
+  // `error.digest` property contains an automatically generated hash of the error that can be used to match the corresponding error in server-side logs
+  log.debug(`${error?.toString() ?? JSON.stringify(error)}`);
+  log.info("errorObject: ", errorObject);
+
+  return (
+    <ErrorPage statusCode={errorObject.statusCode} error={errorObject.err} message={errorObject.message} />
+  );
+};
+
+export default CustomError;

apps/web/app/future/(shared-page-wrapper)/(layout)/event-types/page.tsx

@@ -0,0 +1,10 @@
+import EventTypes from "@pages/event-types";
+import { _generateMetadata } from "app/_utils";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("event_types_page_title"),
+    (t) => t("event_types_page_subtitle")
+  );
+
+export default EventTypes;

apps/web/app/future/(shared-page-wrapper)/(layout)/layout.tsx

@@ -0,0 +1,22 @@
+// pages without layout (e.g., /availability/index.tsx) are supposed to go under (layout) folder
+import { headers } from "next/headers";
+import { type ReactElement } from "react";
+
+import { getLayout } from "@calcom/features/MainLayoutAppDir";
+
+import PageWrapper from "@components/PageWrapperAppDir";
+
+type WrapperWithLayoutProps = {
+  children: ReactElement;
+};
+
+export default async function WrapperWithLayout({ children }: WrapperWithLayoutProps) {
+  const h = headers();
+  const nonce = h.get("x-nonce") ?? undefined;
+
+  return (
+    <PageWrapper getLayout={getLayout} requiresLicense={false} nonce={nonce} themeBasis={null}>
+      {children}
+    </PageWrapper>
+  );
+}

apps/web/app/global-error.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { type NextPage } from "next";
+
+import CustomError, { type DefaultErrorProps } from "./error";
+
+export const GlobalError: NextPage<DefaultErrorProps> = (props) => {
+  return (
+    <html>
+      <body>
+        <CustomError {...props} />
+      </body>
+    </html>
+  );
+};
+
+export default GlobalError;

apps/web/app/layout.tsx

@@ -0,0 +1,88 @@
+import { dir } from "i18next";
+import { headers, cookies } 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 { prepareRootMetadata } from "@lib/metadata";
+
+import "../styles/globals.css";
+
+export const generateMetadata = () =>
+  prepareRootMetadata({
+    twitterCreator: "@calcom",
+    twitterSite: "@calcom",
+    robots: {
+      index: false,
+      follow: false,
+    },
+  });
+
+const getInitialProps = async (url: string) => {
+  const { pathname, searchParams } = new URL(url);
+
+  const isEmbed = pathname.endsWith("/embed") || (searchParams?.get("embedType") ?? null) !== null;
+  const embedColorScheme = searchParams?.get("ui.color-scheme");
+
+  const req = { headers: headers(), cookies: cookies() };
+  const newLocale = await getLocale(req);
+  const direction = dir(newLocale);
+
+  return { isEmbed, embedColorScheme, locale: newLocale, direction };
+};
+
+const getFallbackProps = () => ({
+  locale: "en",
+  direction: "ltr",
+  isEmbed: false,
+  embedColorScheme: false,
+});
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const h = headers();
+
+  const fullUrl = h.get("x-url") ?? "";
+  const nonce = h.get("x-csp") ?? "";
+
+  const isSSG = !fullUrl;
+
+  const { locale, direction, isEmbed, embedColorScheme } = isSSG
+    ? getFallbackProps()
+    : await getInitialProps(fullUrl);
+
+  return (
+    <html
+      lang={locale}
+      dir={direction}
+      style={embedColorScheme ? { colorScheme: embedColorScheme as string } : undefined}
+      data-nextjs-router="app">
+      <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/AppListCard.tsx

@@ -1,4 +1,4 @@
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import type { ReactNode } from "react";
 import { useEffect, useRef, useState } from "react";
 import { z } from "zod";
@@ -6,6 +6,7 @@ import { z } from "zod";
 import type { CredentialOwner } from "@calcom/app-store/types";
 import classNames from "@calcom/lib/classNames";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
+import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import { Badge, ListItemText, Avatar } from "@calcom/ui";
@@ -56,18 +57,22 @@ export default function AppListCard(props: AppListCardProps) {
   const router = useRouter();
   const [highlight, setHighlight] = useState(shouldHighlight && hl === slug);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const searchParams = useSearchParams();
+  const searchParams = useCompatSearchParams();
   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 +80,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/PageWrapperAppDir.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { type DehydratedState } from "@tanstack/react-query";
+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 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) | null;
+  children: React.ReactElement;
+  requiresLicense: boolean;
+  nonce: string | undefined;
+  themeBasis: string | null;
+  dehydratedState?: DehydratedState;
+  isThemeSupported?: boolean;
+  isBookingPage?: boolean;
+  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 PageWrapper;

apps/web/components/apps/AppPage.tsx

@@ -42,6 +42,7 @@ export type AppPageProps = {
   disableInstall?: boolean;
   dependencies?: string[];
   concurrentMeetings: AppType["concurrentMeetings"];
+  paid?: AppType["paid"];
 };
 
 export const AppPage = ({
@@ -67,6 +68,7 @@ export const AppPage = ({
   isTemplate,
   dependencies,
   concurrentMeetings,
+  paid,
 }: AppPageProps) => {
   const { t, i18n } = useLocale();
   const hasDescriptionItems = descriptionItems && descriptionItems.length > 0;
@@ -163,6 +165,19 @@ export const AppPage = ({
                 className="bg-subtle text-emphasis rounded-md p-1 text-xs capitalize">
                 {categories[0]}
               </Link>{" "}
+              {paid && (
+                <>
+                  <Badge className="mr-1">
+                    {Intl.NumberFormat(i18n.language, {
+                      style: "currency",
+                      currency: "USD",
+                      useGrouping: false,
+                      maximumFractionDigits: 0,
+                    }).format(paid.priceInUsd)}
+                    /{t("month")}
+                  </Badge>
+                </>
+              )}
               •{" "}
               <a target="_blank" rel="noreferrer" href={website}>
                 {t("published_by", { author })}
@@ -206,6 +221,7 @@ export const AppPage = ({
                         addAppMutationInput={{ type, variant, slug }}
                         multiInstall
                         concurrentMeetings={concurrentMeetings}
+                        paid={paid}
                         {...props}
                       />
                     );
@@ -244,6 +260,7 @@ export const AppPage = ({
                     addAppMutationInput={{ type, variant, slug }}
                     credentials={appDbQuery.data?.credentials}
                     concurrentMeetings={concurrentMeetings}
+                    paid={paid}
                     {...props}
                   />
                 );
@@ -263,7 +280,7 @@ export const AppPage = ({
             <SkeletonButton className="mt-6 h-20 grow" />
           ))}
 
-        {price !== 0 && (
+        {price !== 0 && !paid && (
           <span className="block text-right">
             {feeType === "usage-based" ? `${commission}% + ${priceInDollar}/booking` : priceInDollar}
             {feeType === "monthly" && `/${t("month")}`}
@@ -273,23 +290,27 @@ export const AppPage = ({
         <div className="prose-sm prose prose-a:text-default prose-headings:text-emphasis prose-code:text-default prose-strong:text-default text-default mt-8">
           {body}
         </div>
-        <h4 className="text-emphasis mt-8 font-semibold ">{t("pricing")}</h4>
-        <span className="text-default">
-          {teamsPlanRequired ? (
-            t("teams_plan_required")
-          ) : price === 0 ? (
-            t("free_to_use_apps")
-          ) : (
-            <>
-              {Intl.NumberFormat(i18n.language, {
-                style: "currency",
-                currency: "USD",
-                useGrouping: false,
-              }).format(price)}
-              {feeType === "monthly" && `/${t("month")}`}
-            </>
-          )}
-        </span>
+        {!paid && (
+          <>
+            <h4 className="text-emphasis mt-8 font-semibold ">{t("pricing")}</h4>
+            <span className="text-default">
+              {teamsPlanRequired ? (
+                t("teams_plan_required")
+              ) : price === 0 ? (
+                t("free_to_use_apps")
+              ) : (
+                <>
+                  {Intl.NumberFormat(i18n.language, {
+                    style: "currency",
+                    currency: "USD",
+                    useGrouping: false,
+                  }).format(price)}
+                  {feeType === "monthly" && `/${t("month")}`}
+                </>
+              )}
+            </span>
+          </>
+        )}
 
         <h4 className="text-emphasis mb-2 mt-8 font-semibold ">{t("contact")}</h4>
         <ul className="prose-sm -ml-1 -mr-1 leading-5">

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/apps/InstallAppButtonChild.tsx

@@ -26,6 +26,7 @@ export const InstallAppButtonChild = ({
   multiInstall,
   credentials,
   concurrentMeetings,
+  paid,
   ...props
 }: {
   userAdminTeams?: UserAdminTeams;
@@ -34,6 +35,7 @@ export const InstallAppButtonChild = ({
   multiInstall?: boolean;
   credentials?: RouterOutputs["viewer"]["appCredentialsByType"]["credentials"];
   concurrentMeetings?: boolean;
+  paid?: AppFrontendPayload["paid"];
 } & ButtonProps) => {
   const { t } = useLocale();
 
@@ -46,8 +48,27 @@ export const InstallAppButtonChild = ({
       if (error instanceof Error) showToast(error.message || t("app_could_not_be_installed"), "error");
     },
   });
+  const shouldDisableInstallation = !multiInstall ? !!(credentials && credentials.length) : false;
 
-  if (!userAdminTeams?.length || !doesAppSupportTeamInstall(appCategories, concurrentMeetings)) {
+  // Paid apps don't support team installs at the moment
+  // Also, cal.ai(the only paid app at the moment) doesn't support team install either
+  if (paid) {
+    return (
+      <Button
+        data-testid="install-app-button"
+        {...props}
+        disabled={shouldDisableInstallation}
+        color="primary"
+        size="base">
+        {paid.trial ? t("start_paid_trial") : t("subscribe")}
+      </Button>
+    );
+  }
+
+  if (
+    !userAdminTeams?.length ||
+    !doesAppSupportTeamInstall({ appCategories, concurrentMeetings, isPaid: !!paid })
+  ) {
     return (
       <Button
         data-testid="install-app-button"
@@ -55,6 +76,7 @@ export const InstallAppButtonChild = ({
         // @TODO: Overriding color and size prevent us from
         // having to duplicate InstallAppButton for now.
         color="primary"
+        disabled={shouldDisableInstallation}
         size="base">
         {multiInstall ? t("install_another") : t("install_app")}
       </Button>

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/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/eventtype/EventAdvancedTab.tsx

@@ -134,7 +134,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         {!!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>
         )}
@@ -433,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

apps/web/components/eventtype/EventAppsTab.tsx

@@ -47,7 +47,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
     };
   };
 
-  const getAppDataSetter = (appId: EventTypeAppsList): SetAppData => {
+  const getAppDataSetter = (appId: EventTypeAppsList, credentialId?: number): SetAppData => {
     return function (key, value) {
       // Always get latest data available in Form because consequent calls to setData would update the Form but not allAppsData(it would update during next render)
       const allAppsDataFromForm = methods.getValues("metadata")?.apps || {};
@@ -57,6 +57,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
         [appId]: {
           ...appData,
           [key]: value,
+          credentialId,
         },
       });
     };
@@ -76,7 +77,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
       appCards.push(
         <EventTypeAppCard
           getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
-          setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
+          setAppData={getAppDataSetter(app.slug as EventTypeAppsList, app.userCredentialIds[0])}
           key={app.slug}
           app={app}
           eventType={eventType}
@@ -90,7 +91,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
         appCards.push(
           <EventTypeAppCard
             getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
-            setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
+            setAppData={getAppDataSetter(app.slug as EventTypeAppsList, team.credentialId)}
             key={app.slug + team?.credentialId}
             app={{
               ...app,
@@ -147,7 +148,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
               return (
                 <EventTypeAppCard
                   getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
-                  setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
+                  setAppData={getAppDataSetter(app.slug as EventTypeAppsList, app.userCredentialIds[0])}
                   key={app.slug}
                   app={app}
                   eventType={eventType}

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>
     );
   };
@@ -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/EventTeamTab.tsx

@@ -76,6 +76,8 @@ const ChildrenEventTypesList = ({
       <div>
         <Label>{t("assign_to")}</Label>
         <ChildrenEventTypeSelect
+          aria-label="assignment-dropdown"
+          data-testid="assignment-dropdown"
           onChange={(options) => {
             onChange &&
               onChange(

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 = getUserAvatarUrl(user), ...rest } = props;
+  return <Avatar {...rest} alt={user.name || "Nameless User"} imageSrc={previewSrc} />;
+}

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

@@ -0,0 +1,22 @@
+import { CAL_URL } from "@calcom/lib/constants";
+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) => ({
+        href: `${CAL_URL}/${user.username}?redirect=false`,
+        alt: user.name || "",
+        title: user.name || "",
+        image: getUserAvatarUrl(user),
+      }))}
+    />
+  );
+}

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

@@ -0,0 +1,35 @@
+import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
+import { CAL_URL, 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 orgBranding = useOrgBranding();
+  const baseUrl = `${orgBranding?.fullDomain ?? CAL_URL}`;
+  const items = [
+    {
+      href: baseUrl,
+      image: `${WEBAPP_URL}/team/${organization.slug}/avatar.png`,
+      alt: organization.name || undefined,
+      title: organization.name,
+    },
+  ].concat(
+    users.map((user) => {
+      return {
+        href: `${baseUrl}/${user.username}/?redirect=false`,
+        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,294 @@
+import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { TrpcProvider } from "app/_trpc/trpc-provider";
+import { dir } from "i18next";
+import type { Session } from "next-auth";
+import { SessionProvider, useSession } from "next-auth/react";
+import { EventCollectionProvider } from "next-collect/client";
+import { appWithTranslation, type SSRConfig } from "next-i18next";
+import { ThemeProvider } from "next-themes";
+import type { AppProps as NextAppProps } from "next/app";
+import type { ReadonlyURLSearchParams } from "next/navigation";
+import { useSearchParams } from "next/navigation";
+import { useEffect, type ReactNode } from "react";
+
+import { OrgBrandingProvider } from "@calcom/features/ee/organizations/context/provider";
+import DynamicHelpscoutProvider from "@calcom/features/ee/support/lib/helpscout/providerDynamic";
+import DynamicIntercomProvider from "@calcom/features/ee/support/lib/intercom/providerDynamic";
+import { FeatureProvider } from "@calcom/features/flags/context/provider";
+import { useFlags } from "@calcom/features/flags/hooks";
+import { MetaProvider } from "@calcom/ui";
+
+import useIsBookingPage from "@lib/hooks/useIsBookingPage";
+import type { WithNonceProps } from "@lib/withNonce";
+
+import { useViewerI18n } from "@components/I18nLanguageHandler";
+import type { PageWrapperProps } from "@components/PageWrapperAppDir";
+
+// Workaround for https://github.com/vercel/next.js/issues/8592
+export type AppProps = Omit<
+  NextAppProps<
+    WithNonceProps<{
+      themeBasis?: string;
+      session: Session;
+    }>
+  >,
+  "Component"
+> & {
+  Component: NextAppProps["Component"] & {
+    requiresLicense?: boolean;
+    isThemeSupported?: boolean;
+    isBookingPage?: boolean | ((arg: { router: NextAppProps["router"] }) => boolean);
+    getLayout?: (page: React.ReactElement) => ReactNode;
+    PageWrapper?: (props: AppProps) => JSX.Element;
+  };
+
+  /** Will be defined only is there was an error */
+  err?: Error;
+};
+
+const getEmbedNamespace = (searchParams: ReadonlyURLSearchParams) => {
+  // Mostly embed query param should be available on server. Use that there.
+  // Use the most reliable detection on client
+  return typeof window !== "undefined" ? window.getEmbedNamespace() : searchParams.get("embed") ?? null;
+};
+
+// @ts-expect-error appWithTranslation expects AppProps
+const AppWithTranslationHoc = appWithTranslation(({ children }) => <>{children}</>);
+
+const CustomI18nextProvider = (props: { children: React.ReactElement; i18n?: SSRConfig }) => {
+  /**
+   * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
+   **/
+  // @TODO
+
+  const session = useSession();
+  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 = (
+    <TrpcProvider dehydratedState={props.dehydratedState}>
+      <EventCollectionProvider options={{ apiPath: "/api/collect-events" }}>
+        <SessionProvider>
+          <CustomI18nextProvider i18n={props.i18n}>
+            <TooltipProvider>
+              {/* color-scheme makes background:transparent not work which is required by embed. We need to ensure next-theme adds color-scheme to `body` instead of `html`(https://github.com/pacocoursey/next-themes/blob/main/src/index.tsx#L74). Once that's done we can enable color-scheme support */}
+              <CalcomThemeProvider
+                themeBasis={props.themeBasis}
+                nonce={props.nonce}
+                isThemeSupported={/* undefined gets treated as true */ props.isThemeSupported ?? true}
+                isBookingPage={props.isBookingPage || isBookingPage}>
+                <FeatureFlagsProvider>
+                  <OrgBrandProvider>
+                    <MetaProvider>{props.children}</MetaProvider>
+                  </OrgBrandProvider>
+                </FeatureFlagsProvider>
+              </CalcomThemeProvider>
+            </TooltipProvider>
+          </CustomI18nextProvider>
+        </SessionProvider>
+      </EventCollectionProvider>
+    </TrpcProvider>
+  );
+
+  if (isBookingPage) {
+    return RemainingProviders;
+  }
+
+  return (
+    <DynamicHelpscoutProvider>
+      <DynamicIntercomProvider>{RemainingProviders}</DynamicIntercomProvider>
+    </DynamicHelpscoutProvider>
+  );
+};
+
+export default AppProviders;

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

@@ -1,3 +1,6 @@
+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";
@@ -7,10 +10,12 @@ 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(
@@ -33,10 +38,12 @@ export const getTemporaryOrgRedirect = async ({
 
   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: eventTypeSlug ? `${redirect.toUrl}/${eventTypeSlug}` : redirect.toUrl,
+        destination: `${newDestinationWithoutQuery}${currentQueryString ? `?${currentQueryString}` : ""}`,
       },
     } as const;
   }

apps/web/lib/hooks/useIsBookingPage.ts

@@ -1,12 +1,14 @@
-import { usePathname, useSearchParams } from "next/navigation";
+import { usePathname } from "next/navigation";
 
-export default function useIsBookingPage() {
+import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
+
+export default function useIsBookingPage(): boolean {
   const pathname = usePathname();
   const isBookingPage = ["/booking/", "/cancel", "/reschedule"].some((route) => pathname?.startsWith(route));
 
-  const searchParams = useSearchParams();
-  const userParam = searchParams.get("user");
-  const teamParam = searchParams.get("team");
+  const searchParams = useCompatSearchParams();
+  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,23 @@
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
+import { useCallback } from "react";
+
+import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 
 export default function useRouterQuery<T extends string>(name: T) {
-  const searchParams = useSearchParams();
+  const searchParams = useCompatSearchParams();
   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 };
 }

apps/web/lib/hooks/useToggleQuery.tsx

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

apps/web/lib/metadata.ts

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

apps/web/lib/withEmbedSsr.test.ts

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

apps/web/lib/withEmbedSsr.tsx

@@ -1,5 +1,7 @@
 import type { GetServerSideProps, GetServerSidePropsContext, GetServerSidePropsResult } from "next";
 
+import { WEBAPP_URL } from "@calcom/lib/constants";
+
 export type EmbedProps = {
   isEmbed?: boolean;
 };
@@ -11,14 +13,25 @@ export default function withEmbedSsr(getServerSideProps: GetServerSideProps) {
     const layout = context.query.layout;
 
     if ("redirect" in ssrResponse) {
-      // Use a dummy URL https://base as the fallback base URL so that URL parsing works for relative URLs as well.
-      const destinationUrlObj = new URL(ssrResponse.redirect.destination, "https://base");
+      const destinationUrl = ssrResponse.redirect.destination;
+      let urlPrefix = "";
 
+      // Get the URL parsed from URL so that we can reliably read pathname and searchParams from it.
+      const destinationUrlObj = new URL(ssrResponse.redirect.destination, WEBAPP_URL);
+
+      // If it's a complete URL, use the origin as the prefix to ensure we redirect to the same domain.
+      if (destinationUrl.search(/^(http:|https:).*/) !== -1) {
+        urlPrefix = destinationUrlObj.origin;
+      } else {
+        // Don't use any prefix for relative URLs to ensure we stay on the same domain
+        urlPrefix = "";
+      }
+
+      const destinationQueryStr = destinationUrlObj.searchParams.toString();
       // Make sure that redirect happens to /embed page and pass on embed query param as is for preserving Cal JS API namespace
-      const newDestinationUrl = `${
-        destinationUrlObj.pathname
-      }/embed?${destinationUrlObj.searchParams.toString()}&layout=${layout}&embed=${embed}`;
-
+      const newDestinationUrl = `${urlPrefix}${destinationUrlObj.pathname}/embed?${
+        destinationQueryStr ? `${destinationQueryStr}&` : ""
+      }layout=${layout}&embed=${embed}`;
       return {
         ...ssrResponse,
         redirect: {

apps/web/middleware.ts

@@ -1,14 +1,21 @@
 import { get } from "@vercel/edge-config";
 import { collectEvents } from "next-collect/server";
-import type { NextMiddleware } from "next/server";
+import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
 
+import { getLocale } from "@calcom/features/auth/lib/getLocale";
 import { extendEventData, nextCollectBasicSettings } from "@calcom/lib/telemetry";
 
-const middleware: NextMiddleware = async (req) => {
+import { csp } from "@lib/csp";
+
+import { abTestMiddlewareFactory } from "./abTest/middlewareFactory";
+
+const middleware = async (req: NextRequest): Promise<NextResponse<unknown>> => {
   const url = req.nextUrl;
   const requestHeaders = new Headers(req.headers);
 
+  requestHeaders.set("x-url", req.url);
+
   if (!url.pathname.startsWith("/api")) {
     //
     // NOTE: When tRPC hits an error a 500 is returned, when this is received
@@ -32,6 +39,18 @@ const middleware: NextMiddleware = async (req) => {
   }
 
   const res = routingForms.handle(url);
+
+  const { nonce } = csp(req, res ?? null);
+
+  if (!process.env.CSP_POLICY) {
+    req.headers.set("x-csp", "not-opted-in");
+  } else if (!req.headers.get("x-csp")) {
+    // If x-csp not set by gSSP, then it's initialPropsOnly
+    req.headers.set("x-csp", "initialPropsOnly");
+  } else {
+    req.headers.set("x-csp", nonce ?? "");
+  }
+
   if (res) {
     return res;
   }
@@ -45,6 +64,12 @@ const middleware: NextMiddleware = async (req) => {
     requestHeaders.set("x-csp-enforce", "true");
   }
 
+  requestHeaders.set("x-pathname", url.pathname);
+
+  const locale = await getLocale(req);
+
+  requestHeaders.set("x-locale", locale);
+
   return NextResponse.next({
     request: {
       headers: requestHeaders,
@@ -74,11 +99,13 @@ export const config = {
      * Paths required by routingForms.handle
      */
     "/apps/routing_forms/:path*",
+    "/event-types",
+    "/future/event-types/",
   ],
 };
 
 export default collectEvents({
-  middleware,
+  middleware: abTestMiddlewareFactory(middleware),
   ...nextCollectBasicSettings,
   cookieName: "__clnds",
   extend: extendEventData,

apps/web/next.config.js

@@ -3,6 +3,7 @@ const CopyWebpackPlugin = require("copy-webpack-plugin");
 const os = require("os");
 const englishTranslation = require("./public/static/locales/en/common.json");
 const { withAxiom } = require("next-axiom");
+const { withSentryConfig } = require("@sentry/nextjs");
 const { version } = require("./package.json");
 const { i18n } = require("./next-i18next.config");
 const {
@@ -70,13 +71,21 @@ if (process.env.GOOGLE_API_CREDENTIALS && !validJson(process.env.GOOGLE_API_CRED
 }
 
 const informAboutDuplicateTranslations = () => {
-  const valueSet = new Set();
+  const valueMap = {};
 
   for (const key in englishTranslation) {
-    if (valueSet.has(englishTranslation[key])) {
-      console.warn("\x1b[33mDuplicate value found in:", "\x1b[0m", key);
+    const value = englishTranslation[key];
+
+    if (valueMap[value]) {
+      console.warn(
+        "\x1b[33mDuplicate value found in common.json keys:",
+        "\x1b[0m ",
+        key,
+        "and",
+        valueMap[value]
+      );
     } else {
-      valueSet.add(englishTranslation[key]);
+      valueMap[value] = key;
     }
   }
 };
@@ -92,6 +101,7 @@ if (process.env.ANALYZE === "true") {
 }
 
 plugins.push(withAxiom);
+
 const matcherConfigRootPath = {
   has: [
     {
@@ -102,6 +112,16 @@ const matcherConfigRootPath = {
   source: "/",
 };
 
+const matcherConfigRootPathEmbed = {
+  has: [
+    {
+      type: "host",
+      value: orgHostPath,
+    },
+  ],
+  source: "/embed",
+};
+
 const matcherConfigUserRoute = {
   has: [
     {
@@ -226,6 +246,14 @@ const nextConfig = {
   },
   async rewrites() {
     const beforeFiles = [
+      {
+        /**
+         * Needed due to the introduction of dotted usernames
+         * @see https://github.com/calcom/cal.com/pull/11706
+         */
+        source: "/embed.js",
+        destination: "/embed/embed.js",
+      },
       {
         source: "/login",
         destination: "/auth/login",
@@ -237,6 +265,10 @@ const nextConfig = {
               ...matcherConfigRootPath,
               destination: "/team/:orgSlug?isOrgProfile=1",
             },
+            {
+              ...matcherConfigRootPathEmbed,
+              destination: "/team/:orgSlug/embed?isOrgProfile=1",
+            },
             {
               ...matcherConfigUserRoute,
               destination: "/org/:orgSlug/:user",
@@ -525,4 +557,13 @@ const nextConfig = {
   },
 };
 
+if (!!process.env.NEXT_PUBLIC_SENTRY_DSN) {
+  nextConfig["sentry"] = {
+    autoInstrumentServerFunctions: true,
+    hideSourceMaps: true,
+  };
+
+  plugins.push(withSentryConfig);
+}
+
 module.exports = () => plugins.reduce((acc, next) => next(acc), nextConfig);

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/web",
-  "version": "3.4.3",
+  "version": "3.5.3",
   "private": true,
   "scripts": {
     "analyze": "ANALYZE=true next build",
@@ -45,7 +45,7 @@
     "@hookform/resolvers": "^2.9.7",
     "@next-auth/prisma-adapter": "^1.0.4",
     "@next/bundle-analyzer": "^13.1.6",
-    "@radix-ui/react-avatar": "^1.0.0",
+    "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.0",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
@@ -57,6 +57,7 @@
     "@radix-ui/react-switch": "^1.0.0",
     "@radix-ui/react-toggle-group": "^1.0.0",
     "@radix-ui/react-tooltip": "^1.0.0",
+    "@sentry/nextjs": "^7.73.0",
     "@stripe/react-stripe-js": "^1.10.0",
     "@stripe/stripe-js": "^1.35.0",
     "@tanstack/react-query": "^4.3.9",
@@ -167,8 +168,9 @@
     "module-alias": "^2.2.2",
     "msw": "^0.42.3",
     "node-html-parser": "^6.1.10",
+    "node-mocks-http": "^1.11.0",
     "postcss": "^8.4.18",
-    "tailwindcss": "^3.3.1",
+    "tailwindcss": "^3.3.3",
     "tailwindcss-animate": "^1.0.6",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.4"

apps/web/pages/404.tsx

@@ -3,7 +3,10 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 
-import { orgDomainConfig, subdomainSuffix } from "@calcom/features/ee/organizations/lib/orgDomains";
+import {
+  getOrgDomainConfigFromHostname,
+  subdomainSuffix,
+} from "@calcom/features/ee/organizations/lib/orgDomains";
 import { DOCS_URL, IS_CALCOM, JOIN_DISCORD, WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HeadSeo } from "@calcom/ui";
@@ -50,9 +53,12 @@ export default function Custom404() {
 
   const [url, setUrl] = useState(`${WEBSITE_URL}/signup`);
   useEffect(() => {
-    const { isValidOrgDomain, currentOrgDomain } = orgDomainConfig(window.location.host);
-    const [routerUsername] = pathname?.replace("%20", "-").split(/[?#]/);
-    if (!isValidOrgDomain || !currentOrgDomain) {
+    const { isValidOrgDomain, currentOrgDomain } = getOrgDomainConfigFromHostname({
+      hostname: window.location.host,
+    });
+
+    const [routerUsername] = pathname?.replace("%20", "-").split(/[?#]/) ?? [];
+    if (routerUsername && (!isValidOrgDomain || !currentOrgDomain)) {
       const splitPath = routerUsername.split("/");
       if (splitPath[1] === "team" && splitPath.length === 3) {
         // Accessing a non-existent team
@@ -66,13 +72,12 @@ export default function Custom404() {
         setUrl(`${WEBSITE_URL}/signup?username=${routerUsername.replace("/", "")}`);
       }
     } else {
-      setUsername(currentOrgDomain);
+      setUsername(currentOrgDomain ?? "");
       setCurrentPageType(pageType.ORG);
       setUrl(
-        `${WEBSITE_URL}/signup?callbackUrl=settings/organizations/new%3Fslug%3D${currentOrgDomain.replace(
-          "/",
-          ""
-        )}`
+        `${WEBSITE_URL}/signup?callbackUrl=settings/organizations/new%3Fslug%3D${
+          currentOrgDomain?.replace("/", "") ?? ""
+        }`
       );
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

apps/web/pages/500.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
-import { useSearchParams } from "next/navigation";
 
 import { APP_NAME } from "@calcom/lib/constants";
+import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, showToast } from "@calcom/ui";
 import { Copy } from "@calcom/ui/components/icon";
@@ -9,7 +9,7 @@ import { Copy } from "@calcom/ui/components/icon";
 import PageWrapper from "@components/PageWrapper";
 
 export default function Error500() {
-  const searchParams = useSearchParams();
+  const searchParams = useCompatSearchParams();
   const { t } = useLocale();
 
   return (

apps/web/pages/[user].tsx

@@ -11,7 +11,7 @@ import {
   useEmbedStyles,
   useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
-import OrganizationAvatar from "@calcom/features/ee/organizations/components/OrganizationAvatar";
+import OrganizationMemberAvatar from "@calcom/features/ee/organizations/components/OrganizationMemberAvatar";
 import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { EventTypeDescriptionLazy as EventTypeDescription } from "@calcom/features/eventtypes/components";
@@ -25,7 +25,7 @@ import { stripMarkdown } from "@calcom/lib/stripMarkdown";
 import prisma from "@calcom/prisma";
 import { RedirectType, type EventType, type User } from "@calcom/prisma/client";
 import { baseEventTypeSelect } from "@calcom/prisma/selects";
-import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+import { EventTypeMetaDataSchema, teamMetadataSchema } from "@calcom/prisma/zod-utils";
 import { HeadSeo, UnpublishedEntity } from "@calcom/ui";
 import { Verified, ArrowRight } from "@calcom/ui/components/icon";
 
@@ -54,6 +54,7 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
     // So it doesn't display in the Link (and make tests fail)
     user: _user,
     orgSlug: _orgSlug,
+    redirect: _redirect,
     ...query
   } = useRouterQuery();
 
@@ -82,7 +83,7 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
         description={markdownStrippedBio}
         meeting={{
           title: markdownStrippedBio,
-          profile: { name: `${profile.name}`, image: null },
+          profile: { name: `${profile.name}`, image: user.avatarUrl || null },
           users: [{ username: `${user.username}`, name: `${user.name}` }],
         }}
         nextSeoProps={{
@@ -99,13 +100,24 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
             "max-w-3xl px-4 py-24"
           )}>
           <div className="mb-8 text-center">
-            <OrganizationAvatar
-              imageSrc={profile.image}
+            <OrganizationMemberAvatar
               size="xl"
-              alt={profile.name}
-              organizationSlug={profile.organizationSlug}
+              user={{
+                organizationId: profile.organization?.id,
+                name: profile.name,
+                username: profile.username,
+              }}
+              organization={
+                profile.organization?.id
+                  ? {
+                      id: profile.organization.id,
+                      slug: profile.organization.slug,
+                      requestedSlug: null,
+                    }
+                  : null
+              }
             />
-            <h1 className="font-cal text-emphasis mb-1 text-3xl" data-testid="name-title">
+            <h1 className="font-cal text-emphasis my-1 text-3xl" data-testid="name-title">
               {profile.name}
               {user.verified && (
                 <Verified className=" mx-1 -mt-1 inline h-6 w-6 fill-blue-500 text-white dark:text-black" />
@@ -226,10 +238,15 @@ export type UserPageProps = {
     theme: string | null;
     brandColor: string;
     darkBrandColor: string;
-    organizationSlug: string | null;
+    organization: {
+      requestedSlug: string | null;
+      slug: string | null;
+      id: number | null;
+    };
     allowSEOIndexing: boolean;
+    username: string | null;
   };
-  users: Pick<User, "away" | "name" | "username" | "bio" | "verified">[];
+  users: Pick<User, "away" | "name" | "username" | "bio" | "verified" | "avatarUrl">[];
   themeBasis: string | null;
   markdownStrippedBio: string;
   safeBio: string;
@@ -248,6 +265,7 @@ export type UserPageProps = {
     | "slug"
     | "length"
     | "hidden"
+    | "lockTimeZoneToggleOnBookingPage"
     | "requiresConfirmation"
     | "requiresBookerEmailVerification"
     | "price"
@@ -258,10 +276,7 @@ export type UserPageProps = {
 
 export const getServerSideProps: GetServerSideProps<UserPageProps> = async (context) => {
   const ssr = await ssrInit(context);
-  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(
-    context.req.headers.host ?? "",
-    context.params?.orgSlug
-  );
+  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req, context.params?.orgSlug);
   const usernameList = getUsernameList(context.query.user as string);
   const isOrgContext = isValidOrgDomain && currentOrgDomain;
   const dataFetchStart = Date.now();
@@ -281,11 +296,13 @@ export const getServerSideProps: GetServerSideProps<UserPageProps> = async (cont
       metadata: true,
       brandColor: true,
       darkBrandColor: true,
+      avatarUrl: true,
       organizationId: true,
       organization: {
         select: {
           slug: true,
           name: true,
+          metadata: true,
         },
       },
       theme: true,
@@ -313,6 +330,10 @@ export const getServerSideProps: GetServerSideProps<UserPageProps> = async (cont
 
   const users = usersWithoutAvatar.map((user) => ({
     ...user,
+    organization: {
+      ...user.organization,
+      metadata: user.organization?.metadata ? teamMetadataSchema.parse(user.organization.metadata) : null,
+    },
     avatar: `/${user.username}/avatar.png`,
   }));
 
@@ -321,6 +342,7 @@ export const getServerSideProps: GetServerSideProps<UserPageProps> = async (cont
       slug: usernameList[0],
       redirectType: RedirectType.User,
       eventTypeSlug: null,
+      currentQuery: context.query,
     });
 
     if (redirect) {
@@ -343,9 +365,15 @@ export const getServerSideProps: GetServerSideProps<UserPageProps> = async (cont
     image: user.avatar,
     theme: user.theme,
     brandColor: user.brandColor,
+    avatarUrl: user.avatarUrl,
     darkBrandColor: user.darkBrandColor,
-    organizationSlug: user.organization?.slug ?? null,
     allowSEOIndexing: user.allowSEOIndexing ?? true,
+    username: user.username,
+    organization: {
+      id: user.organizationId,
+      slug: user.organization?.slug ?? null,
+      requestedSlug: user.organization?.metadata?.requestedSlug ?? null,
+    },
   };
 
   const eventTypesWithHidden = await getEventTypesWithHiddenFromDB(user.id);
@@ -361,6 +389,16 @@ export const getServerSideProps: GetServerSideProps<UserPageProps> = async (cont
     descriptionAsSafeHTML: markdownToSafeHTML(eventType.description),
   }));
 
+  // if profile only has one public event-type, redirect to it
+  if (eventTypes.length === 1 && context.query.redirect !== "false") {
+    return {
+      redirect: {
+        permanent: false,
+        destination: `/${user.username}/${eventTypes[0].slug}`,
+      },
+    };
+  }
+
   const safeBio = markdownToSafeHTML(user.bio) || "";
 
   const markdownStrippedBio = stripMarkdown(user?.bio || "");
@@ -372,6 +410,7 @@ export const getServerSideProps: GetServerSideProps<UserPageProps> = async (cont
         name: user.name,
         username: user.username,
         bio: user.bio,
+        avatarUrl: user.avatarUrl,
         away: user.away,
         verified: user.verified,
       })),

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

@@ -72,10 +72,7 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
 
   const { ssrInit } = await import("@server/lib/ssr");
   const ssr = await ssrInit(context);
-  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(
-    context.req.headers.host ?? "",
-    context.params?.orgSlug
-  );
+  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req, context.params?.orgSlug);
 
   const users = await prisma.user.findMany({
     where: {
@@ -148,10 +145,7 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
   const { user: usernames, type: slug } = paramsSchema.parse(context.params);
   const username = usernames[0];
   const { rescheduleUid, bookingUid, duration: queryDuration } = context.query;
-  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(
-    context.req.headers.host ?? "",
-    context.params?.orgSlug
-  );
+  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req, context.params?.orgSlug);
 
   const isOrgContext = currentOrgDomain && isValidOrgDomain;
 
@@ -160,6 +154,7 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
       slug: usernames[0],
       redirectType: RedirectType.User,
       eventTypeSlug: slug,
+      currentQuery: context.query,
     });
 
     if (redirect) {

apps/web/pages/api/auth/signup.ts

@@ -1,218 +1,53 @@
-import type { NextApiRequest, NextApiResponse } from "next";
+import type { NextApiResponse } from "next";
 
-import dayjs from "@calcom/dayjs";
-import { checkPremiumUsername } from "@calcom/ee/common/lib/checkPremiumUsername";
-import { hashPassword } from "@calcom/features/auth/lib/hashPassword";
-import { sendEmailVerification } from "@calcom/features/auth/lib/verifyEmail";
-import { IS_CALCOM } from "@calcom/lib/constants";
-import slugify from "@calcom/lib/slugify";
-import { closeComUpsertTeamUser } from "@calcom/lib/sync/SyncServiceManager";
-import { validateUsernameInTeam, validateUsername } from "@calcom/lib/validateUsername";
-import prisma from "@calcom/prisma";
-import { IdentityProvider } from "@calcom/prisma/enums";
-import { MembershipRole } from "@calcom/prisma/enums";
-import { signupSchema } from "@calcom/prisma/zod-utils";
-import { teamMetadataSchema } from "@calcom/prisma/zod-utils";
-
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  if (req.method !== "POST") {
-    return res.status(405).end();
-  }
+import calcomSignupHandler from "@calcom/feature-auth/signup/handlers/calcomHandler";
+import selfHostedSignupHandler from "@calcom/feature-auth/signup/handlers/selfHostedHandler";
+import { type RequestWithUsernameStatus } from "@calcom/features/auth/signup/username";
+import { IS_PREMIUM_USERNAME_ENABLED } from "@calcom/lib/constants";
+import { HttpError } from "@calcom/lib/http-error";
+import logger from "@calcom/lib/logger";
 
+function ensureSignupIsEnabled() {
   if (process.env.NEXT_PUBLIC_DISABLE_SIGNUP === "true") {
-    res.status(403).json({ message: "Signup is disabled" });
-    return;
-  }
-
-  const data = req.body;
-  const { email, password, language, token } = signupSchema.parse(data);
-
-  const username = slugify(data.username);
-  const userEmail = email.toLowerCase();
-
-  if (!username) {
-    res.status(422).json({ message: "Invalid username" });
-    return;
-  }
-
-  let foundToken: { id: number; teamId: number | null; expires: Date } | null = null;
-  if (token) {
-    foundToken = await prisma.verificationToken.findFirst({
-      where: {
-        token,
-      },
-      select: {
-        id: true,
-        expires: true,
-        teamId: true,
-      },
-    });
-
-    if (!foundToken) {
-      return res.status(401).json({ message: "Invalid Token" });
-    }
-
-    if (dayjs(foundToken?.expires).isBefore(dayjs())) {
-      return res.status(401).json({ message: "Token expired" });
-    }
-    if (foundToken?.teamId) {
-      const teamUserValidation = await validateUsernameInTeam(username, userEmail, foundToken?.teamId);
-      if (!teamUserValidation.isValid) {
-        return res.status(409).json({ message: "Username or email is already taken" });
-      }
-    }
-  } else {
-    const userValidation = await validateUsername(username, userEmail);
-    if (!userValidation.isValid) {
-      return res.status(409).json({ message: "Username or email is already taken" });
-    }
-  }
-
-  const hashedPassword = await hashPassword(password);
-
-  if (foundToken && foundToken?.teamId) {
-    const team = await prisma.team.findUnique({
-      where: {
-        id: foundToken.teamId,
-      },
-    });
-    if (team) {
-      const teamMetadata = teamMetadataSchema.parse(team?.metadata);
-
-      if (IS_CALCOM && (!teamMetadata?.isOrganization || !!team.parentId)) {
-        const checkUsername = await checkPremiumUsername(username);
-        if (checkUsername.premium) {
-          // This signup page is ONLY meant for team invites and local setup. Not for every day users.
-          // In singup redesign/refactor coming up @sean will tackle this to make them the same API/page instead of two.
-          return res.status(422).json({
-            message: "Sign up from https://cal.com/signup to claim your premium username",
-          });
-        }
-      }
-
-      // Identify the org id in an org context signup, either the invited team is an org
-      // or has a parentId, otherwise parentId will be null, making orgId null
-      const orgId = teamMetadata?.isOrganization ? team.id : team.parentId;
-
-      const user = await prisma.user.upsert({
-        where: { email: userEmail },
-        update: {
-          username,
-          password: hashedPassword,
-          emailVerified: new Date(Date.now()),
-          identityProvider: IdentityProvider.CAL,
-          organizationId: orgId,
-        },
-        create: {
-          username,
-          email: userEmail,
-          password: hashedPassword,
-          identityProvider: IdentityProvider.CAL,
-          organizationId: orgId,
-        },
-      });
-
-      const membership = await prisma.membership.upsert({
-        where: {
-          userId_teamId: { userId: user.id, teamId: team.id },
-        },
-        update: {
-          accepted: true,
-        },
-        create: {
-          userId: user.id,
-          teamId: team.id,
-          accepted: true,
-          role: MembershipRole.MEMBER,
-        },
-      });
-      closeComUpsertTeamUser(team, user, membership.role);
-
-      // Accept any child team invites for orgs and create a membership for the org itself
-      if (team.parentId) {
-        // Create (when invite link is used) or Update (when regular email invitation is used) membership for the organization itself
-        await prisma.membership.upsert({
-          where: {
-            userId_teamId: { userId: user.id, teamId: team.parentId },
-          },
-          update: {
-            accepted: true,
-          },
-          create: {
-            userId: user.id,
-            teamId: team.parentId,
-            accepted: true,
-            role: MembershipRole.MEMBER,
-          },
-        });
-
-        // We do a membership update twice so we can join the ORG invite if the user is invited to a team witin a ORG
-        await prisma.membership.updateMany({
-          where: {
-            userId: user.id,
-            team: {
-              id: team.parentId,
-            },
-            accepted: false,
-          },
-          data: {
-            accepted: true,
-          },
-        });
-
-        // Join any other invites
-        await prisma.membership.updateMany({
-          where: {
-            userId: user.id,
-            team: {
-              parentId: team.parentId,
-            },
-            accepted: false,
-          },
-          data: {
-            accepted: true,
-          },
-        });
-      }
-    }
-
-    // Cleanup token after use
-    await prisma.verificationToken.delete({
-      where: {
-        id: foundToken.id,
-      },
-    });
-  } else {
-    if (IS_CALCOM) {
-      const checkUsername = await checkPremiumUsername(username);
-      if (checkUsername.premium) {
-        res.status(422).json({
-          message: "Sign up from https://cal.com/signup to claim your premium username",
-        });
-        return;
-      }
-    }
-    await prisma.user.upsert({
-      where: { email: userEmail },
-      update: {
-        username,
-        password: hashedPassword,
-        emailVerified: new Date(Date.now()),
-        identityProvider: IdentityProvider.CAL,
-      },
-      create: {
-        username,
-        email: userEmail,
-        password: hashedPassword,
-        identityProvider: IdentityProvider.CAL,
-      },
-    });
-    await sendEmailVerification({
-      email: userEmail,
-      username,
-      language,
+    throw new HttpError({
+      statusCode: 403,
+      message: "Signup is disabled",
     });
   }
-
-  res.status(201).json({ message: "Created user" });
+}
+
+function ensureReqIsPost(req: RequestWithUsernameStatus) {
+  if (req.method !== "POST") {
+    throw new HttpError({
+      statusCode: 405,
+      message: "Method not allowed",
+    });
+  }
+}
+
+export default async function handler(req: RequestWithUsernameStatus, res: NextApiResponse) {
+  // Use a try catch instead of returning res every time
+  try {
+    ensureReqIsPost(req);
+    ensureSignupIsEnabled();
+
+    /**
+     * Im not sure its worth merging these two handlers. They are different enough to be separate.
+     * Calcom handles things like creating a stripe customer - which we don't need to do for self hosted.
+     * It also handles things like premium username.
+     * TODO: (SEAN) - Extract a lot of the logic from calcomHandler into a separate file and import it into both handlers.
+     * @zomars: We need to be able to test this with E2E. They way it's done RN it will never run on CI.
+     */
+    if (IS_PREMIUM_USERNAME_ENABLED) {
+      return await calcomSignupHandler(req, res);
+    }
+
+    return await selfHostedSignupHandler(req, res);
+  } catch (e) {
+    if (e instanceof HttpError) {
+      return res.status(e.statusCode).json({ message: e.message });
+    }
+    logger.error(e);
+    return res.status(500).json({ message: "Internal server error" });
+  }
 }

apps/web/pages/api/avatar/[uuid].ts

@@ -0,0 +1,61 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { z } from "zod";
+
+import { AVATAR_FALLBACK } from "@calcom/lib/constants";
+import prisma from "@calcom/prisma";
+
+const querySchema = z.object({
+  uuid: z.string().transform((objectKey) => objectKey.split(".")[0]),
+});
+
+const handleValidationError = (res: NextApiResponse, error: z.ZodError): void => {
+  const errors = error.errors.map((err) => ({
+    path: err.path.join("."),
+    errorCode: `error.validation.${err.code}`,
+  }));
+
+  res.status(400).json({
+    message: "VALIDATION_ERROR",
+    errors,
+  });
+};
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const result = querySchema.safeParse(req.query);
+  if (!result.success) {
+    return handleValidationError(res, result.error);
+  }
+
+  const { uuid: objectKey } = result.data;
+
+  let img;
+  try {
+    const { data } = await prisma.avatar.findUniqueOrThrow({
+      where: {
+        objectKey,
+      },
+      select: {
+        data: true,
+      },
+    });
+    img = data;
+  } catch (e) {
+    // If anything goes wrong or avatar is not found, use default avatar
+    res.writeHead(302, {
+      Location: AVATAR_FALLBACK,
+    });
+
+    res.end();
+    return;
+  }
+
+  const decoded = img.toString().replace("data:image/png;base64,", "").replace("data:image/jpeg;base64,", "");
+  const imageResp = Buffer.from(decoded, "base64");
+
+  res.writeHead(200, {
+    "Content-Type": "image/png",
+    "Content-Length": imageResp.length,
+  });
+
+  res.end(imageResp);
+}

apps/web/pages/api/book/event.ts

@@ -2,9 +2,18 @@ import type { NextApiRequest, NextApiResponse } from "next";
 
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import handleNewBooking from "@calcom/features/bookings/lib/handleNewBooking";
+import { checkRateLimitAndThrowError } from "@calcom/lib/checkRateLimitAndThrowError";
+import getIP from "@calcom/lib/getIP";
 import { defaultResponder } from "@calcom/lib/server";
 
 async function handler(req: NextApiRequest & { userId?: number }, res: NextApiResponse) {
+  const userIp = getIP(req);
+
+  await checkRateLimitAndThrowError({
+    rateLimitingType: "core",
+    identifier: userIp,
+  });
+
   const session = await getServerSession({ req, res });
   /* To mimic API behavior and comply with types */
   req.userId = session?.user?.id || -1;

apps/web/pages/api/book/recurring-event.ts

@@ -3,39 +3,49 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import handleNewBooking from "@calcom/features/bookings/lib/handleNewBooking";
 import type { BookingResponse, RecurringBookingCreateBody } from "@calcom/features/bookings/types";
+import { checkRateLimitAndThrowError } from "@calcom/lib/checkRateLimitAndThrowError";
+import getIP from "@calcom/lib/getIP";
 import { defaultResponder } from "@calcom/lib/server";
 import type { AppsStatus } from "@calcom/types/Calendar";
 
 // @TODO: Didn't look at the contents of this function in order to not break old booking page.
 
 async function handler(req: NextApiRequest & { userId?: number }, res: NextApiResponse) {
+  const userIp = getIP(req);
+
+  await checkRateLimitAndThrowError({
+    rateLimitingType: "core",
+    identifier: userIp,
+  });
   const data: RecurringBookingCreateBody[] = req.body;
   const session = await getServerSession({ req, res });
   const createdBookings: BookingResponse[] = [];
   const allRecurringDates: string[] = data.map((booking) => booking.start);
-  let appsStatus: AppsStatus[] | undefined = undefined;
+  const appsStatus: AppsStatus[] | undefined = undefined;
 
   /* To mimic API behavior and comply with types */
   req.userId = session?.user?.id || -1;
+  const numSlotsToCheckForAvailability = 2;
 
-  // Reversing to accumulate results for noEmail instances first, to then lastly, create the
-  // emailed booking taking into account accumulated results to send app status accurately
-  for (let key = data.length - 1; key >= 0; key--) {
+  for (let key = 0; key < data.length; key++) {
     const booking = data[key];
-    if (key === 0) {
-      const calcAppsStatus: { [key: string]: AppsStatus } = createdBookings
-        .flatMap((book) => (book.appsStatus !== undefined ? book.appsStatus : []))
-        .reduce((prev, curr) => {
-          if (prev[curr.type]) {
-            prev[curr.type].failures += curr.failures;
-            prev[curr.type].success += curr.success;
-          } else {
-            prev[curr.type] = curr;
-          }
-          return prev;
-        }, {} as { [key: string]: AppsStatus });
-      appsStatus = Object.values(calcAppsStatus);
-    }
+    // Disable AppStatus in Recurring Booking Email as it requires us to iterate backwards to be able to compute the AppsStatus for all the bookings except the very first slot and then send that slot's email with statuses
+    // It is also doubtful that how useful is to have the AppsStatus of all the bookings in the email.
+    // It is more important to iterate forward and check for conflicts for only first few bookings defined by 'numSlotsToCheckForAvailability'
+    // if (key === 0) {
+    //   const calcAppsStatus: { [key: string]: AppsStatus } = createdBookings
+    //     .flatMap((book) => (book.appsStatus !== undefined ? book.appsStatus : []))
+    //     .reduce((prev, curr) => {
+    //       if (prev[curr.type]) {
+    //         prev[curr.type].failures += curr.failures;
+    //         prev[curr.type].success += curr.success;
+    //       } else {
+    //         prev[curr.type] = curr;
+    //       }
+    //       return prev;
+    //     }, {} as { [key: string]: AppsStatus });
+    //   appsStatus = Object.values(calcAppsStatus);
+    // }
 
     const recurringEventReq: NextApiRequest & { userId?: number } = req;
 
@@ -49,6 +59,7 @@ async function handler(req: NextApiRequest & { userId?: number }, res: NextApiRe
 
     const eachRecurringBooking = await handleNewBooking(recurringEventReq, {
       isNotAnApiCall: true,
+      skipAvailabilityCheck: key >= numSlotsToCheckForAvailability,
     });
 
     createdBookings.push(eachRecurringBooking);
@@ -56,4 +67,6 @@ async function handler(req: NextApiRequest & { userId?: number }, res: NextApiRe
   return createdBookings;
 }
 
+export const handleRecurringEventBooking = handler;
+
 export default defaultResponder(handler);

apps/web/pages/api/integrations/[...args].ts

@@ -73,7 +73,8 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
       redirectUrl = handler.redirect?.url || getInstalledAppPath(handler);
       res.json({ url: redirectUrl, newTab: handler.redirect?.newTab });
     }
-    return res.status(200);
+    if (!res.writableEnded) return res.status(200);
+    return res;
   } catch (error) {
     console.error(error);
     if (error instanceof HttpError) {

apps/web/pages/api/integrations/subscriptions/webhook.ts

@@ -0,0 +1,116 @@
+import { buffer } from "micro";
+import type { NextApiRequest, NextApiResponse } from "next";
+import type Stripe from "stripe";
+
+import stripe from "@calcom/app-store/stripepayment/lib/server";
+import { IS_PRODUCTION } from "@calcom/lib/constants";
+import { getErrorFromUnknown } from "@calcom/lib/errors";
+import { HttpError as HttpCode } from "@calcom/lib/http-error";
+import prisma from "@calcom/prisma";
+
+export const config = {
+  api: {
+    bodyParser: false,
+  },
+};
+
+// This file is a catch-all for any integration related subscription/paid app.
+
+const handleSubscriptionUpdate = async (event: Stripe.Event) => {
+  const subscription = event.data.object as Stripe.Subscription;
+  if (!subscription.id) throw new HttpCode({ statusCode: 400, message: "Subscription ID not found" });
+
+  const app = await prisma.credential.findFirst({
+    where: {
+      subscriptionId: subscription.id,
+    },
+  });
+
+  if (!app) {
+    throw new HttpCode({ statusCode: 202, message: "Received and discarded" });
+  }
+
+  await prisma.credential.update({
+    where: {
+      id: app.id,
+    },
+    data: {
+      paymentStatus: subscription.status,
+    },
+  });
+};
+
+const handleSubscriptionDeleted = async (event: Stripe.Event) => {
+  const subscription = event.data.object as Stripe.Subscription;
+  if (!subscription.id) throw new HttpCode({ statusCode: 400, message: "Subscription ID not found" });
+
+  const app = await prisma.credential.findFirst({
+    where: {
+      subscriptionId: subscription.id,
+    },
+  });
+
+  if (!app) {
+    throw new HttpCode({ statusCode: 202, message: "Received and discarded" });
+  }
+
+  // should we delete the credential here rather than marking as inactive?
+  await prisma.credential.update({
+    where: {
+      id: app.id,
+    },
+    data: {
+      paymentStatus: "inactive",
+      billingCycleStart: null,
+    },
+  });
+};
+
+type WebhookHandler = (event: Stripe.Event) => Promise<void>;
+
+const webhookHandlers: Record<string, WebhookHandler | undefined> = {
+  "customer.subscription.updated": handleSubscriptionUpdate,
+  "customer.subscription.deleted": handleSubscriptionDeleted,
+};
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    if (req.method !== "POST") {
+      throw new HttpCode({ statusCode: 405, message: "Method Not Allowed" });
+    }
+    const sig = req.headers["stripe-signature"];
+    if (!sig) {
+      throw new HttpCode({ statusCode: 400, message: "Missing stripe-signature" });
+    }
+
+    if (!process.env.STRIPE_WEBHOOK_SECRET_APPS) {
+      throw new HttpCode({ statusCode: 500, message: "Missing process.env.STRIPE_WEBHOOK_SECRET_APPS" });
+    }
+    const requestBuffer = await buffer(req);
+    const payload = requestBuffer.toString();
+
+    const event = stripe.webhooks.constructEvent(payload, sig, process.env.STRIPE_WEBHOOK_SECRET_APPS);
+
+    const handler = webhookHandlers[event.type];
+    if (handler) {
+      await handler(event);
+    } else {
+      /** Not really an error, just letting Stripe know that the webhook was received but unhandled */
+      throw new HttpCode({
+        statusCode: 202,
+        message: `Unhandled Stripe Webhook event type ${event.type}`,
+      });
+    }
+  } catch (_err) {
+    const err = getErrorFromUnknown(_err);
+    console.error(`Webhook Error: ${err.message}`);
+    res.status(err.statusCode ?? 500).send({
+      message: err.message,
+      stack: IS_PRODUCTION ? undefined : err.stack,
+    });
+    return;
+  }
+
+  // Return a response to acknowledge receipt of the event
+  res.json({ received: true });
+}

apps/web/pages/api/logo.ts

@@ -154,7 +154,7 @@ async function getTeamLogos(subdomain: string, isValidOrgDomain: boolean) {
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const { query } = req;
   const parsedQuery = logoApiSchema.parse(query);
-  const { isValidOrgDomain } = orgDomainConfig(req.headers.host ?? "");
+  const { isValidOrgDomain } = orgDomainConfig(req);
 
   const hostname = req?.headers["host"];
   if (!hostname) throw new Error("No hostname");

apps/web/pages/api/recorded-daily-video.ts

@@ -62,6 +62,46 @@ const triggerWebhook = async ({
   await Promise.all(promises);
 };
 
+const checkIfUserIsPartOfTheSameTeam = async (
+  teamId: number | undefined | null,
+  userId: number,
+  userEmail: string | undefined | null
+) => {
+  if (!teamId) return false;
+
+  const getUserQuery = () => {
+    if (!!userEmail) {
+      return {
+        OR: [
+          {
+            id: userId,
+          },
+          {
+            email: userEmail,
+          },
+        ],
+      };
+    } else {
+      return {
+        id: userId,
+      };
+    }
+  };
+
+  const team = await prisma.team.findFirst({
+    where: {
+      id: teamId,
+      members: {
+        some: {
+          user: getUserQuery(),
+        },
+      },
+    },
+  });
+
+  return !!team;
+};
+
 async function handler(req: NextApiRequest, res: NextApiResponse) {
   if (!process.env.SENDGRID_API_KEY || !process.env.SENDGRID_EMAIL) {
     return res.status(405).json({ message: "No SendGrid API key or email" });
@@ -137,12 +177,22 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 
     const isUserAttendeeOrOrganiser =
       booking?.user?.id === session.user.id ||
-      attendeesList.find((attendee) => attendee.id === session.user.id);
+      attendeesList.find(
+        (attendee) => attendee.id === session.user.id || attendee.email === session.user.email
+      );
 
     if (!isUserAttendeeOrOrganiser) {
-      return res.status(403).send({
-        message: "Unauthorised",
-      });
+      const isUserMemberOfTheTeam = checkIfUserIsPartOfTheSameTeam(
+        booking?.eventType?.teamId,
+        session.user.id,
+        session.user.email
+      );
+
+      if (!isUserMemberOfTheTeam) {
+        return res.status(403).send({
+          message: "Unauthorised",
+        });
+      }
     }
 
     await prisma.booking.update({
@@ -202,7 +252,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 
     return res.status(403).json({ message: "User does not have team plan to send out emails" });
   } catch (err) {
-    console.warn("something_went_wrong", err);
+    console.warn("Error in /recorded-daily-video", err);
     return res.status(500).json({ message: "something went wrong" });
   }
 }