first commit

calcom/apps/web/playwright/ab-tests-redirect.e2e.ts

@@ -0,0 +1,129 @@
+import type { Page } from "@playwright/test";
+import { expect } from "@playwright/test";
+
+import { test } from "./lib/fixtures";
+import { testBothFutureAndLegacyRoutes } from "./lib/future-legacy-routes";
+
+test.describe.configure({ mode: "parallel" });
+
+const ensureAppDir = async (page: Page) => {
+  const dataNextJsRouter = await page.evaluate(() =>
+    window.document.documentElement.getAttribute("data-nextjs-router")
+  );
+
+  expect(dataNextJsRouter).toEqual("app");
+};
+
+testBothFutureAndLegacyRoutes.describe("apps/ A/B tests", (routeVariant) => {
+  test("should render the /apps/installed/[category]", async ({ page, users }) => {
+    const user = await users.create();
+
+    await user.apiLogin();
+
+    await page.goto("/apps/installed/messaging");
+
+    const locator = page.getByRole("heading", { name: "Messaging" });
+
+    if (routeVariant === "future") {
+      await ensureAppDir(page);
+    }
+
+    await expect(locator).toBeVisible();
+  });
+
+  test("should render the /apps/[slug]", async ({ page, users }) => {
+    const user = await users.create();
+
+    await user.apiLogin();
+
+    await page.goto("/apps/telegram");
+
+    const locator = page.getByRole("heading", { name: "Telegram" });
+
+    if (routeVariant === "future") {
+      await ensureAppDir(page);
+    }
+
+    await expect(locator).toBeVisible();
+  });
+
+  test("should render the /apps/[slug]/setup", async ({ page, users }) => {
+    const user = await users.create();
+
+    await user.apiLogin();
+
+    await page.goto("/apps/apple-calendar/setup");
+
+    const locator = page.getByRole("heading", { name: "Connect to Apple Server" });
+
+    if (routeVariant === "future") {
+      await ensureAppDir(page);
+    }
+
+    await expect(locator).toBeVisible();
+  });
+
+  test("should render the /apps/categories", async ({ page, users }) => {
+    const user = await users.create();
+
+    await user.apiLogin();
+
+    await page.goto("/apps/categories");
+
+    const locator = page.getByTestId("app-store-category-messaging");
+
+    if (routeVariant === "future") {
+      await ensureAppDir(page);
+    }
+
+    await expect(locator).toBeVisible();
+  });
+
+  test("should render the /apps/categories/[category]", async ({ page, users }) => {
+    const user = await users.create();
+
+    await user.apiLogin();
+
+    await page.goto("/apps/categories/messaging");
+
+    const locator = page.getByText(/messaging apps/i);
+
+    if (routeVariant === "future") {
+      await ensureAppDir(page);
+    }
+
+    await expect(locator).toBeVisible();
+  });
+
+  test("should render the /bookings/[status]", async ({ page, users }) => {
+    const user = await users.create();
+
+    await user.apiLogin();
+
+    await page.goto("/bookings/upcoming/");
+
+    const locator = page.getByTestId("horizontal-tab-upcoming");
+
+    if (routeVariant === "future") {
+      await ensureAppDir(page);
+    }
+
+    await expect(locator).toHaveClass(/bg-emphasis/);
+  });
+
+  test("should render the /getting-started", async ({ page, users }) => {
+    const user = await users.create({ completedOnboarding: false, name: null });
+
+    await user.apiLogin();
+
+    await page.goto("/getting-started/connected-calendar");
+
+    const locator = page.getByText("Apple Calendar");
+
+    if (routeVariant === "future") {
+      await ensureAppDir(page);
+    }
+
+    await expect(locator).toBeVisible();
+  });
+});

calcom/apps/web/playwright/app-list-card.e2e.ts

@@ -0,0 +1,14 @@
+import { test } from "./lib/fixtures";
+
+test.describe("AppListCard", async () => {
+  test("should remove the highlight from the URL", async ({ page, users }) => {
+    const user = await users.create({});
+    await user.apiLogin();
+
+    await page.goto("/apps/installed/conferencing?hl=daily-video");
+
+    await page.waitForLoadState();
+
+    await page.waitForURL("/apps/installed/conferencing");
+  });
+});

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

@@ -0,0 +1,67 @@
+import { expect } from "@playwright/test";
+
+import { test } from "./lib/fixtures";
+import { testBothFutureAndLegacyRoutes } from "./lib/future-legacy-routes";
+import { installAppleCalendar } from "./lib/testUtils";
+
+test.describe.configure({ mode: "parallel" });
+
+test.afterEach(({ users }) => users.deleteAll());
+
+testBothFutureAndLegacyRoutes.describe("App Store - Authed", (routeVariant) => {
+  test("should render /apps page", async ({ page, users, context }) => {
+    test.skip(routeVariant === "future", "Future route not ready yet");
+    const user = await users.create();
+
+    await user.apiLogin();
+
+    await page.goto("/apps/");
+
+    await page.waitForLoadState();
+
+    const locator = page.getByRole("heading", { name: "App Store" });
+
+    await expect(locator).toBeVisible();
+  });
+
+  test("Browse apple-calendar and try to install", async ({ page, users }) => {
+    const pro = await users.create();
+    await pro.apiLogin();
+
+    await installAppleCalendar(page);
+
+    await expect(page.locator(`text=Connect to Apple Server`)).toBeVisible();
+  });
+
+  test("Can add Google calendar from the app store", async ({ page, users }) => {
+    const user = await users.create();
+    await user.apiLogin();
+
+    await page.goto("/apps/google-calendar");
+
+    await page.getByTestId("install-app-button").click();
+
+    await page.waitForNavigation();
+
+    await expect(page.url()).toContain("accounts.google.com");
+  });
+
+  test("Installed Apps - Navigation", async ({ page, users }) => {
+    const user = await users.create();
+    await user.apiLogin();
+    await page.goto("/apps/installed");
+    await page.waitForSelector('[data-testid="connect-calendar-apps"]');
+    await page.click('[data-testid="vertical-tab-payment"]');
+    await page.waitForSelector('[data-testid="connect-payment-apps"]');
+    await page.click('[data-testid="vertical-tab-automation"]');
+    await page.waitForSelector('[data-testid="connect-automation-apps"]');
+  });
+});
+
+test.describe("App Store - Unauthed", () => {
+  test("Browse apple-calendar and try to install", async ({ page }) => {
+    await installAppleCalendar(page);
+
+    await expect(page.locator(`[data-testid="login-form"]`)).toBeVisible();
+  });
+});

calcom/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();
+  });
+});

calcom/apps/web/playwright/apps/analytics/analyticsApps.e2e.ts

@@ -0,0 +1,45 @@
+import { test } from "../../lib/fixtures";
+
+const ALL_APPS = ["fathom", "matomo", "plausible", "ga4", "gtm", "metapixel"];
+
+test.describe.configure({ mode: "parallel" });
+test.afterEach(({ users }) => users.deleteAll());
+
+test.describe("check analytics Apps", () => {
+  test.describe("check analytics apps by skipping the configure step", () => {
+    ALL_APPS.forEach((app) => {
+      test(`check analytics app: ${app} by skipping the configure step`, async ({
+        appsPage,
+        page,
+        users,
+      }) => {
+        const user = await users.create();
+        await user.apiLogin();
+        await page.goto("apps/categories/analytics");
+        await appsPage.installAnalyticsAppSkipConfigure(app);
+
+        await page.goto("/event-types");
+        await appsPage.goToEventType("30 min");
+        await appsPage.goToAppsTab();
+        await appsPage.verifyAppsInfo(0);
+        await appsPage.activeApp(app);
+        await appsPage.verifyAppsInfo(1);
+      });
+    });
+  });
+  test.describe("check analytics apps using the new flow", () => {
+    ALL_APPS.forEach((app) => {
+      test(`check analytics app: ${app}`, async ({ appsPage, page, users }) => {
+        const user = await users.create();
+        await user.apiLogin();
+        const eventTypes = await user.getUserEventsAsOwner();
+        const eventTypesIds = eventTypes.map((item) => item.id);
+        await page.goto("/apps/categories/analytics");
+        await appsPage.installAnalyticsApp(app, eventTypesIds);
+        for (const id of eventTypesIds) {
+          await appsPage.verifyAppsInfoNew(app, id);
+        }
+      });
+    });
+  });
+});

calcom/apps/web/playwright/apps/conferencing/conferencingApps.e2e.ts

@@ -0,0 +1,146 @@
+import { test } from "../../lib/fixtures";
+
+export type TApp = {
+  slug: string;
+  type: string;
+  organizerInputPlaceholder?: string;
+  label: string;
+};
+type TAllApps = {
+  [key: string]: TApp;
+};
+
+const ALL_APPS: TAllApps = {
+  around: {
+    slug: "around",
+    type: "integrations:around_video",
+    organizerInputPlaceholder: "https://www.around.co/rick",
+    label: "Around Video",
+  },
+  campfire: {
+    slug: "campfire",
+    type: "integrations:campfire_video",
+    organizerInputPlaceholder: "https://party.campfire.to/your-team",
+    label: "Campfire",
+  },
+  demodesk: {
+    slug: "demodesk",
+    type: "integrations:demodesk_video",
+    organizerInputPlaceholder: "https://demodesk.com/meet/mylink",
+    label: "Demodesk",
+  },
+  discord: {
+    slug: "discord",
+    type: "integrations:discord_video",
+    organizerInputPlaceholder: "https://discord.gg/420gg69",
+    label: "Discord",
+  },
+  eightxeight: {
+    slug: "eightxeight",
+    type: "integrations:eightxeight_video",
+    organizerInputPlaceholder: "https://8x8.vc/company",
+    label: "8x8",
+  },
+  "element-call": {
+    slug: "element-call",
+    type: "integrations:element-call_video",
+    organizerInputPlaceholder: "https://call.element.io/",
+    label: "Element Call",
+  },
+  facetime: {
+    slug: "facetime",
+    type: "integrations:facetime_video",
+    organizerInputPlaceholder: "https://facetime.apple.com/join=#v=1&p=zU9w7QzuEe",
+    label: "Facetime",
+  },
+  mirotalk: {
+    slug: "mirotalk",
+    type: "integrations:mirotalk_video",
+    organizerInputPlaceholder: "https://p2p.mirotalk.com/join/80085ShinyPhone",
+    label: "Mirotalk",
+  },
+  ping: {
+    slug: "ping",
+    type: "integrations:ping_video",
+    organizerInputPlaceholder: "https://www.ping.gg/call/theo",
+    label: "Ping.gg",
+  },
+  riverside: {
+    slug: "riverside",
+    type: "integrations:riverside_video",
+    organizerInputPlaceholder: "https://riverside.fm/studio/abc123",
+    label: "Riverside Video",
+  },
+  roam: {
+    slug: "roam",
+    type: "integrations:roam_video",
+    organizerInputPlaceholder: "https://ro.am/r/#/p/yHwFBQrRTMuptqKYo_wu8A/huzRiHnR-np4RGYKV-c0pQ",
+    label: "Roam",
+  },
+  salesroom: {
+    slug: "salesroom",
+    type: "integrations:salesroom_video",
+    organizerInputPlaceholder: "https://user.sr.chat",
+    label: "Salesroom",
+  },
+  sirius_video: {
+    slug: "sirius_video",
+    type: "integrations:sirius_video_video",
+    organizerInputPlaceholder: "https://sirius.video/sebastian",
+    label: "Sirius Video",
+  },
+  whereby: {
+    slug: "whereby",
+    type: "integrations:whereby_video",
+    label: "Whereby Video",
+    organizerInputPlaceholder: "https://www.whereby.com/cal",
+  },
+};
+
+const ALL_APPS_ARRAY: TApp[] = Object.values(ALL_APPS);
+/**
+ * @todo add tests for
+ * shimmervideo
+ * sylapsvideo
+ * googlevideo
+ * huddle
+ * jelly
+ * jistivideo
+ * office365video
+ * mirotalk
+ * tandemvideo
+ * webex
+ * zoomvideo
+ */
+
+test.describe.configure({ mode: "parallel" });
+test.afterEach(({ users }) => users.deleteAll());
+
+test.describe("check non-oAuth link-based conferencing apps", () => {
+  ALL_APPS_ARRAY.forEach((app) => {
+    test(`check conferencing app: ${app.slug} by skipping the configure step`, async ({
+      appsPage,
+      page,
+      users,
+    }) => {
+      const user = await users.create();
+      await user.apiLogin();
+      await page.goto("apps/categories/conferencing");
+      await appsPage.installConferencingAppSkipConfigure(app.slug);
+      await appsPage.verifyConferencingApp(app);
+    });
+  });
+});
+
+test.describe("check non-oAuth link-based conferencing apps using the new flow", () => {
+  ALL_APPS_ARRAY.forEach((app) => {
+    test(`can add ${app.slug} app and book with it`, async ({ appsPage, page, users }) => {
+      const user = await users.create();
+      await user.apiLogin();
+      const eventTypes = await user.getUserEventsAsOwner();
+      const eventTypeIds = eventTypes.map((item) => item.id).filter((item, index) => index < 2);
+      await appsPage.installConferencingAppNewFlow(app, eventTypeIds);
+      await appsPage.verifyConferencingAppNew(app, eventTypeIds);
+    });
+  });
+});

calcom/apps/web/playwright/auth/auth-index.e2e.ts

@@ -0,0 +1,97 @@
+import { test } from "../lib/fixtures";
+
+test.describe("Can signup from a team invite", async () => {
+  test.beforeEach(async ({ users }) => {
+    const proUser = await users.create();
+    await proUser.apiLogin();
+  });
+  test.afterEach(async ({ users }) => users.deleteAll());
+
+  test("Team invites validations work and can accept invite", async ({ browser, page, users, prisma }) => {
+    const [proUser] = users.get();
+    const teamName = `${proUser.username}'s Team`;
+    const testUser = {
+      username: `${proUser.username}-member`,
+      password: `${proUser.username}-member`,
+      email: `${proUser.username}-member@example.com`,
+    };
+    await page.goto("/settings/teams/new");
+    await page.waitForLoadState("networkidle");
+
+    // Create a new team
+    await page.locator('input[name="name"]').fill(teamName);
+    await page.locator('input[name="slug"]').fill(teamName);
+    await page.locator('button[type="submit"]').click();
+
+    // Add new member to team
+    await page.click('[data-testid="new-member-button"]');
+    await page.fill('input[id="inviteUser"]', testUser.email);
+    await page.click('[data-testid="invite-new-member-button"]');
+
+    // TODO: Adapt to new flow
+
+    // Wait for the invite to be sent
+    /*await page.waitForSelector(`[data-testid="member-email"][data-email="${testUser.email}"]`);
+
+      const tokenObj = await prisma.verificationToken.findFirstOrThrow({
+        where: { identifier: testUser.email },
+        select: { token: true },
+      });
+
+      if (!proUser.username) throw Error("Test username is null, can't continue");
+
+      // Open a new user window to accept the invite
+      const newPage = await browser.newPage();
+      await newPage.goto(`/auth/signup?token=${tokenObj.token}&callbackUrl=${WEBAPP_URL}/settings/teams`);
+
+      // Fill in form
+      await newPage.fill('input[name="username"]', proUser.username); // Invalid username
+      await newPage.fill('input[name="email"]', testUser.email);
+      await newPage.fill('input[name="password"]', testUser.password);
+      await newPage.fill('input[name="passwordcheck"]', testUser.password);
+      await newPage.press('input[name="passwordcheck"]', "Enter"); // Press Enter to submit
+
+      await expect(newPage.locator('text="Username already taken"')).toBeVisible();
+
+      // Email address is already registered
+      // TODO: Form errors don't disappear when corrected and resubmitted, so we need to refresh
+      await newPage.reload();
+      await newPage.fill('input[name="username"]', testUser.username);
+      await newPage.fill('input[name="email"]', `${proUser.username}@example.com`); // Taken email
+      await newPage.fill('input[name="password"]', testUser.password);
+      await newPage.fill('input[name="passwordcheck"]', testUser.password);
+      await newPage.press('input[name="passwordcheck"]', "Enter"); // Press Enter to submit
+      await expect(newPage.locator('text="Email address is already registered"')).toBeVisible();
+
+      // Successful signup
+      // TODO: Form errors don't disappear when corrected and resubmitted, so we need to refresh
+      await newPage.reload();
+      await newPage.fill('input[name="username"]', testUser.username);
+      await newPage.fill('input[name="email"]', testUser.email);
+      await newPage.fill('input[name="password"]', testUser.password);
+      await newPage.fill('input[name="passwordcheck"]', testUser.password);
+      await newPage.press('input[name="passwordcheck"]', "Enter"); // Press Enter to submit
+      await expect(newPage.locator(`[data-testid="login-form"]`)).toBeVisible();
+
+      // We don't need the new browser anymore
+      await newPage.close();
+
+      const createdUser = await prisma.user.findUniqueOrThrow({
+        where: { email: testUser.email },
+        include: { teams: { include: { team: true } } },
+      });
+
+      console.log("createdUser", createdUser);
+
+      // Check that the user was created
+      expect(createdUser).not.toBeNull();
+      expect(createdUser.username).toBe(testUser.username);
+      expect(createdUser.password).not.toBeNull();
+      expect(createdUser.emailVerified).not.toBeNull();
+      // Check that the user accepted the team invite
+      expect(createdUser.teams).toHaveLength(1);
+      expect(createdUser.teams[0].team.name).toBe(teamName);
+      expect(createdUser.teams[0].role).toBe("MEMBER");
+      expect(createdUser.teams[0].accepted).toBe(true);*/
+  });
+});

calcom/apps/web/playwright/auth/delete-account.e2e.ts

@@ -0,0 +1,28 @@
+import { expect } from "@playwright/test";
+
+import { test } from "../lib/fixtures";
+
+test.afterEach(({ users }) => users.deleteAll());
+
+test("Can delete user account", async ({ page, users }) => {
+  const user = await users.create({
+    username: "delete-me",
+  });
+  await user.apiLogin();
+  await page.goto(`/settings/my-account/profile`);
+  await page.waitForSelector("[data-testid=dashboard-shell]");
+
+  await page.click("[data-testid=delete-account]");
+
+  expect(user.username).toBeTruthy();
+
+  const $passwordField = page.locator("[data-testid=password]");
+  await $passwordField.fill(String(user.username));
+
+  await Promise.all([
+    page.waitForURL((url) => url.pathname === "/auth/logout"),
+    page.click("text=Delete my account"),
+  ]);
+
+  await expect(page.locator(`[id="modal-title"]`)).toHaveText("You've been logged out");
+});

calcom/apps/web/playwright/auth/forgot-password.e2e.ts

@@ -0,0 +1,97 @@
+import { expect } from "@playwright/test";
+import { uuid } from "short-uuid";
+
+import { verifyPassword } from "@calcom/features/auth/lib/verifyPassword";
+import prisma from "@calcom/prisma";
+
+import { test } from "../lib/fixtures";
+import { testBothFutureAndLegacyRoutes } from "../lib/future-legacy-routes";
+
+test.afterEach(({ users }) => users.deleteAll());
+
+testBothFutureAndLegacyRoutes.describe("Forgot password", async () => {
+  test("Can reset forgotten password", async ({ page, users }) => {
+    const user = await users.create();
+
+    // Got to reset password flow
+    await page.goto("/auth/forgot-password");
+
+    await page.fill('input[name="email"]', `${user.username}@example.com`);
+    await page.press('input[name="email"]', "Enter");
+
+    // wait for confirm page.
+    await page.waitForSelector("text=Reset link sent");
+
+    // As a workaround, we query the db for the last created password request
+    // there should be one, otherwise we throw
+    const { id } = await prisma.resetPasswordRequest.findFirstOrThrow({
+      where: {
+        email: user.email,
+      },
+      select: {
+        id: true,
+      },
+      orderBy: {
+        createdAt: "desc",
+      },
+    });
+
+    // Test when a user changes his email after starting the password reset flow
+    await prisma.user.update({
+      where: {
+        email: user.email,
+      },
+      data: {
+        email: `${user.username}-2@example.com`,
+      },
+    });
+
+    await page.goto(`/auth/forgot-password/${id}`);
+
+    await page.waitForSelector("text=That request is expired.");
+
+    // Change the email back to continue testing.
+    await prisma.user.update({
+      where: {
+        email: `${user.username}-2@example.com`,
+      },
+      data: {
+        email: user.email,
+      },
+    });
+
+    await page.goto(`/auth/forgot-password/${id}`);
+
+    const newPassword = `${user.username}-123CAL-${uuid().toString()}`; // To match the password policy
+
+    // Wait for page to fully load
+    await page.waitForSelector("text=Reset Password");
+
+    await page.fill('input[name="new_password"]', newPassword);
+    await page.click('button[type="submit"]');
+
+    await page.waitForSelector("text=Password updated");
+
+    await expect(page.locator(`text=Password updated`)).toBeVisible();
+    // now we check our DB to confirm the password was indeed updated.
+    // we're not logging in to the UI to speed up test performance.
+    const updatedUser = await prisma.user.findUniqueOrThrow({
+      where: {
+        email: user.email,
+      },
+      select: {
+        id: true,
+        password: true,
+      },
+    });
+
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const updatedPassword = updatedUser.password!.hash;
+    expect(await verifyPassword(newPassword, updatedPassword)).toBeTruthy();
+
+    // finally, make sure the same URL cannot be used to reset the password again, as it should be expired.
+    await page.goto(`/auth/forgot-password/${id}`);
+
+    await expect(page.locator(`text=Whoops`)).toBeVisible();
+  });
+});

calcom/apps/web/playwright/availability.e2e.ts

@@ -0,0 +1,198 @@
+import { expect } from "@playwright/test";
+
+import dayjs from "@calcom/dayjs";
+
+import { test } from "./lib/fixtures";
+import { localize } from "./lib/testUtils";
+
+test.describe.configure({ mode: "parallel" });
+
+test.describe("Availablity", () => {
+  test.beforeEach(async ({ page, users }) => {
+    const user = await users.create();
+    await user.apiLogin();
+    await page.goto("/availability");
+    // We wait until loading is finished
+    await page.waitForSelector('[data-testid="schedules"]');
+  });
+
+  test.afterEach(async ({ users }) => {
+    await users.deleteAll();
+  });
+
+  test("Date Overrides", async ({ page }) => {
+    await page.getByTestId("schedules").first().click();
+    await page.locator('[data-testid="Sunday-switch"]').first().click();
+    await page.locator('[data-testid="Saturday-switch"]').first().click();
+
+    await page.getByTestId("add-override").click();
+    await page.locator('[id="modal-title"]').waitFor();
+    await page.getByTestId("incrementMonth").click();
+    await page.locator('[data-testid="day"][data-disabled="false"]').first().click();
+    await page.getByTestId("date-override-mark-unavailable").click();
+    await page.getByTestId("add-override-submit-btn").click();
+    await page.getByTestId("dialog-rejection").click();
+    await expect(page.locator('[data-testid="date-overrides-list"] > li')).toHaveCount(1);
+    await page.locator('[form="availability-form"][type="submit"]').click();
+    const response = await page.waitForResponse("**/api/trpc/availability/schedule.update?batch=1");
+    const json = await response.json();
+    const nextMonth = dayjs().add(1, "month").startOf("month");
+    const troubleshooterURL = `/availability/troubleshoot?date=${nextMonth.format("YYYY-MM-DD")}`;
+    await page.goto(troubleshooterURL);
+    await page.waitForLoadState("networkidle");
+    await expect(page.locator('[data-testid="troubleshooter-busy-time"]')).toHaveCount(1);
+  });
+
+  test("it can delete date overrides", async ({ page }) => {
+    await page.getByTestId("schedules").first().click();
+    await page.getByTestId("add-override").click();
+    await page.locator('[id="modal-title"]').waitFor();
+    // always go to the next month so there's enough slots regardless of current time.
+    await page.getByTestId("incrementMonth").click();
+
+    await page.locator('[data-testid="day"][data-disabled="false"]').first().click();
+    await page.locator('[data-testid="day"][data-disabled="false"]').nth(4).click();
+    await page.locator('[data-testid="day"][data-disabled="false"]').nth(12).click();
+    await page.getByTestId("date-override-mark-unavailable").click();
+    await page.getByTestId("add-override-submit-btn").click();
+    await page.getByTestId("dialog-rejection").click();
+    await expect(page.locator('[data-testid="date-overrides-list"] > li')).toHaveCount(3);
+    await page.locator('[form="availability-form"][type="submit"]').click();
+
+    await page.getByTestId("add-override").click();
+    await page.locator('[id="modal-title"]').waitFor();
+
+    // always go to the next month so there's enough slots regardless of current time.
+    await page.getByTestId("incrementMonth").click();
+
+    await page.locator('[data-testid="day"][data-disabled="false"]').nth(2).click();
+    await page.getByTestId("date-override-mark-unavailable").click();
+    await page.getByTestId("add-override-submit-btn").click();
+    await page.getByTestId("dialog-rejection").click();
+
+    const dateOverrideList = page.locator('[data-testid="date-overrides-list"] > li');
+
+    await expect(dateOverrideList).toHaveCount(4);
+
+    await page.locator('[form="availability-form"][type="submit"]').click();
+
+    const deleteButton = dateOverrideList.nth(1).getByTestId("delete-button");
+    // we cannot easily predict the title, as this changes throughout the year.
+    const deleteButtonTitle = (await deleteButton.getAttribute("title")) as string;
+    // press the delete button (should remove the .nth 1 element & trigger reorder)
+    await deleteButton.click();
+
+    await page.locator('[form="availability-form"][type="submit"]').click();
+
+    await expect(dateOverrideList).toHaveCount(3);
+    await expect(await page.getByTitle(deleteButtonTitle).isVisible()).toBe(false);
+  });
+
+  test("Can create date override on current day in a negative timezone", async ({ page }) => {
+    await page.getByTestId("schedules").first().click();
+    // set time zone to New York
+    await page
+      .locator("#availability-form div")
+      .filter({ hasText: "TimezoneEurope/London" })
+      .locator("svg")
+      .click();
+    await page.locator("[id=timeZone-lg-viewport]").fill("New");
+    await page.getByTestId("select-option-America/New_York").click();
+
+    // Add override for today
+    await page.getByTestId("add-override").click();
+    await page.locator('[id="modal-title"]').waitFor();
+    await page.locator('[data-testid="day"][data-disabled="false"]').first().click();
+    await page.getByTestId("add-override-submit-btn").click();
+    await page.getByTestId("dialog-rejection").click();
+
+    await page.locator('[form="availability-form"][type="submit"]').click();
+    await page.reload();
+    await expect(page.locator('[data-testid="date-overrides-list"] > li')).toHaveCount(1);
+  });
+
+  test("Schedule listing", async ({ page }) => {
+    await test.step("Can add a new schedule", async () => {
+      await page.getByTestId("new-schedule").click();
+      await page.locator('[id="name"]').fill("More working hours");
+      page.locator('[type="submit"]').click();
+      await expect(page.getByTestId("availablity-title")).toHaveValue("More working hours");
+    });
+    await test.step("Can delete a schedule", async () => {
+      await page.getByTestId("go-back-button").click();
+      await page.locator('[data-testid="schedules"] > li').nth(1).getByTestId("schedule-more").click();
+      await page.locator('[data-testid="delete-schedule"]').click();
+      const toast = await page.waitForSelector('[data-testid="toast-success"]');
+      expect(toast).toBeTruthy();
+
+      await expect(page.locator('[data-testid="schedules"] > li').nth(1)).toHaveCount(0);
+    });
+    await test.step("Cannot delete the last schedule", async () => {
+      await page.locator('[data-testid="schedules"] > li').nth(0).getByTestId("schedule-more").click();
+      await page.locator('[data-testid="delete-schedule"]').click();
+      const toast = await page.waitForSelector('[data-testid="toast-error"]');
+      expect(toast).toBeTruthy();
+
+      await expect(page.locator('[data-testid="schedules"] > li').nth(0)).toHaveCount(1);
+    });
+  });
+
+  test("Can manage single schedule", async ({ page }) => {
+    await page.getByTestId("schedules").first().click();
+
+    const sunday = (await localize("en"))("sunday");
+    const monday = (await localize("en"))("monday");
+    const wednesday = (await localize("en"))("wednesday");
+    const saturday = (await localize("en"))("saturday");
+    const save = (await localize("en"))("save");
+    const copyTimesTo = (await localize("en"))("copy_times_to");
+
+    await page.getByTestId("availablity-title").click();
+    // change availability name
+    await page.getByTestId("availablity-title").fill("Working Hours test");
+    await expect(page.getByTestId("subtitle")).toBeVisible();
+    await page.getByTestId(sunday).getByRole("switch").click();
+    await page.getByTestId(monday).first().click();
+    await page.getByTestId(wednesday).getByRole("switch").click();
+    await page.getByTestId(saturday).getByRole("switch").click();
+    await page
+      .locator("div")
+      .filter({ hasText: "Sunday9:00am - 5:00pm" })
+      .getByTestId("add-time-availability")
+      .first()
+      .click();
+    await expect(page.locator("div").filter({ hasText: "6:00pm" }).nth(1)).toBeVisible();
+    await page.getByRole("button", { name: save }).click();
+    await expect(page.getByText("Sun - Tue, Thu - Sat, 9:00 AM - 5:00 PM")).toBeVisible();
+    await expect(page.getByText("Sun, 5:00 PM - 6:00 PM")).toBeVisible();
+    await page
+      .locator("div")
+      .filter({ hasText: "Sunday9:00am - 5:00pm" })
+      .getByTestId("copy-button")
+      .first()
+      .click();
+    await expect(page.getByText(copyTimesTo)).toBeVisible();
+    await page.getByRole("checkbox", { name: monday }).check();
+    await page.getByRole("button", { name: "Apply" }).click();
+    await page.getByRole("button", { name: save }).click();
+    await page
+      .locator("#availability-form div")
+      .filter({ hasText: "TimezoneEurope/London" })
+      .locator("svg")
+      .click();
+
+    await page.locator("[id=timeZone-lg-viewport]").fill("bras");
+    await page.getByTestId("select-option-America/Sao_Paulo").click();
+    await page.getByRole("button", { name: save }).click();
+    await expect(page.getByTestId("toast-success").last()).toBeVisible();
+    await page.getByTestId("add-override").click();
+    await page.getByTestId("incrementMonth").click();
+    await page.getByRole("button", { name: "20" }).click();
+    await page.getByTestId("date-override-mark-unavailable").click();
+    await page.getByTestId("add-override-submit-btn").click();
+    await page.getByTestId("dialog-rejection").click();
+    await page.getByTestId("date-overrides-list").getByRole("button").nth(1).click();
+    await page.getByRole("button", { name: save }).click();
+    await expect(page.getByTestId("toast-success").last()).toBeVisible();
+  });
+});

calcom/apps/web/playwright/booking-limits.e2e.ts

@@ -0,0 +1,476 @@
+/**
+ * These e2e tests only aim to cover standard cases
+ * Edge cases are currently handled in integration tests only
+ */
+import { expect } from "@playwright/test";
+
+import type { Dayjs } from "@calcom/dayjs";
+import dayjs from "@calcom/dayjs";
+import { intervalLimitKeyToUnit } from "@calcom/lib/intervalLimit";
+import prisma from "@calcom/prisma";
+import { BookingStatus } from "@calcom/prisma/client";
+import { entries } from "@calcom/prisma/zod-utils";
+import type { IntervalLimit } from "@calcom/types/Calendar";
+
+import { test } from "./lib/fixtures";
+import { bookTimeSlot, createUserWithLimits } from "./lib/testUtils";
+
+test.describe.configure({ mode: "parallel" });
+test.afterEach(async ({ users }) => {
+  await users.deleteAll();
+});
+
+// used as a multiplier for duration limits
+const EVENT_LENGTH = 30;
+
+// limits used when testing each limit seperately
+const BOOKING_LIMITS_SINGLE = {
+  PER_DAY: 2,
+  PER_WEEK: 2,
+  PER_MONTH: 2,
+  PER_YEAR: 2,
+};
+
+// limits used when testing multiple limits together
+const BOOKING_LIMITS_MULTIPLE = {
+  PER_DAY: 1,
+  PER_WEEK: 2,
+  PER_MONTH: 3,
+  PER_YEAR: 4,
+};
+
+// prevent tests from crossing year boundaries - if currently in Oct or later, start booking in Jan instead of Nov
+// (we increment months twice when checking multiple limits)
+const firstDayInBookingMonth =
+  dayjs().month() >= 9 ? dayjs().add(1, "year").month(0).date(1) : dayjs().add(1, "month").date(1);
+
+// avoid weekly edge cases
+const firstMondayInBookingMonth = firstDayInBookingMonth.day(
+  firstDayInBookingMonth.date() === firstDayInBookingMonth.startOf("week").date() ? 1 : 8
+);
+
+// ensure we land on the same weekday when incrementing month
+const incrementDate = (date: Dayjs, unit: dayjs.ManipulateType) => {
+  if (unit !== "month") return date.add(1, unit);
+  return date.add(1, "month").day(date.day());
+};
+
+const getLastEventUrlWithMonth = (user: Awaited<ReturnType<typeof createUserWithLimits>>, date: Dayjs) => {
+  return `/${user.username}/${user.eventTypes.at(-1)?.slug}?month=${date.format("YYYY-MM")}`;
+};
+
+// eslint-disable-next-line playwright/no-skipped-test
+test.skip("Booking limits", () => {
+  entries(BOOKING_LIMITS_SINGLE).forEach(([limitKey, bookingLimit]) => {
+    const limitUnit = intervalLimitKeyToUnit(limitKey);
+
+    // test one limit at a time
+    test(limitUnit, async ({ page, users }) => {
+      const slug = `booking-limit-${limitUnit}`;
+      const singleLimit = { [limitKey]: bookingLimit };
+
+      const user = await createUserWithLimits({
+        users,
+        slug,
+        length: EVENT_LENGTH,
+        bookingLimits: singleLimit,
+      });
+
+      let slotUrl = "";
+
+      const monthUrl = getLastEventUrlWithMonth(user, firstMondayInBookingMonth);
+      await page.goto(monthUrl);
+
+      const availableDays = page.locator('[data-testid="day"][data-disabled="false"]');
+      const bookingDay = availableDays.getByText(firstMondayInBookingMonth.date().toString(), {
+        exact: true,
+      });
+
+      // finish rendering days before counting
+      await expect(bookingDay).toBeVisible({ timeout: 10_000 });
+      const availableDaysBefore = await availableDays.count();
+
+      let latestRescheduleUrl: string | null = null;
+      await test.step("can book up to limit", async () => {
+        for (let i = 0; i < bookingLimit; i++) {
+          await bookingDay.click();
+
+          await page.getByTestId("time").nth(0).click();
+          await bookTimeSlot(page);
+
+          slotUrl = page.url();
+
+          await expect(page.getByTestId("success-page")).toBeVisible();
+          latestRescheduleUrl = await page
+            .locator('span[data-testid="reschedule-link"] > a')
+            .getAttribute("href");
+
+          await page.goto(monthUrl);
+        }
+      });
+
+      const expectedAvailableDays = {
+        day: -1,
+        week: -5,
+        month: 0,
+        year: 0,
+      };
+
+      await test.step("but not over", async () => {
+        // should already have navigated to monthUrl - just ensure days are rendered
+        await expect(page.getByTestId("day").nth(0)).toBeVisible();
+
+        // ensure the day we just booked is now blocked
+        await expect(bookingDay).toBeHidden({ timeout: 10_000 });
+
+        const availableDaysAfter = await availableDays.count();
+
+        // equals 0 if no available days, otherwise signed difference
+        expect(availableDaysAfter && availableDaysAfter - availableDaysBefore).toBe(
+          expectedAvailableDays[limitUnit]
+        );
+
+        // try to book directly via form page
+        await page.goto(slotUrl);
+        await bookTimeSlot(page);
+
+        await expect(page.getByTestId("booking-fail")).toBeVisible({ timeout: 1000 });
+      });
+
+      await test.step("but can reschedule", async () => {
+        const bookingId = latestRescheduleUrl?.split("/").pop();
+        const rescheduledBooking = await prisma.booking.findFirstOrThrow({ where: { uid: bookingId } });
+
+        const year = rescheduledBooking.startTime.getFullYear();
+        const month = String(rescheduledBooking.startTime.getMonth() + 1).padStart(2, "0");
+        const day = String(rescheduledBooking.startTime.getDate()).padStart(2, "0");
+
+        await page.goto(
+          `/${user.username}/${
+            user.eventTypes.at(-1)?.slug
+          }?rescheduleUid=${bookingId}&date=${year}-${month}-${day}&month=${year}-${month}`
+        );
+
+        const formerDay = availableDays.getByText(rescheduledBooking.startTime.getDate().toString(), {
+          exact: true,
+        });
+        await expect(formerDay).toBeVisible();
+
+        const formerTimeElement = page.locator('[data-testid="former_time_p"]');
+        await expect(formerTimeElement).toBeVisible();
+
+        await page.locator('[data-testid="time"]').nth(0).click();
+
+        await expect(page.locator('[name="name"]')).toBeDisabled();
+        await expect(page.locator('[name="email"]')).toBeDisabled();
+
+        await page.locator('[data-testid="confirm-reschedule-button"]').click();
+
+        await page.waitForLoadState("networkidle");
+        await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+
+        const newBooking = await prisma.booking.findFirstOrThrow({ where: { fromReschedule: bookingId } });
+        expect(newBooking).not.toBeNull();
+
+        const updatedRescheduledBooking = await prisma.booking.findFirstOrThrow({
+          where: { uid: bookingId },
+        });
+        expect(updatedRescheduledBooking.status).toBe(BookingStatus.CANCELLED);
+
+        await prisma.booking.deleteMany({
+          where: {
+            id: {
+              in: [newBooking.id, rescheduledBooking.id],
+            },
+          },
+        });
+      });
+
+      await test.step(`month after booking`, async () => {
+        await page.goto(getLastEventUrlWithMonth(user, firstMondayInBookingMonth.add(1, "month")));
+
+        // finish rendering days before counting
+        await expect(page.getByTestId("day").nth(0)).toBeVisible({ timeout: 10_000 });
+
+        // the month after we made bookings should have availability unless we hit a yearly limit
+        await expect((await availableDays.count()) === 0).toBe(limitUnit === "year");
+      });
+    });
+  });
+
+  test("multiple", async ({ page, users }) => {
+    const slug = "booking-limit-multiple";
+
+    const user = await createUserWithLimits({
+      users,
+      slug,
+      length: EVENT_LENGTH,
+      bookingLimits: BOOKING_LIMITS_MULTIPLE,
+    });
+
+    let slotUrl = "";
+
+    let bookingDate = firstMondayInBookingMonth;
+
+    // keep track of total bookings across multiple limits
+    let bookingCount = 0;
+
+    for (const [limitKey, limitValue] of entries(BOOKING_LIMITS_MULTIPLE)) {
+      const limitUnit = intervalLimitKeyToUnit(limitKey);
+
+      const monthUrl = getLastEventUrlWithMonth(user, bookingDate);
+      await page.goto(monthUrl);
+
+      const availableDays = page.locator('[data-testid="day"][data-disabled="false"]');
+      const bookingDay = availableDays.getByText(bookingDate.date().toString(), { exact: true });
+
+      // finish rendering days before counting
+      await expect(bookingDay).toBeVisible({ timeout: 10_000 });
+
+      const availableDaysBefore = await availableDays.count();
+
+      await test.step(`can book up ${limitUnit} to limit`, async () => {
+        for (let i = 0; i + bookingCount < limitValue; i++) {
+          await bookingDay.click();
+
+          await page.getByTestId("time").nth(0).click();
+          await bookTimeSlot(page);
+          bookingCount++;
+
+          slotUrl = page.url();
+
+          await expect(page.getByTestId("success-page")).toBeVisible();
+
+          await page.goto(monthUrl);
+        }
+      });
+
+      const expectedAvailableDays = {
+        day: -1,
+        week: -4, // one day will already be blocked by daily limit
+        month: 0,
+        year: 0,
+      };
+
+      await test.step("but not over", async () => {
+        // should already have navigated to monthUrl - just ensure days are rendered
+        await expect(page.getByTestId("day").nth(0)).toBeVisible();
+
+        // ensure the day we just booked is now blocked
+        await expect(bookingDay).toBeHidden({ timeout: 10_000 });
+
+        const availableDaysAfter = await availableDays.count();
+
+        // equals 0 if no available days, otherwise signed difference
+        expect(availableDaysAfter && availableDaysAfter - availableDaysBefore).toBe(
+          expectedAvailableDays[limitUnit]
+        );
+
+        // try to book directly via form page
+        await page.goto(slotUrl);
+        await bookTimeSlot(page);
+
+        await expect(page.getByTestId("booking-fail")).toBeVisible({ timeout: 5000 });
+      });
+
+      await test.step(`month after booking`, async () => {
+        await page.goto(getLastEventUrlWithMonth(user, bookingDate.add(1, "month")));
+
+        // finish rendering days before counting
+        await expect(page.getByTestId("day").nth(0)).toBeVisible({ timeout: 10_000 });
+
+        // the month after we made bookings should have availability unless we hit a yearly limit
+        // TODO: Temporary fix for failing test. It passes locally but fails on CI.
+        // See #13097
+        // await expect((await availableDays.count()) === 0).toBe(limitUnit === "year");
+      });
+
+      // increment date by unit after hitting each limit
+      bookingDate = incrementDate(bookingDate, limitUnit);
+    }
+  });
+});
+
+test.describe("Duration limits", () => {
+  entries(BOOKING_LIMITS_SINGLE).forEach(([limitKey, bookingLimit]) => {
+    const limitUnit = intervalLimitKeyToUnit(limitKey);
+
+    // test one limit at a time
+    test(limitUnit, async ({ page, users }) => {
+      const slug = `duration-limit-${limitUnit}`;
+      const singleLimit = { [limitKey]: bookingLimit * EVENT_LENGTH };
+
+      const user = await createUserWithLimits({
+        users,
+        slug,
+        length: EVENT_LENGTH,
+        durationLimits: singleLimit,
+      });
+
+      let slotUrl = "";
+
+      const monthUrl = getLastEventUrlWithMonth(user, firstMondayInBookingMonth);
+      await page.goto(monthUrl);
+
+      const availableDays = page.locator('[data-testid="day"][data-disabled="false"]');
+      const bookingDay = availableDays.getByText(firstMondayInBookingMonth.date().toString(), {
+        exact: true,
+      });
+
+      // finish rendering days before counting
+      await expect(bookingDay).toBeVisible({ timeout: 10_000 });
+      const availableDaysBefore = await availableDays.count();
+
+      await test.step("can book up to limit", async () => {
+        for (let i = 0; i < bookingLimit; i++) {
+          await bookingDay.click();
+
+          await page.getByTestId("time").nth(0).click();
+          await bookTimeSlot(page);
+
+          slotUrl = page.url();
+
+          await expect(page.getByTestId("success-page")).toBeVisible();
+
+          await page.goto(monthUrl);
+        }
+      });
+
+      const expectedAvailableDays = {
+        day: -1,
+        week: -5,
+        month: 0,
+        year: 0,
+      };
+
+      await test.step("but not over", async () => {
+        // should already have navigated to monthUrl - just ensure days are rendered
+        await expect(page.getByTestId("day").nth(0)).toBeVisible();
+
+        // ensure the day we just booked is now blocked
+        await expect(bookingDay).toBeHidden({ timeout: 10_000 });
+
+        const availableDaysAfter = await availableDays.count();
+
+        // equals 0 if no available days, otherwise signed difference
+        expect(availableDaysAfter && availableDaysAfter - availableDaysBefore).toBe(
+          expectedAvailableDays[limitUnit]
+        );
+
+        // try to book directly via form page
+        await page.goto(slotUrl);
+        await bookTimeSlot(page);
+
+        await expect(page.getByTestId("booking-fail")).toBeVisible({ timeout: 1000 });
+      });
+
+      await test.step(`month after booking`, async () => {
+        await page.goto(getLastEventUrlWithMonth(user, firstMondayInBookingMonth.add(1, "month")));
+
+        // finish rendering days before counting
+        await expect(page.getByTestId("day").nth(0)).toBeVisible({ timeout: 10_000 });
+
+        // the month after we made bookings should have availability unless we hit a yearly limit
+        await expect((await availableDays.count()) === 0).toBe(limitUnit === "year");
+      });
+    });
+  });
+
+  test("multiple", async ({ page, users }) => {
+    const slug = "duration-limit-multiple";
+
+    // multiply all booking limits by EVENT_LENGTH
+    const durationLimits = entries(BOOKING_LIMITS_MULTIPLE).reduce((limits, [limitKey, bookingLimit]) => {
+      return {
+        ...limits,
+        [limitKey]: bookingLimit * EVENT_LENGTH,
+      };
+    }, {} as Record<keyof IntervalLimit, number>);
+
+    const user = await createUserWithLimits({
+      users,
+      slug,
+      length: EVENT_LENGTH,
+      durationLimits,
+    });
+
+    let slotUrl = "";
+
+    let bookingDate = firstMondayInBookingMonth;
+
+    // keep track of total bookings across multiple limits
+    let bookingCount = 0;
+
+    for (const [limitKey, limitValue] of entries(BOOKING_LIMITS_MULTIPLE)) {
+      const limitUnit = intervalLimitKeyToUnit(limitKey);
+
+      const monthUrl = getLastEventUrlWithMonth(user, bookingDate);
+      await page.goto(monthUrl);
+
+      const availableDays = page.locator('[data-testid="day"][data-disabled="false"]');
+      const bookingDay = availableDays.getByText(bookingDate.date().toString(), { exact: true });
+
+      // finish rendering days before counting
+      await expect(bookingDay).toBeVisible({ timeout: 10_000 });
+
+      const availableDaysBefore = await availableDays.count();
+
+      await test.step(`can book up ${limitUnit} to limit`, async () => {
+        for (let i = 0; i + bookingCount < limitValue; i++) {
+          await bookingDay.click();
+
+          await page.getByTestId("time").nth(0).click();
+          await bookTimeSlot(page);
+          bookingCount++;
+
+          slotUrl = page.url();
+
+          await expect(page.getByTestId("success-page")).toBeVisible();
+
+          await page.goto(monthUrl);
+        }
+      });
+
+      const expectedAvailableDays = {
+        day: -1,
+        week: -4, // one day will already be blocked by daily limit
+        month: 0,
+        year: 0,
+      };
+
+      await test.step("but not over", async () => {
+        // should already have navigated to monthUrl - just ensure days are rendered
+        await expect(page.getByTestId("day").nth(0)).toBeVisible();
+
+        // ensure the day we just booked is now blocked
+        await expect(bookingDay).toBeHidden({ timeout: 10_000 });
+
+        const availableDaysAfter = await availableDays.count();
+
+        // equals 0 if no available days, otherwise signed difference
+        expect(availableDaysAfter && availableDaysAfter - availableDaysBefore).toBe(
+          expectedAvailableDays[limitUnit]
+        );
+
+        // try to book directly via form page
+        await page.goto(slotUrl);
+        await bookTimeSlot(page);
+
+        await expect(page.getByTestId("booking-fail")).toBeVisible({ timeout: 1000 });
+      });
+
+      await test.step(`month after booking`, async () => {
+        await page.goto(getLastEventUrlWithMonth(user, bookingDate.add(1, "month")));
+
+        // finish rendering days before counting
+        await expect(page.getByTestId("day").nth(0)).toBeVisible({ timeout: 10_000 });
+
+        // the month after we made bookings should have availability unless we hit a yearly limit
+        await expect((await availableDays.count()) === 0).toBe(limitUnit === "year");
+      });
+
+      // increment date by unit after hitting each limit
+      bookingDate = incrementDate(bookingDate, limitUnit);
+    }
+  });
+});

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

@@ -0,0 +1,560 @@
+import { expect } from "@playwright/test";
+import { JSDOM } from "jsdom";
+
+import { WEBAPP_URL } from "@calcom/lib/constants";
+import { randomString } from "@calcom/lib/random";
+import { SchedulingType } from "@calcom/prisma/client";
+import type { Schedule, TimeRange } from "@calcom/types/schedule";
+
+import { test } from "./lib/fixtures";
+import { testBothFutureAndLegacyRoutes } from "./lib/future-legacy-routes";
+import {
+  bookFirstEvent,
+  bookOptinEvent,
+  bookTimeSlot,
+  selectFirstAvailableTimeSlotNextMonth,
+  testEmail,
+  testName,
+  todo,
+} from "./lib/testUtils";
+
+const freeUserObj = { name: `Free-user-${randomString(3)}` };
+test.describe.configure({ mode: "parallel" });
+test.afterEach(async ({ users }) => {
+  await users.deleteAll();
+});
+
+test("check SSR and OG - User Event Type", async ({ page, users }) => {
+  const name = "Test User";
+  const user = await users.create({
+    name,
+  });
+  const [response] = await Promise.all([
+    // This promise resolves to the main resource response
+    page.waitForResponse(
+      (response) => response.url().includes(`/${user.username}/30-min`) && response.status() === 200
+    ),
+
+    // Trigger the page navigation
+    page.goto(`/${user.username}/30-min`),
+  ]);
+  const ssrResponse = await response.text();
+  const document = new JSDOM(ssrResponse).window.document;
+
+  const titleText = document.querySelector("title")?.textContent;
+  const ogImage = document.querySelector('meta[property="og:image"]')?.getAttribute("content");
+  const ogUrl = document.querySelector('meta[property="og:url"]')?.getAttribute("content");
+  const canonicalLink = document.querySelector('link[rel="canonical"]')?.getAttribute("href");
+  expect(titleText).toContain(name);
+  expect(ogUrl).toEqual(`${WEBAPP_URL}/${user.username}/30-min`);
+  const avatarLocators = await page.locator('[data-testid="avatar-href"]').all();
+  expect(avatarLocators.length).toBe(1);
+
+  for (const avatarLocator of avatarLocators) {
+    expect(await avatarLocator.getAttribute("href")).toEqual(`${WEBAPP_URL}/${user.username}?redirect=false`);
+  }
+
+  expect(canonicalLink).toEqual(`${WEBAPP_URL}/${user.username}/30-min`);
+  // Verify that there is correct URL that would generate the awesome OG image
+  expect(ogImage).toContain(
+    "/_next/image?w=1200&q=100&url=%2Fapi%2Fsocial%2Fog%2Fimage%3Ftype%3Dmeeting%26title%3D"
+  );
+  // Verify Organizer Name in the URL
+  expect(ogImage).toContain("meetingProfileName%3DTest%2520User%26");
+});
+
+todo("check SSR and OG - Team Event Type");
+
+testBothFutureAndLegacyRoutes.describe("free user", () => {
+  test.beforeEach(async ({ page, users }) => {
+    const free = await users.create(freeUserObj);
+    await page.goto(`/${free.username}`);
+  });
+
+  test("cannot book same slot multiple times", async ({ page, users, emails }) => {
+    const [user] = users.get();
+
+    const bookerObj = {
+      email: users.trackEmail({ username: "testEmail", domain: "example.com" }),
+      name: "testBooker",
+    };
+    // Click first event type
+    await page.click('[data-testid="event-type-link"]');
+
+    await selectFirstAvailableTimeSlotNextMonth(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();
+
+    await page.goto(bookingUrl);
+
+    // book same time spot again
+    await bookTimeSlot(page);
+
+    await page.locator("[data-testid=booking-fail]").waitFor({ state: "visible" });
+  });
+});
+
+testBothFutureAndLegacyRoutes.describe("pro user", () => {
+  test.beforeEach(async ({ page, users }) => {
+    const pro = await users.create();
+    await page.goto(`/${pro.username}`);
+  });
+
+  test("pro user's page has at least 2 visible events", async ({ page }) => {
+    const $eventTypes = page.locator("[data-testid=event-types] > *");
+    expect(await $eventTypes.count()).toBeGreaterThanOrEqual(2);
+  });
+
+  test("book an event first day in next month", async ({ page }) => {
+    await bookFirstEvent(page);
+  });
+
+  test("can reschedule a booking", async ({ page, users, bookings }) => {
+    const [pro] = users.get();
+    const [eventType] = pro.eventTypes;
+    await bookings.create(pro.id, pro.username, eventType.id);
+
+    await pro.apiLogin();
+    await page.goto("/bookings/upcoming");
+    await page.waitForSelector('[data-testid="bookings"]');
+    await page.locator('[data-testid="edit_booking"]').nth(0).click();
+    await page.locator('[data-testid="reschedule"]').click();
+    await page.waitForURL((url) => {
+      const bookingId = url.searchParams.get("rescheduleUid");
+      return !!bookingId;
+    });
+    await selectFirstAvailableTimeSlotNextMonth(page);
+
+    await page.locator('[data-testid="confirm-reschedule-button"]').click();
+    await page.waitForURL((url) => {
+      return url.pathname.startsWith("/booking");
+    });
+  });
+
+  test("it redirects when a rescheduleUid does not match the current event type", async ({
+    page,
+    users,
+    bookings,
+  }) => {
+    const [pro] = users.get();
+    const [eventType] = pro.eventTypes;
+    const bookingFixture = await bookings.create(pro.id, pro.username, eventType.id);
+
+    // open the wrong eventType (rescheduleUid created for /30min event)
+    await page.goto(`${pro.username}/${pro.eventTypes[1].slug}?rescheduleUid=${bookingFixture.uid}`);
+
+    await expect(page).toHaveURL(new RegExp(`${pro.username}/${eventType.slug}`));
+  });
+
+  test("it returns a 404 when a requested event type does not exist", async ({ page, users }) => {
+    const [pro] = users.get();
+    const unexistingPageUrl = new URL(`${pro.username}/invalid-event-type`, WEBAPP_URL);
+    const response = await page.goto(unexistingPageUrl.href);
+    expect(response?.status()).toBe(404);
+  });
+
+  test("Can cancel the recently created booking and rebook the same timeslot", async ({
+    page,
+    users,
+  }, testInfo) => {
+    // Because it tests the entire booking flow + the cancellation + rebooking
+    test.setTimeout(testInfo.timeout * 3);
+    await bookFirstEvent(page);
+    await expect(page.locator(`[data-testid="attendee-email-${testEmail}"]`)).toHaveText(testEmail);
+    await expect(page.locator(`[data-testid="attendee-name-${testName}"]`)).toHaveText(testName);
+
+    const [pro] = users.get();
+    await pro.apiLogin();
+
+    await page.goto("/bookings/upcoming");
+    await page.locator('[data-testid="cancel"]').click();
+    await page.waitForURL((url) => {
+      return url.pathname.startsWith("/booking/");
+    });
+    await page.locator('[data-testid="confirm_cancel"]').click();
+
+    const cancelledHeadline = page.locator('[data-testid="cancelled-headline"]');
+    await expect(cancelledHeadline).toBeVisible();
+
+    await expect(page.locator(`[data-testid="attendee-email-${testEmail}"]`)).toHaveText(testEmail);
+    await expect(page.locator(`[data-testid="attendee-name-${testName}"]`)).toHaveText(testName);
+
+    await page.goto(`/${pro.username}`);
+    await bookFirstEvent(page);
+  });
+
+  test("Can cancel the recently created booking and shouldn't be allowed to reschedule it", async ({
+    page,
+    users,
+  }, testInfo) => {
+    // Because it tests the entire booking flow + the cancellation + rebooking
+    test.setTimeout(testInfo.timeout * 3);
+    await bookFirstEvent(page);
+    await expect(page.locator(`[data-testid="attendee-email-${testEmail}"]`)).toHaveText(testEmail);
+    await expect(page.locator(`[data-testid="attendee-name-${testName}"]`)).toHaveText(testName);
+
+    const [pro] = users.get();
+    await pro.apiLogin();
+
+    await page.goto("/bookings/upcoming");
+    await page.locator('[data-testid="cancel"]').click();
+    await page.waitForURL((url) => {
+      return url.pathname.startsWith("/booking/");
+    });
+    await page.locator('[data-testid="confirm_cancel"]').click();
+
+    const cancelledHeadline = page.locator('[data-testid="cancelled-headline"]');
+    await expect(cancelledHeadline).toBeVisible();
+    const bookingCancelledId = new URL(page.url()).pathname.split("/booking/")[1];
+    await page.goto(`/reschedule/${bookingCancelledId}`);
+    // Should be redirected to the booking details page which shows the cancelled headline
+    await expect(page.locator('[data-testid="cancelled-headline"]')).toBeVisible();
+  });
+
+  test("can book an event that requires confirmation and then that booking can be accepted by organizer", async ({
+    page,
+    users,
+  }) => {
+    await bookOptinEvent(page);
+    const [pro] = users.get();
+    await pro.apiLogin();
+
+    await page.goto("/bookings/unconfirmed");
+    await Promise.all([
+      page.click('[data-testid="confirm"]'),
+      page.waitForResponse((response) => response.url().includes("/api/trpc/bookings/confirm")),
+    ]);
+    // This is the only booking in there that needed confirmation and now it should be empty screen
+    await expect(page.locator('[data-testid="empty-screen"]')).toBeVisible();
+  });
+
+  test("can book an unconfirmed event multiple times", async ({ page, users }) => {
+    await page.locator('[data-testid="event-type-link"]:has-text("Opt in")').click();
+    await selectFirstAvailableTimeSlotNextMonth(page);
+
+    const pageUrl = page.url();
+
+    await bookTimeSlot(page);
+    await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+
+    // go back to the booking page to re-book.
+    await page.goto(pageUrl);
+    await bookTimeSlot(page, { email: "test2@example.com" });
+    await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+  });
+
+  test("cannot book an unconfirmed event multiple times with the same email", async ({ page, users }) => {
+    await page.locator('[data-testid="event-type-link"]:has-text("Opt in")').click();
+    await selectFirstAvailableTimeSlotNextMonth(page);
+
+    const pageUrl = page.url();
+
+    await bookTimeSlot(page);
+    // go back to the booking page to re-book.
+    await page.goto(pageUrl);
+
+    await bookTimeSlot(page);
+    await expect(page.getByText("Could not book the meeting.")).toBeVisible();
+  });
+
+  test("can book with multiple guests", async ({ page, users }) => {
+    const additionalGuests = ["test@gmail.com", "test2@gmail.com"];
+
+    await page.click('[data-testid="event-type-link"]');
+    await selectFirstAvailableTimeSlotNextMonth(page);
+    await page.fill('[name="name"]', "test1234");
+    await page.fill('[name="email"]', "test1234@example.com");
+    await page.locator('[data-testid="add-guests"]').click();
+
+    await page.locator('input[type="email"]').nth(1).fill(additionalGuests[0]);
+    await page.locator('[data-testid="add-another-guest"]').click();
+    await page.locator('input[type="email"]').nth(2).fill(additionalGuests[1]);
+
+    await page.locator('[data-testid="confirm-book-button"]').click();
+
+    await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+
+    const promises = additionalGuests.map(async (email) => {
+      await expect(page.locator(`[data-testid="attendee-email-${email}"]`)).toHaveText(email);
+    });
+    await Promise.all(promises);
+  });
+
+  test("Time slots should be reserved when selected", async ({ context, page }) => {
+    await page.click('[data-testid="event-type-link"]');
+
+    const initialUrl = page.url();
+    await selectFirstAvailableTimeSlotNextMonth(page);
+    const pageTwo = await context.newPage();
+    await pageTwo.goto(initialUrl);
+    await pageTwo.waitForURL(initialUrl);
+
+    await pageTwo.waitForSelector('[data-testid="event-type-link"]');
+    const eventTypeLink = pageTwo.locator('[data-testid="event-type-link"]').first();
+    await eventTypeLink.click();
+
+    await pageTwo.waitForLoadState("networkidle");
+    await pageTwo.locator('[data-testid="incrementMonth"]').waitFor();
+    await pageTwo.click('[data-testid="incrementMonth"]');
+    await pageTwo.waitForLoadState("networkidle");
+    await pageTwo.locator('[data-testid="day"][data-disabled="false"]').nth(0).waitFor();
+    await pageTwo.locator('[data-testid="day"][data-disabled="false"]').nth(0).click();
+
+    // 9:30 should be the first available time slot
+    await pageTwo.locator('[data-testid="time"]').nth(0).waitFor();
+    const firstSlotAvailable = pageTwo.locator('[data-testid="time"]').nth(0);
+    // Find text inside the element
+    const firstSlotAvailableText = await firstSlotAvailable.innerText();
+    expect(firstSlotAvailableText).toContain("9:30");
+  });
+
+  test("Time slots are not reserved when going back via Cancel button on Event Form", async ({
+    context,
+    page,
+  }) => {
+    const initialUrl = page.url();
+    await page.waitForSelector('[data-testid="event-type-link"]');
+    const eventTypeLink = page.locator('[data-testid="event-type-link"]').first();
+    await eventTypeLink.click();
+    await selectFirstAvailableTimeSlotNextMonth(page);
+
+    const pageTwo = await context.newPage();
+    await pageTwo.goto(initialUrl);
+    await pageTwo.waitForURL(initialUrl);
+
+    await pageTwo.waitForSelector('[data-testid="event-type-link"]');
+    const eventTypeLinkTwo = pageTwo.locator('[data-testid="event-type-link"]').first();
+    await eventTypeLinkTwo.click();
+
+    await page.locator('[data-testid="back"]').waitFor();
+    await page.click('[data-testid="back"]');
+
+    await pageTwo.waitForLoadState("networkidle");
+    await pageTwo.locator('[data-testid="incrementMonth"]').waitFor();
+    await pageTwo.click('[data-testid="incrementMonth"]');
+    await pageTwo.waitForLoadState("networkidle");
+    await pageTwo.locator('[data-testid="day"][data-disabled="false"]').nth(0).waitFor();
+    await pageTwo.locator('[data-testid="day"][data-disabled="false"]').nth(0).click();
+
+    await pageTwo.locator('[data-testid="time"]').nth(0).waitFor();
+    const firstSlotAvailable = pageTwo.locator('[data-testid="time"]').nth(0);
+
+    // Find text inside the element
+    const firstSlotAvailableText = await firstSlotAvailable.innerText();
+    expect(firstSlotAvailableText).toContain("9:00");
+  });
+});
+
+testBothFutureAndLegacyRoutes.describe("prefill", () => {
+  test("logged in", async ({ page, users }) => {
+    const prefill = await users.create({ name: "Prefill User" });
+    await prefill.apiLogin();
+    await page.goto("/pro/30min");
+
+    await test.step("from session", async () => {
+      await selectFirstAvailableTimeSlotNextMonth(page);
+      await expect(page.locator('[name="name"]')).toHaveValue(prefill.name || "");
+      await expect(page.locator('[name="email"]')).toHaveValue(prefill.email);
+    });
+
+    await test.step("from query params", async () => {
+      const url = new URL(page.url());
+      url.searchParams.set("name", testName);
+      url.searchParams.set("email", testEmail);
+      await page.goto(url.toString());
+
+      await expect(page.locator('[name="name"]')).toHaveValue(testName);
+      await expect(page.locator('[name="email"]')).toHaveValue(testEmail);
+    });
+  });
+
+  test("Persist the field values when going back and coming back to the booking form", async ({
+    page,
+    users,
+  }) => {
+    await page.goto("/pro/30min");
+    await selectFirstAvailableTimeSlotNextMonth(page);
+    await page.fill('[name="name"]', "John Doe");
+    await page.fill('[name="email"]', "john@example.com");
+    await page.fill('[name="notes"]', "Test notes");
+    await page.click('[data-testid="back"]');
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+    await expect(page.locator('[name="name"]')).toHaveValue("John Doe");
+    await expect(page.locator('[name="email"]')).toHaveValue("john@example.com");
+    await expect(page.locator('[name="notes"]')).toHaveValue("Test notes");
+  });
+
+  test("logged out", async ({ page, users }) => {
+    await page.goto("/pro/30min");
+
+    await test.step("from query params", async () => {
+      await selectFirstAvailableTimeSlotNextMonth(page);
+
+      const url = new URL(page.url());
+      url.searchParams.set("name", testName);
+      url.searchParams.set("email", testEmail);
+      await page.goto(url.toString());
+
+      await expect(page.locator('[name="name"]')).toHaveValue(testName);
+      await expect(page.locator('[name="email"]')).toHaveValue(testEmail);
+    });
+  });
+});
+
+testBothFutureAndLegacyRoutes.describe("Booking on different layouts", () => {
+  test.beforeEach(async ({ page, users }) => {
+    const user = await users.create();
+    await page.goto(`/${user.username}`);
+  });
+
+  test("Book on week layout", async ({ page }) => {
+    // Click first event type
+    await page.click('[data-testid="event-type-link"]');
+
+    await page.click('[data-testid="toggle-group-item-week_view"]');
+
+    await page.click('[data-testid="incrementMonth"]');
+
+    await page.locator('[data-testid="calendar-empty-cell"]').nth(0).click();
+
+    // Fill what is this meeting about? name email and notes
+    await page.locator('[name="name"]').fill("Test name");
+    await page.locator('[name="email"]').fill(`${randomString(4)}@example.com`);
+    await page.locator('[name="notes"]').fill("Test notes");
+
+    await page.click('[data-testid="confirm-book-button"]');
+
+    await page.waitForURL((url) => {
+      return url.pathname.startsWith("/booking");
+    });
+
+    // expect page to be booking page
+    await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+  });
+
+  test("Book on column layout", async ({ page }) => {
+    // Click first event type
+    await page.click('[data-testid="event-type-link"]');
+
+    await page.click('[data-testid="toggle-group-item-column_view"]');
+
+    await page.click('[data-testid="incrementMonth"]');
+
+    await page.locator('[data-testid="time"]').nth(0).click();
+
+    // Fill what is this meeting about? name email and notes
+    await page.locator('[name="name"]').fill("Test name");
+    await page.locator('[name="email"]').fill(`${randomString(4)}@example.com`);
+    await page.locator('[name="notes"]').fill("Test notes");
+
+    await page.click('[data-testid="confirm-book-button"]');
+
+    await page.waitForURL((url) => {
+      return url.pathname.startsWith("/booking");
+    });
+
+    // expect page to be booking page
+    await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+  });
+});
+
+testBothFutureAndLegacyRoutes.describe("Booking round robin event", () => {
+  test.beforeEach(async ({ page, users }) => {
+    const teamMatesObj = [{ name: "teammate-1" }];
+
+    const dateRanges: TimeRange = {
+      start: new Date(new Date().setUTCHours(10, 0, 0, 0)), //one hour after default schedule (teammate-1's schedule)
+      end: new Date(new Date().setUTCHours(17, 0, 0, 0)),
+    };
+
+    const schedule: Schedule = [[], [dateRanges], [dateRanges], [dateRanges], [dateRanges], [dateRanges], []];
+
+    const testUser = await users.create(
+      { schedule },
+      {
+        hasTeam: true,
+        schedulingType: SchedulingType.ROUND_ROBIN,
+        teamEventLength: 120,
+        teammates: teamMatesObj,
+        seatsPerTimeSlot: 5,
+      }
+    );
+    const team = await testUser.getFirstTeamMembership();
+    await page.goto(`/team/${team.team.slug}`);
+  });
+
+  test("Does not book seated round robin host outside availability with date override", async ({
+    page,
+    users,
+  }) => {
+    const [testUser] = users.get();
+    await testUser.apiLogin();
+
+    const team = await testUser.getFirstTeamMembership();
+
+    // Click first event type (round robin)
+    await page.click('[data-testid="event-type-link"]');
+
+    await page.click('[data-testid="incrementMonth"]');
+
+    // books 9AM slots for 120 minutes (test-user is not available at this time, availability starts at 10)
+    await page.locator('[data-testid="time"]').nth(0).click();
+
+    await page.waitForLoadState("networkidle");
+
+    await page.locator('[name="name"]').fill("Test name");
+    await page.locator('[name="email"]').fill(`${randomString(4)}@example.com`);
+
+    await page.click('[data-testid="confirm-book-button"]');
+
+    await page.waitForURL((url) => {
+      return url.pathname.startsWith("/booking");
+    });
+
+    await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+
+    await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+
+    const host = page.locator('[data-testid="booking-host-name"]');
+    const hostName = await host.innerText();
+
+    //expect teammate-1 to be booked, test-user is not available at this time
+    expect(hostName).toBe("teammate-1");
+
+    // make another booking to see if also for the second booking teammate-1 is booked
+    await page.goto(`/team/${team.team.slug}`);
+
+    await page.click('[data-testid="event-type-link"]');
+
+    await page.click('[data-testid="incrementMonth"]');
+    await page.click('[data-testid="incrementMonth"]');
+
+    // Again book a 9AM slot for 120 minutes where test-user is not available
+    await page.locator('[data-testid="time"]').nth(0).click();
+
+    await page.waitForLoadState("networkidle");
+
+    await page.locator('[name="name"]').fill("Test name");
+    await page.locator('[name="email"]').fill(`${randomString(4)}@example.com`);
+
+    await page.click('[data-testid="confirm-book-button"]');
+
+    await page.waitForURL((url) => {
+      return url.pathname.startsWith("/booking");
+    });
+
+    await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+
+    const hostSecondBooking = page.locator('[data-testid="booking-host-name"]');
+    const hostNameSecondBooking = await hostSecondBooking.innerText();
+    expect(hostNameSecondBooking).toBe("teammate-1"); // teammate-1 should be booked again
+  });
+});

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

@@ -0,0 +1,458 @@
+import { expect } from "@playwright/test";
+import { v4 as uuidv4 } from "uuid";
+
+import { randomString } from "@calcom/lib/random";
+import prisma from "@calcom/prisma";
+import { BookingStatus } from "@calcom/prisma/enums";
+
+import { test } from "./lib/fixtures";
+import {
+  createNewSeatedEventType,
+  selectFirstAvailableTimeSlotNextMonth,
+  createUserWithSeatedEventAndAttendees,
+} from "./lib/testUtils";
+
+test.describe.configure({ mode: "parallel" });
+test.afterEach(({ users }) => users.deleteAll());
+
+test.describe("Booking with Seats", () => {
+  test("User can create a seated event (2 seats as example)", async ({ users, page }) => {
+    const user = await users.create({ name: "Seated event" });
+    await user.apiLogin();
+    await page.goto("/event-types");
+    // We wait until loading is finished
+    await page.waitForSelector('[data-testid="event-types"]');
+    const eventTitle = "My 2-seated event";
+    await createNewSeatedEventType(page, { eventTitle });
+    await expect(page.locator(`text=Event type updated successfully`)).toBeVisible();
+  });
+
+  test(`Prevent attendees from cancel when having invalid URL params`, async ({ page, users, bookings }) => {
+    const { booking } = await createUserWithSeatedEventAndAttendees({ users, bookings }, [
+      { name: "John First", email: "first+seats@cal.com", timeZone: "Europe/Berlin" },
+      { name: "Jane Second", email: "second+seats@cal.com", timeZone: "Europe/Berlin" },
+      { name: "John Third", email: "third+seats@cal.com", timeZone: "Europe/Berlin" },
+    ]);
+
+    const bookingAttendees = await prisma.attendee.findMany({
+      where: { bookingId: booking.id },
+      select: {
+        id: true,
+        name: true,
+        email: true,
+      },
+    });
+
+    const bookingSeats = bookingAttendees.map((attendee) => ({
+      bookingId: booking.id,
+      attendeeId: attendee.id,
+      referenceUid: uuidv4(),
+      data: {
+        responses: {
+          name: attendee.name,
+          email: attendee.email,
+        },
+      },
+    }));
+
+    await prisma.bookingSeat.createMany({
+      data: bookingSeats,
+    });
+
+    await test.step("Attendee #2 shouldn't be able to cancel booking using only booking/uid", async () => {
+      await page.goto(`/booking/${booking.uid}`);
+
+      await expect(page.locator("[text=Cancel]")).toHaveCount(0);
+    });
+
+    await test.step("Attendee #2 shouldn't be able to cancel booking using randomString for seatReferenceUId", async () => {
+      await page.goto(`/booking/${booking.uid}?seatReferenceUid=${randomString(10)}`);
+
+      // expect cancel button to don't be in the page
+      await expect(page.locator("[text=Cancel]")).toHaveCount(0);
+    });
+  });
+
+  test("Owner shouldn't be able to cancel booking without login in", async ({ page, bookings, users }) => {
+    const { booking, user } = await createUserWithSeatedEventAndAttendees({ users, bookings }, [
+      { name: "John First", email: "first+seats@cal.com", timeZone: "Europe/Berlin" },
+      { name: "Jane Second", email: "second+seats@cal.com", timeZone: "Europe/Berlin" },
+      { name: "John Third", email: "third+seats@cal.com", timeZone: "Europe/Berlin" },
+    ]);
+    await page.goto(`/booking/${booking.uid}?cancel=true`);
+    await expect(page.locator("[text=Cancel]")).toHaveCount(0);
+
+    // expect login text to be in the page, not data-testid
+    await expect(page.locator("text=Login")).toHaveCount(1);
+
+    // click on login button text
+    await page.locator("text=Login").click();
+
+    // expect to be redirected to login page with query parameter callbackUrl
+    await expect(page).toHaveURL(/\/auth\/login\?callbackUrl=.*/);
+
+    await user.apiLogin();
+
+    // manual redirect to booking page
+    await page.goto(`/booking/${booking.uid}?cancel=true`);
+
+    // expect login button to don't be in the page
+    await expect(page.locator("text=Login")).toHaveCount(0);
+
+    // fill reason for cancellation
+    await page.fill('[data-testid="cancel_reason"]', "Double booked!");
+
+    // confirm cancellation
+    await page.locator('[data-testid="confirm_cancel"]').click();
+    await page.waitForLoadState("networkidle");
+
+    const updatedBooking = await prisma.booking.findFirst({
+      where: { id: booking.id },
+    });
+
+    expect(updatedBooking).not.toBeNull();
+    expect(updatedBooking?.status).toBe(BookingStatus.CANCELLED);
+  });
+});
+
+test.describe("Reschedule for booking with seats", () => {
+  test("If rescheduled/cancelled booking with seats it should display the correct number of seats", async ({
+    page,
+    users,
+    bookings,
+  }) => {
+    const { booking } = await createUserWithSeatedEventAndAttendees({ users, bookings }, [
+      { name: "John First", email: "first+seats@cal.com", timeZone: "Europe/Berlin" },
+      { name: "Jane Second", email: "second+seats@cal.com", timeZone: "Europe/Berlin" },
+    ]);
+
+    const bookingAttendees = await prisma.attendee.findMany({
+      where: { bookingId: booking.id },
+      select: {
+        id: true,
+        name: true,
+        email: true,
+      },
+    });
+
+    const bookingSeats = bookingAttendees.map((attendee) => ({
+      bookingId: booking.id,
+      attendeeId: attendee.id,
+      referenceUid: uuidv4(),
+      data: {
+        responses: {
+          name: attendee.name,
+          email: attendee.email,
+        },
+      },
+    }));
+
+    await prisma.bookingSeat.createMany({
+      data: bookingSeats,
+    });
+
+    const references = await prisma.bookingSeat.findMany({
+      where: { bookingId: booking.id },
+    });
+
+    await page.goto(
+      `/booking/${references[0].referenceUid}?cancel=true&seatReferenceUid=${references[0].referenceUid}`
+    );
+
+    await page.locator('[data-testid="confirm_cancel"]').click();
+
+    await page.waitForResponse((res) => res.url().includes("api/cancel") && res.status() === 200);
+
+    const oldBooking = await prisma.booking.findFirst({
+      where: { uid: booking.uid },
+      select: {
+        id: true,
+        status: true,
+      },
+    });
+
+    expect(oldBooking?.status).toBe(BookingStatus.ACCEPTED);
+
+    await page.goto(`/reschedule/${references[1].referenceUid}`);
+
+    await page.click('[data-testid="incrementMonth"]');
+
+    await page.locator('[data-testid="day"][data-disabled="false"]').nth(1).click();
+
+    // Validate that the number of seats its 10
+    expect(await page.locator("text=9 / 10 Seats available").count()).toEqual(0);
+  });
+
+  test("Should cancel with seats but event should be still accessible and with one less attendee/seat", async ({
+    page,
+    users,
+    bookings,
+  }) => {
+    const { user, booking } = await createUserWithSeatedEventAndAttendees({ users, bookings }, [
+      { name: "John First", email: "first+seats@cal.com", timeZone: "Europe/Berlin" },
+      { name: "Jane Second", email: "second+seats@cal.com", timeZone: "Europe/Berlin" },
+    ]);
+    await user.apiLogin();
+
+    const bookingAttendees = await prisma.attendee.findMany({
+      where: { bookingId: booking.id },
+      select: {
+        id: true,
+        name: true,
+        email: true,
+      },
+    });
+
+    const bookingSeats = bookingAttendees.map((attendee) => ({
+      bookingId: booking.id,
+      attendeeId: attendee.id,
+      referenceUid: uuidv4(),
+      data: {
+        responses: {
+          name: attendee.name,
+          email: attendee.email,
+        },
+      },
+    }));
+
+    await prisma.bookingSeat.createMany({
+      data: bookingSeats,
+    });
+
+    // Now we cancel the booking as the first attendee
+    // booking/${bookingUid}?cancel=true&allRemainingBookings=false&seatReferenceUid={bookingSeat.referenceUid}
+    await page.goto(
+      `/booking/${booking.uid}?cancel=true&allRemainingBookings=false&seatReferenceUid=${bookingSeats[0].referenceUid}`
+    );
+
+    await page.locator('[data-testid="confirm_cancel"]').click();
+
+    await page.waitForLoadState("networkidle");
+
+    await expect(page).toHaveURL(/\/booking\/.*/);
+
+    await page.goto(
+      `/booking/${booking.uid}?cancel=true&allRemainingBookings=false&seatReferenceUid=${bookingSeats[1].referenceUid}`
+    );
+
+    // Page should not be 404
+    await page.locator('[data-testid="confirm_cancel"]').click();
+
+    await page.waitForLoadState("networkidle");
+
+    await expect(page).toHaveURL(/\/booking\/.*/);
+  });
+
+  test("Should book with seats and hide attendees info from showAttendees true", async ({
+    page,
+    users,
+    bookings,
+  }) => {
+    const { user, booking } = await createUserWithSeatedEventAndAttendees({ users, bookings }, [
+      { name: "John First", email: "first+seats@cal.com", timeZone: "Europe/Berlin" },
+      { name: "Jane Second", email: "second+seats@cal.com", timeZone: "Europe/Berlin" },
+    ]);
+    await user.apiLogin();
+    const bookingWithEventType = await prisma.booking.findFirst({
+      where: { uid: booking.uid },
+      select: {
+        id: true,
+        eventTypeId: true,
+      },
+    });
+
+    await prisma.eventType.update({
+      data: {
+        seatsShowAttendees: false,
+      },
+      where: {
+        id: bookingWithEventType?.eventTypeId || -1,
+      },
+    });
+
+    const bookingAttendees = await prisma.attendee.findMany({
+      where: { bookingId: booking.id },
+      select: {
+        id: true,
+        name: true,
+        email: true,
+      },
+    });
+
+    const bookingSeats = bookingAttendees.map((attendee) => ({
+      bookingId: booking.id,
+      attendeeId: attendee.id,
+      referenceUid: uuidv4(),
+      data: {
+        responses: {
+          name: attendee.name,
+          email: attendee.email,
+        },
+      },
+    }));
+
+    await prisma.bookingSeat.createMany({
+      data: bookingSeats,
+    });
+
+    // Go to cancel page and see that attendees are listed and myself as I'm owner of the booking
+    await page.goto(`/booking/${booking.uid}?cancel=true&allRemainingBookings=false`);
+
+    const foundFirstAttendeeAsOwner = await page.locator(
+      'p[data-testid="attendee-email-first+seats@cal.com"]'
+    );
+    await expect(foundFirstAttendeeAsOwner).toHaveCount(1);
+    const foundSecondAttendeeAsOwner = await page.locator(
+      'p[data-testid="attendee-email-second+seats@cal.com"]'
+    );
+    await expect(foundSecondAttendeeAsOwner).toHaveCount(1);
+
+    await page.goto("auth/logout");
+    await page.getByTestId("logout-btn").click();
+    await expect(page).toHaveURL(/login/);
+
+    // Now we cancel the booking as the first attendee
+    // booking/${bookingUid}?cancel=true&allRemainingBookings=false&seatReferenceUid={bookingSeat.referenceUid}
+    await page.goto(
+      `/booking/${booking.uid}?cancel=true&allRemainingBookings=false&seatReferenceUid=${bookingSeats[0].referenceUid}`
+    );
+
+    // No attendees should be displayed only the one that it's cancelling
+    const notFoundSecondAttendee = await page.locator('p[data-testid="attendee-email-second+seats@cal.com"]');
+
+    await expect(notFoundSecondAttendee).toHaveCount(0);
+    const foundFirstAttendee = await page.locator('p[data-testid="attendee-email-first+seats@cal.com"]');
+    await expect(foundFirstAttendee).toHaveCount(1);
+
+    await prisma.eventType.update({
+      data: {
+        seatsShowAttendees: true,
+      },
+      where: {
+        id: bookingWithEventType?.eventTypeId || -1,
+      },
+    });
+
+    await page.goto(
+      `/booking/${booking.uid}?cancel=true&allRemainingBookings=false&seatReferenceUid=${bookingSeats[1].referenceUid}`
+    );
+
+    // Now attendees should be displayed
+    const foundSecondAttendee = await page.locator('p[data-testid="attendee-email-second+seats@cal.com"]');
+
+    await expect(foundSecondAttendee).toHaveCount(1);
+    const foundFirstAttendeeAgain = await page
+      .locator('p[data-testid="attendee-email-first+seats@cal.com"]')
+      .first();
+    await expect(foundFirstAttendeeAgain).toHaveCount(1);
+  });
+
+  test("Owner shouldn't be able to reschedule booking without login in", async ({
+    page,
+    bookings,
+    users,
+  }) => {
+    const { booking, user } = await createUserWithSeatedEventAndAttendees({ users, bookings }, [
+      { name: "John First", email: "first+seats@cal.com", timeZone: "Europe/Berlin" },
+      { name: "Jane Second", email: "second+seats@cal.com", timeZone: "Europe/Berlin" },
+      { name: "John Third", email: "third+seats@cal.com", timeZone: "Europe/Berlin" },
+    ]);
+    const getBooking = await booking.self();
+
+    await page.goto(`/booking/${booking.uid}`);
+    await expect(page.locator('[data-testid="reschedule"]')).toHaveCount(0);
+
+    // expect login text to be in the page, not data-testid
+    await expect(page.locator("text=Login")).toHaveCount(1);
+
+    // click on login button text
+    await page.locator("text=Login").click();
+
+    // expect to be redirected to login page with query parameter callbackUrl
+    await expect(page).toHaveURL(/\/auth\/login\?callbackUrl=.*/);
+
+    await user.apiLogin();
+
+    // manual redirect to booking page
+    await page.goto(`/booking/${booking.uid}`);
+
+    // expect login button to don't be in the page
+    await expect(page.locator("text=Login")).toHaveCount(0);
+
+    // reschedule-link click
+    await page.locator('[data-testid="reschedule-link"]').click();
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+
+    // data displayed in form should be user owner
+    const nameElement = await page.locator("input[name=name]");
+    const name = await nameElement.inputValue();
+    expect(name).toBe(user.name);
+
+    //same for email
+    const emailElement = await page.locator("input[name=email]");
+    const email = await emailElement.inputValue();
+    expect(email).toBe(user.email);
+
+    // reason to reschedule input should be visible textfield with name rescheduleReason
+    const reasonElement = await page.locator("textarea[name=rescheduleReason]");
+    await expect(reasonElement).toBeVisible();
+
+    // expect to be redirected to reschedule page
+    await page.locator('[data-testid="confirm-reschedule-button"]').click();
+
+    // should wait for URL but that path starts with booking/
+    await page.waitForURL(/\/booking\/.*/);
+
+    await expect(page).toHaveURL(/\/booking\/.*/);
+
+    await page.waitForLoadState("networkidle");
+
+    const updatedBooking = await prisma.booking.findFirst({
+      where: { id: booking.id },
+    });
+
+    expect(updatedBooking).not.toBeNull();
+    expect(getBooking?.startTime).not.toBe(updatedBooking?.startTime);
+    expect(getBooking?.endTime).not.toBe(updatedBooking?.endTime);
+    expect(updatedBooking?.status).toBe(BookingStatus.ACCEPTED);
+  });
+
+  test("Owner shouldn't be able to reschedule when going directly to booking/rescheduleUid", async ({
+    page,
+    bookings,
+    users,
+  }) => {
+    const { booking, user } = await createUserWithSeatedEventAndAttendees({ users, bookings }, [
+      { name: "John First", email: "first+seats@cal.com", timeZone: "Europe/Berlin" },
+      { name: "Jane Second", email: "second+seats@cal.com", timeZone: "Europe/Berlin" },
+      { name: "John Third", email: "third+seats@cal.com", timeZone: "Europe/Berlin" },
+    ]);
+    const getBooking = await booking.self();
+
+    await page.goto(`/${user.username}/seats?rescheduleUid=${getBooking?.uid}&bookingUid=null`);
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+
+    // expect textarea with name notes to be visible
+    const notesElement = await page.locator("textarea[name=notes]");
+    await expect(notesElement).toBeVisible();
+
+    // expect button confirm instead of reschedule
+    await expect(page.locator('[data-testid="confirm-book-button"]')).toHaveCount(1);
+
+    // now login and try again
+    await user.apiLogin();
+
+    await page.goto(`/${user.username}/seats?rescheduleUid=${getBooking?.uid}&bookingUid=null`);
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+
+    await expect(page).toHaveTitle(/(?!.*reschedule).*/);
+
+    // expect button reschedule
+    await expect(page.locator('[data-testid="confirm-reschedule-button"]')).toHaveCount(1);
+  });
+
+  // @TODO: force 404 when rescheduleUid is not found
+});

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

@@ -0,0 +1,203 @@
+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();
+    });
+  });
+  test.describe("Past bookings", () => {
+    test("Mark first guest as no-show", async ({ page, users, bookings, webhooks }) => {
+      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 ago
+        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();
+      await firstUser.apiLogin();
+      const webhookReceiver = await webhooks.createReceiver();
+      await page.goto(`/bookings/past`);
+      const pastBookings = page.locator('[data-testid="past-bookings"]');
+      const firstPastBooking = pastBookings.locator('[data-testid="booking-item"]').nth(0);
+      const titleAndAttendees = firstPastBooking.locator('[data-testid="title-and-attendees"]');
+      const firstGuest = firstPastBooking.locator('[data-testid="guest"]').nth(0);
+      await firstGuest.click();
+      await expect(titleAndAttendees.locator('[data-testid="unmark-no-show"]')).toBeHidden();
+      await expect(titleAndAttendees.locator('[data-testid="mark-no-show"]')).toBeVisible();
+      await titleAndAttendees.locator('[data-testid="mark-no-show"]').click();
+      await firstGuest.click();
+      await expect(titleAndAttendees.locator('[data-testid="unmark-no-show"]')).toBeVisible();
+      await expect(titleAndAttendees.locator('[data-testid="mark-no-show"]')).toBeHidden();
+      await webhookReceiver.waitForRequestCount(1);
+      const [request] = webhookReceiver.requestList;
+      const body = request.body;
+      // remove dynamic properties that differs depending on where you run the tests
+      const dynamic = "[redacted/dynamic]";
+      // @ts-expect-error we are modifying the object
+      body.createdAt = dynamic;
+      expect(body).toMatchObject({
+        triggerEvent: "BOOKING_NO_SHOW_UPDATED",
+        createdAt: "[redacted/dynamic]",
+        payload: {
+          message: "first@cal.com marked as no-show",
+          attendees: [{ email: "first@cal.com", noShow: true, utcOffset: null }],
+          bookingUid: bookingWhereFirstUserIsOrganizer?.uid,
+          bookingId: bookingWhereFirstUserIsOrganizer?.id,
+        },
+      });
+      webhookReceiver.close();
+    });
+    test("Mark 3rd attendee as no-show", 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 4 days ago
+        relativeDate: -4,
+        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" },
+          { name: "Fourth", email: "fourth@cal.com", timeZone: "Europe/Berlin" },
+        ],
+      });
+      const bookingWhereFirstUserIsOrganizer = await bookingWhereFirstUserIsOrganizerFixture.self();
+
+      await firstUser.apiLogin();
+      await page.goto(`/bookings/past`);
+      const pastBookings = page.locator('[data-testid="past-bookings"]');
+      const firstPastBooking = pastBookings.locator('[data-testid="booking-item"]').nth(0);
+      const titleAndAttendees = firstPastBooking.locator('[data-testid="title-and-attendees"]');
+      const moreGuests = firstPastBooking.locator('[data-testid="more-guests"]');
+      await moreGuests.click();
+      const firstGuestInMore = page.getByRole("menuitemcheckbox").nth(0);
+      await expect(firstGuestInMore).toBeChecked({ checked: false });
+      await firstGuestInMore.click();
+      await expect(firstGuestInMore).toBeChecked({ checked: true });
+      const updateNoShow = firstPastBooking.locator('[data-testid="update-no-show"]');
+      await updateNoShow.click();
+      await moreGuests.click();
+      await expect(firstGuestInMore).toBeChecked({ checked: true });
+    });
+  });
+});
+
+async function createBooking({
+  bookingsFixture,
+  organizer,
+  organizerEventType,
+  attendees,
+  /**
+   * Relative date from today
+   * -1 means yesterday
+   * 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],
+      },
+    },
+  });
+}

calcom/apps/web/playwright/change-password.e2e.ts

@@ -0,0 +1,30 @@
+import { expect } from "@playwright/test";
+
+import { test } from "./lib/fixtures";
+
+test.afterEach(({ users }) => users.deleteAll());
+
+test.describe("Change Password Test", () => {
+  test("change password", async ({ page, users }) => {
+    const pro = await users.create();
+    await pro.apiLogin();
+    // Go to http://localhost:3000/settings/security
+    await page.goto("/settings/security/password");
+
+    expect(pro.username).toBeTruthy();
+
+    await page.waitForLoadState("networkidle");
+
+    // Fill form
+    await page.locator('[name="oldPassword"]').fill(String(pro.username));
+
+    const $newPasswordField = page.locator('[name="newPassword"]');
+    $newPasswordField.fill(`${pro.username}Aa1111`);
+
+    await page.locator("text=Update").click();
+
+    const toast = await page.waitForSelector('[data-testid="toast-success"]');
+
+    expect(toast).toBeTruthy();
+  });
+});

calcom/apps/web/playwright/change-theme.e2e.ts

@@ -0,0 +1,45 @@
+import { expect } from "@playwright/test";
+
+import { test } from "./lib/fixtures";
+
+test.describe("Change Theme Test", () => {
+  test("change theme to dark", async ({ page, users }) => {
+    const pro = await users.create();
+    await pro.apiLogin();
+
+    await page.goto("/settings/my-account/appearance");
+
+    await page.waitForLoadState("networkidle");
+    //Click the "Dark" theme label
+    await page.click('[data-testid="theme-dark"]');
+    //Click the update button
+    await page.click('[data-testid="update-theme-btn"]');
+    //Wait for the toast to appear
+    const toast = await page.waitForSelector('[data-testid="toast-success"]');
+    expect(toast).toBeTruthy();
+    //Go to the profile page and check if the theme is dark
+    await page.goto(`/${pro.username}`);
+    const darkModeClass = await page.getAttribute("html", "class");
+    expect(darkModeClass).toContain("dark");
+  });
+
+  test("change theme to light", async ({ page, users }) => {
+    const pro = await users.create();
+    await pro.apiLogin();
+
+    await page.goto("/settings/my-account/appearance");
+
+    await page.waitForLoadState("networkidle");
+    //Click the "Light" theme label
+    await page.click('[data-testid="theme-light"]');
+    //Click the update theme button
+    await page.click('[data-testid="update-theme-btn"]');
+    //Wait for the toast to appear
+    const toast = await page.waitForSelector('[data-testid="toast-success"]');
+    expect(toast).toBeTruthy();
+    //Go to the profile page and check if the theme is light
+    await page.goto(`/${pro.username}`);
+    const darkModeClass = await page.getAttribute("html", "class");
+    expect(darkModeClass).toContain("light");
+  });
+});

calcom/apps/web/playwright/change-username.e2e.ts

@@ -0,0 +1,162 @@
+import { expect } from "@playwright/test";
+
+import stripe from "@calcom/features/ee/payments/server/stripe";
+import { WEBAPP_URL } from "@calcom/lib/constants";
+import { MembershipRole } from "@calcom/prisma/enums";
+
+import { moveUserToOrg } from "@lib/orgMigration";
+
+import { test } from "./lib/fixtures";
+
+test.describe.configure({ mode: "parallel" });
+
+const IS_STRIPE_ENABLED = !!(
+  process.env.STRIPE_CLIENT_ID &&
+  process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY &&
+  process.env.STRIPE_PRIVATE_KEY
+);
+
+const IS_SELF_HOSTED = !(
+  new URL(WEBAPP_URL).hostname.endsWith(".cal.dev") || !!new URL(WEBAPP_URL).hostname.endsWith(".cal.com")
+);
+
+test.describe("Change username on settings", () => {
+  test.afterEach(async ({ users }) => {
+    await users.deleteAll();
+  });
+
+  test("User can change username", async ({ page, users, prisma }) => {
+    const user = await users.create();
+
+    await user.apiLogin();
+    // Try to go homepage
+    await page.goto("/settings/my-account/profile");
+    // Change username from normal to normal
+    const usernameInput = page.locator("[data-testid=username-input]");
+
+    await usernameInput.fill("demousernamex");
+    await page.click("[data-testid=update-username-btn]");
+    await Promise.all([
+      page.click("[data-testid=save-username]"),
+      page.getByTestId("toast-success").waitFor(),
+    ]);
+
+    const newUpdatedUser = await prisma.user.findUniqueOrThrow({
+      where: {
+        id: user.id,
+      },
+    });
+
+    expect(newUpdatedUser.username).toBe("demousernamex");
+  });
+
+  test("User can change username to include periods(or dots)", async ({ page, users, prisma }) => {
+    const user = await users.create();
+
+    await user.apiLogin();
+    // Try to go homepage
+    await page.goto("/settings/my-account/profile");
+    // Change username from normal to normal
+    const usernameInput = page.locator("[data-testid=username-input]");
+    // User can change username to include dots(or periods)
+    await usernameInput.fill("demo.username");
+    await page.click("[data-testid=update-username-btn]");
+    await Promise.all([
+      page.click("[data-testid=save-username]"),
+      page.getByTestId("toast-success").waitFor(),
+    ]);
+    await page.waitForLoadState("networkidle");
+
+    const updatedUser = await prisma.user.findUniqueOrThrow({
+      where: {
+        id: user.id,
+      },
+    });
+
+    expect(updatedUser.username).toBe("demo.username");
+  });
+
+  test("User can update to PREMIUM username", async ({ page, users }, testInfo) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(!IS_STRIPE_ENABLED, "It should only run if Stripe is installed");
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(IS_SELF_HOSTED, "It shouldn't run on self hosted");
+
+    const user = await users.create();
+    await stripe.customers.create({ email: `${user?.username}@example.com` });
+
+    await user.apiLogin();
+    await page.goto("/settings/my-account/profile");
+
+    // Change username from normal to premium
+    const usernameInput = page.locator("[data-testid=username-input]");
+
+    await usernameInput.fill(`xx${testInfo.workerIndex}`);
+
+    // Click on save button
+    await page.click('button[type="submit"]');
+
+    // Validate modal text fields
+    const currentUsernameText = page.locator("[data-testid=current-username]").innerText();
+    const newUsernameText = page.locator("[data-testid=new-username]").innerText();
+
+    expect(currentUsernameText).not.toBe(newUsernameText);
+
+    // Click on Go to billing
+    await page.click("[data-testid=go-to-billing]", { timeout: 300 });
+
+    await page.waitForLoadState();
+
+    await expect(page).toHaveURL(/.*checkout.stripe.com/);
+  });
+
+  test("User can't take a username that has been migrated to a different username in an organization", async ({
+    users,
+    orgs,
+    page,
+  }) => {
+    const existingUser =
+      await test.step("Migrate user to a different username in an organization", async () => {
+        const org = await orgs.create({
+          name: "TestOrg",
+        });
+
+        const existingUser = await users.create({
+          username: "john",
+          emailDomain: org.organizationSettings?.orgAutoAcceptEmail ?? "",
+          name: "John Outside Organization",
+        });
+
+        await moveUserToOrg({
+          user: existingUser,
+          targetOrg: {
+            // Changed username. After this there is no user with username equal to {existingUser.username}
+            username: `${existingUser.username}-org`,
+            id: org.id,
+            membership: {
+              role: MembershipRole.MEMBER,
+              accepted: true,
+            },
+          },
+          shouldMoveTeams: false,
+        });
+        return existingUser;
+      });
+
+    await test.step("Changing username for another user to the previous username of migrated user - shouldn't be allowed", async () => {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const previousUsername = existingUser.username!;
+
+      const user = await users.create();
+      await user.apiLogin();
+
+      await page.goto("/settings/my-account/profile");
+      const usernameInput = page.locator("[data-testid=username-input]");
+
+      await usernameInput.fill(previousUsername);
+      await page.waitForLoadState("networkidle");
+      await expect(page.locator("[data-testid=update-username-btn]").nth(0)).toBeHidden();
+      await expect(page.locator("[data-testid=update-username-btn]").nth(1)).toBeHidden();
+    });
+  });
+});

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

@@ -0,0 +1,146 @@
+import { expect } from "@playwright/test";
+
+import { MembershipRole } from "@calcom/prisma/client";
+
+import { test } from "./lib/fixtures";
+import {
+  bookTimeSlot,
+  doOnOrgDomain,
+  selectFirstAvailableTimeSlotNextMonth,
+  selectSecondAvailableTimeSlotNextMonth,
+} from "./lib/testUtils";
+
+test.afterEach(({ users }) => users.deleteAll());
+
+test("dynamic booking", async ({ page, users }) => {
+  const pro = await users.create();
+  await pro.apiLogin();
+
+  const free = await users.create({ username: "free.example" });
+  await page.goto(`/${pro.username}+${free.username}`);
+
+  await test.step("book an event first day in next month", async () => {
+    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();
+  });
+
+  await test.step("can reschedule a booking", async () => {
+    // Logged in
+    await page.goto("/bookings/upcoming");
+    await page.locator('[data-testid="edit_booking"]').nth(0).click();
+    await page.locator('[data-testid="reschedule"]').click();
+    await page.waitForURL((url) => {
+      const bookingId = url.searchParams.get("rescheduleUid");
+      return !!bookingId;
+    });
+    await selectSecondAvailableTimeSlotNextMonth(page);
+
+    // 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");
+    });
+    await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+  });
+
+  await test.step("Can cancel the recently created booking", async () => {
+    await page.goto("/bookings/upcoming");
+    await page.locator('[data-testid="cancel"]').click();
+    await page.waitForURL((url) => {
+      return url.pathname.startsWith("/booking");
+    });
+    await page.locator('[data-testid="confirm_cancel"]').click();
+
+    const cancelledHeadline = page.locator('[data-testid="cancelled-headline"]');
+    await expect(cancelledHeadline).toBeVisible();
+  });
+});
+
+test("dynamic booking info prefilled by query params", async ({ page, users }) => {
+  const pro = await users.create();
+  await pro.apiLogin();
+
+  let duration = 15;
+  const free = await users.create({ username: "free.example" });
+  await page.goto(`/${pro.username}+${free.username}?duration=${duration}`);
+
+  await page.waitForLoadState("networkidle");
+
+  const badgeByDurationTestId = (duration: number) => `multiple-choice-${duration}mins`;
+
+  let badgeLocator = await page.getByTestId(badgeByDurationTestId(duration));
+  let activeState = await badgeLocator.getAttribute("data-active");
+
+  expect(activeState).toEqual("true");
+
+  duration = 30;
+  await page.goto(`/${pro.username}+${free.username}?duration=${duration}`);
+  badgeLocator = await page.getByTestId(badgeByDurationTestId(duration));
+  activeState = await badgeLocator.getAttribute("data-active");
+
+  expect(activeState).toEqual("true");
+
+  // Check another badge just to ensure its not selected
+  badgeLocator = await page.getByTestId(badgeByDurationTestId(15));
+  activeState = await badgeLocator.getAttribute("data-active");
+  expect(activeState).toEqual("false");
+});
+// eslint-disable-next-line playwright/no-skipped-test
+test.skip("it contains the right event details", async ({ page }) => {
+  const response = await page.goto(`http://acme.cal.local:3000/owner1+member1`);
+  expect(response?.status()).toBe(200);
+
+  expect(await page.locator('[data-testid="event-title"]').textContent()).toBe("Group Meeting");
+  expect(await page.locator('[data-testid="event-meta"]').textContent()).toContain("Acme Inc");
+
+  expect((await page.locator('[data-testid="event-meta"] [data-testid="avatar"]').all()).length).toBe(3);
+});
+
+test.describe("Organization:", () => {
+  test.afterEach(({ orgs, users }) => {
+    orgs.deleteAll();
+    users.deleteAll();
+  });
+  test("Can book a time slot for an organization", async ({ page, users, orgs }) => {
+    const org = await orgs.create({
+      name: "TestOrg",
+    });
+
+    const user1 = await users.create({
+      organizationId: org.id,
+      name: "User 1",
+      roleInOrganization: MembershipRole.ADMIN,
+    });
+
+    const user2 = await users.create({
+      organizationId: org.id,
+      name: "User 2",
+      roleInOrganization: MembershipRole.ADMIN,
+    });
+    await doOnOrgDomain(
+      {
+        orgSlug: org.slug,
+        page,
+      },
+      async () => {
+        await page.goto(`/${user1.username}+${user2.username}`);
+        await selectFirstAvailableTimeSlotNextMonth(page);
+        await bookTimeSlot(page, {
+          title: "Test meeting",
+        });
+        await expect(page.getByTestId("success-page")).toBeVisible();
+        // All the teammates should be in the booking
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        await expect(page.getByText(user1.name!, { exact: true })).toBeVisible();
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        await expect(page.getByText(user2.name!, { exact: true })).toBeVisible();
+      }
+    );
+  });
+});

calcom/apps/web/playwright/embed-code-generator.e2e.ts

@@ -0,0 +1,524 @@
+import type { Page } from "@playwright/test";
+import { expect } from "@playwright/test";
+import { Linter } from "eslint";
+import { parse } from "node-html-parser";
+
+import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomains";
+import { EMBED_LIB_URL, WEBAPP_URL } from "@calcom/lib/constants";
+import { MembershipRole } from "@calcom/prisma/client";
+
+import { test } from "./lib/fixtures";
+
+const linter = new Linter();
+const eslintRules = {
+  "no-undef": "error",
+  "no-unused-vars": "off",
+} as const;
+test.describe.configure({ mode: "parallel" });
+
+test.afterEach(({ users }) => users.deleteAll());
+
+test.describe("Embed Code Generator Tests", () => {
+  test.describe("Non-Organization", () => {
+    test.beforeEach(async ({ users }) => {
+      const pro = await users.create();
+      await pro.apiLogin();
+    });
+
+    test.describe("Event Types Page", () => {
+      test.beforeEach(async ({ page }) => {
+        await page.goto("/event-types");
+      });
+
+      test("open Embed Dialog and choose Inline for First Event Type", async ({ page, users }) => {
+        const [pro] = users.get();
+        const embedUrl = await clickFirstEventTypeEmbedButton(page);
+        await expectToBeNavigatingToEmbedTypesDialog(page, {
+          embedUrl,
+          basePage: "/event-types",
+        });
+
+        chooseEmbedType(page, "inline");
+
+        await expectToBeNavigatingToEmbedCodeAndPreviewDialog(page, {
+          embedUrl,
+          embedType: "inline",
+          basePage: "/event-types",
+        });
+
+        await expectToContainValidCode(page, {
+          language: "html",
+          embedType: "inline",
+          orgSlug: null,
+        });
+
+        await goToReactCodeTab(page);
+        await expectToContainValidCode(page, {
+          language: "react",
+          embedType: "inline",
+          orgSlug: null,
+        });
+
+        // To prevent early timeouts
+        // eslint-disable-next-line playwright/no-wait-for-timeout
+        await page.waitForTimeout(1000);
+        await expectToContainValidPreviewIframe(page, {
+          embedType: "inline",
+          calLink: `${pro.username}/30-min`,
+        });
+      });
+
+      test("open Embed Dialog and choose floating-popup for First Event Type", async ({ page, users }) => {
+        const [pro] = users.get();
+        const embedUrl = await clickFirstEventTypeEmbedButton(page);
+
+        await expectToBeNavigatingToEmbedTypesDialog(page, {
+          embedUrl,
+          basePage: "/event-types",
+        });
+
+        chooseEmbedType(page, "floating-popup");
+
+        await expectToBeNavigatingToEmbedCodeAndPreviewDialog(page, {
+          embedUrl,
+          embedType: "floating-popup",
+          basePage: "/event-types",
+        });
+        await expectToContainValidCode(page, {
+          language: "html",
+          embedType: "floating-popup",
+          orgSlug: null,
+        });
+
+        await goToReactCodeTab(page);
+        await expectToContainValidCode(page, {
+          language: "react",
+          embedType: "floating-popup",
+          orgSlug: null,
+        });
+
+        // To prevent early timeouts
+        // eslint-disable-next-line playwright/no-wait-for-timeout
+        await page.waitForTimeout(1000);
+        await expectToContainValidPreviewIframe(page, {
+          embedType: "floating-popup",
+          calLink: `${pro.username}/30-min`,
+        });
+      });
+
+      test("open Embed Dialog and choose element-click for First Event Type", async ({ page, users }) => {
+        const [pro] = users.get();
+        const embedUrl = await clickFirstEventTypeEmbedButton(page);
+
+        await expectToBeNavigatingToEmbedTypesDialog(page, {
+          embedUrl,
+          basePage: "/event-types",
+        });
+
+        chooseEmbedType(page, "element-click");
+
+        await expectToBeNavigatingToEmbedCodeAndPreviewDialog(page, {
+          embedUrl,
+          embedType: "element-click",
+          basePage: "/event-types",
+        });
+        await expectToContainValidCode(page, {
+          language: "html",
+          embedType: "element-click",
+          orgSlug: null,
+        });
+
+        await goToReactCodeTab(page);
+        await expectToContainValidCode(page, {
+          language: "react",
+          embedType: "element-click",
+          orgSlug: null,
+        });
+
+        // To prevent early timeouts
+        // eslint-disable-next-line playwright/no-wait-for-timeout
+        await page.waitForTimeout(1000);
+        await expectToContainValidPreviewIframe(page, {
+          embedType: "element-click",
+          calLink: `${pro.username}/30-min`,
+        });
+      });
+    });
+    test.describe("Event Type Edit Page", () => {
+      test.beforeEach(async ({ page }) => {
+        await page.goto(`/event-types`);
+        await Promise.all([
+          page.locator('a[href*="/event-types/"]').first().click(),
+          page.waitForURL((url) => url.pathname.startsWith("/event-types/")),
+        ]);
+      });
+
+      test("open Embed Dialog for the Event Type", async ({ page }) => {
+        const basePage = new URL(page.url()).pathname;
+        const embedUrl = await clickEmbedButton(page);
+        await expectToBeNavigatingToEmbedTypesDialog(page, {
+          embedUrl,
+          basePage,
+        });
+
+        chooseEmbedType(page, "inline");
+
+        await expectToBeNavigatingToEmbedCodeAndPreviewDialog(page, {
+          embedUrl,
+          basePage,
+          embedType: "inline",
+        });
+
+        await expectToContainValidCode(page, {
+          language: "html",
+          embedType: "inline",
+          orgSlug: null,
+        });
+
+        // To prevent early timeouts
+        // eslint-disable-next-line playwright/no-wait-for-timeout
+        await page.waitForTimeout(1000);
+        await expectToContainValidPreviewIframe(page, {
+          embedType: "inline",
+          calLink: decodeURIComponent(embedUrl),
+        });
+      });
+    });
+  });
+
+  test.describe("Organization", () => {
+    test.beforeEach(async ({ users, orgs }) => {
+      const org = await orgs.create({
+        name: "TestOrg",
+      });
+      const user = await users.create({
+        organizationId: org.id,
+        roleInOrganization: MembershipRole.MEMBER,
+      });
+      await user.apiLogin();
+    });
+    test.describe("Event Types Page", () => {
+      test.beforeEach(async ({ page }) => {
+        await page.goto("/event-types");
+      });
+
+      test("open Embed Dialog and choose Inline for First Event Type", async ({ page, users }) => {
+        const [user] = users.get();
+        const { team: org } = await user.getOrgMembership();
+        const embedUrl = await clickFirstEventTypeEmbedButton(page);
+        await expectToBeNavigatingToEmbedTypesDialog(page, {
+          embedUrl,
+          basePage: "/event-types",
+        });
+
+        chooseEmbedType(page, "inline");
+
+        await expectToBeNavigatingToEmbedCodeAndPreviewDialog(page, {
+          embedUrl,
+          embedType: "inline",
+          basePage: "/event-types",
+        });
+
+        // Default tab is HTML code tab
+        await expectToContainValidCode(page, {
+          language: "html",
+          embedType: "inline",
+          orgSlug: org.slug,
+        });
+
+        await goToReactCodeTab(page);
+        await expectToContainValidCode(page, {
+          language: "react",
+          embedType: "inline",
+          orgSlug: org.slug,
+        });
+
+        // To prevent early timeouts
+        // eslint-disable-next-line playwright/no-wait-for-timeout
+        await page.waitForTimeout(1000);
+        await expectToContainValidPreviewIframe(page, {
+          embedType: "inline",
+          calLink: `${user.username}/30-min`,
+          bookerUrl: getOrgFullOrigin(org?.slug ?? ""),
+        });
+      });
+
+      test("open Embed Dialog and choose floating-popup for First Event Type", async ({ page, users }) => {
+        const [user] = users.get();
+        const { team: org } = await user.getOrgMembership();
+
+        const embedUrl = await clickFirstEventTypeEmbedButton(page);
+
+        await expectToBeNavigatingToEmbedTypesDialog(page, {
+          embedUrl,
+          basePage: "/event-types",
+        });
+
+        chooseEmbedType(page, "floating-popup");
+
+        await expectToBeNavigatingToEmbedCodeAndPreviewDialog(page, {
+          embedUrl,
+          embedType: "floating-popup",
+          basePage: "/event-types",
+        });
+        await expectToContainValidCode(page, {
+          language: "html",
+          embedType: "floating-popup",
+          orgSlug: org.slug,
+        });
+
+        await goToReactCodeTab(page);
+        await expectToContainValidCode(page, {
+          language: "react",
+          embedType: "floating-popup",
+          orgSlug: org.slug,
+        });
+
+        // To prevent early timeouts
+        // eslint-disable-next-line playwright/no-wait-for-timeout
+        await page.waitForTimeout(1000);
+        await expectToContainValidPreviewIframe(page, {
+          embedType: "floating-popup",
+          calLink: `${user.username}/30-min`,
+          bookerUrl: getOrgFullOrigin(org?.slug ?? ""),
+        });
+      });
+
+      test("open Embed Dialog and choose element-click for First Event Type", async ({ page, users }) => {
+        const [user] = users.get();
+        const embedUrl = await clickFirstEventTypeEmbedButton(page);
+        const { team: org } = await user.getOrgMembership();
+
+        await expectToBeNavigatingToEmbedTypesDialog(page, {
+          embedUrl,
+          basePage: "/event-types",
+        });
+
+        chooseEmbedType(page, "element-click");
+
+        await expectToBeNavigatingToEmbedCodeAndPreviewDialog(page, {
+          embedUrl,
+          embedType: "element-click",
+          basePage: "/event-types",
+        });
+        await expectToContainValidCode(page, {
+          language: "html",
+          embedType: "element-click",
+          orgSlug: org.slug,
+        });
+
+        await goToReactCodeTab(page);
+        await expectToContainValidCode(page, {
+          language: "react",
+          embedType: "element-click",
+          orgSlug: org.slug,
+        });
+
+        // To prevent early timeouts
+        // eslint-disable-next-line playwright/no-wait-for-timeout
+        await page.waitForTimeout(1000);
+        await expectToContainValidPreviewIframe(page, {
+          embedType: "element-click",
+          calLink: `${user.username}/30-min`,
+          bookerUrl: getOrgFullOrigin(org?.slug ?? ""),
+        });
+      });
+    });
+  });
+});
+
+type EmbedType = "inline" | "floating-popup" | "element-click";
+function chooseEmbedType(page: Page, embedType: EmbedType) {
+  page.locator(`[data-testid=${embedType}]`).click();
+}
+
+async function goToReactCodeTab(page: Page) {
+  // To prevent early timeouts
+  // eslint-disable-next-line playwright/no-wait-for-timeout
+  await page.waitForTimeout(1000);
+  await page.locator("[data-testid=horizontal-tab-React]").click();
+}
+
+async function clickEmbedButton(page: Page) {
+  const embedButton = page.locator("[data-testid=embed]");
+  const embedUrl = await embedButton.getAttribute("data-test-embed-url");
+  embedButton.click();
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  return embedUrl!;
+}
+
+async function clickFirstEventTypeEmbedButton(page: Page) {
+  const menu = page.locator("[data-testid*=event-type-options]").first();
+  await menu.click();
+  const embedUrl = await clickEmbedButton(page);
+  return embedUrl;
+}
+
+async function expectToBeNavigatingToEmbedTypesDialog(
+  page: Page,
+  { embedUrl, basePage }: { embedUrl: string | null; basePage: string }
+) {
+  if (!embedUrl) {
+    throw new Error("Couldn't find embedUrl");
+  }
+  await page.waitForURL((url) => {
+    return (
+      url.pathname === basePage &&
+      url.searchParams.get("dialog") === "embed" &&
+      url.searchParams.get("embedUrl") === embedUrl
+    );
+  });
+}
+
+async function expectToBeNavigatingToEmbedCodeAndPreviewDialog(
+  page: Page,
+  {
+    embedUrl,
+    embedType,
+    basePage,
+  }: {
+    embedUrl: string | null;
+    embedType: EmbedType;
+    basePage: string;
+  }
+) {
+  if (!embedUrl) {
+    throw new Error("Couldn't find embedUrl");
+  }
+  await page.waitForURL((url) => {
+    return (
+      url.pathname === basePage &&
+      url.searchParams.get("dialog") === "embed" &&
+      url.searchParams.get("embedUrl") === embedUrl &&
+      url.searchParams.get("embedType") === embedType &&
+      url.searchParams.get("embedTabName") === "embed-code"
+    );
+  });
+}
+
+async function expectToContainValidCode(
+  page: Page,
+  {
+    embedType,
+    language,
+    orgSlug,
+  }: { embedType: EmbedType; language: "html" | "react"; orgSlug: string | null }
+) {
+  if (language === "react") {
+    return expectValidReactEmbedSnippet(page, { embedType, orgSlug });
+  }
+  if (language === "html") {
+    return expectValidHtmlEmbedSnippet(page, { embedType, orgSlug });
+  }
+  throw new Error("Unknown language");
+}
+
+async function expectValidHtmlEmbedSnippet(
+  page: Page,
+  { embedType, orgSlug }: { embedType: EmbedType; orgSlug: string | null }
+) {
+  const embedCode = await page.locator("[data-testid=embed-code]").inputValue();
+  expect(embedCode).toContain("function (C, A, L)");
+  expect(embedCode).toContain(`Cal ${embedType} embed code begins`);
+  if (orgSlug) {
+    expect(embedCode).toContain(orgSlug);
+  }
+
+  // Html/VanillaJS embed needs namespace to call an instruction
+  // Verify Cal.ns.abc("ui") or Cal.ns["abc"]("ui")
+  expect(embedCode).toMatch(/.*Cal\.ns[^(]+\("ui/);
+
+  const dom = parse(embedCode);
+  const scripts = dom.getElementsByTagName("script");
+  assertThatCodeIsValidVanillaJsCode(scripts[0].innerText);
+
+  return {
+    message: () => `passed`,
+    pass: true,
+  };
+}
+
+function assertThatCodeIsValidVanillaJsCode(code: string) {
+  const lintResult = linter.verify(code, {
+    env: {
+      browser: true,
+    },
+    parserOptions: {
+      ecmaVersion: 2021,
+    },
+    globals: {
+      Cal: "readonly",
+    },
+    rules: eslintRules,
+  });
+  if (lintResult.length) {
+    console.log(
+      JSON.stringify({
+        lintResult,
+        code,
+      })
+    );
+  }
+  expect(lintResult.length).toBe(0);
+}
+
+function assertThatCodeIsValidReactCode(code: string) {
+  const lintResult = linter.verify(code, {
+    env: {
+      browser: true,
+    },
+    parserOptions: {
+      ecmaVersion: 2021,
+      ecmaFeatures: {
+        jsx: true,
+      },
+      sourceType: "module",
+    },
+    rules: eslintRules,
+  });
+  if (lintResult.length) {
+    console.log(
+      JSON.stringify({
+        lintResult,
+        code,
+      })
+    );
+  }
+  expect(lintResult.length).toBe(0);
+}
+
+async function expectValidReactEmbedSnippet(
+  page: Page,
+  { embedType, orgSlug }: { embedType: EmbedType; orgSlug: string | null }
+) {
+  const embedCode = await page.locator("[data-testid=embed-react]").inputValue();
+  expect(embedCode).toContain("export default function MyApp(");
+  expect(embedCode).toContain(
+    embedType === "floating-popup" ? "floatingButton" : embedType === "inline" ? `<Cal` : "data-cal-link"
+  );
+  // React embed doesn't need to access .ns to call an instruction
+  expect(embedCode).toContain('cal("ui"');
+  if (orgSlug) {
+    expect(embedCode).toContain(orgSlug);
+  }
+
+  assertThatCodeIsValidReactCode(embedCode);
+
+  return {
+    message: () => `passed`,
+    pass: true,
+  };
+}
+
+/**
+ * Let's just check if iframe is opened with preview.html. preview.html tests are responsibility of embed-core
+ */
+async function expectToContainValidPreviewIframe(
+  page: Page,
+  { embedType, calLink, bookerUrl }: { embedType: EmbedType; calLink: string; bookerUrl?: string }
+) {
+  bookerUrl = bookerUrl || `${WEBAPP_URL}`;
+  expect(await page.locator("[data-testid=embed-preview]").getAttribute("src")).toContain(
+    `/preview.html?embedType=${embedType}&calLink=${calLink}&embedLibUrl=${EMBED_LIB_URL}&bookerUrl=${bookerUrl}`
+  );
+}

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

@@ -0,0 +1,412 @@
+import type { Page } from "@playwright/test";
+import { expect } from "@playwright/test";
+
+import { WEBAPP_URL } from "@calcom/lib/constants";
+import { randomString } from "@calcom/lib/random";
+
+import { test } from "./lib/fixtures";
+import { testBothFutureAndLegacyRoutes } from "./lib/future-legacy-routes";
+import {
+  bookTimeSlot,
+  createNewEventType,
+  gotoBookingPage,
+  gotoFirstEventType,
+  saveEventType,
+  selectFirstAvailableTimeSlotNextMonth,
+} from "./lib/testUtils";
+
+test.describe.configure({ mode: "parallel" });
+
+testBothFutureAndLegacyRoutes.describe("Event Types A/B tests", () => {
+  test("should render the /future/event-types page", async ({ page, users }) => {
+    const user = await users.create();
+
+    await user.apiLogin();
+
+    await page.goto("/event-types");
+
+    const locator = page.getByRole("heading", { name: "Event Types" });
+
+    await expect(locator).toBeVisible();
+  });
+});
+
+testBothFutureAndLegacyRoutes.describe("Event Types tests", () => {
+  test.describe("user", () => {
+    test.beforeEach(async ({ page, users }) => {
+      const user = await users.create();
+      await user.apiLogin();
+      await page.goto("/event-types");
+
+      // We wait until loading is finished
+      await page.waitForSelector('[data-testid="event-types"]');
+    });
+
+    test.afterEach(async ({ users }) => {
+      await users.deleteAll();
+    });
+
+    test("has at least 2 events", async ({ page }) => {
+      const $eventTypes = page.locator("[data-testid=event-types] > li a");
+      const count = await $eventTypes.count();
+      expect(count).toBeGreaterThanOrEqual(2);
+    });
+
+    test("can add new event type", async ({ page }) => {
+      const nonce = randomString(3);
+      const eventTitle = `hello ${nonce}`;
+      await createNewEventType(page, { eventTitle });
+      await page.goto("/event-types");
+      await expect(page.locator(`text='${eventTitle}'`)).toBeVisible();
+    });
+
+    test("enabling recurring event comes with default options", async ({ page }) => {
+      const nonce = randomString(3);
+      const eventTitle = `my recurring event ${nonce}`;
+      await createNewEventType(page, { eventTitle });
+
+      await page.click("[data-testid=vertical-tab-recurring]");
+      await expect(page.locator("[data-testid=recurring-event-collapsible]")).toBeHidden();
+      await page.click("[data-testid=recurring-event-check]");
+      await expect(page.locator("[data-testid=recurring-event-collapsible]")).toBeVisible();
+
+      expect(
+        await page
+          .locator("[data-testid=recurring-event-collapsible] input[type=number]")
+          .nth(0)
+          .getAttribute("value")
+      ).toBe("1");
+      expect(
+        await page.locator("[data-testid=recurring-event-collapsible] div[class$=singleValue]").textContent()
+      ).toBe("week");
+      expect(
+        await page
+          .locator("[data-testid=recurring-event-collapsible] input[type=number]")
+          .nth(1)
+          .getAttribute("value")
+      ).toBe("12");
+    });
+
+    test("can duplicate an existing event type", async ({ page }) => {
+      const firstElement = await page.waitForSelector(
+        '[data-testid="event-types"] a[href^="/event-types/"] >> nth=0'
+      );
+      const href = await firstElement.getAttribute("href");
+      expect(href).toBeTruthy();
+      const [eventTypeId] = new URL(WEBAPP_URL + href).pathname.split("/").reverse();
+      const firstTitle = await page.locator(`[data-testid=event-type-title-${eventTypeId}]`).innerText();
+      const firstFullSlug = await page.locator(`[data-testid=event-type-slug-${eventTypeId}]`).innerText();
+      const firstSlug = firstFullSlug.split("/")[2];
+
+      await expect(page.locator("[data-testid=readonly-badge]")).toBeHidden();
+
+      await page.click(`[data-testid=event-type-options-${eventTypeId}]`);
+      await page.click(`[data-testid=event-type-duplicate-${eventTypeId}]`);
+      // Wait for the dialog to appear so we can get the URL
+      await page.waitForSelector('[data-testid="dialog-title"]');
+
+      const url = page.url();
+      const params = new URLSearchParams(url);
+
+      expect(params.get("title")).toBe(firstTitle);
+      expect(params.get("slug")).toContain(firstSlug);
+
+      const formTitle = await page.inputValue("[name=title]");
+      const formSlug = await page.inputValue("[name=slug]");
+
+      expect(formTitle).toBe(firstTitle);
+      expect(formSlug).toContain(firstSlug);
+
+      const test = await page.getByTestId("continue").click();
+      const toast = await page.waitForSelector('[data-testid="toast-success"]');
+      expect(toast).toBeTruthy();
+    });
+
+    test("edit first event", async ({ 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\/.+/);
+      });
+      await page.locator("[data-testid=update-eventtype]").click();
+      const toast = await page.waitForSelector('[data-testid="toast-success"]');
+      expect(toast).toBeTruthy();
+    });
+
+    test("can add multiple organizer address", async ({ 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\/.+/);
+      });
+
+      const locationData = ["location 1", "location 2", "location 3"];
+
+      await fillLocation(page, locationData[0], 0);
+
+      await page.locator("[data-testid=add-location]").click();
+      await fillLocation(page, locationData[1], 1);
+
+      await page.locator("[data-testid=add-location]").click();
+      await fillLocation(page, locationData[2], 2);
+
+      await page.locator("[data-testid=update-eventtype]").click();
+
+      await page.goto("/event-types");
+
+      const previewLink = await page
+        .locator("[data-testid=preview-link-button]")
+        .first()
+        .getAttribute("href");
+
+      /**
+       * Verify first organizer address
+       */
+      await page.goto(previewLink ?? "");
+      await selectFirstAvailableTimeSlotNextMonth(page);
+      await page.locator(`span:has-text("${locationData[0]}")`).click();
+      await bookTimeSlot(page);
+      await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+      await expect(page.locator(`[data-testid="where"]`)).toHaveText(locationData[0]);
+
+      /**
+       * Verify second organizer address
+       */
+      await page.goto(previewLink ?? "");
+      await selectFirstAvailableTimeSlotNextMonth(page);
+      await page.locator(`span:has-text("${locationData[1]}")`).click();
+      await bookTimeSlot(page);
+      await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+      await expect(page.locator(`[data-testid="where"]`)).toHaveText(locationData[1]);
+    });
+
+    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();
+      });
+
+      test("Can add Organzer Phone Number location and book with it", async ({ page }) => {
+        await gotoFirstEventType(page);
+
+        await page.getByTestId("location-select").click();
+        await page.locator(`text="Organizer Phone Number"`).click();
+        const locationInputName = "locations[0].hostPhoneNumber";
+        await page.locator(`input[name="${locationInputName}"]`).waitFor();
+        await page.locator(`input[name="${locationInputName}"]`).fill("9199999999");
+
+        await saveEventType(page);
+        await gotoBookingPage(page);
+        await selectFirstAvailableTimeSlotNextMonth(page);
+
+        await bookTimeSlot(page);
+
+        await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+        await expect(page.locator("text=+19199999999")).toBeVisible();
+      });
+
+      test("Can add Cal video location and book with it", async ({ page }) => {
+        await gotoFirstEventType(page);
+
+        await page.getByTestId("location-select").click();
+        await page.locator(`text="Cal Video (Global)"`).click();
+
+        await saveEventType(page);
+        await page.getByTestId("toast-success").waitFor();
+        await gotoBookingPage(page);
+        await selectFirstAvailableTimeSlotNextMonth(page);
+
+        await bookTimeSlot(page);
+
+        await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+        await expect(page.locator("[data-testid=where] ")).toContainText("Cal Video");
+      });
+
+      test("Can add Link Meeting as location and book with it", async ({ page }) => {
+        await gotoFirstEventType(page);
+
+        await page.getByTestId("location-select").click();
+        await page.locator(`text="Link meeting"`).click();
+
+        const locationInputName = `locations[0].link`;
+
+        const testUrl = "https://cal.ai/";
+        await page.locator(`input[name="${locationInputName}"]`).fill(testUrl);
+
+        await saveEventType(page);
+        await page.getByTestId("toast-success").waitFor();
+        await gotoBookingPage(page);
+        await selectFirstAvailableTimeSlotNextMonth(page);
+
+        await bookTimeSlot(page);
+
+        await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+        const linkElement = await page.locator("[data-testid=where] > a");
+        expect(await linkElement.getAttribute("href")).toBe(testUrl);
+      });
+
+      // TODO: This test is extremely flaky and has been failing a lot, blocking many PRs. Fix this.
+      // eslint-disable-next-line playwright/no-skipped-test
+      test.skip("Can remove location from multiple locations that are saved", async ({ page }) => {
+        await gotoFirstEventType(page);
+
+        // Add Attendee Phone Number location
+        await selectAttendeePhoneNumber(page);
+
+        // Add Cal Video location
+        await addAnotherLocation(page, "Cal Video (Global)");
+
+        await saveEventType(page);
+        await page.waitForLoadState("networkidle");
+
+        // Remove Attendee Phone Number Location
+        const removeButtomId = "delete-locations.0.type";
+        await page.getByTestId(removeButtomId).click();
+
+        await saveEventType(page);
+        await page.waitForLoadState("networkidle");
+
+        await gotoBookingPage(page);
+        await selectFirstAvailableTimeSlotNextMonth(page);
+
+        await bookTimeSlot(page);
+
+        await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+        await expect(page.locator("[data-testid=where]")).toHaveText(/Cal Video/);
+      });
+
+      test("can add single organizer address location without display location public option", async ({
+        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\/.+/);
+        });
+
+        const locationAddress = "New Delhi";
+
+        await fillLocation(page, locationAddress, 0, false);
+        await page.locator("[data-testid=update-eventtype]").click();
+
+        await page.goto("/event-types");
+
+        const previewLink = await page
+          .locator("[data-testid=preview-link-button]")
+          .first()
+          .getAttribute("href");
+
+        await page.goto(previewLink ?? "");
+        await selectFirstAvailableTimeSlotNextMonth(page);
+        await bookTimeSlot(page);
+        await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+        await expect(page.locator(`[data-testid="where"]`)).toHaveText(locationAddress);
+      });
+
+      test("can select 'display on booking page' option when multiple organizer input type are present", async ({
+        page,
+      }) => {
+        await gotoFirstEventType(page);
+
+        await page.getByTestId("location-select").click();
+        await page.locator(`text="Link meeting"`).click();
+
+        const locationInputName = (idx: number) => `locations[${idx}].link`;
+
+        const testUrl1 = "https://cal.ai/";
+        await page.locator(`input[name="${locationInputName(0)}"]`).fill(testUrl1);
+        await page.locator("[data-testid=display-location]").last().check();
+        await checkDisplayLocation(page);
+        await unCheckDisplayLocation(page);
+
+        await page.locator("[data-testid=add-location]").click();
+
+        const testUrl2 = "https://cal.com/ai";
+        await page.locator(`text="Link meeting"`).last().click();
+        await page.locator(`input[name="${locationInputName(1)}"]`).waitFor();
+        await page.locator(`input[name="${locationInputName(1)}"]`).fill(testUrl2);
+        await checkDisplayLocation(page);
+        await unCheckDisplayLocation(page);
+
+        // Remove Both of the locations
+        const removeButtomId = "delete-locations.0.type";
+        await page.getByTestId(removeButtomId).nth(0).click();
+        await page.getByTestId(removeButtomId).nth(0).click();
+
+        // Add Multiple Organizer Phone Number options
+        await page.getByTestId("location-select").last().click();
+        await page.locator(`text="Organizer Phone Number"`).click();
+
+        const organizerPhoneNumberInputName = (idx: number) => `locations[${idx}].hostPhoneNumber`;
+
+        const testPhoneInputValue1 = "9199999999";
+        await page.locator(`input[name="${organizerPhoneNumberInputName(0)}"]`).waitFor();
+        await page.locator(`input[name="${organizerPhoneNumberInputName(0)}"]`).fill(testPhoneInputValue1);
+        await page.locator("[data-testid=display-location]").last().check();
+        await checkDisplayLocation(page);
+        await unCheckDisplayLocation(page);
+        await page.locator("[data-testid=add-location]").click();
+
+        const testPhoneInputValue2 = "9188888888";
+        await page.locator(`text="Organizer Phone Number"`).last().click();
+        await page.locator(`input[name="${organizerPhoneNumberInputName(1)}"]`).waitFor();
+        await page.locator(`input[name="${organizerPhoneNumberInputName(1)}"]`).fill(testPhoneInputValue2);
+        await checkDisplayLocation(page);
+        await unCheckDisplayLocation(page);
+      });
+    });
+  });
+});
+
+const selectAttendeePhoneNumber = async (page: Page) => {
+  const locationOptionText = "Attendee Phone Number";
+  await page.getByTestId("location-select").click();
+  await page.locator(`text=${locationOptionText}`).click();
+};
+
+/**
+ * Adds n+1 location to the event type
+ */
+async function addAnotherLocation(page: Page, locationOptionText: string) {
+  await page.locator("[data-testid=add-location]").click();
+  // When adding another location, the dropdown opens automatically. So, we don't need to open it here.
+  //
+  await page.locator(`text="${locationOptionText}"`).click();
+}
+
+const fillLocation = async (page: Page, inputText: string, index: number, selectDisplayLocation = true) => {
+  // Except the first location, dropdown automatically opens when adding another location
+  if (index == 0) {
+    await page.getByTestId("location-select").last().click();
+  }
+  await page.locator("text=In Person (Organizer Address)").last().click();
+
+  const locationInputName = `locations[${index}].address`;
+  await page.locator(`input[name="${locationInputName}"]`).waitFor();
+  await page.locator(`input[name="locations[${index}].address"]`).fill(inputText);
+  if (selectDisplayLocation) {
+    await page.locator("[data-testid=display-location]").last().check();
+  }
+};
+
+const checkDisplayLocation = async (page: Page) => {
+  await page.locator("[data-testid=display-location]").last().check();
+  await expect(page.locator("[data-testid=display-location]").last()).toBeChecked();
+};
+
+const unCheckDisplayLocation = async (page: Page) => {
+  await page.locator("[data-testid=display-location]").last().uncheck();
+  await expect(page.locator("[data-testid=display-location]").last()).toBeChecked({ checked: false });
+};

calcom/apps/web/playwright/eventType/availability-tab.e2e.ts

@@ -0,0 +1,13 @@
+import { loginUser } from "../fixtures/regularBookings";
+import { test } from "../lib/fixtures";
+
+test.describe("Check availability tab in a event-type", () => {
+  test("Check availability in event type", async ({ eventTypePage, users }) => {
+    await loginUser(users);
+    await eventTypePage.goToEventTypesPage();
+
+    await eventTypePage.goToEventType("30 min");
+    await eventTypePage.goToTab("availability");
+    await eventTypePage.checkAvailabilityTab();
+  });
+});

calcom/apps/web/playwright/eventType/limit-tab.e2e.ts

@@ -0,0 +1,27 @@
+import { loginUser } from "../fixtures/regularBookings";
+import { test } from "../lib/fixtures";
+
+test.describe("Limits Tab - Event Type", () => {
+  test.beforeEach(async ({ page, users, bookingPage }) => {
+    await loginUser(users);
+    await page.goto("/event-types");
+    await bookingPage.goToEventType("30 min");
+    await bookingPage.goToTab("event_limit_tab_title");
+  });
+
+  test("Check the functionalities of the Limits Tab", async ({ bookingPage }) => {
+    await bookingPage.checkLimitBookingFrequency();
+    await bookingPage.checkLimitBookingDuration();
+    await bookingPage.checkLimitFutureBookings();
+    await bookingPage.checkOffsetTimes();
+    await bookingPage.checkBufferTime();
+
+    await bookingPage.updateEventType();
+    const eventTypePage = await bookingPage.previewEventType();
+
+    await eventTypePage.waitForTimeout(10000);
+
+    const counter = await eventTypePage.getByTestId("time").count();
+    await bookingPage.checkTimeSlotsCount(eventTypePage, counter);
+  });
+});

calcom/apps/web/playwright/fixtures/apps.ts

@@ -0,0 +1,127 @@
+import { expect, type Page } from "@playwright/test";
+
+import type { TApp } from "../apps/conferencing/conferencingApps.e2e";
+import {
+  bookTimeSlot,
+  gotoBookingPage,
+  gotoFirstEventType,
+  saveEventType,
+  selectFirstAvailableTimeSlotNextMonth,
+} from "../lib/testUtils";
+
+export function createAppsFixture(page: Page) {
+  return {
+    goToAppsCategory: async (category: string) => {
+      await page.getByTestId(`app-store-category-${category}`).nth(1).click();
+      await page.goto("apps/categories/analytics");
+    },
+    installAnalyticsAppSkipConfigure: async (app: string) => {
+      await page.getByTestId(`app-store-app-card-${app}`).click();
+      await page.getByTestId("install-app-button").click();
+      await page.click('[data-testid="install-app-button-personal"]');
+      await page.waitForURL(`apps/installation/event-types?slug=${app}`);
+      await page.click('[data-testid="set-up-later"]');
+    },
+    installAnalyticsApp: async (app: string, eventTypeIds: number[]) => {
+      await page.getByTestId(`app-store-app-card-${app}`).click();
+      (await page.waitForSelector('[data-testid="install-app-button"]')).click();
+
+      await page.click('[data-testid="install-app-button-personal"]');
+      await page.waitForURL(`apps/installation/event-types?slug=${app}`);
+
+      for (const id of eventTypeIds) {
+        await page.click(`[data-testid="select-event-type-${id}"]`);
+      }
+
+      await page.click(`[data-testid="save-event-types"]`);
+
+      // adding random-tracking-id to gtm-tracking-id-input because this field is required and the test fails without it
+      if (app === "gtm") {
+        await page.waitForLoadState("domcontentloaded");
+        for (let index = 0; index < eventTypeIds.length; index++) {
+          await page.getByTestId("gtm-tracking-id-input").nth(index).fill("random-tracking-id");
+        }
+      }
+      await page.click(`[data-testid="configure-step-save"]`);
+      await page.waitForURL("/event-types");
+    },
+
+    installConferencingAppSkipConfigure: async (app: string) => {
+      await page.getByTestId(`app-store-app-card-${app}`).click();
+      await page.getByTestId("install-app-button").click();
+      await page.waitForURL(`apps/installation/event-types?slug=${app}`);
+      await page.click('[data-testid="set-up-later"]');
+    },
+    verifyConferencingApp: async (app: TApp) => {
+      await page.goto("/event-types");
+      await gotoFirstEventType(page);
+      await page.getByTestId("location-select").last().click();
+      await page.getByTestId(`location-select-item-${app.type}`).click();
+      if (app.organizerInputPlaceholder) {
+        await page.getByTestId(`${app.type}-location-input`).fill(app.organizerInputPlaceholder);
+      }
+      await page.locator("[data-testid=display-location]").last().check();
+      await saveEventType(page);
+      await page.waitForLoadState("networkidle");
+      await gotoBookingPage(page);
+      await selectFirstAvailableTimeSlotNextMonth(page);
+      await bookTimeSlot(page);
+      await page.waitForLoadState("networkidle");
+
+      await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+      await expect(page.locator("[data-testid=where] ")).toContainText(app.label);
+    },
+
+    installConferencingAppNewFlow: async (app: TApp, eventTypeIds: number[]) => {
+      await page.goto("apps/categories/conferencing");
+      await page.getByTestId(`app-store-app-card-${app.slug}`).click();
+      await page.getByTestId("install-app-button").click();
+      await page.waitForURL(`apps/installation/event-types?slug=${app.slug}`);
+
+      for (const id of eventTypeIds) {
+        await page.click(`[data-testid="select-event-type-${id}"]`);
+      }
+      await page.click(`[data-testid="save-event-types"]`);
+
+      for (let eindex = 0; eindex < eventTypeIds.length; eindex++) {
+        if (!app.organizerInputPlaceholder) continue;
+        await page.getByTestId(`${app.type}-location-input`).nth(eindex).fill(app.organizerInputPlaceholder);
+      }
+      await page.click(`[data-testid="configure-step-save"]`);
+      await page.waitForURL("/event-types");
+    },
+
+    verifyConferencingAppNew: async (app: TApp, eventTypeIds: number[]) => {
+      for (const id of eventTypeIds) {
+        await page.goto(`/event-types/${id}`);
+        await page.waitForLoadState("networkidle");
+        await gotoBookingPage(page);
+        await selectFirstAvailableTimeSlotNextMonth(page);
+        await bookTimeSlot(page, { name: `Test Testson`, email: `test@example.com` });
+        await page.waitForLoadState("networkidle");
+        await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+        await expect(page.locator("[data-testid=where] ")).toContainText(app.label);
+      }
+    },
+    goBackToAppsPage: async () => {
+      await page.getByTestId("add-apps").click();
+    },
+    goToEventType: async (eventType: string) => {
+      await page.getByRole("link", { name: eventType }).click();
+    },
+    goToAppsTab: async () => {
+      await page.getByTestId("vertical-tab-apps").click();
+    },
+    activeApp: async (app: string) => {
+      await page.locator(`[data-testid='${app}-app-switch']`).click();
+    },
+    verifyAppsInfo: async (activeApps: number) => {
+      await expect(page.locator(`text=1 apps, ${activeApps} active`)).toBeVisible();
+    },
+    verifyAppsInfoNew: async (app: string, eventTypeId: number) => {
+      await page.goto(`event-types/${eventTypeId}?tabName=apps`);
+      await page.waitForLoadState("domcontentloaded");
+      await expect(page.locator(`[data-testid='${app}-app-switch'][data-state="checked"]`)).toBeVisible();
+    },
+  };
+}

calcom/apps/web/playwright/fixtures/bookings.ts

@@ -0,0 +1,98 @@
+import type { Page } from "@playwright/test";
+import type { Booking, Prisma } from "@prisma/client";
+import short from "short-uuid";
+import { v5 as uuidv5 } from "uuid";
+
+import _dayjs from "@calcom/dayjs";
+import { prisma } from "@calcom/prisma";
+
+const translator = short();
+
+type BookingFixture = ReturnType<typeof createBookingFixture>;
+
+// We default all dayjs calls to use Europe/London timezone
+const dayjs = (...args: Parameters<typeof _dayjs>) => _dayjs(...args).tz("Europe/London");
+
+// creates a user fixture instance and stores the collection
+export const createBookingsFixture = (page: Page) => {
+  const store = { bookings: [], page } as { bookings: BookingFixture[]; page: typeof page };
+  return {
+    create: async (
+      userId: number,
+      username: string | null,
+      eventTypeId = -1,
+      {
+        title = "",
+        rescheduled = false,
+        paid = false,
+        status = "ACCEPTED",
+        startTime,
+        endTime,
+        attendees = {
+          create: {
+            email: "attendee@example.com",
+            name: "Attendee Example",
+            timeZone: "Europe/London",
+          },
+        },
+      }: Partial<Prisma.BookingCreateInput> = {},
+      startDateParam?: Date,
+      endDateParam?: Date
+    ) => {
+      const startDate = startDateParam || dayjs().add(1, "day").toDate();
+      const seed = `${username}:${dayjs(startDate).utc().format()}:${new Date().getTime()}`;
+      const uid = translator.fromUUID(uuidv5(seed, uuidv5.URL));
+      const booking = await prisma.booking.create({
+        data: {
+          uid: uid,
+          title: title || "30min",
+          startTime: startTime || startDate,
+          endTime: endTime || endDateParam || dayjs().add(1, "day").add(30, "minutes").toDate(),
+          user: {
+            connect: {
+              id: userId,
+            },
+          },
+          attendees,
+          eventType: {
+            connect: {
+              id: eventTypeId,
+            },
+          },
+          rescheduled,
+          paid,
+          status,
+          iCalUID: `${uid}@cal.com`,
+        },
+      });
+      const bookingFixture = createBookingFixture(booking, store.page);
+      store.bookings.push(bookingFixture);
+      return bookingFixture;
+    },
+    update: async (args: Prisma.BookingUpdateArgs) => await prisma.booking.update(args),
+    get: () => store.bookings,
+    delete: async (id: number) => {
+      await prisma.booking.delete({
+        where: { id },
+      });
+      store.bookings = store.bookings.filter((b) => b.id !== id);
+    },
+  };
+};
+
+// creates the single user fixture
+const createBookingFixture = (booking: Booking, page: Page) => {
+  const store = { booking, page };
+
+  // self is a reflective method that return the Prisma object that references this fixture.
+  return {
+    id: store.booking.id,
+    uid: store.booking.uid,
+    self: async () =>
+      await prisma.booking.findUnique({
+        where: { id: store.booking.id },
+        include: { attendees: true, seatsReferences: true },
+      }),
+    delete: async () => await prisma.booking.delete({ where: { id: store.booking.id } }),
+  };
+};

calcom/apps/web/playwright/fixtures/emails.ts

@@ -0,0 +1,37 @@
+import mailhog from "mailhog";
+
+import { IS_MAILHOG_ENABLED } from "@calcom/lib/constants";
+
+const unimplemented = () => {
+  // throw new Error("Mailhog is not enabled");
+  return null;
+};
+
+const hasUUID = (query: string) => {
+  return /[a-zA-Z0-9]{22}/.test(query) || /[0-9a-f]{8}/.test(query);
+};
+export const createEmailsFixture = () => {
+  if (IS_MAILHOG_ENABLED) {
+    const mailhogAPI = mailhog();
+    return {
+      messages: mailhogAPI.messages.bind(mailhogAPI),
+      search: (query: string, kind?: string, start?: number, limit?: number) => {
+        if (kind === "from" || kind === "to") {
+          if (!hasUUID(query)) {
+            throw new Error(
+              `You should not use "from" or "to" queries without UUID in emails. Because mailhog maintains all the emails sent through tests, you should be able to uniquely identify the email among those. Found query: ${query}`
+            );
+          }
+        }
+        return mailhogAPI.search.bind(mailhogAPI)(query, kind, start, limit);
+      },
+      deleteMessage: mailhogAPI.deleteMessage.bind(mailhogAPI),
+    };
+  } else {
+    return {
+      messages: unimplemented,
+      search: unimplemented,
+      deleteMessage: unimplemented,
+    };
+  }
+};

calcom/apps/web/playwright/fixtures/embeds.ts

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

calcom/apps/web/playwright/fixtures/eventTypes.ts

@@ -0,0 +1,38 @@
+import { expect, type Page } from "@playwright/test";
+
+import { localize } from "../lib/testUtils";
+
+export function createEventTypeFixture(page: Page) {
+  return {
+    goToEventType: async (eventType: string) => {
+      await page.getByRole("link", { name: eventType }).click();
+    },
+    goToTab: async (tabName: string) => {
+      await page.getByTestId(`vertical-tab-${tabName}`).click();
+    },
+    goToEventTypesPage: async () => {
+      await page.goto("/event-types");
+    },
+    checkAvailabilityTab: async () => {
+      const editAvailability = (await localize("en"))("edit_availability");
+
+      // Verify if the icon is rendered
+      await expect(page.locator("span").filter({ hasText: "Europe/London" }).locator("svg")).toBeVisible();
+      await expect(page.getByText("Europe/London")).toBeVisible();
+      await page.getByRole("link", { name: editAvailability }).click();
+    },
+    goToAvailabilityPage: async () => {
+      const workingHours = (await localize("en"))("default_schedule_name");
+
+      await page.goto("/availability");
+      await page
+        .getByTestId("schedules")
+        .locator("div")
+        .filter({
+          hasText: workingHours,
+        })
+        .first()
+        .click();
+    },
+  };
+}

calcom/apps/web/playwright/fixtures/features.ts

@@ -0,0 +1,50 @@
+import type { Page } from "@playwright/test";
+import type { Feature } from "@prisma/client";
+
+import type { AppFlags } from "@calcom/features/flags/config";
+import { prisma } from "@calcom/prisma";
+
+type FeatureSlugs = keyof AppFlags;
+
+export const createFeatureFixture = (page: Page) => {
+  const store = { features: [], page } as { features: Feature[]; page: typeof page };
+  let initalFeatures: Feature[] = [];
+
+  // IIF to add all feautres to store on creation
+  return {
+    init: async () => {
+      const features = await prisma.feature.findMany();
+      store.features = features;
+      initalFeatures = features;
+      return features;
+    },
+    getAll: () => store.features,
+    get: (slug: FeatureSlugs) => store.features.find((b) => b.slug === slug),
+    deleteAll: async () => {
+      await prisma.feature.deleteMany({
+        where: { slug: { in: store.features.map((feature) => feature.slug) } },
+      });
+      store.features = [];
+    },
+    delete: async (slug: FeatureSlugs) => {
+      await prisma.feature.delete({ where: { slug } });
+      store.features = store.features.filter((b) => b.slug !== slug);
+    },
+    toggleFeature: async (slug: FeatureSlugs) => {
+      const feature = store.features.find((b) => b.slug === slug);
+      if (feature) {
+        const enabled = !feature.enabled;
+        await prisma.feature.update({ where: { slug }, data: { enabled } });
+        store.features = store.features.map((b) => (b.slug === slug ? { ...b, enabled } : b));
+      }
+    },
+    set: async (slug: FeatureSlugs, enabled: boolean) => {
+      const feature = store.features.find((b) => b.slug === slug);
+      if (feature) {
+        store.features = store.features.map((b) => (b.slug === slug ? { ...b, enabled } : b));
+        await prisma.feature.update({ where: { slug }, data: { enabled } });
+      }
+    },
+    reset: () => (store.features = initalFeatures),
+  };
+};

calcom/apps/web/playwright/fixtures/orgs.ts

@@ -0,0 +1,68 @@
+import type { Page } from "@playwright/test";
+import type { Team } from "@prisma/client";
+
+import { prisma } from "@calcom/prisma";
+import { teamMetadataSchema } from "@calcom/prisma/zod-utils";
+
+const getRandomSlug = () => `org-${Math.random().toString(36).substring(7)}`;
+
+// creates a user fixture instance and stores the collection
+export const createOrgsFixture = (page: Page) => {
+  const store = { orgs: [], page } as { orgs: Team[]; page: typeof page };
+  return {
+    create: async (opts: { name: string; slug?: string; requestedSlug?: string; isPrivate?: boolean }) => {
+      const org = await createOrgInDb({
+        name: opts.name,
+        slug: opts.slug || getRandomSlug(),
+        requestedSlug: opts.requestedSlug,
+        isPrivate: opts.isPrivate,
+      });
+      const orgWithMetadata = {
+        ...org,
+        metadata: teamMetadataSchema.parse(org.metadata),
+      };
+      store.orgs.push(orgWithMetadata);
+      return orgWithMetadata;
+    },
+    get: () => store.orgs,
+    deleteAll: async () => {
+      await prisma.team.deleteMany({ where: { id: { in: store.orgs.map((org) => org.id) } } });
+      store.orgs = [];
+    },
+    delete: async (id: number) => {
+      await prisma.team.delete({ where: { id } });
+      store.orgs = store.orgs.filter((b) => b.id !== id);
+    },
+  };
+};
+
+export async function createOrgInDb({
+  name,
+  slug,
+  requestedSlug,
+  isPrivate,
+}: {
+  name: string;
+  slug: string | null;
+  requestedSlug?: string;
+  isPrivate?: boolean;
+}) {
+  return await prisma.team.create({
+    data: {
+      name: name,
+      slug: slug,
+      isOrganization: true,
+      isPrivate: isPrivate,
+      metadata: {
+        ...(requestedSlug
+          ? {
+              requestedSlug,
+            }
+          : null),
+      },
+    },
+    include: {
+      organizationSettings: true,
+    },
+  });
+}

calcom/apps/web/playwright/fixtures/payments.ts

@@ -0,0 +1,63 @@
+import type { Page } from "@playwright/test";
+import type { Payment } from "@prisma/client";
+import { v4 as uuidv4 } from "uuid";
+
+import { prisma } from "@calcom/prisma";
+
+type PaymentFixture = ReturnType<typeof createPaymentFixture>;
+
+// creates a user fixture instance and stores the collection
+export const createPaymentsFixture = (page: Page) => {
+  const store = { payments: [], page } as { payments: PaymentFixture[]; page: typeof page };
+  return {
+    create: async (
+      bookingId: number,
+      { success = false, refunded = false }: { success?: boolean; refunded?: boolean } = {}
+    ) => {
+      const payment = await prisma.payment.create({
+        data: {
+          uid: uuidv4(),
+          amount: 20000,
+          fee: 160,
+          currency: "usd",
+          success,
+          refunded,
+          app: {
+            connect: {
+              slug: "stripe",
+            },
+          },
+          data: {},
+          externalId: `DEMO_PAYMENT_FROM_DB_${Date.now()}`,
+          booking: {
+            connect: {
+              id: bookingId,
+            },
+          },
+        },
+      });
+      const paymentFixture = createPaymentFixture(payment, store.page);
+      store.payments.push(paymentFixture);
+      return paymentFixture;
+    },
+    get: () => store.payments,
+    delete: async (id: number) => {
+      await prisma.payment.delete({
+        where: { id },
+      });
+      store.payments = store.payments.filter((b) => b.id !== id);
+    },
+  };
+};
+
+// creates the single user fixture
+const createPaymentFixture = (payment: Payment, page: Page) => {
+  const store = { payment, page };
+
+  // self is a reflective method that return the Prisma object that references this fixture.
+  return {
+    id: store.payment.id,
+    self: async () => await prisma.payment.findUnique({ where: { id: store.payment.id } }),
+    delete: async () => await prisma.payment.delete({ where: { id: store.payment.id } }),
+  };
+};

calcom/apps/web/playwright/fixtures/regularBookings.ts

@@ -0,0 +1,204 @@
+import { expect, type Page } from "@playwright/test";
+
+import type { MembershipRole } from "@calcom/prisma/enums";
+
+import { localize } from "../lib/testUtils";
+import type { createUsersFixture } from "./users";
+
+export const scheduleSuccessfullyText = "This meeting is scheduled";
+
+type UserFixture = ReturnType<typeof createUsersFixture>;
+
+export async function loginUser(users: UserFixture) {
+  const pro = await users.create({ name: "testuser" });
+  await pro.apiLogin();
+}
+
+export async function loginUserWithTeam(users: UserFixture, role: MembershipRole) {
+  const pro = await users.create(
+    { name: "testuser" },
+    { hasTeam: true, teamRole: role, isOrg: true, hasSubteam: true }
+  );
+  await pro.apiLogin();
+}
+
+export function createBookingPageFixture(page: Page) {
+  return {
+    goToEventType: async (eventType: string) => {
+      await page.getByRole("link", { name: eventType }).click();
+    },
+    goToPage: async (pageName: string, page: Page) => {
+      await page.getByRole("link", { name: pageName }).click();
+    },
+    backToBookings: async (page: Page) => {
+      await page.getByTestId("back-to-bookings").click();
+    },
+    goToTab: async (tabName: string) => {
+      await page.getByTestId(`vertical-tab-${tabName}`).click();
+    },
+    goToEventTypesPage: async () => {
+      await page.goto("/event-types");
+    },
+    updateEventType: async () => {
+      await page.getByTestId("update-eventtype").click();
+      const toast = await page.waitForSelector('[data-testid="toast-success"]');
+      expect(toast).toBeTruthy();
+    },
+    previewEventType: async () => {
+      const eventtypePromise = page.waitForEvent("popup");
+      await page.getByTestId("preview-button").click();
+      return eventtypePromise;
+    },
+    checkRequiresConfirmation: async () => {
+      // Check existence of the icon
+      await expect(page.getByTestId("requires-confirmation-title").locator("svg")).toBeVisible();
+
+      const confirmationSwitch = page.getByTestId("requires-confirmation");
+      await expect(confirmationSwitch).toBeVisible();
+      await confirmationSwitch.click();
+    },
+    checkRequiresBookerEmailVerification: async () => {
+      await expect(page.getByTestId("requires-booker-email-verification-title").locator("svg")).toBeVisible();
+
+      const emailSwitch = page.getByTestId("requires-booker-email-verification");
+
+      await expect(emailSwitch).toBeVisible();
+      await emailSwitch.click();
+    },
+    checkHideNotes: async () => {
+      await expect(page.getByTestId("disable-notes-title").locator("svg")).toBeVisible();
+
+      const hideNotesSwitch = page.getByTestId("disable-notes");
+
+      await expect(hideNotesSwitch).toBeVisible();
+      await hideNotesSwitch.click();
+    },
+    checkRedirectOnBooking: async () => {
+      await expect(page.getByTestId("redirect-success-booking-title").locator("svg")).toBeVisible();
+
+      const redirectSwitch = page.getByTestId("redirect-success-booking");
+      await expect(redirectSwitch).toBeVisible();
+      await redirectSwitch.click();
+      await expect(page.getByTestId("external-redirect-url")).toBeVisible();
+      await page.getByTestId("external-redirect-url").fill("https://cal.com");
+      await expect(page.getByTestId("redirect-url-warning")).toBeVisible();
+    },
+    checkEnablePrivateUrl: async () => {
+      await expect(page.getByTestId("hashedLinkCheck-title").locator("label div")).toBeVisible();
+
+      await expect(page.getByTestId("hashedLinkCheck-info")).toBeVisible();
+      await expect(page.getByTestId("hashedLinkCheck")).toBeVisible();
+      await page.getByTestId("hashedLinkCheck").click();
+      await expect(page.getByTestId("generated-hash-url")).toBeVisible();
+    },
+    toggleOfferSeats: async () => {
+      await expect(page.getByTestId("offer-seats-toggle-title").locator("svg")).toBeVisible();
+
+      await page.getByTestId("offer-seats-toggle").click();
+
+      const seatSwitchField = page.getByTestId("seats-per-time-slot");
+      await seatSwitchField.fill("3");
+      await expect(seatSwitchField).toHaveValue("3");
+      await expect(page.getByTestId("show-attendees")).toBeVisible();
+    },
+    checkLockTimezone: async () => {
+      await expect(page.getByTestId("lock-timezone-toggle-title").locator("svg")).toBeVisible();
+
+      const lockSwitch = page.getByTestId("lock-timezone-toggle");
+
+      await expect(lockSwitch).toBeVisible();
+      await lockSwitch.click();
+    },
+    checkEventType: async () => {
+      await expect(page.getByTestId("requires-confirmation-badge").last()).toBeVisible();
+    },
+    checkBufferTime: async () => {
+      const minutes = (await localize("en"))("minutes");
+      const fieldPlaceholder = page.getByPlaceholder("0");
+
+      await page
+        .locator("div")
+        .filter({ hasText: /^No buffer time$/ })
+        .nth(1)
+        .click();
+      await page.getByTestId("select-option-15").click();
+      await expect(page.getByText(`15 ${minutes}`, { exact: true })).toBeVisible();
+
+      await page
+        .locator("div")
+        .filter({ hasText: /^No buffer time$/ })
+        .nth(2)
+        .click();
+      await page.getByTestId("select-option-10").click();
+      await expect(page.getByText(`10 ${minutes}`, { exact: true })).toBeVisible();
+
+      await fieldPlaceholder.fill("10");
+      await expect(fieldPlaceholder).toHaveValue("10");
+
+      await page
+        .locator("div")
+        .filter({ hasText: /^Use event length \(default\)$/ })
+        .first()
+        .click();
+
+      // select a large interval to check if the time slots for a day reduce on the preview page
+      await page.getByTestId("select-option-60").click();
+      await expect(page.getByText(`60 ${minutes}`, { exact: true })).toBeVisible();
+    },
+    checkLimitBookingFrequency: async () => {
+      const fieldPlaceholder = page.getByPlaceholder("1").nth(1);
+      const limitFrequency = (await localize("en"))("limit_booking_frequency");
+      const addlimit = (await localize("en"))("add_limit");
+      const limitFrequencySwitch = page
+        .locator("fieldset")
+        .filter({ hasText: limitFrequency })
+        .getByRole("switch");
+
+      await limitFrequencySwitch.click();
+      await page.getByRole("button", { name: addlimit }).click();
+      await fieldPlaceholder.fill("12");
+      await expect(fieldPlaceholder).toHaveValue("12");
+      await limitFrequencySwitch.click();
+    },
+    checkLimitBookingDuration: async () => {
+      const limitDuration = (await localize("en"))("limit_total_booking_duration");
+      const addlimit = (await localize("en"))("add_limit");
+      const limitDurationSwitch = page
+        .locator("fieldset")
+        .filter({ hasText: limitDuration })
+        .getByRole("switch");
+
+      await limitDurationSwitch.click();
+      await page.getByRole("button", { name: addlimit }).click();
+      await expect(page.getByTestId("add-limit")).toHaveCount(2);
+      await limitDurationSwitch.click();
+    },
+    checkLimitFutureBookings: async () => {
+      const limitFutureBookings = (await localize("en"))("limit_future_bookings");
+      const limitBookingsSwitch = page
+        .locator("fieldset")
+        .filter({ hasText: limitFutureBookings })
+        .getByRole("switch");
+
+      await limitBookingsSwitch.click();
+      await page.locator("#RANGE").click();
+      await expect(page.locator("#RANGE")).toBeChecked();
+      await limitBookingsSwitch.click();
+    },
+    checkOffsetTimes: async () => {
+      const offsetStart = (await localize("en"))("offset_start");
+      const offsetStartTimes = (await localize("en"))("offset_toggle");
+      const offsetLabel = page.getByLabel(offsetStart);
+
+      await page.locator("fieldset").filter({ hasText: offsetStartTimes }).getByRole("switch").click();
+      await offsetLabel.fill("10");
+      await expect(offsetLabel).toHaveValue("10");
+      await expect(
+        page.getByText("e.g. this will show time slots to your bookers at 9:10 AM instead of 9:00 AM")
+      ).toBeVisible();
+    },
+    checkTimeSlotsCount: async (eventTypePage: Page, count: number) => {
+      await expect(eventTypePage.getByTestId("time")).toHaveCount(count);
+    },
+  };
+}

calcom/apps/web/playwright/fixtures/routingForms.ts

@@ -0,0 +1,61 @@
+import { v4 as uuidv4 } from "uuid";
+
+import { prisma } from "@calcom/prisma";
+
+type Route = {
+  id: string;
+  action: {
+    type: string;
+    value: string;
+  };
+  isFallback: boolean;
+  queryValue: {
+    id: string;
+    type: string;
+  };
+};
+
+export const createRoutingFormsFixture = () => {
+  return {
+    async create({
+      userId,
+      teamId,
+      name,
+      fields,
+      routes = [],
+    }: {
+      name: string;
+      userId: number;
+      teamId: number | null;
+      routes?: Route[];
+      fields: {
+        type: string;
+        label: string;
+        identifier?: string;
+        required: boolean;
+      }[];
+    }) {
+      return await prisma.app_RoutingForms_Form.create({
+        data: {
+          name,
+          userId,
+          teamId,
+          routes: [
+            ...routes,
+            // Add a fallback route always, this is taken care of tRPC route normally but do it manually while running the query directly.
+            {
+              id: "898899aa-4567-489a-bcde-f1823f708646",
+              action: { type: "customPageMessage", value: "Fallback Message" },
+              isFallback: true,
+              queryValue: { id: "898899aa-4567-489a-bcde-f1823f708646", type: "group" },
+            },
+          ],
+          fields: fields.map((f) => ({
+            id: uuidv4(),
+            ...f,
+          })),
+        },
+      });
+    },
+  };
+};

calcom/apps/web/playwright/fixtures/servers.ts

@@ -0,0 +1,33 @@
+import type { Server } from "http";
+
+import { nextServer } from "../lib/next-server";
+
+type ServerFixture = ReturnType<typeof createServerFixture>;
+
+// creates a servers fixture instance and stores the collection
+export const createServersFixture = () => {
+  const store = { servers: [] } as { servers: ServerFixture[] };
+  return {
+    create: async () => {
+      const server = await nextServer();
+      const serverFixture = createServerFixture(server);
+      store.servers.push(serverFixture);
+      return serverFixture;
+    },
+    get: () => store.servers,
+    deleteAll: async () => {
+      store.servers.forEach((server) => server.delete());
+      store.servers = [];
+    },
+  };
+};
+
+// creates the single server fixture
+const createServerFixture = (server: Server) => {
+  const store = { server };
+
+  return {
+    self: async () => store.server,
+    delete: async () => store.server.close(),
+  };
+};

calcom/apps/web/playwright/fixtures/types.ts

@@ -0,0 +1,4 @@
+export enum TimeZoneEnum {
+  USA = "America/Phoenix",
+  UK = "Europe/London",
+}

calcom/apps/web/playwright/fixtures/users.ts

@@ -0,0 +1,993 @@
+import type { Page, WorkerInfo } from "@playwright/test";
+import { expect } from "@playwright/test";
+import type Prisma from "@prisma/client";
+import type { Team } from "@prisma/client";
+import { Prisma as PrismaType } from "@prisma/client";
+import { hashSync as hash } from "bcryptjs";
+import { uuid } from "short-uuid";
+import { v4 } from "uuid";
+
+import stripe from "@calcom/features/ee/payments/server/stripe";
+import { DEFAULT_SCHEDULE, getAvailabilityFromSchedule } from "@calcom/lib/availability";
+import { WEBAPP_URL } from "@calcom/lib/constants";
+import { ProfileRepository } from "@calcom/lib/server/repository/profile";
+import { prisma } from "@calcom/prisma";
+import { MembershipRole, SchedulingType, TimeUnit, WorkflowTriggerEvents } from "@calcom/prisma/enums";
+import { teamMetadataSchema } from "@calcom/prisma/zod-utils";
+import type { Schedule } from "@calcom/types/schedule";
+
+import { selectFirstAvailableTimeSlotNextMonth, teamEventSlug, teamEventTitle } from "../lib/testUtils";
+import type { createEmailsFixture } from "./emails";
+import { TimeZoneEnum } from "./types";
+
+// Don't import hashPassword from app as that ends up importing next-auth and initializing it before NEXTAUTH_URL can be updated during tests.
+export function hashPassword(password: string) {
+  const hashedPassword = hash(password, 12);
+  return hashedPassword;
+}
+
+type UserFixture = ReturnType<typeof createUserFixture>;
+
+const userIncludes = PrismaType.validator<PrismaType.UserInclude>()({
+  eventTypes: true,
+  workflows: true,
+  credentials: true,
+  routingForms: true,
+});
+
+type InstallStripeParamsSkipTrue = {
+  eventTypeIds?: number[];
+  skip: true;
+};
+
+type InstallStripeParamsSkipFalse = {
+  skip: false;
+  eventTypeIds: number[];
+};
+type InstallStripeParamsUnion = InstallStripeParamsSkipTrue | InstallStripeParamsSkipFalse;
+type InstallStripeTeamPramas = InstallStripeParamsUnion & {
+  page: Page;
+  teamId: number;
+};
+type InstallStripePersonalPramas = InstallStripeParamsUnion & {
+  page: Page;
+};
+
+type InstallStripeParams = InstallStripeParamsUnion & {
+  redirectUrl: string;
+  buttonSelector: string;
+  page: Page;
+};
+
+const userWithEventTypes = PrismaType.validator<PrismaType.UserArgs>()({
+  include: userIncludes,
+});
+
+const seededForm = {
+  id: "948ae412-d995-4865-875a-48302588de03",
+  name: "Seeded Form - Pro",
+};
+
+type UserWithIncludes = PrismaType.UserGetPayload<typeof userWithEventTypes>;
+
+const createTeamWorkflow = async (user: { id: number }, team: { id: number }) => {
+  return await prisma.workflow.create({
+    data: {
+      name: "Team Workflow",
+      trigger: WorkflowTriggerEvents.BEFORE_EVENT,
+      time: 24,
+      timeUnit: TimeUnit.HOUR,
+      userId: user.id,
+      teamId: team.id,
+    },
+  });
+};
+
+const createTeamEventType = async (
+  user: { id: number },
+  team: { id: number },
+  scenario?: {
+    schedulingType?: SchedulingType;
+    teamEventTitle?: string;
+    teamEventSlug?: string;
+    teamEventLength?: number;
+    seatsPerTimeSlot?: number;
+  }
+) => {
+  return await prisma.eventType.create({
+    data: {
+      team: {
+        connect: {
+          id: team.id,
+        },
+      },
+      users: {
+        connect: {
+          id: user.id,
+        },
+      },
+      owner: {
+        connect: {
+          id: user.id,
+        },
+      },
+      hosts: {
+        create: {
+          userId: user.id,
+          isFixed: scenario?.schedulingType === SchedulingType.COLLECTIVE ? true : false,
+        },
+      },
+      schedulingType: scenario?.schedulingType ?? SchedulingType.COLLECTIVE,
+      title: scenario?.teamEventTitle ?? `${teamEventTitle}-team-id-${team.id}`,
+      slug: scenario?.teamEventSlug ?? `${teamEventSlug}-team-id-${team.id}`,
+      length: scenario?.teamEventLength ?? 30,
+      seatsPerTimeSlot: scenario?.seatsPerTimeSlot,
+    },
+  });
+};
+
+const createTeamAndAddUser = async (
+  {
+    user,
+    isUnpublished,
+    isOrg,
+    isOrgVerified,
+    hasSubteam,
+    organizationId,
+    isDnsSetup,
+    index,
+  }: {
+    user: { id: number; email: string; username: string | null; role?: MembershipRole };
+    isUnpublished?: boolean;
+    isOrg?: boolean;
+    isOrgVerified?: boolean;
+    isDnsSetup?: boolean;
+    hasSubteam?: true;
+    organizationId?: number | null;
+    index?: number;
+  },
+  workerInfo: WorkerInfo
+) => {
+  const slugIndex = index ? `-count-${index}` : "";
+  const slug = `${isOrg ? "org" : "team"}-${workerInfo.workerIndex}-${Date.now()}${slugIndex}`;
+  const data: PrismaType.TeamCreateInput = {
+    name: `user-id-${user.id}'s ${isOrg ? "Org" : "Team"}`,
+    isOrganization: isOrg,
+  };
+  data.metadata = {
+    ...(isUnpublished ? { requestedSlug: slug } : {}),
+  };
+  if (isOrg) {
+    data.organizationSettings = {
+      create: {
+        orgAutoAcceptEmail: user.email.split("@")[1],
+        isOrganizationVerified: !!isOrgVerified,
+        isOrganizationConfigured: isDnsSetup,
+      },
+    };
+  }
+
+  data.slug = !isUnpublished ? slug : undefined;
+  if (isOrg && hasSubteam) {
+    const team = await createTeamAndAddUser({ user }, workerInfo);
+    await createTeamEventType(user, team);
+    await createTeamWorkflow(user, team);
+    data.children = { connect: [{ id: team.id }] };
+  }
+  data.orgProfiles = isOrg
+    ? {
+        create: [
+          {
+            uid: ProfileRepository.generateProfileUid(),
+            username: user.username ?? user.email.split("@")[0],
+            user: {
+              connect: {
+                id: user.id,
+              },
+            },
+          },
+        ],
+      }
+    : undefined;
+  data.parent = organizationId ? { connect: { id: organizationId } } : undefined;
+  const team = await prisma.team.create({
+    data,
+  });
+
+  const { role = MembershipRole.OWNER, id: userId } = user;
+  await prisma.membership.create({
+    data: {
+      teamId: team.id,
+      userId,
+      role: role,
+      accepted: true,
+    },
+  });
+
+  return team;
+};
+
+// creates a user fixture instance and stores the collection
+export const createUsersFixture = (
+  page: Page,
+  emails: ReturnType<typeof createEmailsFixture>,
+  workerInfo: WorkerInfo
+) => {
+  const store = { users: [], trackedEmails: [], page, teams: [] } as {
+    users: UserFixture[];
+    trackedEmails: { email: string }[];
+    page: typeof page;
+    teams: Team[];
+  };
+  return {
+    buildForSignup: (opts?: Pick<CustomUserOpts, "email" | "username" | "useExactUsername" | "password">) => {
+      const uname =
+        opts?.useExactUsername && opts?.username
+          ? opts.username
+          : `${opts?.username || "user"}-${workerInfo.workerIndex}-${Date.now()}`;
+      return {
+        username: uname,
+        email: opts?.email ?? `${uname}@example.com`,
+        password: opts?.password ?? uname,
+      };
+    },
+    /**
+     * In case organizationId is passed, it simulates a scenario where a nonexistent user is added to an organization.
+     */
+    create: async (
+      opts?:
+        | (CustomUserOpts & {
+            organizationId?: number | null;
+          })
+        | null,
+      scenario: {
+        seedRoutingForms?: boolean;
+        hasTeam?: true;
+        numberOfTeams?: number;
+        teamRole?: MembershipRole;
+        teammates?: CustomUserOpts[];
+        schedulingType?: SchedulingType;
+        teamEventTitle?: string;
+        teamEventSlug?: string;
+        teamEventLength?: number;
+        isOrg?: boolean;
+        isOrgVerified?: boolean;
+        isDnsSetup?: boolean;
+        hasSubteam?: true;
+        isUnpublished?: true;
+        seatsPerTimeSlot?: number;
+      } = {}
+    ) => {
+      const _user = await prisma.user.create({
+        data: createUser(workerInfo, opts),
+        include: {
+          profiles: true,
+        },
+      });
+
+      let defaultEventTypes: SupportedTestEventTypes[] = [
+        { title: "30 min", slug: "30-min", length: 30 },
+        { title: "Paid", slug: "paid", length: 30, price: 1000 },
+        { title: "Opt in", slug: "opt-in", requiresConfirmation: true, length: 30 },
+        { title: "Seated", slug: "seated", seatsPerTimeSlot: 2, length: 30 },
+      ];
+
+      if (opts?.eventTypes) defaultEventTypes = defaultEventTypes.concat(opts.eventTypes);
+      for (const eventTypeData of defaultEventTypes) {
+        eventTypeData.owner = { connect: { id: _user.id } };
+        eventTypeData.users = { connect: { id: _user.id } };
+        if (_user.profiles[0]) {
+          eventTypeData.profile = { connect: { id: _user.profiles[0].id } };
+        }
+        await prisma.eventType.create({
+          data: eventTypeData,
+        });
+      }
+
+      const workflows: SupportedTestWorkflows[] = [
+        { name: "Default Workflow", trigger: "NEW_EVENT" },
+        { name: "Test Workflow", trigger: "EVENT_CANCELLED" },
+        ...(opts?.workflows || []),
+      ];
+      for (const workflowData of workflows) {
+        workflowData.user = { connect: { id: _user.id } };
+        await prisma.workflow.create({
+          data: workflowData,
+        });
+      }
+
+      if (scenario.seedRoutingForms) {
+        await prisma.app_RoutingForms_Form.create({
+          data: {
+            routes: [
+              {
+                id: "8a898988-89ab-4cde-b012-31823f708642",
+                action: { type: "eventTypeRedirectUrl", value: "pro/30min" },
+                queryValue: {
+                  id: "8a898988-89ab-4cde-b012-31823f708642",
+                  type: "group",
+                  children1: {
+                    "8988bbb8-0123-4456-b89a-b1823f70c5ff": {
+                      type: "rule",
+                      properties: {
+                        field: "c4296635-9f12-47b1-8153-c3a854649182",
+                        value: ["event-routing"],
+                        operator: "equal",
+                        valueSrc: ["value"],
+                        valueType: ["text"],
+                      },
+                    },
+                  },
+                },
+              },
+              {
+                id: "aa8aaba9-cdef-4012-b456-71823f70f7ef",
+                action: { type: "customPageMessage", value: "Custom Page Result" },
+                queryValue: {
+                  id: "aa8aaba9-cdef-4012-b456-71823f70f7ef",
+                  type: "group",
+                  children1: {
+                    "b99b8a89-89ab-4cde-b012-31823f718ff5": {
+                      type: "rule",
+                      properties: {
+                        field: "c4296635-9f12-47b1-8153-c3a854649182",
+                        value: ["custom-page"],
+                        operator: "equal",
+                        valueSrc: ["value"],
+                        valueType: ["text"],
+                      },
+                    },
+                  },
+                },
+              },
+              {
+                id: "a8ba9aab-4567-489a-bcde-f1823f71b4ad",
+                action: { type: "externalRedirectUrl", value: "https://google.com" },
+                queryValue: {
+                  id: "a8ba9aab-4567-489a-bcde-f1823f71b4ad",
+                  type: "group",
+                  children1: {
+                    "998b9b9a-0123-4456-b89a-b1823f7232b9": {
+                      type: "rule",
+                      properties: {
+                        field: "c4296635-9f12-47b1-8153-c3a854649182",
+                        value: ["external-redirect"],
+                        operator: "equal",
+                        valueSrc: ["value"],
+                        valueType: ["text"],
+                      },
+                    },
+                  },
+                },
+              },
+              {
+                id: "aa8ba8b9-0123-4456-b89a-b182623406d8",
+                action: { type: "customPageMessage", value: "Multiselect chosen" },
+                queryValue: {
+                  id: "aa8ba8b9-0123-4456-b89a-b182623406d8",
+                  type: "group",
+                  children1: {
+                    "b98a8abb-cdef-4012-b456-718262343d27": {
+                      type: "rule",
+                      properties: {
+                        field: "d4292635-9f12-17b1-9153-c3a854649182",
+                        value: [["Option-2"]],
+                        operator: "multiselect_equals",
+                        valueSrc: ["value"],
+                        valueType: ["multiselect"],
+                      },
+                    },
+                  },
+                },
+              },
+              {
+                id: "898899aa-4567-489a-bcde-f1823f708646",
+                action: { type: "customPageMessage", value: "Fallback Message" },
+                isFallback: true,
+                queryValue: { id: "898899aa-4567-489a-bcde-f1823f708646", type: "group" },
+              },
+            ],
+            fields: [
+              {
+                id: "c4296635-9f12-47b1-8153-c3a854649182",
+                type: "text",
+                label: "Test field",
+                required: true,
+              },
+              {
+                id: "d4292635-9f12-17b1-9153-c3a854649182",
+                type: "multiselect",
+                label: "Multi Select",
+                identifier: "multi",
+                selectText: "Option-1\nOption-2",
+                required: false,
+              },
+            ],
+            user: {
+              connect: {
+                id: _user.id,
+              },
+            },
+            name: seededForm.name,
+          },
+        });
+      }
+      const user = await prisma.user.findUniqueOrThrow({
+        where: { id: _user.id },
+        include: userIncludes,
+      });
+      if (scenario.hasTeam) {
+        const numberOfTeams = scenario.numberOfTeams || 1;
+        for (let i = 0; i < numberOfTeams; i++) {
+          const team = await createTeamAndAddUser(
+            {
+              user: {
+                id: user.id,
+                email: user.email,
+                username: user.username,
+                role: scenario.teamRole || "OWNER",
+              },
+              isUnpublished: scenario.isUnpublished,
+              isOrg: scenario.isOrg,
+              isOrgVerified: scenario.isOrgVerified,
+              isDnsSetup: scenario.isDnsSetup,
+              hasSubteam: scenario.hasSubteam,
+              organizationId: opts?.organizationId,
+            },
+            workerInfo
+          );
+          store.teams.push(team);
+          const teamEvent = await createTeamEventType(user, team, scenario);
+          if (scenario.teammates) {
+            // Create Teammate users
+            const teamMates = [];
+            for (const teammateObj of scenario.teammates) {
+              const teamUser = await prisma.user.create({
+                data: createUser(workerInfo, teammateObj),
+              });
+
+              // Add teammates to the team
+              await prisma.membership.create({
+                data: {
+                  teamId: team.id,
+                  userId: teamUser.id,
+                  role: MembershipRole.MEMBER,
+                  accepted: true,
+                },
+              });
+
+              // Add teammate to the host list of team event
+              await prisma.host.create({
+                data: {
+                  userId: teamUser.id,
+                  eventTypeId: teamEvent.id,
+                  isFixed: scenario.schedulingType === SchedulingType.COLLECTIVE ? true : false,
+                },
+              });
+
+              const teammateFixture = createUserFixture(
+                await prisma.user.findUniqueOrThrow({
+                  where: { id: teamUser.id },
+                  include: userIncludes,
+                }),
+                store.page
+              );
+              teamMates.push(teamUser);
+              store.users.push(teammateFixture);
+            }
+            // Add Teammates to OrgUsers
+            if (scenario.isOrg) {
+              const orgProfilesCreate = teamMates
+                .map((teamUser) => ({
+                  user: {
+                    connect: {
+                      id: teamUser.id,
+                    },
+                  },
+                  uid: v4(),
+                  username: teamUser.username || teamUser.email.split("@")[0],
+                }))
+                .concat([
+                  {
+                    user: { connect: { id: user.id } },
+                    uid: v4(),
+                    username: user.username || user.email.split("@")[0],
+                  },
+                ]);
+
+              const existingProfiles = await prisma.profile.findMany({
+                where: {
+                  userId: _user.id,
+                },
+              });
+
+              await prisma.team.update({
+                where: {
+                  id: team.id,
+                },
+                data: {
+                  orgProfiles: _user.profiles.length
+                    ? {
+                        connect: _user.profiles.map((profile) => ({ id: profile.id })),
+                      }
+                    : {
+                        create: orgProfilesCreate.filter(
+                          (profile) =>
+                            !existingProfiles.map((p) => p.userId).includes(profile.user.connect.id)
+                        ),
+                      },
+                },
+              });
+            }
+          }
+        }
+      }
+      const userFixture = createUserFixture(user, store.page);
+      store.users.push(userFixture);
+      return userFixture;
+    },
+    /**
+     * Use this method to get an email that can be automatically cleaned up from all the places in DB
+     */
+    trackEmail: ({ username, domain }: { username: string; domain: string }) => {
+      const email = `${username}-${uuid().substring(0, 8)}@${domain}`;
+      store.trackedEmails.push({
+        email,
+      });
+      return email;
+    },
+    get: () => store.users,
+    logout: async () => {
+      await page.goto("/auth/logout");
+    },
+    deleteAll: async () => {
+      const ids = store.users.map((u) => u.id);
+      if (emails) {
+        const emailMessageIds: string[] = [];
+        for (const user of store.trackedEmails.concat(store.users.map((u) => ({ email: u.email })))) {
+          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 } } });
+      // Delete all users that were tracked by email(if they were created)
+      await prisma.user.deleteMany({ where: { email: { in: store.trackedEmails.map((e) => e.email) } } });
+      await prisma.team.deleteMany({ where: { id: { in: store.teams.map((org) => org.id) } } });
+      await prisma.secondaryEmail.deleteMany({ where: { userId: { in: ids } } });
+      store.users = [];
+      store.teams = [];
+      store.trackedEmails = [];
+    },
+    delete: async (id: number) => {
+      await prisma.user.delete({ where: { id } });
+      store.users = store.users.filter((b) => b.id !== id);
+    },
+    deleteByEmail: async (email: string) => {
+      // Use deleteMany instead of delete to avoid the findUniqueOrThrow error that happens before the delete
+      await prisma.user.deleteMany({
+        where: {
+          email,
+        },
+      });
+      store.users = store.users.filter((b) => b.email !== email);
+    },
+    set: async (email: string) => {
+      const user = await prisma.user.findUniqueOrThrow({
+        where: { email },
+        include: userIncludes,
+      });
+      const userFixture = createUserFixture(user, store.page);
+      store.users.push(userFixture);
+      return userFixture;
+    },
+  };
+};
+
+type JSONValue = string | number | boolean | { [x: string]: JSONValue } | Array<JSONValue>;
+
+// creates the single user fixture
+const createUserFixture = (user: UserWithIncludes, page: Page) => {
+  const store = { user, page };
+
+  // self is a reflective method that return the Prisma object that references this fixture.
+  const self = async () =>
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    (await prisma.user.findUnique({
+      where: { id: store.user.id },
+      include: { eventTypes: true },
+    }))!;
+  return {
+    id: user.id,
+    name: user.name,
+    username: user.username,
+    email: user.email,
+    eventTypes: user.eventTypes,
+    routingForms: user.routingForms,
+    self,
+    apiLogin: async (password?: string) =>
+      apiLogin({ ...(await self()), password: password || user.username }, store.page),
+    /**
+     * @deprecated use apiLogin instead
+     */
+    login: async () => login({ ...(await self()), password: user.username }, store.page),
+    logout: async () => {
+      await page.goto("/auth/logout");
+    },
+    getFirstTeamMembership: async () => {
+      const memberships = await prisma.membership.findMany({
+        where: { userId: user.id },
+        include: { team: true },
+      });
+
+      const membership = memberships
+        .map((membership) => {
+          return {
+            ...membership,
+            team: {
+              ...membership.team,
+              metadata: teamMetadataSchema.parse(membership.team.metadata),
+            },
+          };
+        })
+        .find((membership) => !membership.team.isOrganization);
+      if (!membership) {
+        throw new Error("No team found for user");
+      }
+      return membership;
+    },
+    getOrgMembership: async () => {
+      const membership = await prisma.membership.findFirstOrThrow({
+        where: {
+          userId: user.id,
+          team: {
+            isOrganization: true,
+          },
+        },
+        include: {
+          team: {
+            include: {
+              children: true,
+              organizationSettings: true,
+            },
+          },
+        },
+      });
+      if (!membership) {
+        return membership;
+      }
+
+      return {
+        ...membership,
+        team: {
+          ...membership.team,
+          metadata: teamMetadataSchema.parse(membership.team.metadata),
+        },
+      };
+    },
+    getFirstEventAsOwner: async () =>
+      prisma.eventType.findFirstOrThrow({
+        where: {
+          userId: user.id,
+        },
+      }),
+    getUserEventsAsOwner: async () =>
+      prisma.eventType.findMany({
+        where: {
+          userId: user.id,
+        },
+      }),
+    getFirstTeamEvent: async (teamId: number) => {
+      return prisma.eventType.findFirstOrThrow({
+        where: {
+          teamId,
+        },
+      });
+    },
+    setupEventWithPrice: async (eventType: Pick<Prisma.EventType, "id">, slug: string) =>
+      setupEventWithPrice(eventType, slug, store.page),
+    bookAndPayEvent: async (eventType: Pick<Prisma.EventType, "slug">) =>
+      bookAndPayEvent(user, eventType, store.page),
+    makePaymentUsingStripe: async () => makePaymentUsingStripe(store.page),
+    installStripePersonal: async (params: InstallStripeParamsUnion) =>
+      installStripePersonal({ page: store.page, ...params }),
+    installStripeTeam: async (params: InstallStripeParamsUnion & { teamId: number }) =>
+      installStripeTeam({ page: store.page, ...params }),
+    // ths is for developemnt only aimed to inject debugging messages in the metadata field of the user
+    debug: async (message: string | Record<string, JSONValue>) => {
+      await prisma.user.update({
+        where: { id: store.user.id },
+        data: { metadata: { debug: message } },
+      });
+    },
+    delete: async () => await prisma.user.delete({ where: { id: store.user.id } }),
+    confirmPendingPayment: async () => confirmPendingPayment(store.page),
+  };
+};
+
+type SupportedTestEventTypes = PrismaType.EventTypeCreateInput & {
+  _bookings?: PrismaType.BookingCreateInput[];
+};
+
+type SupportedTestWorkflows = PrismaType.WorkflowCreateInput;
+
+type CustomUserOptsKeys =
+  | "username"
+  | "completedOnboarding"
+  | "locale"
+  | "name"
+  | "email"
+  | "organizationId"
+  | "twoFactorEnabled"
+  | "disableImpersonation"
+  | "role";
+type CustomUserOpts = Partial<Pick<Prisma.User, CustomUserOptsKeys>> & {
+  timeZone?: TimeZoneEnum;
+  eventTypes?: SupportedTestEventTypes[];
+  workflows?: SupportedTestWorkflows[];
+  // ignores adding the worker-index after username
+  useExactUsername?: boolean;
+  roleInOrganization?: MembershipRole;
+  schedule?: Schedule;
+  password?: string | null;
+  emailDomain?: string;
+};
+
+// creates the actual user in the db.
+const createUser = (
+  workerInfo: WorkerInfo,
+  opts?:
+    | (CustomUserOpts & {
+        organizationId?: number | null;
+      })
+    | null
+): PrismaType.UserUncheckedCreateInput => {
+  // build a unique name for our user
+  const uname =
+    opts?.useExactUsername && opts?.username
+      ? opts.username
+      : `${opts?.username || "user"}-${workerInfo.workerIndex}-${Date.now()}`;
+
+  const emailDomain = opts?.emailDomain || "example.com";
+  return {
+    username: uname,
+    name: opts?.name,
+    email: opts?.email ?? `${uname}@${emailDomain}`,
+    password: {
+      create: {
+        hash: hashPassword(uname),
+      },
+    },
+    emailVerified: new Date(),
+    completedOnboarding: opts?.completedOnboarding ?? true,
+    timeZone: opts?.timeZone ?? TimeZoneEnum.UK,
+    locale: opts?.locale ?? "en",
+    role: opts?.role ?? "USER",
+    twoFactorEnabled: opts?.twoFactorEnabled ?? false,
+    disableImpersonation: opts?.disableImpersonation ?? false,
+    ...getOrganizationRelatedProps({ organizationId: opts?.organizationId, role: opts?.roleInOrganization }),
+    schedules:
+      opts?.completedOnboarding ?? true
+        ? {
+            create: {
+              name: "Working Hours",
+              timeZone: opts?.timeZone ?? TimeZoneEnum.UK,
+              availability: {
+                createMany: {
+                  data: getAvailabilityFromSchedule(opts?.schedule ?? DEFAULT_SCHEDULE),
+                },
+              },
+            },
+          }
+        : undefined,
+  };
+
+  function getOrganizationRelatedProps({
+    organizationId,
+    role,
+  }: {
+    organizationId: number | null | undefined;
+    role: MembershipRole | undefined;
+  }) {
+    if (!organizationId) {
+      return null;
+    }
+    if (!role) {
+      throw new Error("Missing role for user in organization");
+    }
+    return {
+      organizationId,
+      profiles: {
+        create: {
+          uid: ProfileRepository.generateProfileUid(),
+          username: uname,
+          organization: {
+            connect: {
+              id: organizationId,
+            },
+          },
+        },
+      },
+      teams: {
+        // Create membership
+        create: [
+          {
+            team: {
+              connect: {
+                id: organizationId,
+              },
+            },
+            accepted: true,
+            role,
+          },
+        ],
+      },
+    };
+  }
+};
+
+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, "email">> & { password?: string | null },
+  page: Page
+) {
+  // get locators
+  const loginLocator = page.locator("[data-testid=login-form]");
+  const emailLocator = loginLocator.locator("#email");
+  const passwordLocator = loginLocator.locator("#password");
+  const signInLocator = loginLocator.locator('[type="submit"]');
+
+  //login
+  await page.goto("/");
+  await emailLocator.fill(user.email ?? `${user.username}@example.com`);
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  await passwordLocator.fill(user.password ?? user.username!);
+  await signInLocator.click();
+
+  // waiting for specific login request to resolve
+  await page.waitForResponse(/\/api\/auth\/callback\/credentials/);
+}
+
+export async function apiLogin(
+  user: Pick<Prisma.User, "username"> & Partial<Pick<Prisma.User, "email">> & { password: string | null },
+  page: Page
+) {
+  const csrfToken = await page
+    .context()
+    .request.get("/api/auth/csrf")
+    .then((response) => response.json())
+    .then((json) => json.csrfToken);
+  const data = {
+    email: user.email ?? `${user.username}@example.com`,
+    password: user.password ?? user.username,
+    callbackURL: WEBAPP_URL,
+    redirect: "false",
+    json: "true",
+    csrfToken,
+  };
+  return page.context().request.post("/api/auth/callback/credentials", {
+    data,
+  });
+}
+
+export async function setupEventWithPrice(eventType: Pick<Prisma.EventType, "id">, slug: string, page: Page) {
+  await page.goto(`/event-types/${eventType?.id}?tabName=apps`);
+  await page.locator(`[data-testid='${slug}-app-switch']`).first().click();
+  await page.getByPlaceholder("Price").fill("100");
+  await page.getByTestId("update-eventtype").click();
+}
+
+export async function bookAndPayEvent(
+  user: Pick<Prisma.User, "username">,
+  eventType: Pick<Prisma.EventType, "slug">,
+  page: Page
+) {
+  // booking process with stripe integration
+  await page.goto(`${user.username}/${eventType?.slug}`);
+  await selectFirstAvailableTimeSlotNextMonth(page);
+  // --- fill form
+  await page.fill('[name="name"]', "Stripe Stripeson");
+  await page.fill('[name="email"]', "test@example.com");
+
+  await Promise.all([page.waitForURL("/payment/*"), page.press('[name="email"]', "Enter")]);
+
+  await makePaymentUsingStripe(page);
+}
+
+export async function makePaymentUsingStripe(page: Page) {
+  const stripeElement = await page.locator(".StripeElement").first();
+  const stripeFrame = stripeElement.frameLocator("iframe").first();
+  await stripeFrame.locator('[name="number"]').fill("4242 4242 4242 4242");
+  const now = new Date();
+  await stripeFrame.locator('[name="expiry"]').fill(`${now.getMonth() + 1} / ${now.getFullYear() + 1}`);
+  await stripeFrame.locator('[name="cvc"]').fill("111");
+  const postcalCodeIsVisible = await stripeFrame.locator('[name="postalCode"]').isVisible();
+  if (postcalCodeIsVisible) {
+    await stripeFrame.locator('[name="postalCode"]').fill("111111");
+  }
+  await page.click('button:has-text("Pay now")');
+}
+
+const installStripePersonal = async (params: InstallStripePersonalPramas) => {
+  const redirectUrl = `apps/installation/event-types?slug=stripe`;
+  const buttonSelector = '[data-testid="install-app-button-personal"]';
+  await installStripe({ redirectUrl, buttonSelector, ...params });
+};
+
+const installStripeTeam = async ({ teamId, ...params }: InstallStripeTeamPramas) => {
+  const redirectUrl = `apps/installation/event-types?slug=stripe&teamId=${teamId}`;
+  const buttonSelector = `[data-testid="install-app-button-team${teamId}"]`;
+  await installStripe({ redirectUrl, buttonSelector, ...params });
+};
+const installStripe = async ({
+  page,
+  skip,
+  eventTypeIds,
+  redirectUrl,
+  buttonSelector,
+}: InstallStripeParams) => {
+  await page.goto("/apps/stripe");
+  /** We start the Stripe flow */
+  await page.click('[data-testid="install-app-button"]');
+  await page.click(buttonSelector);
+
+  await page.waitForURL("https://connect.stripe.com/oauth/v2/authorize?*");
+  /** We skip filling Stripe forms (testing mode only) */
+  await page.click('[id="skip-account-app"]');
+  await page.waitForURL(redirectUrl);
+  if (skip) {
+    await page.click('[data-testid="set-up-later"]');
+    return;
+  }
+  for (const id of eventTypeIds) {
+    await page.click(`[data-testid="select-event-type-${id}"]`);
+  }
+  await page.click(`[data-testid="save-event-types"]`);
+  for (let index = 0; index < eventTypeIds.length; index++) {
+    await page.locator('[data-testid="stripe-price-input"]').nth(index).fill(`1${index}`);
+  }
+  await page.click(`[data-testid="configure-step-save"]`);
+  await page.waitForURL(`event-types`);
+  for (let index = 0; index < eventTypeIds.length; index++) {
+    await page.goto(`event-types/${eventTypeIds[index]}?tabName=apps`);
+    await expect(page.getByTestId(`stripe-app-switch`)).toBeChecked();
+    await expect(page.getByTestId(`stripe-price-input`)).toHaveValue(`1${index}`);
+  }
+};

calcom/apps/web/playwright/fixtures/webhooks.ts

@@ -0,0 +1,39 @@
+import { expect, type Page } from "@playwright/test";
+
+import { createHttpServer } from "../lib/testUtils";
+
+export function createWebhookPageFixture(page: Page) {
+  return {
+    createTeamReceiver: async () => {
+      const webhookReceiver = createHttpServer();
+      await page.goto(`/settings/developer/webhooks`);
+      await page.click('[data-testid="new_webhook"]');
+      await page.click('[data-testid="option-team-1"]');
+      await page.waitForURL((u) => u.pathname === "/settings/developer/webhooks/new");
+      const url = page.url();
+      const teamId = Number(new URL(url).searchParams.get("teamId")) as number;
+      await page.click('[data-testid="new_webhook"]');
+      await page.fill('[name="subscriberUrl"]', webhookReceiver.url);
+      await page.fill('[name="secret"]', "secret");
+      await Promise.all([
+        page.click("[type=submit]"),
+        page.waitForURL((url) => url.pathname.endsWith("/settings/developer/webhooks")),
+      ]);
+      expect(page.locator(`text='${webhookReceiver.url}'`)).toBeDefined();
+      return { webhookReceiver, teamId };
+    },
+    createReceiver: async () => {
+      const webhookReceiver = createHttpServer();
+      await page.goto(`/settings/developer/webhooks`);
+      await page.click('[data-testid="new_webhook"]');
+      await page.fill('[name="subscriberUrl"]', webhookReceiver.url);
+      await page.fill('[name="secret"]', "secret");
+      await Promise.all([
+        page.click("[type=submit]"),
+        page.waitForURL((url) => url.pathname.endsWith("/settings/developer/webhooks")),
+      ]);
+      expect(page.locator(`text='${webhookReceiver.url}'`)).toBeDefined();
+      return webhookReceiver;
+    },
+  };
+}

calcom/apps/web/playwright/fixtures/workflows.ts

@@ -0,0 +1,132 @@
+import type { Locator } from "@playwright/test";
+import { expect, type Page } from "@playwright/test";
+
+import prisma from "@calcom/prisma";
+import { WorkflowTriggerEvents } from "@calcom/prisma/enums";
+
+import { localize } from "../lib/testUtils";
+
+type CreateWorkflowProps = {
+  name?: string;
+  isTeam?: true;
+  trigger?: WorkflowTriggerEvents;
+};
+
+export function createWorkflowPageFixture(page: Page) {
+  const createWorkflow = async (props: CreateWorkflowProps) => {
+    const { name, isTeam, trigger } = props;
+    if (isTeam) {
+      await page.getByTestId("create-button-dropdown").click();
+      await page.getByTestId("option-team-1").click();
+    } else {
+      await page.getByTestId("create-button").click();
+    }
+    if (name) {
+      await fillNameInput(name);
+    }
+    if (trigger) {
+      page.locator("div").filter({ hasText: WorkflowTriggerEvents.BEFORE_EVENT }).nth(1);
+      page.getByText(trigger);
+      await selectEventType("30 min");
+    }
+    await saveWorkflow();
+    await page.getByTestId("go-back-button").click();
+  };
+
+  const saveWorkflow = async () => {
+    await page.getByTestId("save-workflow").click();
+  };
+
+  const assertListCount = async (count: number) => {
+    const workflowListCount = await page.locator('[data-testid="workflow-list"] > li');
+    await expect(workflowListCount).toHaveCount(count);
+  };
+
+  const fillNameInput = async (name: string) => {
+    await page.getByTestId("workflow-name").fill(name);
+  };
+
+  const editSelectedWorkflow = async (name: string) => {
+    const selectedWorkflow = page.getByTestId("workflow-list").getByTestId(nameToTestId(name));
+    const editButton = selectedWorkflow.getByRole("button").nth(0);
+
+    await editButton.click();
+  };
+
+  const hasWorkflowInList = async (name: string, negate?: true) => {
+    const selectedWorkflow = page.getByTestId("workflow-list").getByTestId(nameToTestId(name));
+
+    if (negate) {
+      await expect(selectedWorkflow).toBeHidden();
+    } else {
+      await expect(selectedWorkflow).toBeVisible();
+    }
+  };
+
+  const deleteAndConfirm = async (workflow: Locator) => {
+    const deleteButton = workflow.getByTestId("delete-button");
+    const confirmDeleteText = (await localize("en"))("confirm_delete_workflow");
+
+    await deleteButton.click();
+    await page.getByRole("button", { name: confirmDeleteText }).click();
+  };
+
+  const selectEventType = async (name: string) => {
+    await page.getByTestId("multi-select-check-boxes").click();
+    await page.getByText(name, { exact: true }).click();
+  };
+
+  const hasReadonlyBadge = async () => {
+    const readOnlyBadge = page.getByText((await localize("en"))("readonly"));
+    await expect(readOnlyBadge).toBeVisible();
+  };
+
+  const selectedWorkflowPage = async (name: string) => {
+    await page.getByTestId("workflow-list").getByTestId(nameToTestId(name)).click();
+  };
+
+  const workflowOptionsAreDisabled = async (workflow: string, negate?: boolean) => {
+    const getWorkflowButton = async (buttonTestId: string) =>
+      page.getByTestId(nameToTestId(workflow)).getByTestId(buttonTestId);
+    const [editButton, deleteButton] = await Promise.all([
+      getWorkflowButton("edit-button"),
+      getWorkflowButton("delete-button"),
+    ]);
+
+    expect(editButton.isDisabled()).toBeTruthy();
+    expect(deleteButton.isDisabled()).toBeTruthy();
+  };
+
+  const assertWorkflowReminders = async (eventTypeId: number, count: number) => {
+    const booking = await prisma.booking.findFirst({
+      where: {
+        eventTypeId,
+      },
+    });
+    const workflowReminders = await prisma.workflowReminder.findMany({
+      where: {
+        bookingUid: booking?.uid ?? "",
+      },
+    });
+    expect(workflowReminders).toHaveLength(count);
+  };
+
+  function nameToTestId(name: string) {
+    return `workflow-${name.split(" ").join("-").toLowerCase()}`;
+  }
+
+  return {
+    createWorkflow,
+    saveWorkflow,
+    assertListCount,
+    fillNameInput,
+    editSelectedWorkflow,
+    hasWorkflowInList,
+    deleteAndConfirm,
+    selectEventType,
+    hasReadonlyBadge,
+    selectedWorkflowPage,
+    workflowOptionsAreDisabled,
+    assertWorkflowReminders,
+  };
+}

calcom/apps/web/playwright/hash-my-url.e2e.ts

@@ -0,0 +1,67 @@
+import { expect } from "@playwright/test";
+
+import { test } from "./lib/fixtures";
+import { bookTimeSlot, selectFirstAvailableTimeSlotNextMonth } from "./lib/testUtils";
+
+test.describe.configure({ mode: "parallel" });
+
+// TODO: This test is very flaky. Feels like tossing a coin and hope that it won't fail. Needs to be revisited.
+test.describe("hash my url", () => {
+  test.beforeEach(async ({ users }) => {
+    const user = await users.create();
+    await user.apiLogin();
+  });
+  test.afterEach(async ({ users }) => {
+    await users.deleteAll();
+  });
+  test("generate url hash", async ({ page }) => {
+    await page.goto("/event-types");
+    // We wait until loading is finished
+    await page.waitForSelector('[data-testid="event-types"]');
+    await page.locator("ul[data-testid=event-types] > li a").first().click();
+    // We wait for the page to load
+    await page.locator(".primary-navigation >> text=Advanced").click();
+    // ignore if it is already checked, and click if unchecked
+    const hashedLinkCheck = await page.locator('[data-testid="hashedLinkCheck"]');
+
+    await hashedLinkCheck.click();
+
+    // we wait for the hashedLink setting to load
+    const $url = await page.locator('//*[@data-testid="generated-hash-url"]').inputValue();
+
+    // click update
+    await page.locator('[data-testid="update-eventtype"]').press("Enter");
+
+    await page.waitForLoadState("networkidle");
+
+    // book using generated url hash
+    await page.goto($url);
+    await selectFirstAvailableTimeSlotNextMonth(page);
+    await bookTimeSlot(page);
+    // Make sure we're navigated to the success page
+    await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+
+    // hash regenerates after successful booking
+    await page.goto("/event-types");
+    // We wait until loading is finished
+    await page.waitForSelector('[data-testid="event-types"]');
+    await page.locator("ul[data-testid=event-types] > li a").first().click();
+    // We wait for the page to load
+    await page.locator(".primary-navigation >> text=Advanced").click();
+    // we wait for the hashedLink setting to load
+    const $newUrl = await page.locator('//*[@data-testid="generated-hash-url"]').inputValue();
+    expect($url !== $newUrl).toBeTruthy();
+
+    // Ensure that private URL is enabled after modifying the event type.
+    // Additionally, if the slug is changed, ensure that the private URL is updated accordingly.
+    await page.getByTestId("vertical-tab-event_setup_tab_title").click();
+    await page.locator("[data-testid=event-title]").first().fill("somethingrandom");
+    await page.locator("[data-testid=event-slug]").first().fill("somethingrandom");
+    await page.locator("[data-testid=update-eventtype]").click();
+    await page.getByTestId("toast-success").waitFor();
+    await page.waitForLoadState("networkidle");
+    await page.locator(".primary-navigation >> text=Advanced").click();
+    const $url2 = await page.locator('//*[@data-testid="generated-hash-url"]').inputValue();
+    expect($url2.includes("somethingrandom")).toBeTruthy();
+  });
+});

calcom/apps/web/playwright/impersonation.e2e.ts

@@ -0,0 +1,51 @@
+import { expect } from "@playwright/test";
+
+import { test } from "./lib/fixtures";
+
+test.describe.configure({ mode: "parallel" });
+
+test.describe("Users can impersonate", async () => {
+  test.afterAll(async ({ users }) => {
+    await users.deleteAll();
+  });
+  test("App Admin can impersonate users with impersonation enabled", async ({ page, users }) => {
+    // log in trail user
+    const user = await users.create({
+      role: "ADMIN",
+      password: "ADMINadmin2022!",
+    });
+
+    const userToImpersonate = await users.create({ disableImpersonation: false });
+
+    await user.apiLogin();
+    await page.waitForLoadState();
+
+    await page.goto("/settings/admin/impersonation");
+    await page.waitForLoadState();
+    const adminInput = page.getByTestId("admin-impersonation-input");
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore the username does exist
+    await adminInput.fill(userToImpersonate.username);
+    await page.getByTestId("impersonation-submit").click();
+
+    // // Wait for sign in to complete
+    await page.waitForURL("/event-types");
+    await page.goto("/settings/profile");
+
+    const stopImpersonatingButton = page.getByTestId("stop-impersonating-button");
+
+    const impersonatedUsernameInput = page.locator("input[name='username']");
+    const impersonatedUser = await impersonatedUsernameInput.inputValue();
+
+    await expect(stopImpersonatingButton).toBeVisible();
+    await expect(impersonatedUser).toBe(userToImpersonate.username);
+
+    await stopImpersonatingButton.click();
+
+    await page.waitForLoadState("networkidle");
+    // Return to user
+    const ogUser = await impersonatedUsernameInput.inputValue();
+
+    expect(ogUser).toBe(user.username);
+  });
+});

calcom/apps/web/playwright/insights.e2e.ts

@@ -0,0 +1,269 @@
+import { expect } from "@playwright/test";
+
+import { randomString } from "@calcom/lib/random";
+import prisma from "@calcom/prisma";
+
+import { test } from "./lib/fixtures";
+
+test.describe.configure({ mode: "parallel" });
+
+const createTeamsAndMembership = async (userIdOne: number, userIdTwo: number) => {
+  const teamOne = await prisma.team.create({
+    data: {
+      name: "test-insights",
+      slug: `test-insights-${Date.now()}-${randomString(5)}}`,
+    },
+  });
+
+  const teamTwo = await prisma.team.create({
+    data: {
+      name: "test-insights-2",
+      slug: `test-insights-2-${Date.now()}-${randomString(5)}}`,
+    },
+  });
+  if (!userIdOne || !userIdTwo || !teamOne || !teamTwo) {
+    throw new Error("Failed to create test data");
+  }
+
+  // create memberships
+  await prisma.membership.create({
+    data: {
+      userId: userIdOne,
+      teamId: teamOne.id,
+      accepted: true,
+      role: "ADMIN",
+    },
+  });
+  await prisma.membership.create({
+    data: {
+      teamId: teamTwo.id,
+      userId: userIdOne,
+      accepted: true,
+      role: "ADMIN",
+    },
+  });
+  await prisma.membership.create({
+    data: {
+      teamId: teamOne.id,
+      userId: userIdTwo,
+      accepted: true,
+      role: "MEMBER",
+    },
+  });
+  await prisma.membership.create({
+    data: {
+      teamId: teamTwo.id,
+      userId: userIdTwo,
+      accepted: true,
+      role: "MEMBER",
+    },
+  });
+  return { teamOne, teamTwo };
+};
+
+test.afterAll(async ({ users }) => {
+  await users.deleteAll();
+});
+
+test.describe("Insights", async () => {
+  test("should be able to go to insights as admins", async ({ page, users }) => {
+    const user = await users.create();
+    const userTwo = await users.create();
+    await createTeamsAndMembership(user.id, userTwo.id);
+
+    await user.apiLogin();
+
+    // go to insights page
+    await page.goto("/insights");
+    await page.waitForLoadState("networkidle");
+
+    // expect url to have isAll and TeamId in query params
+    expect(page.url()).toContain("isAll=false");
+    expect(page.url()).toContain("teamId=");
+  });
+
+  test("should be able to go to insights as members", async ({ page, users }) => {
+    const user = await users.create();
+    const userTwo = await users.create();
+
+    await userTwo.apiLogin();
+
+    await createTeamsAndMembership(user.id, userTwo.id);
+    // go to insights page
+    await page.goto("/insights");
+
+    await page.waitForLoadState("networkidle");
+
+    // expect url to have isAll and TeamId in query params
+
+    expect(page.url()).toContain("isAll=false");
+    expect(page.url()).not.toContain("teamId=");
+  });
+
+  test("team select filter should have 2 teams and your account option only as member", async ({
+    page,
+    users,
+  }) => {
+    const user = await users.create();
+    const userTwo = await users.create();
+
+    await user.apiLogin();
+
+    await createTeamsAndMembership(user.id, userTwo.id);
+    // go to insights page
+    await page.goto("/insights");
+
+    await page.waitForLoadState("networkidle");
+
+    // get div from team select filter with this class flex flex-col gap-0.5 [&>*:first-child]:mt-1 [&>*:last-child]:mb-1
+    await page.getByTestId("dashboard-shell").getByText("Team: test-insights").click();
+    await page
+      .locator('div[class="flex flex-col gap-0.5 [&>*:first-child]:mt-1 [&>*:last-child]:mb-1"]')
+      .click();
+    const teamSelectFilter = await page.locator(
+      'div[class="hover:bg-muted flex items-center py-2 pl-3 pr-2.5 hover:cursor-pointer"]'
+    );
+
+    await expect(teamSelectFilter).toHaveCount(3);
+  });
+
+  test("Insights Organization should have isAll option true", async ({ users, page }) => {
+    const owner = await users.create(undefined, {
+      hasTeam: true,
+      isUnpublished: true,
+      isOrg: true,
+      hasSubteam: true,
+    });
+    await owner.apiLogin();
+
+    await page.goto("/insights");
+    await page.waitForLoadState("networkidle");
+
+    await page.getByTestId("dashboard-shell").getByText("All").nth(1).click();
+
+    const teamSelectFilter = await page.locator(
+      'div[class="hover:bg-muted flex items-center py-2 pl-3 pr-2.5 hover:cursor-pointer"]'
+    );
+
+    await expect(teamSelectFilter).toHaveCount(4);
+  });
+
+  test("should have all option in team-and-self filter as admin", async ({ page, users }) => {
+    const owner = await users.create();
+    const member = await users.create();
+
+    await createTeamsAndMembership(owner.id, member.id);
+
+    await owner.apiLogin();
+
+    await page.goto("/insights");
+
+    // get div from team select filter with this class flex flex-col gap-0.5 [&>*:first-child]:mt-1 [&>*:last-child]:mb-1
+    await page.getByTestId("dashboard-shell").getByText("Team: test-insights").click();
+    await page
+      .locator('div[class="flex flex-col gap-0.5 [&>*:first-child]:mt-1 [&>*:last-child]:mb-1"]')
+      .click();
+    const teamSelectFilter = await page.locator(
+      'div[class="hover:bg-muted flex items-center py-2 pl-3 pr-2.5 hover:cursor-pointer"]'
+    );
+
+    await expect(teamSelectFilter).toHaveCount(3);
+  });
+
+  test("should be able to switch between teams and self profile for insights", async ({ page, users }) => {
+    const owner = await users.create();
+    const member = await users.create();
+
+    await createTeamsAndMembership(owner.id, member.id);
+
+    await owner.apiLogin();
+
+    await page.goto("/insights");
+
+    // get div from team select filter with this class flex flex-col gap-0.5 [&>*:first-child]:mt-1 [&>*:last-child]:mb-1
+    await page.getByTestId("dashboard-shell").getByText("Team: test-insights").click();
+    await page
+      .locator('div[class="flex flex-col gap-0.5 [&>*:first-child]:mt-1 [&>*:last-child]:mb-1"]')
+      .click();
+    const teamSelectFilter = await page.locator(
+      'div[class="hover:bg-muted flex items-center py-2 pl-3 pr-2.5 hover:cursor-pointer"]'
+    );
+
+    await expect(teamSelectFilter).toHaveCount(3);
+
+    // switch to self profile
+    await page.getByTestId("dashboard-shell").getByText("Your Account").click();
+
+    // switch to team 1
+    await page.getByTestId("dashboard-shell").getByText("test-insights").nth(0).click();
+
+    // switch to team 2
+    await page.getByTestId("dashboard-shell").getByText("test-insights-2").click();
+  });
+
+  test("should be able to switch between memberUsers", async ({ page, users }) => {
+    const owner = await users.create();
+    const member = await users.create();
+
+    await createTeamsAndMembership(owner.id, member.id);
+
+    await owner.apiLogin();
+
+    await page.goto("/insights");
+
+    await page.getByText("Add filter").click();
+
+    await page.getByRole("button", { name: "User" }).click();
+    // <div class="flex select-none truncate font-medium" data-state="closed">People</div>
+    await page.locator('div[class="flex select-none truncate font-medium"]').getByText("People").click();
+
+    await page
+      .locator('div[class="hover:bg-muted flex items-center py-2 pl-3 pr-2.5 hover:cursor-pointer"]')
+      .nth(0)
+      .click();
+    await page.waitForLoadState("networkidle");
+
+    await page
+      .locator('div[class="hover:bg-muted flex items-center py-2 pl-3 pr-2.5 hover:cursor-pointer"]')
+      .nth(1)
+      .click();
+    await page.waitForLoadState("networkidle");
+    // press escape button to close the filter
+    await page.keyboard.press("Escape");
+
+    await page.getByRole("button", { name: "Clear" }).click();
+
+    // expect for "Team: test-insight" text in page
+    expect(await page.locator("text=Team: test-insights").isVisible()).toBeTruthy();
+  });
+
+  test("should test download button", async ({ page, users }) => {
+    const owner = await users.create();
+    const member = await users.create();
+
+    await createTeamsAndMembership(owner.id, member.id);
+
+    await owner.apiLogin();
+
+    await page.goto("/insights");
+    await page.waitForLoadState("networkidle");
+
+    const downloadPromise = page.waitForEvent("download");
+
+    // Expect download button to be visible
+    expect(await page.locator("text=Download").isVisible()).toBeTruthy();
+
+    // Click on Download button
+    await page.getByText("Download").click();
+
+    // Expect as csv option to be visible
+    expect(await page.locator("text=as CSV").isVisible()).toBeTruthy();
+
+    // Start waiting for download before clicking. Note no await.
+    await page.getByText("as CSV").click();
+    const download = await downloadPromise;
+
+    // Wait for the download process to complete and save the downloaded file somewhere.
+    await download.saveAs("./" + "test-insights.csv");
+  });
+});

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

@@ -0,0 +1,509 @@
+import { expect } from "@playwright/test";
+import type Prisma from "@prisma/client";
+
+import prisma from "@calcom/prisma";
+import { SchedulingType } from "@calcom/prisma/enums";
+import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+
+import { test } from "./lib/fixtures";
+import type { Fixtures } from "./lib/fixtures";
+import { todo, selectFirstAvailableTimeSlotNextMonth } from "./lib/testUtils";
+
+test.describe.configure({ mode: "parallel" });
+test.afterEach(({ users }) => users.deleteAll());
+
+const IS_STRIPE_ENABLED = !!(
+  process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY &&
+  process.env.STRIPE_CLIENT_ID &&
+  process.env.STRIPE_PRIVATE_KEY &&
+  process.env.PAYMENT_FEE_FIXED &&
+  process.env.PAYMENT_FEE_PERCENTAGE
+);
+
+test.describe("Stripe integration skip true", () => {
+  // eslint-disable-next-line playwright/no-skipped-test
+  test.skip(!IS_STRIPE_ENABLED, "It should only run if Stripe is installed");
+
+  test.describe("Stripe integration dashboard", () => {
+    test("Can add Stripe integration", async ({ page, users }) => {
+      const user = await users.create();
+      await user.apiLogin();
+
+      await user.installStripePersonal({ skip: true });
+
+      await expect(page.locator(`h3:has-text("Stripe")`)).toBeVisible();
+      await page.getByRole("list").getByRole("button").click();
+      await expect(page.getByRole("button", { name: "Remove App" })).toBeVisible();
+    });
+  });
+  test("when enabling Stripe, credentialId is included", async ({ page, users }) => {
+    const user = await users.create();
+    await user.apiLogin();
+    await page.goto("/apps/installed");
+
+    await user.installStripePersonal({ skip: true });
+
+    const eventType = user.eventTypes.find((e) => e.slug === "paid") as Prisma.EventType;
+    await user.setupEventWithPrice(eventType, "stripe");
+
+    // Need to wait for the DB to be updated with the metadata
+    await page.waitForResponse((res) => res.url().includes("update") && res.status() === 200);
+
+    // Check event type metadata to see if credentialId is included
+    const eventTypeMetadata = await prisma.eventType.findFirst({
+      where: {
+        id: eventType.id,
+      },
+      select: {
+        metadata: true,
+      },
+    });
+
+    const metadata = EventTypeMetaDataSchema.parse(eventTypeMetadata?.metadata);
+
+    const stripeAppMetadata = metadata?.apps?.stripe;
+
+    expect(stripeAppMetadata).toHaveProperty("credentialId");
+    expect(typeof stripeAppMetadata?.credentialId).toBe("number");
+  });
+  test("when enabling Stripe, team credentialId is included", async ({ page, users }) => {
+    const ownerObj = { username: "pro-user", name: "pro-user" };
+    const teamMatesObj = [
+      { name: "teammate-1" },
+      { name: "teammate-2" },
+      { name: "teammate-3" },
+      { name: "teammate-4" },
+    ];
+
+    const owner = await users.create(ownerObj, {
+      hasTeam: true,
+      teammates: teamMatesObj,
+      schedulingType: SchedulingType.COLLECTIVE,
+    });
+    await owner.apiLogin();
+    const { team } = await owner.getFirstTeamMembership();
+
+    const teamEvent = await owner.getFirstTeamEvent(team.id);
+
+    await owner.installStripeTeam({ skip: true, teamId: team.id });
+    await owner.setupEventWithPrice(teamEvent, "stripe");
+
+    // Need to wait for the DB to be updated with the metadata
+    await page.waitForResponse((res) => res.url().includes("update") && res.status() === 200);
+
+    // Check event type metadata to see if credentialId is included
+    const eventTypeMetadata = await prisma.eventType.findFirst({
+      where: {
+        id: teamEvent.id,
+      },
+      select: {
+        metadata: true,
+      },
+    });
+
+    const metadata = EventTypeMetaDataSchema.parse(eventTypeMetadata?.metadata);
+
+    const stripeAppMetadata = metadata?.apps?.stripe;
+
+    expect(stripeAppMetadata).toHaveProperty("credentialId");
+    expect(typeof stripeAppMetadata?.credentialId).toBe("number");
+  });
+  test("Can book a paid booking", 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.installStripePersonal({ skip: true });
+    await user.setupEventWithPrice(eventType, "stripe");
+    await user.bookAndPayEvent(eventType);
+    // success
+    await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+  });
+
+  test("Pending payment booking should not be confirmed by default", 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.installStripePersonal({ skip: true });
+    await user.setupEventWithPrice(eventType, "stripe");
+
+    // booking process without payment
+    await page.goto(`${user.username}/${eventType?.slug}`);
+    await selectFirstAvailableTimeSlotNextMonth(page);
+    // --- fill form
+    await page.fill('[name="name"]', "Stripe Stripeson");
+    await page.fill('[name="email"]', "test@example.com");
+
+    await Promise.all([page.waitForURL("/payment/*"), page.press('[name="email"]', "Enter")]);
+
+    await page.goto(`/bookings/upcoming`);
+
+    await expect(page.getByText("Unconfirmed")).toBeVisible();
+    await expect(page.getByText("Pending payment").last()).toBeVisible();
+  });
+
+  test("Paid booking should be able to be rescheduled", 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.installStripePersonal({ skip: true });
+    await user.setupEventWithPrice(eventType, "stripe");
+    await user.bookAndPayEvent(eventType);
+
+    // Rescheduling the event
+    await Promise.all([page.waitForURL("/booking/*"), page.click('[data-testid="reschedule-link"]')]);
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+
+    await Promise.all([
+      page.waitForURL("/payment/*"),
+      page.click('[data-testid="confirm-reschedule-button"]'),
+    ]);
+
+    await user.makePaymentUsingStripe();
+  });
+
+  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.installStripePersonal({ skip: true });
+    await user.setupEventWithPrice(eventType, "stripe");
+    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.installStripePersonal({ skip: true });
+      await user.setupEventWithPrice(eventType, "stripe");
+      await user.bookAndPayEvent(eventType);
+      await user.confirmPendingPayment();
+    });
+
+    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");
+    });
+
+    test("Paid and confirmed booking should be able to be rescheduled", async ({ page, users }) => {
+      await Promise.all([page.waitForURL("/booking/*"), page.click('[data-testid="reschedule-link"]')]);
+
+      await selectFirstAvailableTimeSlotNextMonth(page);
+
+      await page.click('[data-testid="confirm-reschedule-button"]');
+
+      await expect(page.getByText("This meeting is scheduled")).toBeVisible();
+    });
+
+    todo("Payment should trigger a BOOKING_PAID webhook");
+  });
+
+  test.describe("Change stripe presented currency", () => {
+    test("Should be able to change currency", async ({ page, users }) => {
+      const user = await users.create();
+      const eventType = user.eventTypes.find((e) => e.slug === "paid") as Prisma.EventType;
+      await user.apiLogin();
+
+      await user.installStripePersonal({ skip: true });
+
+      // Edit currency inside event type page
+      await page.goto(`/event-types/${eventType?.id}?tabName=apps`);
+
+      // Enable Stripe
+      await page.locator("#event-type-form").getByRole("switch").click();
+
+      // Set price
+      await page.getByTestId("stripe-price-input").fill("200");
+
+      // Select currency in dropdown
+      await page.getByTestId("stripe-currency-select").click();
+      await page.locator("#react-select-2-input").fill("mexi");
+      await page.locator("#react-select-2-option-81").click();
+
+      await page.getByTestId("update-eventtype").click();
+
+      // Book event
+      await page.goto(`${user.username}/${eventType?.slug}`);
+
+      // Confirm MXN currency it's displayed use expect
+      await expect(await page.getByText("MX$200.00")).toBeVisible();
+
+      await selectFirstAvailableTimeSlotNextMonth(page);
+
+      // Confirm again in book form page
+      await expect(await page.getByText("MX$200.00")).toBeVisible();
+
+      // --- fill form
+      await page.fill('[name="name"]', "Stripe Stripeson");
+      await page.fill('[name="email"]', "stripe@example.com");
+
+      // Confirm booking
+      await page.click('[data-testid="confirm-book-button"]');
+
+      // wait for url to be payment
+      await page.waitForURL("/payment/*");
+
+      // Confirm again in book form page
+      await expect(await page.getByText("MX$200.00")).toBeVisible();
+    });
+  });
+});
+
+test.describe("Stripe integration with the new app install flow skip flase", () => {
+  // eslint-disable-next-line playwright/no-skipped-test
+  test.skip(!IS_STRIPE_ENABLED, "It should only run if Stripe is installed");
+
+  test("when enabling Stripe, credentialId is included skip false", async ({ page, users }) => {
+    const user = await users.create();
+    await user.apiLogin();
+    await page.goto("/apps/installed");
+    const eventTypes = await user.getUserEventsAsOwner();
+    const eventTypeIds = eventTypes.map((item) => item.id);
+
+    // await installStripe(page, "personal", false, eventTypeIds);
+    await user.installStripePersonal({ skip: false, eventTypeIds });
+
+    const eventTypeMetadatas = await prisma.eventType.findMany({
+      where: {
+        id: {
+          in: eventTypeIds,
+        },
+      },
+      select: {
+        metadata: true,
+      },
+    });
+
+    for (const eventTypeMetadata of eventTypeMetadatas) {
+      const metadata = EventTypeMetaDataSchema.parse(eventTypeMetadata?.metadata);
+      const stripeAppMetadata = metadata?.apps?.stripe;
+      expect(stripeAppMetadata).toHaveProperty("credentialId");
+      expect(typeof stripeAppMetadata?.credentialId).toBe("number");
+    }
+  });
+  test("when enabling Stripe, team credentialId is included skip false", async ({ page, users }) => {
+    const ownerObj = { username: "pro-user", name: "pro-user" };
+    const teamMatesObj = [
+      { name: "teammate-1" },
+      { name: "teammate-2" },
+      { name: "teammate-3" },
+      { name: "teammate-4" },
+    ];
+
+    const owner = await users.create(ownerObj, {
+      hasTeam: true,
+      teammates: teamMatesObj,
+      schedulingType: SchedulingType.COLLECTIVE,
+    });
+    await owner.apiLogin();
+    const { team } = await owner.getFirstTeamMembership();
+
+    const teamEvent = await owner.getFirstTeamEvent(team.id);
+
+    await owner.installStripeTeam({ skip: false, teamId: team.id, eventTypeIds: [teamEvent.id] });
+
+    // Check event type metadata to see if credentialId is included
+    const eventTypeMetadata = await prisma.eventType.findFirst({
+      where: {
+        id: teamEvent.id,
+      },
+      select: {
+        metadata: true,
+      },
+    });
+
+    const metadata = EventTypeMetaDataSchema.parse(eventTypeMetadata?.metadata);
+
+    const stripeAppMetadata = metadata?.apps?.stripe;
+
+    expect(stripeAppMetadata).toHaveProperty("credentialId");
+    expect(typeof stripeAppMetadata?.credentialId).toBe("number");
+  });
+  test("Can book a paid booking skip false", 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.installStripePersonal({ skip: false, eventTypeIds: [eventType.id] });
+    await user.bookAndPayEvent(eventType);
+    // success
+    await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+  });
+  test("Pending payment booking should not be confirmed by default skip false", 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.installStripePersonal({ skip: false, eventTypeIds: [eventType.id] });
+
+    // booking process without payment
+    await page.goto(`${user.username}/${eventType?.slug}`);
+    await selectFirstAvailableTimeSlotNextMonth(page);
+    // --- fill form
+    await page.fill('[name="name"]', "Stripe Stripeson");
+    await page.fill('[name="email"]', "test@example.com");
+
+    await Promise.all([page.waitForURL("/payment/*"), page.press('[name="email"]', "Enter")]);
+
+    await page.goto(`/bookings/upcoming`);
+
+    await expect(page.getByText("Unconfirmed")).toBeVisible();
+    await expect(page.getByText("Pending payment").last()).toBeVisible();
+  });
+
+  test("Paid booking should be able to be rescheduled skip false", 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.installStripePersonal({ skip: false, eventTypeIds: [eventType.id] });
+    await user.bookAndPayEvent(eventType);
+
+    // Rescheduling the event
+    await Promise.all([page.waitForURL("/booking/*"), page.click('[data-testid="reschedule-link"]')]);
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+
+    await Promise.all([
+      page.waitForURL("/payment/*"),
+      page.click('[data-testid="confirm-reschedule-button"]'),
+    ]);
+
+    await user.makePaymentUsingStripe();
+  });
+
+  test("Paid booking should be able to be cancelled skip false", 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.installStripePersonal({ skip: false, eventTypeIds: [eventType.id] });
+    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 skip false", () => {
+    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.installStripePersonal({ skip: false, eventTypeIds: [eventType.id] });
+      await user.bookAndPayEvent(eventType);
+      await user.confirmPendingPayment();
+    });
+
+    test("Payment should confirm pending payment booking skip false", 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");
+    });
+
+    test("Paid and confirmed booking should be able to be rescheduled skip false", async ({
+      page,
+      users,
+    }) => {
+      await Promise.all([page.waitForURL("/booking/*"), page.click('[data-testid="reschedule-link"]')]);
+
+      await selectFirstAvailableTimeSlotNextMonth(page);
+
+      await page.click('[data-testid="confirm-reschedule-button"]');
+
+      await expect(page.getByText("This meeting is scheduled")).toBeVisible();
+    });
+
+    todo("Payment should trigger a BOOKING_PAID webhook");
+  });
+
+  test.describe("Change stripe presented currency skip false", () => {
+    test("Should be able to change currency skip false", 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/stripe");
+      /** We start the Stripe flow */
+      await page.click('[data-testid="install-app-button"]');
+      await page.click('[data-testid="install-app-button-personal"]');
+
+      await page.waitForURL("https://connect.stripe.com/oauth/v2/authorize?*");
+      /** We skip filling Stripe forms (testing mode only) */
+      await page.click('[id="skip-account-app"]');
+      await page.waitForURL(`apps/installation/event-types?slug=stripe`);
+      await page.click(`[data-testid="select-event-type-${eventType.id}"]`);
+      await page.click(`[data-testid="save-event-types"]`);
+      await page.locator('[data-testid="stripe-price-input"]').fill(`200`);
+
+      // Select currency in dropdown
+      await page.getByTestId("stripe-currency-select").click();
+      await page.locator("#react-select-2-input").fill("mexi");
+      await page.locator("#react-select-2-option-81").click();
+
+      await page.click(`[data-testid="configure-step-save"]`);
+      await page.waitForURL(`event-types`);
+
+      // Book event
+      await page.goto(`${user.username}/${eventType?.slug}`);
+
+      // Confirm MXN currency it's displayed use expect
+      await expect(await page.getByText("MX$200.00")).toBeVisible();
+
+      await selectFirstAvailableTimeSlotNextMonth(page);
+
+      // Confirm again in book form page
+      await expect(await page.getByText("MX$200.00")).toBeVisible();
+
+      // --- fill form
+      await page.fill('[name="name"]', "Stripe Stripeson");
+      await page.fill('[name="email"]', "stripe@example.com");
+
+      // Confirm booking
+      await page.click('[data-testid="confirm-book-button"]');
+
+      // wait for url to be payment
+      await page.waitForURL("/payment/*");
+
+      // Confirm again in book form page
+      await expect(await page.getByText("MX$200.00")).toBeVisible();
+    });
+  });
+});

calcom/apps/web/playwright/integrations.e2e.ts

@@ -0,0 +1,356 @@
+import type { Page, Route } from "@playwright/test";
+import { expect } from "@playwright/test";
+import type { DefaultBodyType } from "msw";
+import { rest } from "msw";
+import { setupServer } from "msw/node";
+import { v4 as uuidv4 } from "uuid";
+
+import { prisma } from "@calcom/prisma";
+
+import { test } from "./lib/fixtures";
+import { todo } from "./lib/testUtils";
+
+declare let global: {
+  E2E_EMAILS?: ({ text: string } | Record<string, unknown>)[];
+};
+
+const requestInterceptor = setupServer(
+  rest.post("https://api.hubapi.com/oauth/v1/token", (req, res, ctx) => {
+    console.log(req.body);
+    return res(ctx.status(200));
+  })
+);
+
+const addOauthBasedIntegration = async function ({
+  page,
+  slug,
+  authorization,
+  token,
+}: {
+  page: Page;
+  slug: string;
+  authorization: {
+    url: string;
+    verify: (config: {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      requestHeaders: any;
+      params: URLSearchParams;
+      code: string;
+    }) => Parameters<Route["fulfill"]>[0];
+  };
+  token: {
+    url: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    verify: (config: { requestHeaders: any; params: URLSearchParams; code: string }) => {
+      status: number;
+      body: DefaultBodyType;
+    };
+  };
+}) {
+  const code = uuidv4();
+  // Note the difference b/w MSW wildcard and Playwright wildards. Playwright requires query params to be explicitly specified.
+  page.route(`${authorization.url}?**`, (route, request) => {
+    const u = new URL(request.url());
+    const result = authorization.verify({
+      requestHeaders: request.allHeaders(),
+      params: u.searchParams,
+      code,
+    });
+
+    return route.fulfill(result);
+  });
+  requestInterceptor.use(
+    rest.post(token.url, (req, res, ctx) => {
+      const params = new URLSearchParams(req.body as string);
+      const result = token.verify({ requestHeaders: req.headers, params, code });
+
+      return res(ctx.status(result.status), ctx.json(result.body));
+    })
+  );
+
+  await page.goto(`/apps/${slug}`);
+  await page.click('[data-testid="install-app-button"]');
+};
+
+const addLocationIntegrationToFirstEvent = async function ({ user }: { user: { username: string | null } }) {
+  const eventType = await prisma.eventType.findFirst({
+    where: {
+      users: {
+        some: {
+          username: user.username,
+        },
+      },
+      price: 0,
+    },
+  });
+
+  if (!eventType) {
+    throw new Error("Event type not found");
+  }
+  await prisma.eventType.update({
+    where: {
+      id: eventType.id,
+    },
+    data: {
+      locations: [{ type: "integrations:zoom" }],
+    },
+  });
+  return eventType;
+};
+
+async function bookEvent(page: Page, calLink: string) {
+  // Let current month dates fully render.
+  // There is a bug where if we don't let current month fully render and quickly click go to next month, current month get's rendered
+  // This doesn't seem to be replicable with the speed of a person, only during automation.
+  // It would also allow correct snapshot to be taken for current month.
+  // eslint-disable-next-line playwright/no-wait-for-timeout
+  await page.waitForTimeout(1000);
+  await page.goto(`/${calLink}`);
+
+  await page.locator('[data-testid="day"][data-disabled="false"]').nth(0).click();
+  page.locator('[data-testid="time"]').nth(0).click();
+  await page.waitForNavigation({
+    url(url) {
+      return url.pathname.includes("/book");
+    },
+  });
+  const meetingId = 123456789;
+
+  requestInterceptor.use(
+    rest.post("https://api.zoom.us/v2/users/me/meetings", (req, res, ctx) => {
+      return res(
+        ctx.status(200),
+        ctx.json({
+          id: meetingId,
+          password: "TestPass",
+          join_url: `https://zoom.us/j/${meetingId}`,
+        })
+      );
+    })
+  );
+  // --- fill form
+  await page.fill('[name="name"]', "Integration User");
+  await page.fill('[name="email"]', "integration-user@example.com");
+  await page.press('[name="email"]', "Enter");
+  const response = await page.waitForResponse("**/api/book/event");
+  const responseObj = await response.json();
+  const bookingId = responseObj.uid;
+  await page.waitForSelector("[data-testid=success-page]");
+  // Make sure we're navigated to the success page
+  await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+  expect(global.E2E_EMAILS?.length).toBe(2);
+  expect(
+    global.E2E_EMAILS?.every((email) => (email.text as string).includes(`https://zoom.us/j/${meetingId}`))
+  ).toBe(true);
+  return bookingId;
+}
+
+test.describe.configure({ mode: "parallel" });
+
+// Enable API mocking before tests.
+test.beforeAll(() =>
+  requestInterceptor.listen({
+    // Comment this to log which all requests are going that are unmocked
+    onUnhandledRequest: "bypass",
+  })
+);
+
+// Reset any runtime request handlers we may add during the tests.
+test.afterEach(() => requestInterceptor.resetHandlers());
+
+// Disable API mocking after the tests are done.
+test.afterAll(() => requestInterceptor.close());
+test.afterEach(({ users }) => users.deleteAll());
+
+// TODO: Fix MSW mocking
+test.fixme("Integrations", () => {
+  test.beforeEach(() => {
+    global.E2E_EMAILS = [];
+  });
+  const addZoomIntegration = async function ({ page }: { page: Page }) {
+    await addOauthBasedIntegration({
+      page,
+      slug: "zoom",
+      authorization: {
+        url: "https://zoom.us/oauth/authorize",
+        verify({ params, code }) {
+          expect(params.get("redirect_uri")).toBeTruthy();
+          return {
+            status: 307,
+            headers: {
+              location: `${params.get("redirect_uri")}?code=${code}`,
+            },
+          };
+        },
+      },
+      token: {
+        url: "https://zoom.us/oauth/token",
+        verify({ requestHeaders }) {
+          const authorization = requestHeaders.get("authorization").replace("Basic ", "");
+          const clientPair = Buffer.from(authorization, "base64").toString();
+          const [clientId, clientSecret] = clientPair.split(":");
+          // Ensure that zoom credentials are passed.
+          // TODO: We should also ensure that these credentials are correct e.g. in this case should be READ from DB
+          expect(clientId).toBeTruthy();
+          expect(clientSecret).toBeTruthy();
+
+          return {
+            status: 200,
+            body: {
+              access_token:
+                "eyJhbGciOiJIUzUxMiIsInYiOiIyLjAiLCJraWQiOiI8S0lEPiJ9.eyJ2ZXIiOiI2IiwiY2xpZW50SWQiOiI8Q2xpZW50X0lEPiIsImNvZGUiOiI8Q29kZT4iLCJpc3MiOiJ1cm46em9vbTpjb25uZWN0OmNsaWVudGlkOjxDbGllbnRfSUQ-IiwiYXV0aGVudGljYXRpb25JZCI6IjxBdXRoZW50aWNhdGlvbl9JRD4iLCJ1c2VySWQiOiI8VXNlcl9JRD4iLCJncm91cE51bWJlciI6MCwiYXVkIjoiaHR0cHM6Ly9vYXV0aC56b29tLnVzIiwiYWNjb3VudElkIjoiPEFjY291bnRfSUQ-IiwibmJmIjoxNTgwMTQ2OTkzLCJleHAiOjE1ODAxNTA1OTMsInRva2VuVHlwZSI6ImFjY2Vzc190b2tlbiIsImlhdCI6MTU4MDE0Njk5MywianRpIjoiPEpUST4iLCJ0b2xlcmFuY2VJZCI6MjV9.F9o_w7_lde4Jlmk_yspIlDc-6QGmVrCbe_6El-xrZehnMx7qyoZPUzyuNAKUKcHfbdZa6Q4QBSvpd6eIFXvjHw",
+              token_type: "bearer",
+              refresh_token:
+                "eyJhbGciOiJIUzUxMiIsInYiOiIyLjAiLCJraWQiOiI8S0lEPiJ9.eyJ2ZXIiOiI2IiwiY2xpZW50SWQiOiI8Q2xpZW50X0lEPiIsImNvZGUiOiI8Q29kZT4iLCJpc3MiOiJ1cm46em9vbTpjb25uZWN0OmNsaWVudGlkOjxDbGllbnRfSUQ-IiwiYXV0aGVudGljYXRpb25JZCI6IjxBdXRoZW50aWNhdGlvbl9JRD4iLCJ1c2VySWQiOiI8VXNlcl9JRD4iLCJncm91cE51bWJlciI6MCwiYXVkIjoiaHR0cHM6Ly9vYXV0aC56b29tLnVzIiwiYWNjb3VudElkIjoiPEFjY291bnRfSUQ-IiwibmJmIjoxNTgwMTQ2OTkzLCJleHAiOjIwNTMxODY5OTMsInRva2VuVHlwZSI6InJlZnJlc2hfdG9rZW4iLCJpYXQiOjE1ODAxNDY5OTMsImp0aSI6IjxKVEk-IiwidG9sZXJhbmNlSWQiOjI1fQ.Xcn_1i_tE6n-wy6_-3JZArIEbiP4AS3paSD0hzb0OZwvYSf-iebQBr0Nucupe57HUDB5NfR9VuyvQ3b74qZAfA",
+              expires_in: 3599,
+              // Without this permission, meeting can't be created.
+              scope: "meeting:write",
+            },
+          };
+        },
+      },
+    });
+  };
+  test.describe("Zoom App", () => {
+    test("Can add integration", async ({ page, users }) => {
+      const user = await users.create();
+      await user.apiLogin();
+      await addZoomIntegration({ page });
+      await page.waitForNavigation({
+        url: (url) => {
+          return url.pathname === "/apps/installed";
+        },
+      });
+      //TODO: Check that disconnect button is now visible
+    });
+
+    test("can choose zoom as a location during booking", async ({ page, users }) => {
+      const user = await users.create();
+      await user.apiLogin();
+      const eventType = await addLocationIntegrationToFirstEvent({ user });
+      await addZoomIntegration({ page });
+      await page.waitForNavigation({
+        url: (url) => {
+          return url.pathname === "/apps/installed";
+        },
+      });
+
+      await bookEvent(page, `${user.username}/${eventType.slug}`);
+      // Ensure that zoom was informed about the meeting
+      // Verify that email had zoom link
+      // POST https://api.zoom.us/v2/users/me/meetings
+      // Verify       Header->  Authorization: "Bearer " + accessToken,
+      /**
+       * {
+      topic: event.title,
+      type: 2, // Means that this is a scheduled meeting
+      start_time: event.startTime,
+      duration: (new Date(event.endTime).getTime() - new Date(event.startTime).getTime()) / 60000,
+      //schedule_for: "string",   TODO: Used when scheduling the meeting for someone else (needed?)
+      timezone: event.attendees[0].timeZone,
+      //password: "string",       TODO: Should we use a password? Maybe generate a random one?
+      agenda: event.description,
+      settings: {
+        host_video: true,
+        participant_video: true,
+        cn_meeting: false, // TODO: true if host meeting in China
+        in_meeting: false, // TODO: true if host meeting in India
+        join_before_host: true,
+        mute_upon_entry: false,
+        watermark: false,
+        use_pmi: false,
+        approval_type: 2,
+        audio: "both",
+        auto_recording: "none",
+        enforce_apiLogin: false,
+        registrants_email_notification: true,
+      },
+    };
+       */
+    });
+    test("Can disconnect from integration", async ({ page, users }) => {
+      const user = await users.create();
+      await user.apiLogin();
+      await addZoomIntegration({ page });
+      await page.waitForNavigation({
+        url: (url) => {
+          return url.pathname === "/apps/installed";
+        },
+      });
+
+      // FIXME: First time reaching /apps/installed throws error in UI.
+      // Temporary use this hack to fix it but remove this HACK before merge.
+      /** HACK STARTS */
+      await page.locator('[href="/apps"]').first().click();
+      await page.waitForNavigation({
+        url: (url) => {
+          return url.pathname === "/apps";
+        },
+      });
+      await page.locator('[href="/apps/installed"]').first().click();
+      /** HACK ENDS */
+
+      await page.locator('[data-testid="zoom_video-integration-disconnect-button"]').click();
+      await page.locator('[data-testid="confirm-button"]').click();
+      await expect(page.locator('[data-testid="confirm-integration-disconnect-button"]')).toHaveCount(0);
+    });
+  });
+
+  test.describe("Hubspot App", () => {
+    test("Can add integration", async ({ page, users }) => {
+      const user = await users.create();
+      await user.apiLogin();
+      await addOauthBasedIntegration({
+        page,
+        slug: "hubspot",
+        authorization: {
+          url: "https://app.hubspot.com/oauth/authorize",
+          verify({ params, code }) {
+            expect(params.get("redirect_uri")).toBeTruthy();
+            // TODO: We can check if client_id is correctly read from DB or not
+            expect(params.get("client_id")).toBeTruthy();
+            expect(params.get("scope")).toBe(
+              ["crm.objects.contacts.read", "crm.objects.contacts.write"].join(" ")
+            );
+
+            return {
+              // TODO: Should
+              status: 307,
+              headers: {
+                location: `${params.get("redirect_uri")}?code=${code}`,
+              },
+            };
+          },
+        },
+        token: {
+          url: "https://api.hubapi.com/oauth/v1/token",
+          verify({ params, code }) {
+            expect(params.get("grant_type")).toBe("authorization_code");
+            expect(params.get("code")).toBe(code);
+            expect(params.get("client_id")).toBeTruthy();
+            expect(params.get("client_secret")).toBeTruthy();
+            return {
+              status: 200,
+              body: {
+                expiresIn: "3600",
+              },
+            };
+          },
+        },
+      });
+      await page.waitForNavigation({
+        url: (url) => {
+          return url.pathname === "/apps/installed";
+        },
+      });
+    });
+  });
+
+  todo("Can add Google Calendar");
+
+  todo("Can add Office 365 Calendar");
+
+  todo("Can add CalDav Calendar");
+
+  todo("Can add Apple Calendar");
+});

calcom/apps/web/playwright/integrations.e2e.ts-snapshots/webhookResponse--calcom-web.txt

@@ -0,0 +1 @@
+{"triggerEvent":"BOOKING_CREATED","createdAt":"[redacted/dynamic]","payload":{"type":"30 min","title":"30 min between PRO and Test Testson","description":"","additionalNotes":"","customInputs":{},"startTime":"[redacted/dynamic]","endTime":"[redacted/dynamic]","organizer":{"name":"PRO","email":"[redacted/dynamic]","timeZone":"[redacted/dynamic]","language":"[redacted/dynamic]"},"attendees":[{"email":"test@example.com","name":"Test Testson","timeZone":"[redacted/dynamic]","language":"[redacted/dynamic]"}],"location":"[redacted/dynamic]","destinationCalendar":null,"hideCalendarNotes":false,"requiresConfirmation":"[redacted/dynamic]","eventTypeId":"[redacted/dynamic]","seatsShowAttendees":true,"uid":"[redacted/dynamic]","videoCallData":"[redacted/dynamic]","appsStatus":"[redacted/dynamic]","bookingId":"[redacted/dynamic]","metadata":{},"additionalInformation":"[redacted/dynamic]"}}

calcom/apps/web/playwright/lib/fixtures.ts

@@ -0,0 +1,119 @@
+import type { Page } from "@playwright/test";
+import { test as base } from "@playwright/test";
+
+import prisma from "@calcom/prisma";
+
+import type { ExpectedUrlDetails } from "../../../../playwright.config";
+import { createAppsFixture } from "../fixtures/apps";
+import { createBookingsFixture } from "../fixtures/bookings";
+import { createEmailsFixture } from "../fixtures/emails";
+import { createEmbedsFixture } from "../fixtures/embeds";
+import { createEventTypeFixture } from "../fixtures/eventTypes";
+import { createFeatureFixture } from "../fixtures/features";
+import { createOrgsFixture } from "../fixtures/orgs";
+import { createPaymentsFixture } from "../fixtures/payments";
+import { createBookingPageFixture } from "../fixtures/regularBookings";
+import { createRoutingFormsFixture } from "../fixtures/routingForms";
+import { createServersFixture } from "../fixtures/servers";
+import { createUsersFixture } from "../fixtures/users";
+import { createWebhookPageFixture } from "../fixtures/webhooks";
+import { createWorkflowPageFixture } from "../fixtures/workflows";
+
+export interface Fixtures {
+  page: Page;
+  orgs: ReturnType<typeof createOrgsFixture>;
+  users: ReturnType<typeof createUsersFixture>;
+  bookings: ReturnType<typeof createBookingsFixture>;
+  payments: ReturnType<typeof createPaymentsFixture>;
+  embeds: ReturnType<typeof createEmbedsFixture>;
+  servers: ReturnType<typeof createServersFixture>;
+  prisma: typeof prisma;
+  emails: ReturnType<typeof createEmailsFixture>;
+  routingForms: ReturnType<typeof createRoutingFormsFixture>;
+  bookingPage: ReturnType<typeof createBookingPageFixture>;
+  workflowPage: ReturnType<typeof createWorkflowPageFixture>;
+  features: ReturnType<typeof createFeatureFixture>;
+  eventTypePage: ReturnType<typeof createEventTypeFixture>;
+  appsPage: ReturnType<typeof createAppsFixture>;
+  webhooks: ReturnType<typeof createWebhookPageFixture>;
+}
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace PlaywrightTest {
+    //FIXME: how to restrict it to Frame only
+    interface Matchers<R> {
+      toBeEmbedCalLink(
+        calNamespace: string,
+        // eslint-disable-next-line
+        getActionFiredDetails: (a: { calNamespace: string; actionType: string }) => Promise<any>,
+        expectedUrlDetails?: ExpectedUrlDetails,
+        isPrendered?: boolean
+      ): Promise<R>;
+    }
+  }
+}
+
+/**
+ *  @see https://playwright.dev/docs/test-fixtures
+ */
+export const test = base.extend<Fixtures>({
+  orgs: async ({ page }, use) => {
+    const orgsFixture = createOrgsFixture(page);
+    await use(orgsFixture);
+  },
+  users: async ({ page, context, emails }, use, workerInfo) => {
+    const usersFixture = createUsersFixture(page, emails, workerInfo);
+    await use(usersFixture);
+  },
+  bookings: async ({ page }, use) => {
+    const bookingsFixture = createBookingsFixture(page);
+    await use(bookingsFixture);
+  },
+  payments: async ({ page }, use) => {
+    const payemntsFixture = createPaymentsFixture(page);
+    await use(payemntsFixture);
+  },
+  embeds: async ({ page }, use) => {
+    const embedsFixture = createEmbedsFixture(page);
+    await use(embedsFixture);
+  },
+  servers: async ({}, use) => {
+    const servers = createServersFixture();
+    await use(servers);
+  },
+  prisma: async ({}, use) => {
+    await use(prisma);
+  },
+  routingForms: async ({}, use) => {
+    await use(createRoutingFormsFixture());
+  },
+  emails: async ({}, use) => {
+    await use(createEmailsFixture());
+  },
+  bookingPage: async ({ page }, use) => {
+    const bookingPage = createBookingPageFixture(page);
+    await use(bookingPage);
+  },
+  features: async ({ page }, use) => {
+    const features = createFeatureFixture(page);
+    await features.init();
+    await use(features);
+  },
+  workflowPage: async ({ page }, use) => {
+    const workflowPage = createWorkflowPageFixture(page);
+    await use(workflowPage);
+  },
+  eventTypePage: async ({ page }, use) => {
+    const eventTypePage = createEventTypeFixture(page);
+    await use(eventTypePage);
+  },
+  appsPage: async ({ page }, use) => {
+    const appsPage = createAppsFixture(page);
+    await use(appsPage);
+  },
+  webhooks: async ({ page }, use) => {
+    const webhooks = createWebhookPageFixture(page);
+    await use(webhooks);
+  },
+});

calcom/apps/web/playwright/lib/future-legacy-routes.ts

@@ -0,0 +1,33 @@
+import { test } from "./fixtures";
+
+export type RouteVariant = "future" | "legacy";
+
+const routeVariants = ["future", "legacy"];
+
+/**
+ * Small wrapper around test.describe().
+ * When using testbothFutureLegacyRoutes.describe() instead of test.describe(), this will run the specified
+ * tests twice. One with the pages route, and one with the new app dir "future" route. It will also add the route variant
+ * name to the test name for easier debugging.
+ * Finally it also adds a parameter routeVariant to your testBothFutureAndLegacyRoutes.describe() callback, which
+ * can be used to do any conditional rendering in the test for a specific route variant (should be as little
+ * as possible).
+ *
+ * See apps/web/playwright/event-types.e2e.ts for an example.
+ */
+export const testBothFutureAndLegacyRoutes = {
+  describe: (testName: string, testFn: (routeVariant: RouteVariant) => void) => {
+    routeVariants.forEach((routeVariant) => {
+      test.describe(`${testName} -- ${routeVariant}`, () => {
+        if (routeVariant === "future") {
+          test.beforeEach(({ context }) => {
+            context.addCookies([
+              { name: "x-calcom-future-routes-override", value: "1", url: "http://localhost:3000" },
+            ]);
+          });
+        }
+        testFn(routeVariant as RouteVariant);
+      });
+    });
+  },
+};

calcom/apps/web/playwright/lib/next-server.ts

@@ -0,0 +1,53 @@
+import detect from "detect-port";
+import type { Server } from "http";
+import { createServer } from "http";
+import next from "next";
+import { parse } from "url";
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare let process: {
+  env: {
+    E2E_DEV_SERVER: string;
+    PLAYWRIGHT_TEST_BASE_URL: string;
+    NEXT_PUBLIC_WEBAPP_URL: string;
+    NEXT_PUBLIC_WEBSITE_URL: string;
+  };
+};
+
+export const nextServer = async ({ port = 3000 } = { port: 3000 }) => {
+  // eslint-disable-next-line turbo/no-undeclared-env-vars
+  const dev = process.env.E2E_DEV_SERVER === "1" ? true : false;
+  if (dev) {
+    port = await detect(Math.round((1 + Math.random()) * 3000));
+  }
+  process.env.PLAYWRIGHT_TEST_BASE_URL =
+    process.env.NEXT_PUBLIC_WEBAPP_URL =
+    process.env.NEXT_PUBLIC_WEBSITE_URL =
+      `http://localhost:${port}`;
+  const app = next({
+    dev: dev,
+    port,
+    hostname: "localhost",
+  });
+  console.log("Started Next Server", { dev, port });
+
+  await app.prepare();
+  const handle = app.getRequestHandler();
+  // start next server on arbitrary port
+  const server: Server = await new Promise((resolve) => {
+    const server = createServer((req, res) => {
+      if (!req.url) {
+        throw new Error("URL not present");
+      }
+      const parsedUrl = parse(req.url, true);
+      handle(req, res, parsedUrl);
+    });
+    server.listen({ port: port }, () => {
+      resolve(server);
+    });
+    server.on("error", (error) => {
+      if (error) throw new Error(`Could not start Next.js server - ${error.message}`);
+    });
+  });
+  return server;
+};

calcom/apps/web/playwright/lib/teardown.ts

@@ -0,0 +1,71 @@
+import type { Prisma } from "@prisma/client";
+
+import prisma from "@calcom/prisma";
+
+/**
+ * @deprecated
+ * DO NOT USE, since test run in parallel this will cause flaky tests. The reason
+ * being that a set of test may end earlier than other trigger a delete of all bookings
+ * than other tests may depend on them. The proper ettiquete should be that EACH test
+ * should cleanup ONLY the booking that we're created in that specific test to se DB
+ * remains "pristine" after each test
+ */
+export const deleteAllBookingsByEmail = async (
+  email: string,
+  whereConditional: Prisma.BookingWhereInput = {}
+) =>
+  prisma.booking.deleteMany({
+    where: {
+      user: {
+        email,
+      },
+      ...whereConditional,
+    },
+  });
+
+export const deleteEventTypeByTitle = async (title: string) => {
+  const event = await prisma.eventType.findFirst({
+    select: { id: true },
+    where: { title: title },
+  });
+  await prisma.eventType.delete({ where: { id: event?.id } });
+};
+
+export const deleteAllWebhooksByEmail = async (email: string) => {
+  await prisma.webhook.deleteMany({
+    where: {
+      user: {
+        email,
+      },
+    },
+  });
+};
+
+export const deleteAllPaymentsByEmail = async (email: string) => {
+  await prisma.payment.deleteMany({
+    where: {
+      booking: {
+        user: {
+          email,
+        },
+      },
+    },
+  });
+};
+
+export const deleteAllPaymentCredentialsByEmail = async (email: string) => {
+  await prisma.user.update({
+    where: {
+      email,
+    },
+    data: {
+      credentials: {
+        deleteMany: {
+          type: {
+            endsWith: "_payment",
+          },
+        },
+      },
+    },
+  });
+};

calcom/apps/web/playwright/lib/testUtils.ts

@@ -0,0 +1,392 @@
+import type { Frame, Page } from "@playwright/test";
+import { expect } from "@playwright/test";
+import { createHash } from "crypto";
+import EventEmitter from "events";
+import type { IncomingMessage, ServerResponse } from "http";
+import { createServer } from "http";
+// eslint-disable-next-line no-restricted-imports
+import { noop } from "lodash";
+import type { Messages } from "mailhog";
+import { totp } from "otplib";
+
+import type { Prisma } from "@calcom/prisma/client";
+import { BookingStatus } from "@calcom/prisma/enums";
+import type { IntervalLimit } from "@calcom/types/Calendar";
+
+import type { createEmailsFixture } from "../fixtures/emails";
+import type { Fixtures } from "./fixtures";
+import { test } from "./fixtures";
+
+export function todo(title: string) {
+  // eslint-disable-next-line playwright/no-skipped-test
+  test.skip(title, noop);
+}
+
+type Request = IncomingMessage & { body?: unknown };
+type RequestHandlerOptions = { req: Request; res: ServerResponse };
+type RequestHandler = (opts: RequestHandlerOptions) => void;
+
+export const testEmail = "test@example.com";
+export const testName = "Test Testson";
+
+export const teamEventTitle = "Team Event - 30min";
+export const teamEventSlug = "team-event-30min";
+
+export function createHttpServer(opts: { requestHandler?: RequestHandler } = {}) {
+  const {
+    requestHandler = ({ res }) => {
+      res.writeHead(200, { "Content-Type": "application/json" });
+      res.write(JSON.stringify({}));
+      res.end();
+    },
+  } = opts;
+  const eventEmitter = new EventEmitter();
+  const requestList: Request[] = [];
+
+  const waitForRequestCount = (count: number) =>
+    new Promise<void>((resolve) => {
+      if (requestList.length === count) {
+        resolve();
+        return;
+      }
+
+      const pushHandler = () => {
+        if (requestList.length !== count) {
+          return;
+        }
+        eventEmitter.off("push", pushHandler);
+        resolve();
+      };
+
+      eventEmitter.on("push", pushHandler);
+    });
+
+  const server = createServer((req, res) => {
+    const buffer: unknown[] = [];
+
+    req.on("data", (data) => {
+      buffer.push(data);
+    });
+    req.on("end", () => {
+      const _req: Request = req;
+      // assume all incoming request bodies are json
+      const json = buffer.length ? JSON.parse(buffer.join("")) : undefined;
+
+      _req.body = json;
+      requestList.push(_req);
+      eventEmitter.emit("push");
+      requestHandler({ req: _req, res });
+    });
+  });
+
+  // listen on random port
+  server.listen(0);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const port: number = (server.address() as any).port;
+  const url = `http://localhost:${port}`;
+
+  return {
+    port,
+    close: () => server.close(),
+    requestList,
+    url,
+    waitForRequestCount,
+  };
+}
+
+export async function selectFirstAvailableTimeSlotNextMonth(page: Page | Frame) {
+  // Let current month dates fully render.
+  await page.click('[data-testid="incrementMonth"]');
+
+  // Waiting for full month increment
+  await page.locator('[data-testid="day"][data-disabled="false"]').nth(0).click();
+
+  await page.locator('[data-testid="time"]').nth(0).click();
+}
+
+export async function selectSecondAvailableTimeSlotNextMonth(page: Page) {
+  // Let current month dates fully render.
+  await page.click('[data-testid="incrementMonth"]');
+
+  await page.locator('[data-testid="day"][data-disabled="false"]').nth(1).click();
+
+  await page.locator('[data-testid="time"]').nth(0).click();
+}
+
+export async function bookEventOnThisPage(page: Page) {
+  await selectFirstAvailableTimeSlotNextMonth(page);
+  await bookTimeSlot(page);
+
+  // Make sure we're navigated to the success page
+  await page.waitForURL((url) => {
+    return url.pathname.startsWith("/booking");
+  });
+  await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+}
+
+export async function bookOptinEvent(page: Page) {
+  await page.locator('[data-testid="event-type-link"]:has-text("Opt in")').click();
+  await bookEventOnThisPage(page);
+}
+
+export async function bookFirstEvent(page: Page) {
+  // Click first event type
+  await page.click('[data-testid="event-type-link"]');
+  await bookEventOnThisPage(page);
+}
+
+export const bookTimeSlot = async (page: Page, opts?: { name?: string; email?: string; title?: string }) => {
+  // --- fill form
+  await page.fill('[name="name"]', opts?.name ?? testName);
+  await page.fill('[name="email"]', opts?.email ?? testEmail);
+  if (opts?.title) {
+    await page.fill('[name="title"]', opts.title);
+  }
+  await page.press('[name="email"]', "Enter");
+};
+
+// Provide an standalone localize utility not managed by next-i18n
+export async function localize(locale: string) {
+  const localeModule = `../../public/static/locales/${locale}/common.json`;
+  const localeMap = await import(localeModule);
+  return (message: string) => {
+    if (message in localeMap) return localeMap[message];
+    throw "No locale found for the given entry message";
+  };
+}
+
+export const createNewEventType = async (page: Page, args: { eventTitle: string }) => {
+  await page.click("[data-testid=new-event-type]");
+  const eventTitle = args.eventTitle;
+  await page.fill("[name=title]", eventTitle);
+  await page.fill("[name=length]", "10");
+  await page.click("[type=submit]");
+
+  await page.waitForURL((url) => {
+    return url.pathname !== "/event-types";
+  });
+};
+
+export const createNewSeatedEventType = async (page: Page, args: { eventTitle: string }) => {
+  const eventTitle = args.eventTitle;
+  await createNewEventType(page, { eventTitle });
+  await page.locator('[data-testid="vertical-tab-event_advanced_tab_title"]').click();
+  await page.locator('[data-testid="offer-seats-toggle"]').click();
+  await page.locator('[data-testid="update-eventtype"]').click();
+};
+
+export async function gotoRoutingLink({
+  page,
+  formId,
+  queryString = "",
+}: {
+  page: Page;
+  formId?: string;
+  queryString?: string;
+}) {
+  let previewLink = null;
+  if (!formId) {
+    // Instead of clicking on the preview link, we are going to the preview link directly because the earlier opens a new tab which is a bit difficult to manage with Playwright
+    const href = await page.locator('[data-testid="form-action-preview"]').getAttribute("href");
+    if (!href) {
+      throw new Error("Preview link not found");
+    }
+    previewLink = href;
+  } else {
+    previewLink = `/forms/${formId}`;
+  }
+
+  await page.goto(`${previewLink}${queryString ? `?${queryString}` : ""}`);
+
+  // 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 getInviteLink(page: Page) {
+  const response = await page.waitForResponse("**/api/trpc/teams/createInvite?batch=1");
+  const json = await response.json();
+  return json[0].result.data.json.inviteLink as string;
+}
+
+export async function getEmailsReceivedByUser({
+  emails,
+  userEmail,
+}: {
+  emails?: ReturnType<typeof createEmailsFixture>;
+  userEmail: string;
+}): Promise<Messages | null> {
+  if (!emails) return null;
+  const matchingEmails = await emails.search(userEmail, "to");
+  if (!matchingEmails?.total) {
+    console.log(
+      `No emails received by ${userEmail}. All emails sent to:`,
+      (await emails.messages())?.items.map((e) => e.to)
+    );
+  }
+  return matchingEmails;
+}
+
+export async function expectEmailsToHaveSubject({
+  emails,
+  organizer,
+  booker,
+  eventTitle,
+}: {
+  emails?: ReturnType<typeof createEmailsFixture>;
+  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);
+}
+
+export const createUserWithLimits = ({
+  users,
+  slug,
+  title,
+  length,
+  bookingLimits,
+  durationLimits,
+}: {
+  users: Fixtures["users"];
+  slug: string;
+  title?: string;
+  length?: number;
+  bookingLimits?: IntervalLimit;
+  durationLimits?: IntervalLimit;
+}) => {
+  if (!bookingLimits && !durationLimits) {
+    throw new Error("Need to supply at least one of bookingLimits or durationLimits");
+  }
+
+  return users.create({
+    eventTypes: [
+      {
+        slug,
+        title: title ?? slug,
+        length: length ?? 30,
+        bookingLimits,
+        durationLimits,
+      },
+    ],
+  });
+};
+
+// this method is not used anywhere else
+// but I'm keeping it here in case we need in the future
+async function createUserWithSeatedEvent(users: Fixtures["users"]) {
+  const slug = "seats";
+  const user = await users.create({
+    name: "Seated event user",
+    eventTypes: [
+      {
+        title: "Seated event",
+        slug,
+        seatsPerTimeSlot: 10,
+        requiresConfirmation: true,
+        length: 30,
+        disableGuests: true, // should always be true for seated events
+      },
+    ],
+  });
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const eventType = user.eventTypes.find((e) => e.slug === slug)!;
+  return { user, eventType };
+}
+
+export async function createUserWithSeatedEventAndAttendees(
+  fixtures: Pick<Fixtures, "users" | "bookings">,
+  attendees: Prisma.AttendeeCreateManyBookingInput[]
+) {
+  const { user, eventType } = await createUserWithSeatedEvent(fixtures.users);
+
+  const booking = await fixtures.bookings.create(user.id, user.username, eventType.id, {
+    status: BookingStatus.ACCEPTED,
+    // startTime with 1 day from now and endTime half hour after
+    startTime: new Date(Date.now() + 24 * 60 * 60 * 1000),
+    endTime: new Date(Date.now() + 24 * 60 * 60 * 1000 + 30 * 60 * 1000),
+    attendees: {
+      createMany: {
+        data: attendees,
+      },
+    },
+  });
+  return { user, eventType, booking };
+}
+
+export function generateTotpCode(email: string) {
+  const secret = createHash("md5")
+    .update(email + process.env.CALENDSO_ENCRYPTION_KEY)
+    .digest("hex");
+
+  totp.options = { step: 90 };
+  return totp.generate(secret);
+}
+
+export async function fillStripeTestCheckout(page: Page) {
+  await page.fill("[name=cardNumber]", "4242424242424242");
+  await page.fill("[name=cardExpiry]", "12/30");
+  await page.fill("[name=cardCvc]", "111");
+  await page.fill("[name=billingName]", "Stripe Stripeson");
+  await page.selectOption("[name=billingCountry]", "US");
+  await page.fill("[name=billingPostalCode]", "12345");
+  await page.click(".SubmitButton--complete-Shimmer");
+}
+
+export async function doOnOrgDomain(
+  { orgSlug, page }: { orgSlug: string | null; page: Page },
+  callback: ({ page }: { page: Page }) => Promise<void>
+) {
+  if (!orgSlug) {
+    throw new Error("orgSlug is not available");
+  }
+  page.setExtraHTTPHeaders({
+    "x-cal-force-slug": orgSlug,
+  });
+  await callback({ page });
+  await page.setExtraHTTPHeaders({
+    "x-cal-force-slug": "",
+  });
+}
+
+// When App directory is there, this is the 404 page text. We should work on fixing the 404 page as it changed due to app directory.
+export const NotFoundPageTextAppDir = "This page does not exist.";
+// export const NotFoundPageText = "ERROR 404";
+
+export 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\/.+/);
+  });
+}
+
+export async function gotoBookingPage(page: Page) {
+  const previewLink = await page.locator("[data-testid=preview-button]").getAttribute("href");
+
+  await page.goto(previewLink ?? "");
+}
+
+export async function saveEventType(page: Page) {
+  await page.locator("[data-testid=update-eventtype]").click();
+}

calcom/apps/web/playwright/locale.e2e.ts

@@ -0,0 +1,543 @@
+import { expect } from "@playwright/test";
+
+import { test } from "./lib/fixtures";
+
+test.describe.configure({ mode: "serial" });
+
+test.describe("unauthorized user sees correct translations (de)", async () => {
+  test.use({
+    locale: "de",
+  });
+
+  test("should use correct translations and html attributes", async ({ page }) => {
+    await page.goto("/");
+    // we dont need to wait for styles and images, only for dom
+    await page.waitForLoadState("domcontentloaded");
+
+    await page.locator("html[lang=de]").waitFor({ state: "attached" });
+    await page.locator("html[dir=ltr]").waitFor({ state: "attached" });
+
+    {
+      const locator = page.getByText("Willkommen zurück", { exact: true });
+      expect(await locator.count()).toEqual(1);
+    }
+
+    {
+      const locator = page.getByText("Welcome back", { exact: true });
+      expect(await locator.count()).toEqual(0);
+    }
+  });
+});
+
+test.describe("unauthorized user sees correct translations (ar)", async () => {
+  test.use({
+    locale: "ar",
+  });
+
+  test("should use correct translations and html attributes", async ({ page }) => {
+    await page.goto("/");
+    await page.waitForLoadState("domcontentloaded");
+
+    await page.locator("html[lang=ar]").waitFor({ state: "attached" });
+    await page.locator("html[dir=rtl]").waitFor({ state: "attached" });
+
+    {
+      const locator = page.getByText("أهلاً بك من جديد", { exact: true });
+      expect(await locator.count()).toEqual(1);
+    }
+
+    {
+      const locator = page.getByText("Welcome back", { exact: true });
+      expect(await locator.count()).toEqual(0);
+    }
+  });
+});
+
+test.describe("unauthorized user sees correct translations (zh)", async () => {
+  test.use({
+    locale: "zh",
+  });
+
+  test("should use correct translations and html attributes", async ({ page }) => {
+    await page.goto("/");
+    await page.waitForLoadState("domcontentloaded");
+
+    await page.locator("html[lang=zh]").waitFor({ state: "attached" });
+    await page.locator("html[dir=ltr]").waitFor({ state: "attached" });
+
+    {
+      const locator = page.getByText("欢迎回来", { exact: true });
+      expect(await locator.count()).toEqual(1);
+    }
+
+    {
+      const locator = page.getByText("Welcome back", { exact: true });
+      expect(await locator.count()).toEqual(0);
+    }
+  });
+});
+
+test.describe("unauthorized user sees correct translations (zh-CN)", async () => {
+  test.use({
+    locale: "zh-CN",
+  });
+
+  test("should use correct translations and html attributes", async ({ page }) => {
+    await page.goto("/");
+    await page.waitForLoadState("domcontentloaded");
+
+    await page.locator("html[lang=zh-CN]").waitFor({ state: "attached" });
+    await page.locator("html[dir=ltr]").waitFor({ state: "attached" });
+
+    {
+      const locator = page.getByText("欢迎回来", { exact: true });
+      expect(await locator.count()).toEqual(1);
+    }
+
+    {
+      const locator = page.getByText("Welcome back", { exact: true });
+      expect(await locator.count()).toEqual(0);
+    }
+  });
+});
+
+test.describe("unauthorized user sees correct translations (zh-TW)", async () => {
+  test.use({
+    locale: "zh-TW",
+  });
+
+  test("should use correct translations and html attributes", async ({ page }) => {
+    await page.goto("/");
+    await page.waitForLoadState("domcontentloaded");
+
+    await page.locator("html[lang=zh-TW]").waitFor({ state: "attached" });
+    await page.locator("html[dir=ltr]").waitFor({ state: "attached" });
+
+    {
+      const locator = page.getByText("歡迎回來", { exact: true });
+      expect(await locator.count()).toEqual(1);
+    }
+
+    {
+      const locator = page.getByText("Welcome back", { exact: true });
+      expect(await locator.count()).toEqual(0);
+    }
+  });
+});
+
+test.describe("unauthorized user sees correct translations (pt)", async () => {
+  test.use({
+    locale: "pt",
+  });
+
+  test("should use correct translations and html attributes", async ({ page }) => {
+    await page.goto("/");
+    await page.waitForLoadState("domcontentloaded");
+
+    await page.locator("html[lang=pt]").waitFor({ state: "attached" });
+    await page.locator("html[dir=ltr]").waitFor({ state: "attached" });
+
+    {
+      const locator = page.getByText("Olá novamente", { exact: true });
+      expect(await locator.count()).toEqual(1);
+    }
+
+    {
+      const locator = page.getByText("Welcome back", { exact: true });
+      expect(await locator.count()).toEqual(0);
+    }
+  });
+});
+
+test.describe("unauthorized user sees correct translations (pt-br)", async () => {
+  test.use({
+    locale: "pt-BR",
+  });
+
+  test("should use correct translations and html attributes", async ({ page }) => {
+    await page.goto("/");
+    await page.waitForLoadState("domcontentloaded");
+
+    await page.locator("html[lang=pt-BR]").waitFor({ state: "attached" });
+    await page.locator("html[dir=ltr]").waitFor({ state: "attached" });
+
+    {
+      const locator = page.getByText("Bem-vindo(a) novamente", { exact: true });
+      expect(await locator.count()).toEqual(1);
+    }
+
+    {
+      const locator = page.getByText("Welcome back", { exact: true });
+      expect(await locator.count()).toEqual(0);
+    }
+  });
+});
+
+test.describe("unauthorized user sees correct translations (es-419)", async () => {
+  test.use({
+    locale: "es-419",
+  });
+
+  test("should use correct translations and html attributes", async ({ page }) => {
+    await page.goto("/");
+    await page.waitForLoadState("domcontentloaded");
+
+    // es-419 is disabled in i18n config, so es should be used as fallback
+    await page.locator("html[lang=es]").waitFor({ state: "attached" });
+    await page.locator("html[dir=ltr]").waitFor({ state: "attached" });
+
+    {
+      const locator = page.getByText("Bienvenido de nuevo", { exact: true });
+      expect(await locator.count()).toEqual(1);
+    }
+
+    {
+      const locator = page.getByText("Welcome back", { exact: true });
+      expect(await locator.count()).toEqual(0);
+    }
+  });
+});
+
+test.describe("authorized user sees correct translations (de)", async () => {
+  test.use({
+    locale: "en",
+  });
+
+  test("should return correct translations and html attributes", async ({ page, users }) => {
+    await test.step("should create a de user", async () => {
+      const user = await users.create({
+        locale: "de",
+      });
+      await user.apiLogin();
+    });
+
+    await test.step("should navigate to /event-types and show German translations", async () => {
+      await page.goto("/event-types");
+
+      await page.waitForLoadState("domcontentloaded");
+
+      await page.locator("html[lang=de]").waitFor({ state: "attached" });
+      await page.locator("html[dir=ltr]").waitFor({ state: "attached" });
+
+      {
+        const locator = page.getByRole("heading", { name: "Ereignistypen", exact: true });
+        // locator.count() does not wait for elements
+        // but event-types page is client side, so it takes some time to render html
+        // thats why we need to use method that awaits for the element
+        // https://github.com/microsoft/playwright/issues/14278#issuecomment-1131754679
+        await expect(locator).toHaveCount(1);
+      }
+
+      {
+        const locator = page.getByText("Event Types", { exact: true });
+        await expect(locator).toHaveCount(0);
+      }
+    });
+
+    await test.step("should navigate to /bookings and show German translations", async () => {
+      await page.goto("/bookings");
+
+      await page.waitForLoadState("domcontentloaded");
+
+      await page.locator("html[lang=de]").waitFor({ state: "attached" });
+      await page.locator("html[dir=ltr]").waitFor({ state: "attached" });
+
+      {
+        const locator = page.getByRole("heading", { name: "Buchungen", exact: true });
+        await expect(locator).toHaveCount(1);
+      }
+
+      {
+        const locator = page.getByText("Bookings", { exact: true });
+        await expect(locator).toHaveCount(0);
+      }
+    });
+
+    await test.step("should reload the /bookings and show German translations", async () => {
+      await page.reload();
+
+      await page.waitForLoadState("domcontentloaded");
+
+      await page.locator("html[lang=de]").waitFor({ state: "attached" });
+      await page.locator("html[dir=ltr]").waitFor({ state: "attached" });
+
+      {
+        const locator = page.getByRole("heading", { name: "Buchungen", exact: true });
+        await expect(locator).toHaveCount(1);
+      }
+
+      {
+        const locator = page.getByText("Bookings", { exact: true });
+        await expect(locator).toHaveCount(0);
+      }
+    });
+  });
+});
+
+test.describe("authorized user sees correct translations (pt-br)", async () => {
+  test.use({
+    locale: "en",
+  });
+
+  test("should return correct translations and html attributes", async ({ page, users }) => {
+    await test.step("should create a pt-br user", async () => {
+      const user = await users.create({
+        locale: "pt-BR",
+      });
+      await user.apiLogin();
+    });
+
+    await test.step("should navigate to /event-types and show Brazil-Portuguese translations", async () => {
+      await page.goto("/event-types");
+
+      await page.waitForLoadState("domcontentloaded");
+
+      await page.locator("html[lang=pt-br]").waitFor({ state: "attached" });
+      await page.locator("html[dir=ltr]").waitFor({ state: "attached" });
+
+      {
+        const locator = page.getByRole("heading", { name: "Tipos de Eventos", exact: true });
+        await expect(locator).toHaveCount(1);
+      }
+
+      {
+        const locator = page.getByText("Event Types", { exact: true });
+        await expect(locator).toHaveCount(0);
+      }
+    });
+
+    await test.step("should navigate to /bookings and show Brazil-Portuguese translations", async () => {
+      await page.goto("/bookings");
+
+      await page.waitForLoadState("domcontentloaded");
+
+      await page.locator("html[lang=pt-br]").waitFor({ state: "attached" });
+      await page.locator("html[dir=ltr]").waitFor({ state: "attached" });
+
+      {
+        const locator = page.getByRole("heading", { name: "Reservas", exact: true });
+        await expect(locator).toHaveCount(1);
+      }
+
+      {
+        const locator = page.getByText("Bookings", { exact: true });
+        await expect(locator).toHaveCount(0);
+      }
+    });
+
+    await test.step("should reload the /bookings and show Brazil-Portuguese translations", async () => {
+      await page.reload();
+
+      await page.waitForLoadState("domcontentloaded");
+
+      await page.locator("html[lang=pt-br]").waitFor({ state: "attached" });
+      await page.locator("html[dir=ltr]").waitFor({ state: "attached" });
+
+      {
+        const locator = page.getByRole("heading", { name: "Reservas", exact: true });
+        await expect(locator).toHaveCount(1);
+      }
+
+      {
+        const locator = page.getByText("Bookings", { exact: true });
+        await expect(locator).toHaveCount(0);
+      }
+    });
+  });
+});
+
+test.describe("authorized user sees correct translations (ar)", async () => {
+  test.use({
+    locale: "en",
+  });
+
+  test("should return correct translations and html attributes", async ({ page, users }) => {
+    await test.step("should create a de user", async () => {
+      const user = await users.create({
+        locale: "ar",
+      });
+      await user.apiLogin();
+    });
+
+    await test.step("should navigate to /event-types and show Arabic translations", async () => {
+      await page.goto("/event-types");
+
+      await page.waitForLoadState("domcontentloaded");
+
+      await page.locator("html[lang=ar]").waitFor({ state: "attached" });
+      await page.locator("html[dir=rtl]").waitFor({ state: "attached" });
+
+      {
+        const locator = page.getByRole("heading", { name: "أنواع الحدث", exact: true });
+        await expect(locator).toHaveCount(1);
+      }
+
+      {
+        const locator = page.getByText("Event Types", { exact: true });
+        await expect(locator).toHaveCount(0);
+      }
+    });
+
+    await test.step("should navigate to /bookings and show Arabic translations", async () => {
+      await page.goto("/bookings");
+
+      await page.waitForLoadState("domcontentloaded");
+
+      await page.locator("html[lang=ar]").waitFor({ state: "attached" });
+      await page.locator("html[dir=rtl]").waitFor({ state: "attached" });
+
+      {
+        const locator = page.getByRole("heading", { name: "عمليات الحجز", exact: true });
+        await expect(locator).toHaveCount(1);
+      }
+
+      {
+        const locator = page.getByText("Bookings", { exact: true });
+        await expect(locator).toHaveCount(0);
+      }
+    });
+
+    await test.step("should reload the /bookings and show Arabic translations", async () => {
+      await page.reload();
+
+      await page.waitForLoadState("domcontentloaded");
+
+      await page.locator("html[lang=ar]").waitFor({ state: "attached" });
+      await page.locator("html[dir=rtl]").waitFor({ state: "attached" });
+
+      {
+        const locator = page.getByRole("heading", { name: "عمليات الحجز", exact: true });
+        await expect(locator).toHaveCount(1);
+      }
+
+      {
+        const locator = page.getByText("Bookings", { exact: true });
+        await expect(locator).toHaveCount(0);
+      }
+    });
+  });
+});
+
+test.describe("authorized user sees changed translations (de->ar)", async () => {
+  test.use({
+    locale: "en",
+  });
+
+  test("should return correct translations and html attributes", async ({ page, users }) => {
+    await test.step("should create a de user", async () => {
+      const user = await users.create({
+        locale: "de",
+      });
+      await user.apiLogin();
+    });
+
+    await test.step("should change the language and show Arabic translations", async () => {
+      await page.goto("/settings/my-account/general");
+
+      await page.waitForLoadState("domcontentloaded");
+
+      await page.locator(".bg-default > div > div:nth-child(2)").first().click();
+      await page.locator("#react-select-2-option-0").click();
+
+      await page.getByRole("button", { name: "Aktualisieren" }).click();
+
+      await page
+        .getByRole("button", { name: "Einstellungen erfolgreich aktualisiert" })
+        .waitFor({ state: "visible" });
+
+      await page.locator("html[lang=ar]").waitFor({ state: "attached" });
+      await page.locator("html[dir=rtl]").waitFor({ state: "attached" });
+
+      {
+        // at least one is visible
+        const locator = page.getByText("عام", { exact: true }).last(); // "general"
+        await expect(locator).toBeVisible();
+      }
+
+      {
+        const locator = page.getByText("Allgemein", { exact: true }); // "general"
+        await expect(locator).toHaveCount(0);
+      }
+    });
+
+    await test.step("should reload and show Arabic translations", async () => {
+      await page.reload();
+
+      await page.waitForLoadState("domcontentloaded");
+
+      await page.locator("html[lang=ar]").waitFor({ state: "attached" });
+      await page.locator("html[dir=rtl]").waitFor({ state: "attached" });
+
+      {
+        const locator = page.getByText("عام", { exact: true }).last(); // "general"
+        await expect(locator).toBeVisible();
+      }
+
+      {
+        const locator = page.getByText("Allgemein", { exact: true }); // "general"
+        await expect(locator).toHaveCount(0);
+      }
+    });
+  });
+});
+
+test.describe("authorized user sees changed translations (de->pt-BR) [locale1]", async () => {
+  test.use({
+    locale: "en",
+  });
+
+  test("should return correct translations and html attributes", async ({ page, users }) => {
+    await test.step("should create a de user", async () => {
+      const user = await users.create({
+        locale: "de",
+      });
+      await user.apiLogin();
+    });
+
+    await test.step("should change the language and show Brazil-Portuguese translations", async () => {
+      await page.goto("/settings/my-account/general");
+      await page.waitForLoadState("domcontentloaded");
+
+      await page.locator(".bg-default > div > div:nth-child(2)").first().click();
+      await page.locator("text=Português (Brasil)").click();
+
+      await page.getByRole("button", { name: "Aktualisieren" }).click();
+
+      await page
+        .getByRole("button", { name: "Einstellungen erfolgreich aktualisiert" })
+        .waitFor({ state: "visible" });
+
+      await page.locator("html[lang=pt-BR]").waitFor({ state: "attached" });
+      await page.locator("html[dir=ltr]").waitFor({ state: "attached" });
+
+      {
+        const locator = page.getByText("Geral", { exact: true }).last(); // "general"
+        await expect(locator).toBeVisible();
+      }
+
+      {
+        const locator = page.getByText("Allgemein", { exact: true }); // "general"
+        await expect(locator).toHaveCount(0);
+      }
+    });
+
+    await test.step("should reload and show Brazil-Portuguese translations", async () => {
+      await page.reload();
+
+      await page.waitForLoadState("domcontentloaded");
+
+      await page.locator("html[lang=pt-BR]").waitFor({ state: "attached" });
+      await page.locator("html[dir=ltr]").waitFor({ state: "attached" });
+
+      {
+        const locator = page.getByText("Geral", { exact: true }).last(); // "general"
+        await expect(locator).toBeVisible();
+      }
+
+      {
+        const locator = page.getByText("Allgemein", { exact: true }); // "general"
+        await expect(locator).toHaveCount(0);
+      }
+    });
+  });
+});

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

@@ -0,0 +1,186 @@
+import type { Page } from "@playwright/test";
+import { expect } from "@playwright/test";
+import { authenticator } from "otplib";
+
+import { symmetricDecrypt } from "@calcom/lib/crypto";
+import { totpAuthenticatorCheck } from "@calcom/lib/totp";
+import { prisma } from "@calcom/prisma";
+
+import { test } from "./lib/fixtures";
+
+test.describe.configure({ mode: "parallel" });
+
+// TODO: add more backup code tests, e.g. login + disabling 2fa with backup
+
+// a test to logout requires both a succesfull login as logout, to prevent
+// a doubling of tests failing on logout & logout, we can group them.
+test.describe("2FA Tests", async () => {
+  test.afterAll(async ({ users }) => {
+    await users.deleteAll();
+  });
+  test("should allow a user to enable 2FA and login using 2FA", async ({ page, users }) => {
+    // log in trail user
+    const user = await test.step("Enable 2FA", async () => {
+      const user = await users.create();
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const userPassword = user.username!;
+      await user.apiLogin();
+
+      // expects the home page for an authorized user
+      await page.goto("/settings/security/two-factor-auth");
+      await page.click(`[data-testid=two-factor-switch]`);
+      await page.fill('input[name="password"]', userPassword);
+      await page.press('input[name="password"]', "Enter");
+      const secret = await page.locator(`[data-testid=two-factor-secret]`).textContent();
+      expect(secret).toHaveLength(32);
+      await page.click('[data-testid="goto-otp-screen"]');
+
+      /**
+       * Try a wrong code and test that wrong code is rejected.
+       */
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      await fillOtp({ page, secret: "123456", noRetry: true });
+      await expect(page.locator('[data-testid="error-submitting-code"]')).toBeVisible();
+
+      await removeOtpInput(page);
+
+      await fillOtp({
+        page,
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        secret: secret!,
+      });
+
+      // FIXME: this passes even when switch is not checked, compare to test
+      // below which checks for data-state="checked" and works as expected
+      await page.waitForSelector(`[data-testid=two-factor-switch]`);
+      await expect(page.locator(`[data-testid=two-factor-switch]`).isChecked()).toBeTruthy();
+
+      return user;
+    });
+
+    await test.step("Logout", async () => {
+      await page.goto("/auth/logout");
+    });
+
+    await test.step("Login with 2FA enabled", async () => {
+      await user.login();
+      const userWith2FaSecret = await prisma.user.findFirst({
+        where: {
+          id: user.id,
+        },
+      });
+
+      const secret = symmetricDecrypt(
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        userWith2FaSecret!.twoFactorSecret!,
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        process.env.CALENDSO_ENCRYPTION_KEY!
+      );
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      await fillOtp({ page, secret: secret! });
+      await Promise.all([
+        page.press('input[name="2fa6"]', "Enter"),
+        page.waitForResponse("**/api/auth/callback/credentials**"),
+      ]);
+      const shellLocator = page.locator(`[data-testid=dashboard-shell]`);
+      await expect(shellLocator).toBeVisible();
+    });
+  });
+
+  test("should allow a user to disable 2FA", async ({ page, users }) => {
+    // log in trail user
+    const user = await test.step("Enable 2FA", async () => {
+      const user = await users.create();
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const userPassword = user.username!;
+      await user.apiLogin();
+
+      // expects the home page for an authorized user
+      await page.goto("/settings/security/two-factor-auth");
+      await page.click(`[data-testid=two-factor-switch][data-state="unchecked"]`);
+      await page.fill('input[name="password"]', userPassword);
+      await page.press('input[name="password"]', "Enter");
+      const secret = await page.locator(`[data-testid=two-factor-secret]`).textContent();
+      expect(secret).toHaveLength(32);
+      await page.click('[data-testid="goto-otp-screen"]');
+
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      await fillOtp({ page, secret: secret! });
+
+      // backup codes are now showing, so run a few tests
+
+      // click download button
+      const promise = page.waitForEvent("download");
+      await page.getByTestId("backup-codes-download").click();
+      const download = await promise;
+      expect(download.suggestedFilename()).toBe("cal-backup-codes.txt");
+      // TODO: check file content
+
+      // click copy button
+      await page.getByTestId("backup-codes-copy").click();
+      await page.getByTestId("toast-success").waitFor();
+      // TODO: check clipboard content
+
+      // close backup code dialog
+      await page.getByTestId("backup-codes-close").click();
+
+      await expect(page.locator(`[data-testid=two-factor-switch][data-state="checked"]`)).toBeVisible();
+
+      return user;
+    });
+
+    await test.step("Disable 2FA", async () => {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const userPassword = user.username!;
+
+      // expects the home page for an authorized user
+      await page.goto("/settings/security/two-factor-auth");
+      await page.click(`[data-testid=two-factor-switch][data-state="checked"]`);
+      await page.fill('input[name="password"]', userPassword);
+
+      const userWith2FaSecret = await prisma.user.findFirst({
+        where: {
+          id: user.id,
+        },
+      });
+
+      const secret = symmetricDecrypt(
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        userWith2FaSecret!.twoFactorSecret!,
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        process.env.CALENDSO_ENCRYPTION_KEY!
+      );
+
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      await fillOtp({ page, secret: secret! });
+      await page.click('[data-testid="disable-2fa"]');
+      await expect(page.locator(`[data-testid=two-factor-switch][data-state="unchecked"]`)).toBeVisible();
+
+      return user;
+    });
+  });
+});
+
+async function removeOtpInput(page: Page) {
+  await page.locator('input[name="2fa6"]').waitFor({ state: "visible", timeout: 30_000 });
+
+  // Remove one OTP input
+  await page.locator('input[name="2fa6"]').focus();
+  await page.keyboard.press("Backspace");
+}
+
+async function fillOtp({ page, secret, noRetry }: { page: Page; secret: string; noRetry?: boolean }) {
+  let token = authenticator.generate(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);
+  }
+  await page.locator('input[name="2fa1"]').waitFor({ state: "visible", timeout: 60_000 });
+  await page.fill('input[name="2fa1"]', token[0]);
+  await page.fill('input[name="2fa2"]', token[1]);
+  await page.fill('input[name="2fa3"]', token[2]);
+  await page.fill('input[name="2fa4"]', token[3]);
+  await page.fill('input[name="2fa5"]', token[4]);
+  await page.fill('input[name="2fa6"]', token[5]);
+}

calcom/apps/web/playwright/login.api.e2e.ts

@@ -0,0 +1,21 @@
+import { expect } from "@playwright/test";
+
+import { test } from "./lib/fixtures";
+
+test.describe.configure({ mode: "parallel" });
+test.afterEach(({ users }) => users.deleteAll());
+
+test.describe("Login with api request", () => {
+  test("context request will share cookie storage with its browser context", async ({ page, users }) => {
+    const pro = await users.create();
+    await pro.apiLogin();
+
+    const contextCookies = await page.context().cookies();
+    const cookiesMap = new Map(contextCookies.map(({ name, value }) => [name, value]));
+
+    // The browser context will already contain all the cookies from the API response.
+    expect(cookiesMap.has("next-auth.csrf-token")).toBeTruthy();
+    expect(cookiesMap.has("next-auth.callback-url")).toBeTruthy();
+    expect(cookiesMap.has("next-auth.session-token")).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,85 @@
+import { expect } from "@playwright/test";
+
+import { login } from "./fixtures/users";
+import { test } from "./lib/fixtures";
+import { testBothFutureAndLegacyRoutes } from "./lib/future-legacy-routes";
+import { localize } from "./lib/testUtils";
+
+test.describe.configure({ mode: "parallel" });
+
+// a test to logout requires both a succesfull login as logout, to prevent
+// a doubling of tests failing on logout & logout, we can group them.
+testBothFutureAndLegacyRoutes.describe("user can login & logout succesfully", async () => {
+  test.afterAll(async ({ users }) => {
+    await users.deleteAll();
+  });
+
+  // TODO: This test is extremely flaky and has been failing a lot, blocking many PRs. Fix this.
+  // eslint-disable-next-line playwright/no-skipped-test
+  test.skip("login flow user & logout using dashboard", async ({ page, users }) => {
+    // log in trail user
+    await test.step("Log in", async () => {
+      const user = await users.create();
+      await user.login();
+
+      const shellLocator = page.locator(`[data-testid=dashboard-shell]`);
+      await page.waitForURL("/event-types");
+      await expect(shellLocator).toBeVisible();
+    });
+
+    //
+    await test.step("Log out", async () => {
+      const signOutLabel = (await localize("en"))("sign_out");
+      const userDropdownDisclose = async () => page.locator("[data-testid=user-dropdown-trigger]").click();
+
+      // disclose and click the sign out button from the user dropdown
+      await userDropdownDisclose();
+      const signOutBtn = page.locator(`text=${signOutLabel}`);
+      await signOutBtn.click();
+
+      await page.locator("[data-testid=logout-btn]").click();
+
+      // Reroute to the home page to check if the login form shows up
+      await expect(page.locator(`[data-testid=login-form]`)).toBeVisible();
+    });
+  });
+});
+
+testBothFutureAndLegacyRoutes.describe("Login and logout tests", () => {
+  test.afterAll(async ({ users }) => {
+    await users.deleteAll();
+  });
+
+  test.afterEach(async ({ users, page }) => {
+    await users.logout();
+
+    // check if we are at the login page
+    await page.goto("/");
+    await expect(page.locator(`[data-testid=login-form]`)).toBeVisible();
+  });
+
+  testBothFutureAndLegacyRoutes.describe("Login flow validations", async () => {
+    test("Should warn when user does not exist", async ({ page }) => {
+      const alertMessage = (await localize("en"))("incorrect_email_password");
+
+      // Login with a non-existent user
+      const never = "never";
+      await login({ username: never }, page);
+
+      // assert for the visibility of the localized alert message
+      await expect(page.locator(`text=${alertMessage}`)).toBeVisible();
+    });
+
+    test("Should warn when password is incorrect", async ({ page, users }) => {
+      const alertMessage = (await localize("en"))("incorrect_email_password");
+      // by default password===username with the users fixture
+      const pro = await users.create({ username: "pro" });
+
+      // login with a wrong password
+      await login({ username: pro.username, password: "wrong" }, page);
+
+      // assert for the visibility of the localized  alert message
+      await expect(page.locator(`text=${alertMessage}`)).toBeVisible();
+    });
+  });
+});

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

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

calcom/apps/web/playwright/manage-booking-questions.e2e.ts

@@ -0,0 +1,718 @@
+import type { Locator, Page, PlaywrightTestArgs } from "@playwright/test";
+import { expect } from "@playwright/test";
+import type { createUsersFixture } from "playwright/fixtures/users";
+import { uuid } from "short-uuid";
+
+import prisma from "@calcom/prisma";
+import { WebhookTriggerEvents } from "@calcom/prisma/enums";
+import type { CalendarEvent } from "@calcom/types/Calendar";
+
+import { test } from "./lib/fixtures";
+import { createHttpServer, selectFirstAvailableTimeSlotNextMonth } from "./lib/testUtils";
+
+function getLabelLocator(field: Locator) {
+  // There are 2 labels right now. Will be one in future. The second one is hidden
+  return field.locator("label").first();
+}
+
+async function getLabelText(field: Locator) {
+  return await getLabelLocator(field).locator("span").first().innerText();
+}
+
+test.describe.configure({ mode: "parallel" });
+test.describe("Manage Booking Questions", () => {
+  test.afterEach(async ({ users }) => {
+    await users.deleteAll();
+  });
+
+  test.describe("For User EventType", () => {
+    test("Do a booking with a Address type question and verify a few thing in b/w", async ({
+      page,
+      users,
+      context,
+    }, testInfo) => {
+      // Considering there are many steps in it, it would need more than default test timeout
+      test.setTimeout(testInfo.timeout * 3);
+      const user = await createAndLoginUserWithEventTypes({ users, page });
+
+      const webhookReceiver = await addWebhook(user);
+
+      await test.step("Go to EventType Page ", async () => {
+        const $eventTypes = page.locator("[data-testid=event-types] > li a");
+        const firstEventTypeElement = $eventTypes.first();
+
+        await firstEventTypeElement.click();
+      });
+
+      await runTestStepsCommonForTeamAndUserEventType(page, context, webhookReceiver);
+    });
+
+    test("Do a booking with Checkbox type question and verify a few thing in b/w", async ({
+      page,
+      users,
+      context,
+    }, testInfo) => {
+      // Considering there are many steps in it, it would need more than default test timeout
+      test.setTimeout(testInfo.timeout * 2);
+      const user = await createAndLoginUserWithEventTypes({ users, page });
+
+      // const webhookReceiver = await addWebhook(user);
+
+      await test.step("Go to EventType Advanced Page ", async () => {
+        const $eventTypes = page.locator("[data-testid=event-types] > li a");
+        const firstEventTypeElement = $eventTypes.first();
+
+        await firstEventTypeElement.click();
+        await page.click('[href$="tabName=advanced"]');
+      });
+
+      await test.step("Add Question and see that it's shown on Booking Page at appropriate position", async () => {
+        await addQuestionAndSave({
+          page,
+          question: {
+            name: "agree-to-terms",
+            type: "Checkbox",
+            label: "Agree to [terms](https://example.com/terms)",
+            required: true,
+          },
+        });
+
+        await doOnFreshPreview(page, context, async (page) => {
+          const allFieldsLocator = await expectSystemFieldsToBeThereOnBookingPage({ page });
+          const userFieldLocator = allFieldsLocator.nth(5);
+
+          await expect(userFieldLocator.locator('[name="agree-to-terms"]')).toBeVisible();
+          expect(await getLabelText(userFieldLocator)).toBe("Agree to terms");
+          // Verify that markdown is working
+          expect(await getLabelLocator(userFieldLocator).locator("a").getAttribute("href")).toBe(
+            "https://example.com/terms"
+          );
+          await expect(userFieldLocator.locator("input")).toBeVisible();
+        });
+      });
+    });
+
+    test("Split 'Full name' into 'First name' and 'Last name'", async ({
+      page,
+      users,
+      context,
+    }, testInfo) => {
+      // Considering there are many steps in it, it would need more than default test timeout
+      test.setTimeout(testInfo.timeout * 3);
+      const user = await createAndLoginUserWithEventTypes({ page, users });
+      const webhookReceiver = await addWebhook(user);
+      await test.step("Go to first EventType Page ", async () => {
+        const $eventTypes = page.locator("[data-testid=event-types] > li a");
+        const firstEventTypeElement = $eventTypes.first();
+
+        await firstEventTypeElement.click();
+      });
+
+      await test.step("Open the 'Name' field dialog", async () => {
+        await page.click('[href$="tabName=advanced"]');
+        await page.locator('[data-testid="field-name"] [data-testid="edit-field-action"]').click();
+      });
+
+      await test.step("Toggle on the variant toggle and save Event Type", async () => {
+        await page.click('[data-testid="variant-toggle"]');
+        await page.click("[data-testid=field-add-save]");
+        await saveEventType(page);
+      });
+
+      await test.step("Book a time slot with firstName and lastName provided separately", async () => {
+        await doOnFreshPreview(page, context, async (page) => {
+          await expectSystemFieldsToBeThereOnBookingPage({ page, isFirstAndLastNameVariant: true });
+          await bookTimeSlot({
+            page,
+            name: { firstName: "John", lastName: "Doe" },
+            email: "booker@example.com",
+          });
+          await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+          expect(await page.locator('[data-testid="attendee-name-John Doe"]').nth(0).textContent()).toBe(
+            "John Doe"
+          );
+          await expectWebhookToBeCalled(webhookReceiver, {
+            triggerEvent: WebhookTriggerEvents.BOOKING_CREATED,
+            payload: {
+              attendees: [
+                {
+                  // It would have full Name only
+                  name: "John Doe",
+                  email: "booker@example.com",
+                },
+              ],
+              responses: {
+                name: {
+                  label: "your_name",
+                  value: {
+                    firstName: "John",
+                    lastName: "Doe",
+                  },
+                },
+                email: {
+                  label: "email_address",
+                  value: "booker@example.com",
+                },
+              },
+            },
+          });
+        });
+      });
+
+      await test.step("Verify that we can prefill name and other fields correctly", async () => {
+        await doOnFreshPreview(page, context, async (page) => {
+          const url = page.url();
+          const prefillUrl = new URL(url);
+          prefillUrl.searchParams.append("name", "John Johny Janardan");
+          prefillUrl.searchParams.append("email", "john@example.com");
+          prefillUrl.searchParams.append("guests", "guest1@example.com");
+          prefillUrl.searchParams.append("guests", "guest2@example.com");
+          prefillUrl.searchParams.append("notes", "This is an additional note");
+          await page.goto(prefillUrl.toString());
+          await bookTimeSlot({ page, skipSubmission: true });
+          await expectSystemFieldsToBeThereOnBookingPage({
+            page,
+            isFirstAndLastNameVariant: true,
+            values: {
+              name: {
+                firstName: "John",
+                lastName: "Johny Janardan",
+              },
+              email: "john@example.com",
+              guests: ["guest1@example.com", "guest2@example.com"],
+              notes: "This is an additional note",
+            },
+          });
+        });
+      });
+
+      await test.step("Verify that we can prefill name field with no lastname", async () => {
+        const searchParams = new URLSearchParams();
+        searchParams.append("name", "FirstName");
+        await doOnFreshPreviewWithSearchParams(searchParams, page, context, async (page) => {
+          await selectFirstAvailableTimeSlotNextMonth(page);
+          await expectSystemFieldsToBeThereOnBookingPage({
+            page,
+            isFirstAndLastNameVariant: true,
+            values: {
+              name: {
+                firstName: "FirstName",
+                lastName: "",
+              },
+            },
+          });
+        });
+      });
+
+      await test.step("Verify that we can prefill name field with firstName,lastName query params", async () => {
+        const searchParams = new URLSearchParams();
+        searchParams.append("firstName", "John");
+        searchParams.append("lastName", "Doe");
+        await doOnFreshPreviewWithSearchParams(searchParams, page, context, async (page) => {
+          await selectFirstAvailableTimeSlotNextMonth(page);
+          await expectSystemFieldsToBeThereOnBookingPage({
+            page,
+            isFirstAndLastNameVariant: true,
+            values: {
+              name: {
+                firstName: "John",
+                lastName: "Doe",
+              },
+            },
+          });
+        });
+      });
+    });
+  });
+
+  test.describe("For Team EventType", () => {
+    test("Do a booking with a user added question and verify a few thing in b/w", async ({
+      page,
+      users,
+      context,
+    }, testInfo) => {
+      // Considering there are many steps in it, it would need more than default test timeout
+      test.setTimeout(testInfo.timeout * 3);
+      const user = await createAndLoginUserWithEventTypes({ users, page });
+      const team = await prisma.team.findFirst({
+        where: {
+          members: {
+            some: {
+              userId: user.id,
+            },
+          },
+        },
+        select: {
+          id: true,
+        },
+      });
+
+      const teamId = team?.id;
+      const webhookReceiver = await addWebhook(undefined, teamId);
+
+      await test.step("Go to First Team Event", async () => {
+        const $eventTypes = page.locator("[data-testid=event-types]").nth(1).locator("li a");
+        const firstEventTypeElement = $eventTypes.first();
+
+        await firstEventTypeElement.click();
+      });
+
+      await runTestStepsCommonForTeamAndUserEventType(page, context, webhookReceiver);
+    });
+  });
+});
+
+async function runTestStepsCommonForTeamAndUserEventType(
+  page: Page,
+  context: PlaywrightTestArgs["context"],
+  webhookReceiver: Awaited<ReturnType<typeof addWebhook>>
+) {
+  await page.click('[href$="tabName=advanced"]');
+
+  await test.step("Check that all the system questions are shown in the list", async () => {
+    await page.locator("[data-testid=field-name]").isVisible();
+    await page.locator("[data-testid=field-email]").isVisible();
+    await page.locator("[data-testid=field-notes]").isVisible();
+    await page.locator("[data-testid=field-guests]").isVisible();
+    await page.locator("[data-testid=field-rescheduleReason]").isVisible();
+    // It is conditional
+    // await page.locator("data-testid=field-location").isVisible();
+  });
+
+  await test.step("Add Question and see that it's shown on Booking Page at appropriate position", async () => {
+    await addQuestionAndSave({
+      page,
+      question: {
+        name: "how-are-you",
+        type: "Address",
+        label: "How are you?",
+        placeholder: "I'm fine, thanks",
+        required: true,
+      },
+    });
+
+    await doOnFreshPreview(page, context, async (page) => {
+      const allFieldsLocator = await expectSystemFieldsToBeThereOnBookingPage({ page });
+      const userFieldLocator = allFieldsLocator.nth(5);
+
+      await expect(userFieldLocator.locator('[name="how-are-you"]')).toBeVisible();
+      expect(await getLabelText(userFieldLocator)).toBe("How are you?");
+      await expect(userFieldLocator.locator("input")).toBeVisible();
+    });
+  });
+
+  await test.step("Hide Question and see that it's not shown on Booking Page", async () => {
+    await toggleQuestionAndSave({
+      name: "how-are-you",
+      page,
+    });
+    await doOnFreshPreview(page, context, async (page) => {
+      const formBuilderFieldLocator = page.locator('[data-fob-field-name="how-are-you"]');
+      await expect(formBuilderFieldLocator).toBeHidden();
+    });
+  });
+
+  await test.step("Show Question Again", async () => {
+    await toggleQuestionAndSave({
+      name: "how-are-you",
+      page,
+    });
+  });
+
+  await test.step('Try to book without providing "How are you?" response', async () => {
+    await doOnFreshPreview(page, context, async (page) => {
+      await bookTimeSlot({ page, name: "Booker", email: "booker@example.com" });
+      await expectErrorToBeThereFor({ page, name: "how-are-you" });
+    });
+  });
+
+  await test.step("Make rescheduleReason required - It won't be required for a fresh booking", async () => {
+    await toggleQuestionRequireStatusAndSave({
+      required: true,
+      name: "rescheduleReason",
+      page,
+    });
+  });
+
+  const previewTabPage =
+    await test.step("Do a booking and notice that we can book without giving a value for rescheduleReason", async () => {
+      return await doOnFreshPreview(
+        page,
+        context,
+        async (page) => {
+          const formBuilderFieldLocator = page.locator('[data-fob-field-name="how-are-you"]');
+          await expect(formBuilderFieldLocator).toBeVisible();
+          expect(
+            await formBuilderFieldLocator.locator('[name="how-are-you"]').getAttribute("placeholder")
+          ).toBe("I'm fine, thanks");
+          expect(await getLabelText(formBuilderFieldLocator)).toBe("How are you?");
+          await formBuilderFieldLocator.locator('[name="how-are-you"]').fill("I am great!");
+          await bookTimeSlot({ page, name: "Booker", email: "booker@example.com" });
+          await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+
+          expect(
+            await page.locator('[data-testid="field-response"][data-fob-field="how-are-you"]').innerText()
+          ).toBe("I am great!");
+
+          await webhookReceiver.waitForRequestCount(1);
+
+          const [request] = webhookReceiver.requestList;
+
+          // @ts-expect-error body is unknown
+          const payload = request.body.payload;
+
+          expect(payload.responses).toMatchObject({
+            email: {
+              label: "email_address",
+              value: "booker@example.com",
+            },
+            "how-are-you": {
+              label: "How are you?",
+              value: "I am great!",
+            },
+            name: {
+              label: "your_name",
+              value: "Booker",
+            },
+          });
+
+          expect(payload.attendees[0]).toMatchObject({
+            name: "Booker",
+            email: "booker@example.com",
+          });
+
+          expect(payload.userFieldsResponses).toMatchObject({
+            "how-are-you": {
+              label: "How are you?",
+              value: "I am great!",
+            },
+          });
+        },
+        true
+      );
+    });
+
+  await test.step("Do a reschedule and notice that we can't book without giving a value for rescheduleReason", async () => {
+    const page = previewTabPage;
+    await rescheduleFromTheLinkOnPage({ page });
+    await expectErrorToBeThereFor({ page, name: "rescheduleReason" });
+  });
+}
+
+async function expectSystemFieldsToBeThereOnBookingPage({
+  page,
+  isFirstAndLastNameVariant,
+  values,
+}: {
+  page: Page;
+  isFirstAndLastNameVariant?: boolean;
+  values?: Partial<{
+    name: {
+      firstName?: string;
+      lastName?: string;
+      fullName?: string;
+    };
+    email: string;
+    notes: string;
+    guests: string[];
+  }>;
+}) {
+  const allFieldsLocator = page.locator("[data-fob-field-name]:not(.hidden)");
+  const nameLocator = allFieldsLocator.nth(0);
+  const emailLocator = allFieldsLocator.nth(1);
+  // Location isn't rendered unless explicitly set which isn't the case here
+  // const locationLocator = allFieldsLocator.nth(2);
+  const additionalNotes = allFieldsLocator.nth(3);
+  const guestsLocator = allFieldsLocator.nth(4);
+
+  if (isFirstAndLastNameVariant) {
+    if (values?.name) {
+      await expect(nameLocator.locator('[name="firstName"]')).toHaveValue(values?.name?.firstName || "");
+      await expect(nameLocator.locator('[name="lastName"]')).toHaveValue(values?.name?.lastName || "");
+      expect(await nameLocator.locator(".testid-firstName > label").innerText()).toContain("*");
+    } else {
+      await expect(nameLocator.locator('[name="firstName"]')).toBeVisible();
+      await expect(nameLocator.locator('[name="lastName"]')).toBeVisible();
+    }
+  } else {
+    if (values?.name) {
+      await expect(nameLocator.locator('[name="name"]')).toHaveValue(values?.name?.fullName || "");
+    }
+    await expect(nameLocator.locator('[name="name"]')).toBeVisible();
+    expect(await nameLocator.locator("label").innerText()).toContain("*");
+  }
+
+  if (values?.email) {
+    await expect(emailLocator.locator('[name="email"]')).toHaveValue(values?.email || "");
+  } else {
+    await expect(emailLocator.locator('[name="email"]')).toBeVisible();
+  }
+
+  if (values?.notes) {
+    await expect(additionalNotes.locator('[name="notes"]')).toHaveValue(values?.notes);
+  } else {
+    await expect(additionalNotes.locator('[name="notes"]')).toBeVisible();
+  }
+
+  if (values?.guests) {
+    const allGuestsLocators = guestsLocator.locator('[type="email"]');
+    for (let i = 0; i < values.guests.length; i++) {
+      await expect(allGuestsLocators.nth(i)).toHaveValue(values.guests[i] || "");
+    }
+    await expect(guestsLocator.locator("[data-testid='add-another-guest']")).toBeVisible();
+  } else {
+    await expect(guestsLocator.locator("[data-testid='add-guests']")).toBeVisible();
+  }
+  return allFieldsLocator;
+}
+
+//TODO: Add one question for each type and see they are rendering labels and only once and are showing appropriate native component
+// Verify webhook is sent with the correct data, DB is correct (including metadata)
+
+//TODO: Verify that prefill works
+async function bookTimeSlot({
+  page,
+  name,
+  email,
+  skipSubmission = false,
+}: {
+  page: Page;
+  name?: string | { firstName: string; lastName?: string };
+  email?: string;
+  skipSubmission?: boolean;
+}) {
+  if (name) {
+    if (typeof name === "string") {
+      await page.fill('[name="name"]', name);
+    } else {
+      await page.fill('[name="firstName"]', name.firstName);
+      if (name.lastName) {
+        await page.fill('[name="lastName"]', name.lastName);
+      }
+    }
+  }
+  if (email) {
+    await page.fill('[name="email"]', email);
+  }
+  if (!skipSubmission) {
+    await page.press('[name="email"]', "Enter");
+  }
+}
+
+/**
+ * 'option' starts from 1
+ */
+async function selectOption({
+  page,
+  selector,
+  optionText,
+}: {
+  page: Page;
+  selector: { selector: string; nth: number };
+  optionText: string;
+}) {
+  const locatorForSelect = page.locator(selector.selector).nth(selector.nth);
+  await locatorForSelect.click();
+  await locatorForSelect.locator(`text="${optionText}"`).click();
+}
+
+async function addQuestionAndSave({
+  page,
+  question,
+}: {
+  page: Page;
+  question: {
+    name?: string;
+    type?: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+  };
+}) {
+  await page.click('[data-testid="add-field"]');
+
+  if (question.type !== undefined) {
+    await selectOption({
+      page,
+      selector: {
+        selector: "[id=test-field-type]",
+        nth: 0,
+      },
+      optionText: question.type,
+    });
+  }
+
+  if (question.name !== undefined) {
+    await page.fill('[name="name"]', question.name);
+  }
+
+  if (question.label !== undefined) {
+    await page.fill('[name="label"]', question.label);
+  }
+
+  if (question.placeholder !== undefined) {
+    await page.fill('[name="placeholder"]', question.placeholder);
+  }
+
+  if (question.required !== undefined) {
+    // await page.fill('[name="name"]', question.required);
+  }
+
+  await page.click('[data-testid="field-add-save"]');
+  await saveEventType(page);
+}
+
+async function expectErrorToBeThereFor({ page, name }: { page: Page; name: string }) {
+  await expect(page.locator(`[data-testid=error-message-${name}]`)).toHaveCount(1);
+  // TODO: We should either verify the error message or error code in the test so we know that the correct error is shown
+  // Checking for the error message isn't well maintainable as translation can change and we might want to verify in non english language as well.
+}
+
+/**
+ * Opens a fresh preview window and runs the callback on it giving it the preview tab's `page`
+ */
+async function doOnFreshPreview(
+  page: Page,
+  context: PlaywrightTestArgs["context"],
+  callback: (page: Page) => Promise<void>,
+  persistTab = false
+) {
+  const previewTabPage = await openBookingFormInPreviewTab(context, page);
+  await callback(previewTabPage);
+  if (!persistTab) {
+    await previewTabPage.close();
+  }
+  return previewTabPage;
+}
+
+async function doOnFreshPreviewWithSearchParams(
+  searchParams: URLSearchParams,
+  page: Page,
+  context: PlaywrightTestArgs["context"],
+  callback: (page: Page) => Promise<void>,
+  persistTab = false
+) {
+  const previewUrl = (await page.locator('[data-testid="preview-button"]').getAttribute("href")) || "";
+  const previewUrlObj = new URL(previewUrl);
+  searchParams.forEach((value, key) => {
+    previewUrlObj.searchParams.append(key, value);
+  });
+  const previewTabPage = await context.newPage();
+  await previewTabPage.goto(previewUrlObj.toString());
+  await callback(previewTabPage);
+  if (!persistTab) {
+    await previewTabPage.close();
+  }
+  return previewTabPage;
+}
+
+async function toggleQuestionAndSave({ name, page }: { name: string; page: Page }) {
+  await page.locator(`[data-testid="field-${name}"]`).locator('[data-testid="toggle-field"]').click();
+  await saveEventType(page);
+}
+
+async function toggleQuestionRequireStatusAndSave({
+  required,
+  name,
+  page,
+}: {
+  required: boolean;
+  name: string;
+  page: Page;
+}) {
+  await page.locator(`[data-testid="field-${name}"]`).locator('[data-testid="edit-field-action"]').click();
+  await page
+    .locator('[data-testid="edit-field-dialog"]')
+    .locator('[data-testid="field-required"] button')
+    .locator(`text=${required ? "Yes" : "No"}`)
+    .click();
+  await page.locator('[data-testid="field-add-save"]').click();
+  await saveEventType(page);
+}
+
+async function createAndLoginUserWithEventTypes({
+  users,
+  page,
+}: {
+  users: ReturnType<typeof createUsersFixture>;
+  page: Page;
+}) {
+  const user = await users.create(null, {
+    hasTeam: true,
+  });
+  await user.apiLogin();
+  await page.goto("/event-types");
+  // We wait until loading is finished
+  await page.waitForSelector('[data-testid="event-types"]');
+  return user;
+}
+
+async function rescheduleFromTheLinkOnPage({ page }: { page: Page }) {
+  await page.locator('[data-testid="reschedule-link"]').click();
+  await page.waitForLoadState();
+  await selectFirstAvailableTimeSlotNextMonth(page);
+  await page.click('[data-testid="confirm-reschedule-button"]');
+}
+
+async function openBookingFormInPreviewTab(context: PlaywrightTestArgs["context"], page: Page) {
+  const previewTabPromise = context.waitForEvent("page");
+  await page.locator('[data-testid="preview-button"]').click();
+  const previewTabPage = await previewTabPromise;
+  await previewTabPage.waitForLoadState();
+  await selectFirstAvailableTimeSlotNextMonth(previewTabPage);
+  return previewTabPage;
+}
+
+async function saveEventType(page: Page) {
+  await page.locator("[data-testid=update-eventtype]").click();
+}
+
+async function addWebhook(
+  user?: Awaited<ReturnType<typeof createAndLoginUserWithEventTypes>>,
+  teamId?: number | null
+) {
+  const webhookReceiver = createHttpServer();
+
+  const data: {
+    id: string;
+    subscriberUrl: string;
+    eventTriggers: WebhookTriggerEvents[];
+    userId?: number;
+    teamId?: number;
+  } = {
+    id: uuid(),
+    subscriberUrl: webhookReceiver.url,
+    eventTriggers: [
+      WebhookTriggerEvents.BOOKING_CREATED,
+      WebhookTriggerEvents.BOOKING_CANCELLED,
+      WebhookTriggerEvents.BOOKING_RESCHEDULED,
+    ],
+  };
+
+  if (teamId) {
+    data.teamId = teamId;
+  } else if (user) {
+    data.userId = user.id;
+  }
+
+  await prisma.webhook.create({ data });
+
+  return webhookReceiver;
+}
+
+async function expectWebhookToBeCalled(
+  webhookReceiver: Awaited<ReturnType<typeof addWebhook>>,
+  expectedBody: {
+    triggerEvent: WebhookTriggerEvents;
+    payload: Omit<Partial<CalendarEvent>, "attendees"> & {
+      attendees: Partial<CalendarEvent["attendees"][number]>[];
+    };
+  }
+) {
+  await webhookReceiver.waitForRequestCount(1);
+  const [request] = webhookReceiver.requestList;
+
+  const body = request.body;
+
+  expect(body).toMatchObject(expectedBody);
+}

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

@@ -0,0 +1,213 @@
+import type { Page } from "@playwright/test";
+import { expect } from "@playwright/test";
+
+import { IS_TEAM_BILLING_ENABLED } from "@calcom/lib/constants";
+
+import { test } from "./lib/fixtures";
+import {
+  bookTimeSlot,
+  fillStripeTestCheckout,
+  localize,
+  selectFirstAvailableTimeSlotNextMonth,
+} from "./lib/testUtils";
+
+test.afterAll(({ users }) => users.deleteAll());
+
+test.describe("Managed Event Types", () => {
+  test("Can create managed event type", async ({ page, users }) => {
+    // Creating the owner user of the team
+    const adminUser = await users.create();
+    // Creating the member user of the team
+    const memberUser = await users.create();
+    // First we work with owner user, logging in
+    await adminUser.apiLogin();
+
+    // Let's create a team
+    await page.goto("/settings/teams/new");
+
+    await test.step("Managed event option exists for team admin", async () => {
+      // Filling team creation form wizard
+      await page.locator('input[name="name"]').fill(`${adminUser.username}'s Team`);
+      await page.click("[type=submit]");
+      // TODO: Figure out a way to make this more reliable
+      // eslint-disable-next-line playwright/no-conditional-in-test
+      if (IS_TEAM_BILLING_ENABLED) await fillStripeTestCheckout(page);
+      await page.waitForURL(/\/settings\/teams\/(\d+)\/onboard-members.*$/i);
+      await page.getByTestId("new-member-button").click();
+      await page.locator('[placeholder="email\\@example\\.com"]').fill(`${memberUser.username}@example.com`);
+      await page.getByTestId("invite-new-member-button").click();
+      // wait for the second member to be added to the pending-member-list.
+      await page.getByTestId("pending-member-list").locator("li:nth-child(2)").waitFor();
+      // and publish
+      await page.locator("[data-testid=publish-button]").click();
+      await expect(page).toHaveURL(/\/settings\/teams\/(\d+)\/profile$/i);
+      // Going to create an event type
+      await page.goto("/event-types");
+      await page.getByTestId("new-event-type").click();
+      await page.getByTestId("option-team-1").click();
+      // Expecting we can add a managed event type as team owner
+      await expect(page.locator('button[value="MANAGED"]')).toBeVisible();
+
+      // Actually creating a managed event type to test things further
+      await page.click('button[value="MANAGED"]');
+      await page.fill("[name=title]", "managed");
+      await page.click("[type=submit]");
+
+      await page.waitForURL("event-types/**");
+    });
+
+    await test.step("Managed event type has unlocked fields for admin", async () => {
+      await page.getByTestId("vertical-tab-event_setup_tab_title").click();
+      await page.getByTestId("update-eventtype").waitFor();
+      await expect(page.locator('input[name="title"]')).toBeEditable();
+      await expect(page.locator('input[name="slug"]')).toBeEditable();
+      await expect(page.locator('input[name="length"]')).toBeEditable();
+      await adminUser.apiLogin();
+    });
+
+    await test.step("Managed event type exists for added member", async () => {
+      // Now we need to accept the invitation as member and come back in as admin to
+      // assign the member in the managed event type
+      await memberUser.apiLogin();
+
+      await page.goto("/teams");
+      await page.locator('button[data-testid^="accept-invitation"]').click();
+      await page.getByText("Member").waitFor();
+
+      await page.goto("/auth/logout");
+
+      // Coming back as team owner to assign member user to managed event
+      await adminUser.apiLogin();
+      await page.goto("/event-types");
+      await page.getByTestId("event-types").locator('a[title="managed"]').click();
+      await page.getByTestId("vertical-tab-assignment").click();
+      await page.getByTestId("assignment-dropdown").click();
+
+      await page.getByTestId(`select-option-${memberUser.id}`).click();
+      await page.locator('[type="submit"]').click();
+      await page.getByTestId("toast-success").waitFor();
+    });
+
+    await test.step("Managed event type can use Organizer's default app as location", async () => {
+      await page.getByTestId("vertical-tab-event_setup_tab_title").click();
+
+      await page.locator("#location-select").click();
+      const optionText = (await localize("en"))("organizer_default_conferencing_app");
+      await page.locator(`text=${optionText}`).click();
+      await page.locator("[data-testid=update-eventtype]").click();
+      await page.getByTestId("toast-success").waitFor();
+      await page.waitForLoadState("networkidle");
+
+      await page.getByTestId("vertical-tab-assignment").click();
+      await gotoBookingPage(page);
+      await selectFirstAvailableTimeSlotNextMonth(page);
+      await bookTimeSlot(page);
+
+      await expect(page.getByTestId("success-page")).toBeVisible();
+    });
+
+    await test.step("Managed event type has locked fields for added member", async () => {
+      await adminUser.logout();
+      // Coming back as member user to see if there is a managed event present after assignment
+      await memberUser.apiLogin();
+      await page.goto("/event-types");
+
+      await page.getByTestId("event-types").locator('a[title="managed"]').click();
+      await page.waitForURL("event-types/**");
+
+      await expect(page.locator('input[name="title"]')).not.toBeEditable();
+      await expect(page.locator('input[name="slug"]')).not.toBeEditable();
+      await expect(page.locator('input[name="length"]')).not.toBeEditable();
+
+      await page.goto("/auth/logout");
+    });
+
+    await test.step("Managed event type provides discrete field lock/unlock state for admin", async () => {
+      await adminUser.apiLogin();
+      await page.goto("/event-types");
+
+      await page.getByTestId("event-types").locator('a[title="managed"]').click();
+      await page.waitForURL("event-types/**");
+
+      // Locked by default
+      const titleLockIndicator = page.getByTestId("locked-indicator-title");
+      await expect(titleLockIndicator).toBeVisible();
+      await expect(titleLockIndicator.locator("[data-state='checked']")).toHaveCount(1);
+
+      // Proceed to unlock and check that it got unlocked
+      titleLockIndicator.click();
+      await expect(titleLockIndicator.locator("[data-state='checked']")).toHaveCount(0);
+      await expect(titleLockIndicator.locator("[data-state='unchecked']")).toHaveCount(1);
+
+      // Save changes
+      await page.locator('[type="submit"]').click();
+      await page.waitForLoadState("networkidle");
+
+      await page.goto("/auth/logout");
+    });
+
+    await test.step("Managed event type shows discretionally unlocked field to member", async () => {
+      await memberUser.apiLogin();
+      await page.goto("/event-types");
+
+      await page.getByTestId("event-types").locator('a[title="managed"]').click();
+      await page.waitForURL("event-types/**");
+
+      await expect(page.locator('input[name="title"]')).toBeEditable();
+      await page.waitForLoadState("networkidle");
+
+      await page.goto("/auth/logout");
+    });
+
+    await test.step("Managed event type should only update the unlocked fields modified by Admin", async () => {
+      await memberUser.apiLogin();
+      await page.goto("/event-types");
+
+      await page.getByTestId("event-types").locator('a[title="managed"]').click();
+      await page.waitForURL("event-types/**");
+
+      await expect(page.locator('input[name="title"]')).toBeEditable();
+      await page.locator('input[name="title"]').fill(`Managed Event Title`);
+      // Save changes
+      await page.locator('[type="submit"]').click();
+      await page.getByTestId("toast-success").waitFor();
+      await page.waitForLoadState("networkidle");
+
+      await page.goto("/auth/logout");
+
+      await adminUser.apiLogin();
+      await page.goto("/event-types");
+      await page.getByTestId("event-types").locator('a[title="managed"]').click();
+      await page.waitForURL("event-types/**");
+
+      await page.locator('input[name="length"]').fill(`45`);
+      // Save changes
+      await page.locator('[type="submit"]').click();
+      await page.getByTestId("toast-success").waitFor();
+      await page.waitForLoadState("networkidle");
+
+      await page.goto("/auth/logout");
+
+      await memberUser.apiLogin();
+      await page.goto("/event-types");
+
+      await page.getByTestId("event-types").locator('a[title="Managed Event Title"]').click();
+      await page.waitForURL("event-types/**");
+
+      //match length
+      expect(await page.locator("[data-testid=duration]").getAttribute("value")).toBe("45");
+      //ensure description didn't update
+      expect(await page.locator(`input[name="title"]`).getAttribute("value")).toBe(`Managed Event Title`);
+      await page.locator('input[name="title"]').fill(`managed`);
+      // Save changes
+      await page.locator('[type="submit"]').click();
+      await page.getByTestId("toast-success").waitFor();
+    });
+  });
+});
+
+async function gotoBookingPage(page: Page) {
+  const previewLink = await page.getByTestId("preview-button").getAttribute("href");
+
+  await page.goto(previewLink ?? "");
+}

calcom/apps/web/playwright/managedBooking/advancedOptions.e2e.ts

@@ -0,0 +1,43 @@
+import { test } from "../lib/fixtures";
+
+test.beforeEach(async ({ page, users, bookingPage }) => {
+  const teamEventTitle = "Test Managed Event Type";
+  const userFixture = await users.create(
+    { name: "testuser" },
+    { hasTeam: true, schedulingType: "MANAGED", teamEventTitle }
+  );
+  await userFixture.apiLogin();
+
+  await page.goto("/event-types");
+  await bookingPage.goToEventType(teamEventTitle);
+  await page.getByTestId("location-select").click();
+  await page.locator(`text="Cal Video (Global)"`).click();
+  await bookingPage.goToTab("event_advanced_tab_title");
+});
+
+test.describe("Check advanced options in a managed team event type", () => {
+  test("Check advanced options in a managed team event type without offer seats", async ({ bookingPage }) => {
+    await bookingPage.checkRequiresConfirmation();
+    await bookingPage.checkRequiresBookerEmailVerification();
+    await bookingPage.checkHideNotes();
+    await bookingPage.checkRedirectOnBooking();
+    await bookingPage.checkLockTimezone();
+    await bookingPage.updateEventType();
+    await bookingPage.goToEventTypesPage();
+
+    await bookingPage.checkEventType();
+  });
+
+  test("Check advanced options in a managed team event type with offer seats", async ({ bookingPage }) => {
+    await bookingPage.checkRequiresConfirmation();
+    await bookingPage.checkRequiresBookerEmailVerification();
+    await bookingPage.checkHideNotes();
+    await bookingPage.checkRedirectOnBooking();
+    await bookingPage.toggleOfferSeats();
+    await bookingPage.checkLockTimezone();
+    await bookingPage.updateEventType();
+    await bookingPage.goToEventTypesPage();
+
+    await bookingPage.checkEventType();
+  });
+});

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

@@ -0,0 +1,228 @@
+import { expect } from "@playwright/test";
+import { randomBytes } from "crypto";
+
+import { WEBAPP_URL } from "@calcom/lib/constants";
+import { prisma } from "@calcom/prisma";
+import { generateSecret } from "@calcom/trpc/server/routers/viewer/oAuth/addClient.handler";
+
+import { test } from "./lib/fixtures";
+
+test.afterEach(async ({ users }) => {
+  await users.deleteAll();
+});
+
+let client: {
+  clientId: string;
+  redirectUri: string;
+  orginalSecret: string;
+  name: string;
+  clientSecret: string;
+  logo: string | null;
+};
+
+test.describe("OAuth Provider", () => {
+  test.beforeAll(async () => {
+    client = await createTestCLient();
+  });
+  test("should create valid access toke & refresh token for user", async ({ page, users }) => {
+    const user = await users.create({ username: "test user", name: "test user" });
+    await user.apiLogin();
+
+    await page.goto(
+      `auth/oauth2/authorize?client_id=${client.clientId}&redirect_uri=${client.redirectUri}&response_type=code&scope=READ_PROFILE&state=1234`
+    );
+
+    await page.waitForLoadState("networkidle");
+    await page.getByTestId("allow-button").click();
+
+    await page.waitForFunction(() => {
+      return window.location.href.startsWith("https://example.com");
+    });
+
+    const url = new URL(page.url());
+
+    // authorization code that is returned to client with redirect uri
+    const code = url.searchParams.get("code");
+
+    // request token with authorization code
+    const tokenResponse = await fetch(`${WEBAPP_URL}/api/auth/oauth/token`, {
+      body: JSON.stringify({
+        code,
+        client_id: client.clientId,
+        client_secret: client.orginalSecret,
+        grant_type: "authorization_code",
+        redirect_uri: client.redirectUri,
+      }),
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    const tokenData = await tokenResponse.json();
+
+    // test if token is valid
+    const meResponse = await fetch(`${WEBAPP_URL}/api/auth/oauth/me`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${tokenData.access_token}`,
+      },
+    });
+
+    const meData = await meResponse.json();
+
+    // check if user access token is valid
+    expect(meData.username.startsWith("test user")).toBe(true);
+
+    // request new token with refresh token
+    const refreshTokenResponse = await fetch(`${WEBAPP_URL}/api/auth/oauth/refreshToken`, {
+      body: JSON.stringify({
+        refresh_token: tokenData.refresh_token,
+        client_id: client.clientId,
+        client_secret: client.orginalSecret,
+        grant_type: "refresh_token",
+      }),
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    const refreshTokenData = await refreshTokenResponse.json();
+
+    expect(refreshTokenData.access_token).not.toBe(tokenData.access_token);
+
+    const validTokenResponse = await fetch(`${WEBAPP_URL}/api/auth/oauth/me`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${tokenData.access_token}`,
+      },
+    });
+
+    expect(meData.username.startsWith("test user")).toBe(true);
+  });
+
+  test("should create valid access token & refresh token for team", async ({ page, users }) => {
+    const user = await users.create({ username: "test user", name: "test user" }, { hasTeam: true });
+    await user.apiLogin();
+
+    await page.goto(
+      `auth/oauth2/authorize?client_id=${client.clientId}&redirect_uri=${client.redirectUri}&response_type=code&scope=READ_PROFILE&state=1234`
+    );
+
+    await page.waitForLoadState("networkidle");
+
+    await page.locator("#account-select").click();
+
+    await page.locator("#react-select-2-option-1").click();
+
+    await page.getByTestId("allow-button").click();
+
+    await page.waitForFunction(() => {
+      return window.location.href.startsWith("https://example.com");
+    });
+
+    const url = new URL(page.url());
+
+    // authorization code that is returned to client with redirect uri
+    const code = url.searchParams.get("code");
+
+    // request token with authorization code
+    const tokenResponse = await fetch(`${WEBAPP_URL}/api/auth/oauth/token`, {
+      body: JSON.stringify({
+        code,
+        client_id: client.clientId,
+        client_secret: client.orginalSecret,
+        grant_type: "authorization_code",
+        redirect_uri: client.redirectUri,
+      }),
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    const tokenData = await tokenResponse.json();
+
+    // test if token is valid
+    const meResponse = await fetch(`${WEBAPP_URL}/api/auth/oauth/me`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${tokenData.access_token}`,
+      },
+    });
+
+    const meData = await meResponse.json();
+
+    // Check if team access token is valid
+    expect(meData.username).toEqual(`user-id-${user.id}'s Team`);
+
+    // request new token with refresh token
+    const refreshTokenResponse = await fetch(`${WEBAPP_URL}/api/auth/oauth/refreshToken`, {
+      body: JSON.stringify({
+        refresh_token: tokenData.refresh_token,
+        client_id: client.clientId,
+        client_secret: client.orginalSecret,
+        grant_type: "refresh_token",
+      }),
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    const refreshTokenData = await refreshTokenResponse.json();
+
+    expect(refreshTokenData.access_token).not.toBe(tokenData.access_token);
+
+    const validTokenResponse = await fetch(`${WEBAPP_URL}/api/auth/oauth/me`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${tokenData.access_token}`,
+      },
+    });
+
+    expect(meData.username).toEqual(`user-id-${user.id}'s Team`);
+  });
+
+  test("redirect not logged-in users to login page and after forward to authorization page", async ({
+    page,
+    users,
+  }) => {
+    const user = await users.create({ username: "test-user", name: "test user" });
+
+    await page.goto(
+      `auth/oauth2/authorize?client_id=${client.clientId}&redirect_uri=${client.redirectUri}&response_type=code&scope=READ_PROFILE&state=1234`
+    );
+
+    // check if user is redirected to login page
+    await expect(page.getByRole("heading", { name: "Welcome back" })).toBeVisible();
+    await page.locator("#email").fill(user.email);
+    await page.locator("#password").fill(user.username || "");
+    await page.locator('[type="submit"]').click();
+
+    await page.waitForSelector("#account-select");
+
+    await expect(page.getByText("test user")).toBeVisible();
+  });
+});
+
+const createTestCLient = async () => {
+  const [hashedSecret, secret] = generateSecret();
+  const clientId = randomBytes(32).toString("hex");
+
+  const client = await prisma.oAuthClient.create({
+    data: {
+      name: "Test Client",
+      clientId,
+      clientSecret: hashedSecret,
+      redirectUri: "https://example.com",
+    },
+  });
+
+  return { ...client, orginalSecret: secret };
+};

calcom/apps/web/playwright/oidc.e2e.ts

@@ -0,0 +1,71 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { test } from "./lib/fixtures";
+
+const SAML_DATABASE_URL = process.env.SAML_DATABASE_URL!;
+const SAML_ADMINS = process.env.SAML_ADMINS!;
+const SAML_ADMIN_EMAIL = process.env.E2E_TEST_SAML_ADMIN_EMAIL!;
+const SAML_ADMIN_PASSWORD = process.env.E2E_TEST_SAML_ADMIN_PASSWORD!;
+const OIDC_CLIENT_ID = process.env.E2E_TEST_OIDC_CLIENT_ID!;
+const OIDC_CLIENT_SECRET = process.env.E2E_TEST_OIDC_CLIENT_SECRET!;
+const OIDC_PROVIDER_DOMAIN = process.env.E2E_TEST_OIDC_PROVIDER_DOMAIN!;
+const OIDC_USER_EMAIL = process.env.E2E_TEST_OIDC_USER_EMAIL!;
+const OIDC_USER_PASSWORD = process.env.E2E_TEST_OIDC_USER_PASSWORD!;
+
+const SHOULD_SKIP_TESTS =
+  !SAML_DATABASE_URL ||
+  !SAML_ADMINS ||
+  !SAML_ADMIN_EMAIL ||
+  !SAML_ADMIN_PASSWORD ||
+  !OIDC_CLIENT_ID ||
+  !OIDC_CLIENT_SECRET ||
+  !OIDC_PROVIDER_DOMAIN ||
+  !OIDC_USER_EMAIL ||
+  !OIDC_USER_PASSWORD;
+
+test.afterEach(({ users }) => users.deleteAll());
+// TODO: Cleanup the OIDC connection after the tests with fixtures
+test.describe("OIDC", () => {
+  // eslint-disable-next-line playwright/no-skipped-test
+  test.skip(SHOULD_SKIP_TESTS, "Skipping due to missing the testing variables");
+  test("Setup with SAML admin and login", async ({ page, users }) => {
+    // Add the admin user provided in the environment variables to the db
+    const samlAdminUser = await users.create({ email: SAML_ADMIN_EMAIL, password: SAML_ADMIN_PASSWORD });
+    await samlAdminUser.apiLogin();
+    await test.step("Connect with OIDC Provider", async () => {
+      await page.goto("/settings/security/sso");
+      await page.click('[data-testid="sso-oidc-configure"]');
+      await page.fill('[data-testid="sso-oidc-client-id"]', OIDC_CLIENT_ID);
+      await page.fill('[data-testid="sso-oidc-client-secret"]', OIDC_CLIENT_SECRET);
+      await page.fill(
+        '[data-testid="sso-oidc-well-known-url"]',
+        `https://${OIDC_PROVIDER_DOMAIN}/.well-known/openid-configuration`
+      );
+      await page.click('[data-testid="sso-oidc-save"]');
+      await page.waitForSelector('[data-testid="toast-success"]');
+    });
+    // Logout the SAML Admin
+    await samlAdminUser.logout();
+    await test.step("Login using the OIDC provider", async () => {
+      // Login a user using the OIDC provider.
+      // The credentials are handled by the provider, so we don't need to create a user in the db.
+      await page.goto("/auth/login");
+      await page.click('[data-testid="saml"]');
+      // Redirected outide of the app, the user would be redirected to the OIDC provider.
+      await page.waitForURL(/https:\/\/[^/]+\/oauth2\/v1\/authorize\?.*/);
+      await page.getByRole("textbox", { name: "Username" }).fill(OIDC_USER_EMAIL);
+      await page.getByRole("textbox", { name: "Password" }).fill(OIDC_USER_PASSWORD);
+      await page.getByRole("button", { name: "Sign in" }).click();
+      // The user is redirected back to the app.
+      await page.waitForURL("getting-started", { waitUntil: "load" });
+    });
+    // Logout the user.
+    await page.goto("/auth/logout");
+    await test.step("Disconnect OIDC Provider", async () => {
+      samlAdminUser.apiLogin();
+      await page.goto("/settings/security/sso", { waitUntil: "load" });
+      await page.getByTestId("delete-oidc-sso-connection").click();
+      await page.getByRole("button", { name: "Yes, delete OIDC configuration" }).click();
+      await page.waitForSelector('[data-testid="toast-success"]');
+    });
+  });
+});

calcom/apps/web/playwright/onboarding.e2e.ts

@@ -0,0 +1,83 @@
+/* eslint-disable playwright/no-skipped-test */
+import { expect } from "@playwright/test";
+
+import { test } from "./lib/fixtures";
+
+test.describe.configure({ mode: "serial" });
+
+test.afterEach(({ users }) => users.deleteAll());
+
+test.describe("Onboarding", () => {
+  test.describe("Onboarding v2", () => {
+    test("Onboarding Flow", async ({ page, users }) => {
+      const user = await users.create({ completedOnboarding: false, name: null });
+      await user.apiLogin();
+      await page.goto("/getting-started");
+      // tests whether the user makes it to /getting-started
+      // after login with completedOnboarding false
+      await page.waitForURL("/getting-started");
+
+      await test.step("step 1", async () => {
+        // Check required fields
+        await page.locator("button[type=submit]").click();
+        await expect(page.locator("data-testid=required")).toBeVisible();
+
+        // happy path
+        await page.locator("input[name=username]").fill("new user onboarding");
+        await page.locator("input[name=name]").fill("new user 2");
+        await page.locator("input[role=combobox]").click();
+        await page
+          .locator("*")
+          .filter({ hasText: /^Europe\/London/ })
+          .first()
+          .click();
+
+        await page.locator("button[type=submit]").click();
+
+        // should be on step 2 now.
+        await expect(page).toHaveURL(/.*connected-calendar/);
+
+        const userComplete = await user.self();
+        expect(userComplete.name).toBe("new user 2");
+      });
+
+      await test.step("step 2", async () => {
+        const isDisabled = await page.locator("button[data-testid=save-calendar-button]").isDisabled();
+        await expect(isDisabled).toBe(true);
+        // tests skip button, we don't want to test entire flow.
+        await page.locator("button[data-testid=skip-step]").click();
+
+        await expect(page).toHaveURL(/.*connected-video/);
+      });
+
+      await test.step("step 3", async () => {
+        const isDisabled = await page.locator("button[data-testid=save-video-button]").isDisabled();
+        await expect(isDisabled).toBe(true);
+        // tests skip button, we don't want to test entire flow.
+        await page.locator("button[data-testid=skip-step]").click();
+
+        await expect(page).toHaveURL(/.*setup-availability/);
+      });
+
+      await test.step("step 4", async () => {
+        const isDisabled = await page.locator("button[data-testid=save-availability]").isDisabled();
+        await expect(isDisabled).toBe(false);
+        // same here, skip this step.
+        await page.locator("button[data-testid=save-availability]").click();
+
+        await expect(page).toHaveURL(/.*user-profile/);
+      });
+
+      await test.step("step 5", async () => {
+        await page.locator("button[type=submit]").click();
+
+        // should redirect to /event-types after onboarding
+        await page.waitForURL("/event-types");
+
+        const userComplete = await user.self();
+
+        expect(userComplete.bio?.replace("<p><br></p>", "").length).toBe(0);
+      });
+    });
+  });
+});

calcom/apps/web/playwright/organization/across-org/across-org.e2e.ts

@@ -0,0 +1,100 @@
+import { expect } from "@playwright/test";
+
+import { WEBAPP_URL } from "@calcom/lib/constants";
+import prisma from "@calcom/prisma";
+
+import { test } from "../../lib/fixtures";
+
+test.afterAll(({ users }) => {
+  users.deleteAll();
+});
+
+test.describe("user1NotMemberOfOrg1 is part of team1MemberOfOrg1", () => {
+  test("Team1 profile should show correct domain if logged in as User1", async ({ page, users, orgs }) => {
+    const org = await orgs.create({
+      name: "TestOrg",
+    });
+
+    const user1NotMemberOfOrg1 = await users.create(undefined, {
+      hasTeam: true,
+    });
+
+    const { team: team1MemberOfOrg1 } = await user1NotMemberOfOrg1.getFirstTeamMembership();
+    await moveTeamToOrg({ team: team1MemberOfOrg1, org });
+
+    await user1NotMemberOfOrg1.apiLogin();
+
+    await page.goto(`/settings/teams/${team1MemberOfOrg1.id}/profile`);
+    const domain = await page.locator(".testid-leading-text-team-url").textContent();
+    expect(domain).toContain(org.slug);
+  });
+
+  test("EventTypes listing should show correct link for user events and team1MemberOfOrg1's events", async ({
+    page,
+    users,
+    orgs,
+  }) => {
+    const org = await orgs.create({
+      name: "TestOrg",
+    });
+
+    const user1NotMemberOfOrg1 = await users.create(undefined, {
+      hasTeam: true,
+    });
+
+    const { team: team1MemberOfOrg1 } = await user1NotMemberOfOrg1.getFirstTeamMembership();
+    await moveTeamToOrg({ team: team1MemberOfOrg1, org });
+
+    await user1NotMemberOfOrg1.apiLogin();
+    await page.goto("/event-types");
+    await page.waitForLoadState("networkidle");
+
+    const userEventLinksLocators = await page
+      .locator(`[data-testid=slug-${user1NotMemberOfOrg1.username}] [data-testid="preview-link-button"]`)
+      .all();
+
+    expect(userEventLinksLocators.length).toBeGreaterThan(0);
+
+    for (const userEventLinkLocator of userEventLinksLocators) {
+      const href = await userEventLinkLocator.getAttribute("href");
+      expect(href).toContain(WEBAPP_URL);
+    }
+
+    const teamEventLinksLocators = await page
+      .locator(`[data-testid=slug-${team1MemberOfOrg1.slug}] [data-testid="preview-link-button"]`)
+      .all();
+
+    expect(teamEventLinksLocators.length).toBeGreaterThan(0);
+
+    for (const teamEventLinksLocator of teamEventLinksLocators) {
+      const href = await teamEventLinksLocator.getAttribute("href");
+      expect(href).not.toContain(WEBAPP_URL);
+      expect(href).toContain(org.slug);
+    }
+  });
+});
+
+async function moveTeamToOrg({
+  team,
+  org,
+}: {
+  team: {
+    id: number;
+  };
+  org: {
+    id: number;
+  };
+}) {
+  await prisma.team.update({
+    where: {
+      id: team.id,
+    },
+    data: {
+      parent: {
+        connect: {
+          id: org.id,
+        },
+      },
+    },
+  });
+}

calcom/apps/web/playwright/organization/booking.e2e.ts

@@ -0,0 +1,528 @@
+import type { Page } from "@playwright/test";
+import { expect } from "@playwright/test";
+import { JSDOM } from "jsdom";
+import { uuid } from "short-uuid";
+
+import { getOrgUsernameFromEmail } from "@calcom/features/auth/signup/utils/getOrgUsernameFromEmail";
+import { WEBAPP_URL } from "@calcom/lib/constants";
+import { MembershipRole, SchedulingType } from "@calcom/prisma/enums";
+
+import { test } from "../lib/fixtures";
+import {
+  bookTimeSlot,
+  doOnOrgDomain,
+  selectFirstAvailableTimeSlotNextMonth,
+  testName,
+} from "../lib/testUtils";
+import { expectExistingUserToBeInvitedToOrganization } from "../team/expects";
+import { gotoPathAndExpectRedirectToOrgDomain } from "./lib/gotoPathAndExpectRedirectToOrgDomain";
+import { acceptTeamOrOrgInvite, inviteExistingUserToOrganization } from "./lib/inviteUser";
+
+function getOrgOrigin(orgSlug: string | null) {
+  if (!orgSlug) {
+    throw new Error("orgSlug is required");
+  }
+
+  let orgOrigin = WEBAPP_URL.replace("://app", `://${orgSlug}`);
+  orgOrigin = orgOrigin.includes(orgSlug) ? orgOrigin : WEBAPP_URL.replace("://", `://${orgSlug}.`);
+  return orgOrigin;
+}
+
+test.describe("Bookings", () => {
+  test.afterEach(async ({ orgs, users, page }) => {
+    await users.deleteAll();
+    await orgs.deleteAll();
+  });
+
+  test.describe("Team Event", () => {
+    test("Can create a booking for Collective EventType", async ({ page, users, orgs }) => {
+      const org = await orgs.create({
+        name: "TestOrg",
+      });
+      const teamMatesObj = [
+        { name: "teammate-1" },
+        { name: "teammate-2" },
+        { name: "teammate-3" },
+        { name: "teammate-4" },
+      ];
+
+      const owner = await users.create(
+        {
+          username: "pro-user",
+          name: "pro-user",
+          organizationId: org.id,
+          roleInOrganization: MembershipRole.MEMBER,
+        },
+        {
+          hasTeam: true,
+          teammates: teamMatesObj,
+          schedulingType: SchedulingType.COLLECTIVE,
+        }
+      );
+      const { team } = await owner.getFirstTeamMembership();
+      const teamEvent = await owner.getFirstTeamEvent(team.id);
+
+      await expectPageToBeNotFound({ page, url: `/team/${team.slug}/${teamEvent.slug}` });
+      await doOnOrgDomain(
+        {
+          orgSlug: org.slug,
+          page,
+        },
+        async () => {
+          await bookTeamEvent({ page, team, event: teamEvent });
+          // All the teammates should be in the booking
+          for (const teammate of teamMatesObj.concat([{ name: owner.name || "" }])) {
+            await expect(page.getByText(teammate.name, { exact: true })).toBeVisible();
+          }
+        }
+      );
+
+      // TODO: Assert whether the user received an email
+    });
+
+    test("Can create a booking for Round Robin EventType", async ({ page, users, orgs }) => {
+      const org = await orgs.create({
+        name: "TestOrg",
+      });
+      const teamMatesObj = [
+        { name: "teammate-1" },
+        { name: "teammate-2" },
+        { name: "teammate-3" },
+        { name: "teammate-4" },
+      ];
+      const owner = await users.create(
+        {
+          username: "pro-user",
+          name: "pro-user",
+          organizationId: org.id,
+          roleInOrganization: MembershipRole.MEMBER,
+        },
+        {
+          hasTeam: true,
+          teammates: teamMatesObj,
+          schedulingType: SchedulingType.ROUND_ROBIN,
+        }
+      );
+
+      const { team } = await owner.getFirstTeamMembership();
+      const teamEvent = await owner.getFirstTeamEvent(team.id);
+
+      await expectPageToBeNotFound({ page, url: `/team/${team.slug}/${teamEvent.slug}` });
+
+      await doOnOrgDomain(
+        {
+          orgSlug: org.slug,
+          page,
+        },
+        async () => {
+          await bookTeamEvent({ page, team, event: teamEvent, teamMatesObj });
+
+          // Since all the users have the same leastRecentlyBooked value
+          // Anyone of the teammates could be the Host of the booking.
+          const chosenUser = await page.getByTestId("booking-host-name").textContent();
+          expect(chosenUser).not.toBeNull();
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          expect(teamMatesObj.concat([{ name: owner.name! }]).some(({ name }) => name === chosenUser)).toBe(
+            true
+          );
+        }
+      );
+      // TODO: Assert whether the user received an email
+    });
+
+    test("Can access booking page with event slug and team page in lowercase/uppercase/mixedcase", async ({
+      page,
+      orgs,
+      users,
+    }) => {
+      const org = await orgs.create({
+        name: "TestOrg",
+      });
+      const teamMatesObj = [
+        { name: "teammate-1" },
+        { name: "teammate-2" },
+        { name: "teammate-3" },
+        { name: "teammate-4" },
+      ];
+
+      const owner = await users.create(
+        {
+          username: "pro-user",
+          name: "pro-user",
+          organizationId: org.id,
+          roleInOrganization: MembershipRole.MEMBER,
+        },
+        {
+          hasTeam: true,
+          teammates: teamMatesObj,
+          schedulingType: SchedulingType.COLLECTIVE,
+        }
+      );
+      const { team } = await owner.getFirstTeamMembership();
+      const { slug: teamEventSlug } = await owner.getFirstTeamEvent(team.id);
+
+      const teamSlugUpperCase = team.slug?.toUpperCase();
+      const teamEventSlugUpperCase = teamEventSlug.toUpperCase();
+
+      // This is the most closest to the actual user flow as org1.cal.com maps to /org/orgSlug
+      await page.goto(`/org/${org.slug}/${teamSlugUpperCase}/${teamEventSlugUpperCase}`);
+      await page.waitForSelector("[data-testid=day]");
+    });
+  });
+
+  test.describe("User Event", () => {
+    test("Can create a booking", async ({ page, users, orgs }) => {
+      const org = await orgs.create({
+        name: "TestOrg",
+      });
+
+      const user = await users.create({
+        username: "pro-user",
+        name: "pro-user",
+        organizationId: org.id,
+        roleInOrganization: MembershipRole.MEMBER,
+      });
+
+      const event = await user.getFirstEventAsOwner();
+      await expectPageToBeNotFound({ page, url: `/${user.username}/${event.slug}` });
+
+      await doOnOrgDomain(
+        {
+          orgSlug: org.slug,
+          page,
+        },
+        async () => {
+          await bookUserEvent({ page, user, event });
+        }
+      );
+    });
+
+    test.describe("User Event with same slug as another user's", () => {
+      test("booking is created for first user when first user is booked", async ({ page, users, orgs }) => {
+        const org = await orgs.create({
+          name: "TestOrg",
+        });
+
+        const user1 = await users.create({
+          username: "user1",
+          name: "User 1",
+          organizationId: org.id,
+          roleInOrganization: MembershipRole.MEMBER,
+        });
+
+        const user2 = await users.create({
+          username: "user2",
+          name: "User2",
+          organizationId: org.id,
+          roleInOrganization: MembershipRole.MEMBER,
+        });
+
+        const user1Event = await user1.getFirstEventAsOwner();
+
+        await doOnOrgDomain(
+          {
+            orgSlug: org.slug,
+            page,
+          },
+          async () => {
+            await bookUserEvent({ page, user: user1, event: user1Event });
+          }
+        );
+      });
+      test("booking is created for second user when second user is booked", async ({ page, users, orgs }) => {
+        const org = await orgs.create({
+          name: "TestOrg",
+        });
+
+        const user1 = await users.create({
+          username: "user1",
+          name: "User 1",
+          organizationId: org.id,
+          roleInOrganization: MembershipRole.MEMBER,
+        });
+
+        const user2 = await users.create({
+          username: "user2",
+          name: "User2",
+          organizationId: org.id,
+          roleInOrganization: MembershipRole.MEMBER,
+        });
+
+        const user2Event = await user2.getFirstEventAsOwner();
+
+        await doOnOrgDomain(
+          {
+            orgSlug: org.slug,
+            page,
+          },
+          async () => {
+            await bookUserEvent({ page, user: user2, event: user2Event });
+          }
+        );
+      });
+    });
+
+    test("check SSR and OG ", async ({ page, users, orgs }) => {
+      const name = "Test User";
+      const org = await orgs.create({
+        name: "TestOrg",
+      });
+
+      const user = await users.create({
+        name,
+        organizationId: org.id,
+        roleInOrganization: MembershipRole.MEMBER,
+      });
+
+      const firstEventType = await user.getFirstEventAsOwner();
+      const calLink = `/${user.username}/${firstEventType.slug}`;
+      await doOnOrgDomain(
+        {
+          orgSlug: org.slug,
+          page,
+        },
+        async () => {
+          const [response] = await Promise.all([
+            // This promise resolves to the main resource response
+            page.waitForResponse(
+              (response) => response.url().includes(`${calLink}`) && response.status() === 200
+            ),
+
+            // Trigger the page navigation
+            page.goto(`${calLink}`),
+          ]);
+          const ssrResponse = await response.text();
+          const document = new JSDOM(ssrResponse).window.document;
+          const orgOrigin = getOrgOrigin(org.slug);
+          const titleText = document.querySelector("title")?.textContent;
+          const ogImage = document.querySelector('meta[property="og:image"]')?.getAttribute("content");
+          const ogUrl = document.querySelector('meta[property="og:url"]')?.getAttribute("content");
+          const canonicalLink = document.querySelector('link[rel="canonical"]')?.getAttribute("href");
+          expect(titleText).toContain(name);
+          expect(ogUrl).toEqual(`${orgOrigin}${calLink}`);
+          expect(canonicalLink).toEqual(`${orgOrigin}${calLink}`);
+          // Verify that there is correct URL that would generate the awesome OG image
+          expect(ogImage).toContain(
+            "/_next/image?w=1200&q=100&url=%2Fapi%2Fsocial%2Fog%2Fimage%3Ftype%3Dmeeting%26title%3D"
+          );
+          // Verify Organizer Name in the URL
+          expect(ogImage).toContain("meetingProfileName%3DTest%2520User%26");
+        }
+      );
+    });
+  });
+
+  test.describe("Scenario with same username in and outside organization", () => {
+    test("Can create a booking for user with same username in and outside organization", async ({
+      page,
+      users,
+      orgs,
+    }) => {
+      const org = await orgs.create({
+        name: "TestOrg",
+      });
+
+      const username = "john";
+      const userInsideOrganization = await users.create({
+        username,
+        useExactUsername: true,
+        email: `john-inside-${uuid()}@example.com`,
+        name: "John Inside Organization",
+        organizationId: org.id,
+        roleInOrganization: MembershipRole.MEMBER,
+        eventTypes: [
+          {
+            title: "John Inside Org's Meeting",
+            slug: "john-inside-org-meeting",
+            length: 15,
+          },
+        ],
+      });
+
+      const userOutsideOrganization = await users.create({
+        username,
+        name: "John Outside Organization",
+        email: `john-outside-${uuid()}@example.com`,
+        useExactUsername: true,
+        eventTypes: [
+          {
+            title: "John Outside Org's Meeting",
+            slug: "john-outside-org-meeting",
+            length: 15,
+          },
+        ],
+      });
+
+      const eventForUserInsideOrganization = await userInsideOrganization.getFirstEventAsOwner();
+      const eventForUserOutsideOrganization = await userOutsideOrganization.getFirstEventAsOwner();
+
+      // John Inside Org's meeting can't be accessed on userOutsideOrganization's namespace
+      await expectPageToBeNotFound({
+        page,
+        url: `/${userOutsideOrganization.username}/john-inside-org-meeting`,
+      });
+
+      await bookUserEvent({ page, user: userOutsideOrganization, event: eventForUserOutsideOrganization });
+
+      await doOnOrgDomain(
+        {
+          orgSlug: org.slug,
+          page,
+        },
+        async () => {
+          // John Outside Org's meeting can't be accessed on userInsideOrganization's namespaces
+          await expectPageToBeNotFound({
+            page,
+            url: `/${userInsideOrganization.username}/john-outside-org-meeting`,
+          });
+          await bookUserEvent({ page, user: userInsideOrganization, event: eventForUserInsideOrganization });
+        }
+      );
+    });
+  });
+
+  test.describe("Inviting an existing user and then", () => {
+    test("create a booking on new link", async ({ page, browser, users, orgs, emails }) => {
+      const org = await orgs.create({
+        name: "TestOrg",
+      });
+
+      const owner = await users.create({
+        username: "owner",
+        name: "owner",
+        organizationId: org.id,
+        roleInOrganization: MembershipRole.OWNER,
+      });
+
+      const userOutsideOrganization = await users.create({
+        username: "john",
+        name: "John Outside Organization",
+      });
+
+      await owner.apiLogin();
+
+      const { invitedUserEmail } = await inviteExistingUserToOrganization({
+        page,
+        organizationId: org.id,
+        user: userOutsideOrganization,
+        usersFixture: users,
+      });
+
+      const inviteLink = await expectExistingUserToBeInvitedToOrganization(page, emails, invitedUserEmail);
+      if (!inviteLink) {
+        throw new Error("Invite link not found");
+      }
+      const usernameInOrg = getOrgUsernameFromEmail(
+        invitedUserEmail,
+        org.organizationSettings?.orgAutoAcceptEmail ?? null
+      );
+
+      const usernameOutsideOrg = userOutsideOrganization.username;
+      // Before invite is accepted the booking page isn't available
+      await expectPageToBeNotFound({ page, url: `/${usernameInOrg}` });
+      await userOutsideOrganization.apiLogin();
+      await acceptTeamOrOrgInvite(page);
+      await test.step("Book through new link", async () => {
+        await doOnOrgDomain(
+          {
+            orgSlug: org.slug,
+            page,
+          },
+          async () => {
+            await bookUserEvent({
+              page,
+              user: {
+                username: usernameInOrg,
+                name: userOutsideOrganization.name,
+              },
+              event: await userOutsideOrganization.getFirstEventAsOwner(),
+            });
+          }
+        );
+      });
+
+      await test.step("Booking through old link redirects to new link on org domain", async () => {
+        const event = await userOutsideOrganization.getFirstEventAsOwner();
+        await gotoPathAndExpectRedirectToOrgDomain({
+          page,
+          org,
+          path: `/${usernameOutsideOrg}/${event.slug}`,
+          expectedPath: `/${usernameInOrg}/${event.slug}`,
+        });
+        // As the redirection correctly happens, the booking would work too which we have verified in previous step. But we can't test that with org domain as that domain doesn't exist.
+      });
+    });
+  });
+});
+
+async function bookUserEvent({
+  page,
+  user,
+  event,
+}: {
+  page: Page;
+  user: {
+    username: string | null;
+    name: string | null;
+  };
+  event: { slug: string; title: string };
+}) {
+  await page.goto(`/${user.username}/${event.slug}`);
+
+  await selectFirstAvailableTimeSlotNextMonth(page);
+  await bookTimeSlot(page);
+  await expect(page.getByTestId("success-page")).toBeVisible();
+
+  // The title of the booking
+  const BookingTitle = `${event.title} between ${user.name} and ${testName}`;
+  await expect(page.getByTestId("booking-title")).toHaveText(BookingTitle);
+  // The booker should be in the attendee list
+  await expect(page.getByTestId(`attendee-name-${testName}`)).toHaveText(testName);
+}
+
+async function bookTeamEvent({
+  page,
+  team,
+  event,
+  teamMatesObj,
+}: {
+  page: Page;
+  team: {
+    slug: string | null;
+    name: string | null;
+  };
+  event: { slug: string; title: string; schedulingType: SchedulingType | null };
+  teamMatesObj?: { name: string }[];
+}) {
+  // Note that even though the default way to access a team booking in an organization is to not use /team in the URL, but it isn't testable with playwright as the rewrite is taken care of by Next.js config which can't handle on the fly org slug's handling
+  // So, we are using /team in the URL to access the team booking
+  // There are separate tests to verify that the next.config.js rewrites are working
+  // Also there are additional checkly tests that verify absolute e2e flow. They are in __checks__/organization.spec.ts
+  await page.goto(`/team/${team.slug}/${event.slug}`);
+
+  await selectFirstAvailableTimeSlotNextMonth(page);
+  await bookTimeSlot(page);
+  await expect(page.getByTestId("success-page")).toBeVisible();
+
+  // The title of the booking
+  if (event.schedulingType === SchedulingType.ROUND_ROBIN) {
+    const bookingTitle = await page.getByTestId("booking-title").textContent();
+
+    expect(
+      teamMatesObj?.some((teamMate) => {
+        const BookingTitle = `${event.title} between ${teamMate.name} and ${testName}`;
+        return BookingTitle === bookingTitle;
+      })
+    ).toBe(true);
+  } else {
+    const BookingTitle = `${event.title} between ${team.name} and ${testName}`;
+    await expect(page.getByTestId("booking-title")).toHaveText(BookingTitle);
+  }
+  // The booker should be in the attendee list
+  await expect(page.getByTestId(`attendee-name-${testName}`)).toHaveText(testName);
+}
+
+async function expectPageToBeNotFound({ page, url }: { page: Page; url: string }) {
+  await page.goto(`${url}`);
+  await expect(page.getByTestId(`404-page`)).toBeVisible();
+}

calcom/apps/web/playwright/organization/expects.ts

@@ -0,0 +1,29 @@
+import type { Page } from "@playwright/test";
+import { expect } from "@playwright/test";
+import { JSDOM } from "jsdom";
+// eslint-disable-next-line no-restricted-imports
+import type { Messages } from "mailhog";
+import type { createEmailsFixture } from "playwright/fixtures/emails";
+
+import { getEmailsReceivedByUser } from "../lib/testUtils";
+
+export async function expectInvitationEmailToBeReceived(
+  page: Page,
+  emails: ReturnType<typeof createEmailsFixture>,
+  userEmail: string,
+  subject: string,
+  returnLink?: string
+) {
+  if (!emails) return null;
+  // We need to wait for the email to go through, otherwise it will fail
+  // eslint-disable-next-line playwright/no-wait-for-timeout
+  await page.waitForTimeout(2000);
+  const receivedEmails = await getEmailsReceivedByUser({ emails, userEmail });
+  expect(receivedEmails?.total).toBe(1);
+  const [firstReceivedEmail] = (receivedEmails as Messages).items;
+  expect(firstReceivedEmail.subject).toBe(subject);
+  if (!returnLink) return;
+  const dom = new JSDOM(firstReceivedEmail.html);
+  const anchor = dom.window.document.querySelector(`a[href*="${returnLink}"]`);
+  return anchor?.getAttribute("href");
+}

calcom/apps/web/playwright/organization/lib/gotoPathAndExpectRedirectToOrgDomain.ts

@@ -0,0 +1,40 @@
+import type { Page } from "@playwright/test";
+import { expect } from "@playwright/test";
+
+import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomains";
+
+export async function gotoPathAndExpectRedirectToOrgDomain({
+  page,
+  org,
+  path,
+  expectedPath,
+}: {
+  page: Page;
+  org: { slug: string | null };
+  path: string;
+  expectedPath: string;
+}) {
+  if (!org.slug) {
+    throw new Error("Org slug is not defined");
+  }
+  page.goto(path).catch((e) => {
+    console.log("Expected navigation error to happen");
+  });
+
+  const orgSlug = org.slug;
+
+  const orgRedirectUrl = await new Promise(async (resolve) => {
+    page.on("request", (request) => {
+      if (request.isNavigationRequest()) {
+        const requestedUrl = request.url();
+        console.log("Requested navigation to", requestedUrl);
+        // Resolve on redirection to org domain
+        if (requestedUrl.includes(orgSlug)) {
+          resolve(requestedUrl);
+        }
+      }
+    });
+  });
+
+  expect(orgRedirectUrl).toContain(`${getOrgFullOrigin(org.slug)}${expectedPath}`);
+}

calcom/apps/web/playwright/organization/lib/inviteUser.ts

@@ -0,0 +1,57 @@
+import type { Page } from "@playwright/test";
+import type { createUsersFixture } from "playwright/fixtures/users";
+
+export const inviteUserToOrganization = async ({
+  page,
+  organizationId,
+  email,
+  usersFixture,
+}: {
+  page: Page;
+  organizationId: number;
+  email: string;
+  usersFixture: ReturnType<typeof createUsersFixture>;
+}) => {
+  await page.goto("/settings/organizations/members");
+  await page.waitForLoadState("networkidle");
+  const invitedUserEmail = usersFixture.trackEmail({
+    username: email.split("@")[0],
+    domain: email.split("@")[1],
+  });
+  await inviteAnEmail(page, invitedUserEmail);
+  return { invitedUserEmail };
+};
+
+export const inviteExistingUserToOrganization = async ({
+  page,
+  organizationId,
+  user,
+  usersFixture,
+}: {
+  page: Page;
+  organizationId: number;
+  user: {
+    email: string;
+  };
+  usersFixture: ReturnType<typeof createUsersFixture>;
+}) => {
+  await page.goto("/settings/organizations/members");
+  await page.waitForLoadState("networkidle");
+
+  await inviteAnEmail(page, user.email);
+  await page.waitForSelector('[data-testid="toast-success"]');
+  return { invitedUserEmail: user.email };
+};
+
+export async function acceptTeamOrOrgInvite(page: Page) {
+  await page.goto("/settings/teams");
+  await page.click('[data-testid^="accept-invitation"]');
+  await page.waitForLoadState("networkidle");
+}
+
+async function inviteAnEmail(page: Page, invitedUserEmail: string) {
+  await page.locator('button:text("Add")').click();
+  await page.locator('input[name="inviteUser"]').fill(invitedUserEmail);
+  await page.locator('button:text("Send invite")').click();
+  await page.waitForLoadState("networkidle");
+}

calcom/apps/web/playwright/organization/organization-creation.e2e.ts

@@ -0,0 +1,588 @@
+import type { Page } from "@playwright/test";
+import { expect } from "@playwright/test";
+import { JSDOM } from "jsdom";
+import type { Messages } from "mailhog";
+import path from "path";
+import { uuid } from "short-uuid";
+
+import { IS_TEAM_BILLING_ENABLED } from "@calcom/lib/constants";
+
+import type { createEmailsFixture } from "../fixtures/emails";
+import { test } from "../lib/fixtures";
+import { fillStripeTestCheckout } from "../lib/testUtils";
+import { getEmailsReceivedByUser } from "../lib/testUtils";
+import { gotoPathAndExpectRedirectToOrgDomain } from "./lib/gotoPathAndExpectRedirectToOrgDomain";
+
+async function expectEmailWithSubject(
+  page: Page,
+  emails: ReturnType<typeof createEmailsFixture>,
+  userEmail: string,
+  subject: string
+) {
+  if (!emails) return null;
+
+  // eslint-disable-next-line playwright/no-wait-for-timeout
+  await page.waitForTimeout(2000);
+  const receivedEmails = await getEmailsReceivedByUser({ emails, userEmail });
+
+  const allEmails = (receivedEmails as Messages).items;
+  const email = allEmails.find((email) => email.subject === subject);
+  if (!email) {
+    throw new Error(`Email with subject ${subject} not found`);
+  }
+  const dom = new JSDOM(email.html);
+  return dom;
+}
+
+export async function expectOrganizationCreationEmailToBeSent({
+  page,
+  emails,
+  userEmail,
+  orgSlug,
+}: {
+  page: Page;
+  emails: ReturnType<typeof createEmailsFixture>;
+  userEmail: string;
+  orgSlug: string;
+}) {
+  const dom = await expectEmailWithSubject(page, emails, userEmail, "Your organization has been created");
+  const document = dom?.window?.document;
+  expect(document?.querySelector(`[href*=${orgSlug}]`)).toBeTruthy();
+  return dom;
+}
+
+async function expectOrganizationCreationEmailToBeSentWithLinks({
+  page,
+  emails,
+  userEmail,
+  oldUsername,
+  newUsername,
+  orgSlug,
+}: {
+  page: Page;
+  emails: ReturnType<typeof createEmailsFixture>;
+  userEmail: string;
+  oldUsername: string;
+  newUsername: string;
+  orgSlug: string;
+}) {
+  const dom = await expectOrganizationCreationEmailToBeSent({
+    page,
+    emails,
+    userEmail,
+    orgSlug,
+  });
+  const document = dom?.window.document;
+  const links = document?.querySelectorAll(`[data-testid="organization-link-info"] [href]`);
+  if (!links) {
+    throw new Error(`data-testid="organization-link-info doesn't have links`);
+  }
+  expect((links[0] as unknown as HTMLAnchorElement).href).toContain(oldUsername);
+  expect((links[1] as unknown as HTMLAnchorElement).href).toContain(newUsername);
+}
+
+export async function expectEmailVerificationEmailToBeSent(
+  page: Page,
+  emails: ReturnType<typeof createEmailsFixture>,
+  userEmail: string
+) {
+  const subject = "Cal.com: Verify your account";
+  return expectEmailWithSubject(page, emails, userEmail, subject);
+}
+
+test.afterAll(({ users, orgs }) => {
+  users.deleteAll();
+  orgs.deleteAll();
+});
+
+function capitalize(text: string) {
+  if (!text) {
+    return text;
+  }
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+
+test.describe("Organization", () => {
+  test("Admin should be able to create an org where an existing user is made an owner", async ({
+    page,
+    users,
+    emails,
+  }) => {
+    const appLevelAdmin = await users.create({
+      role: "ADMIN",
+    });
+    await appLevelAdmin.apiLogin();
+
+    const orgOwnerUsernamePrefix = "owner";
+
+    const orgOwnerEmail = users.trackEmail({
+      username: orgOwnerUsernamePrefix,
+      domain: `example.com`,
+    });
+
+    const orgOwnerUser = await users.create({
+      username: orgOwnerUsernamePrefix,
+      email: orgOwnerEmail,
+      role: "ADMIN",
+    });
+
+    const orgOwnerUsernameOutsideOrg = orgOwnerUser.username;
+    const orgOwnerUsernameInOrg = orgOwnerEmail.split("@")[0];
+    const orgName = capitalize(`${orgOwnerUser.username}`);
+    const orgSlug = `myOrg-${uuid()}`.toLowerCase();
+    await page.goto("/settings/organizations/new");
+    await page.waitForLoadState("networkidle");
+
+    await test.step("Basic info", async () => {
+      // Check required fields
+      await page.locator("button[type=submit]").click();
+      await expect(page.locator(".text-red-700")).toHaveCount(3);
+
+      // Happy path
+      await fillAndSubmitFirstStepAsAdmin(page, orgOwnerEmail, orgName, orgSlug);
+    });
+
+    await expectOrganizationCreationEmailToBeSentWithLinks({
+      page,
+      emails,
+      userEmail: orgOwnerEmail,
+      oldUsername: orgOwnerUsernameOutsideOrg || "",
+      newUsername: orgOwnerUsernameInOrg,
+      orgSlug,
+    });
+
+    await test.step("About the organization", async () => {
+      // Choosing an avatar
+      await page.locator('button:text("Upload")').click();
+      const fileChooserPromise = page.waitForEvent("filechooser");
+      await page.getByText("Choose a file...").click();
+      const fileChooser = await fileChooserPromise;
+      await fileChooser.setFiles(path.join(__dirname, "../../public/apple-touch-icon.png"));
+      await page.locator('button:text("Save")').click();
+
+      // About text
+      await page.locator('textarea[name="about"]').fill("This is a testing org");
+      await page.locator("button[type=submit]").click();
+
+      // Waiting to be in next step URL
+      await page.waitForURL("/settings/organizations/*/onboard-members");
+    });
+
+    await test.step("On-board administrators", async () => {
+      await page.waitForSelector('[data-testid="pending-member-list"]');
+      expect(await page.getByTestId("pending-member-item").count()).toBe(1);
+
+      const adminEmail = users.trackEmail({ username: "rick", domain: `example.com` });
+
+      //can add members
+      await page.getByTestId("new-member-button").click();
+      await page.locator('[placeholder="email\\@example\\.com"]').fill(adminEmail);
+      await page.getByTestId("invite-new-member-button").click();
+      await expect(page.locator(`li:has-text("${adminEmail}")`)).toBeVisible();
+      // TODO: Check if invited admin received the invitation email
+      // await expectInvitationEmailToBeReceived(
+      //   page,
+      //   emails,
+      //   adminEmail,
+      //   `${orgName}'s admin invited you to join the organization ${orgName} on Cal.com`
+      // );
+      await expect(page.getByTestId("pending-member-item")).toHaveCount(2);
+
+      // can remove members
+      await expect(page.getByTestId("pending-member-item")).toHaveCount(2);
+      const lastRemoveMemberButton = page.getByTestId("remove-member-button").last();
+      await lastRemoveMemberButton.click();
+      await page.waitForLoadState("networkidle");
+      await expect(page.getByTestId("pending-member-item")).toHaveCount(1);
+      await page.getByTestId("publish-button").click();
+      // Waiting to be in next step URL
+      await page.waitForURL("/settings/organizations/*/add-teams");
+    });
+
+    await test.step("Create teams", async () => {
+      // Filling one team
+      await page.locator('input[name="teams.0.name"]').fill("Marketing");
+
+      // Adding another team
+      await page.locator('button:text("Add a team")').click();
+      await page.locator('input[name="teams.1.name"]').fill("Sales");
+
+      // Finishing the creation wizard
+      await page.getByTestId("continue_or_checkout").click();
+      await page.waitForURL("/event-types");
+    });
+
+    await test.step("Login as org owner and pay", async () => {
+      // eslint-disable-next-line playwright/no-skipped-test
+      test.skip(!IS_TEAM_BILLING_ENABLED, "Skipping paying for org as stripe is disabled");
+
+      await orgOwnerUser.apiLogin();
+      await page.goto("/event-types");
+      const upgradeButton = await page.getByTestId("upgrade_org_banner_button");
+
+      await expect(upgradeButton).toBeVisible();
+      await upgradeButton.click();
+      // Check that stripe checkout is present
+      const expectedUrl = "https://checkout.stripe.com";
+
+      await page.waitForURL((url) => url.href.startsWith(expectedUrl));
+      const url = page.url();
+
+      // Check that the URL matches the expected URL
+      expect(url).toContain(expectedUrl);
+
+      await fillStripeTestCheckout(page);
+      await page.waitForLoadState("networkidle");
+
+      const upgradeButtonHidden = await page.getByTestId("upgrade_org_banner_button");
+
+      await expect(upgradeButtonHidden).toBeHidden();
+    });
+
+    // Verify that the owner's old username redirect is properly set
+    await gotoPathAndExpectRedirectToOrgDomain({
+      page,
+      org: {
+        slug: orgSlug,
+      },
+      path: `/${orgOwnerUsernameOutsideOrg}`,
+      expectedPath: `/${orgOwnerUsernameInOrg}`,
+    });
+  });
+
+  test("Admin should be able to create an org where the owner doesn't exist yet", async ({
+    page,
+    users,
+    emails,
+  }) => {
+    const appLevelAdmin = await users.create({
+      role: "ADMIN",
+    });
+    await appLevelAdmin.apiLogin();
+    const orgOwnerUsername = `owner`;
+    const orgName = capitalize(`${orgOwnerUsername}`);
+    const orgSlug = `myOrg-${uuid()}`.toLowerCase();
+    const orgOwnerEmail = users.trackEmail({
+      username: orgOwnerUsername,
+      domain: `example.com`,
+    });
+
+    await page.goto("/settings/organizations/new");
+    await page.waitForLoadState("networkidle");
+
+    await test.step("Basic info", async () => {
+      // Check required fields
+      await page.locator("button[type=submit]").click();
+      await expect(page.locator(".text-red-700")).toHaveCount(3);
+
+      // Happy path
+      await fillAndSubmitFirstStepAsAdmin(page, orgOwnerEmail, orgName, orgSlug);
+    });
+
+    const dom = await expectOrganizationCreationEmailToBeSent({
+      page,
+      emails,
+      userEmail: orgOwnerEmail,
+      orgSlug,
+    });
+    expect(dom?.window.document.querySelector(`[href*=${orgSlug}]`)).toBeTruthy();
+    await expectEmailVerificationEmailToBeSent(page, emails, orgOwnerEmail);
+    // Rest of the steps remain same as org creation with existing user as owner. So skipping them
+  });
+
+  test("User can create and upgrade a org", async ({ page, users, emails }) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(process.env.NEXT_PUBLIC_ORG_SELF_SERVE_ENABLED !== "1", "Org self serve is not enabled");
+    const stringUUID = uuid();
+
+    const orgOwnerUsername = `owner-${stringUUID}`;
+
+    const targetOrgEmail = users.trackEmail({
+      username: orgOwnerUsername,
+      domain: `example.com`,
+    });
+    const orgOwnerUser = await users.create({
+      username: orgOwnerUsername,
+      email: targetOrgEmail,
+    });
+
+    await orgOwnerUser.apiLogin();
+    const orgName = capitalize(`${orgOwnerUsername}`);
+    await page.goto("/settings/organizations/new");
+    await page.waitForLoadState("networkidle");
+
+    await test.step("Basic info", async () => {
+      // These values are infered due to an existing user being signed
+      expect(await page.locator("input[name=name]").inputValue()).toBe("Example");
+      expect(await page.locator("input[name=slug]").inputValue()).toBe("example");
+
+      await page.locator("input[name=name]").fill(orgName);
+      await page.locator("input[name=slug]").fill(orgOwnerUsername);
+
+      await page.locator("button[type=submit]").click();
+      await page.waitForLoadState("networkidle");
+    });
+
+    await test.step("About the organization", async () => {
+      // Choosing an avatar
+      await page.locator('button:text("Upload")').click();
+      const fileChooserPromise = page.waitForEvent("filechooser");
+      await page.getByText("Choose a file...").click();
+      const fileChooser = await fileChooserPromise;
+      await fileChooser.setFiles(path.join(__dirname, "../../public/apple-touch-icon.png"));
+      await page.locator('button:text("Save")').click();
+
+      // About text
+      await page.locator('textarea[name="about"]').fill("This is a testing org");
+      await page.locator("button[type=submit]").click();
+
+      // Waiting to be in next step URL
+      await page.waitForURL("/settings/organizations/*/onboard-members");
+    });
+
+    await test.step("On-board administrators", async () => {
+      await page.waitForSelector('[data-testid="pending-member-list"]');
+      expect(await page.getByTestId("pending-member-item").count()).toBe(1);
+
+      const adminEmail = users.trackEmail({ username: "rick", domain: `example.com` });
+
+      //can add members
+      await page.getByTestId("new-member-button").click();
+      await page.locator('[placeholder="email\\@example\\.com"]').fill(adminEmail);
+      await page.getByTestId("invite-new-member-button").click();
+      await expect(page.locator(`li:has-text("${adminEmail}")`)).toBeVisible();
+      // TODO: Check if invited admin received the invitation email
+      // await expectInvitationEmailToBeReceived(
+      //   page,
+      //   emails,
+      //   adminEmail,
+      //   `${orgName}'s admin invited you to join the organization ${orgName} on Cal.com`
+      // );
+      await expect(page.getByTestId("pending-member-item")).toHaveCount(2);
+
+      // can remove members
+      await expect(page.getByTestId("pending-member-item")).toHaveCount(2);
+      const lastRemoveMemberButton = page.getByTestId("remove-member-button").last();
+      await lastRemoveMemberButton.click();
+      await page.waitForLoadState("networkidle");
+      await expect(page.getByTestId("pending-member-item")).toHaveCount(1);
+      await page.getByTestId("publish-button").click();
+      // Waiting to be in next step URL
+      await page.waitForURL("/settings/organizations/*/add-teams");
+    });
+
+    await test.step("Create teams", async () => {
+      // Filling one team
+      await page.locator('input[name="teams.0.name"]').fill("Marketing");
+
+      // Adding another team
+      await page.locator('button:text("Add a team")').click();
+      await page.locator('input[name="teams.1.name"]').fill("Sales");
+
+      // Finishing the creation wizard
+      await page.getByTestId("continue_or_checkout").click();
+    });
+
+    await test.step("Login as org owner and pay", async () => {
+      // eslint-disable-next-line playwright/no-skipped-test
+      test.skip(!IS_TEAM_BILLING_ENABLED, "Skipping paying for org as stripe is disabled");
+      await orgOwnerUser.apiLogin();
+      await page.goto("/event-types");
+      const upgradeButton = await page.getByTestId("upgrade_org_banner_button");
+
+      await expect(upgradeButton).toBeVisible();
+      await upgradeButton.click();
+      // Check that stripe checkout is present
+      const expectedUrl = "https://checkout.stripe.com";
+
+      await page.waitForURL((url) => url.href.startsWith(expectedUrl));
+      const url = page.url();
+
+      // Check that the URL matches the expected URL
+      expect(url).toContain(expectedUrl);
+
+      await fillStripeTestCheckout(page);
+      await page.waitForLoadState("networkidle");
+
+      const upgradeButtonHidden = await page.getByTestId("upgrade_org_banner_button");
+
+      await expect(upgradeButtonHidden).toBeHidden();
+    });
+  });
+
+  test("User gets prompted with >=3 teams to upgrade & can transfer existing teams to org", async ({
+    page,
+    users,
+  }) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(process.env.NEXT_PUBLIC_ORG_SELF_SERVE_ENABLED !== "1", "Org self serve is not enabled");
+    const numberOfTeams = 3;
+    const stringUUID = uuid();
+
+    const orgOwnerUsername = `owner-${stringUUID}`;
+
+    const targetOrgEmail = users.trackEmail({
+      username: orgOwnerUsername,
+      domain: `example.com`,
+    });
+    const orgOwnerUser = await users.create(
+      {
+        username: orgOwnerUsername,
+        email: targetOrgEmail,
+      },
+      { hasTeam: true, numberOfTeams }
+    );
+
+    await orgOwnerUser.apiLogin();
+
+    await page.goto("/teams");
+
+    await test.step("Has org self serve banner", async () => {
+      // These values are infered due to an existing user being signed
+      const selfServeButtonLocator = await page.getByTestId("setup_your_org_action_button");
+      await expect(selfServeButtonLocator).toBeVisible();
+
+      await selfServeButtonLocator.click();
+      await page.waitForURL("/settings/organizations/new");
+    });
+
+    await test.step("Basic info", async () => {
+      // These values are infered due to an existing user being signed
+      const slugLocator = await page.locator("input[name=slug]");
+      expect(await page.locator("input[name=name]").inputValue()).toBe("Example");
+      expect(await slugLocator.inputValue()).toBe("example");
+
+      await slugLocator.fill(`example-${stringUUID}`);
+
+      await page.locator("button[type=submit]").click();
+      await page.waitForLoadState("networkidle");
+    });
+
+    await test.step("About the organization", async () => {
+      // Choosing an avatar
+      await page.locator('button:text("Upload")').click();
+      const fileChooserPromise = page.waitForEvent("filechooser");
+      await page.getByText("Choose a file...").click();
+      const fileChooser = await fileChooserPromise;
+      await fileChooser.setFiles(path.join(__dirname, "../../public/apple-touch-icon.png"));
+      await page.locator('button:text("Save")').click();
+
+      // About text
+      await page.locator('textarea[name="about"]').fill("This is a testing org");
+      await page.locator("button[type=submit]").click();
+
+      // Waiting to be in next step URL
+      await page.waitForURL("/settings/organizations/*/onboard-members");
+    });
+
+    await test.step("On-board administrators", async () => {
+      await page.waitForSelector('[data-testid="pending-member-list"]');
+      expect(await page.getByTestId("pending-member-item").count()).toBe(1);
+
+      const adminEmail = users.trackEmail({ username: "rick", domain: `example.com` });
+
+      //can add members
+      await page.getByTestId("new-member-button").click();
+      await page.locator('[placeholder="email\\@example\\.com"]').fill(adminEmail);
+      await page.getByTestId("invite-new-member-button").click();
+      await expect(page.locator(`li:has-text("${adminEmail}")`)).toBeVisible();
+      // TODO: Check if invited admin received the invitation email
+      // await expectInvitationEmailToBeReceived(
+      //   page,
+      //   emails,
+      //   adminEmail,
+      //   `${orgName}'s admin invited you to join the organization ${orgName} on Cal.com`
+      // );
+      await expect(page.getByTestId("pending-member-item")).toHaveCount(2);
+
+      // can remove members
+      await expect(page.getByTestId("pending-member-item")).toHaveCount(2);
+      const lastRemoveMemberButton = page.getByTestId("remove-member-button").last();
+      await lastRemoveMemberButton.click();
+      await page.waitForLoadState("networkidle");
+      await expect(page.getByTestId("pending-member-item")).toHaveCount(1);
+      await page.getByTestId("publish-button").click();
+      // Waiting to be in next step URL
+      await page.waitForURL("/settings/organizations/*/add-teams");
+    });
+
+    await test.step("Move existing teams to org", async () => {
+      // No easy way to get all team checkboxes so we fill all checkboxes on the page in
+      const foundCheckboxes = page.locator('input[type="checkbox"]');
+      const count = await foundCheckboxes.count();
+      for (let i = 0; i < count; i++) {
+        const checkbox = foundCheckboxes.nth(i);
+        await checkbox.click();
+      }
+    });
+
+    await test.step("Create teams", async () => {
+      // Filling one team
+      await page.locator('input[name="teams.0.name"]').fill("Marketing");
+
+      // Adding another team
+      await page.locator('button:text("Add a team")').click();
+      await page.locator('input[name="teams.1.name"]').fill("Sales");
+
+      // Finishing the creation wizard
+      await page.getByTestId("continue_or_checkout").click();
+    });
+
+    await test.step("Login as org owner and pay", async () => {
+      // eslint-disable-next-line playwright/no-skipped-test
+      test.skip(!IS_TEAM_BILLING_ENABLED, "Skipping paying for org as stripe is disabled");
+      await orgOwnerUser.apiLogin();
+      await page.goto("/event-types");
+      const upgradeButton = await page.getByTestId("upgrade_org_banner_button");
+
+      await expect(upgradeButton).toBeVisible();
+      await upgradeButton.click();
+      // Check that stripe checkout is present
+      const expectedUrl = "https://checkout.stripe.com";
+
+      await page.waitForURL((url) => url.href.startsWith(expectedUrl));
+      const url = page.url();
+
+      // Check that the URL matches the expected URL
+      expect(url).toContain(expectedUrl);
+
+      await fillStripeTestCheckout(page);
+      await page.waitForLoadState("networkidle");
+
+      const upgradeButtonHidden = await page.getByTestId("upgrade_org_banner_button");
+
+      await expect(upgradeButtonHidden).toBeHidden();
+    });
+
+    await test.step("Ensure correctnumberOfTeams are migrated", async () => {
+      // eslint-disable-next-line playwright/no-skipped-test
+      await page.goto("/teams");
+      await page.waitForLoadState("networkidle");
+      const teamListItems = await page.getByTestId("team-list-item-link").all();
+
+      // Number of teams migrated + the two created in the create teams step
+      expect(teamListItems.length).toBe(numberOfTeams + 2);
+    });
+  });
+});
+
+async function fillAndSubmitFirstStepAsAdmin(
+  page: Page,
+  targetOrgEmail: string,
+  orgName: string,
+  orgSlug: string
+) {
+  await page.locator("input[name=orgOwnerEmail]").fill(targetOrgEmail);
+  // Since we are admin fill in this infomation instead of deriving it
+  await page.locator("input[name=name]").fill(orgName);
+  await page.locator("input[name=slug]").fill(orgSlug);
+
+  // Fill in seat infomation
+  await page.locator("input[name=seats]").fill("30");
+  await page.locator("input[name=pricePerSeat]").fill("30");
+
+  await Promise.all([
+    page.waitForResponse("**/api/trpc/organizations/create**"),
+    page.locator("button[type=submit]").click(),
+  ]);
+}

calcom/apps/web/playwright/organization/organization-invitation.e2e.ts

@@ -0,0 +1,559 @@
+import type { Browser, Page } from "@playwright/test";
+import { expect } from "@playwright/test";
+
+import prisma from "@calcom/prisma";
+import { MembershipRole } from "@calcom/prisma/client";
+
+import { moveUserToOrg } from "@lib/orgMigration";
+
+import { test } from "../lib/fixtures";
+import { getInviteLink } from "../lib/testUtils";
+import { expectInvitationEmailToBeReceived } from "./expects";
+
+test.describe.configure({ mode: "parallel" });
+
+test.afterEach(async ({ users, orgs }) => {
+  await users.deleteAll();
+  await orgs.deleteAll();
+});
+
+test.describe("Organization", () => {
+  test.describe("Email not matching orgAutoAcceptEmail", () => {
+    test("nonexisting user invited to an organization", async ({ browser, page, users, emails }) => {
+      const orgOwner = await users.create(undefined, { hasTeam: true, isOrg: true });
+      const { team: org } = await orgOwner.getOrgMembership();
+      await orgOwner.apiLogin();
+      await page.goto("/settings/organizations/members");
+      await page.waitForLoadState("networkidle");
+
+      await test.step("By email", async () => {
+        const invitedUserEmail = users.trackEmail({ username: "rick", domain: "domain.com" });
+        // '-domain' because the email doesn't match orgAutoAcceptEmail
+        const usernameDerivedFromEmail = `${invitedUserEmail.split("@")[0]}-domain`;
+
+        await inviteAnEmail(page, invitedUserEmail);
+        const inviteLink = await expectInvitationEmailToBeReceived(
+          page,
+          emails,
+          invitedUserEmail,
+          `${org.name}'s admin invited you to join the organization ${org.name} on Cal.com`,
+          "signup?token"
+        );
+
+        await expectUserToBeAMemberOfOrganization({
+          page,
+          username: usernameDerivedFromEmail,
+          role: "member",
+          isMemberShipAccepted: false,
+          email: invitedUserEmail,
+        });
+
+        assertInviteLink(inviteLink);
+        await signupFromEmailInviteLink({
+          browser,
+          inviteLink,
+          expectedEmail: invitedUserEmail,
+          expectedUsername: usernameDerivedFromEmail,
+        });
+
+        const dbUser = await prisma.user.findUnique({ where: { email: invitedUserEmail } });
+        expect(dbUser?.username).toBe(usernameDerivedFromEmail);
+
+        await expectUserToBeAMemberOfOrganization({
+          page,
+          username: usernameDerivedFromEmail,
+          role: "member",
+          isMemberShipAccepted: true,
+          email: invitedUserEmail,
+        });
+      });
+
+      await test.step("By invite link", async () => {
+        const inviteLink = await copyInviteLink(page);
+        const email = users.trackEmail({ username: "rick", domain: "domain.com" });
+        // '-domain' because the email doesn't match orgAutoAcceptEmail
+        const usernameDerivedFromEmail = `${email.split("@")[0]}-domain`;
+        await signupFromInviteLink({ browser, inviteLink, email });
+        const dbUser = await prisma.user.findUnique({ where: { email } });
+        expect(dbUser?.username).toBe(usernameDerivedFromEmail);
+        await expectUserToBeAMemberOfOrganization({
+          page,
+          username: usernameDerivedFromEmail,
+          role: "member",
+          isMemberShipAccepted: true,
+          email,
+        });
+      });
+    });
+
+    // This test is already covered by booking.e2e.ts where existing user is invited and his booking links are tested.
+    // We can re-test here when we want to test some more scenarios.
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    test("existing user invited to an organization", () => {});
+
+    test("nonexisting user invited to a Team inside organization", async ({
+      browser,
+      page,
+      users,
+      emails,
+    }) => {
+      const orgOwner = await users.create(undefined, { hasTeam: true, isOrg: true, hasSubteam: true });
+      await orgOwner.apiLogin();
+      const { team } = await orgOwner.getFirstTeamMembership();
+      const { team: org } = await orgOwner.getOrgMembership();
+
+      await test.step("By email", async () => {
+        await page.goto(`/settings/teams/${team.id}/members`);
+        await page.waitForLoadState("networkidle");
+        const invitedUserEmail = users.trackEmail({ username: "rick", domain: "domain.com" });
+        // '-domain' because the email doesn't match orgAutoAcceptEmail
+        const usernameDerivedFromEmail = `${invitedUserEmail.split("@")[0]}-domain`;
+        await inviteAnEmail(page, invitedUserEmail);
+        await expectUserToBeAMemberOfTeam({
+          page,
+          teamId: team.id,
+          username: usernameDerivedFromEmail,
+          role: "member",
+          isMemberShipAccepted: false,
+          email: invitedUserEmail,
+        });
+
+        await expectUserToBeAMemberOfOrganization({
+          page,
+          username: usernameDerivedFromEmail,
+          role: "member",
+          isMemberShipAccepted: false,
+          email: invitedUserEmail,
+        });
+
+        await page.waitForLoadState("networkidle");
+        const inviteLink = await expectInvitationEmailToBeReceived(
+          page,
+          emails,
+          invitedUserEmail,
+          `${team.name}'s admin invited you to join the team ${team.name} of organization ${org.name} on Cal.com`,
+          "signup?token"
+        );
+
+        assertInviteLink(inviteLink);
+
+        await signupFromEmailInviteLink({
+          browser,
+          inviteLink,
+          expectedEmail: invitedUserEmail,
+          expectedUsername: usernameDerivedFromEmail,
+        });
+
+        const dbUser = await prisma.user.findUnique({ where: { email: invitedUserEmail } });
+        expect(dbUser?.username).toBe(usernameDerivedFromEmail);
+
+        await expectUserToBeAMemberOfTeam({
+          page,
+          teamId: team.id,
+          username: usernameDerivedFromEmail,
+          role: "member",
+          isMemberShipAccepted: true,
+          email: invitedUserEmail,
+        });
+
+        await expectUserToBeAMemberOfOrganization({
+          page,
+          username: usernameDerivedFromEmail,
+          role: "member",
+          isMemberShipAccepted: true,
+          email: invitedUserEmail,
+        });
+      });
+
+      await test.step("By invite link", async () => {
+        await page.goto(`/settings/teams/${team.id}/members`);
+        const inviteLink = await copyInviteLink(page);
+        const email = users.trackEmail({ username: "rick", domain: "domain.com" });
+        // '-domain' because the email doesn't match orgAutoAcceptEmail
+        const usernameDerivedFromEmail = `${email.split("@")[0]}-domain`;
+        await signupFromInviteLink({ browser, inviteLink, email });
+
+        const dbUser = await prisma.user.findUnique({ where: { email } });
+        expect(dbUser?.username).toBe(usernameDerivedFromEmail);
+        await expectUserToBeAMemberOfTeam({
+          teamId: team.id,
+          page,
+          username: usernameDerivedFromEmail,
+          role: "member",
+          isMemberShipAccepted: true,
+          email: email,
+        });
+
+        await expectUserToBeAMemberOfOrganization({
+          page,
+          username: usernameDerivedFromEmail,
+          role: "member",
+          isMemberShipAccepted: true,
+          email: email,
+        });
+      });
+    });
+  });
+
+  test.describe("Email matching orgAutoAcceptEmail and a Verified Organization with DNS Setup Done", () => {
+    test("nonexisting user is invited to Org", async ({ browser, page, users, emails }) => {
+      const orgOwner = await users.create(undefined, {
+        hasTeam: true,
+        isOrg: true,
+        isOrgVerified: true,
+        isDnsSetup: true,
+      });
+      const { team: org } = await orgOwner.getOrgMembership();
+      await orgOwner.apiLogin();
+      await page.goto("/settings/organizations/members");
+      await page.waitForLoadState("networkidle");
+
+      await test.step("By email", async () => {
+        const invitedUserEmail = users.trackEmail({ username: "rick", domain: "example.com" });
+        const usernameDerivedFromEmail = invitedUserEmail.split("@")[0];
+        await inviteAnEmail(page, invitedUserEmail);
+        const inviteLink = await expectInvitationEmailToBeReceived(
+          page,
+          emails,
+          invitedUserEmail,
+          `${org.name}'s admin invited you to join the organization ${org.name} on Cal.com`,
+          "signup?token"
+        );
+
+        await expectUserToBeAMemberOfOrganization({
+          page,
+          username: usernameDerivedFromEmail,
+          role: "member",
+          isMemberShipAccepted: true,
+          email: invitedUserEmail,
+        });
+
+        assertInviteLink(inviteLink);
+        await signupFromEmailInviteLink({
+          browser,
+          inviteLink,
+          expectedEmail: invitedUserEmail,
+          expectedUsername: usernameDerivedFromEmail,
+        });
+
+        const dbUser = await prisma.user.findUnique({ where: { email: invitedUserEmail } });
+        expect(dbUser?.username).toBe(usernameDerivedFromEmail);
+
+        await expectUserToBeAMemberOfOrganization({
+          page,
+          username: usernameDerivedFromEmail,
+          role: "member",
+          isMemberShipAccepted: true,
+          email: invitedUserEmail,
+        });
+      });
+
+      await test.step("By invite link", async () => {
+        const inviteLink = await copyInviteLink(page);
+        const email = users.trackEmail({ username: "rick", domain: "example.com" });
+        const usernameDerivedFromEmail = email.split("@")[0];
+        await signupFromInviteLink({ browser, inviteLink, email });
+
+        const dbUser = await prisma.user.findUnique({ where: { email } });
+        expect(dbUser?.username).toBe(usernameDerivedFromEmail);
+        await expectUserToBeAMemberOfOrganization({
+          page,
+          username: usernameDerivedFromEmail,
+          role: "member",
+          isMemberShipAccepted: true,
+          email,
+        });
+      });
+    });
+
+    // Such a user has user.username changed directly in addition to having the new username in the profile.username
+    test("existing user migrated to an organization", async ({ users, page, emails }) => {
+      const orgOwner = await users.create(undefined, {
+        hasTeam: true,
+        isOrg: true,
+        isOrgVerified: true,
+        isDnsSetup: true,
+      });
+      const { team: org } = await orgOwner.getOrgMembership();
+      await orgOwner.apiLogin();
+      const { existingUser } = await test.step("Invite an existing user to an organization", async () => {
+        const existingUser = await users.create({
+          username: "john",
+          emailDomain: org.organizationSettings?.orgAutoAcceptEmail ?? "",
+          name: "John Outside Organization",
+        });
+
+        await moveUserToOrg({
+          user: existingUser,
+          targetOrg: {
+            username: `${existingUser.username}-org`,
+            id: org.id,
+            membership: {
+              role: MembershipRole.MEMBER,
+              accepted: true,
+            },
+          },
+          shouldMoveTeams: false,
+        });
+        return { existingUser };
+      });
+
+      await test.step("Signing up with the previous username of the migrated user - shouldn't be allowed", async () => {
+        await page.goto("/signup");
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        await page.locator('input[name="username"]').fill(existingUser.username!);
+        await page
+          .locator('input[name="email"]')
+          .fill(`${existingUser.username}-differnet-email@example.com`);
+        await page.locator('input[name="password"]').fill("Password99!");
+        await page.waitForLoadState("networkidle");
+        await expect(page.locator('button[type="submit"]')).toBeDisabled();
+      });
+    });
+
+    test("nonexisting user is invited to a team inside organization", async ({
+      browser,
+      page,
+      users,
+      emails,
+    }) => {
+      const orgOwner = await users.create(undefined, {
+        hasTeam: true,
+        isOrg: true,
+        hasSubteam: true,
+        isOrgVerified: true,
+        isDnsSetup: true,
+      });
+      const { team: org } = await orgOwner.getOrgMembership();
+      const { team } = await orgOwner.getFirstTeamMembership();
+
+      await orgOwner.apiLogin();
+
+      await test.step("By email", async () => {
+        await page.goto(`/settings/teams/${team.id}/members`);
+        await page.waitForLoadState("networkidle");
+        const invitedUserEmail = users.trackEmail({ username: "rick", domain: "example.com" });
+        const usernameDerivedFromEmail = invitedUserEmail.split("@")[0];
+        await inviteAnEmail(page, invitedUserEmail);
+        await expectUserToBeAMemberOfTeam({
+          page,
+          teamId: team.id,
+          username: usernameDerivedFromEmail,
+          role: "member",
+          isMemberShipAccepted: true,
+          email: invitedUserEmail,
+        });
+
+        await expectUserToBeAMemberOfOrganization({
+          page,
+          username: usernameDerivedFromEmail,
+          role: "member",
+          isMemberShipAccepted: true,
+          email: invitedUserEmail,
+        });
+        const inviteLink = await expectInvitationEmailToBeReceived(
+          page,
+          emails,
+          invitedUserEmail,
+          `${team.name}'s admin invited you to join the team ${team.name} of organization ${org.name} on Cal.com`,
+          "signup?token"
+        );
+
+        assertInviteLink(inviteLink);
+
+        await signupFromEmailInviteLink({
+          browser,
+          inviteLink,
+          expectedEmail: invitedUserEmail,
+          expectedUsername: usernameDerivedFromEmail,
+        });
+
+        const dbUser = await prisma.user.findUnique({ where: { email: invitedUserEmail } });
+        expect(dbUser?.username).toBe(usernameDerivedFromEmail);
+
+        await expectUserToBeAMemberOfTeam({
+          page,
+          teamId: team.id,
+          username: usernameDerivedFromEmail,
+          role: "member",
+          isMemberShipAccepted: true,
+          email: invitedUserEmail,
+        });
+
+        await expectUserToBeAMemberOfOrganization({
+          page,
+          username: usernameDerivedFromEmail,
+          role: "member",
+          isMemberShipAccepted: true,
+          email: invitedUserEmail,
+        });
+      });
+
+      await test.step("By invite link", async () => {
+        await page.goto(`/settings/teams/${team.id}/members`);
+
+        const inviteLink = await copyInviteLink(page);
+        const email = users.trackEmail({ username: "rick", domain: "example.com" });
+        // '-domain' because the email doesn't match orgAutoAcceptEmail
+        const usernameDerivedFromEmail = `${email.split("@")[0]}`;
+
+        await signupFromInviteLink({ browser, inviteLink, email });
+
+        const dbUser = await prisma.user.findUnique({ where: { email } });
+        expect(dbUser?.username).toBe(usernameDerivedFromEmail);
+        await expectUserToBeAMemberOfTeam({
+          teamId: team.id,
+          page,
+          username: usernameDerivedFromEmail,
+          role: "member",
+          isMemberShipAccepted: true,
+          email: email,
+        });
+        await expectUserToBeAMemberOfOrganization({
+          page,
+          username: usernameDerivedFromEmail,
+          role: "member",
+          isMemberShipAccepted: true,
+          email: email,
+        });
+      });
+    });
+  });
+});
+
+async function signupFromInviteLink({
+  browser,
+  inviteLink,
+  email,
+}: {
+  browser: Browser;
+  inviteLink: string;
+  email: string;
+}) {
+  const context = await browser.newContext();
+  const inviteLinkPage = await context.newPage();
+  await inviteLinkPage.goto(inviteLink);
+  await inviteLinkPage.waitForLoadState("networkidle");
+
+  // Check required fields
+  const button = inviteLinkPage.locator("button[type=submit][disabled]");
+  await expect(button).toBeVisible(); // email + 3 password hints
+
+  await inviteLinkPage.locator("input[name=email]").fill(email);
+  await inviteLinkPage.locator("input[name=password]").fill(`P4ssw0rd!`);
+  await inviteLinkPage.locator("button[type=submit]").click();
+  await inviteLinkPage.waitForURL("/getting-started");
+  return { email };
+}
+
+export async function signupFromEmailInviteLink({
+  browser,
+  inviteLink,
+  expectedUsername,
+  expectedEmail,
+}: {
+  browser: Browser;
+  inviteLink: string;
+  expectedUsername?: string;
+  expectedEmail?: string;
+}) {
+  // Follow invite link in new window
+  const context = await browser.newContext();
+  const signupPage = await context.newPage();
+
+  signupPage.goto(inviteLink);
+  await signupPage.locator(`[data-testid="signup-usernamefield"]`).waitFor({ state: "visible" });
+  await expect(signupPage.locator(`[data-testid="signup-usernamefield"]`)).toBeDisabled();
+  // await for value. initial value is ""
+  if (expectedUsername) {
+    await expect(signupPage.locator(`[data-testid="signup-usernamefield"]`)).toHaveValue(expectedUsername);
+  }
+
+  await expect(signupPage.locator(`[data-testid="signup-emailfield"]`)).toBeDisabled();
+  if (expectedEmail) {
+    await expect(signupPage.locator(`[data-testid="signup-emailfield"]`)).toHaveValue(expectedEmail);
+  }
+
+  await signupPage.waitForLoadState("networkidle");
+  // Check required fields
+  await signupPage.locator("input[name=password]").fill(`P4ssw0rd!`);
+  await signupPage.locator("button[type=submit]").click();
+  await signupPage.waitForURL("/getting-started?from=signup");
+  await context.close();
+  await signupPage.close();
+}
+
+async function inviteAnEmail(page: Page, invitedUserEmail: string) {
+  await page.locator('button:text("Add")').click();
+  await page.locator('input[name="inviteUser"]').fill(invitedUserEmail);
+  await page.locator('button:text("Send invite")').click();
+  await page.waitForLoadState("networkidle");
+}
+
+async function expectUserToBeAMemberOfOrganization({
+  page,
+  username,
+  email,
+  role,
+  isMemberShipAccepted,
+}: {
+  page: Page;
+  username: string;
+  role: string;
+  isMemberShipAccepted: boolean;
+  email: string;
+}) {
+  // Check newly invited member is not pending anymore
+  await page.goto("/settings/organizations/members");
+  expect(await page.locator(`[data-testid="member-${username}-username"]`).textContent()).toBe(username);
+  expect(await page.locator(`[data-testid="member-${username}-email"]`).textContent()).toBe(email);
+  expect((await page.locator(`[data-testid="member-${username}-role"]`).textContent())?.toLowerCase()).toBe(
+    role.toLowerCase()
+  );
+  if (isMemberShipAccepted) {
+    await expect(page.locator(`[data-testid2="member-${username}-pending"]`)).toBeHidden();
+  } else {
+    await expect(page.locator(`[data-testid2="member-${username}-pending"]`)).toBeVisible();
+  }
+}
+
+async function expectUserToBeAMemberOfTeam({
+  page,
+  teamId,
+  email,
+  role,
+  username,
+  isMemberShipAccepted,
+}: {
+  page: Page;
+  username: string;
+  role: string;
+  teamId: number;
+  isMemberShipAccepted: boolean;
+  email: string;
+}) {
+  // Check newly invited member is not pending anymore
+  await page.goto(`/settings/teams/${teamId}/members`);
+  await page.reload();
+  expect(
+    (
+      await page.locator(`[data-testid="member-${username}"] [data-testid=member-role]`).textContent()
+    )?.toLowerCase()
+  ).toBe(role.toLowerCase());
+  if (isMemberShipAccepted) {
+    await expect(page.locator(`[data-testid="email-${email.replace("@", "")}-pending"]`)).toBeHidden();
+  } else {
+    await expect(page.locator(`[data-testid="email-${email.replace("@", "")}-pending"]`)).toBeVisible();
+  }
+}
+
+function assertInviteLink(inviteLink: string | null | undefined): asserts inviteLink is string {
+  if (!inviteLink) throw new Error("Invite link not found");
+}
+
+async function copyInviteLink(page: Page) {
+  await page.locator('button:text("Add")').click();
+  await page.locator(`[data-testid="copy-invite-link-button"]`).click();
+  const inviteLink = await getInviteLink(page);
+  return inviteLink;
+}

calcom/apps/web/playwright/organization/organization-privacy.e2e.ts

@@ -0,0 +1,195 @@
+import { expect } from "@playwright/test";
+
+import prisma from "@calcom/prisma";
+
+import { test } from "../lib/fixtures";
+
+test.describe.configure({ mode: "parallel" });
+
+test.afterEach(async ({ users, orgs }) => {
+  await users.deleteAll();
+  await orgs.deleteAll();
+});
+
+test.describe("Organization - Privacy", () => {
+  test(`Private Org \n 
+        1) Org Member cannot see members of orgs\n
+        2) Org Owner/Admin can see members`, async ({ page, users, orgs }) => {
+    const org = await orgs.create({
+      name: "TestOrg",
+      isPrivate: true,
+    });
+    const teamMatesObj = [
+      { name: "teammate-1" },
+      { name: "teammate-2" },
+      { name: "teammate-3" },
+      { name: "teammate-4" },
+    ];
+
+    const owner = await users.create(
+      {
+        username: "pro-user",
+        name: "pro-user",
+        organizationId: org.id,
+        roleInOrganization: "OWNER",
+      },
+      {
+        hasTeam: true,
+        teammates: teamMatesObj,
+      }
+    );
+    const memberInOrg = await users.create({
+      username: "org-member-user",
+      name: "org-member-user",
+      organizationId: org.id,
+      roleInOrganization: "MEMBER",
+    });
+
+    await owner.apiLogin();
+    await page.goto("/settings/organizations/members");
+    await page.waitForLoadState("domcontentloaded");
+
+    const tableLocator = await page.getByTestId("user-list-data-table");
+
+    await expect(tableLocator).toBeVisible();
+
+    await memberInOrg.apiLogin();
+    await page.goto("/settings/organizations/members");
+    await page.waitForLoadState("domcontentloaded");
+    const userDataTable = await page.getByTestId("user-list-data-table");
+    const membersPrivacyWarning = await page.getByTestId("members-privacy-warning");
+    await expect(userDataTable).toBeHidden();
+    await expect(membersPrivacyWarning).toBeVisible();
+  });
+  test(`Private Org - Private Team\n 
+        1) Team Member cannot see members in team\n
+        2) Team Admin/Owner can see members in team`, async ({ page, users, orgs }) => {
+    const org = await orgs.create({
+      name: "TestOrg",
+      isPrivate: true,
+    });
+    const teamMatesObj = [
+      { name: "teammate-1" },
+      { name: "teammate-2" },
+      { name: "teammate-3" },
+      { name: "teammate-4" },
+    ];
+
+    const owner = await users.create(
+      {
+        username: "pro-user",
+        name: "pro-user",
+        organizationId: org.id,
+        roleInOrganization: "OWNER",
+      },
+      {
+        hasTeam: true,
+        teammates: teamMatesObj,
+      }
+    );
+
+    await owner.apiLogin();
+    const membership = await owner.getFirstTeamMembership();
+    const teamId = membership.team.id;
+
+    // Update team to be private
+    await page.goto(`/settings/teams/${teamId}/members`);
+    await page.waitForLoadState("domcontentloaded");
+    const togglePrivateSwitch = await page.getByTestId("make-team-private-check");
+    await togglePrivateSwitch.click();
+
+    // As admin/owner we can see the user list
+    const tableLocator = await page.getByTestId("team-member-list-container");
+    await expect(tableLocator).toBeVisible();
+
+    const memberUser = await prisma.membership.findFirst({
+      where: {
+        teamId,
+        role: "MEMBER",
+      },
+      select: {
+        user: {
+          select: {
+            email: true,
+          },
+        },
+      },
+    });
+
+    expect(memberUser?.user.email).toBeDefined();
+    // @ts-expect-error expect doesnt assert on a type level
+    const memberOfTeam = await users.set(memberUser?.user.email);
+    await memberOfTeam.apiLogin();
+
+    await page.goto(`/settings/teams/${teamId}/members`);
+    await page.waitForLoadState("domcontentloaded");
+
+    // As a user we can not see the user list when a team is private
+    const hiddenTableLocator = await page.getByTestId("team-member-list-container");
+    await expect(hiddenTableLocator).toBeHidden();
+  });
+  test(`Private Org - Public Team\n 
+        1) All team members can see members in team \n
+        2) Team Admin/Owner can see members in team`, async ({ page, users, orgs }) => {
+    const org = await orgs.create({
+      name: "TestOrg",
+    });
+    const teamMatesObj = [
+      { name: "teammate-1" },
+      { name: "teammate-2" },
+      { name: "teammate-3" },
+      { name: "teammate-4" },
+    ];
+
+    const owner = await users.create(
+      {
+        username: "pro-user",
+        name: "pro-user",
+        organizationId: org.id,
+        roleInOrganization: "OWNER",
+      },
+      {
+        hasTeam: true,
+        teammates: teamMatesObj,
+      }
+    );
+
+    await owner.apiLogin();
+    const membership = await owner.getFirstTeamMembership();
+    const teamId = membership.team.id;
+
+    // Update team to be private
+    await page.goto(`/settings/teams/${teamId}/members`);
+    await page.waitForLoadState("domcontentloaded");
+
+    // As admin/owner we can see the user list
+    const tableLocator = await page.getByTestId("team-member-list-container");
+    await expect(tableLocator).toBeVisible();
+
+    const memberUser = await prisma.membership.findFirst({
+      where: {
+        teamId,
+        role: "MEMBER",
+      },
+      select: {
+        user: {
+          select: {
+            email: true,
+          },
+        },
+      },
+    });
+
+    expect(memberUser?.user.email).toBeDefined();
+    // @ts-expect-error expect doesnt assert on a type level
+    const memberOfTeam = await users.set(memberUser?.user.email);
+    await memberOfTeam.apiLogin();
+
+    await page.goto(`/settings/teams/${teamId}/members`);
+    await page.waitForLoadState("domcontentloaded");
+
+    // As a user we can not see the user list when a team is private
+    const hiddenTableLocator = await page.getByTestId("team-member-list-container");
+    await expect(hiddenTableLocator).toBeVisible();
+  });
+});

calcom/apps/web/playwright/organization/team-management.e2e.ts

@@ -0,0 +1,80 @@
+import { expect } from "@playwright/test";
+
+import { IS_TEAM_BILLING_ENABLED } from "@calcom/lib/constants";
+import { prisma } from "@calcom/prisma";
+import { MembershipRole } from "@calcom/prisma/enums";
+
+import { test } from "../lib/fixtures";
+import { fillStripeTestCheckout } from "../lib/testUtils";
+
+test.describe("Teams", () => {
+  test.afterEach(({ orgs, users }) => {
+    orgs.deleteAll();
+    users.deleteAll();
+  });
+
+  test("Can create teams via Wizard", async ({ page, users, orgs }) => {
+    const org = await orgs.create({
+      name: "TestOrg",
+    });
+    const user = await users.create({
+      organizationId: org.id,
+      roleInOrganization: MembershipRole.ADMIN,
+    });
+    const inviteeEmail = `${user.username}+invitee@example.com`;
+    await user.apiLogin();
+    await page.goto("/teams");
+
+    await test.step("Can create team", async () => {
+      // Click text=Create Team
+      await page.locator("text=Create a new Team").click();
+      await page.waitForURL((url) => url.pathname === "/settings/teams/new");
+      // Fill input[name="name"]
+      await page.locator('input[name="name"]').fill(`${user.username}'s Team`);
+      // Click text=Continue
+      await page.click("[type=submit]");
+      // TODO: Figure out a way to make this more reliable
+      // eslint-disable-next-line playwright/no-conditional-in-test
+      if (IS_TEAM_BILLING_ENABLED) await fillStripeTestCheckout(page);
+      await expect(page).toHaveURL(/\/settings\/teams\/(\d+)\/onboard-members.*$/i);
+      await page.waitForSelector('[data-testid="pending-member-list"]');
+      expect(await page.getByTestId("pending-member-item").count()).toBe(1);
+    });
+
+    await test.step("Can add members", async () => {
+      await page.getByTestId("new-member-button").click();
+      await page.locator('[placeholder="email\\@example\\.com"]').fill(inviteeEmail);
+      await page.getByTestId("invite-new-member-button").click();
+      await expect(page.locator(`li:has-text("${inviteeEmail}")`)).toBeVisible();
+
+      // locator.count() does not await for the expected number of elements
+      // https://github.com/microsoft/playwright/issues/14278
+      // using toHaveCount() is more reliable
+      await expect(page.getByTestId("pending-member-item")).toHaveCount(2);
+    });
+
+    await test.step("Can remove members", async () => {
+      await expect(page.getByTestId("pending-member-item")).toHaveCount(2);
+      const lastRemoveMemberButton = page.getByTestId("remove-member-button").last();
+      await lastRemoveMemberButton.click();
+      await page.waitForLoadState("networkidle");
+      await expect(page.getByTestId("pending-member-item")).toHaveCount(1);
+
+      // Cleanup here since this user is created without our fixtures.
+      await prisma.user.delete({ where: { email: inviteeEmail } });
+    });
+
+    await test.step("Can finish team creation", async () => {
+      await page.getByTestId("publish-button").click();
+      await expect(page).toHaveURL(/\/settings\/teams\/(\d+)\/profile$/i);
+    });
+
+    await test.step("Can disband team", async () => {
+      await page.waitForURL(/\/settings\/teams\/(\d+)\/profile$/i);
+      await page.getByTestId("disband-team-button").click();
+      await page.getByTestId("dialog-confirmation").click();
+      await page.waitForURL("/teams");
+      expect(await page.locator(`text=${user.username}'s Team`).count()).toEqual(0);
+    });
+  });
+});

calcom/apps/web/playwright/out-of-office.e2e.ts

@@ -0,0 +1,115 @@
+import { expect } from "@playwright/test";
+import { v4 as uuidv4 } from "uuid";
+
+import dayjs from "@calcom/dayjs";
+import { randomString } from "@calcom/lib/random";
+import prisma from "@calcom/prisma";
+
+import { test } from "./lib/fixtures";
+
+test.describe.configure({ mode: "parallel" });
+test.afterEach(({ users }) => users.deleteAll());
+
+test.describe("Out of office", () => {
+  test.skip("User can create out of office entry", async ({ page, users }) => {
+    const user = await users.create({ name: "userOne" });
+
+    await user.apiLogin();
+
+    await page.goto("/settings/my-account/out-of-office");
+
+    await page.getByTestId("add_entry_ooo").click();
+    await page.getByTestId("reason_select").click();
+
+    await page.getByTestId("select-option-4").click();
+
+    await page.getByTestId("notes_input").click();
+    await page.getByTestId("notes_input").fill("Demo notes");
+    await page.getByTestId("create-entry-ooo-redirect").click();
+
+    await expect(page.locator(`data-testid=table-redirect-n-a`)).toBeVisible();
+  });
+
+  test.skip("User can configure booking redirect", async ({ page, users }) => {
+    const user = await users.create({ name: "userOne" });
+    const userTo = await users.create({ name: "userTwo" });
+
+    const team = await prisma.team.create({
+      data: {
+        name: "test-insights",
+        slug: `test-insights-${Date.now()}-${randomString(5)}}`,
+      },
+    });
+
+    // create memberships
+    await prisma.membership.createMany({
+      data: [
+        {
+          userId: user.id,
+          teamId: team.id,
+          accepted: true,
+          role: "ADMIN",
+        },
+        {
+          userId: userTo.id,
+          teamId: team.id,
+          accepted: true,
+          role: "ADMIN",
+        },
+      ],
+    });
+
+    await user.apiLogin();
+
+    await page.goto(`/settings/my-account/out-of-office`);
+
+    await page.getByTestId("add_entry_ooo").click();
+    await page.getByTestId("reason_select").click();
+
+    await page.getByTestId("select-option-4").click();
+
+    await page.getByTestId("notes_input").click();
+    await page.getByTestId("notes_input").fill("Demo notes");
+
+    await page.getByTestId("profile-redirect-switch").click();
+
+    await page.getByTestId("team_username_select").click();
+
+    await page.locator("#react-select-3-input").fill("user");
+    await page.locator("#react-select-3-input").press("Enter");
+
+    // send request
+    await page.getByTestId("create-entry-ooo-redirect").click();
+
+    // expect table-redirect-toUserId to be visible
+    await expect(page.locator(`data-testid=table-redirect-${userTo.username}`)).toBeVisible();
+  });
+
+  test("Profile redirection", async ({ page, users }) => {
+    const user = await users.create({ name: "userOne" });
+    const userTo = await users.create({ name: "userTwo" });
+    const uuid = uuidv4();
+    await prisma.outOfOfficeEntry.create({
+      data: {
+        start: dayjs().startOf("day").toDate(),
+        end: dayjs().startOf("day").add(1, "w").toDate(),
+        uuid,
+        user: { connect: { id: user.id } },
+        toUser: { connect: { id: userTo.id } },
+        createdAt: new Date(),
+        reason: {
+          connect: {
+            id: 1,
+          },
+        },
+      },
+    });
+
+    await page.goto(`/${user.username}`);
+
+    const eventTypeLink = page.locator('[data-testid="event-type-link"]').first();
+    await eventTypeLink.click();
+
+    await expect(page.getByTestId("away-emoji")).toBeTruthy();
+  });
+});

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

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

calcom/apps/web/playwright/payment-apps.e2e.ts

@@ -0,0 +1,358 @@
+import { expect } from "@playwright/test";
+
+import prisma from "@calcom/prisma";
+
+import { test } from "./lib/fixtures";
+import { selectFirstAvailableTimeSlotNextMonth } from "./lib/testUtils";
+
+test.describe.configure({ mode: "parallel" });
+test.afterEach(({ users }) => users.deleteAll());
+
+test.describe("Payment app", () => {
+  test("Should be able to edit alby price, currency", async ({ page, users }) => {
+    const user = await users.create();
+    await user.apiLogin();
+    const paymentEvent = user.eventTypes.find((item) => item.slug === "paid");
+    expect(paymentEvent).not.toBeNull();
+    await prisma.credential.create({
+      data: {
+        type: "alby_payment",
+        appId: "alby",
+        userId: user.id,
+        key: {
+          account_id: "random",
+          account_email: "random@example.com",
+          webhook_endpoint_id: "ep_randomString",
+          webhook_endpoint_secret: "whsec_randomString",
+          account_lightning_address: "random@getalby.com",
+        },
+      },
+    });
+
+    await page.goto(`event-types/${paymentEvent?.id}?tabName=apps`);
+
+    await page.locator("#event-type-form").getByRole("switch").click();
+    await page.getByPlaceholder("Price").click();
+    await page.getByPlaceholder("Price").fill("200");
+    await page.getByText("SatoshissatsCurrencyBTCPayment optionCollect payment on booking").click();
+    await page.getByTestId("update-eventtype").click();
+
+    await page.goto(`${user.username}/${paymentEvent?.slug}`);
+
+    // expect 200 sats to be displayed in page
+    expect(await page.locator("text=200 sats").first()).toBeTruthy();
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+    expect(await page.locator("text=200 sats").first()).toBeTruthy();
+
+    // go to /event-types and check if the price is 200 sats
+    await page.goto(`event-types/`);
+    expect(await page.locator("text=200 sats").first()).toBeTruthy();
+  });
+
+  test("Should be able to edit stripe price, currency", async ({ page, users }) => {
+    const user = await users.create();
+    await user.apiLogin();
+    const paymentEvent = user.eventTypes.find((item) => item.slug === "paid");
+    expect(paymentEvent).not.toBeNull();
+    await prisma.credential.create({
+      data: {
+        type: "stripe_payment",
+        appId: "stripe",
+        userId: user.id,
+        key: {
+          scope: "read_write",
+          livemode: false,
+          token_type: "bearer",
+          access_token: "sk_test_randomString",
+          refresh_token: "rt_randomString",
+          stripe_user_id: "acct_randomString",
+          default_currency: "usd",
+          stripe_publishable_key: "pk_test_randomString",
+        },
+      },
+    });
+
+    await page.goto(`event-types/${paymentEvent?.id}?tabName=apps`);
+    await page.locator("#event-type-form").getByRole("switch").click();
+    await page.getByTestId("stripe-currency-select").click();
+    await page.getByTestId("select-option-usd").click();
+
+    await page.getByTestId("stripe-price-input").click();
+    await page.getByTestId("stripe-price-input").fill("350");
+    await page.getByTestId("update-eventtype").click();
+
+    await page.goto(`${user.username}/${paymentEvent?.slug}`);
+
+    // expect 200 sats to be displayed in page
+    expect(await page.locator("text=350").first()).toBeTruthy();
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+    expect(await page.locator("text=350").first()).toBeTruthy();
+
+    // go to /event-types and check if the price is 200 sats
+    await page.goto(`event-types/`);
+    expect(await page.locator("text=350").first()).toBeTruthy();
+  });
+
+  test("Should be able to edit paypal price, currency", async ({ page, users }) => {
+    const user = await users.create();
+    await user.apiLogin();
+    const paymentEvent = user.eventTypes.find((item) => item.slug === "paid");
+    expect(paymentEvent).not.toBeNull();
+    await prisma.credential.create({
+      data: {
+        type: "paypal_payment",
+        appId: "paypal",
+        userId: user.id,
+        key: {
+          client_id: "randomString",
+          secret_key: "randomString",
+          webhook_id: "randomString",
+        },
+      },
+    });
+
+    await page.goto(`event-types/${paymentEvent?.id}?tabName=apps`);
+
+    await page.locator("#event-type-form").getByRole("switch").click();
+
+    await page.getByPlaceholder("Price").click();
+    await page.getByPlaceholder("Price").fill("150");
+
+    await page.getByTestId("paypal-currency-select").click();
+    await page.locator("#react-select-2-option-13").click();
+
+    await page.getByTestId("paypal-payment-option-select").click();
+
+    await page.getByText("$MXNCurrencyMexican pesoPayment option").click();
+    await page.getByTestId("update-eventtype").click();
+
+    await page.goto(`${user.username}/${paymentEvent?.slug}`);
+
+    // expect 150 to be displayed in page
+    expect(await page.locator("text=MX$150.00").first()).toBeTruthy();
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+    // expect 150 to be displayed in page
+    expect(await page.locator("text=MX$150.00").first()).toBeTruthy();
+
+    // go to /event-types and check if the price is 150
+    await page.goto(`event-types/`);
+    expect(await page.locator("text=MX$150.00").first()).toBeTruthy();
+  });
+
+  test("Should display App is not setup already for alby", async ({ page, users }) => {
+    const user = await users.create();
+    await user.apiLogin();
+    const paymentEvent = user.eventTypes.find((item) => item.slug === "paid");
+    expect(paymentEvent).not.toBeNull();
+    await prisma.credential.create({
+      data: {
+        type: "alby_payment",
+        appId: "alby",
+        userId: user.id,
+        key: {},
+      },
+    });
+
+    await page.goto(`event-types/${paymentEvent?.id}?tabName=apps`);
+
+    await page.locator("#event-type-form").getByRole("switch").click();
+
+    // expect text "This app has not been setup yet" to be displayed
+    expect(await page.locator("text=This app has not been setup yet").first()).toBeTruthy();
+
+    await page.getByRole("button", { name: "Setup" }).click();
+
+    // Expect "Connect with Alby" to be displayed
+    expect(await page.locator("text=Connect with Alby").first()).toBeTruthy();
+  });
+
+  test("Should display App is not setup already for paypal", async ({ page, users }) => {
+    const user = await users.create();
+    await user.apiLogin();
+    const paymentEvent = user.eventTypes.find((item) => item.slug === "paid");
+    expect(paymentEvent).not.toBeNull();
+    await prisma.credential.create({
+      data: {
+        type: "paypal_payment",
+        appId: "paypal",
+        userId: user.id,
+        key: {},
+      },
+    });
+
+    await page.goto(`event-types/${paymentEvent?.id}?tabName=apps`);
+
+    await page.locator("#event-type-form").getByRole("switch").click();
+
+    // expect text "This app has not been setup yet" to be displayed
+    expect(await page.locator("text=This app has not been setup yet").first()).toBeTruthy();
+
+    await page.getByRole("button", { name: "Setup" }).click();
+
+    // Expect "Getting started with Paypal APP" to be displayed
+    expect(await page.locator("text=Getting started with Paypal APP").first()).toBeTruthy();
+  });
+
+  /**
+   * For now almost all the payment apps show display "This app has not been setup yet"
+   * this can change in the future
+   */
+  test("Should not display App is not setup already for non payment app", async ({ page, users }) => {
+    // We will use google analytics app for this test
+    const user = await users.create();
+    await user.apiLogin();
+    // Any event should work here
+    const paymentEvent = user.eventTypes.find((item) => item.slug === "paid");
+    expect(paymentEvent).not.toBeNull();
+
+    await prisma.credential.create({
+      data: {
+        type: "ga4_analytics",
+        userId: user.id,
+        appId: "ga4",
+        invalid: false,
+        key: {},
+      },
+    });
+
+    await page.goto(`event-types/${paymentEvent?.id}?tabName=apps`);
+
+    await page.locator("#event-type-form").getByRole("switch").click();
+    // make sure Tracking ID is displayed
+    expect(await page.locator("text=Tracking ID").first()).toBeTruthy();
+    await page.getByLabel("Tracking ID").click();
+    await page.getByLabel("Tracking ID").fill("demo");
+    await page.getByTestId("update-eventtype").click();
+  });
+
+  test("Should only be allowed to enable one payment app", async ({ page, users }) => {
+    const user = await users.create();
+    await user.apiLogin();
+    const paymentEvent = user.eventTypes.find((item) => item.slug === "paid");
+    if (!paymentEvent) {
+      throw new Error("No payment event found");
+    }
+    await prisma.credential.createMany({
+      data: [
+        {
+          type: "paypal_payment",
+          appId: "paypal",
+          userId: user.id,
+          key: {
+            client_id: "randomString",
+            secret_key: "randomString",
+            webhook_id: "randomString",
+          },
+        },
+        {
+          type: "stripe_payment",
+          appId: "stripe",
+          userId: user.id,
+          key: {
+            scope: "read_write",
+            livemode: false,
+            token_type: "bearer",
+            access_token: "sk_test_randomString",
+            refresh_token: "rt_randomString",
+            stripe_user_id: "acct_randomString",
+            default_currency: "usd",
+            stripe_publishable_key: "pk_test_randomString",
+          },
+        },
+      ],
+    });
+
+    await page.goto(`event-types/${paymentEvent.id}?tabName=apps`);
+
+    await page.locator("[data-testid='paypal-app-switch']").click();
+    await page.locator("[data-testid='stripe-app-switch']").isDisabled();
+  });
+
+  test("when more than one payment app is installed the price should be updated when changing settings", async ({
+    page,
+    users,
+  }) => {
+    const user = await users.create();
+    await user.apiLogin();
+    const paymentEvent = user.eventTypes.find((item) => item.slug === "paid");
+    if (!paymentEvent) {
+      throw new Error("No payment event found");
+    }
+
+    await prisma.credential.createMany({
+      data: [
+        {
+          type: "paypal_payment",
+          appId: "paypal",
+          userId: user.id,
+          key: {
+            client_id: "randomString",
+            secret_key: "randomString",
+            webhook_id: "randomString",
+          },
+        },
+        {
+          type: "stripe_payment",
+          appId: "stripe",
+          userId: user.id,
+          key: {
+            scope: "read_write",
+            livemode: false,
+            token_type: "bearer",
+            access_token: "sk_test_randomString",
+            refresh_token: "rt_randomString",
+            stripe_user_id: "acct_randomString",
+            default_currency: "usd",
+            stripe_publishable_key: "pk_test_randomString",
+          },
+        },
+      ],
+    });
+
+    await page.goto(`event-types/${paymentEvent.id}?tabName=apps`);
+
+    await page.locator("[data-testid='paypal-app-switch']").click();
+    await page.locator("[data-testid='paypal-price-input']").fill("100");
+    await page.locator("[data-testid='paypal-currency-select']").first().click();
+    await page.locator("#react-select-2-option-13").click();
+    // await page.locator(".mb-1 > .bg-default > div > div:nth-child(2)").first().click();
+    // await page.getByText("$MXNCurrencyMexican pesoPayment option").click();
+    await page.locator("[data-testid='update-eventtype']").click();
+
+    // Need to wait for the DB to be updated
+    await page.waitForResponse((res) => res.url().includes("update") && res.status() === 200);
+
+    const paypalPrice = await prisma.eventType.findFirst({
+      where: {
+        id: paymentEvent.id,
+      },
+      select: {
+        price: true,
+      },
+    });
+
+    expect(paypalPrice?.price).toEqual(10000);
+
+    await page.locator("[data-testid='paypal-app-switch']").click();
+    await page.locator("[data-testid='stripe-app-switch']").click();
+    await page.locator("[data-testid='stripe-price-input']").fill("200");
+    await page.locator("[data-testid='update-eventtype']").click();
+
+    // Need to wait for the DB to be updated
+    await page.waitForResponse((res) => res.url().includes("update") && res.status() === 200);
+
+    const stripePrice = await prisma.eventType.findFirst({
+      where: {
+        id: paymentEvent.id,
+      },
+      select: {
+        price: true,
+      },
+    });
+
+    expect(stripePrice?.price).toEqual(20000);
+  });
+});

calcom/apps/web/playwright/payment.e2e.ts

@@ -0,0 +1,61 @@
+import { expect } from "@playwright/test";
+
+import { bookTimeSlot, selectFirstAvailableTimeSlotNextMonth } from "@calcom/web/playwright/lib/testUtils";
+
+import { test } from "./lib/fixtures";
+import { testBothFutureAndLegacyRoutes } from "./lib/future-legacy-routes";
+
+test.describe.configure({ mode: "parallel" });
+
+testBothFutureAndLegacyRoutes.describe("Payment", (routeVariant) => {
+  test.describe("user", () => {
+    test.afterEach(async ({ users }) => {
+      await users.deleteAll();
+    });
+
+    test("should create a mock payment for a user", async ({ context, users, page }) => {
+      test.skip(routeVariant === "future", "Future route not ready yet");
+      test.skip(process.env.MOCK_PAYMENT_APP_ENABLED === undefined, "Skipped as Stripe is not installed");
+
+      const user = await users.create();
+      await user.apiLogin();
+      await page.goto("/apps");
+
+      await page.getByPlaceholder("Search").click();
+      await page.getByPlaceholder("Search").fill("mock");
+
+      await page.getByTestId("install-app-button").click();
+
+      await page.waitForURL((url) => url.pathname.endsWith("/apps/installed/payment"));
+
+      await page.getByRole("link", { name: "Event Types" }).click();
+
+      await page.getByRole("link", { name: /^30 min/ }).click();
+      await page.getByTestId("vertical-tab-apps").click();
+      await page.locator("#event-type-form").getByRole("switch").click();
+      await page.getByPlaceholder("Price").click();
+      await page.getByPlaceholder("Price").fill("1");
+
+      await page.locator("#test-mock-payment-app-currency-id").click();
+      await page.getByTestId("select-option-USD").click();
+
+      await page.getByTestId("update-eventtype").click();
+
+      await page.goto(`${user.username}/30-min`);
+
+      await page.waitForLoadState("networkidle");
+
+      await selectFirstAvailableTimeSlotNextMonth(page);
+      await bookTimeSlot(page);
+      await page.waitForURL((url) => url.pathname.includes("/payment/"));
+
+      const dataNextJsRouter = await page.evaluate(() =>
+        window.document.documentElement.getAttribute("data-nextjs-router")
+      );
+
+      expect(dataNextJsRouter).toEqual("app");
+
+      await page.getByText("Payment", { exact: true }).waitFor();
+    });
+  });
+});

calcom/apps/web/playwright/profile.e2e.ts

@@ -0,0 +1,417 @@
+import { expect } from "@playwright/test";
+import type { Page } from "@playwright/test";
+import type { createUsersFixture } from "playwright/fixtures/users";
+
+import { WEBAPP_URL } from "@calcom/lib/constants";
+import type { PrismaClient } from "@calcom/prisma";
+
+import type { createEmailsFixture } from "./fixtures/emails";
+import { test } from "./lib/fixtures";
+import { getEmailsReceivedByUser } from "./lib/testUtils";
+import { expectInvitationEmailToBeReceived } from "./team/expects";
+
+test.describe.configure({ mode: "parallel" });
+
+test.afterEach(async ({ users }) => {
+  await users.deleteAll();
+});
+
+test.describe("Teams", () => {
+  test("Profile page is loaded for users in Organization", async ({ page, users }) => {
+    const teamMatesObj = [{ name: "teammate-1" }, { name: "teammate-2" }];
+    const owner = await users.create(undefined, {
+      hasTeam: true,
+      isOrg: true,
+      hasSubteam: true,
+      teammates: teamMatesObj,
+    });
+    await owner.apiLogin();
+    await page.goto("/settings/my-account/profile");
+
+    // check if user avatar is loaded
+    await page.getByTestId("profile-upload-avatar").isVisible();
+  });
+});
+
+test.describe("Update Profile", () => {
+  test("Cannot update a users email when existing user has same email (verification enabled)", async ({
+    page,
+    users,
+    prisma,
+    features,
+  }) => {
+    const emailVerificationEnabled = features.get("email-verification");
+    // eslint-disable-next-line playwright/no-conditional-in-test, playwright/no-skipped-test
+    if (!emailVerificationEnabled?.enabled) test.skip();
+
+    const user = await users.create({
+      name: "update-profile-user",
+    });
+
+    const [emailInfo, emailDomain] = user.email.split("@");
+    const email = `${emailInfo}-updated@${emailDomain}`;
+
+    await user.apiLogin();
+    await page.goto("/settings/my-account/profile");
+
+    const emailInput = page.getByTestId("profile-form-email-0");
+
+    await emailInput.fill(email);
+
+    await page.getByTestId("profile-submit-button").click();
+
+    await page.getByTestId("password").fill(user?.username ?? "Nameless User");
+
+    await page.getByTestId("profile-update-email-submit-button").click();
+
+    const toastLocator = await page.getByTestId("toast-success");
+
+    const textContent = await toastLocator.textContent();
+
+    expect(textContent).toContain(email);
+
+    // Instead of dealing with emails in e2e lets just get the token and navigate to it
+    const verificationToken = await prisma.verificationToken.findFirst({
+      where: {
+        identifier: user.email,
+      },
+    });
+
+    const params = new URLSearchParams({
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      token: verificationToken!.token,
+    });
+
+    await users.create({
+      email,
+    });
+
+    const verifyUrl = `${WEBAPP_URL}/auth/verify-email-change?${params.toString()}`;
+
+    await page.goto(verifyUrl);
+
+    const errorLocator = await page.getByTestId("toast-error");
+
+    expect(errorLocator).toBeDefined();
+
+    await page.goto("/settings/my-account/profile");
+    const emailInputUpdated = page.getByTestId("profile-form-email-0");
+    expect(await emailInputUpdated.inputValue()).toEqual(user.email);
+  });
+
+  // TODO: This test is extremely flaky and has been failing a lot, blocking many PRs. Fix this.
+  // eslint-disable-next-line playwright/no-skipped-test
+  test.skip("Can update a users email (verification enabled)", async ({ page, users, prisma, features }) => {
+    const emailVerificationEnabled = features.get("email-verification");
+    // eslint-disable-next-line playwright/no-conditional-in-test, playwright/no-skipped-test
+    if (!emailVerificationEnabled?.enabled) test.skip();
+
+    const user = await users.create({
+      name: "update-profile-user",
+    });
+
+    const [emailInfo, emailDomain] = user.email.split("@");
+    const email = `${emailInfo}-updated@${emailDomain}`;
+
+    await user.apiLogin();
+    await page.goto("/settings/my-account/profile");
+
+    const emailInput = page.getByTestId("profile-form-email-0");
+
+    await emailInput.fill(email);
+
+    await page.getByTestId("profile-submit-button").click();
+
+    await page.getByTestId("password").fill(user?.username ?? "Nameless User");
+
+    await page.getByTestId("profile-update-email-submit-button").click();
+
+    expect(await page.getByTestId("toast-success").textContent()).toContain(email);
+
+    // Instead of dealing with emails in e2e lets just get the token and navigate to it
+    const verificationToken = await prisma.verificationToken.findFirst({
+      where: {
+        identifier: user.email,
+      },
+    });
+
+    const params = new URLSearchParams({
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      token: verificationToken!.token,
+    });
+
+    const verifyUrl = `${WEBAPP_URL}/auth/verify-email-change?${params.toString()}`;
+
+    await page.goto(verifyUrl);
+
+    expect(await page.getByTestId("toast-success").textContent()).toContain(email);
+
+    // After email verification is successfull. user is sent to /event-types
+    await page.waitForURL("/event-types");
+
+    await page.goto("/settings/my-account/profile");
+    const emailInputUpdated = await page.getByTestId("profile-form-email-0");
+    expect(await emailInputUpdated.inputValue()).toEqual(email);
+  });
+
+  test("Can update a users email (verification disabled)", async ({ page, users, prisma, features }) => {
+    const emailVerificationEnabled = features.get("email-verification");
+    // eslint-disable-next-line playwright/no-conditional-in-test, playwright/no-skipped-test
+    if (emailVerificationEnabled?.enabled) test.skip();
+
+    const user = await users.create({
+      name: "update-profile-user",
+    });
+
+    const [emailInfo, emailDomain] = user.email.split("@");
+    const email = `${emailInfo}-updated@${emailDomain}`;
+
+    await user.apiLogin();
+    await page.goto("/settings/my-account/profile");
+
+    const emailInput = page.getByTestId("profile-form-email-0");
+
+    await emailInput.fill(email);
+
+    await page.getByTestId("profile-submit-button").click();
+
+    await page.getByTestId("password").fill(user?.username ?? "Nameless User");
+
+    await page.getByTestId("profile-update-email-submit-button").click();
+
+    expect(await page.getByTestId("toast-success").isVisible()).toBe(true);
+
+    const emailInputUpdated = page.getByTestId("profile-form-email-0");
+
+    expect(await emailInputUpdated.inputValue()).toEqual(email);
+  });
+
+  const testEmailVerificationLink = async ({
+    page,
+    prisma,
+    emails,
+    secondaryEmail,
+  }: {
+    page: Page;
+    prisma: PrismaClient;
+    emails: ReturnType<typeof createEmailsFixture>;
+    secondaryEmail: string;
+  }) => {
+    await test.step("the user receives the correct invitation link", async () => {
+      await page.waitForLoadState("networkidle");
+      const verificationToken = await prisma.verificationToken.findFirst({
+        where: {
+          identifier: secondaryEmail,
+        },
+      });
+      const inviteLink = await expectInvitationEmailToBeReceived(
+        page,
+        emails,
+        secondaryEmail,
+        "Verify your email address",
+        "verify-email"
+      );
+      expect(inviteLink).toEqual(`${WEBAPP_URL}/api/auth/verify-email?token=${verificationToken?.token}`);
+    });
+  };
+
+  test("Can add a new email as a secondary email", async ({ page, users, prisma, emails }) => {
+    const user = await users.create({
+      name: "update-profile-user",
+    });
+
+    const [emailInfo, emailDomain] = user.email.split("@");
+
+    await user.apiLogin();
+    await page.goto("/settings/my-account/profile");
+
+    await page.getByTestId("add-secondary-email").click();
+
+    const secondaryEmailAddDialog = await page.waitForSelector('[data-testid="secondary-email-add-dialog"]');
+    expect(await secondaryEmailAddDialog.isVisible()).toBe(true);
+
+    const secondaryEmail = `${emailInfo}-secondary-email@${emailDomain}`;
+    const secondaryEmailInput = page.getByTestId("secondary-email-input");
+    await secondaryEmailInput.fill(secondaryEmail);
+
+    await page.getByTestId("add-secondary-email-button").click();
+
+    const secondaryEmailConfirmDialog = await page.waitForSelector(
+      '[data-testid="secondary-email-confirm-dialog"]'
+    );
+    expect(await secondaryEmailConfirmDialog.isVisible()).toBe(true);
+
+    const textContent = await secondaryEmailConfirmDialog.textContent();
+    expect(textContent).toContain(secondaryEmail);
+
+    await page.getByTestId("secondary-email-confirm-done-button").click();
+    expect(await secondaryEmailConfirmDialog.isVisible()).toBe(false);
+
+    await test.step("the user receives the correct invitation link", async () => {
+      await page.waitForLoadState("networkidle");
+      const verificationToken = await prisma.verificationToken.findFirst({
+        where: {
+          identifier: secondaryEmail,
+        },
+      });
+      const inviteLink = await expectInvitationEmailToBeReceived(
+        page,
+        emails,
+        secondaryEmail,
+        "Verify your email address",
+        "verify-email"
+      );
+      expect(inviteLink?.endsWith(`/api/auth/verify-email?token=${verificationToken?.token}`)).toEqual(true);
+    });
+
+    const primaryEmail = page.getByTestId("profile-form-email-0");
+    expect(await primaryEmail.inputValue()).toEqual(user.email);
+
+    const newlyAddedSecondaryEmail = page.getByTestId("profile-form-email-1");
+    expect(await newlyAddedSecondaryEmail.inputValue()).toEqual(secondaryEmail);
+  });
+
+  const createSecondaryEmail = async ({
+    page,
+    users,
+  }: {
+    page: Page;
+    users: ReturnType<typeof createUsersFixture>;
+  }) => {
+    const user = await users.create({
+      name: "update-profile-user",
+    });
+
+    const [emailInfo, emailDomain] = user.email.split("@");
+    const email = `${emailInfo}@${emailDomain}`;
+
+    await user.apiLogin();
+    await page.goto("/settings/my-account/profile");
+
+    await page.getByTestId("add-secondary-email").click();
+
+    const secondaryEmail = `${emailInfo}-secondary-email@${emailDomain}`;
+    const secondaryEmailInput = await page.getByTestId("secondary-email-input");
+    await secondaryEmailInput.fill(secondaryEmail);
+
+    await page.getByTestId("add-secondary-email-button").click();
+
+    await page.getByTestId("secondary-email-confirm-done-button").click();
+
+    return { user, email, secondaryEmail };
+  };
+
+  test("Newly added secondary email should show as Unverified", async ({ page, users }) => {
+    await createSecondaryEmail({ page, users });
+
+    expect(await page.getByTestId("profile-form-email-0-primary-badge").isVisible()).toEqual(true);
+    expect(await page.getByTestId("profile-form-email-0-unverified-badge").isVisible()).toEqual(false);
+
+    expect(await page.getByTestId("profile-form-email-1-primary-badge").isVisible()).toEqual(false);
+    expect(await page.getByTestId("profile-form-email-1-unverified-badge").isVisible()).toEqual(true);
+  });
+
+  // TODO: This test is extremely flaky and has been failing a lot, blocking many PRs. Fix this.
+  // eslint-disable-next-line playwright/no-skipped-test
+  test.skip("Can verify the newly added secondary email", async ({ page, users, prisma }) => {
+    const { secondaryEmail } = await createSecondaryEmail({ page, users });
+
+    expect(await page.getByTestId("profile-form-email-1-primary-badge").isVisible()).toEqual(false);
+    expect(await page.getByTestId("profile-form-email-1-unverified-badge").isVisible()).toEqual(true);
+    // Instead of dealing with emails in e2e lets just get the token and navigate to it
+    const verificationToken = await prisma.verificationToken.findFirst({
+      where: {
+        identifier: secondaryEmail,
+      },
+    });
+
+    const params = new URLSearchParams({
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      token: verificationToken!.token,
+    });
+
+    const verifyUrl = `${WEBAPP_URL}/api/auth/verify-email?${params.toString()}`;
+
+    await page.goto(verifyUrl);
+
+    expect(await page.getByTestId("profile-form-email-1-primary-badge").isVisible()).toEqual(false);
+    expect(await page.getByTestId("profile-form-email-1-unverified-badge").isVisible()).toEqual(false);
+  });
+
+  test("Can delete the newly added secondary email", async ({ page, users }) => {
+    await createSecondaryEmail({ page, users });
+
+    await page.getByTestId("secondary-email-action-group-button").nth(1).click();
+    await page.getByTestId("secondary-email-delete-button").click();
+
+    expect(await page.getByTestId("profile-form-email-1").isVisible()).toEqual(false);
+  });
+
+  test("Can make the newly added secondary email as the primary email and login", async ({
+    page,
+    users,
+    prisma,
+  }) => {
+    const { secondaryEmail } = await createSecondaryEmail({ page, users });
+
+    // Instead of dealing with emails in e2e lets just get the token and navigate to it
+    const verificationToken = await prisma.verificationToken.findFirst({
+      where: {
+        identifier: secondaryEmail,
+      },
+    });
+
+    const params = new URLSearchParams({
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      token: verificationToken!.token,
+    });
+
+    const verifyUrl = `${WEBAPP_URL}/api/auth/verify-email?${params.toString()}`;
+
+    await page.goto(verifyUrl);
+    await page.getByTestId("secondary-email-action-group-button").nth(1).click();
+    await page.getByTestId("secondary-email-make-primary-button").click();
+
+    expect(await page.getByTestId("profile-form-email-1-primary-badge").isVisible()).toEqual(true);
+    expect(await page.getByTestId("profile-form-email-1-unverified-badge").isVisible()).toEqual(false);
+  });
+
+  // TODO: This test is extremely flaky and has been failing a lot, blocking many PRs. Fix this.
+  // eslint-disable-next-line playwright/no-skipped-test
+  test.skip("Can resend verification link if the secondary email is unverified", async ({
+    page,
+    users,
+    prisma,
+    emails,
+  }) => {
+    const { secondaryEmail } = await createSecondaryEmail({ page, users });
+    // When a user is created a link is sent, we will delete it manually to make sure verification link works fine
+    await prisma.verificationToken.deleteMany({
+      where: {
+        identifier: secondaryEmail,
+      },
+    });
+    const receivedEmails = await getEmailsReceivedByUser({ emails, userEmail: secondaryEmail });
+    if (receivedEmails?.items?.[0]?.ID) {
+      await emails.deleteMessage(receivedEmails.items[0].ID);
+    }
+
+    expect(await page.getByTestId("profile-form-email-1-unverified-badge").isVisible()).toEqual(true);
+    await page.getByTestId("secondary-email-action-group-button").nth(1).click();
+    expect(await page.locator("button[data-testid=resend-verify-email-button]").isDisabled()).toEqual(false);
+    await page.getByTestId("resend-verify-email-button").click();
+
+    await testEmailVerificationLink({ page, prisma, emails, secondaryEmail });
+
+    const verificationToken = await prisma.verificationToken.findFirst({
+      where: {
+        identifier: secondaryEmail,
+      },
+    });
+    await page.goto(`${WEBAPP_URL}/api/auth/verify-email?token=${verificationToken?.token}`);
+
+    await page.getByTestId("secondary-email-action-group-button").nth(1).click();
+    expect(await page.locator("button[data-testid=resend-verify-email-button]").isVisible()).toEqual(false);
+    expect(await page.getByTestId("profile-form-email-1-unverified-badge").isVisible()).toEqual(false);
+  });
+});

calcom/apps/web/playwright/reschedule.e2e.ts

@@ -0,0 +1,334 @@
+import { expect } from "@playwright/test";
+
+import dayjs from "@calcom/dayjs";
+import prisma from "@calcom/prisma";
+import { BookingStatus } from "@calcom/prisma/enums";
+import { bookingMetadataSchema } from "@calcom/prisma/zod-utils";
+
+import { test } from "./lib/fixtures";
+import { selectFirstAvailableTimeSlotNextMonth, bookTimeSlot } from "./lib/testUtils";
+
+const IS_STRIPE_ENABLED = !!(
+  process.env.STRIPE_CLIENT_ID &&
+  process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY &&
+  process.env.STRIPE_PRIVATE_KEY
+);
+
+test.describe.configure({ mode: "parallel" });
+
+test.afterEach(({ users }) => users.deleteAll());
+
+test.describe("Reschedule Tests", async () => {
+  test("Should do a booking request reschedule from /bookings", async ({ page, users, bookings }) => {
+    const user = await users.create();
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const booking = await bookings.create(user.id, user.username, user.eventTypes[0].id!, {
+      status: BookingStatus.ACCEPTED,
+    });
+
+    await user.apiLogin();
+    await page.goto("/bookings/upcoming");
+
+    await page.locator('[data-testid="edit_booking"]').nth(0).click();
+
+    await page.locator('[data-testid="reschedule_request"]').click();
+
+    await page.fill('[data-testid="reschedule_reason"]', "I can't longer have it");
+
+    await page.locator('button[data-testid="send_request"]').click();
+    await expect(page.locator('[id="modal-title"]')).toBeHidden();
+
+    const updatedBooking = await booking.self();
+
+    expect(updatedBooking?.rescheduled).toBe(true);
+    expect(updatedBooking?.cancellationReason).toBe("I can't longer have it");
+    expect(updatedBooking?.status).toBe(BookingStatus.CANCELLED);
+    await booking.delete();
+  });
+
+  test("Should display former time when rescheduling availability", async ({ page, users, bookings }) => {
+    const user = await users.create();
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const booking = await bookings.create(user.id, user.username, user.eventTypes[0].id!, {
+      status: BookingStatus.CANCELLED,
+      rescheduled: true,
+    });
+
+    await page.goto(`/${user.username}/${user.eventTypes[0].slug}?rescheduleUid=${booking.uid}`);
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+
+    const formerTimeElement = page.locator('[data-testid="former_time_p"]');
+    await expect(formerTimeElement).toBeVisible();
+    await booking.delete();
+  });
+
+  test("Should display request reschedule send on bookings/cancelled", async ({ page, users, bookings }) => {
+    const user = await users.create();
+    const booking = await bookings.create(user.id, user.username, user.eventTypes[0].id, {
+      status: BookingStatus.CANCELLED,
+      rescheduled: true,
+    });
+
+    await user.apiLogin();
+    await page.goto("/bookings/cancelled");
+
+    const requestRescheduleSentElement = page.locator('[data-testid="request_reschedule_sent"]').nth(1);
+    await expect(requestRescheduleSentElement).toBeVisible();
+    await booking.delete();
+  });
+
+  test("Should do a reschedule from user owner", async ({ page, users, bookings }) => {
+    const user = await users.create();
+    const [eventType] = user.eventTypes;
+    const booking = await bookings.create(user.id, user.username, eventType.id, {
+      status: BookingStatus.CANCELLED,
+      rescheduled: true,
+    });
+
+    await page.goto(`/${user.username}/${eventType.slug}?rescheduleUid=${booking.uid}`);
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+
+    await expect(page.locator('[name="name"]')).toBeDisabled();
+    await expect(page.locator('[name="email"]')).toBeDisabled();
+
+    await page.locator('[data-testid="confirm-reschedule-button"]').click();
+
+    await page.waitForLoadState("networkidle");
+
+    await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+
+    const newBooking = await prisma.booking.findFirstOrThrow({ where: { fromReschedule: booking.uid } });
+    const rescheduledBooking = await prisma.booking.findFirstOrThrow({ where: { uid: booking.uid } });
+
+    expect(newBooking).not.toBeNull();
+    expect(rescheduledBooking.status).toBe(BookingStatus.CANCELLED);
+
+    await prisma.booking.deleteMany({
+      where: {
+        id: {
+          in: [newBooking.id, rescheduledBooking.id],
+        },
+      },
+    });
+  });
+
+  test("Unpaid rescheduling should go to payment page", async ({ page, users, bookings, payments }) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(!IS_STRIPE_ENABLED, "Skipped as Stripe is not installed");
+    const user = await users.create();
+    await user.apiLogin();
+    await user.installStripePersonal({ skip: true });
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const eventType = user.eventTypes.find((e) => e.slug === "paid")!;
+    const booking = await bookings.create(user.id, user.username, eventType.id, {
+      rescheduled: true,
+      status: BookingStatus.CANCELLED,
+      paid: false,
+    });
+    await prisma.eventType.update({
+      where: {
+        id: eventType.id,
+      },
+      data: {
+        metadata: {
+          apps: {
+            stripe: {
+              price: 20000,
+              enabled: true,
+              currency: "usd",
+            },
+          },
+        },
+      },
+    });
+    const payment = await payments.create(booking.id);
+    await page.goto(`/${user.username}/${eventType.slug}?rescheduleUid=${booking.uid}`);
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+
+    await page.locator('[data-testid="confirm-reschedule-button"]').click();
+
+    await page.waitForURL((url) => {
+      return url.pathname.indexOf("/payment") > -1;
+    });
+
+    await expect(page).toHaveURL(/.*payment/);
+  });
+
+  test("Paid rescheduling should go to success page", async ({ page, users, bookings, payments }) => {
+    const user = await users.create();
+    await user.apiLogin();
+    await user.installStripePersonal({ skip: true });
+    await users.logout();
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const eventType = user.eventTypes.find((e) => e.slug === "paid")!;
+    const booking = await bookings.create(user.id, user.username, eventType.id, {
+      rescheduled: true,
+      status: BookingStatus.CANCELLED,
+      paid: true,
+    });
+
+    const payment = await payments.create(booking.id);
+    await page.goto(`/${user?.username}/${eventType?.slug}?rescheduleUid=${booking?.uid}`);
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+
+    await page.locator('[data-testid="confirm-reschedule-button"]').click();
+
+    await expect(page).toHaveURL(/.*booking/);
+  });
+
+  test("Opt in event should be PENDING when rescheduled by USER", async ({ page, users, bookings }) => {
+    const user = await users.create();
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const eventType = user.eventTypes.find((e) => e.slug === "opt-in")!;
+    const booking = await bookings.create(user.id, user.username, eventType.id, {
+      status: BookingStatus.ACCEPTED,
+    });
+
+    await page.goto(`/${user.username}/${eventType.slug}?rescheduleUid=${booking.uid}`);
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+
+    await page.locator('[data-testid="confirm-reschedule-button"]').click();
+
+    await expect(page).toHaveURL(/.*booking/);
+
+    const newBooking = await prisma.booking.findFirst({ where: { fromReschedule: booking?.uid } });
+    expect(newBooking).not.toBeNull();
+    expect(newBooking?.status).toBe(BookingStatus.PENDING);
+  });
+
+  test("Opt in event should be ACCEPTED when rescheduled by OWNER", async ({ page, users, bookings }) => {
+    const user = await users.create();
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const eventType = user.eventTypes.find((e) => e.slug === "opt-in")!;
+    const booking = await bookings.create(user.id, user.username, eventType.id, {
+      status: BookingStatus.ACCEPTED,
+    });
+    await user.apiLogin();
+
+    await page.goto(`/${user.username}/${eventType.slug}?rescheduleUid=${booking.uid}`);
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+
+    await page.locator('[data-testid="confirm-reschedule-button"]').click();
+
+    await expect(page).toHaveURL(/.*booking/);
+
+    const newBooking = await prisma.booking.findFirst({ where: { fromReschedule: booking?.uid } });
+    expect(newBooking).not.toBeNull();
+    expect(newBooking?.status).toBe(BookingStatus.ACCEPTED);
+  });
+
+  test("Attendee should be able to reschedule a booking", async ({ page, users, bookings }) => {
+    const user = await users.create();
+    const eventType = user.eventTypes[0];
+    const booking = await bookings.create(user.id, user.username, eventType.id);
+
+    // Go to attendee's reschedule link
+    await page.goto(`/reschedule/${booking.uid}`);
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+
+    await page.locator('[data-testid="confirm-reschedule-button"]').click();
+
+    await expect(page).toHaveURL(/.*booking/);
+
+    const newBooking = await prisma.booking.findFirst({ where: { fromReschedule: booking?.uid } });
+    expect(newBooking).not.toBeNull();
+    expect(newBooking?.status).toBe(BookingStatus.ACCEPTED);
+  });
+
+  test("Should be able to book slot that overlaps with original rescheduled booking", async ({
+    page,
+    users,
+    bookings,
+  }) => {
+    const user = await users.create();
+    const eventType = user.eventTypes[0];
+
+    let firstOfNextMonth = dayjs().add(1, "month").startOf("month");
+
+    // find first available slot of next month (available monday-friday)
+    // eslint-disable-next-line playwright/no-conditional-in-test
+    while (firstOfNextMonth.day() < 1 || firstOfNextMonth.day() > 5) {
+      firstOfNextMonth = firstOfNextMonth.add(1, "day");
+    }
+
+    // set startTime to first available slot
+    const startTime = firstOfNextMonth.set("hour", 9).set("minute", 0).toDate();
+    const endTime = firstOfNextMonth.set("hour", 9).set("minute", 30).toDate();
+
+    const booking = await bookings.create(user.id, user.username, eventType.id, {}, startTime, endTime);
+
+    await page.goto(`/reschedule/${booking.uid}`);
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+
+    await page.locator('[data-testid="confirm-reschedule-button"]').click();
+    await expect(page).toHaveURL(/.*booking/);
+  });
+  test("Should load Valid Cal video url after rescheduling Opt in events", async ({
+    page,
+    users,
+    bookings,
+  }) => {
+    const user = await users.create();
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const eventType = user.eventTypes.find((e) => e.slug === "opt-in")!;
+
+    const confirmBooking = async (bookingId: number) => {
+      await user.apiLogin();
+      await page.goto("/bookings/upcoming");
+      const elem = await page.locator(`[data-bookingid="${bookingId}"][data-testid="confirm"]`);
+      await elem.click();
+      await page.getByTestId("toast-success").waitFor();
+      await user.logout();
+    };
+
+    await page.goto(`/${user.username}/${eventType.slug}`);
+    await selectFirstAvailableTimeSlotNextMonth(page);
+    await bookTimeSlot(page);
+    await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+
+    const pageUrl = new URL(page.url());
+    const pathSegments = pageUrl.pathname.split("/");
+    const bookingUID = pathSegments[pathSegments.length - 1];
+
+    const currentBooking = await prisma.booking.findFirst({ where: { uid: bookingUID } });
+    expect(currentBooking).not.toBeUndefined();
+    // eslint-disable-next-line playwright/no-conditional-in-test
+    if (currentBooking) {
+      await confirmBooking(currentBooking.id);
+
+      await page.goto(`/${user.username}/${eventType.slug}?rescheduleUid=${currentBooking.uid}`);
+      await selectFirstAvailableTimeSlotNextMonth(page);
+
+      await page.locator('[data-testid="confirm-reschedule-button"]').click();
+      await expect(page).toHaveURL(/.*booking/);
+
+      const newBooking = await prisma.booking.findFirst({ where: { fromReschedule: currentBooking.uid } });
+      expect(newBooking).not.toBeUndefined();
+      expect(newBooking?.status).toBe(BookingStatus.PENDING);
+      // eslint-disable-next-line playwright/no-conditional-in-test
+      if (newBooking) {
+        await confirmBooking(newBooking?.id);
+
+        const booking = await prisma.booking.findFirst({ where: { id: newBooking.id } });
+        expect(booking).not.toBeUndefined();
+        expect(booking?.status).toBe(BookingStatus.ACCEPTED);
+        const locationVideoCallUrl = bookingMetadataSchema.parse(booking?.metadata || {})?.videoCallUrl;
+        expect(locationVideoCallUrl).not.toBeUndefined();
+
+        // eslint-disable-next-line playwright/no-conditional-in-test
+        if (booking && locationVideoCallUrl) {
+          await page.goto(locationVideoCallUrl);
+          await expect(page.frameLocator("iFrame").locator('text="Continue"')).toBeVisible();
+        }
+      }
+    }
+  });
+});

calcom/apps/web/playwright/saml.e2e.ts

@@ -0,0 +1,17 @@
+import { IS_SAML_LOGIN_ENABLED } from "../server/lib/constants";
+import { login } from "./fixtures/users";
+import { test } from "./lib/fixtures";
+
+test.describe("SAML tests", () => {
+  test("test SAML configuration UI with pro@example.com", async ({ page }) => {
+    // TODO: Figure out a way to use the users from fixtures here, right now we cannot set
+    // the SAML_ADMINS env variables dynamically
+    await login({ username: "pro", email: "pro@example.com", password: "pro" }, page);
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(!IS_SAML_LOGIN_ENABLED, "It should only run if SAML is enabled");
+    // Try to go Security page
+    await page.goto("/settings/security/sso");
+    // It should redirect you to the event-types page
+    // await page.waitForSelector("[data-testid=saml_config]");
+  });
+});

calcom/apps/web/playwright/settings-admin.e2e.ts

@@ -0,0 +1,23 @@
+import { expect } from "@playwright/test";
+
+import { test } from "./lib/fixtures";
+import { testBothFutureAndLegacyRoutes } from "./lib/future-legacy-routes";
+
+test.describe.configure({ mode: "parallel" });
+
+testBothFutureAndLegacyRoutes.describe("Settings/admin tests", () => {
+  test("should render /settings/admin page", async ({ page, users, context }) => {
+    const user = await users.create({
+      role: "ADMIN",
+    });
+    await user.apiLogin();
+
+    await page.goto("/settings/admin");
+
+    await page.waitForLoadState();
+
+    const locator = page.getByRole("heading", { name: "Feature Flags" });
+
+    await expect(locator).toBeVisible();
+  });
+});

calcom/apps/web/playwright/settings/upload-avatar.e2e.ts

@@ -0,0 +1,206 @@
+import { expect } from "@playwright/test";
+import path from "path";
+
+import { CAL_URL } from "@calcom/lib/constants";
+import { prisma } from "@calcom/prisma";
+
+import { test } from "../lib/fixtures";
+
+test.describe("User Avatar", async () => {
+  test("it can upload a user profile image", async ({ page, users }) => {
+    const user = await users.create({ name: "John Doe" });
+    await user.apiLogin();
+
+    let objectKey: string;
+
+    await test.step("Can upload an initial picture", async () => {
+      await page.goto("/settings/my-account/profile");
+
+      await page.getByTestId("open-upload-avatar-dialog").click();
+
+      const [fileChooser] = await Promise.all([
+        // It is important to call waitForEvent before click to set up waiting.
+        page.waitForEvent("filechooser"),
+        // Opens the file chooser.
+        page.getByTestId("open-upload-image-filechooser").click(),
+      ]);
+
+      await fileChooser.setFiles(`${path.dirname(__filename)}/../fixtures/cal.png`);
+
+      await page.getByTestId("upload-avatar").click();
+
+      await page.getByText("Update").click();
+      await page.waitForSelector("text=Settings updated successfully");
+
+      const response = await prisma.avatar.findUniqueOrThrow({
+        where: {
+          teamId_userId_isBanner: {
+            userId: user.id,
+            teamId: 0,
+            isBanner: false,
+          },
+        },
+      });
+
+      objectKey = response.objectKey;
+
+      const avatarImage = page.getByTestId("profile-upload-avatar").locator("img");
+
+      await expect(avatarImage).toHaveAttribute("src", new RegExp(`^\/api\/avatar\/${objectKey}\.png$`));
+
+      const urlResponse = await page.request.get((await avatarImage.getAttribute("src")) || "", {
+        maxRedirects: 0,
+      });
+
+      await expect(urlResponse?.status()).toBe(200);
+    });
+
+    await test.step("View avatar on the public page", async () => {
+      await page.goto(`/${user.username}`);
+
+      await expect(page.locator(`img`)).toHaveAttribute(
+        "src",
+        new RegExp(`\/api\/avatar\/${objectKey}\.png$`)
+      );
+      // verify objectKey is passed to the OG image
+      // yes, OG image URI encodes at multiple places.. don't want to mess with that.
+      await expect(page.locator('meta[property="og:image"]')).toHaveAttribute(
+        "content",
+        new RegExp(
+          encodeURIComponent(`meetingImage=${encodeURIComponent(`${CAL_URL}/api/avatar/${objectKey}.png`)}`)
+        )
+      );
+    });
+  });
+});
+
+test.describe("Team Logo", async () => {
+  test("it can upload a team logo image", async ({ page, users }) => {
+    const user = await users.create(undefined, { hasTeam: true });
+
+    const { team } = await user.getFirstTeamMembership();
+
+    await user.apiLogin();
+
+    await page.goto(`/settings/teams/${team.id}/profile`);
+
+    await test.step("Can upload an initial picture", async () => {
+      await page.getByTestId("open-upload-avatar-dialog").click();
+
+      const [fileChooser] = await Promise.all([
+        // It is important to call waitForEvent before click to set up waiting.
+        page.waitForEvent("filechooser"),
+        // Opens the file chooser.
+        page.getByTestId("open-upload-image-filechooser").click(),
+      ]);
+
+      await fileChooser.setFiles(`${path.dirname(__filename)}/../fixtures/cal.png`);
+
+      await page.getByTestId("upload-avatar").click();
+
+      await page.getByText("Update").click();
+      await page.waitForSelector("text=Your team has been updated successfully.");
+
+      const response = await prisma.avatar.findUniqueOrThrow({
+        where: {
+          teamId_userId_isBanner: {
+            userId: 0,
+            teamId: team.id,
+            isBanner: false,
+          },
+        },
+      });
+
+      const avatarImage = page.getByTestId("profile-upload-logo").locator("img");
+
+      await expect(avatarImage).toHaveAttribute(
+        "src",
+        new RegExp(`^\/api\/avatar\/${response.objectKey}\.png$`)
+      );
+
+      const urlResponse = await page.request.get((await avatarImage.getAttribute("src")) || "", {
+        maxRedirects: 0,
+      });
+
+      await expect(urlResponse?.status()).toBe(200);
+
+      await expect(
+        page.getByTestId("tab-teams").locator(`img[src="/api/avatar/${response.objectKey}.png"]`)
+      ).toBeVisible();
+    });
+  });
+});
+
+test.describe("Organization Logo", async () => {
+  test("it can upload a organization logo image", async ({ page, users, orgs }) => {
+    const owner = await users.create(undefined, { hasTeam: true, isUnpublished: true, isOrg: true });
+    const { team: org } = await owner.getOrgMembership();
+
+    await owner.apiLogin();
+    await page.goto("/settings/organizations/profile");
+
+    let objectKey: string;
+
+    await test.step("Can upload an initial picture", async () => {
+      await page.getByTestId("open-upload-avatar-dialog").click();
+
+      const [fileChooser] = await Promise.all([
+        // It is important to call waitForEvent before click to set up waiting.
+        page.waitForEvent("filechooser"),
+        // Opens the file chooser.
+        page.getByTestId("open-upload-image-filechooser").click(),
+      ]);
+
+      await fileChooser.setFiles(`${path.dirname(__filename)}/../fixtures/cal.png`);
+
+      await page.getByTestId("upload-avatar").click();
+
+      await page.getByTestId("update-org-profile-button").click();
+      await page.waitForSelector("text=Your organization updated successfully");
+
+      const response = await prisma.avatar.findUniqueOrThrow({
+        where: {
+          teamId_userId_isBanner: {
+            userId: 0,
+            teamId: org.id,
+            isBanner: false,
+          },
+        },
+      });
+
+      objectKey = response.objectKey;
+
+      const avatarImage = page.getByTestId("profile-upload-logo").locator("img");
+
+      await expect(avatarImage).toHaveAttribute(
+        "src",
+        new RegExp(`^\/api\/avatar\/${response.objectKey}\.png$`)
+      );
+
+      const urlResponse = await page.request.get((await avatarImage.getAttribute("src")) || "", {
+        maxRedirects: 0,
+      });
+
+      await expect(urlResponse?.status()).toBe(200);
+
+      // TODO: Implement the org logo updating in the sidebar
+      //       this should be done in the orgBrandingContext
+    });
+
+    const requestedSlug = org.metadata?.requestedSlug;
+
+    await test.step("it shows the correct logo on the unpublished public page", async () => {
+      await page.goto(`/org/${requestedSlug}`);
+
+      expect(await page.locator('[data-testid="empty-screen"]').count()).toBe(1);
+
+      await expect(page.locator(`img`)).toHaveAttribute(
+        "src",
+        new RegExp(`^\/api\/avatar\/${objectKey}\.png$`)
+      );
+    });
+
+    // TODO: add test for published team.
+    // unpublished works regardless of orgDomain but when it is published it does work
+  });
+});

calcom/apps/web/playwright/signup.e2e.ts

@@ -0,0 +1,291 @@
+import { expect } from "@playwright/test";
+import { randomBytes } from "crypto";
+
+import { APP_NAME, IS_PREMIUM_USERNAME_ENABLED, IS_MAILHOG_ENABLED } from "@calcom/lib/constants";
+import prisma from "@calcom/prisma";
+
+import { test } from "./lib/fixtures";
+import { getEmailsReceivedByUser, localize } from "./lib/testUtils";
+import { expectInvitationEmailToBeReceived } from "./team/expects";
+
+test.describe.configure({ mode: "parallel" });
+
+test.describe("Signup Flow Test", async () => {
+  test.beforeEach(async ({ features }) => {
+    features.reset(); // This resets to the inital state not an empt yarray
+  });
+  test.afterAll(async ({ users }) => {
+    await users.deleteAll();
+  });
+  test("Username is taken", async ({ page, users }) => {
+    // log in trail user
+    await test.step("Sign up", async () => {
+      await users.create({
+        username: "pro",
+      });
+
+      await page.goto("/signup");
+      await page.waitForLoadState("networkidle");
+
+      const alertMessage = "Username or email is already taken";
+
+      // Fill form
+      await page.locator('input[name="username"]').fill("pro");
+      await page.locator('input[name="email"]').fill("pro@example.com");
+      await page.locator('input[name="password"]').fill("Password99!");
+
+      // Submit form
+      await page.click('button[type="submit"]');
+
+      const alert = await page.waitForSelector('[data-testid="alert"]');
+      const alertMessageInner = await alert.innerText();
+
+      expect(alertMessage).toBeDefined();
+      expect(alertMessageInner).toContain(alertMessageInner);
+    });
+  });
+  test("Email is taken", async ({ page, users }) => {
+    // log in trail user
+    await test.step("Sign up", async () => {
+      const user = await users.create({
+        username: "pro",
+      });
+
+      await page.goto("/signup");
+      await page.waitForLoadState("networkidle");
+
+      const alertMessage = "Username or email is already taken";
+
+      // Fill form
+      await page.locator('input[name="username"]').fill("randomuserwhodoesntexist");
+      await page.locator('input[name="email"]').fill(user.email);
+      await page.locator('input[name="password"]').fill("Password99!");
+
+      // Submit form
+
+      await page.click('button[type="submit"]');
+      const alert = await page.waitForSelector('[data-testid="alert"]');
+      const alertMessageInner = await alert.innerText();
+
+      expect(alertMessage).toBeDefined();
+      expect(alertMessageInner).toContain(alertMessageInner);
+    });
+  });
+  test("Premium Username Flow - creates stripe checkout", async ({ page, users, prisma }) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(!IS_PREMIUM_USERNAME_ENABLED, "Only run on Cal.com");
+    const userToCreate = users.buildForSignup({
+      username: "rock",
+      password: "Password99!",
+    });
+    // Ensure the premium username is available
+    await prisma.user.deleteMany({ where: { username: "rock" } });
+
+    // Signup with premium username name
+    await page.goto("/signup");
+    await page.waitForLoadState("networkidle");
+
+    // Fill form
+    await page.locator('input[name="username"]').fill("rock");
+    await page.locator('input[name="email"]').fill(userToCreate.email);
+    await page.locator('input[name="password"]').fill(userToCreate.password);
+
+    await page.click('button[type="submit"]');
+
+    // Check that stripe checkout is present
+    const expectedUrl = "https://checkout.stripe.com";
+
+    await page.waitForURL((url) => url.href.startsWith(expectedUrl));
+    const url = page.url();
+
+    // Check that the URL matches the expected URL
+    expect(url).toContain(expectedUrl);
+    // TODO: complete the stripe checkout flow
+  });
+  test("Signup with valid (non premium) username", async ({ page, users, features }) => {
+    const userToCreate = users.buildForSignup({
+      username: "rick-jones",
+      password: "Password99!",
+      // Email intentonally kept as different from username
+      email: `rickjones${Math.random()}-${Date.now()}@example.com`,
+    });
+
+    await page.goto("/signup");
+    await page.waitForLoadState("networkidle");
+
+    // Fill form
+    await page.locator('input[name="username"]').fill(userToCreate.username);
+    await page.locator('input[name="email"]').fill(userToCreate.email);
+    await page.locator('input[name="password"]').fill(userToCreate.password);
+
+    await page.click('button[type="submit"]');
+    await page.waitForURL("/auth/verify-email**");
+
+    // Check that the URL matches the expected URL
+    expect(page.url()).toContain("/auth/verify-email");
+    const dbUser = await prisma.user.findUnique({ where: { email: userToCreate.email } });
+    // Verify that the username is the same as the one provided and isn't accidentally changed to email derived username - That happens only for organization member signup
+    expect(dbUser?.username).toBe(userToCreate.username);
+  });
+  test("Signup fields prefilled with query params", async ({ page, users }) => {
+    const signupUrlWithParams = "/signup?username=rick-jones&email=rick-jones%40example.com";
+    await page.goto(signupUrlWithParams);
+
+    // Fill form
+    const usernameInput = page.locator('input[name="username"]');
+    const emailInput = page.locator('input[name="email"]');
+
+    expect(await usernameInput.inputValue()).toBe("rick-jones");
+    expect(await emailInput.inputValue()).toBe("rick-jones@example.com");
+  });
+  test("Signup with token prefils correct fields", async ({ page, users, prisma }) => {
+    //Create a user and create a token
+    const token = randomBytes(32).toString("hex");
+    const userToCreate = users.buildForSignup({
+      username: "rick-team",
+    });
+
+    const createdtoken = await prisma.verificationToken.create({
+      data: {
+        identifier: userToCreate.email,
+        token,
+        expires: new Date(new Date().setHours(168)), // +1 week
+        team: {
+          create: {
+            name: "Rick's Team",
+            slug: `${userToCreate.username}-team`,
+          },
+        },
+      },
+    });
+
+    // create a user with the same email as the token
+    const rickTeamUser = await prisma.user.create({
+      data: {
+        email: userToCreate.email,
+        username: userToCreate.username,
+      },
+    });
+
+    // Create provitional membership
+    await prisma.membership.create({
+      data: {
+        teamId: createdtoken.teamId ?? -1,
+        userId: rickTeamUser.id,
+        role: "ADMIN",
+        accepted: false,
+      },
+    });
+
+    const signupUrlWithToken = `/signup?token=${token}`;
+    await page.goto(signupUrlWithToken);
+    await page.waitForLoadState("networkidle");
+
+    const usernameField = page.locator('input[name="username"]');
+    const emailField = page.locator('input[name="email"]');
+
+    expect(await usernameField.inputValue()).toBe(userToCreate.username);
+    expect(await emailField.inputValue()).toBe(userToCreate.email);
+
+    // Cleanup specific to this test
+    // Clean up the user and token
+    await prisma.user.deleteMany({ where: { email: userToCreate.email } });
+    await prisma.verificationToken.deleteMany({ where: { identifier: createdtoken.identifier } });
+    await prisma.team.deleteMany({ where: { id: createdtoken.teamId! } });
+  });
+  test("Email verification sent if enabled", async ({ page, prisma, emails, users, features }) => {
+    const EmailVerifyFlag = features.get("email-verification")?.enabled;
+
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(!EmailVerifyFlag || !IS_MAILHOG_ENABLED, "Skipping check - Email verify disabled");
+    // Ensure email verification before testing (TODO: this could break other tests but we can fix that later)
+    await prisma.feature.update({
+      where: { slug: "email-verification" },
+      data: { enabled: true },
+    });
+    const userToCreate = users.buildForSignup({
+      email: users.trackEmail({ username: "email-verify", domain: "example.com" }),
+      username: "email-verify",
+      password: "Password99!",
+    });
+
+    await page.goto("/signup");
+
+    // Fill form
+    await page.locator('input[name="username"]').fill(userToCreate.username);
+    await page.locator('input[name="email"]').fill(userToCreate.email);
+    await page.locator('input[name="password"]').fill(userToCreate.password);
+
+    await page.click('button[type="submit"]');
+
+    await page.waitForURL((url) => url.pathname.includes("/auth/verify-email"));
+    // Find the newly created user and add it to the fixture store
+    const newUser = await users.set(userToCreate.email);
+    expect(newUser).not.toBeNull();
+
+    const receivedEmails = await getEmailsReceivedByUser({
+      emails,
+      userEmail: userToCreate.email,
+    });
+
+    // We need to wait for emails to be sent
+    // eslint-disable-next-line playwright/no-wait-for-timeout
+    await page.waitForTimeout(5000);
+
+    expect(receivedEmails?.total).toBe(1);
+
+    const verifyEmail = receivedEmails?.items[0];
+    expect(verifyEmail?.subject).toBe(`${APP_NAME}: Verify your account`);
+  });
+  test("If signup is disabled allow team invites", async ({ browser, page, users, emails }) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(process.env.NEXT_PUBLIC_DISABLE_SIGNUP !== "true", "Skipping due to signup being enabled");
+
+    const t = await localize("en");
+    const teamOwner = await users.create(undefined, { hasTeam: true });
+    const { team } = await teamOwner.getFirstTeamMembership();
+    await teamOwner.apiLogin();
+    await page.goto(`/settings/teams/${team.id}/members`);
+    await page.waitForLoadState("networkidle");
+
+    await test.step("Invite User to team", async () => {
+      // TODO: This invite logic should live in a fixture - its used in team and orgs invites (Duplicated from team/org invites)
+      const invitedUserEmail = `rick_${Date.now()}@domain-${Date.now()}.com`;
+      await page.locator(`button:text("${t("add")}")`).click();
+      await page.locator('input[name="inviteUser"]').fill(invitedUserEmail);
+      await page.locator(`button:text("${t("send_invite")}")`).click();
+      await page.waitForLoadState("networkidle");
+      const inviteLink = await expectInvitationEmailToBeReceived(
+        page,
+        emails,
+        invitedUserEmail,
+        `${team.name}'s admin invited you to join the team ${team.name} on Cal.com`,
+        "signup?token"
+      );
+
+      //Check newly invited member exists and is pending
+      await expect(
+        page.locator(`[data-testid="email-${invitedUserEmail.replace("@", "")}-pending"]`)
+      ).toHaveCount(1);
+
+      // eslint-disable-next-line playwright/no-conditional-in-test
+      if (!inviteLink) return;
+
+      // Follow invite link to new window
+      const context = await browser.newContext();
+      const newPage = await context.newPage();
+      await newPage.goto(inviteLink);
+      await newPage.waitForLoadState("networkidle");
+
+      const url = new URL(newPage.url());
+      expect(url.pathname).toBe("/signup");
+
+      // Check required fields
+      await newPage.locator("input[name=password]").fill(`P4ssw0rd!`);
+      await newPage.locator("button[type=submit]").click();
+      await newPage.waitForURL("/getting-started?from=signup");
+      await newPage.close();
+      await context.close();
+    });
+  });
+});

calcom/apps/web/playwright/team/expects.ts

@@ -0,0 +1,40 @@
+import type { Page } from "@playwright/test";
+import { expect } from "@playwright/test";
+import { JSDOM } from "jsdom";
+import type { Messages } from "mailhog";
+import type { createEmailsFixture } from "playwright/fixtures/emails";
+
+import { getEmailsReceivedByUser } from "../lib/testUtils";
+
+export async function expectInvitationEmailToBeReceived(
+  page: Page,
+  emails: ReturnType<typeof createEmailsFixture>,
+  userEmail: string,
+  subject?: string | null,
+  returnLink?: string
+) {
+  if (!emails) return null;
+
+  // eslint-disable-next-line playwright/no-wait-for-timeout
+  await page.waitForTimeout(2000);
+  const receivedEmails = await getEmailsReceivedByUser({ emails, userEmail });
+  expect(receivedEmails?.total).toBe(1);
+
+  const [firstReceivedEmail] = (receivedEmails as Messages).items;
+  if (subject) {
+    expect(firstReceivedEmail.subject).toBe(subject);
+  }
+  if (!returnLink) return;
+  const dom = new JSDOM(firstReceivedEmail.html);
+  const anchor = dom.window.document.querySelector(`a[href*="${returnLink}"]`);
+  return anchor?.getAttribute("href");
+}
+
+export async function expectExistingUserToBeInvitedToOrganization(
+  page: Page,
+  emails: ReturnType<typeof createEmailsFixture>,
+  userEmail: string,
+  subject?: string | null
+) {
+  return expectInvitationEmailToBeReceived(page, emails, userEmail, subject, "settings/team");
+}

calcom/apps/web/playwright/team/team-invitation.e2e.ts

@@ -0,0 +1,129 @@
+import { expect } from "@playwright/test";
+
+import { WEBAPP_URL } from "@calcom/lib/constants";
+
+import { test } from "../lib/fixtures";
+import { localize, getInviteLink } from "../lib/testUtils";
+import { expectInvitationEmailToBeReceived } from "./expects";
+
+test.describe.configure({ mode: "parallel" });
+
+test.afterEach(async ({ users }) => {
+  await users.deleteAll();
+});
+
+test.describe("Team", () => {
+  test("Invitation (non verified)", async ({ browser, page, users, emails }) => {
+    const t = await localize("en");
+    const teamOwner = await users.create(undefined, { hasTeam: true });
+    const { team } = await teamOwner.getFirstTeamMembership();
+    await teamOwner.apiLogin();
+    await page.goto(`/settings/teams/${team.id}/members`);
+    await page.waitForLoadState("networkidle");
+
+    await test.step("To the team by email (external user)", async () => {
+      const invitedUserEmail = users.trackEmail({
+        username: "rick",
+        domain: `domain-${Date.now()}.com`,
+      });
+      await page.locator(`button:text("${t("add")}")`).click();
+      await page.locator('input[name="inviteUser"]').fill(invitedUserEmail);
+      await page.locator(`button:text("${t("send_invite")}")`).click();
+      await page.waitForLoadState("networkidle");
+      const inviteLink = await expectInvitationEmailToBeReceived(
+        page,
+        emails,
+        invitedUserEmail,
+        `${team.name}'s admin invited you to join the team ${team.name} on Cal.com`,
+        "signup?token"
+      );
+
+      //Check newly invited member exists and is pending
+      await expect(
+        page.locator(`[data-testid="email-${invitedUserEmail.replace("@", "")}-pending"]`)
+      ).toHaveCount(1);
+
+      // eslint-disable-next-line playwright/no-conditional-in-test
+      if (!inviteLink) return null;
+
+      // Follow invite link to new window
+      const context = await browser.newContext();
+      const newPage = await context.newPage();
+      await newPage.goto(inviteLink);
+      await newPage.waitForLoadState("networkidle");
+
+      // Check required fields
+      const button = newPage.locator("button[type=submit][disabled]");
+      await expect(button).toBeVisible(); // email + 3 password hints
+
+      // Check required fields
+      await newPage.locator("input[name=password]").fill(`P4ssw0rd!`);
+      await newPage.locator("button[type=submit]").click();
+      await newPage.waitForURL("/getting-started?from=signup");
+      await newPage.close();
+      await context.close();
+
+      // Check newly invited member is not pending anymore
+      await page.bringToFront();
+      await page.goto(`/settings/teams/${team.id}/members`);
+      await page.waitForLoadState("networkidle");
+      await expect(
+        page.locator(`[data-testid="email-${invitedUserEmail.replace("@", "")}-pending"]`)
+      ).toHaveCount(0);
+    });
+
+    await test.step("To the team by invite link", async () => {
+      const user = await users.create({
+        email: `user-invite-${Date.now()}@domain.com`,
+        password: "P4ssw0rd!",
+      });
+      await page.locator(`button:text("${t("add")}")`).click();
+      await page.locator(`[data-testid="copy-invite-link-button"]`).click();
+      const inviteLink = await getInviteLink(page);
+
+      const context = await browser.newContext();
+      const inviteLinkPage = await context.newPage();
+      await inviteLinkPage.goto(inviteLink);
+      await inviteLinkPage.waitForLoadState("domcontentloaded");
+
+      await inviteLinkPage.locator("button[type=submit]").click();
+      await expect(inviteLinkPage.locator('[data-testid="field-error"]')).toHaveCount(2);
+
+      await inviteLinkPage.locator("input[name=email]").fill(user.email);
+      await inviteLinkPage.locator("input[name=password]").fill(user.username || "P4ssw0rd!");
+      await inviteLinkPage.locator("button[type=submit]").click();
+
+      await inviteLinkPage.waitForURL(`${WEBAPP_URL}/teams**`);
+    });
+  });
+
+  test("Invitation (verified)", async ({ browser, page, users, emails }) => {
+    const t = await localize("en");
+    const teamOwner = await users.create({ name: `team-owner-${Date.now()}` }, { hasTeam: true });
+    const { team } = await teamOwner.getFirstTeamMembership();
+    await teamOwner.apiLogin();
+    await page.goto(`/settings/teams/${team.id}/members`);
+    await page.waitForLoadState("networkidle");
+
+    await test.step("To the organization by email (internal user)", async () => {
+      const invitedUserEmail = users.trackEmail({
+        username: "rick",
+        domain: `example.com`,
+      });
+      await page.locator(`button:text("${t("add")}")`).click();
+      await page.locator('input[name="inviteUser"]').fill(invitedUserEmail);
+      await page.locator(`button:text("${t("send_invite")}")`).click();
+      await page.waitForLoadState("networkidle");
+      await expectInvitationEmailToBeReceived(
+        page,
+        emails,
+        invitedUserEmail,
+        `${teamOwner.name} invited you to join the team ${team.name} on Cal.com`
+      );
+
+      await expect(
+        page.locator(`[data-testid="email-${invitedUserEmail.replace("@", "")}-pending"]`)
+      ).toHaveCount(1);
+    });
+  });
+});

calcom/apps/web/playwright/teams.e2e.ts

@@ -0,0 +1,326 @@
+import { expect } from "@playwright/test";
+
+import { IS_TEAM_BILLING_ENABLED } from "@calcom/lib/constants";
+import { prisma } from "@calcom/prisma";
+import { SchedulingType } from "@calcom/prisma/enums";
+
+import { test } from "./lib/fixtures";
+import { testBothFutureAndLegacyRoutes } from "./lib/future-legacy-routes";
+import {
+  bookTimeSlot,
+  fillStripeTestCheckout,
+  selectFirstAvailableTimeSlotNextMonth,
+  testName,
+  todo,
+} from "./lib/testUtils";
+
+test.describe.configure({ mode: "parallel" });
+
+testBothFutureAndLegacyRoutes.describe("Teams A/B tests", (routeVariant) => {
+  test("should render the /teams page", async ({ page, users, context }) => {
+    // TODO: Revert until OOM issue is resolved
+    test.skip(routeVariant === "future", "Future route not ready yet");
+    const user = await users.create();
+
+    await user.apiLogin();
+
+    await page.goto("/teams");
+
+    await page.waitForLoadState();
+
+    const locator = page.getByRole("heading", { name: "Teams", exact: true });
+
+    await expect(locator).toBeVisible();
+  });
+});
+
+testBothFutureAndLegacyRoutes.describe("Teams - NonOrg", (routeVariant) => {
+  test.afterEach(({ users }) => users.deleteAll());
+
+  test("Team Onboarding Invite Members", async ({ page, users }) => {
+    const user = await users.create(undefined, { hasTeam: true });
+    const { team } = await user.getFirstTeamMembership();
+    const inviteeEmail = `${user.username}+invitee@example.com`;
+
+    await user.apiLogin();
+
+    page.goto(`/settings/teams/${team.id}/onboard-members`);
+    await page.waitForLoadState("networkidle");
+
+    await test.step("Can add members", async () => {
+      // Click [data-testid="new-member-button"]
+      await page.locator('[data-testid="new-member-button"]').click();
+      // Fill [placeholder="email\@example\.com"]
+      await page.locator('[placeholder="email\\@example\\.com"]').fill(inviteeEmail);
+      // Click [data-testid="invite-new-member-button"]
+      await page.locator('[data-testid="invite-new-member-button"]').click();
+      await expect(page.locator(`li:has-text("${inviteeEmail}")`)).toBeVisible();
+      expect(await page.locator('[data-testid="pending-member-item"]').count()).toBe(2);
+    });
+
+    await test.step("Can remove members", async () => {
+      const removeMemberButton = page.locator('[data-testid="remove-member-button"]');
+      await removeMemberButton.click();
+      await removeMemberButton.waitFor({ state: "hidden" });
+      expect(await page.locator('[data-testid="pending-member-item"]').count()).toBe(1);
+      // Cleanup here since this user is created without our fixtures.
+      await prisma.user.delete({ where: { email: inviteeEmail } });
+    });
+
+    await test.step("Finishing brings you to team profile page", async () => {
+      await page.locator("[data-testid=publish-button]").click();
+      await expect(page).toHaveURL(/\/settings\/teams\/(\d+)\/profile$/i);
+    });
+
+    await test.step("Can disband team", async () => {
+      await page.locator("text=Disband Team").click();
+      await page.locator("text=Yes, disband team").click();
+      await page.waitForURL("/teams");
+      await expect(await page.locator(`text=${user.username}'s Team`).count()).toEqual(0);
+      // FLAKY: If other tests are running async this may mean there are >0 teams, empty screen will not be shown.
+      // await expect(page.locator('[data-testid="empty-screen"]')).toBeVisible();
+    });
+  });
+
+  test("Can create a booking for Collective EventType", async ({ page, users }) => {
+    const teamMatesObj = [
+      { name: "teammate-1" },
+      { name: "teammate-2" },
+      { name: "teammate-3" },
+      { name: "teammate-4" },
+    ];
+
+    const owner = await users.create(
+      { username: "pro-user", name: "pro-user" },
+      {
+        hasTeam: true,
+        teammates: teamMatesObj,
+        schedulingType: SchedulingType.COLLECTIVE,
+      }
+    );
+    const { team } = await owner.getFirstTeamMembership();
+    const { title: teamEventTitle, slug: teamEventSlug } = await owner.getFirstTeamEvent(team.id);
+
+    await page.goto(`/team/${team.slug}/${teamEventSlug}`);
+    await selectFirstAvailableTimeSlotNextMonth(page);
+    await bookTimeSlot(page);
+    await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+
+    // The title of the booking
+    const BookingTitle = `${teamEventTitle} between ${team.name} and ${testName}`;
+    await expect(page.locator("[data-testid=booking-title]")).toHaveText(BookingTitle);
+    // The booker should be in the attendee list
+    await expect(page.locator(`[data-testid="attendee-name-${testName}"]`)).toHaveText(testName);
+
+    // All the teammates should be in the booking
+    for (const teammate of teamMatesObj) {
+      await expect(page.getByText(teammate.name, { exact: true })).toBeVisible();
+    }
+
+    // TODO: Assert whether the user received an email
+  });
+
+  test("Can create a booking for Round Robin EventType", async ({ page, users }) => {
+    const teamMatesObj = [
+      { name: "teammate-1" },
+      { name: "teammate-2" },
+      { name: "teammate-3" },
+      { name: "teammate-4" },
+    ];
+    const owner = await users.create(
+      { username: "pro-user", name: "pro-user" },
+      {
+        hasTeam: true,
+        teammates: teamMatesObj,
+        schedulingType: SchedulingType.ROUND_ROBIN,
+      }
+    );
+
+    const { team } = await owner.getFirstTeamMembership();
+    const { title: teamEventTitle, slug: teamEventSlug } = await owner.getFirstTeamEvent(team.id);
+
+    await page.goto(`/team/${team.slug}/${teamEventSlug}`);
+    await selectFirstAvailableTimeSlotNextMonth(page);
+    await bookTimeSlot(page);
+    await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+
+    // The person who booked the meeting should be in the attendee list
+    await expect(page.locator(`[data-testid="attendee-name-${testName}"]`)).toHaveText(testName);
+
+    // The title of the booking
+    const bookingTitle = await page.getByTestId("booking-title").textContent();
+    expect(
+      teamMatesObj.concat([{ name: owner.name! }]).some((teamMate) => {
+        const BookingTitle = `${teamEventTitle} between ${teamMate.name} and ${testName}`;
+        return BookingTitle === bookingTitle;
+      })
+    ).toBe(true);
+
+    // Since all the users have the same leastRecentlyBooked value
+    // Anyone of the teammates could be the Host of the booking.
+    const chosenUser = await page.getByTestId("booking-host-name").textContent();
+    expect(chosenUser).not.toBeNull();
+    expect(teamMatesObj.concat([{ name: owner.name! }]).some(({ name }) => name === chosenUser)).toBe(true);
+    // TODO: Assert whether the user received an email
+  });
+
+  test("Non admin team members cannot create team in org", async ({ page, users }) => {
+    test.skip(routeVariant === "future", "Future route not ready yet");
+    const teamMateName = "teammate-1";
+
+    const owner = await users.create(undefined, {
+      hasTeam: true,
+      isOrg: true,
+      teammates: [{ name: teamMateName }],
+    });
+
+    const allUsers = await users.get();
+    const memberUser = allUsers.find((user) => user.name === teamMateName);
+
+    // eslint-disable-next-line playwright/no-conditional-in-test
+    if (memberUser) {
+      await memberUser.apiLogin();
+
+      await page.goto("/teams");
+      await expect(page.locator("[data-testid=new-team-btn]")).toBeHidden();
+      await expect(page.locator("[data-testid=create-team-btn]")).toHaveAttribute("disabled", "");
+
+      const uniqueName = "test-unique-team-name";
+
+      // Go directly to the create team page
+      await page.goto("/settings/teams/new");
+      // Fill input[name="name"]
+      await page.locator('input[name="name"]').fill(uniqueName);
+      await page.click("[type=submit]");
+
+      // cleanup
+      const org = await owner.getOrgMembership();
+      await prisma.team.delete({ where: { id: org.teamId } });
+    }
+  });
+
+  test("Can create team with same name as user", async ({ page, users }) => {
+    test.skip(routeVariant === "future", "Future route not ready yet");
+    const user = await users.create();
+    // Name to be used for both user and team
+    const uniqueName = user.username!;
+    await user.apiLogin();
+    await page.goto("/teams");
+
+    await test.step("Can create team with same name", async () => {
+      // Click text=Create Team
+      await page.locator("text=Create Team").click();
+      await page.waitForURL("/settings/teams/new");
+      // Fill input[name="name"]
+      await page.locator('input[name="name"]').fill(uniqueName);
+      // Click text=Continue
+      await page.click("[type=submit]");
+      // TODO: Figure out a way to make this more reliable
+      // eslint-disable-next-line playwright/no-conditional-in-test
+      if (IS_TEAM_BILLING_ENABLED) await fillStripeTestCheckout(page);
+      await page.waitForURL(/\/settings\/teams\/(\d+)\/onboard-members.*$/i);
+      // Click text=Continue
+      await page.locator("[data-testid=publish-button]").click();
+      await expect(page).toHaveURL(/\/settings\/teams\/(\d+)\/profile$/i);
+    });
+
+    await test.step("Can access user and team with same slug", async () => {
+      // Go to team page and confirm name
+      const teamUrl = `/team/${uniqueName}`;
+      await page.goto(teamUrl);
+      await page.waitForURL(teamUrl);
+      await expect(page.locator("[data-testid=team-name]")).toHaveText(uniqueName);
+
+      // Go to user page and confirm name
+      const userUrl = `/${uniqueName}`;
+      await page.goto(userUrl);
+      await page.waitForURL(userUrl);
+      await expect(page.locator("[data-testid=name-title]")).toHaveText(uniqueName);
+
+      // cleanup team
+      await prisma.team.deleteMany({ where: { slug: uniqueName } });
+    });
+  });
+
+  test("Can create a private team", async ({ page, users }) => {
+    const teamMatesObj = [
+      { name: "teammate-1" },
+      { name: "teammate-2" },
+      { name: "teammate-3" },
+      { name: "teammate-4" },
+    ];
+
+    const owner = await users.create(
+      { username: "pro-user", name: "pro-user" },
+      {
+        hasTeam: true,
+        teammates: teamMatesObj,
+        schedulingType: SchedulingType.COLLECTIVE,
+      }
+    );
+
+    await owner.apiLogin();
+    const { team } = await owner.getFirstTeamMembership();
+
+    // Mark team as private
+    await page.goto(`/settings/teams/${team.id}/members`);
+    await Promise.all([
+      page.click("[data-testid=make-team-private-check]"),
+      expect(page.locator(`[data-testid=make-team-private-check][data-state="checked"]`)).toBeVisible(),
+      // according to switch implementation, checked state can be set before mutation is resolved
+      // so we need to await for req to resolve
+      page.waitForResponse((res) => res.url().includes("/api/trpc/teams/update")),
+    ]);
+
+    // Go to Team's page
+    await page.goto(`/team/${team.slug}`);
+    await expect(page.locator('[data-testid="book-a-team-member-btn"]')).toBeHidden();
+
+    // Go to members page
+    await page.goto(`/team/${team.slug}?members=1`);
+    await expect(page.locator('[data-testid="you-cannot-see-team-members"]')).toBeVisible();
+    await expect(page.locator('[data-testid="team-members-container"]')).toBeHidden();
+  });
+  test("Email Embeds slots are loading for team event types", async ({ page, users }) => {
+    const teamMatesObj = [
+      { name: "teammate-1" },
+      { name: "teammate-2" },
+      { name: "teammate-3" },
+      { name: "teammate-4" },
+    ];
+
+    const owner = await users.create(
+      { username: "pro-user", name: "pro-user" },
+      {
+        hasTeam: true,
+        teammates: teamMatesObj,
+        schedulingType: SchedulingType.COLLECTIVE,
+      }
+    );
+
+    await owner.apiLogin();
+    const { team } = await owner.getFirstTeamMembership();
+    const {
+      title: teamEventTitle,
+      slug: teamEventSlug,
+      id: teamEventId,
+    } = await owner.getFirstTeamEvent(team.id);
+
+    await page.goto("/event-types");
+
+    await page.getByTestId(`event-type-options-${teamEventId}`).first().click();
+    await page.getByTestId("embed").click();
+    await page.getByTestId("email").click();
+    await page.getByTestId("incrementMonth").click();
+
+    await expect(page.getByTestId("no-slots-available")).toBeHidden();
+
+    // Check Team Url
+    const availableTimesUrl = await page.getByTestId("see_all_available_times").getAttribute("href");
+    await expect(availableTimesUrl).toContain(`/team/${team.slug}/${teamEventSlug}`);
+  });
+
+  todo("Create a Round Robin with different leastRecentlyBooked hosts");
+  todo("Reschedule a Collective EventType booking");
+  todo("Reschedule a Round Robin EventType booking");
+});

calcom/apps/web/playwright/trial.e2e.ts

@@ -0,0 +1,7 @@
+import { test } from "@playwright/test";
+
+import { todo } from "./lib/testUtils";
+
+test.describe("Trial account tests", () => {
+  todo("Add tests with a TRIAL account");
+});

calcom/apps/web/playwright/unpublished.e2e.ts

@@ -0,0 +1,119 @@
+import { expect } from "@playwright/test";
+
+import { SchedulingType } from "@calcom/prisma/enums";
+
+import { test } from "./lib/fixtures";
+
+test.describe.configure({ mode: "parallel" });
+
+const title = (name: string) => `${name} is unpublished`;
+const description = (entity: string) =>
+  `This ${entity} link is currently not available. Please contact the ${entity} owner or ask them to publish it.`;
+
+test.afterAll(async ({ users }) => {
+  await users.deleteAll();
+});
+
+test.describe("Unpublished", () => {
+  test("Regular team profile", async ({ page, users }) => {
+    const owner = await users.create(undefined, { hasTeam: true, isUnpublished: true });
+    const { team } = await owner.getFirstTeamMembership();
+    const { requestedSlug } = team.metadata as { requestedSlug: string };
+    await page.goto(`/team/${requestedSlug}`);
+    expect(await page.locator('[data-testid="empty-screen"]').count()).toBe(1);
+    expect(await page.locator(`h2:has-text("${title(team.name)}")`).count()).toBe(1);
+    expect(await page.locator(`div:text("${description("team")}")`).count()).toBe(1);
+    await expect(page.locator(`img`)).toHaveAttribute("src", /.*/);
+  });
+
+  test("Regular team event type", async ({ page, users }) => {
+    const owner = await users.create(undefined, {
+      hasTeam: true,
+      isUnpublished: true,
+      schedulingType: SchedulingType.COLLECTIVE,
+    });
+    const { team } = await owner.getFirstTeamMembership();
+    const { requestedSlug } = team.metadata as { requestedSlug: string };
+    const { slug: teamEventSlug } = await owner.getFirstTeamEvent(team.id);
+    await page.goto(`/team/${requestedSlug}/${teamEventSlug}`);
+    expect(await page.locator('[data-testid="empty-screen"]').count()).toBe(1);
+    expect(await page.locator(`h2:has-text("${title(team.name)}")`).count()).toBe(1);
+    expect(await page.locator(`div:text("${description("team")}")`).count()).toBe(1);
+    await expect(page.locator(`img`)).toHaveAttribute("src", /.*/);
+  });
+
+  test("Organization profile", async ({ users, page }) => {
+    const owner = await users.create(undefined, { hasTeam: true, isUnpublished: true, isOrg: true });
+    const { team: org } = await owner.getOrgMembership();
+    const { requestedSlug } = org.metadata as { requestedSlug: string };
+    await page.goto(`/org/${requestedSlug}`);
+    await page.waitForLoadState("networkidle");
+    expect(await page.locator('[data-testid="empty-screen"]').count()).toBe(1);
+    expect(await page.locator(`h2:has-text("${title(org.name)}")`).count()).toBe(1);
+    expect(await page.locator(`div:text("${description("organization")}")`).count()).toBe(1);
+    await expect(page.locator(`img`)).toHaveAttribute("src", /.*/);
+  });
+
+  test("Organization sub-team", async ({ users, page }) => {
+    const owner = await users.create(undefined, {
+      hasTeam: true,
+      isUnpublished: true,
+      isOrg: true,
+      hasSubteam: true,
+    });
+    const { team: org } = await owner.getOrgMembership();
+    const { requestedSlug } = org.metadata as { requestedSlug: string };
+    const [{ slug: subteamSlug }] = org.children as { slug: string }[];
+    await page.goto(`/org/${requestedSlug}/team/${subteamSlug}`);
+    await page.waitForLoadState("networkidle");
+    expect(await page.locator('[data-testid="empty-screen"]').count()).toBe(1);
+    expect(await page.locator(`h2:has-text("${title(org.name)}")`).count()).toBe(1);
+    expect(await page.locator(`div:text("${description("organization")}")`).count()).toBe(1);
+    await expect(page.locator(`img`)).toHaveAttribute("src", /.*/);
+  });
+
+  test("Organization sub-team event-type", async ({ users, page }) => {
+    const owner = await users.create(undefined, {
+      hasTeam: true,
+      isUnpublished: true,
+      isOrg: true,
+      hasSubteam: true,
+    });
+    const { team: org } = await owner.getOrgMembership();
+    const { requestedSlug } = org.metadata as { requestedSlug: string };
+    const [{ slug: subteamSlug, id: subteamId }] = org.children as { slug: string; id: number }[];
+    const { slug: subteamEventSlug } = await owner.getFirstTeamEvent(subteamId);
+    await page.goto(`/org/${requestedSlug}/team/${subteamSlug}/${subteamEventSlug}`);
+    await page.waitForLoadState("networkidle");
+
+    expect(await page.locator('[data-testid="empty-screen"]').count()).toBe(1);
+    expect(await page.locator(`h2:has-text("${title(org.name)}")`).count()).toBe(1);
+    expect(await page.locator(`div:text("${description("organization")}")`).count()).toBe(1);
+    await expect(page.locator(`img`)).toHaveAttribute("src", /.*/);
+  });
+
+  test("Organization user", async ({ users, page }) => {
+    const owner = await users.create(undefined, { hasTeam: true, isUnpublished: true, isOrg: true });
+    const { team: org } = await owner.getOrgMembership();
+    const { requestedSlug } = org.metadata as { requestedSlug: string };
+    await page.goto(`/org/${requestedSlug}/${owner.username}`);
+    await page.waitForLoadState("networkidle");
+    expect(await page.locator('[data-testid="empty-screen"]').count()).toBe(1);
+    expect(await page.locator(`h2:has-text("${title(org.name)}")`).count()).toBe(1);
+    expect(await page.locator(`div:text("${description("organization")}")`).count()).toBe(1);
+    await expect(page.locator(`img`)).toHaveAttribute("src", /.*/);
+  });
+
+  test("Organization user event-type", async ({ users, page }) => {
+    const owner = await users.create(undefined, { hasTeam: true, isUnpublished: true, isOrg: true });
+    const { team: org } = await owner.getOrgMembership();
+    const { requestedSlug } = org.metadata as { requestedSlug: string };
+    const [{ slug: ownerEventType }] = owner.eventTypes;
+    await page.goto(`/org/${requestedSlug}/${owner.username}/${ownerEventType}`);
+    await page.waitForLoadState("networkidle");
+    expect(await page.locator('[data-testid="empty-screen"]').count()).toBe(1);
+    expect(await page.locator(`h2:has-text("${title(org.name)}")`).count()).toBe(1);
+    expect(await page.locator(`div:text("${description("organization")}")`).count()).toBe(1);
+    await expect(page.locator(`img`)).toHaveAttribute("src", /.*/);
+  });
+});

calcom/apps/web/playwright/webhook.e2e.ts

@@ -0,0 +1,710 @@
+import { expect } from "@playwright/test";
+import { v4 as uuidv4 } from "uuid";
+
+import dayjs from "@calcom/dayjs";
+import prisma from "@calcom/prisma";
+import { BookingStatus } from "@calcom/prisma/client";
+
+import { test } from "./lib/fixtures";
+import {
+  bookOptinEvent,
+  bookTimeSlot,
+  createUserWithSeatedEventAndAttendees,
+  gotoRoutingLink,
+  selectFirstAvailableTimeSlotNextMonth,
+} from "./lib/testUtils";
+
+// remove dynamic properties that differs depending on where you run the tests
+const dynamic = "[redacted/dynamic]";
+
+test.afterEach(async ({ users }) => {
+  // This also delete forms on cascade
+  await users.deleteAll();
+});
+
+test.describe("BOOKING_CREATED", async () => {
+  test("add webhook & test that creating an event triggers a webhook call", async ({
+    page,
+    users,
+    webhooks,
+  }, _testInfo) => {
+    const user = await users.create();
+    const [eventType] = user.eventTypes;
+    await user.apiLogin();
+    const webhookReceiver = await webhooks.createReceiver();
+
+    // --- Book the first available day next month in the pro user's "30min"-event
+    await page.goto(`/${user.username}/${eventType.slug}`);
+    await selectFirstAvailableTimeSlotNextMonth(page);
+    await bookTimeSlot(page);
+
+    await webhookReceiver.waitForRequestCount(1);
+
+    const [request] = webhookReceiver.requestList;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const body: any = request.body;
+
+    body.createdAt = dynamic;
+    body.payload.startTime = dynamic;
+    body.payload.endTime = dynamic;
+    body.payload.location = dynamic;
+    for (const attendee of body.payload.attendees) {
+      attendee.timeZone = dynamic;
+      attendee.language = dynamic;
+    }
+    body.payload.organizer.id = dynamic;
+    body.payload.organizer.email = dynamic;
+    body.payload.organizer.timeZone = dynamic;
+    body.payload.organizer.language = dynamic;
+    body.payload.uid = dynamic;
+    body.payload.bookingId = dynamic;
+    body.payload.additionalInformation = dynamic;
+    body.payload.requiresConfirmation = dynamic;
+    body.payload.eventTypeId = dynamic;
+    body.payload.videoCallData = dynamic;
+    body.payload.appsStatus = dynamic;
+    body.payload.metadata.videoCallUrl = dynamic;
+    expect(body).toMatchObject({
+      triggerEvent: "BOOKING_CREATED",
+      createdAt: "[redacted/dynamic]",
+      payload: {
+        type: "30-min",
+        title: "30 min between Nameless and Test Testson",
+        description: "",
+        additionalNotes: "",
+        customInputs: {},
+        startTime: "[redacted/dynamic]",
+        endTime: "[redacted/dynamic]",
+        organizer: {
+          id: "[redacted/dynamic]",
+          name: "Nameless",
+          email: "[redacted/dynamic]",
+          timeZone: "[redacted/dynamic]",
+          language: "[redacted/dynamic]",
+        },
+        responses: {
+          email: {
+            value: "test@example.com",
+            label: "email_address",
+          },
+          name: {
+            value: "Test Testson",
+            label: "your_name",
+          },
+        },
+        userFieldsResponses: {},
+        attendees: [
+          {
+            email: "test@example.com",
+            name: "Test Testson",
+            timeZone: "[redacted/dynamic]",
+            language: "[redacted/dynamic]",
+          },
+        ],
+        location: "[redacted/dynamic]",
+        destinationCalendar: null,
+        hideCalendarNotes: false,
+        requiresConfirmation: "[redacted/dynamic]",
+        eventTypeId: "[redacted/dynamic]",
+        seatsShowAttendees: true,
+        seatsPerTimeSlot: null,
+        uid: "[redacted/dynamic]",
+        eventTitle: "30 min",
+        eventDescription: null,
+        price: 0,
+        currency: "usd",
+        length: 30,
+        bookingId: "[redacted/dynamic]",
+        metadata: { videoCallUrl: "[redacted/dynamic]" },
+        status: "ACCEPTED",
+        additionalInformation: "[redacted/dynamic]",
+      },
+    });
+
+    webhookReceiver.close();
+  });
+});
+
+test.describe("BOOKING_REJECTED", async () => {
+  test("can book an event that requires confirmation and then that booking can be rejected by organizer", async ({
+    page,
+    users,
+    webhooks,
+  }) => {
+    // --- create a user
+    const user = await users.create();
+
+    // --- visit user page
+    await page.goto(`/${user.username}`);
+
+    // --- book the user's event
+    await bookOptinEvent(page);
+
+    // --- login as that user
+    await user.apiLogin();
+    const webhookReceiver = await webhooks.createReceiver();
+    await page.goto("/bookings/unconfirmed");
+    await page.click('[data-testid="reject"]');
+    await page.click('[data-testid="rejection-confirm"]');
+    await page.waitForResponse((response) => response.url().includes("/api/trpc/bookings/confirm"));
+
+    await webhookReceiver.waitForRequestCount(1);
+
+    const [request] = webhookReceiver.requestList;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const body = request.body as any;
+
+    body.createdAt = dynamic;
+    body.payload.startTime = dynamic;
+    body.payload.endTime = dynamic;
+    body.payload.location = dynamic;
+    for (const attendee of body.payload.attendees) {
+      attendee.timeZone = dynamic;
+      attendee.language = dynamic;
+    }
+    body.payload.organizer.id = dynamic;
+    body.payload.organizer.email = dynamic;
+    body.payload.organizer.timeZone = dynamic;
+    body.payload.organizer.language = dynamic;
+    body.payload.uid = dynamic;
+    body.payload.bookingId = dynamic;
+    body.payload.additionalInformation = dynamic;
+    body.payload.requiresConfirmation = dynamic;
+    body.payload.eventTypeId = dynamic;
+    body.payload.videoCallData = dynamic;
+    body.payload.appsStatus = dynamic;
+    // body.payload.metadata.videoCallUrl = dynamic;
+
+    expect(body).toMatchObject({
+      triggerEvent: "BOOKING_REJECTED",
+      createdAt: "[redacted/dynamic]",
+      payload: {
+        type: "opt-in",
+        title: "Opt in between Nameless and Test Testson",
+        customInputs: {},
+        startTime: "[redacted/dynamic]",
+        endTime: "[redacted/dynamic]",
+        organizer: {
+          id: "[redacted/dynamic]",
+          name: "Unnamed",
+          email: "[redacted/dynamic]",
+          timeZone: "[redacted/dynamic]",
+          language: "[redacted/dynamic]",
+        },
+        responses: {
+          email: {
+            value: "test@example.com",
+            label: "email",
+          },
+          name: {
+            value: "Test Testson",
+            label: "name",
+          },
+        },
+        userFieldsResponses: {},
+        attendees: [
+          {
+            email: "test@example.com",
+            name: "Test Testson",
+            timeZone: "[redacted/dynamic]",
+            language: "[redacted/dynamic]",
+          },
+        ],
+        location: "[redacted/dynamic]",
+        destinationCalendar: [],
+        // hideCalendarNotes: false,
+        requiresConfirmation: "[redacted/dynamic]",
+        eventTypeId: "[redacted/dynamic]",
+        uid: "[redacted/dynamic]",
+        eventTitle: "Opt in",
+        eventDescription: null,
+        price: 0,
+        currency: "usd",
+        length: 30,
+        bookingId: "[redacted/dynamic]",
+        // metadata: { videoCallUrl: "[redacted/dynamic]" },
+        status: "REJECTED",
+        additionalInformation: "[redacted/dynamic]",
+      },
+    });
+
+    webhookReceiver.close();
+  });
+});
+
+test.describe("BOOKING_REQUESTED", async () => {
+  test("can book an event that requires confirmation and get a booking requested event", async ({
+    page,
+    users,
+    webhooks,
+  }) => {
+    // --- create a user
+    const user = await users.create();
+
+    // --- login as that user
+    await user.apiLogin();
+    const webhookReceiver = await webhooks.createReceiver();
+
+    // --- visit user page
+    await page.goto(`/${user.username}`);
+
+    // --- book the user's opt in
+    await bookOptinEvent(page);
+
+    // --- check that webhook was called
+
+    await webhookReceiver.waitForRequestCount(1);
+
+    const [request] = webhookReceiver.requestList;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const body = request.body as any;
+
+    body.createdAt = dynamic;
+    body.payload.startTime = dynamic;
+    body.payload.endTime = dynamic;
+    body.payload.location = dynamic;
+    for (const attendee of body.payload.attendees) {
+      attendee.timeZone = dynamic;
+      attendee.language = dynamic;
+    }
+    body.payload.organizer.id = dynamic;
+    body.payload.organizer.email = dynamic;
+    body.payload.organizer.timeZone = dynamic;
+    body.payload.organizer.language = dynamic;
+    body.payload.uid = dynamic;
+    body.payload.bookingId = dynamic;
+    body.payload.additionalInformation = dynamic;
+    body.payload.requiresConfirmation = dynamic;
+    body.payload.eventTypeId = dynamic;
+    body.payload.videoCallData = dynamic;
+    body.payload.appsStatus = dynamic;
+    body.payload.metadata.videoCallUrl = dynamic;
+
+    expect(body).toMatchObject({
+      triggerEvent: "BOOKING_REQUESTED",
+      createdAt: "[redacted/dynamic]",
+      payload: {
+        type: "opt-in",
+        title: "Opt in between Nameless and Test Testson",
+        customInputs: {},
+        startTime: "[redacted/dynamic]",
+        endTime: "[redacted/dynamic]",
+        organizer: {
+          id: "[redacted/dynamic]",
+          name: "Nameless",
+          email: "[redacted/dynamic]",
+          timeZone: "[redacted/dynamic]",
+          language: "[redacted/dynamic]",
+        },
+        responses: {
+          email: {
+            value: "test@example.com",
+            label: "email_address",
+          },
+          name: {
+            value: "Test Testson",
+            label: "your_name",
+          },
+        },
+        userFieldsResponses: {},
+        attendees: [
+          {
+            email: "test@example.com",
+            name: "Test Testson",
+            timeZone: "[redacted/dynamic]",
+            language: "[redacted/dynamic]",
+          },
+        ],
+        location: "[redacted/dynamic]",
+        destinationCalendar: null,
+        requiresConfirmation: "[redacted/dynamic]",
+        eventTypeId: "[redacted/dynamic]",
+        uid: "[redacted/dynamic]",
+        eventTitle: "Opt in",
+        eventDescription: null,
+        price: 0,
+        currency: "usd",
+        length: 30,
+        bookingId: "[redacted/dynamic]",
+        status: "PENDING",
+        additionalInformation: "[redacted/dynamic]",
+        metadata: { videoCallUrl: "[redacted/dynamic]" },
+      },
+    });
+
+    webhookReceiver.close();
+  });
+});
+
+test.describe("BOOKING_RESCHEDULED", async () => {
+  test("can reschedule a booking and get a booking rescheduled event", async ({
+    page,
+    users,
+    bookings,
+    webhooks,
+  }) => {
+    const user = await users.create();
+    const [eventType] = user.eventTypes;
+
+    await user.apiLogin();
+
+    const webhookReceiver = await webhooks.createReceiver();
+
+    const booking = await bookings.create(user.id, user.username, eventType.id, {
+      status: BookingStatus.ACCEPTED,
+    });
+
+    await page.goto(`/${user.username}/${eventType.slug}?rescheduleUid=${booking.uid}`);
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+
+    await page.locator('[data-testid="confirm-reschedule-button"]').click();
+
+    await expect(page.getByTestId("success-page")).toBeVisible();
+
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const newBooking = await prisma.booking.findFirst({ where: { fromReschedule: booking?.uid } })!;
+    expect(newBooking).not.toBeNull();
+
+    // --- check that webhook was called
+    await webhookReceiver.waitForRequestCount(1);
+
+    const [request] = webhookReceiver.requestList;
+
+    expect(request.body).toMatchObject({
+      triggerEvent: "BOOKING_RESCHEDULED",
+      payload: {
+        uid: newBooking?.uid,
+      },
+    });
+  });
+
+  test("when rescheduling to a booking that already exists, should send a booking rescheduled event with the existant booking uid", async ({
+    page,
+    users,
+    bookings,
+    webhooks,
+  }) => {
+    const { user, eventType, booking } = await createUserWithSeatedEventAndAttendees({ users, bookings }, [
+      { name: "John First", email: "first+seats@cal.com", timeZone: "Europe/Berlin" },
+      { name: "Jane Second", email: "second+seats@cal.com", timeZone: "Europe/Berlin" },
+    ]);
+
+    await prisma.eventType.update({
+      where: { id: eventType.id },
+      data: { requiresConfirmation: false },
+    });
+
+    await user.apiLogin();
+
+    const webhookReceiver = await webhooks.createReceiver();
+
+    const bookingAttendees = await prisma.attendee.findMany({
+      where: { bookingId: booking.id },
+      select: {
+        id: true,
+        email: true,
+      },
+    });
+
+    const bookingSeats = bookingAttendees.map((attendee) => ({
+      bookingId: booking.id,
+      attendeeId: attendee.id,
+      referenceUid: uuidv4(),
+    }));
+
+    await prisma.bookingSeat.createMany({
+      data: bookingSeats,
+    });
+
+    const references = await prisma.bookingSeat.findMany({
+      where: { bookingId: booking.id },
+      include: { attendee: true },
+    });
+
+    await page.goto(`/reschedule/${references[0].referenceUid}`);
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+
+    await page.locator('[data-testid="confirm-reschedule-button"]').click();
+
+    await expect(page.getByTestId("success-page")).toBeVisible();
+
+    const newBooking = await prisma.booking.findFirst({
+      where: {
+        attendees: {
+          some: {
+            email: bookingAttendees[0].email,
+          },
+        },
+      },
+    });
+
+    // --- ensuring that new booking was created
+    expect(newBooking).not.toBeNull();
+
+    // --- check that webhook was called
+    await webhookReceiver.waitForRequestCount(1);
+
+    const [firstRequest] = webhookReceiver.requestList;
+
+    expect(firstRequest?.body).toMatchObject({
+      triggerEvent: "BOOKING_RESCHEDULED",
+      payload: {
+        uid: newBooking?.uid,
+      },
+    });
+
+    await page.goto(`/reschedule/${references[1].referenceUid}`);
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+
+    await page.locator('[data-testid="confirm-reschedule-button"]').click();
+
+    await expect(page).toHaveURL(/.*booking/);
+
+    await webhookReceiver.waitForRequestCount(2);
+
+    const [_, secondRequest] = webhookReceiver.requestList;
+
+    expect(secondRequest?.body).toMatchObject({
+      triggerEvent: "BOOKING_RESCHEDULED",
+      payload: {
+        // in the current implementation, it is the same as the first booking
+        uid: newBooking?.uid,
+      },
+    });
+  });
+});
+
+test.describe("MEETING_ENDED, MEETING_STARTED", async () => {
+  test("should create/remove scheduledWebhookTriggers for existing bookings", async ({
+    page,
+    users,
+    bookings,
+  }, _testInfo) => {
+    const user = await users.create();
+    await user.apiLogin();
+    const tomorrow = dayjs().add(1, "day");
+    const [eventType] = user.eventTypes;
+    bookings.create(user.id, user.name, eventType.id);
+    bookings.create(user.id, user.name, eventType.id, { startTime: dayjs().add(2, "day").toDate() });
+
+    //create a new webhook with meeting ended trigger here
+    await page.goto("/settings/developer/webhooks");
+    // --- add webhook
+    await page.click('[data-testid="new_webhook"]');
+
+    await page.fill('[name="subscriberUrl"]', "https://www.example.com");
+
+    await Promise.all([
+      page.click("[type=submit]"),
+      page.waitForURL((url) => url.pathname.endsWith("/settings/developer/webhooks")),
+    ]);
+
+    const scheduledTriggers = await prisma.webhookScheduledTriggers.findMany({
+      where: {
+        webhook: {
+          userId: user.id,
+        },
+      },
+      select: {
+        payload: true,
+        webhook: {
+          select: {
+            userId: true,
+            id: true,
+            subscriberUrl: true,
+          },
+        },
+        startAfter: true,
+      },
+    });
+
+    const existingUserBookings = await prisma.booking.findMany({
+      where: {
+        userId: user.id,
+        startTime: {
+          gt: new Date(),
+        },
+      },
+    });
+
+    const meetingStartedTriggers = scheduledTriggers.filter((trigger) =>
+      trigger.payload.includes("MEETING_STARTED")
+    );
+    const meetingEndedTriggers = scheduledTriggers.filter((trigger) =>
+      trigger.payload.includes("MEETING_ENDED")
+    );
+
+    expect(meetingStartedTriggers.length).toBe(existingUserBookings.length);
+    expect(meetingEndedTriggers.length).toBe(existingUserBookings.length);
+
+    expect(meetingStartedTriggers.map((trigger) => trigger.startAfter)).toEqual(
+      expect.arrayContaining(existingUserBookings.map((booking) => booking.startTime))
+    );
+    expect(meetingEndedTriggers.map((trigger) => trigger.startAfter)).toEqual(
+      expect.arrayContaining(existingUserBookings.map((booking) => booking.endTime))
+    );
+
+    page.reload();
+
+    // edit webhook and remove trigger meeting ended trigger
+    await page.click('[data-testid="webhook-edit-button"]');
+    await page.getByRole("button", { name: "Remove Meeting Ended" }).click();
+
+    await Promise.all([
+      page.click("[type=submit]"),
+      page.waitForURL((url) => url.pathname.endsWith("/settings/developer/webhooks")),
+    ]);
+
+    const scheduledTriggersAfterRemovingTrigger = await prisma.webhookScheduledTriggers.findMany({
+      where: {
+        webhook: {
+          userId: user.id,
+        },
+      },
+    });
+
+    const newMeetingStartedTriggers = scheduledTriggersAfterRemovingTrigger.filter((trigger) =>
+      trigger.payload.includes("MEETING_STARTED")
+    );
+    const newMeetingEndedTriggers = scheduledTriggersAfterRemovingTrigger.filter((trigger) =>
+      trigger.payload.includes("MEETING_ENDED")
+    );
+
+    expect(newMeetingStartedTriggers.length).toBe(existingUserBookings.length);
+    expect(newMeetingEndedTriggers.length).toBe(0);
+
+    // disable webhook
+    await page.click('[data-testid="webhook-switch"]');
+
+    await page.waitForLoadState("networkidle");
+
+    const scheduledTriggersAfterDisabling = await prisma.webhookScheduledTriggers.findMany({
+      where: {
+        webhook: {
+          userId: user.id,
+        },
+      },
+      select: {
+        payload: true,
+        webhook: {
+          select: {
+            userId: true,
+          },
+        },
+        startAfter: true,
+      },
+    });
+
+    expect(scheduledTriggersAfterDisabling.length).toBe(0);
+  });
+});
+
+test.describe("FORM_SUBMITTED", async () => {
+  test("on submitting user form, triggers user webhook", async ({ page, users, routingForms, webhooks }) => {
+    const user = await users.create();
+
+    await user.apiLogin();
+    const webhookReceiver = await webhooks.createReceiver();
+    await page.waitForLoadState("networkidle");
+
+    const form = await routingForms.create({
+      name: "Test Form",
+      userId: user.id,
+      teamId: null,
+      fields: [
+        {
+          type: "text",
+          label: "Name",
+          identifier: "name",
+          required: true,
+        },
+      ],
+    });
+
+    await page.waitForLoadState("networkidle");
+
+    await gotoRoutingLink({ page, formId: form.id });
+    const fieldName = "name";
+    await page.fill(`[data-testid="form-field-${fieldName}"]`, "John Doe");
+    page.click('button[type="submit"]');
+
+    await webhookReceiver.waitForRequestCount(1);
+
+    const [request] = webhookReceiver.requestList;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const body = request.body as any;
+    body.createdAt = dynamic;
+    expect(body).toEqual({
+      triggerEvent: "FORM_SUBMITTED",
+      createdAt: dynamic,
+      payload: {
+        formId: form.id,
+        formName: form.name,
+        teamId: null,
+        responses: {
+          name: {
+            value: "John Doe",
+          },
+        },
+      },
+      name: "John Doe",
+    });
+
+    webhookReceiver.close();
+  });
+
+  test("on submitting team form, triggers team webhook", async ({ page, users, routingForms, webhooks }) => {
+    const user = await users.create(null, {
+      hasTeam: true,
+    });
+    await user.apiLogin();
+    const { webhookReceiver, teamId } = await webhooks.createTeamReceiver();
+    const form = await routingForms.create({
+      name: "Test Form",
+      userId: user.id,
+      teamId: teamId,
+      fields: [
+        {
+          type: "text",
+          label: "Name",
+          identifier: "name",
+          required: true,
+        },
+      ],
+    });
+
+    await page.waitForLoadState("networkidle");
+
+    await gotoRoutingLink({ page, formId: form.id });
+    const fieldName = "name";
+    await page.fill(`[data-testid="form-field-${fieldName}"]`, "John Doe");
+    page.click('button[type="submit"]');
+
+    await webhookReceiver.waitForRequestCount(1);
+
+    const [request] = webhookReceiver.requestList;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const body = request.body as any;
+    body.createdAt = dynamic;
+    expect(body).toEqual({
+      triggerEvent: "FORM_SUBMITTED",
+      createdAt: dynamic,
+      payload: {
+        formId: form.id,
+        formName: form.name,
+        teamId,
+        responses: {
+          name: {
+            value: "John Doe",
+          },
+        },
+      },
+      name: "John Doe",
+    });
+
+    webhookReceiver.close();
+  });
+});

calcom/apps/web/playwright/wipe-my-cal.e2e.ts

@@ -0,0 +1,56 @@
+import { expect } from "@playwright/test";
+
+import _dayjs from "@calcom/dayjs";
+import prisma from "@calcom/prisma";
+
+import { test } from "./lib/fixtures";
+
+test.describe.configure({ mode: "parallel" });
+
+test.afterEach(({ users }) => users.deleteAll());
+
+// We default all dayjs calls to use Europe/London timezone
+const dayjs = (...args: Parameters<typeof _dayjs>) => _dayjs(...args).tz("Europe/London");
+
+test.describe("Wipe my Cal App Test", () => {
+  test("Browse upcoming bookings and validate button shows and triggering wipe my cal button", async ({
+    page,
+    users,
+    bookings,
+  }) => {
+    const pro = await users.create();
+    const [eventType] = pro.eventTypes;
+    await prisma.credential.create({
+      data: {
+        key: {},
+        type: "wipemycal_other",
+        userId: pro.id,
+        appId: "wipe-my-cal",
+      },
+    });
+    await bookings.create(
+      pro.id,
+      pro.username,
+      eventType.id,
+      {},
+      dayjs().endOf("day").subtract(29, "minutes").toDate(),
+      dayjs().endOf("day").toDate()
+    );
+    await bookings.create(pro.id, pro.username, eventType.id, {});
+    await bookings.create(pro.id, pro.username, eventType.id, {});
+    await pro.apiLogin();
+    await page.goto("/bookings/upcoming");
+    await expect(page.locator("data-testid=wipe-today-button")).toBeVisible();
+
+    const $openBookingCount = await page.locator('[data-testid="bookings"] > *').count();
+    const $todayBookingCount = await page.locator('[data-testid="today-bookings"] > *').count();
+    expect($openBookingCount + $todayBookingCount).toBe(3);
+
+    await page.locator("data-testid=wipe-today-button").click();
+
+    // Don't await send_request click, otherwise mutation can possibly occur before observer is attached
+    page.locator("data-testid=send_request").click();
+    // There will not be any today-bookings
+    await expect(page.locator('[data-testid="today-bookings"]')).toBeHidden();
+  });
+});

calcom/apps/web/playwright/workflow.e2e.ts

@@ -0,0 +1,80 @@
+import { MembershipRole, WorkflowTriggerEvents } from "@calcom/prisma/enums";
+
+import { loginUser, loginUserWithTeam } from "./fixtures/regularBookings";
+import { test } from "./lib/fixtures";
+import { bookEventOnThisPage } from "./lib/testUtils";
+
+test.describe("Workflow Tab - Event Type", () => {
+  test.describe("Check the functionalities of the Workflow Tab", () => {
+    test.describe("User Workflows", () => {
+      test.beforeEach(async ({ page, users }) => {
+        await loginUser(users);
+        await page.goto("/workflows");
+      });
+
+      test("Creating a new workflow", async ({ workflowPage }) => {
+        const { createWorkflow, assertListCount } = workflowPage;
+
+        await createWorkflow({ name: "" });
+        await assertListCount(3);
+      });
+
+      test("Editing an existing workflow", async ({ workflowPage, page }) => {
+        const { saveWorkflow, fillNameInput, editSelectedWorkflow, hasWorkflowInList } = workflowPage;
+
+        await editSelectedWorkflow("Test Workflow");
+        await fillNameInput("Edited Workflow");
+        await saveWorkflow();
+        await page.getByTestId("go-back-button").click();
+        await hasWorkflowInList("Edited Workflow");
+      });
+
+      test("Deleting an existing workflow", async ({ page, workflowPage }) => {
+        const { hasWorkflowInList, deleteAndConfirm, assertListCount } = workflowPage;
+        const firstWorkflow = page
+          .getByTestId("workflow-list")
+          .getByTestId(/workflow/)
+          .first();
+
+        await deleteAndConfirm(firstWorkflow);
+        await hasWorkflowInList("Edited Workflow", true);
+        await assertListCount(1);
+      });
+
+      test("Create an action and check if workflow is triggered", async ({ page, users, workflowPage }) => {
+        const { createWorkflow, assertWorkflowReminders } = workflowPage;
+        const [user] = users.get();
+        const [eventType] = user.eventTypes;
+
+        await createWorkflow({ name: "A New Workflow", trigger: WorkflowTriggerEvents.NEW_EVENT });
+        await page.goto(`/${user.username}/${eventType.slug}`);
+        await page.click('[data-testid="incrementMonth"]');
+        await bookEventOnThisPage(page);
+        await assertWorkflowReminders(eventType.id, 1);
+      });
+    });
+
+    test.describe("Team Workflows", () => {
+      test("Admin user", async ({ page, users, workflowPage }) => {
+        const { createWorkflow, assertListCount } = workflowPage;
+
+        await loginUserWithTeam(users, MembershipRole.ADMIN);
+        await page.goto("/workflows");
+
+        await createWorkflow({ name: "A New Workflow", isTeam: true });
+        await assertListCount(4);
+      });
+
+      test("Member user", async ({ page, users, workflowPage }) => {
+        const { hasReadonlyBadge, selectedWorkflowPage, workflowOptionsAreDisabled } = workflowPage;
+
+        await loginUserWithTeam(users, MembershipRole.MEMBER);
+        await page.goto("/workflows");
+
+        await workflowOptionsAreDisabled("Team Workflow");
+        await selectedWorkflowPage("Team Workflow");
+        await hasReadonlyBadge();
+      });
+    });
+  });
+});