v3.2.4

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

.env.appStore.example

@@ -1,6 +1,7 @@
 # ********** INDEX **********
 #
 # - APP STORE
+#   - BASECAMP
 #   - DAILY.CO VIDEO
 #   - GOOGLE CALENDAR/MEET/LOGIN
 #   - HUBSPOT
@@ -20,6 +21,14 @@
 
 # - APP STORE **********************************************************************************************
 # ⚠️ ⚠️ ⚠️ THESE WILL BE MIGRATED TO THE DATABASE TO PREVENT AWS's 4KB ENV QUOTA ⚠️ ⚠️ ⚠️
+
+#   - BASECAMP
+# Used to enable Basecamp integration with Cal.com
+# @see https://github.com/calcom/cal.com#obtaining-basecamp-client-id-and-secret
+BASECAMP3_CLIENT_ID=
+BASECAMP3_CLIENT_SECRET=
+BASECAMP3_USER_AGENT=
+
 #   - DAILY.CO VIDEO
 # Enables Cal Video. to get your key
 # 1. Visit our [Daily.co Partnership Form](https://go.cal.com/daily) and enter your information

.env.example

@@ -126,8 +126,7 @@ TWILIO_WHATSAPP_PHONE_NUMBER=
 NEXT_PUBLIC_SENDER_ID=
 TWILIO_VERIFY_SID=
 
-# This is used so we can bypass emails in auth flows for E2E testing
-# 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
@@ -172,6 +171,12 @@ EMAIL_SERVER_PORT=1025
 ## You will need to provision an App Password.
 ## @see https://support.google.com/accounts/answer/185833
 # EMAIL_SERVER_PASSWORD='<gmail_app_password>'
+
+# Used for E2E for email testing
+# Set it to "1" if you need to email checks in E2E tests locally
+# Make sure to run mailhog container manually or with `yarn dx`
+E2E_TEST_MAILHOG_ENABLED=
+
 # **********************************************************************************************************
 
 # Set the following value to true if you wish to enable Team Impersonation
@@ -215,3 +220,8 @@ PROJECT_ID_VERCEL=
 TEAM_ID_VERCEL=
 # Get it from: https://vercel.com/account/tokens
 AUTH_BEARER_TOKEN_VERCEL=
+
+#   - APPLE CALENDAR
+# Used for E2E tests on Apple Calendar
+E2E_TEST_APPLE_CALENDAR_EMAIL=""
+E2E_TEST_APPLE_CALENDAR_PASSWORD=""

.github/workflows/apply-issue-labels-to-pr.yml

@@ -5,16 +5,15 @@ on:
     types:
       - opened
 
-
 jobs:
   label_on_pr:
     runs-on: ubuntu-latest
-    
+
     permissions:
       contents: none
       issues: read
       pull-requests: write
-    
+
     steps:
       - name: Apply labels from linked issue to PR
         uses: actions/github-script@v5

.github/workflows/check-if-ui-has-changed.yml

@@ -1,7 +1,7 @@
 # .github/workflows/chromatic.yml
 
 # Workflow name
-name: 'Chromatic'
+name: "Chromatic"
 
 # Event for the workflow
 on:

.github/workflows/cron-bookingReminder.yml

@@ -4,8 +4,8 @@ on:
   # "Scheduled workflows run on the latest commit on the default or base branch."
   # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
   schedule:
-    # Runs “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
-    - cron: "0,15,30,45 * * * *"
+    # Runs "At every 15th minute." (see https://crontab.guru)
+    - cron: "*/15 * * * *"
 jobs:
   cron-bookingReminder:
     env:
@@ -20,4 +20,4 @@ jobs:
             -X POST \
             -H 'content-type: application/json' \
             -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
-            --fail
+            -sSf

.github/workflows/cron-downgradeUsers.yml

@@ -5,7 +5,7 @@ on:
   # "Scheduled workflows run on the latest commit on the default or base branch."
   # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
   schedule:
-    # Runs “Every month at 1st (see https://crontab.guru)
+    # Runs "At 00:00 on day-of-month 1." (see https://crontab.guru)
     - cron: "0 0 1 * *"
 jobs:
   cron-downgradeUsers:
@@ -21,4 +21,4 @@ jobs:
             -X POST \
             -H 'content-type: application/json' \
             -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
-            --fail
+            -sSf

.github/workflows/cron-scheduleEmailReminders.yml

@@ -4,8 +4,8 @@ on:
   # "Scheduled workflows run on the latest commit on the default or base branch."
   # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
   schedule:
-    # Runs “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
-    - cron: "0,15,30,45 * * * *"
+    # Runs "At every 15th minute." (see https://crontab.guru)
+    - cron: "*/15 * * * *"
 jobs:
   cron-scheduleEmailReminders:
     env:
@@ -20,4 +20,4 @@ jobs:
             -X POST \
             -H 'content-type: application/json' \
             -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
-            --fail
+            -sSf

.github/workflows/cron-scheduleSMSReminders.yml

@@ -4,8 +4,8 @@ on:
   # "Scheduled workflows run on the latest commit on the default or base branch."
   # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
   schedule:
-    # Runs “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
-    - cron: "0,15,30,45 * * * *"
+    # Runs "At every 15th minute." (see https://crontab.guru)
+    - cron: "*/15 * * * *"
 jobs:
   cron-scheduleSMSReminders:
     env:
@@ -20,4 +20,4 @@ jobs:
             -X POST \
             -H 'content-type: application/json' \
             -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
-            --fail
+            -sSf

.github/workflows/cron-scheduleWhatsappReminders.yml

@@ -4,8 +4,8 @@ on:
   # "Scheduled workflows run on the latest commit on the default or base branch."
   # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
   schedule:
-    # Runs “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
-    - cron: "0,15,30,45 * * * *"
+    # Runs "At every 15th minute." (see https://crontab.guru)
+    - cron: "*/15 * * * *"
 jobs:
   cron-scheduleWhatsappReminders:
     env:
@@ -20,4 +20,4 @@ jobs:
             -X POST \
             -H 'content-type: application/json' \
             -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
-            --fail
+            -sSf

.github/workflows/cron-stale-issue.yml

@@ -8,7 +8,7 @@ on:
   # "Scheduled workflows run on the latest commit on the default or base branch."
   # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
   schedule:
-    # Runs every day (see https://crontab.guru)
+    # Runs "At 00:00." every day (see https://crontab.guru)
     - cron: "0 0 * * *"
   workflow_dispatch:
 jobs:

.github/workflows/cron-syncAppMeta.yml

@@ -5,7 +5,7 @@ on:
   # "Scheduled workflows run on the latest commit on the default or base branch."
   # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
   schedule:
-    # Runs “Every month at 1st (see https://crontab.guru)
+    # Runs "At 00:00 on day-of-month 1." (see https://crontab.guru)
     - cron: "0 0 1 * *"
 jobs:
   cron-syncAppMeta:
@@ -21,4 +21,4 @@ jobs:
             -X POST \
             -H 'content-type: application/json' \
             -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
-            --fail
+            -sSf

.github/workflows/e2e-app-store.yml

@@ -41,6 +41,9 @@ jobs:
           CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
           DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
           DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+          E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
+          E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
+          E2E_TEST_MAILHOG_ENABLED: ${{ vars.E2E_TEST_MAILHOG_ENABLED }}
           GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
           GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
           NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}

.github/workflows/e2e-embed-react.yml

@@ -38,6 +38,8 @@ jobs:
           CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
           DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
           DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+          E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
+          E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
           GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
           GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
           NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}

.github/workflows/e2e-embed.yml

@@ -41,6 +41,9 @@ jobs:
           CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
           DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
           DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+          E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
+          E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
+          E2E_TEST_MAILHOG_ENABLED: ${{ vars.E2E_TEST_MAILHOG_ENABLED }}
           GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
           GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
           NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}

.github/workflows/e2e.yml

@@ -40,11 +40,14 @@ jobs:
           CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
           DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
           DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+          E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
+          E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
+          E2E_TEST_MAILHOG_ENABLED: ${{ vars.E2E_TEST_MAILHOG_ENABLED }}
           GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
           EMAIL_SERVER_HOST: ${{ secrets.CI_EMAIL_SERVER_HOST }}
           EMAIL_SERVER_PORT: ${{ secrets.CI_EMAIL_SERVER_PORT }}
           EMAIL_SERVER_USER: ${{ secrets.CI_EMAIL_SERVER_USER }}
-          EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD}} 
+          EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD}}
           GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
           NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
           NEXTAUTH_URL: ${{ secrets.CI_NEXTAUTH_URL }}

.github/workflows/production-build-without-database.yml

@@ -7,6 +7,8 @@ env:
   ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
   CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
   DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
+  E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
+  E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
   GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
   GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
   NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}

.github/workflows/production-build.yml

@@ -7,6 +7,8 @@ env:
   ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
   CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
   DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
+  E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
+  E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
   GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
   GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
   NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}

.github/workflows/release-docker.yaml

@@ -8,7 +8,7 @@ on: # yamllint disable-line rule:truthy
   workflow_dispatch:
     inputs:
       RELEASE_TAG:
-        description: 'v{Major}.{Minor}.{Patch}'
+        description: "v{Major}.{Minor}.{Patch}"
 
 jobs:
   release:
@@ -21,7 +21,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: "Determine tag"
-        run: "echo \"RELEASE_TAG=${GITHUB_REF#refs/tags/}\" >> $GITHUB_ENV"
+        run: 'echo "RELEASE_TAG=${GITHUB_REF#refs/tags/}" >> $GITHUB_ENV'
 
       - name: "Run remote release workflow"
         uses: "actions/github-script@v6"

.github/workflows/semantic-pull-requests.yml

@@ -29,11 +29,11 @@ jobs:
           header: pr-title-lint-error
           message: |
             Hey there and thank you for opening this pull request! 👋🏼
-            
+
             We require pull request titles to follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/) and it looks like your proposed title needs to be adjusted.
 
             Details:
-            
+
             ```
             ${{ steps.lint_pr_title.outputs.error_message }}
             ```
@@ -41,7 +41,7 @@ jobs:
       # Delete a previous comment when the issue has been resolved
       - if: ${{ steps.lint_pr_title.outputs.error_message == null }}
         uses: marocchino/sticky-pull-request-comment@v2
-        with:   
+        with:
           header: pr-title-lint-error
           message: |
-            Thank you for following the naming conventions! 🙏 
+            Thank you for following the naming conventions! 🙏

.github/workflows/submodule-sync.yml

@@ -1,6 +1,7 @@
 name: Submodule Sync
 on:
   schedule:
+    # Runs "At minute 15 past every 4th hour." (see https://crontab.guru)
     - cron: "15 */4 * * *"
   workflow_dispatch: ~
 jobs:

.gitpod.yml

@@ -40,4 +40,4 @@ vscode:
     - bradlc.vscode-tailwindcss
     - ban.spellright
     - stripe.vscode-stripe
-    - Prisma.prisma
+    - Prisma.prisma

README.md

@@ -221,6 +221,7 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env
    ```
 
 1. Run [mailhog](https://github.com/mailhog/MailHog) to view emails sent during development
+   > **_NOTE:_** Required when `E2E_TEST_MAILHOG_ENABLED` is "1"
 
    ```sh
    docker pull mailhog/mailhog
@@ -461,6 +462,18 @@ following
 4. Now paste the API key to your `.env` file into the `DAILY_API_KEY` field in your `.env` file.
 5. If you have the [Daily Scale Plan](https://daily.co/pricing) set the `DAILY_SCALE_PLAN` variable to `true` in order to use features like video recording.
 
+### Obtaining Basecamp Client ID and Secret
+
+1. Visit the [37 Signals Integrations Dashboard](launchpad.37signals.com/integrations) and sign in.
+2. Register a new application by clicking the Register one now link.
+3. Fill in your company details.
+4. Select Basecamp 4 as the product to integrate with.
+5. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/basecamp3/callback` replacing Cal.com URL with the URI at which your application runs.
+6. Click on done and copy the Client ID and secret into the `BASECAMP3_CLIENT_ID` and `BASECAMP3_CLIENT_SECRET` fields.
+7. Set the `BASECAMP3_CLIENT_SECRET` env variable to `{your_domain} ({support_email})`. 
+For example, `Cal.com (support@cal.com)`.
+
+
 ### Obtaining HubSpot Client ID and Secret
 
 1. Open [HubSpot Developer](https://developer.hubspot.com/) and sign into your account, or create a new one.

apps/api/lib/validations/event-type.ts

@@ -33,12 +33,14 @@ export const schemaEventTypeBaseBodyParams = EventType.pick({
   position: true,
   eventName: true,
   timeZone: true,
+  schedulingType: true,
+  // START Limit future bookings
   periodType: true,
   periodStartDate: true,
-  schedulingType: true,
   periodEndDate: true,
   periodDays: true,
   periodCountCalendarDays: true,
+  // END Limit future bookings
   requiresConfirmation: true,
   disableGuests: true,
   hideCalendarNotes: true,
@@ -51,6 +53,8 @@ export const schemaEventTypeBaseBodyParams = EventType.pick({
   slotInterval: true,
   successRedirectUrl: true,
   locations: true,
+  bookingLimits: true,
+  durationLimits: true,
 })
   .merge(z.object({ hosts: z.array(hostSchema).optional().default([]) }))
   .partial()
@@ -67,6 +71,7 @@ const schemaEventTypeCreateParams = z
     seatsPerTimeSlot: z.number().optional(),
     seatsShowAttendees: z.boolean().optional(),
     bookingFields: eventTypeBookingFields.optional(),
+    scheduleId: z.number().optional(),
   })
   .strict();
 
@@ -85,6 +90,7 @@ const schemaEventTypeEditParams = z
     seatsPerTimeSlot: z.number().optional(),
     seatsShowAttendees: z.boolean().optional(),
     bookingFields: eventTypeBookingFields.optional(),
+    scheduleId: z.number().optional(),
   })
   .strict();
 
@@ -98,6 +104,7 @@ export const schemaEventTypeReadPublic = EventType.pick({
   position: true,
   userId: true,
   teamId: true,
+  scheduleId: true,
   eventName: true,
   timeZone: true,
   periodType: true,
@@ -123,6 +130,8 @@ export const schemaEventTypeReadPublic = EventType.pick({
   seatsPerTimeSlot: true,
   seatsShowAttendees: true,
   bookingFields: true,
+  bookingLimits: true,
+  durationLimits: true,
 }).merge(
   z.object({
     locations: z

apps/api/lib/validations/shared/queryUserEmail.ts

@@ -0,0 +1,20 @@
+import { withValidation } from "next-validations";
+import { z } from "zod";
+
+import { baseApiParams } from "./baseApiParams";
+
+// Extracted out as utility function so can be reused
+// at different endpoints that require this validation.
+export const schemaQueryUserEmail = baseApiParams.extend({
+  email: z.string().email(),
+});
+
+export const schemaQuerySingleOrMultipleUserEmails = z.object({
+  email: z.union([z.string().email(), z.array(z.string().email())]),
+});
+
+export const withValidQueryUserEmail = withValidation({
+  schema: schemaQueryUserEmail,
+  type: "Zod",
+  mode: "query",
+});

apps/api/lib/validations/user.ts

@@ -29,7 +29,7 @@ enum locales {
   RO = "ro",
   NL = "nl",
   PT_BR = "pt-BR",
-  ES_419 = "es-419",
+  // ES_419 = "es-419", // Disabled until Crowdin reaches at least 80% completion
   KO = "ko",
   JA = "ja",
   PL = "pl",

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

@@ -1,9 +1,11 @@
 import type { NextApiRequest } from "next";
 
+import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";
 
 import { schemaEventTypeReadPublic } from "~/lib/validations/event-type";
 import { schemaQueryIdParseInt } from "~/lib/validations/shared/queryIdTransformParseInt";
+import { checkPermissions as canAccessTeamEventOrThrow } from "~/pages/api/teams/[teamId]/_auth-middleware";
 
 import getCalLink from "../_utils/getCalLink";
 
@@ -42,7 +44,8 @@ import getCalLink from "../_utils/getCalLink";
 export async function getHandler(req: NextApiRequest) {
   const { prisma, query } = req;
   const { id } = schemaQueryIdParseInt.parse(query);
-  const event_type = await prisma.eventType.findUnique({
+
+  const eventType = await prisma.eventType.findUnique({
     where: { id },
     include: {
       customInputs: true,
@@ -51,10 +54,43 @@ export async function getHandler(req: NextApiRequest) {
       owner: { select: { username: true, id: true } },
     },
   });
+  await checkPermissions(req, eventType);
 
-  const link = event_type ? getCalLink(event_type) : null;
+  const link = eventType ? getCalLink(eventType) : null;
+  // user.defaultScheduleId doesn't work the same for team events.
+  if (!eventType?.scheduleId && eventType?.userId && !eventType?.teamId) {
+    const user = await prisma.user.findUniqueOrThrow({
+      where: {
+        id: eventType.userId,
+      },
+      select: {
+        defaultScheduleId: true,
+      },
+    });
+    eventType.scheduleId = user.defaultScheduleId;
+  }
 
-  return { event_type: schemaEventTypeReadPublic.parse({ ...event_type, link }) };
+  // TODO: eventType when not found should be a 404
+  //       but API consumers may depend on the {} behaviour.
+  return { event_type: schemaEventTypeReadPublic.parse({ ...eventType, link }) };
+}
+
+type BaseEventTypeCheckPermissions = {
+  userId: number | null;
+  teamId: number | null;
+};
+
+async function checkPermissions<T extends BaseEventTypeCheckPermissions>(
+  req: NextApiRequest,
+  eventType: (T & Partial<Omit<T, keyof BaseEventTypeCheckPermissions>>) | null
+) {
+  if (req.isAdmin) return true;
+  if (eventType?.teamId) {
+    req.query.teamId = String(eventType.teamId);
+    await canAccessTeamEventOrThrow(req, "MEMBER");
+  }
+  if (eventType?.userId === req.userId) return true; // is owner.
+  throw new HttpError({ statusCode: 403, message: "Forbidden" });
 }
 
 export default defaultResponder(getHandler);

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

@@ -1,4 +1,4 @@
-import type { Prisma } from "@prisma/client";
+import { Prisma } from "@prisma/client";
 import type { NextApiRequest } from "next";
 import type { z } from "zod";
 
@@ -52,6 +52,9 @@ import checkTeamEventEditPermission from "../_utils/checkTeamEventEditPermission
  *               slug:
  *                 type: string
  *                 description: Unique slug for the event type
+ *               scheduleId:
+ *                 type: number
+ *                 description: The ID of the schedule for this event type
  *               hosts:
  *                 type: array
  *                 items:
@@ -199,10 +202,17 @@ import checkTeamEventEditPermission from "../_utils/checkTeamEventEditPermission
 export async function patchHandler(req: NextApiRequest) {
   const { prisma, query, body } = req;
   const { id } = schemaQueryIdParseInt.parse(query);
-  const { hosts = [], ...parsedBody } = schemaEventTypeEditBodyParams.parse(body);
+  const {
+    hosts = [],
+    bookingLimits,
+    durationLimits,
+    ...parsedBody
+  } = schemaEventTypeEditBodyParams.parse(body);
 
   const data: Prisma.EventTypeUpdateArgs["data"] = {
     ...parsedBody,
+    bookingLimits: bookingLimits === null ? Prisma.DbNull : bookingLimits,
+    durationLimits: durationLimits === null ? Prisma.DbNull : durationLimits,
   };
 
   if (hosts) {

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

@@ -1,8 +1,8 @@
-import type { Prisma } from "@prisma/client";
 import type { NextApiRequest } from "next";
 
 import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";
+import type { PrismaClient } from "@calcom/prisma/client";
 
 import { schemaEventTypeReadPublic } from "~/lib/validations/event-type";
 import { schemaQuerySingleOrMultipleUserIds } from "~/lib/validations/shared/queryUserId";
@@ -35,20 +35,12 @@ import getCalLink from "./_utils/getCalLink";
  *         description: No event types were found
  */
 async function getHandler(req: NextApiRequest) {
-  const { userId, isAdmin, prisma } = req;
-
-  const args: Prisma.EventTypeFindManyArgs = {
-    where: { userId },
-  };
-  /** Only admins can query other users */
-  if (!isAdmin && req.query.userId) throw new HttpError({ statusCode: 401, message: "ADMIN required" });
-  if (isAdmin && req.query.userId) {
-    const query = schemaQuerySingleOrMultipleUserIds.parse(req.query);
-    const userIds = Array.isArray(query.userId) ? query.userId : [query.userId || userId];
-    args.where = { userId: { in: userIds } };
-  }
+  const { userId, prisma } = req;
+  const userIds = req.query.userId ? extractUserIdsFromQuery(req) : [userId];
   const data = await prisma.eventType.findMany({
-    ...args,
+    where: {
+      userId: { in: userIds },
+    },
     include: {
       customInputs: true,
       team: { select: { slug: true } },
@@ -56,13 +48,74 @@ async function getHandler(req: NextApiRequest) {
       owner: { select: { username: true, id: true } },
     },
   });
+  // this really should return [], but backwards compatibility..
   if (data.length === 0) new HttpError({ statusCode: 404, message: "No event types were found" });
   return {
-    event_types: data.map((eventType) => {
-      const link = getCalLink(eventType);
-      return schemaEventTypeReadPublic.parse({ ...eventType, link });
-    }),
+    event_types: (await defaultScheduleId<(typeof data)[number]>({ eventTypes: data, prisma, userIds })).map(
+      (eventType) => {
+        const link = getCalLink(eventType);
+        return schemaEventTypeReadPublic.parse({ ...eventType, link });
+      }
+    ),
   };
 }
+// TODO: Extract & reuse.
+function extractUserIdsFromQuery({ isAdmin, query }: NextApiRequest) {
+  /** Guard: Only admins can query other users */
+  if (!isAdmin) {
+    throw new HttpError({ statusCode: 401, message: "ADMIN required" });
+  }
+  const { userId: userIdOrUserIds } = schemaQuerySingleOrMultipleUserIds.parse(query);
+  return Array.isArray(userIdOrUserIds) ? userIdOrUserIds : [userIdOrUserIds];
+}
+
+type DefaultScheduleIdEventTypeBase = {
+  scheduleId: number | null;
+  userId: number | null;
+};
+// If an eventType is given w/o a scheduleId
+// Then we associate the default user schedule id to the eventType
+async function defaultScheduleId<T extends DefaultScheduleIdEventTypeBase>({
+  prisma,
+  eventTypes,
+  userIds,
+}: {
+  prisma: PrismaClient;
+  eventTypes: (T & Partial<Omit<T, keyof DefaultScheduleIdEventTypeBase>>)[];
+  userIds: number[];
+}) {
+  // there is no event types without a scheduleId, skip the user query
+  if (eventTypes.every((eventType) => eventType.scheduleId)) return eventTypes;
+
+  const users = await prisma.user.findMany({
+    where: {
+      id: {
+        in: userIds,
+      },
+    },
+    select: {
+      id: true,
+      defaultScheduleId: true,
+    },
+  });
+
+  if (!users.length) {
+    return eventTypes;
+  }
+
+  const defaultScheduleIds = users.reduce((result, user) => {
+    result[user.id] = user.defaultScheduleId;
+    return result;
+  }, {} as { [x: number]: number | null });
+
+  return eventTypes.map((eventType) => {
+    // realistically never happens, userId should't be null on personal event types.
+    if (!eventType.userId) return eventType;
+    return {
+      ...eventType,
+      scheduleId: eventType.scheduleId || defaultScheduleIds[eventType.userId],
+    };
+  });
+}
 
 export default defaultResponder(getHandler);

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

@@ -1,4 +1,4 @@
-import type { Prisma } from "@prisma/client";
+import { Prisma } from "@prisma/client";
 import type { NextApiRequest } from "next";
 
 import { HttpError } from "@calcom/lib/http-error";
@@ -60,6 +60,9 @@ import ensureOnlyMembersAsHosts from "./_utils/ensureOnlyMembersAsHosts";
  *               hidden:
  *                 type: boolean
  *                 description: If the event type should be hidden from your public booking page
+ *               scheduleId:
+ *                 type: number
+ *                 description: The ID of the schedule for this event type
  *               position:
  *                 type: integer
  *                 description: The position of the event type on the public booking page
@@ -178,6 +181,7 @@ import ensureOnlyMembersAsHosts from "./_utils/ensureOnlyMembersAsHosts";
  *                  position: 0
  *                  eventName: null
  *                  timeZone: null
+ *                  scheduleId: 5
  *                  periodType: UNLIMITED
  *                  periodStartDate: 2023-02-15T08:46:16.000Z
  *                  periodEndDate: 2023-0-15T08:46:16.000Z
@@ -255,12 +259,19 @@ import ensureOnlyMembersAsHosts from "./_utils/ensureOnlyMembersAsHosts";
 async function postHandler(req: NextApiRequest) {
   const { userId, isAdmin, prisma, body } = req;
 
-  const { hosts = [], ...parsedBody } = schemaEventTypeCreateBodyParams.parse(body || {});
+  const {
+    hosts = [],
+    bookingLimits,
+    durationLimits,
+    ...parsedBody
+  } = schemaEventTypeCreateBodyParams.parse(body || {});
 
   let data: Prisma.EventTypeCreateArgs["data"] = {
     ...parsedBody,
     userId,
     users: { connect: { id: userId } },
+    bookingLimits: bookingLimits === null ? Prisma.DbNull : bookingLimits,
+    durationLimits: durationLimits === null ? Prisma.DbNull : durationLimits,
   };
 
   await checkPermissions(req);

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

@@ -59,7 +59,7 @@ async function getHandler(req: NextApiRequest) {
   };
 
   const data = await prisma.eventType.findMany(args);
-  return { event_types: data.map((attendee) => schemaEventTypeReadPublic.parse(attendee)) };
+  return { event_types: data.map((eventType) => schemaEventTypeReadPublic.parse(eventType)) };
 }
 
 export default defaultResponder(getHandler);

apps/api/pages/api/users/_get.ts

@@ -4,6 +4,7 @@ import type { NextApiRequest } from "next";
 import { defaultResponder } from "@calcom/lib/server";
 
 import { withMiddleware } from "~/lib/helpers/withMiddleware";
+import { schemaQuerySingleOrMultipleUserEmails } from "~/lib/validations/shared/queryUserEmail";
 import { schemaUsersReadPublic } from "~/lib/validations/user";
 
 /**
@@ -19,6 +20,17 @@ import { schemaUsersReadPublic } from "~/lib/validations/user";
  *         schema:
  *           type: string
  *         description: Your API key
+ *       - in: query
+ *         name: email
+ *         required: false
+ *         schema:
+ *          type: array
+ *          items:
+ *            type: string
+ *            format: email
+ *         style: form
+ *         explode: true
+ *         description: The email address or an array of email addresses to filter by
  *     tags:
  *     - users
  *     responses:
@@ -39,6 +51,14 @@ export async function getHandler(req: NextApiRequest) {
   const where: Prisma.UserWhereInput = {};
   // If user is not ADMIN, return only his data.
   if (!isAdmin) where.id = userId;
+
+  if (req.query.email) {
+    const validationResult = schemaQuerySingleOrMultipleUserEmails.parse(req.query);
+    where.email = {
+      in: Array.isArray(validationResult.email) ? validationResult.email : [validationResult.email],
+    };
+  }
+
   const [total, data] = await prisma.$transaction([
     prisma.user.count({ where }),
     prisma.user.findMany({ where, take, skip }),

apps/api/test/docker-compose.yml

@@ -1,5 +1,5 @@
 # Set the version of docker compose to use
-version: '3.9'
+version: "3.9"
 
 # The containers that compose the project
 services:
@@ -8,8 +8,8 @@ services:
     restart: always
     container_name: integration-tests-prisma
     ports:
-      - '5433:5432'
+      - "5433:5432"
     environment:
       POSTGRES_USER: prisma
       POSTGRES_PASSWORD: prisma
-      POSTGRES_DB: tests
+      POSTGRES_DB: tests

apps/storybook/.storybook/i18next.js

@@ -1,9 +1,29 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 
+const ns = ["common"];
+const supportedLngs = ["en", "fr"];
+const resources = ns.reduce((acc, n) => {
+  supportedLngs.forEach((lng) => {
+    if (!acc[lng]) acc[lng] = {};
+    acc[lng] = {
+      ...acc[lng],
+      [n]: require(`../../web/public/static/locales/${lng}/${n}.json`),
+    };
+  });
+  return acc;
+}, {});
+
 i18n.use(initReactI18next).init({
-  resources: [],
   debug: true,
+  fallbackLng: "en",
+  defaultNS: "common",
+  ns,
+  interpolation: {
+    escapeValue: false,
+  },
+  react: { useSuspense: true },
+  resources,
 });
 
 export default i18n;

apps/storybook/.storybook/main.js

@@ -15,6 +15,7 @@ module.exports = {
     "storybook-addon-rtl-direction",
     "storybook-react-i18next",
     "storybook-addon-next",
+    "storybook-addon-next-router",
     /*{
       name: "storybook-addon-next",
       options: {

apps/storybook/.storybook/preview-head.html

@@ -1,9 +1,9 @@
 <script>
   window.global = window;
-  window.isEmbed = ()=> {
-    return location.search.includes("embed=")
-  }
+  window.isEmbed = () => {
+    return location.search.includes("embed=");
+  };
 </script>
 <style>
-  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
+  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap");
 </style>

apps/storybook/.storybook/preview.jsx

@@ -1,4 +1,5 @@
 import { addDecorator } from "@storybook/react";
+import { AppRouterContext } from "next/dist/shared/lib/app-router-context";
 import { I18nextProvider } from "react-i18next";
 
 import "../styles/globals.css";
@@ -13,6 +14,21 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  nextRouter: {
+    pathname: "/",
+    asPath: "/",
+    query: {},
+    push() {},
+    Provider: AppRouterContext.Provider,
+  },
+  globals: {
+    locale: "en",
+    locales: {
+      en: "English",
+      fr: "Français",
+    },
+  },
+  i18n,
 };
 
 addDecorator((storyFn) => (

apps/storybook/components/VariantsTable.tsx

@@ -18,6 +18,7 @@ export function VariantsTable({
   const columns = React.Children.toArray(children) as ReactElement<RowProps>[];
   return (
     <div
+      id="light-variant"
       className={classNames(
         isDark &&
           "relative py-8 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-screen before:bg-[#1C1C1C]"
@@ -43,7 +44,7 @@ export function VariantsTable({
         </table>
       </div>
       {!isDark && (
-        <div data-mode="dark" className="dark">
+        <div id="dark-variant" data-mode="dark" className="dark">
           <VariantsTable titles={titles} isDark columnMinWidth={columnMinWidth}>
             {children}
           </VariantsTable>

apps/storybook/intro.stories.mdx

@@ -1,11 +1,21 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from "@storybook/addon-docs";
 
 <Meta title="Introduction" />
 
-<div className="text-center flex flex-col items-center">
-  <h1 style={{marginBottom: '24px', marginTop: '36px'}}>Welcome to Cal.com UI</h1>
-  <p>This is the beginning of our storybook improvements to match Figma as close as possible. Like our Figma library, we will be adding more components as we go along.</p>
-  <p>Our <a href="https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/%E2%9D%96-Cal-DS" target="_blank">Figma</a> library is avalible for anyone to view and use. If you have any questions or concerns, please reach out to the design team.</p>
+<div className="flex flex-col items-center text-center">
+  <h1 style={{ marginBottom: "24px", marginTop: "36px" }}>Welcome to Cal.com UI</h1>
+  <p>
+    This is the beginning of our storybook improvements to match Figma as close as possible. Like our Figma
+    library, we will be adding more components as we go along.
+  </p>
+  <p>
+    Our{" "}
+    <a href="https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/%E2%9D%96-Cal-DS" target="_blank">
+      Figma
+    </a>{" "}
+    library is avalible for anyone to view and use. If you have any questions or concerns, please reach out to
+    the design team.
+  </p>
 </div>
 
-<img src="/sb-cover.jpg" />
+<img src="/sb-cover.jpg" />

apps/storybook/package.json

@@ -23,6 +23,7 @@
     "next": "^13.4.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "storybook-addon-next-router": "^4.0.2",
     "storybook-addon-rtl-direction": "^0.0.19"
   },
   "devDependencies": {

apps/storybook/styles/storybook-styles.css

@@ -1,8 +1,8 @@
 @import url("../../../packages/features/calendars/weeklyview/styles/styles.css");
 
 .sbdocs {
-  font-family: 'Inter var' !important;
-  padding: 0!important;
+  font-family: "Inter var" !important;
+  padding: 0 !important;
 }
 
 #docs-root {
@@ -21,8 +21,8 @@
   font-weight: 500;
   border: none;
   border-top: 2px solid rgba(0, 0, 0, 0.12);
-  padding-top: 12px!important;
-  padding-bottom: 12px!important;
+  padding-top: 12px !important;
+  padding-bottom: 12px !important;
   margin: 82px 0 0 0;
 }
 
@@ -37,7 +37,7 @@
 }
 
 /** Docs table **/
-.custom-args-wrapper{
+.custom-args-wrapper {
   max-height: 400px;
   overflow-y: scroll;
   overflow-x: hidden;
@@ -45,7 +45,7 @@
 }
 
 .docblock-argstable-body {
-  box-shadow: none!important;
+  box-shadow: none !important;
   font-size: 14px;
 }
 
@@ -64,7 +64,7 @@
 
 .docblock-argstable-body div p,
 .docblock-argstable-body div span {
-  color: #8F8F8F !important;
+  color: #8f8f8f !important;
 }
 
 /** Custom components **/
@@ -83,8 +83,8 @@
 }
 
 .story-title h1 span {
-  color: #9CA3AF;
-  font-family: 'Inter var';
+  color: #9ca3af;
+  font-family: "Inter var";
   font-weight: normal;
   display: inline-block;
   margin-left: 8px;
@@ -96,7 +96,7 @@
 }
 
 .examples {
-  background-color: #F9FAFB;
+  background-color: #f9fafb;
   padding: 20px;
   display: flex;
   flex-direction: column;
@@ -111,14 +111,14 @@
 }
 
 .examples-title {
-  color: #8F8F8F;
+  color: #8f8f8f;
   font-size: 14px;
   margin-bottom: 30px;
 }
 
 .examples-item-title {
   font-size: 12px;
-  color: #8F8F8F;
+  color: #8f8f8f;
   margin-bottom: 12px;
   display: block;
 }
@@ -130,7 +130,7 @@
 .examples-footnote p,
 .examples-footnote ul,
 .examples-footnote li {
-  color: #8F8F8F;
+  color: #8f8f8f;
   font-size: 14px;
 }
 
@@ -139,11 +139,11 @@
 }
 
 .examples-footnote li {
-  margin: 0!important;
+  margin: 0 !important;
 }
 
 .story-note {
-  background-color: #F9FAFB;
+  background-color: #f9fafb;
   font-size: 14px;
   padding: 20px;
   margin-bottom: 12px;
@@ -161,12 +161,12 @@
   box-shadow: none !important;
   margin: 0 !important;
   border: none !important;
-  border-radius: none!important;
+  border-radius: none !important;
 }
 
 .docs-story > div:first-child {
-  padding: 0!important;
-  margin: 0!important;
+  padding: 0 !important;
+  margin: 0 !important;
 }
 
 .docs-story .innerZoomElementWrapper > div {
@@ -174,7 +174,7 @@
 }
 
 .sb-main-padded {
-  padding: 0!important;
+  padding: 0 !important;
 }
 
 @media screen and (max-width: 1200px) {
@@ -198,74 +198,72 @@
   :root {
     /* background */
 
-    --cal-bg-emphasis: #E5E7EB;
+    --cal-bg-emphasis: #e5e7eb;
     --cal-bg: white;
-    --cal-bg-subtle: #F3F4F6;
-    --cal-bg-muted: #F9FAFB;
+    --cal-bg-subtle: #f3f4f6;
+    --cal-bg-muted: #f9fafb;
     --cal-bg-inverted: #111827;
 
     /* background -> components*/
-    --cal-bg-info: #DEE9FC;
-    --cal-bg-success: #E2FBE8;
-    --cal-bg-attention: #FCEED8;
-    --cal-bg-error: #F9E3E2;
+    --cal-bg-info: #dee9fc;
+    --cal-bg-success: #e2fbe8;
+    --cal-bg-attention: #fceed8;
+    --cal-bg-error: #f9e3e2;
     --cal-bg-dark-error: #752522;
 
-
     /* Borders */
-    --cal-border-emphasis:#9CA3AF;
-    --cal-border: #D1D5DB;
-    --cal-border-subtle:#E5E7EB;
-    --cal-border-muted:#F3F4F6;
+    --cal-border-emphasis: #9ca3af;
+    --cal-border: #d1d5db;
+    --cal-border-subtle: #e5e7eb;
+    --cal-border-muted: #f3f4f6;
     --cal-border-error: #aa2e26;
 
     /* Content/Text */
     --cal-text-emphasis: #111827;
-    --cal-text:#374151;
-    --cal-text-subtle:#6B7280;
-    --cal-text-muted:#9CA3AF;
-    --cal-text-inverted:white;
+    --cal-text: #374151;
+    --cal-text-subtle: #6b7280;
+    --cal-text-muted: #9ca3af;
+    --cal-text-inverted: white;
 
     /* Content/Text -> components */
-    --cal-text-info:#253985;
-    --cal-text-success:#285231;
-    --cal-text-attention:#73321B;
-    --cal-text-error:#752522;
+    --cal-text-info: #253985;
+    --cal-text-success: #285231;
+    --cal-text-attention: #73321b;
+    --cal-text-error: #752522;
 
     /* Brand shinanigans
       -> These will be computed for the users theme at runtime.
     */
-    --cal-brand:#111827;
-    --cal-brand-emphasis:#101010;
+    --cal-brand: #111827;
+    --cal-brand-emphasis: #101010;
     --cal-brand-text: white;
   }
   .dark {
     /* background */
 
-    --cal-bg-emphasis: #2B2B2B;
+    --cal-bg-emphasis: #2b2b2b;
     --cal-bg: #101010;
-    --cal-bg-subtle: #2B2B2B;
-    --cal-bg-muted: #1C1C1C;
-    --cal-bg-inverted: #F3F4F6;
+    --cal-bg-subtle: #2b2b2b;
+    --cal-bg-muted: #1c1c1c;
+    --cal-bg-inverted: #f3f4f6;
 
     /* background -> components*/
-    --cal-bg-info: #DEE9FC;
-    --cal-bg-success: #E2FBE8;
-    --cal-bg-attention: #FCEED8;
-    --cal-bg-error: #F9E3E2;
+    --cal-bg-info: #dee9fc;
+    --cal-bg-success: #e2fbe8;
+    --cal-bg-attention: #fceed8;
+    --cal-bg-error: #f9e3e2;
     --cal-bg-dark-error: #752522;
 
-
     /* Borders */
     --cal-border-emphasis: #575757;
     --cal-border: #444444;
-    --cal-border-subtle: #2B2B2B;
-    --cal-border-muted: #1C1C1C;
+    --cal-border-subtle: #2b2b2b;
+    --cal-border-muted: #1c1c1c;
     --cal-border-error: #aa2e26;
 
     /* Content/Text */
-    --cal-text-emphasis: #F3F4F6;
-    --cal-text: #D6D6D6;
+    --cal-text-emphasis: #f3f4f6;
+    --cal-text: #d6d6d6;
     --cal-text-subtle: #757575;
     --cal-text-muted: #575757;
     --cal-text-inverted: #101010;
@@ -273,7 +271,7 @@
     /* Content/Text -> components */
     --cal-text-info: #253985;
     --cal-text-success: #285231;
-    --cal-text-attention: #73321B;
+    --cal-text-attention: #73321b;
     --cal-text-error: #752522;
 
     /* Brand shenanigans

apps/swagger/styles/globals.css

@@ -2,8 +2,8 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans,
+    Droid Sans, Helvetica Neue, sans-serif;
 }
 
 a {
@@ -21,7 +21,7 @@ a {
   }
   .swagger-ui .opblock .opblock-summary {
     display: grid;
-  flex-direction: column;
+    flex-direction: column;
   }
   .opblock-summary-path {
     flex-shrink: 0;
@@ -43,22 +43,22 @@ a {
     font-size: 22px;
   }
   .swagger-ui .scheme-container {
-  padding: 14px 0;
+    padding: 14px 0;
   }
   .swagger-ui .info {
-      margin: 10px 0;
+    margin: 10px 0;
   }
   .swagger-ui .auth-wrapper {
     margin: 10px 0;
   }
   .swagger-ui .authorization__btn {
-  display: none;
+    display: none;
   }
   .swagger-ui .opblock {
     margin: 0 0 5px;
   }
   button.opblock-summary-control > svg {
-    display: none;  
+    display: none;
   }
   .swagger-ui .filter .operation-filter-input {
     border: 2px solid #d8dde7;
@@ -73,15 +73,16 @@ a {
   .swagger-ui .info .title small {
     top: 5px;
   }
-  .swagger-ui a.nostyle, .swagger-ui a.nostyle:visited {
+  .swagger-ui a.nostyle,
+  .swagger-ui a.nostyle:visited {
     width: 100%;
   }
   div.request-snippets > div.curl-command > div:nth-child(1) {
     overscroll-behavior: contain;
     overflow-x: scroll;
   }
-  .swagger-ui .opblock-body pre.microlight {  
-    font-size: 9px; 
+  .swagger-ui .opblock-body pre.microlight {
+    font-size: 9px;
   }
   .swagger-ui table tbody tr td {
     padding: 0px 0 0;
@@ -91,7 +92,7 @@ a {
     font-size: 12px;
   }
   div.no-margin > div > div.responses-wrapper > div.responses-inner > div > div > table > tbody > tr {
-        display: flex;
+    display: flex;
     width: 100vw;
     flex-direction: column;
     font-size: 60%;
@@ -99,4 +100,4 @@ a {
   div.no-margin > div > div.responses-wrapper > div.responses-inner > div > div > table > thead > tr {
     display: none;
   }
-}
+}

apps/web/components/I18nLanguageHandler.tsx

@@ -1,27 +1,51 @@
+import { lookup } from "bcp-47-match";
+import { useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
 import { useEffect } from "react";
 
+import { CALCOM_VERSION } from "@calcom/lib/constants";
 import { trpc } from "@calcom/trpc/react";
 
-export function useViewerI18n() {
-  return trpc.viewer.public.i18n.useQuery(undefined, {
-    staleTime: Infinity,
-    /**
-     * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
-     * We intend to not cache i18n query
-     **/
-    trpc: {
-      context: { skipBatch: true },
-    },
-  });
+function useViewerI18n(locale: string) {
+  return trpc.viewer.public.i18n.useQuery(
+    { locale, CalComVersion: CALCOM_VERSION },
+    {
+      /**
+       * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
+       **/
+      trpc: {
+        context: { skipBatch: true },
+      },
+    }
+  );
+}
+
+function useClientLocale(locales: string[]) {
+  const session = useSession();
+  // If the user is logged in, use their locale
+  if (session.data?.user.locale) return session.data.user.locale;
+  // If the user is not logged in, use the browser locale
+  if (typeof window !== "undefined") {
+    // This is the only way I found to ensure the prefetched locale is used on first render
+    // FIXME: Find a better way to pick the best matching locale from the browser
+    return lookup(locales, window.navigator.language) || window.navigator.language;
+  }
+  // If the browser is not available, use English
+  return "en";
+}
+
+export function useClientViewerI18n(locales: string[]) {
+  const clientLocale = useClientLocale(locales);
+  return useViewerI18n(clientLocale);
 }
 
 /**
  * Auto-switches locale client-side to the logged in user's preference
  */
-const I18nLanguageHandler = () => {
+const I18nLanguageHandler = (props: { locales: string[] }) => {
+  const { locales } = props;
   const { i18n } = useTranslation("common");
-  const locale = useViewerI18n().data?.locale || i18n.language;
+  const locale = useClientViewerI18n(locales).data?.locale || i18n.language;
 
   useEffect(() => {
     // bail early when i18n = {}

apps/web/components/PageWrapper.tsx

@@ -6,7 +6,7 @@ import Script from "next/script";
 
 import "@calcom/embed-core/src/embed-iframe";
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
-import { WEBAPP_URL, IS_CALCOM } from "@calcom/lib/constants";
+import { IS_CALCOM, WEBAPP_URL } from "@calcom/lib/constants";
 import { buildCanonical } from "@calcom/lib/next-seo.config";
 
 import type { AppProps } from "@lib/app-providers";
@@ -72,7 +72,7 @@ function PageWrapper(props: AppProps) {
         }
         {...seoConfig.defaultNextSeo}
       />
-      <I18nLanguageHandler />
+      <I18nLanguageHandler locales={props.router.locales || []} />
       <Script
         nonce={nonce}
         id="page-status"

apps/web/components/apps/InstallAppButtonChild.tsx

@@ -112,7 +112,7 @@ export const InstallAppButtonChild = ({
                   );
                 }}>
                 <p>
-                  {team.name} {isInstalled && `(${t("installed")})`}
+                  {t(team.name)} {isInstalled && `(${t("installed")})`}
                 </p>
               </DropdownItem>
             );

apps/web/components/booking/BookingListItem.tsx

@@ -336,7 +336,7 @@ function BookingListItem(booking: BookingItemProps) {
         </DialogContent>
       </Dialog>
 
-      <tr className="hover:bg-muted group flex flex-col sm:flex-row">
+      <tr data-testid="booking-item" className="hover:bg-muted group flex flex-col sm:flex-row">
         <td
           className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[12rem]"
           onClick={onClickTableData}>
@@ -368,7 +368,7 @@ function BookingListItem(booking: BookingItemProps) {
                 {t("error_collecting_card")}
               </Badge>
             ) : booking.paid ? (
-              <Badge className="ltr:mr-2 rtl:ml-2" variant="green">
+              <Badge className="ltr:mr-2 rtl:ml-2" variant="green" data-testid="paid_badge">
                 {booking.payment[0].paymentOption === "HOLD" ? t("card_held") : t("paid")}
               </Badge>
             ) : null}

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -35,6 +35,7 @@ import {
   Tooltip,
 } from "@calcom/ui";
 import { Copy, Edit } from "@calcom/ui/components/icon";
+import { IS_VISUAL_REGRESSION_TESTING } from "@calcom/web/constants";
 
 import RequiresConfirmationController from "./RequiresConfirmationController";
 
@@ -286,36 +287,38 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         }}>
         {/* Textfield has some margin by default we remove that so we can keep consitant aligment */}
         <div className="lg:-ml-2">
-          <TextField
-            disabled
-            name="hashedLink"
-            label={t("private_link_label")}
-            data-testid="generated-hash-url"
-            labelSrOnly
-            type="text"
-            hint={t("private_link_hint")}
-            defaultValue={placeholderHashedLink}
-            addOnSuffix={
-              <Tooltip content={eventType.hashedLink ? t("copy_to_clipboard") : t("enabled_after_update")}>
-                <Button
-                  color="minimal"
-                  size="sm"
-                  type="button"
-                  className="hover:stroke-3 hover:text-emphasis min-w-fit !py-0 px-0 hover:bg-transparent"
-                  aria-label="copy link"
-                  onClick={() => {
-                    navigator.clipboard.writeText(placeholderHashedLink);
-                    if (eventType.hashedLink) {
-                      showToast(t("private_link_copied"), "success");
-                    } else {
-                      showToast(t("enabled_after_update_description"), "warning");
-                    }
-                  }}>
-                  <Copy className="h-4 w-4" />
-                </Button>
-              </Tooltip>
-            }
-          />
+          {!IS_VISUAL_REGRESSION_TESTING && (
+            <TextField
+              disabled
+              name="hashedLink"
+              label={t("private_link_label")}
+              data-testid="generated-hash-url"
+              labelSrOnly
+              type="text"
+              hint={t("private_link_hint")}
+              defaultValue={placeholderHashedLink}
+              addOnSuffix={
+                <Tooltip content={eventType.hashedLink ? t("copy_to_clipboard") : t("enabled_after_update")}>
+                  <Button
+                    color="minimal"
+                    size="sm"
+                    type="button"
+                    className="hover:stroke-3 hover:text-emphasis min-w-fit !py-0 px-0 hover:bg-transparent"
+                    aria-label="copy link"
+                    onClick={() => {
+                      navigator.clipboard.writeText(placeholderHashedLink);
+                      if (eventType.hashedLink) {
+                        showToast(t("private_link_copied"), "success");
+                      } else {
+                        showToast(t("enabled_after_update_description"), "warning");
+                      }
+                    }}>
+                    <Copy className="h-4 w-4" />
+                  </Button>
+                </Tooltip>
+              }
+            />
+          )}
         </div>
       </SettingsToggle>
       <hr className="border-subtle" />
@@ -338,6 +341,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                   toggleGuests(false);
                   formMethods.setValue("requiresConfirmation", false);
                   setRequiresConfirmation(false);
+                  formMethods.setValue("metadata.multipleDuration", undefined);
                   formMethods.setValue("seatsPerTimeSlot", 2);
                 } else {
                   formMethods.setValue("seatsPerTimeSlot", null);

apps/web/components/eventtype/EventAvailabilityTab.tsx

@@ -138,7 +138,7 @@ const EventTypeScheduleDetails = memo(
             <Globe className="h-3.5 w-3.5 ltr:mr-2 rtl:ml-2" />
             {schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
           </span>
-          {!!schedule?.id && !schedule.isManaged && (
+          {!!schedule?.id && !schedule.isManaged && !schedule.readOnly && (
             <Button
               href={`/availability/${schedule.id}`}
               disabled={isLoading}
@@ -202,6 +202,15 @@ const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
           isManaged: false,
         });
       }
+      // We push the selected schedule from the event type if it's not part of the list response. This happens if the user is an admin but not the schedule owner.
+      else if (eventType.schedule && !schedules.find((schedule) => schedule.id === eventType.schedule)) {
+        options.push({
+          value: eventType.schedule,
+          label: eventType.scheduleName ?? t("default_schedule_name"),
+          isDefault: false,
+          isManaged: false,
+        });
+      }
 
       setOptions(options);
 

apps/web/components/eventtype/EventSetupTab.tsx

@@ -12,6 +12,7 @@ import { z } from "zod";
 import type { EventLocationType } from "@calcom/app-store/locations";
 import { getEventLocationType, MeetLocationType, LocationType } 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 cx from "@calcom/lib/classNames";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -116,6 +117,8 @@ export const EventSetupTab = (
   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");
 
   const locationOptions = props.locationOptions.map((locationOption) => {
     const options = locationOption.options.filter((option) => {
@@ -129,10 +132,12 @@ export const EventSetupTab = (
     };
   });
 
-  const multipleDurationOptions = [5, 10, 15, 20, 25, 30, 45, 50, 60, 75, 80, 90, 120, 180].map((mins) => ({
-    value: mins,
-    label: t("multiple_duration_mins", { count: mins }),
-  }));
+  const multipleDurationOptions = [5, 10, 15, 20, 25, 30, 45, 50, 60, 75, 80, 90, 120, 150, 180].map(
+    (mins) => ({
+      value: mins,
+      label: t("multiple_duration_mins", { count: mins }),
+    })
+  );
 
   const [selectedMultipleDuration, setSelectedMultipleDuration] = useState<
     MultiValue<{
@@ -383,6 +388,9 @@ export const EventSetupTab = (
 
   const lengthLockedProps = shouldLockDisableProps("length");
   const descriptionLockedProps = shouldLockDisableProps("description");
+  const urlPrefix = orgBranding
+    ? orgBranding?.fullDomain.replace(/^(https?:|)\/\//, "")
+    : `${CAL_URL?.replace(/^(https?:|)\/\//, "")}`;
 
   return (
     <div>
@@ -411,10 +419,10 @@ export const EventSetupTab = (
           defaultValue={eventType.slug}
           addOnLeading={
             <>
-              {CAL_URL?.replace(/^(https?:|)\/\//, "")}/
+              {urlPrefix}/
               {!isManagedEventType
                 ? team
-                  ? "team/" + team.slug
+                  ? (orgBranding ? "" : "team/") + team.slug
                   : eventType.users[0].username
                 : t("username_placeholder")}
               /
@@ -501,6 +509,8 @@ export const EventSetupTab = (
             <SettingsToggle
               title={t("allow_booker_to_select_duration")}
               checked={multipleDuration !== undefined}
+              disabled={seatsEnabled}
+              tooltip={seatsEnabled ? t("seat_options_doesnt_multiple_durations") : undefined}
               onCheckedChange={() => {
                 if (multipleDuration !== undefined) {
                   setMultipleDuration(undefined);

apps/web/components/getting-started/steps-views/SetupAvailability.tsx

@@ -20,10 +20,11 @@ const SetupAvailability = (props: ISetupAvailabilityProps) => {
   const { t } = useLocale();
   const { nextStep } = props;
 
+  const scheduleId = defaultScheduleId === null ? undefined : defaultScheduleId;
   const queryAvailability = trpc.viewer.availability.schedule.get.useQuery(
-    { scheduleId: defaultScheduleId! },
+    { scheduleId: defaultScheduleId ?? undefined },
     {
-      enabled: !!defaultScheduleId,
+      enabled: !!scheduleId,
     }
   );
 

apps/web/components/security/DisableUserImpersonation.tsx

@@ -12,9 +12,6 @@ const DisableUserImpersonation = ({ disableImpersonation }: { disableImpersonati
       showToast(t("your_user_profile_updated_successfully"), "success");
       await utils.viewer.me.invalidate();
     },
-    async onSettled() {
-      await utils.viewer.public.i18n.invalidate();
-    },
   });
 
   return (

apps/web/components/setup/EnterpriseLicense.tsx

@@ -1,4 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
+// eslint-disable-next-line no-restricted-imports
 import { noop } from "lodash";
 import { useCallback, useState } from "react";
 import { Controller, FormProvider, useForm, useFormState } from "react-hook-form";

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

@@ -1,4 +1,5 @@
 import classNames from "classnames";
+// eslint-disable-next-line no-restricted-imports
 import { debounce, noop } from "lodash";
 import { useSession } from "next-auth/react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
@@ -50,7 +51,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
   const pathname = usePathname();
   const router = useRouter();
   const { t } = useLocale();
-  const { data: session, update } = useSession();
+  const { update } = useSession();
   const {
     currentUsername,
     setCurrentUsername = noop,
@@ -94,7 +95,6 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
     debouncedApiCall(inputUsernameValue);
   }, [debouncedApiCall, inputUsernameValue]);
 
-  const utils = trpc.useContext();
   const updateUsername = trpc.viewer.updateProfile.useMutation({
     onSuccess: async () => {
       onSuccessMutation && (await onSuccessMutation());
@@ -104,9 +104,6 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
     onError: (error) => {
       onErrorMutation && onErrorMutation(error);
     },
-    async onSettled() {
-      await utils.viewer.public.i18n.invalidate();
-    },
   });
 
   // when current username isn't set - Go to stripe to check what username he wanted to buy and was it a premium and was it paid for

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

@@ -1,4 +1,5 @@
 import classNames from "classnames";
+// eslint-disable-next-line no-restricted-imports
 import { debounce, noop } from "lodash";
 import { useSession } from "next-auth/react";
 import type { RefCallback } from "react";
@@ -24,7 +25,7 @@ interface ICustomUsernameProps {
 
 const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.ComponentProps<typeof TextField>>) => {
   const { t } = useLocale();
-  const { data: session, update } = useSession();
+  const { update } = useSession();
 
   const {
     currentUsername,
@@ -65,8 +66,6 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
     }
   }, [inputUsernameValue, debouncedApiCall, currentUsername]);
 
-  const utils = trpc.useContext();
-
   const updateUsernameMutation = trpc.viewer.updateProfile.useMutation({
     onSuccess: async () => {
       onSuccessMutation && (await onSuccessMutation());
@@ -77,9 +76,6 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
     onError: (error) => {
       onErrorMutation && onErrorMutation(error);
     },
-    async onSettled() {
-      await utils.viewer.public.i18n.invalidate();
-    },
   });
 
   const ActionButtons = () => {

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

@@ -1,35 +1,26 @@
+import dynamic from "next/dynamic";
 import { useSearchParams } from "next/navigation";
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
-import { getOrgFullDomain } from "@calcom/features/ee/organizations/lib/orgDomains";
-import { IS_SELF_HOSTED } from "@calcom/lib/constants";
+import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
+import { CAL_URL, IS_SELF_HOSTED } from "@calcom/lib/constants";
 import type { TRPCClientErrorLike } from "@calcom/trpc/client";
-import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 
 import useRouterQuery from "@lib/hooks/useRouterQuery";
 
-import { PremiumTextfield } from "./PremiumTextfield";
-import { UsernameTextfield } from "./UsernameTextfield";
-
-export const UsernameAvailability = IS_SELF_HOSTED ? UsernameTextfield : PremiumTextfield;
-
 interface UsernameAvailabilityFieldProps {
   onSuccessMutation?: () => void;
   onErrorMutation?: (error: TRPCClientErrorLike<AppRouter>) => void;
 }
 
-function useUserNamePrefix(organization: RouterOutputs["viewer"]["me"]["organization"]): string {
-  return organization
-    ? organization.slug
-      ? getOrgFullDomain(organization.slug, { protocol: false })
-      : organization.metadata && organization.metadata.requestedSlug
-      ? getOrgFullDomain(organization.metadata.requestedSlug, { protocol: false })
-      : process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "")
-    : process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "");
-}
+export const getUsernameAvailabilityComponent = (isPremium: boolean) => {
+  if (isPremium)
+    return dynamic(() => import("./PremiumTextfield").then((m) => m.PremiumTextfield), { ssr: false });
+  return dynamic(() => import("./UsernameTextfield").then((m) => m.UsernameTextfield), { ssr: false });
+};
 
 export const UsernameAvailabilityField = ({
   onSuccessMutation,
@@ -49,7 +40,12 @@ export const UsernameAvailabilityField = ({
     },
   });
 
-  const usernamePrefix = useUserNamePrefix(user.organization);
+  const UsernameAvailability = getUsernameAvailabilityComponent(!IS_SELF_HOSTED && !user.organization?.id);
+  const orgBranding = useOrgBranding();
+
+  const usernamePrefix = orgBranding
+    ? orgBranding?.fullDomain.replace(/^(https?:|)\/\//, "")
+    : `${CAL_URL?.replace(/^(https?:|)\/\//, "")}`;
 
   return (
     <Controller
@@ -65,7 +61,8 @@ export const UsernameAvailabilityField = ({
             setInputUsernameValue={onChange}
             onSuccessMutation={onSuccessMutation}
             onErrorMutation={onErrorMutation}
-            addOnLeading={usernamePrefix}
+            disabled={!!user.organization?.id}
+            addOnLeading={`${usernamePrefix}/`}
           />
         );
       }}

apps/web/constants.ts

@@ -0,0 +1 @@
+export const IS_VISUAL_REGRESSION_TESTING = Boolean(globalThis.window?.Meticulous?.isRunningAsTest);

apps/web/lib/app-providers.tsx

@@ -1,7 +1,6 @@
 import { TooltipProvider } from "@radix-ui/react-tooltip";
 import type { Session } from "next-auth";
-import { SessionProvider } from "next-auth/react";
-import { useSession } from "next-auth/react";
+import { SessionProvider, useSession } from "next-auth/react";
 import { EventCollectionProvider } from "next-collect/client";
 import type { SSRConfig } from "next-i18next";
 import { appWithTranslation } from "next-i18next";
@@ -21,7 +20,7 @@ import { MetaProvider } from "@calcom/ui";
 import useIsBookingPage from "@lib/hooks/useIsBookingPage";
 import type { WithNonceProps } from "@lib/withNonce";
 
-import { useViewerI18n } from "@components/I18nLanguageHandler";
+import { useClientViewerI18n } from "@components/I18nLanguageHandler";
 
 const I18nextAdapter = appWithTranslation<
   NextJsAppProps<SSRConfig> & {
@@ -69,11 +68,9 @@ type AppPropsWithoutNonce = Omit<AppPropsWithChildren, "pageProps"> & {
 const CustomI18nextProvider = (props: AppPropsWithoutNonce) => {
   /**
    * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
-   * We intend to not cache i18n query
    **/
-  const { i18n, locale } = useViewerI18n().data ?? {
-    locale: "en",
-  };
+  const clientViewerI18n = useClientViewerI18n(props.router.locales || []);
+  const { i18n, locale } = clientViewerI18n.data || {};
 
   const passedProps = {
     ...props,

apps/web/lib/core/i18n/i18n.utils.ts

@@ -1,53 +0,0 @@
-import parser from "accept-language-parser";
-import type { IncomingMessage } from "http";
-import type { GetServerSidePropsContext } from "next";
-
-import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
-import type { Maybe } from "@calcom/trpc/server";
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { i18n } = require("@calcom/config/next-i18next.config");
-
-export function getLocaleFromHeaders(req: IncomingMessage): string {
-  let preferredLocale: string | null | undefined;
-  if (req.headers["accept-language"]) {
-    preferredLocale = parser.pick(i18n.locales, req.headers["accept-language"]) as Maybe<string>;
-  }
-  return preferredLocale ?? i18n.defaultLocale;
-}
-
-export const getOrSetUserLocaleFromHeaders = async (
-  req: GetServerSidePropsContext["req"],
-  res: GetServerSidePropsContext["res"]
-): Promise<string> => {
-  const { default: prisma } = await import("@calcom/prisma");
-
-  const session = await getServerSession({ req, res });
-  const preferredLocale = getLocaleFromHeaders(req);
-
-  if (session?.user?.id) {
-    const user = await prisma.user.findUnique({
-      where: {
-        id: session.user.id,
-      },
-      select: {
-        locale: true,
-      },
-    });
-
-    if (user?.locale) {
-      return user.locale;
-    }
-
-    await prisma.user.update({
-      where: {
-        id: session.user.id,
-      },
-      data: {
-        locale: preferredLocale,
-      },
-    });
-  }
-
-  return preferredLocale;
-};

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 { version } = require("./package.json");
 const { i18n } = require("./next-i18next.config");
 const {
   orgHostPath,
@@ -14,6 +15,9 @@ const {
 if (!process.env.NEXTAUTH_SECRET) throw new Error("Please set NEXTAUTH_SECRET");
 if (!process.env.CALENDSO_ENCRYPTION_KEY) throw new Error("Please set CALENDSO_ENCRYPTION_KEY");
 
+// To be able to use the version in the app without having to import package.json
+process.env.NEXT_PUBLIC_CALCOM_VERSION = version;
+
 // So we can test deploy previews preview
 if (process.env.VERCEL_URL && !process.env.NEXT_PUBLIC_WEBAPP_URL) {
   process.env.NEXT_PUBLIC_WEBAPP_URL = "https://" + process.env.VERCEL_URL;

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/web",
-  "version": "3.1.8",
+  "version": "3.2.4",
   "private": true,
   "scripts": {
     "analyze": "ANALYZE=true next build",
@@ -68,6 +68,7 @@
     "@vercel/og": "^0.5.0",
     "accept-language-parser": "^1.5.0",
     "async": "^3.2.4",
+    "bcp-47-match": "^2.0.3",
     "bcryptjs": "^2.4.3",
     "classnames": "^2.3.1",
     "dotenv-cli": "^6.0.0",
@@ -166,6 +167,7 @@
     "msw": "^0.42.3",
     "postcss": "^8.4.18",
     "tailwindcss": "^3.3.1",
+    "tailwindcss-animate": "^1.0.6",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.4"
   },

apps/web/pages/404.tsx

@@ -75,6 +75,7 @@ export default function Custom404() {
         )}`
       );
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const isSuccessPage = pathname?.startsWith("/booking");

apps/web/pages/[user].tsx

@@ -36,6 +36,7 @@ import { ssrInit } from "@server/lib/ssr";
 
 export function UserPage(props: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const { users, profile, eventTypes, markdownStrippedBio, entity } = props;
+
   const [user] = users; //To be used when we only have a single user, not dynamic group
   useTheme(profile.theme);
   const { t } = useLocale();
@@ -52,7 +53,6 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
     orgSlug: _orgSlug,
     ...query
   } = useRouterQuery();
-  const nameOrUsername = user.name || user.username || "";
 
   /*
    const telemetry = useTelemetry();
@@ -82,6 +82,10 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
           profile: { name: `${profile.name}`, image: null },
           users: [{ username: `${user.username}`, name: `${user.name}` }],
         }}
+        nextSeoProps={{
+          noindex: !profile.allowSEOIndexing,
+          nofollow: !profile.allowSEOIndexing,
+        }}
       />
 
       <div className={classNames(shouldAlignCentrally ? "mx-auto" : "", isEmbed ? "max-w-3xl" : "")}>
@@ -93,7 +97,7 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
           )}>
           <div className="mb-8 text-center">
             <Avatar imageSrc={profile.image} size="xl" alt={profile.name} />
-            <h1 className="font-cal text-emphasis mb-1 text-3xl">
+            <h1 className="font-cal text-emphasis mb-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" />
@@ -214,6 +218,7 @@ export type UserPageProps = {
     theme: string | null;
     brandColor: string;
     darkBrandColor: string;
+    allowSEOIndexing: boolean;
   };
   users: Pick<User, "away" | "name" | "username" | "bio" | "verified">[];
   themeBasis: string | null;
@@ -276,6 +281,7 @@ export const getServerSideProps: GetServerSideProps<UserPageProps> = async (cont
       away: true,
       verified: true,
       allowDynamicBooking: true,
+      allowSEOIndexing: true,
     },
   });
 
@@ -315,6 +321,7 @@ export const getServerSideProps: GetServerSideProps<UserPageProps> = async (cont
     theme: user.theme,
     brandColor: user.brandColor,
     darkBrandColor: user.darkBrandColor,
+    allowSEOIndexing: user.allowSEOIndexing ?? true,
   };
 
   const eventTypesWithHidden = await getEventTypesWithHiddenFromDB(user.id);

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

@@ -4,7 +4,11 @@ import { z } from "zod";
 import { Booker } from "@calcom/atoms";
 import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
 import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
-import { getBookingForReschedule, getBookingForSeatedEvent } from "@calcom/features/bookings/lib/get-booking";
+import {
+  getBookingForReschedule,
+  getBookingForSeatedEvent,
+  getMultipleDurationValue,
+} from "@calcom/features/bookings/lib/get-booking";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
 import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
@@ -26,8 +30,10 @@ export default function Type({
   booking,
   away,
   isBrandingHidden,
+  isSEOIndexable,
   rescheduleUid,
   entity,
+  duration,
 }: PageProps) {
   return (
     <main className={getBookerWrapperClasses({ isEmbed: !!isEmbed })}>
@@ -36,6 +42,7 @@ export default function Type({
         eventSlug={slug}
         rescheduleUid={rescheduleUid ?? undefined}
         hideBranding={isBrandingHidden}
+        isSEOIndexable={isSEOIndexable ?? true}
         entity={entity}
       />
       <Booker
@@ -45,6 +52,7 @@ export default function Type({
         isAway={away}
         hideBranding={isBrandingHidden}
         entity={entity}
+        duration={duration}
       />
     </main>
   );
@@ -55,7 +63,7 @@ Type.PageWrapper = PageWrapper;
 
 async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
   const { user: usernames, type: slug } = paramsSchema.parse(context.params);
-  const { rescheduleUid, bookingUid } = context.query;
+  const { rescheduleUid, bookingUid, duration: queryDuration } = context.query;
 
   const { ssrInit } = await import("@server/lib/ssr");
   const ssr = await ssrInit(context);
@@ -111,12 +119,18 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
   return {
     props: {
       entity: eventData.entity,
+      duration: getMultipleDurationValue(
+        eventData.metadata?.multipleDuration,
+        queryDuration,
+        eventData.length
+      ),
       booking,
       user: usernames.join("+"),
       slug,
       away: false,
       trpcState: ssr.dehydrate(),
       isBrandingHidden: false,
+      isSEOIndexable: true,
       themeBasis: null,
       bookingUid: bookingUid ? `${bookingUid}` : null,
       rescheduleUid: rescheduleUid ? `${rescheduleUid}` : null,
@@ -127,7 +141,7 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
 async function getUserPageProps(context: GetServerSidePropsContext) {
   const { user: usernames, type: slug } = paramsSchema.parse(context.params);
   const username = usernames[0];
-  const { rescheduleUid, bookingUid } = context.query;
+  const { rescheduleUid, bookingUid, duration: queryDuration } = context.query;
   const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(
     context.req.headers.host ?? "",
     context.params?.orgSlug
@@ -143,6 +157,7 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
     select: {
       away: true,
       hideBranding: true,
+      allowSEOIndexing: true,
     },
   });
 
@@ -177,12 +192,18 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
   return {
     props: {
       booking,
+      duration: getMultipleDurationValue(
+        eventData.metadata?.multipleDuration,
+        queryDuration,
+        eventData.length
+      ),
       away: user?.away,
       user: username,
       slug,
       entity: eventData.entity,
       trpcState: ssr.dehydrate(),
       isBrandingHidden: user?.hideBranding,
+      isSEOIndexable: user?.allowSEOIndexing,
       themeBasis: username,
       bookingUid: bookingUid ? `${bookingUid}` : null,
       rescheduleUid: rescheduleUid ? `${rescheduleUid}` : null,

apps/web/pages/_document.tsx

@@ -51,7 +51,7 @@ class MyDocument extends Document<Props> {
           <meta name="msapplication-TileColor" content="#ff0000" />
           <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f9fafb" />
           <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1C1C1C" />
-          {(!IS_PRODUCTION || process.env.VERCEL_ENV === "preview") && (
+          {!IS_PRODUCTION && process.env.VERCEL_ENV === "preview" && (
             // eslint-disable-next-line @next/next/no-sync-scripts
             <script
               data-project-id="KjpMrKTnXquJVKfeqmjdTffVPf1a6Unw2LZ58iE4"

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

@@ -8,7 +8,7 @@ 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 { validateUsernameInOrg } from "@calcom/lib/validateUsernameInOrg";
+import { validateUsernameInTeam, validateUsername } from "@calcom/lib/validateUsername";
 import prisma from "@calcom/prisma";
 import { IdentityProvider } from "@calcom/prisma/enums";
 import { teamMetadataSchema } from "@calcom/prisma/zod-utils";
@@ -65,41 +65,15 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       return res.status(401).json({ message: "Token expired" });
     }
     if (foundToken?.teamId) {
-      const isValidUsername = await validateUsernameInOrg(username, foundToken?.teamId);
-
-      if (!isValidUsername) {
-        return res.status(409).json({ message: "Username already taken" });
+      const teamUserValidation = await validateUsernameInTeam(username, userEmail, foundToken?.teamId);
+      if (!teamUserValidation.isValid) {
+        return res.status(409).json({ message: "Username or email is already taken" });
       }
     }
   } else {
-    // There is an existingUser if the username matches
-    // OR if the email matches AND either the email is verified
-    // or both username and password are set
-    const existingUser = await prisma.user.findFirst({
-      where: {
-        OR: [
-          { username },
-          {
-            AND: [
-              { email: userEmail },
-              {
-                OR: [
-                  { emailVerified: { not: null } },
-                  {
-                    AND: [{ password: { not: null } }, { username: { not: null } }],
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-      },
-    });
-    if (existingUser) {
-      const message: string =
-        existingUser.email !== userEmail ? "Username already taken" : "Email address is already registered";
-
-      return res.status(409).json({ message });
+    const userValidation = await validateUsername(username, userEmail);
+    if (!userValidation.isValid) {
+      return res.status(409).json({ message: "Username or email is already taken" });
     }
   }
 
@@ -111,7 +85,6 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         id: foundToken.teamId,
       },
     });
-
     if (team) {
       const teamMetadata = teamMetadataSchema.parse(team?.metadata);
 

apps/web/pages/api/auth/two-factor/totp/disable.ts

@@ -1,10 +1,10 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { authenticator } from "otplib";
 
 import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { verifyPassword } from "@calcom/features/auth/lib/verifyPassword";
 import { symmetricDecrypt } from "@calcom/lib/crypto";
+import { totpAuthenticatorCheck } from "@calcom/lib/totp";
 import prisma from "@calcom/prisma";
 import { IdentityProvider } from "@calcom/prisma/client";
 
@@ -69,7 +69,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     }
 
     // If user has 2fa enabled, check if body.code is correct
-    const isValidToken = authenticator.check(req.body.code, secret);
+    const isValidToken = totpAuthenticatorCheck(req.body.code, secret);
     if (!isValidToken) {
       return res.status(400).json({ error: ErrorCode.IncorrectTwoFactorCode });
 

apps/web/pages/api/auth/two-factor/totp/enable.ts

@@ -1,9 +1,9 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { authenticator } from "otplib";
 
 import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { symmetricDecrypt } from "@calcom/lib/crypto";
+import { totpAuthenticatorCheck } from "@calcom/lib/totp";
 import prisma from "@calcom/prisma";
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
@@ -48,7 +48,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     return res.status(500).json({ error: ErrorCode.InternalServerError });
   }
 
-  const isValidToken = authenticator.check(req.body.code, secret);
+  const isValidToken = totpAuthenticatorCheck(req.body.code, secret);
   if (!isValidToken) {
     return res.status(400).json({ error: ErrorCode.IncorrectTwoFactorCode });
   }

apps/web/pages/api/email.ts

@@ -7,54 +7,6 @@ import { getTranslation } from "@calcom/lib/server/i18n";
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   if (IS_PRODUCTION) return res.write("Only for development purposes"), res.end();
   const t = await getTranslation("en", "common");
-  const language = { translate: t, locale: "en" };
-
-  const evt = {
-    type: "30min",
-    title: "30min between Pro Example and pro@example.com",
-    description: null,
-    additionalNotes: "asdasdas",
-    startTime: "2022-06-03T09:00:00-06:00",
-    endTime: "2022-06-03T09:30:00-06:00",
-    organizer: {
-      name: "Pro Example",
-      email: "pro@example.com",
-      timeZone: "Europe/London",
-      language,
-    },
-    attendees: [
-      {
-        email: "pro@example.com",
-        name: "pro@example.com",
-        timeZone: "America/Chihuahua",
-        language,
-      },
-    ],
-    location: "Zoom video",
-    destinationCalendar: null,
-    hideCalendarNotes: false,
-    uid: "xxyPr4cg2xx4XoS2KeMEQy",
-    metadata: {},
-    recurringEvent: null,
-    appsStatus: [
-      {
-        appName: "Outlook Calendar",
-        type: "office365_calendar",
-        success: 1,
-        failures: 0,
-        errors: [],
-        warnings: [],
-      },
-      {
-        appName: "Google Meet",
-        type: "conferencing",
-        success: 0,
-        failures: 1,
-        errors: [],
-        warnings: ["In order to use Google Meet you must set your destination calendar to a Google Calendar"],
-      },
-    ],
-  };
 
   res.statusCode = 200;
 

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

@@ -0,0 +1 @@
+export { default, config } from "@calcom/features/ee/payments/api/paypal-webhook";

apps/web/pages/api/trpc/appBasecamp3/[trpc].ts

@@ -0,0 +1,4 @@
+import appBasecamp3 from "@calcom/app-store/basecamp3/trpc-router";
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+
+export default createNextApiHandler(appBasecamp3);

apps/web/pages/api/trpc/kycVerification/[trpc].ts

@@ -0,0 +1,4 @@
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+import { kycVerificationRouter } from "@calcom/trpc/server/routers/viewer/kycVerification/_router";
+
+export default createNextApiHandler(kycVerificationRouter);

apps/web/pages/apps/categories/[category].tsx

@@ -40,9 +40,11 @@ export default function Apps({ apps }: InferGetStaticPropsType<typeof getStaticP
         }>
         <div className="mb-16">
           <div className="grid-col-1 grid grid-cols-1 gap-3 md:grid-cols-3">
-            {apps.map((app) => {
-              return <AppCard key={app.slug} app={app} />;
-            })}
+            {apps
+              .sort((a, b) => (b.installCount || 0) - (a.installCount || 0))
+              .map((app) => {
+                return <AppCard key={app.slug} app={app} />;
+              })}
           </div>
         </div>
       </Shell>

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { debounce } from "lodash";
 import type { GetServerSidePropsContext } from "next";
 import { getCsrfToken } from "next-auth/react";

apps/web/pages/availability/[schedule].tsx

@@ -74,7 +74,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
         <DateOverrideInputDialog
           workingHours={workingHours}
           excludedDates={excludedDates}
-          onChange={(ranges) => append({ ranges })}
+          onChange={(ranges) => ranges.forEach((range) => append({ ranges: [range] }))}
           Trigger={
             <Button color="secondary" StartIcon={Plus} data-testid="add-override">
               {t("add_an_override")}

apps/web/pages/availability/index.tsx

@@ -1,14 +1,16 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import { useCallback } from "react";
 
 import { getLayout } from "@calcom/features/MainLayout";
 import { NewScheduleButton, ScheduleListItem } from "@calcom/features/schedules";
 import { ShellMain } from "@calcom/features/shell/Shell";
+import { AvailabilitySliderTable } from "@calcom/features/timezone-buddy/components/AvailabilitySliderTable";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
-import { EmptyScreen, showToast } from "@calcom/ui";
+import { EmptyScreen, showToast, ToggleGroup } from "@calcom/ui";
 import { Clock } from "@calcom/ui/components/icon";
 
 import { withQuery } from "@lib/QueryCell";
@@ -129,14 +131,52 @@ const WithQuery = withQuery(trpc.viewer.availability.list as any);
 
 export default function AvailabilityPage() {
   const { t } = useLocale();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  // Get a new searchParams string by merging the current
+  // searchParams with a provided key/value pair
+  const createQueryString = useCallback(
+    (name: string, value: string) => {
+      const params = new URLSearchParams(searchParams ?? undefined);
+      params.set(name, value);
+
+      return params.toString();
+    },
+    [searchParams]
+  );
   return (
     <div>
       <ShellMain
         heading={t("availability")}
         hideHeadingOnMobile
         subtitle={t("configure_availability")}
-        CTA={<NewScheduleButton />}>
-        <WithQuery success={({ data }) => <AvailabilityList {...data} />} customLoader={<SkeletonLoader />} />
+        CTA={
+          <div className="flex gap-2">
+            <ToggleGroup
+              className="hidden md:block"
+              defaultValue={searchParams?.get("type") ?? "mine"}
+              onValueChange={(value) => {
+                if (!value) return;
+                router.push(`${pathname}?${createQueryString("type", value)}`);
+              }}
+              options={[
+                { value: "mine", label: t("my_availability") },
+                { value: "team", label: t("team_availability") },
+              ]}
+            />
+            <NewScheduleButton />
+          </div>
+        }>
+        {searchParams?.get("type") === "team" ? (
+          <AvailabilitySliderTable />
+        ) : (
+          <WithQuery
+            success={({ data }) => <AvailabilityList {...data} />}
+            customLoader={<SkeletonLoader />}
+          />
+        )}
       </ShellMain>
     </div>
   );

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

@@ -23,12 +23,9 @@ import {
   useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
-import { SystemField } from "@calcom/features/bookings/lib/SystemField";
+import { SMS_REMINDER_NUMBER_FIELD, SystemField } from "@calcom/features/bookings/lib/SystemField";
 import { getBookingWithResponses } from "@calcom/features/bookings/lib/get-booking";
-import {
-  getBookingFieldsWithSystemFields,
-  SMS_REMINDER_NUMBER_FIELD,
-} from "@calcom/features/bookings/lib/getBookingFields";
+import { getBookingFieldsWithSystemFields } from "@calcom/features/bookings/lib/getBookingFields";
 import { parseRecurringEvent } from "@calcom/lib";
 import { APP_NAME } from "@calcom/lib/constants";
 import {
@@ -96,7 +93,7 @@ const querySchema = z.object({
 });
 
 export default function Success(props: SuccessProps) {
-  const { t } = useLocale();
+  const { t, i18n } = useLocale();
   const router = useRouter();
   const routerQuery = useRouterQuery();
   const pathname = usePathname();
@@ -113,7 +110,8 @@ export default function Success(props: SuccessProps) {
   const attendeeTimeZone = props?.bookingInfo?.attendees.find(
     (attendee) => attendee.email === email
   )?.timeZone;
-  const tz = isSuccessBookingPage && attendeeTimeZone ? attendeeTimeZone : props.tz ? props.tz : timeZone();
+
+  const tz = props.tz ? props.tz : isSuccessBookingPage && attendeeTimeZone ? attendeeTimeZone : timeZone();
 
   const location = props.bookingInfo.location as ReturnType<typeof getEventLocationValue>;
 
@@ -314,7 +312,7 @@ export default function Success(props: SuccessProps) {
           <Link
             href={allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"}
             className="hover:bg-subtle text-subtle hover:text-default mt-2 inline-flex px-1 py-2 text-sm dark:hover:bg-transparent">
-            <ChevronLeft className="h-5 w-5" /> {t("back_to_bookings")}
+            <ChevronLeft className="h-5 w-5 rtl:rotate-180" /> {t("back_to_bookings")}
           </Link>
         </div>
       )}
@@ -394,7 +392,7 @@ export default function Success(props: SuccessProps) {
                       </h4>
                     )}
 
-                  <div className="border-subtle text-default mt-8 grid grid-cols-3 border-t pt-8 text-left">
+                  <div className="border-subtle text-default mt-8 grid grid-cols-3 border-t pt-8 text-left rtl:text-right">
                     {(isCancelled || reschedule) && cancellationReason && (
                       <>
                         <div className="font-medium">
@@ -480,6 +478,21 @@ export default function Success(props: SuccessProps) {
                         </div>
                       </>
                     )}
+                    {props.paymentStatus && (
+                      <>
+                        <div className="mt-3 font-medium">
+                          {props.paymentStatus.paymentOption === "HOLD"
+                            ? t("complete_your_booking")
+                            : t("payment")}
+                        </div>
+                        <div className="col-span-2 mb-2 mt-3">
+                          {new Intl.NumberFormat(i18n.language, {
+                            style: "currency",
+                            currency: props.paymentStatus.currency,
+                          }).format(props.paymentStatus.amount / 100.0)}
+                        </div>
+                      </>
+                    )}
                     {bookingInfo?.description && (
                       <>
                         <div className="mt-9 font-medium">{t("additional_notes")}</div>
@@ -715,7 +728,7 @@ export default function Success(props: SuccessProps) {
               </div>
               {isGmail && (
                 <Alert
-                  className="main -mb-20 mt-4 inline-block text-left sm:-mt-4 sm:mb-4 sm:w-full sm:max-w-xl sm:align-middle"
+                  className="main -mb-20 mt-4 inline-block ltr:text-left rtl:text-right sm:-mt-4 sm:mb-4 sm:w-full sm:max-w-xl sm:align-middle"
                   severity="warning"
                   message={
                     <div>
@@ -1117,6 +1130,9 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
     select: {
       success: true,
       refunded: true,
+      currency: true,
+      amount: true,
+      paymentOption: true,
     },
   });
 

apps/web/pages/bookings/[status].tsx

@@ -179,7 +179,7 @@ export default function Bookings() {
                 )}
                 <div className="pt-2 xl:pt-0">
                   <div className="border-subtle overflow-hidden rounded-md border">
-                    <table className="w-full max-w-full table-fixed">
+                    <table data-testid={`${status}-bookings`} className="w-full max-w-full table-fixed">
                       <tbody className="bg-default divide-subtle divide-y" data-testid="bookings">
                         {query.data.pages.map((page, index) => (
                           <Fragment key={index}>

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

@@ -4,7 +4,7 @@ import { z } from "zod";
 import { Booker } from "@calcom/atoms";
 import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
 import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
-import { getBookingForReschedule } from "@calcom/features/bookings/lib/get-booking";
+import { getBookingForReschedule, getMultipleDurationValue } from "@calcom/features/bookings/lib/get-booking";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
 import slugify from "@calcom/lib/slugify";
@@ -26,6 +26,7 @@ export default function Type({
   isBrandingHidden,
   isTeamEvent,
   entity,
+  duration,
 }: PageProps) {
   return (
     <main className={getBookerWrapperClasses({ isEmbed: !!isEmbed })}>
@@ -44,6 +45,7 @@ export default function Type({
         hideBranding={isBrandingHidden}
         isTeamEvent={isTeamEvent}
         entity={entity}
+        duration={duration}
       />
     </main>
   );
@@ -54,7 +56,7 @@ Type.isBookingPage = true;
 
 async function getUserPageProps(context: GetServerSidePropsContext) {
   const { link, slug } = paramsSchema.parse(context.params);
-  const { rescheduleUid } = context.query;
+  const { rescheduleUid, duration: queryDuration } = context.query;
   const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req.headers.host ?? "");
   const org = isValidOrgDomain ? currentOrgDomain : null;
 
@@ -133,6 +135,11 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
   return {
     props: {
       entity: eventData.entity,
+      duration: getMultipleDurationValue(
+        eventData.metadata?.multipleDuration,
+        queryDuration,
+        eventData.length
+      ),
       booking,
       away: user?.away,
       user: username,

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

@@ -132,6 +132,7 @@ export type FormValues = {
   bookingFields: z.infer<typeof eventTypeBookingFields>;
   availability?: AvailabilityOption;
   bookerLayouts: BookerLayoutSettings;
+  multipleDurationEnabled: boolean;
 };
 
 export type CustomInputParsed = typeof customInputSchema._output;
@@ -278,6 +279,7 @@ const EventTypePage = (props: EventTypeSetupProps) => {
               .filter((slug) => slug !== eventType.slug) ?? [],
         },
       })),
+      seatsPerTimeSlotEnabled: eventType.seatsPerTimeSlot,
     };
   }, [eventType, periodDates, metadata]);
 
@@ -375,7 +377,10 @@ const EventTypePage = (props: EventTypeSetupProps) => {
       seatsPerTimeSlotEnabled,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       minimumBookingNoticeInDurationType,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       bookerLayouts,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      multipleDurationEnabled,
       ...input
     } = values;
 
@@ -406,6 +411,7 @@ const EventTypePage = (props: EventTypeSetupProps) => {
       throw new Error(t("seats_and_no_show_fee_error"));
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { availability, ...rest } = input;
     updateMutation.mutate({
       ...rest,
@@ -463,6 +469,8 @@ const EventTypePage = (props: EventTypeSetupProps) => {
               // We don't need to send send these values to the backend
               // eslint-disable-next-line @typescript-eslint/no-unused-vars
               seatsPerTimeSlotEnabled,
+              // eslint-disable-next-line @typescript-eslint/no-unused-vars
+              multipleDurationEnabled,
               ...input
             } = values;
 
@@ -488,6 +496,7 @@ const EventTypePage = (props: EventTypeSetupProps) => {
                 }
               }
             }
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             const { availability, ...rest } = input;
             updateMutation.mutate({
               ...rest,

apps/web/pages/event-types/index.tsx

@@ -737,7 +737,9 @@ const EventTypeListHeading = ({
           </span>
         )}
         {profile?.slug && (
-          <Link href={`${CAL_URL}/${profile.slug}`} className="text-subtle block text-xs">
+          <Link
+            href={`${orgBranding ? orgBranding.fullDomain : CAL_URL}/${profile.slug}`}
+            className="text-subtle block text-xs">
             {`${bookerUrl.replace("https://", "").replace("http://", "")}/${profile.slug}`}
           </Link>
         )}
@@ -830,13 +832,13 @@ const SetupProfileBanner = ({ closeAction }: { closeAction: () => void }) => {
 
 const Main = ({
   status,
-  error,
+  errorMessage,
   data,
   filters,
 }: {
   status: string;
   data: GetByViewerResponse;
-  error: any;
+  errorMessage?: string;
   filters: ReturnType<typeof getTeamsFiltersFromQuery>;
 }) => {
   const isMobile = useMediaQuery("(max-width: 768px)");
@@ -848,7 +850,7 @@ const Main = ({
   }
 
   if (status === "error") {
-    return <Alert severity="error" title="Something went wrong" message={error.message} />;
+    return <Alert severity="error" title="Something went wrong" message={errorMessage} />;
   }
 
   const isFilteredByOnlyOneItem =
@@ -945,7 +947,7 @@ const EventTypesPage = () => {
         title="Event Types"
         description="Create events to share for people to book on your calendar."
       />
-      <Main data={data} status={status} error={error} filters={filters} />
+      <Main data={data} status={status} errorMessage={error?.message} filters={filters} />
     </ShellMain>
   );
 };

apps/web/pages/settings/admin/kycVerification/index.tsx

@@ -0,0 +1,11 @@
+import PageWrapper from "@components/PageWrapper";
+import { getLayout } from "@components/auth/layouts/AdminLayout";
+
+import KYCVerificationView from "./kycVerificationView";
+
+const KYCVerificationPage = () => <KYCVerificationView />;
+
+KYCVerificationPage.getLayout = getLayout;
+KYCVerificationPage.PageWrapper = PageWrapper;
+
+export default KYCVerificationPage;

apps/web/pages/settings/admin/kycVerification/kycVerificationView.tsx

@@ -0,0 +1,80 @@
+import { useForm } from "react-hook-form";
+
+import { trpc } from "@calcom/trpc";
+import { Meta, Form, Button, TextField, showToast } from "@calcom/ui";
+
+type FormValues = {
+  name?: string | null;
+};
+
+export default function KYCVerificationView() {
+  const teamForm = useForm<FormValues>();
+  const userForm = useForm<FormValues>();
+
+  const mutation = trpc.viewer.kycVerification.verify.useMutation({
+    onSuccess: async (data) => {
+      showToast(`Successfully verified ${data.isTeam ? "team" : "user"} ${data.name}`, "success");
+    },
+    onError: (error) => {
+      showToast(`Verification failed: ${error.message}`, "error");
+    },
+  });
+
+  return (
+    <div>
+      <Meta
+        title="KYC Verification"
+        description="Here you can verify users and teams. This verification is needed for sending sms/whatsapp messages to attendees."
+      />
+      <div>
+        <div className="mb-2 font-medium">Verify Team</div>
+
+        <Form
+          form={teamForm}
+          handleSubmit={(values) => {
+            mutation.mutate({
+              name: values.name || "",
+              isTeam: true,
+            });
+          }}>
+          <div className="flex space-x-2">
+            <TextField
+              {...teamForm.register("name")}
+              label=""
+              type="text"
+              id="name"
+              placeholder="team slug"
+              className="-mt-2 "
+              required
+            />
+            <Button type="submit">Verify</Button>
+          </div>
+        </Form>
+      </div>
+      <div>
+        <div className="mb-2 mt-6 font-medium">Verify User</div>
+        <Form
+          form={userForm}
+          handleSubmit={(values) => {
+            mutation.mutate({
+              name: values.name || "",
+              isTeam: false,
+            });
+          }}>
+          <div className="flex space-x-2">
+            <TextField
+              {...userForm.register("name")}
+              label=""
+              type="text"
+              id="name"
+              placeholder="user name"
+              className="-mt-2"
+              required
+            />
+            <Button type="submit">Verify</Button>
+          </div>
+        </Form>
+      </div>
+    </div>
+  );
+}

apps/web/pages/settings/admin/organizations/index.tsx

@@ -1,9 +1,9 @@
-import UnverifiedOrgsPage from "@calcom/features/ee/organizations/pages/settings/admin/unverifiedOrgPage";
+import AdminOrgsPage from "@calcom/features/ee/organizations/pages/settings/admin/AdminOrgPage";
 
 import type { CalPageWrapper } from "@components/PageWrapper";
 import PageWrapper from "@components/PageWrapper";
 
-const Page = UnverifiedOrgsPage as CalPageWrapper;
+const Page = AdminOrgsPage as CalPageWrapper;
 Page.PageWrapper = PageWrapper;
 
 export default Page;

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

@@ -57,7 +57,7 @@ const ApiKeysView = () => {
           <div>
             {isLoading ? null : data?.length ? (
               <>
-                <div className="mb-8 mt-6 rounded-md border">
+                <div className="border-subtle mb-8 mt-6 rounded-md border">
                   {data.map((apiKey, index) => (
                     <ApiKeyListItem
                       key={apiKey.id}

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

@@ -1,3 +1,4 @@
+import { useSession } from "next-auth/react";
 import { Controller, useForm } from "react-hook-form";
 
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
@@ -20,8 +21,6 @@ import {
   TimezoneSelect,
 } from "@calcom/ui";
 
-import { withQuery } from "@lib/QueryCell";
-
 import PageWrapper from "@components/PageWrapper";
 
 const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
@@ -45,11 +44,6 @@ interface GeneralViewProps {
   user: RouterOutputs["viewer"]["me"];
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const WithQuery = withQuery(trpc.viewer.public.i18n as any, undefined, {
-  trpc: { context: { skipBatch: true } },
-});
-
 const GeneralQueryView = () => {
   const { t } = useLocale();
 
@@ -58,30 +52,26 @@ const GeneralQueryView = () => {
   if (!user) {
     throw new Error(t("something_went_wrong"));
   }
-  return (
-    <WithQuery
-      success={({ data }) => <GeneralView user={user} localeProp={data.locale} />}
-      customLoader={<SkeletonLoader title={t("general")} description={t("general_description")} />}
-    />
-  );
+  return <GeneralView user={user} localeProp={user.locale} />;
 };
 
 const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
   const utils = trpc.useContext();
   const { t } = useLocale();
+  const { update } = useSession();
 
   const mutation = trpc.viewer.updateProfile.useMutation({
-    onSuccess: async () => {
-      // Invalidate our previous i18n cache
-      await utils.viewer.public.i18n.invalidate();
+    onSuccess: async (res) => {
+      await utils.viewer.me.invalidate();
       reset(getValues());
       showToast(t("settings_updated_successfully"), "success");
+      update(res);
     },
     onError: () => {
       showToast(t("error_updating_settings"), "error");
     },
     onSettled: async () => {
-      await utils.viewer.public.i18n.invalidate();
+      await utils.viewer.me.invalidate();
     },
   });
 
@@ -116,6 +106,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
         label: nameOfDay(localeProp, user.weekStart === "Sunday" ? 0 : 1),
       },
       allowDynamicBooking: user.allowDynamicBooking ?? true,
+      allowSEOIndexing: user.allowSEOIndexing ?? true,
     },
   });
   const {
@@ -124,6 +115,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
     getValues,
   } = formMethods;
   const isDisabled = isSubmitting || !isDirty;
+
   return (
     <Form
       form={formMethods}
@@ -225,6 +217,24 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
           )}
         />
       </div>
+
+      <div className="mt-8">
+        <Controller
+          name="allowSEOIndexing"
+          control={formMethods.control}
+          render={() => (
+            <SettingsToggle
+              title={t("seo_indexing")}
+              description={t("allow_seo_indexing")}
+              checked={formMethods.getValues("allowSEOIndexing")}
+              onCheckedChange={(checked) => {
+                formMethods.setValue("allowSEOIndexing", checked, { shouldDirty: true });
+              }}
+            />
+          )}
+        />
+      </div>
+
       <Button
         loading={mutation.isLoading}
         disabled={isDisabled}

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

@@ -77,26 +77,25 @@ type FormValues = {
 const ProfileView = () => {
   const { t } = useLocale();
   const utils = trpc.useContext();
-  const { data: _session, update } = useSession();
+  const { update } = useSession();
 
   const { data: user, isLoading } = trpc.viewer.me.useQuery();
   const updateProfileMutation = trpc.viewer.updateProfile.useMutation({
     onSuccess: async (res) => {
+      await update(res);
       showToast(t("settings_updated_successfully"), "success");
-      if (res.signOutUser && tempFormValues) {
-        if (res.passwordReset) {
-          showToast(t("password_reset_email", { email: tempFormValues.email }), "success");
-          // sign out the user to avoid unauthorized access error
-          await signOut({ callbackUrl: "/auth/logout?passReset=true" });
-        } else {
-          // sign out the user to avoid unauthorized access error
-          await signOut({ callbackUrl: "/auth/logout?emailChange=true" });
-        }
+
+      // signout user only in case of password reset
+      if (res.signOutUser && tempFormValues && res.passwordReset) {
+        showToast(t("password_reset_email", { email: tempFormValues.email }), "success");
+        await signOut({ callbackUrl: "/auth/logout?passReset=true" });
+      } else {
+        utils.viewer.me.invalidate();
+        utils.viewer.avatar.invalidate();
+        utils.viewer.shouldVerifyEmail.invalidate();
       }
-      utils.viewer.me.invalidate();
-      utils.viewer.avatar.invalidate();
+
       setConfirmAuthEmailChangeWarningDialogOpen(false);
-      update(res);
       setTempFormValues(null);
     },
     onError: () => {
@@ -325,7 +324,10 @@ const ProfileView = () => {
             {confirmPasswordErrorMessage && <Alert severity="error" title={confirmPasswordErrorMessage} />}
           </div>
           <DialogFooter showDivider>
-            <Button color="primary" onClick={(e) => onConfirmPassword(e)}>
+            <Button
+              color="primary"
+              loading={confirmPasswordMutation.isLoading}
+              onClick={(e) => onConfirmPassword(e)}>
               {t("confirm")}
             </Button>
             <DialogClose />
@@ -345,7 +347,7 @@ const ProfileView = () => {
           <DialogFooter>
             <Button
               color="primary"
-              disabled={updateProfileMutation.isLoading}
+              loading={updateProfileMutation.isLoading}
               onClick={(e) => onConfirmAuthEmailChange(e)}>
               {t("confirm")}
             </Button>

apps/web/pages/signup.tsx

@@ -14,6 +14,7 @@ import { useFlagMap } from "@calcom/features/flags/context/provider";
 import { getFeatureFlagMap } from "@calcom/features/flags/server/utils";
 import { IS_SELF_HOSTED, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import slugify from "@calcom/lib/slugify";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { teamMetadataSchema } from "@calcom/prisma/zod-utils";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
@@ -130,10 +131,11 @@ export default function Signup({ prepopulateFormValues, token, orgSlug }: Signup
                   <TextField
                     addOnLeading={
                       orgSlug
-                        ? getOrgFullDomain(orgSlug, { protocol: false })
+                        ? getOrgFullDomain(orgSlug, { protocol: true })
                         : `${process.env.NEXT_PUBLIC_WEBSITE_URL}/`
                     }
                     {...register("username")}
+                    disabled={!!orgSlug}
                     required
                   />
                   <EmailField
@@ -192,8 +194,6 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
   };
 
   if (process.env.NEXT_PUBLIC_DISABLE_SIGNUP === "true" || flags["disable-signup"]) {
-    console.log({ flag: flags["disable-signup"] });
-
     return {
       notFound: true,
     };
@@ -210,6 +210,20 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
     where: {
       token,
     },
+    include: {
+      team: {
+        select: {
+          metadata: true,
+          parentId: true,
+          parent: {
+            select: {
+              slug: true,
+            },
+          },
+          slug: true,
+        },
+      },
+    },
   });
 
   if (!verificationToken || verificationToken.expires < new Date()) {
@@ -249,41 +263,35 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
 
   let username = guessUsernameFromEmail(verificationToken.identifier);
 
-  const orgInfo = await prisma.user.findFirst({
-    where: {
-      email: verificationToken?.identifier,
-    },
-    select: {
-      organization: {
-        select: {
-          slug: true,
-          metadata: true,
-        },
-      },
-    },
-  });
+  const tokenTeam = {
+    ...verificationToken?.team,
+    metadata: teamMetadataSchema.parse(verificationToken?.team?.metadata),
+  };
 
-  const userOrgMetadata = teamMetadataSchema.parse(orgInfo?.organization?.metadata ?? {});
+  // Detect if the team is an org by either the metadata flag or if it has a parent team
+  const isOrganization = tokenTeam.metadata?.isOrganization || tokenTeam?.parentId !== null;
+  // If we are dealing with an org, the slug may come from the team itself or its parent
+  const orgSlug = isOrganization
+    ? tokenTeam.slug || tokenTeam.metadata?.requestedSlug || tokenTeam.parent?.slug
+    : null;
 
-  if (!IS_SELF_HOSTED) {
+  // Org context shouldn't check if a username is premium
+  if (!IS_SELF_HOSTED && !isOrganization) {
     // Im not sure we actually hit this because of next redirects signup to website repo - but just in case this is pretty cool :)
     const { available, suggestion } = await checkPremiumUsername(username);
 
     username = available ? username : suggestion || username;
   }
 
-  // Transform all + to - in username
-  username = username.replace(/\+/g, "-");
-
   return {
     props: {
       ...props,
       token,
       prepopulateFormValues: {
         email: verificationToken.identifier,
-        username,
+        username: slugify(username),
       },
-      orgSlug: (orgInfo?.organization?.slug || userOrgMetadata?.requestedSlug) ?? null,
+      orgSlug,
     },
   };
 };

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

@@ -182,7 +182,7 @@ function TeamPage({ team, isUnpublished, markdownStrippedBio, isValidOrgDomain }
               size="lg"
             />
           </div>
-          <p className="font-cal  text-emphasis mb-2 text-2xl tracking-wider">
+          <p className="font-cal  text-emphasis mb-2 text-2xl tracking-wider" data-testid="team-name">
             {team.parent && `${team.parent.name} `}
             {teamName}
           </p>
@@ -199,19 +199,27 @@ function TeamPage({ team, isUnpublished, markdownStrippedBio, isValidOrgDomain }
           <SubTeams />
         ) : (
           <>
-            {(showMembers.isOn || !team.eventTypes.length) && <Team team={team} />}
+            {(showMembers.isOn || !team.eventTypes.length) &&
+              (team.isPrivate ? (
+                <div className="w-full text-center">
+                  <h2 className="text-emphasis font-semibold">{t("you_cannot_see_team_members")}</h2>
+                </div>
+              ) : (
+                <Team team={team} />
+              ))}
             {!showMembers.isOn && team.eventTypes.length > 0 && (
               <div className="mx-auto max-w-3xl ">
                 <EventTypes />
 
-                {!team.hideBookATeamMember && (
+                {/* Hide "Book a team member button when team is private or hideBookATeamMember is true" */}
+                {(!team.hideBookATeamMember || team.isPrivate) && (
                   <div>
                     <div className="relative mt-12">
                       <div className="absolute inset-0 flex items-center" aria-hidden="true">
                         <div className="border-subtle w-full border-t" />
                       </div>
                       <div className="relative flex justify-center">
-                        <span className="dark:bg-darkgray-50 bg-subtle text-subtle dark:text-inverted px-2 text-sm">
+                        <span className="dark:bg-darkgray-50 bg-subtle text-subtle px-2 text-sm">
                           {t("or")}
                         </span>
                       </div>

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

@@ -4,7 +4,7 @@ import { z } from "zod";
 import { Booker } from "@calcom/atoms";
 import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
 import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
-import { getBookingForReschedule } from "@calcom/features/bookings/lib/get-booking";
+import { getBookingForReschedule, getMultipleDurationValue } from "@calcom/features/bookings/lib/get-booking";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
 import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
@@ -18,7 +18,16 @@ import PageWrapper from "@components/PageWrapper";
 
 export type PageProps = inferSSRProps<typeof getServerSideProps> & EmbedProps;
 
-export default function Type({ slug, user, booking, away, isEmbed, isBrandingHidden, entity }: PageProps) {
+export default function Type({
+  slug,
+  user,
+  booking,
+  away,
+  isEmbed,
+  isBrandingHidden,
+  entity,
+  duration,
+}: PageProps) {
   return (
     <main className={getBookerWrapperClasses({ isEmbed: !!isEmbed })}>
       <BookerSeo
@@ -37,6 +46,7 @@ export default function Type({ slug, user, booking, away, isEmbed, isBrandingHid
         hideBranding={isBrandingHidden}
         isTeamEvent
         entity={entity}
+        duration={duration}
       />
     </main>
   );
@@ -55,7 +65,7 @@ const paramsSchema = z.object({
 // 2. If rescheduling, get the booking details
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
   const { slug: teamSlug, type: meetingSlug } = paramsSchema.parse(context.params);
-  const { rescheduleUid } = context.query;
+  const { rescheduleUid, duration: queryDuration } = context.query;
   const { ssrInit } = await import("@server/lib/ssr");
   const ssr = await ssrInit(context);
   const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(
@@ -104,6 +114,11 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   return {
     props: {
       entity: eventData.entity,
+      duration: getMultipleDurationValue(
+        eventData.metadata?.multipleDuration,
+        queryDuration,
+        eventData.length
+      ),
       booking,
       away: false,
       user: teamSlug,

apps/web/playwright/app-store.e2e.ts

@@ -1,6 +1,7 @@
 import { expect } from "@playwright/test";
 
 import { test } from "./lib/fixtures";
+import { installAppleCalendar } from "./lib/testUtils";
 
 test.describe.configure({ mode: "parallel" });
 
@@ -10,10 +11,9 @@ test.describe("App Store - Authed", () => {
   test("Browse apple-calendar and try to install", async ({ page, users }) => {
     const pro = await users.create();
     await pro.apiLogin();
-    await page.goto("/apps/categories/calendar");
-    await page.click('[data-testid="app-store-app-card-apple-calendar"]');
-    await page.waitForURL("/apps/apple-calendar");
-    await page.click('[data-testid="install-app-button"]');
+
+    await installAppleCalendar(page);
+
     await expect(page.locator(`text=Connect to Apple Server`)).toBeVisible();
   });
 
@@ -31,9 +31,8 @@ test.describe("App Store - Authed", () => {
 
 test.describe("App Store - Unauthed", () => {
   test("Browse apple-calendar and try to install", async ({ page }) => {
-    await page.goto("/apps/categories/calendar");
-    await page.click('[data-testid="app-store-app-card-apple-calendar"]');
-    await page.click('[data-testid="install-app-button"]');
+    await installAppleCalendar(page);
+
     await expect(page.locator(`[data-testid="login-form"]`)).toBeVisible();
   });
 });

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

@@ -0,0 +1,35 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { expect } from "@playwright/test";
+
+import { test } from "./lib/fixtures";
+import { installAppleCalendar } from "./lib/testUtils";
+
+test.describe.configure({ mode: "parallel" });
+
+test.afterEach(({ users }) => users.deleteAll());
+
+const APPLE_CALENDAR_EMAIL = process.env.E2E_TEST_APPLE_CALENDAR_EMAIL!;
+const APPLE_CALENDAR_PASSWORD = process.env.E2E_TEST_APPLE_CALENDAR_PASSWORD!;
+
+const SHOULD_SKIP_TESTS = !APPLE_CALENDAR_EMAIL || !APPLE_CALENDAR_PASSWORD;
+
+test.describe("Apple Calendar", () => {
+  // eslint-disable-next-line playwright/no-skipped-test
+  test.skip(SHOULD_SKIP_TESTS, "Skipping due to missing the testing credentials");
+
+  test("Should be able to install and login on Apple Calendar", async ({ page, users }) => {
+    const user = await users.create();
+    await user.apiLogin();
+
+    await installAppleCalendar(page);
+
+    await expect(page.locator('[data-testid="apple-calendar-form"]')).toBeVisible();
+
+    await page.fill('[data-testid="apple-calendar-email"]', APPLE_CALENDAR_EMAIL);
+    await page.fill('[data-testid="apple-calendar-password"]', APPLE_CALENDAR_PASSWORD);
+    await page.click('[data-testid="apple-calendar-login-button"]');
+
+    await expect(page.getByText("Apple Calendar")).toBeVisible();
+    await expect(page.getByText(APPLE_CALENDAR_EMAIL)).toBeVisible();
+  });
+});

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

@@ -1,39 +1,53 @@
 import { expect } from "@playwright/test";
 
+import { randomString } from "@calcom/lib/random";
+
 import { test } from "./lib/fixtures";
 import {
   bookFirstEvent,
   bookOptinEvent,
   bookTimeSlot,
+  expectEmailsToHaveSubject,
   selectFirstAvailableTimeSlotNextMonth,
   testEmail,
   testName,
 } from "./lib/testUtils";
 
+const freeUserObj = { name: `Free-user-${randomString(3)}` };
 test.describe.configure({ mode: "parallel" });
-test.afterEach(async ({ users }) => users.deleteAll());
+test.afterEach(async ({ users }) => {
+  await users.deleteAll();
+});
 
 test.describe("free user", () => {
   test.beforeEach(async ({ page, users }) => {
-    const free = await users.create();
+    const free = await users.create(freeUserObj);
     await page.goto(`/${free.username}`);
   });
 
-  test("cannot book same slot multiple times", async ({ page }) => {
+  test("cannot book same slot multiple times", async ({ page, users, emails }) => {
+    const [user] = users.get();
+    const bookerObj = { email: `testEmail-${randomString(4)}@example.com`, name: "testBooker" };
     // Click first event type
     await page.click('[data-testid="event-type-link"]');
 
     await selectFirstAvailableTimeSlotNextMonth(page);
 
-    await bookTimeSlot(page);
+    await bookTimeSlot(page, bookerObj);
 
     // save booking url
     const bookingUrl: string = page.url();
 
     // Make sure we're navigated to the success page
     await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+    const { title: eventTitle } = await user.getFirstEventAsOwner();
 
-    // return to same time spot booking page
+    await expectEmailsToHaveSubject({
+      emails,
+      organizer: user,
+      booker: bookerObj,
+      eventTitle,
+    });
     await page.goto(bookingUrl);
 
     // book same time spot again

apps/web/playwright/bookings-list.e2e.ts

@@ -0,0 +1,113 @@
+import { expect } from "@playwright/test";
+
+import { BookingStatus } from "@calcom/prisma/client";
+
+import type { Fixtures } from "./lib/fixtures";
+import { test } from "./lib/fixtures";
+
+test.afterEach(({ users }) => users.deleteAll());
+
+test.describe("Bookings", () => {
+  test.describe("Upcoming bookings", () => {
+    test("show attendee bookings and organizer bookings in asc order by startDate", async ({
+      page,
+      users,
+      bookings,
+    }) => {
+      const firstUser = await users.create();
+      const secondUser = await users.create();
+
+      const bookingWhereFirstUserIsOrganizerFixture = await createBooking({
+        title: "Booking as organizer",
+        bookingsFixture: bookings,
+        // Create a booking 3 days from today
+        relativeDate: 3,
+        organizer: firstUser,
+        organizerEventType: firstUser.eventTypes[0],
+        attendees: [
+          { name: "First", email: "first@cal.com", timeZone: "Europe/Berlin" },
+          { name: "Second", email: "second@cal.com", timeZone: "Europe/Berlin" },
+          { name: "Third", email: "third@cal.com", timeZone: "Europe/Berlin" },
+        ],
+      });
+      const bookingWhereFirstUserIsOrganizer = await bookingWhereFirstUserIsOrganizerFixture.self();
+
+      const bookingWhereFirstUserIsAttendeeFixture = await createBooking({
+        title: "Booking as attendee",
+        bookingsFixture: bookings,
+        organizer: secondUser,
+        // Booking created 2 days from today
+        relativeDate: 2,
+        organizerEventType: secondUser.eventTypes[0],
+        attendees: [
+          { name: "OrganizerAsBooker", email: firstUser.email, timeZone: "Europe/Berlin" },
+          { name: "Second", email: "second@cal.com", timeZone: "Europe/Berlin" },
+          { name: "Third", email: "third@cal.com", timeZone: "Europe/Berlin" },
+        ],
+      });
+      const bookingWhereFirstUserIsAttendee = await bookingWhereFirstUserIsAttendeeFixture.self();
+
+      await firstUser.apiLogin();
+      await page.goto(`/bookings/upcoming`);
+      const upcomingBookings = page.locator('[data-testid="upcoming-bookings"]');
+      const firstUpcomingBooking = upcomingBookings.locator('[data-testid="booking-item"]').nth(0);
+      const secondUpcomingBooking = upcomingBookings.locator('[data-testid="booking-item"]').nth(1);
+      await expect(
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        firstUpcomingBooking.locator(`text=${bookingWhereFirstUserIsAttendee!.title}`)
+      ).toBeVisible();
+      await expect(
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        secondUpcomingBooking.locator(`text=${bookingWhereFirstUserIsOrganizer!.title}`)
+      ).toBeVisible();
+    });
+  });
+});
+
+async function createBooking({
+  bookingsFixture,
+  organizer,
+  organizerEventType,
+  attendees,
+  /**
+   * Relative date from today
+   * 0 means today
+   * 1 means tomorrow
+   */
+  relativeDate = 0,
+  durationMins = 30,
+  title,
+}: {
+  bookingsFixture: Fixtures["bookings"];
+  organizer: {
+    id: number;
+    username: string | null;
+  };
+  organizerEventType: {
+    id: number;
+  };
+  attendees: {
+    name: string;
+    email: string;
+    timeZone: string;
+  }[];
+  relativeDate?: number;
+  durationMins?: number;
+  title: string;
+}) {
+  const DAY_MS = 24 * 60 * 60 * 1000;
+  const bookingDurationMs = durationMins * 60 * 1000;
+  const startTime = new Date(Date.now() + relativeDate * DAY_MS);
+  const endTime = new Date(Date.now() + relativeDate * DAY_MS + bookingDurationMs);
+  return await bookingsFixture.create(organizer.id, organizer.username, organizerEventType.id, {
+    title,
+    status: BookingStatus.ACCEPTED,
+    startTime,
+    endTime,
+    attendees: {
+      createMany: {
+        data: [...attendees],
+      },
+    },
+  });
+}

apps/web/playwright/dynamic-booking-pages.e2e.ts

@@ -9,10 +9,7 @@ import {
 
 test.afterEach(({ users }) => users.deleteAll());
 
-// Due to some reason for Dynamic booking cancellation, daily video api_key is not set which causes cancellation to fail.
-// This test is skipped until the issue is resolved in GH actions.
-// eslint-disable-next-line playwright/no-skipped-test
-test.skip("dynamic booking", async ({ page, users }) => {
+test("dynamic booking", async ({ page, users }) => {
   const pro = await users.create();
   await pro.apiLogin();
 
@@ -20,10 +17,13 @@ test.skip("dynamic booking", async ({ page, users }) => {
   await page.goto(`/${pro.username}+${free.username}`);
 
   await test.step("book an event first day in next month", async () => {
-    // Click first event type
-    await page.click('[data-testid="event-type-link"]');
     await selectFirstAvailableTimeSlotNextMonth(page);
+
+    // Fill what is this meeting about? title
+    await page.locator('[name="title"]').fill("Test meeting");
+
     await bookTimeSlot(page);
+
     await expect(page.locator("[data-testid=success-page]")).toBeVisible();
   });
 
@@ -37,7 +37,8 @@ test.skip("dynamic booking", async ({ page, users }) => {
       return !!bookingId;
     });
     await selectSecondAvailableTimeSlotNextMonth(page);
-    // --- fill form
+
+    // No need to fill fields since they should be already filled
     await page.locator('[data-testid="confirm-reschedule-button"]').click();
     await page.waitForURL((url) => {
       return url.pathname.startsWith("/booking");

apps/web/playwright/event-types.e2e.ts

@@ -1,3 +1,4 @@
+import type { Page } from "@playwright/test";
 import { expect } from "@playwright/test";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
@@ -91,6 +92,7 @@ test.describe("Event Types tests", () => {
       expect(formTitle).toBe(firstTitle);
       expect(formSlug).toContain(firstSlug);
     });
+
     test("edit first event", async ({ page }) => {
       const $eventTypes = page.locator("[data-testid=event-types] > li a");
       const firstEventTypeElement = $eventTypes.first();
@@ -152,5 +154,46 @@ test.describe("Event Types tests", () => {
 
       await expect(page.locator("[data-testid=success-page]")).toBeVisible();
     });
+
+    test.describe("Different Locations Tests", () => {
+      test("can add Attendee Phone Number location and book with it", async ({ page }) => {
+        await gotoFirstEventType(page);
+        await selectAttendeePhoneNumber(page);
+        await saveEventType(page);
+        await gotoBookingPage(page);
+        await selectFirstAvailableTimeSlotNextMonth(page);
+
+        await page.locator(`[data-fob-field-name="location"] input`).fill("9199999999");
+        await bookTimeSlot(page);
+
+        await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+        await expect(page.locator("text=+19199999999")).toBeVisible();
+      });
+    });
   });
 });
+
+const selectAttendeePhoneNumber = async (page: Page) => {
+  const locationOptionText = "Attendee Phone Number";
+  await page.locator("#location-select").click();
+  await page.locator(`text=${locationOptionText}`).click();
+};
+
+async function gotoFirstEventType(page: Page) {
+  const $eventTypes = page.locator("[data-testid=event-types] > li a");
+  const firstEventTypeElement = $eventTypes.first();
+  await firstEventTypeElement.click();
+  await page.waitForURL((url) => {
+    return !!url.pathname.match(/\/event-types\/.+/);
+  });
+}
+
+async function saveEventType(page: Page) {
+  await page.locator("[data-testid=update-eventtype]").click();
+}
+
+async function gotoBookingPage(page: Page) {
+  const previewLink = await page.locator("[data-testid=preview-button]").getAttribute("href");
+
+  await page.goto(previewLink ?? "");
+}

apps/web/playwright/fixtures/bookings.ts

@@ -19,9 +19,12 @@ export const createBookingsFixture = (page: Page) => {
       username: string | null,
       eventTypeId = -1,
       {
+        title = "",
         rescheduled = false,
         paid = false,
         status = "ACCEPTED",
+        startTime,
+        endTime,
         attendees = {
           create: {
             email: "attendee@example.com",
@@ -39,9 +42,9 @@ export const createBookingsFixture = (page: Page) => {
       const booking = await prisma.booking.create({
         data: {
           uid: uid,
-          title: "30min",
-          startTime: startDate,
-          endTime: endDateParam || dayjs().add(1, "day").add(30, "minutes").toDate(),
+          title: title || "30min",
+          startTime: startTime || startDate,
+          endTime: endTime || endDateParam || dayjs().add(1, "day").add(30, "minutes").toDate(),
           user: {
             connect: {
               id: userId,

apps/web/playwright/fixtures/users.ts

@@ -2,8 +2,10 @@ import type { Page, WorkerInfo } from "@playwright/test";
 import type Prisma from "@prisma/client";
 import { Prisma as PrismaType } from "@prisma/client";
 import { hashSync as hash } from "bcryptjs";
+import type { API } from "mailhog";
 
 import dayjs from "@calcom/dayjs";
+import stripe from "@calcom/features/ee/payments/server/stripe";
 import { DEFAULT_SCHEDULE, getAvailabilityFromSchedule } from "@calcom/lib/availability";
 import { prisma } from "@calcom/prisma";
 import { MembershipRole, SchedulingType } from "@calcom/prisma/enums";
@@ -116,7 +118,7 @@ const createTeamAndAddUser = async (
 };
 
 // creates a user fixture instance and stores the collection
-export const createUsersFixture = (page: Page, workerInfo: WorkerInfo) => {
+export const createUsersFixture = (page: Page, emails: API | undefined, workerInfo: WorkerInfo) => {
   const store = { users: [], page } as { users: UserFixture[]; page: typeof page };
   return {
     create: async (
@@ -331,6 +333,21 @@ export const createUsersFixture = (page: Page, workerInfo: WorkerInfo) => {
     },
     deleteAll: async () => {
       const ids = store.users.map((u) => u.id);
+      if (emails) {
+        const emailMessageIds: string[] = [];
+        for (const user of store.users) {
+          const emailMessages = await emails.search(user.email);
+          if (emailMessages && emailMessages.count > 0) {
+            emailMessages.items.forEach((item) => {
+              emailMessageIds.push(item.ID);
+            });
+          }
+        }
+        for (const id of emailMessageIds) {
+          await emails.deleteMessage(id);
+        }
+      }
+
       await prisma.user.deleteMany({ where: { id: { in: ids } } });
       store.users = [];
     },
@@ -387,6 +404,12 @@ const createUserFixture = (user: UserWithIncludes, page: Page) => {
         include: { team: { select: { children: true, metadata: true, name: true } } },
       });
     },
+    getFirstEventAsOwner: async () =>
+      prisma.eventType.findFirstOrThrow({
+        where: {
+          userId: user.id,
+        },
+      }),
     getFirstTeamEvent: async (teamId: number) => {
       return prisma.eventType.findFirstOrThrow({
         where: {
@@ -397,8 +420,8 @@ const createUserFixture = (user: UserWithIncludes, page: Page) => {
     getPaymentCredential: async () => getPaymentCredential(store.page),
     setupEventWithPrice: async (eventType: Pick<Prisma.EventType, "id">) =>
       setupEventWithPrice(eventType, store.page),
-    bookAndPaidEvent: async (eventType: Pick<Prisma.EventType, "slug">) =>
-      bookAndPaidEvent(user, eventType, store.page),
+    bookAndPayEvent: async (eventType: Pick<Prisma.EventType, "slug">) =>
+      bookAndPayEvent(user, eventType, store.page),
     makePaymentUsingStripe: async () => makePaymentUsingStripe(store.page),
     // ths is for developemnt only aimed to inject debugging messages in the metadata field of the user
     debug: async (message: string | Record<string, JSONValue>) => {
@@ -408,6 +431,7 @@ const createUserFixture = (user: UserWithIncludes, page: Page) => {
       });
     },
     delete: async () => await prisma.user.delete({ where: { id: store.user.id } }),
+    confirmPendingPayment: async () => confirmPendingPayment(store.page),
   };
 };
 
@@ -418,12 +442,18 @@ type CustomUserOptsKeys = "username" | "password" | "completedOnboarding" | "loc
 type CustomUserOpts = Partial<Pick<Prisma.User, CustomUserOptsKeys>> & {
   timeZone?: TimeZoneEnum;
   eventTypes?: SupportedTestEventTypes[];
+  // ignores adding the worker-index after username
+  useExactUsername?: boolean;
 };
 
 // creates the actual user in the db.
 const createUser = (workerInfo: WorkerInfo, opts?: CustomUserOpts | null): PrismaType.UserCreateInput => {
   // build a unique name for our user
-  const uname = `${opts?.username || "user"}-${workerInfo.workerIndex}-${Date.now()}`;
+  const uname =
+    opts?.useExactUsername && opts?.username
+      ? opts.username
+      : `${opts?.username || "user"}-${workerInfo.workerIndex}-${Date.now()}`;
+
   return {
     username: uname,
     name: opts?.name,
@@ -449,6 +479,36 @@ const createUser = (workerInfo: WorkerInfo, opts?: CustomUserOpts | null): Prism
   };
 };
 
+async function confirmPendingPayment(page: Page) {
+  await page.waitForURL(new RegExp("/booking/*"));
+
+  const url = page.url();
+
+  const params = new URLSearchParams(url.split("?")[1]);
+
+  const id = params.get("payment_intent");
+
+  if (!id) throw new Error(`Payment intent not found in url ${url}`);
+
+  const payload = JSON.stringify(
+    { type: "payment_intent.succeeded", data: { object: { id } }, account: "e2e_test" },
+    null,
+    2
+  );
+
+  const signature = stripe.webhooks.generateTestHeaderString({
+    payload,
+    secret: process.env.STRIPE_WEBHOOK_SECRET as string,
+  });
+
+  const response = await page.request.post("/api/integrations/stripepayment/webhook", {
+    data: payload,
+    headers: { "stripe-signature": signature },
+  });
+
+  if (response.status() !== 200) throw new Error(`Failed to confirm payment. Response: ${response.text()}`);
+}
+
 // login using a replay of an E2E routine.
 export async function login(
   user: Pick<Prisma.User, "username"> & Partial<Pick<Prisma.User, "password" | "email">>,
@@ -482,7 +542,7 @@ export async function apiLogin(
     .then((json) => json.csrfToken);
   const data = {
     email: user.email ?? `${user.username}@example.com`,
-    password: user.password ?? user.username!,
+    password: user.password ?? user.username,
     callbackURL: "http://localhost:3000/",
     redirect: "false",
     json: "true",
@@ -500,7 +560,7 @@ export async function setupEventWithPrice(eventType: Pick<Prisma.EventType, "id"
   await page.getByTestId("update-eventtype").click();
 }
 
-export async function bookAndPaidEvent(
+export async function bookAndPayEvent(
   user: Pick<Prisma.User, "username">,
   eventType: Pick<Prisma.EventType, "slug">,
   page: Page

apps/web/playwright/integrations-stripe.e2e.ts

@@ -1,6 +1,7 @@
 import { expect } from "@playwright/test";
 import type Prisma from "@prisma/client";
 
+import type { Fixtures } from "./lib/fixtures";
 import { test } from "./lib/fixtures";
 import { todo, selectFirstAvailableTimeSlotNextMonth } from "./lib/testUtils";
 
@@ -41,7 +42,7 @@ test.describe("Stripe integration", () => {
 
     await user.getPaymentCredential();
     await user.setupEventWithPrice(eventType);
-    await user.bookAndPaidEvent(eventType);
+    await user.bookAndPayEvent(eventType);
     // success
     await expect(page.locator("[data-testid=success-page]")).toBeVisible();
   });
@@ -78,7 +79,7 @@ test.describe("Stripe integration", () => {
 
     await user.getPaymentCredential();
     await user.setupEventWithPrice(eventType);
-    await user.bookAndPaidEvent(eventType);
+    await user.bookAndPayEvent(eventType);
 
     // Rescheduling the event
     await Promise.all([page.waitForURL("/booking/*"), page.click('[data-testid="reschedule-link"]')]);
@@ -92,8 +93,57 @@ test.describe("Stripe integration", () => {
 
     await user.makePaymentUsingStripe();
   });
-  todo("Payment should confirm pending payment booking");
-  todo("Payment should trigger a BOOKING_PAID webhook");
-  todo("Paid booking should be able to be cancelled");
-  todo("Cancelled paid booking should be refunded");
+
+  test("Paid booking should be able to be cancelled", async ({ page, users }) => {
+    const user = await users.create();
+    const eventType = user.eventTypes.find((e) => e.slug === "paid") as Prisma.EventType;
+    await user.apiLogin();
+    await page.goto("/apps/installed");
+
+    await user.getPaymentCredential();
+    await user.setupEventWithPrice(eventType);
+    await user.bookAndPayEvent(eventType);
+
+    await page.click('[data-testid="cancel"]');
+    await page.click('[data-testid="confirm_cancel"]');
+
+    await expect(await page.locator('[data-testid="cancelled-headline"]').first()).toBeVisible();
+  });
+
+  test.describe("When event is paid and confirmed", () => {
+    let user: Awaited<ReturnType<Fixtures["users"]["create"]>>;
+    let eventType: Prisma.EventType;
+
+    test.beforeEach(async ({ page, users }) => {
+      user = await users.create();
+      eventType = user.eventTypes.find((e) => e.slug === "paid") as Prisma.EventType;
+      await user.apiLogin();
+      await page.goto("/apps/installed");
+
+      await user.getPaymentCredential();
+      await user.setupEventWithPrice(eventType);
+      await user.bookAndPayEvent(eventType);
+      await user.confirmPendingPayment();
+    });
+
+    test("Cancelled paid booking should be refunded", async ({ page, users, request }) => {
+      await page.click('[data-testid="cancel"]');
+      await page.click('[data-testid="confirm_cancel"]');
+
+      await expect(await page.locator('[data-testid="cancelled-headline"]').first()).toBeVisible();
+      await expect(page.getByText("This booking payment has been refunded")).toBeVisible();
+    });
+
+    test("Payment should confirm pending payment booking", async ({ page, users }) => {
+      await page.goto("/bookings/upcoming");
+
+      const paidBadge = page.locator('[data-testid="paid_badge"]').first();
+
+      await expect(paidBadge).toBeVisible();
+      expect(await paidBadge.innerText()).toBe("Paid");
+    });
+
+    todo("Payment should trigger a BOOKING_PAID webhook");
+    todo("Paid and confirmed booking should be able to be rescheduled");
+  });
 });

apps/web/playwright/lib/fixtures.ts

@@ -1,6 +1,9 @@
 import type { Page } from "@playwright/test";
 import { test as base } from "@playwright/test";
+import type { API } from "mailhog";
+import mailhog from "mailhog";
 
+import { IS_MAILHOG_ENABLED } from "@calcom/lib/constants";
 import prisma from "@calcom/prisma";
 
 import type { ExpectedUrlDetails } from "../../../../playwright.config";
@@ -19,6 +22,7 @@ export interface Fixtures {
   getActionFiredDetails: ReturnType<typeof createGetActionFiredDetails>;
   servers: ReturnType<typeof createServersFixture>;
   prisma: typeof prisma;
+  emails?: API;
 }
 
 declare global {
@@ -40,8 +44,8 @@ declare global {
  *  @see https://playwright.dev/docs/test-fixtures
  */
 export const test = base.extend<Fixtures>({
-  users: async ({ page, context }, use, workerInfo) => {
-    const usersFixture = createUsersFixture(page, workerInfo);
+  users: async ({ page, context, emails }, use, workerInfo) => {
+    const usersFixture = createUsersFixture(page, emails, workerInfo);
     await use(usersFixture);
   },
   bookings: async ({ page }, use) => {
@@ -67,4 +71,12 @@ export const test = base.extend<Fixtures>({
   prisma: async ({}, use) => {
     await use(prisma);
   },
+  emails: async ({}, use) => {
+    if (IS_MAILHOG_ENABLED) {
+      const mailhogAPI = mailhog();
+      await use(mailhogAPI);
+    } else {
+      await use(undefined);
+    }
+  },
 });

apps/web/playwright/lib/testUtils.ts

@@ -2,7 +2,9 @@ import type { Page } from "@playwright/test";
 import { expect } from "@playwright/test";
 import type { IncomingMessage, ServerResponse } from "http";
 import { createServer } from "http";
+// eslint-disable-next-line no-restricted-imports
 import { noop } from "lodash";
+import type { API, Messages } from "mailhog";
 
 import { test } from "./fixtures";
 
@@ -183,3 +185,46 @@ export async function gotoRoutingLink({
   // HACK: There seems to be some issue with the inputs to the form getting reset if we don't wait.
   await new Promise((resolve) => setTimeout(resolve, 1000));
 }
+
+export async function installAppleCalendar(page: Page) {
+  await page.goto("/apps/categories/calendar");
+  await page.click('[data-testid="app-store-app-card-apple-calendar"]');
+  await page.waitForURL("/apps/apple-calendar");
+  await page.click('[data-testid="install-app-button"]');
+}
+export async function getEmailsReceivedByUser({
+  emails,
+  userEmail,
+}: {
+  emails?: API;
+  userEmail: string;
+}): Promise<Messages | null> {
+  if (!emails) return null;
+  return emails.search(userEmail, "to");
+}
+
+export async function expectEmailsToHaveSubject({
+  emails,
+  organizer,
+  booker,
+  eventTitle,
+}: {
+  emails?: API;
+  organizer: { name?: string | null; email: string };
+  booker: { name: string; email: string };
+  eventTitle: string;
+}) {
+  if (!emails) return null;
+  const emailsOrganizerReceived = await getEmailsReceivedByUser({ emails, userEmail: organizer.email });
+  const emailsBookerReceived = await getEmailsReceivedByUser({ emails, userEmail: booker.email });
+
+  expect(emailsOrganizerReceived?.total).toBe(1);
+  expect(emailsBookerReceived?.total).toBe(1);
+
+  const [organizerFirstEmail] = (emailsOrganizerReceived as Messages).items;
+  const [bookerFirstEmail] = (emailsBookerReceived as Messages).items;
+  const emailSubject = `${eventTitle} between ${organizer.name ?? "Nameless"} and ${booker.name}`;
+
+  expect(organizerFirstEmail.subject).toBe(emailSubject);
+  expect(bookerFirstEmail.subject).toBe(emailSubject);
+}

apps/web/playwright/login.2fa.e2e.ts

@@ -3,6 +3,7 @@ import { expect } from "@playwright/test";
 import { authenticator } from "otplib";
 
 import { symmetricDecrypt } from "@calcom/lib/crypto";
+import { totpAuthenticatorCheck } from "@calcom/lib/totp";
 
 import { test } from "./lib/fixtures";
 
@@ -141,7 +142,7 @@ test.describe("2FA Tests", async () => {
 
 async function fillOtp({ page, secret, noRetry }: { page: Page; secret: string; noRetry?: boolean }) {
   let token = authenticator.generate(secret);
-  if (!noRetry && !authenticator.check(token, secret)) {
+  if (!noRetry && !totpAuthenticatorCheck(token, secret)) {
     console.log("Token expired, Renerating.");
     // Maybe token was just about to expire, try again just once more
     token = authenticator.generate(secret);